/**
 * Landing page — "The Record"
 *
 * Chosen from three candidate layouts on 2026-07-21. See
 * docs/briefs/2026-07-21-landing-page.md.
 *
 * Photography-forward. Full-bleed evidence at the top with an enforced
 * scrim, then the work itself as a gallery band, with type staying out of
 * the way. The catalog becomes the counterweight: a single graphite
 * object seated on paper, which is the one place the equipment voice
 * takes over from the editorial one.
 *
 * Anchor reference: a gallery of the work.
 *
 * Layout only. Colour, type, depth, and motion come from tokens.css;
 * components come from base.css.
 */

/* =====================================================================
   HERO
   ===================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(78vh, 720px);
  padding-block: var(--space-5xl) var(--space-2xl);
  overflow: hidden;
  background: var(--graphite-900);
  isolation: isolate;
}

.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.hero-media img {
  object-fit: cover;
  /* The console at the back of the house sits low in the frame; biasing
     the crop upward keeps the lit stage visible as the hero shortens. */
  object-position: 50% 42%;
}

/*
 * The enforced scrim. PRODUCT.md requires a guaranteed contrast floor
 * behind text on photography, never a hopeful one, so this is two
 * layers: a flat base tint that applies everywhere regardless of what
 * the photograph is doing, plus a bottom-weighted gradient under the
 * text block itself.
 */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Layer 2: bottom-weighted gradient under the text block. */
    linear-gradient(
      to top,
      oklch(18% 0.014 252 / 0.78) 0%,
      oklch(18% 0.014 252 / 0.68) 48%,
      oklch(18% 0.014 252 / 0.42) 82%,
      oklch(18% 0.014 252 / 0.10) 100%
    ),
    /* Layer 1: the enforced floor. A flat tint that applies regardless of
       what the photograph is doing, so the worst case is a known quantity
       rather than whatever pixel happens to sit behind a letterform.

       These stops are tuned against measurement, not estimation. Sampling
       the brightest background pixel inside each text element's own box,
       with the copy hidden, gives:
         eyebrow  4.91:1 (needs 4.5)
         headline 5.74:1 (needs 3.0, large text)
         lede     8.11:1 (needs 4.5)
       Darkening further buys nothing and costs the photograph, which is
       the entire point of this layout. If the hero image is ever swapped,
       re-measure: a brighter photograph will need the 82% stop raised. */
    linear-gradient(
      oklch(18% 0.014 252 / 0.26),
      oklch(18% 0.014 252 / 0.26)
    );
}

/* No max-width here: .hero-content also carries .shell, and overriding
   its max-width would drop the hero copy out of the page's measure and
   align it to the viewport edge instead of the content column. */
.hero-content {
  position: relative;
}

/*
 * Paper, not signal: the eyebrow is a label, not a control, and blue on a
 * non-interactive element breaks the Signal Rule in DESIGN.md §2.
 *
 * paper-000 rather than paper-200 because this is 12px text sitting high
 * in the hero, where the scrim gradient is weakest. Measured against the
 * brightest pixel inside its own bounding box, paper-200 lands at 3.95:1
 * and paper-000 at 4.91:1; only the latter clears the 4.5:1 commitment.
 */
.hero-eyebrow {
  margin: 0 0 var(--space-lg);
  color: var(--paper-000);
}

.hero-title {
  max-width: 18ch;
  color: var(--paper-000);
}

.hero-lede {
  margin-top: var(--space-xl);
  color: var(--paper-200);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

/* The credit sits outside the shell, against the frame edge, so it reads
   as a caption on the photograph rather than as page copy. */
.hero-credit {
  position: relative;
  margin: var(--space-3xl) 0 0;
  /* Matches the shell's inner edge so the credit lines up with the copy
     above it rather than with the viewport. */
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-gutter);
  color: var(--paper-200);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
}

.hero-credit span {
  display: block;
  max-width: 52ch;
}

@media (min-width: 1024px) {
  .hero {
    min-height: min(84vh, 820px);
  }

  .hero-title {
    max-width: 15ch;
  }

  .hero-lede {
    max-width: 54ch;
  }
}

/* =====================================================================
   SHARED SECTION FURNITURE
   ===================================================================== */

.section-eyebrow {
  margin: 0 0 var(--space-lg);
  color: var(--ink-muted);
}

.section-head {
  max-width: var(--measure-prose);
  margin-bottom: var(--space-3xl);
}

/* =====================================================================
   THE RECORD
   The strip runs wider than the text shell so the photographs read as
   the page's subject rather than as illustrations inside a column.
   ===================================================================== */

.record {
  padding-block: var(--space-5xl);
}

.record-head {
  display: grid;
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}

@media (min-width: 900px) {
  .record-head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-5xl);
    align-items: end;
  }
}

.record-note {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.record-strip {
  display: grid;
  gap: var(--space-xl);
  padding-inline: var(--shell-gutter);
  max-width: var(--shell-wide);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .record-strip {
    /* Unequal columns on purpose. Three equal frames would read as a
       card grid; a wide centre frame reads as a record. */
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.25fr) minmax(0, 0.78fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

.record-item {
  margin: 0;
}

.record-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-panel);
}

.record-item-wide img {
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
  /* The wide centre frame is shorter than its neighbours, so it is
     nudged down to centre against them optically.

     24px, not 64px. At the wide shell the outer frames run 366x488 and
     the centre one 587x440, so true optical centring is (488-440)/2 =
     24px. The 64px it carried put the centre frame 40px below centre and
     dropped its caption clear of the other two, which is what made the
     row read as three unrelated photographs rather than as one record.
     Re-measure this if either column ratio changes. */
  .record-item-wide {
    margin-top: var(--space-xl);
  }
}

.record-item figcaption {
  margin-top: var(--space-lg);
  max-width: 40ch;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.record-kind {
  margin-bottom: var(--space-xs);
  color: var(--ink);
}

/* =====================================================================
   CATALOG
   ===================================================================== */

.catalog {
  padding-block: var(--space-5xl);
  background: var(--paper-100);
  border-block: 1px solid var(--paper-200);
}

.catalog-grid {
  display: grid;
  gap: var(--space-3xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .catalog-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: var(--space-5xl);
  }
}

.catalog-lede {
  margin-top: var(--space-lg);
  color: var(--ink-muted);
}

.catalog-footnote {
  margin: var(--space-xl) 0 0;
  color: var(--ink-muted);
  font-size: 1rem;
}

/* The single graphite object on the page: a faceplate holding the counts
   as a readout.

   The panel, its rows, the hover bleed, and the loading/empty/error
   states are all .readout-panel / .readout-row in base.css. They used to
   be implemented here as .catalog-panel / .panel-row, and were rebuilt a
   second time for the about page before being extracted into the base
   layer. Nothing panel-specific remains on this page. */

.catalog-rail {
  /* Reserves the loaded height so the section below cannot jump when the
     four category rows arrive. Four rows at the component's row height;
     re-measure if the category count changes. */
  min-height: 276px;
}

/* The cased fixtures, seated in the copy column under the footnote.

   A .plate-inset from base.css §8.1: the frame, the caption, and the
   480px cap all come from the component. The role is the right one
   because this section's credential is the readout beside it and the
   photograph annotates the sentence about what ships in the case. At
   column width the two objects carry equal mass and the counts stop
   leading — which is why this figure is the one place on the site
   exempt from the 75% proportion rule, by design rather than by
   accident.

   Only the top margin is set here. The image keeps its baked 4:3; the
   crop lives in the source file. */
.catalog-figure {
  margin-top: var(--space-2xl);
}

/* =====================================================================
   THE WALK
   Three steps across one row: in this lane the argument supports the
   photography rather than carrying the page, so it is given less
   vertical weight than in demo A.
   ===================================================================== */

.walk {
  padding-block: var(--space-5xl);
}

.walk-list {
  display: grid;
  gap: var(--space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .walk-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3xl);
  }
}

.walk-step {
  padding-top: var(--space-xl);
  border-top: 2px solid var(--graphite-900);
}

.walk-number {
  display: block;
  margin-bottom: var(--space-md);
  color: var(--graphite-500);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.walk-step p {
  margin: var(--space-md) 0 0;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* =====================================================================
   ANTICIPATION
   ===================================================================== */

.anticipate {
  padding-block: var(--space-4xl) var(--space-5xl);
  border-top: 1px solid var(--paper-200);
}

.anticipate-grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 900px) {
  .anticipate-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4xl);
  }
}

.anticipate-copy p {
  color: var(--ink-muted);
}

.anticipate-included-label {
  margin: 0 0 var(--space-lg);
  color: var(--ink-muted);
}

/* =====================================================================
   CLOSE
   ===================================================================== */

.close {
  padding-block: 0 var(--space-5xl);
}

.close-inner {
  display: grid;
  gap: var(--space-2xl);
  align-items: end;
  padding-top: var(--space-3xl);
  border-top: 1px solid var(--paper-300);
}

@media (min-width: 900px) {
  .close-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4xl);
  }
}

.close-lede {
  margin-top: var(--space-lg);
  color: var(--ink-muted);
}

.close-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}