/* ==========================================================================
   v6 — BlackCat on paper (Sep 2026). ONE production layer, loaded after tokens.css, base.css
   and crt.css on every page. It replaces the review files (v5.css, v6-paper.css,
   v6-hero-paper.css and the two mock files) with Julio's picks baked in:
     white hero + white masthead · outline lockup drawn in ink · full-height first screen ·
     "How we think" on white with a grey chart line · white footer · studio claim + stories
     side by side · cutouts on the sheet.

   PALETTE — white, black, green. No off-white, no orange. Greys only as tints of black.
       black on white        19.6:1  -> all type, all rules
       black on green        15.15:1 -> green is a FILL with black type on it
       green on black        15.15:1 -> small black plates on white carry green type
       white on black        19.6:1  -> type inside the few black blocks
       green on white        ~1.3:1  -> NEVER as text, line or focus ring
   Black survives as a colour BLOCK: the services band, the AZ Garage Floors tile, the "next
   case" plate, the image lightbox and the 404 game screen.

   WIDTHS — one frame. Every block of text starts on the same left edge (--frame-pad: 48px at
   1440, 24px on a phone). Above 1440 the frame centres and the image grids stop growing, so
   photos are never stretched past their source.

   TO SHIP: see _design/v6-paper/TRANSITION.md. In short: css/v6.css + js/v6.js move to /css and
   /js, the staged pages replace their live twins, CLAUDE.md §4 gets rewritten to match the
   palette above — or the next pass will "fix" the site back to dark.
   ========================================================================== */

/* ------------------------------------------------------------ 0. tokens */

:root {
  --paper: #FFFFFF;
  --cream: #FFFFFF;                     /* retired: every old cream use now resolves to white */
  --bg: var(--paper);
  --fg: var(--ink);
  --ink-2: rgba(14, 11, 7, .68);        /* secondary type on white: 6:1 */
  --ink-3: rgba(14, 11, 7, .42);        /* the grey: chart line, disabled marks. Never body type */
  --ink-line: rgba(14, 11, 7, .16);     /* row hairlines */
  --muted: var(--ink-2);                /* crt.css's secondary-type token, now dark on white */
  --line: var(--ink-line);
  --line-faint: rgba(14, 11, 7, .08);
  --grid: var(--ink);
  --glow-rule: none;                    /* no phosphor glow anywhere on paper */

  /* The frame. --gutter is the side margin at every width; --frame-pad is the padding a
     full-width element uses so its CONTENT lands on the frame, which centres above 1440. Built
     on 100vw rather than %, so it resolves the same at any nesting depth (the case-study plate
     bleeds out of a padded fold and still lands on the line). */
  --gutter: clamp(1.5rem, 3.4vw, 3rem);
  --frame-pad: max(var(--gutter), calc((100vw - var(--content-max)) / 2 + var(--gutter)));
}

/* ------------------------------------------------------------ 1. the surface */

html { color-scheme: light; }
body { background: var(--paper); color: var(--ink); }
body::before { display: none; }   /* the green grain was a screen blend: invisible on white, pure cost */
.screen, .paper { background-color: var(--paper); color: var(--ink); }

/* Every INHERITED green — link colour, focus ring — lands at 1.3:1 on white and stops existing.
   Force them to black once, here, and re-assert the few crt.css rules that name green directly. */
a { color: var(--ink); text-decoration-color: currentColor; }
:focus-visible { outline-color: var(--ink); }
.cue:focus-visible, .rail__btn:focus-visible, .quotes:focus-visible,
.grid:focus-visible, .stories:focus-visible, .cs-zoom:focus-visible,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--ink); }

/* The sweep: its beam becomes a black pass over the sheet and the green flash is suppressed.
   !important only because crt.js writes the flash colour inline — see TRANSITION.md. */
.sweep-line { background: var(--ink); box-shadow: none; }
[data-sweep-item] { color: var(--ink) !important; }
/* The one revealed element that is NOT black type: the case-study plate is green type on a black
   plate. Without this the rule above paints it black on black. (Audited: every other
   data-sweep-item on every page rests on black type.) */
.cs-plate[data-sweep-item] { color: var(--green) !important; }

/* The page-to-page wipe: a white field with a black beam, not a black field with a green one. */
.retrace__field { background: var(--paper); }
.retrace__beam  { background: var(--ink); box-shadow: none; }


/* ------------------------------------------------------------ 2. the frame (widths) */

.wrap { max-width: none; margin: 0; padding-inline: var(--frame-pad); }
.site-header { padding-inline: var(--frame-pad); }
.nav-toggle { margin-right: -8px; }              /* the bars, not the hit area, meet the frame */
.mv__head { padding-inline: var(--frame-pad); }
.more { padding-inline: var(--frame-pad); }
.door { padding-inline: var(--frame-pad); }
.site-footer { padding-inline: var(--frame-pad); }
.rail > .rail__bar { margin-inline: var(--frame-pad); }
.rail > .rail__ctl { padding-inline: var(--frame-pad); }
.wrap .rail > .rail__bar { margin-inline: 0; }   /* already inside the frame */
.wrap .rail > .rail__ctl { padding-inline: 0; }

/* The two image rails stop growing at the frame, so a 4-up tile is never upscaled past its
   source on a big monitor. Cells carry the gutter, so the first column's text still sits on the
   frame line. */
.grid, .quotes { max-width: var(--content-max); margin-inline: auto; }


/* ------------------------------------------------------------ 3. masthead */

.site-header { background: color-mix(in srgb, var(--paper) 90%, transparent);
               border-bottom-color: var(--ink); }
.site-header__mark .logotype-mark,
.nav-toggle__bar { background: var(--ink); }


/* ------------------------------------------------------------ 4. running heads */

.mv__head { background: color-mix(in srgb, var(--paper) 92%, transparent);
            color: var(--ink); border-bottom-color: var(--ink); }

/* Section titles ("/ Selected work", "/ How we think"…) into Cook Conthic, per Julio's request.
   The mono side (the "P. 00X" code) stays mono on purpose — CLAUDE.md §4 reserves mono for
   case codes and section numbers, and this now mirrors the case-study fold, which already pairs
   a mono code with a Conthic title (.cs-fold__no + .cs-fold__title).
   Sized at 1rem/16px rather than swapped in place at the inherited .6875rem/11px: §4 puts a
   ~15px floor under Cook Conthic before its condensed letterforms mush together, and 11px is
   well under that. tracking loosened to match Conthic's own rhythm — mono's wide letter-spacing
   was compensating for a face this one doesn't need it for. */
/* Bug: "/ How we think" hides under the partner logos while scrolling. Root cause has nothing
   to do with z-index or scroll math — .pin__stage is `display: grid`, and CSS Grid's default
   align-items:stretch stretches a `position: sticky` row-1 item to fill the ROW's auto-sized
   track rather than sizing to its own content. Measured: this ONE mv__head (the only one that
   lives inside a grid, not a plain block section) was 615px tall instead of ~50px — its box
   extended over the partners logos above, which then won every hit-test in that band regardless
   of DOM order. align-self:start makes it size to its content, like every other running head. */
.pin__stage .mv__head { align-self: start; }

.mv__head span:first-child {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
}

/* Only the head that is actually PINNED rides up with the hiding masthead (js/v6.js marks it
   .is-stuck via the same generic sentinel it uses for every .mv__head, P.003's included — that
   part needs no special case). crt.css moved every head unconditionally, so "/ Selected work" —
   still in normal flow under the services band — jumped over the band. Mobile heads are static
   and never move.
   The P.003 head previously had its OWN unconditional clause here ("keeps the old behaviour")
   on the theory that its sticky stage needed different treatment. It didn't: that clause fired
   the -77px shift the instant hdr-hidden went true ANYWHERE on the page, regardless of whether
   this head had actually reached its pinned position yet — pulling it up into the tail end of
   the partner-logo strip above it while still mid-scroll. That's the "hides under the client
   logos" bug. Its own sentinel already tracks the real state correctly; it just needed to be
   governed by the same .is-stuck rule as everything else. */
@media (min-width: 768px) {
  html.hdr-hidden .mv__head { transform: none; }
  html.hdr-hidden .mv__head.is-stuck { transform: translateY(calc(var(--header-h) * -1)); }
}
.mv__sentinel { display: block; height: 1px; margin-bottom: -1px; visibility: hidden; pointer-events: none; }


/* ------------------------------------------------------------ 5. hero (P.001) */

/* Graph paper. Size and position are restated because `.screen, .paper` above set a
   background-color only — but any future `background:` shorthand would reset them to one
   hero-sized tile, which is exactly how the grid vanished in review. */
.hero {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right,  rgba(14, 11, 7, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 11, 7, .09) 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: center top;
}

/* The lockup, drawn in ink by the trace and left as an outline. The phosphor bloom and pulse
   mean nothing in ink — an ink glow is a smudge — so they are off, not recoloured. */
.hero .beam { stroke: var(--ink); }
/* Both selectors: crt.css starts the pulse on `.hero.is-settled .beam-pulse`, which outranks a
   plain `.hero .beam-pulse` — without the second one the bloom would throb as a grey smudge. */
.hero .beam-pulse,
.hero.is-settled .beam-pulse { opacity: 0; animation: none; }
.hero.is-settled .beam-glow { filter: none; }

.statement { color: var(--ink); font-size: clamp(var(--step-3), 3.4vw, 3rem); }   /* §4: never under ~40px */
.cue span { color: var(--ink); }
.cue:hover span, .cue:focus-visible span { color: var(--ink); text-decoration: underline;
                                           text-underline-offset: .3em; }


/* ------------------------------------------------------------ 6. services band */
/* White type on black, running as a marquee. Static by default — exactly the old band — so
   no-JS and reduced motion get a complete strip; js/v6.js clones the list into two identical
   halves and adds .is-running, and crt.css's marqueeRun (0 -> -50%) loops with no seam. */

.plate { display: block; overflow: hidden; padding: 0; background: var(--ink); color: #FFFFFF; }
.plate__track { display: flex; }
.plate__list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
               gap: var(--space-1) var(--space-3); width: 100%;
               list-style: none; margin: 0; padding: var(--space-1) var(--frame-pad); }
.plate.is-running .plate__track { width: max-content; }
.plate.is-running .plate__list { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start;
                                 width: auto; gap: 0; padding-inline: 0; }
.plate.is-running .plate__list li { white-space: nowrap; }
.plate.is-running .plate__list li::after { content: "/" / ""; margin-inline: var(--space-4); color: var(--green); }
@media (prefers-reduced-motion: no-preference) {
  .plate.is-running .plate__track { animation: marqueeRun var(--plate-dur, 50s) linear infinite; }
  .plate.is-running .plate__track.is-paused,
  .plate.is-running:hover .plate__track { animation-play-state: paused; }   /* moving text must stop */
}


/* ------------------------------------------------------------ 7. work tiles (home + /work) */

/* The grid lines are drawn BY THE TILES — a 1px shadow into the grid's 1px gap — not painted as
   the grid's background. A painted background shows through any cell the grid does not fill:
   /work's last row held one tile beside a three-cell black slab. Empty cells now stay white. */
.grid { background: none; }
.tile { background: var(--paper); padding: 0; gap: 0; box-shadow: 0 0 0 1px var(--ink); }

/* /work: ten tiles, four columns. crt.css widened every 6th tile (6n+1 AND 6n+6), so the 1st, 6th
   and 7th were all wide: 13 cells — three full rows and one tile stranded on a fourth. Two wide
   tiles per ten (the 1st and 6th) is exactly 12: [wide · ·] [· · wide] [· · · ·]. */
@media (min-width: 1024px) {
  .grid--index .tile:nth-child(6n + 1),
  .grid--index .tile:nth-child(6n + 6) { grid-column: auto; }
  .grid--index .tile:nth-child(6n + 1) .tile__img,
  .grid--index .tile:nth-child(6n + 6) .tile__img { aspect-ratio: 4/5; }
  /* v6: only position 6 (AZ Garage Floors — the site's one genuinely landscape real photo) is
     wide. Position 1 (Social Church) was ALSO forced wide here, cover-cropping that portrait
     photo (842x1122) down to a thin horizontal band on every load — see index.html for the same
     fix. Row math with one wide tile of ten: rows 1-2 fill exactly (4+4); row 3 holds the
     remaining 2 as a short row — an empty cell there renders white (.grid paints no background
     of its own), not the black slab a painted-grid background used to leave. */
  .grid--index .tile:nth-child(10n + 6) { grid-column: span 2; }
  .grid--index .tile:nth-child(10n + 6) .tile__img { aspect-ratio: 16/10; }
}
.tile__media { position: relative; display: block; }
.tile__code { top: var(--space-2); left: var(--space-2); }
.tile__meta { display: flex; flex-direction: column; gap: 6px;
              padding: var(--space-2) var(--gutter) var(--space-3); }
.tile__cat { opacity: 1; color: var(--ink-2); }

/* Cutouts (8 of the 10 exports are 68–90% transparent) sit on the sheet; contain keeps the
   object whole. White artwork keeps a black block, or it would vanish. */
.tile--cut .tile__img { object-fit: contain; background: var(--paper); }
.tile--cut-ink .tile__img { object-fit: cover; background: var(--ink); }

/* Small plates cannot be green on white — they have no edge — so they invert: black with green
   type. Hover flips back to the green block. */
.tile__go { background: var(--ink); color: var(--green); }
.tile--case:hover .tile__go,
.tile--case:focus-visible .tile__go { background: var(--green); color: var(--ink); }

/* The case flood: the case study's own title (approved copy) on green, over the image on hover
   and focus; under it, as a strip, on touch. */
.tile__flood { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tile__flood { position: absolute; inset: 0; display: flex; align-items: flex-end;
                 padding: var(--space-3); background: var(--green); color: var(--ink);
                 opacity: 0; pointer-events: none; }
  .tile--case:hover .tile__flood, .tile--case:focus-visible .tile__flood { opacity: 1; }
  .tile__idea { font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
                font-size: clamp(var(--step-3), 3.2vw, var(--step-4)); line-height: .92; }
  .tile--wide .tile__idea { font-size: clamp(var(--step-3), 4.8vw, var(--step-5)); max-width: 12ch; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tile__flood { transition: opacity 200ms ease; }
}
@media (hover: none) {
  .tile__flood { display: block; padding: var(--space-2) var(--gutter); background: var(--green); color: var(--ink); }
  .tile__idea { font-family: var(--font-text); font-weight: 700; font-size: .8125rem;
                letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
}

.more { color: var(--ink); border-top-color: var(--ink); }
.partners__logo img { filter: none; }             /* the source marks are drawn in black */


/* ------------------------------------------------------------ 8. how we think (P.003) */

.pin, .pin__stage { background-color: var(--paper); color: var(--ink); }
.pin__stage {
  background-image:
    linear-gradient(to right,  rgba(14, 11, 7, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 11, 7, .06) 1px, transparent 1px);
}
.pin__scope { border-bottom-color: var(--ink); }
.trace--1 { stroke: var(--ink); }
.trace--2 { stroke: var(--ink-3); }
.pin__line { color: var(--ink); }
/* The argument hangs off the frame's right edge instead of an arbitrary 6vw. */
.pin__copy { padding-inline: 0; margin-right: var(--frame-pad); }


/* ------------------------------------------------------------ 9. studio (P.004) */
/* The claim and its proof, together: headline left and sticky, the three stories right. */

.studio__body { padding-block: var(--space-8) var(--space-7); }
.studio__lead .title { font-size: clamp(var(--step-3), 5vw, var(--step-5)); }
.studio__lead .sub { max-width: 30ch; }
.studio .stories { margin-top: var(--space-5); }
@media (min-width: 1024px) {
  .studio__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
                  column-gap: var(--space-7); align-items: start; }
  .studio__lead { position: sticky; top: calc(var(--header-h) + var(--space-7)); }
  .studio .stories { margin-top: 0; }
  .studio .story:first-child { border-top: 0; padding-top: 0; }
}
.story { border-top-color: var(--ink-line); }
.story__no { color: var(--ink); opacity: 1; }
.story__go { background: var(--ink); color: var(--green); }
.story__go:hover, .story__go:focus-visible { background: var(--green); color: var(--ink); }
.crew__role { opacity: 1; color: var(--ink-2); }


/* ------------------------------------------------------------ 10. the record (P.005) */

/* Dividers are drawn ON the cards, not painted as the rail's background: a painted rail showed
   as a solid slab wherever it was wider than its four cards (a black box on wide screens). */
.quotes { background: none; gap: 0; border-block-color: var(--ink); }
.quote { background: var(--paper); border-right: 1px solid var(--ink);
         padding-inline: var(--gutter); }
.quote p { color: var(--ink); }
.quote__chip { background: var(--ink); color: var(--green); }
.quote cite { color: var(--ink-2); }
.quote cite span { color: var(--ink); }

.rail__bar { background: var(--ink-line); }
.rail__fill { background: var(--ink); box-shadow: none; }
.rail__count { color: var(--ink-2); }
.rail__count b { color: var(--ink); font-weight: 700; }
.rail__btn { background: var(--ink); color: var(--green); }
.rail__btn:hover:not(:disabled) { background: var(--green); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rail__btn:disabled { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--ink-line); }

.ledger__title { border-bottom-color: var(--ink); }
.ledger dl > div { border-bottom-color: var(--ink-line); }
.ledger dt { color: var(--ink-2); }
.ledger dd a { color: var(--ink); text-decoration-color: currentColor; }


/* ------------------------------------------------------------ 11. the door + form (home + /contact) */

/* .door stays the green block it already is. */
.field label { color: var(--ink); }
/* Input edges need 3:1 against the page to be findable — so solid black, not a tint. */
.field input, .field select, .field textarea { color: var(--ink); background: var(--paper); border-color: var(--ink); }
/* No warning colour exists any more, and colour was never allowed to be the only signal: an
   invalid field gets a heavy 3px black frame, and the message it points to carries the meaning. */
.field input[aria-invalid="true"], .field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }

.submit { background: var(--green); color: var(--ink); border: 2px solid var(--ink); }
.submit:hover, .submit:focus-visible { background: var(--ink); color: var(--green); }
.form-state { border-color: var(--ink); }
.form-state[data-state="success"] { background: var(--green); color: var(--ink); }

.faq__item { border-bottom-color: var(--ink-line); }
.faq__q, .faq__q::before { color: var(--ink); }
.faq__a { color: var(--ink-2); }


/* ------------------------------------------------------------ 12. footer */

.site-footer { border-top-color: var(--ink); }
.social a, .foot-meta, .foot-meta a, .site-footer a { color: var(--ink); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--ink); text-decoration: underline; }
.social a:hover { opacity: .7; }

/* Solid marks: one filled shape per icon with the glyph knocked out (evenodd holes, a mask for
   Behance), so the cut-outs are real and show the footer's own surface. */
.social--solid svg { fill: currentColor; stroke: none; }


/* ------------------------------------------------------------ 13. drawer, FAB, scrim */

.fab__toggle { box-shadow: none; }

/* The menu shade fades OUT the way it fades in. crt.css transitioned only opacity while
   `visibility: hidden` landed the instant .is-open was removed, so on close it vanished in one
   frame. Visibility now waits for the fade; on open it flips at once, so the fade-in is unchanged. */
.nav-scrim { transition: opacity 320ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 320ms; }
.nav-scrim.is-open { transition: opacity 220ms ease, visibility 0s; }


/* ------------------------------------------------------------ 14. display floor */

.title { font-size: clamp(var(--step-3), 6.5vw, 5.5rem); }   /* §4: never under ~40px */


/* ==========================================================================
   SUBPAGES
   ========================================================================== */

/* ------------------------------------------------------------ /work opener */

.fold {
  padding-inline: var(--frame-pad);
  background-image:
    linear-gradient(to right,  rgba(14, 11, 7, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 11, 7, .09) 1px, transparent 1px);
}
.fold__no { color: var(--ink); }
.fold__title { color: var(--ink); }
.fold__sub { color: var(--ink-2); }
.fold__meta { color: var(--ink); border-top-color: var(--ink); }
.fold__meta b { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------ case studies */

/* The green fold and its black plate stay — green as a field, black as a plate. */
.cs-fold { padding-inline: var(--frame-pad); }
.cs-plate { margin-inline: calc(var(--frame-pad) * -1); padding-inline: var(--frame-pad); }
.cs-mv { border-top-color: var(--ink-line); }
/* padding-inline 0: .cs-body always sits inside a .wrap, which now carries the frame. crt.css
   also gave it its own 24px on phones — on top of the wrap's — so case-study text started at
   48px while every other line on the page started at 24. */
.cs-body { color: var(--ink); padding-inline: 0; }
.cs-figure, .cs-grid { padding-inline: var(--frame-pad); }
/* Figures sit on the frame's left edge with the text above them, instead of centring under a
   left-aligned column. Still capped at their 825px source. */
.cs-figure img { margin-inline: 0; border-color: var(--ink-line); }
.cs-cell img { border-color: var(--ink-line); background: var(--paper); }
.cs-zoom:hover img, .cs-zoom:focus-visible img { border-color: var(--ink); }
/* "Next case" stays a black block — the page ends on a plate, like it opened on one. */
.cs-next { padding-inline: var(--frame-pad); border-top-color: var(--ink); }

/* The lightbox is an image viewer: it stays dark, and its own tokens say so. */
.lb { --muted: rgba(255, 255, 255, .62); color-scheme: dark; }
.lb :focus-visible { outline-color: var(--green); }

/* ------------------------------------------------------------ 404 */

.err__head {
  padding-inline: var(--frame-pad); border-bottom-color: var(--ink);
  background-image:
    linear-gradient(to right,  rgba(14, 11, 7, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 11, 7, .09) 1px, transparent 1px);
}
.err__no, .err__title { color: var(--ink); }
.err__sub { color: var(--ink-2); }
.err__links a { color: var(--ink); border-bottom-color: var(--ink-3); }
.err__links a:hover, .err__links a:focus-visible { border-bottom-color: var(--ink); }
.game { padding-inline: var(--frame-pad); }
.game__title, .game__readout, .game__readout b { color: var(--ink); }
.game__state { color: var(--ink-2); }
/* The game is a screen — js/game.js paints it ink and phosphor — so its stage stays a black
   block on the white page. */
.game__stage { border-color: var(--ink); box-shadow: none; }
.game__start:hover { box-shadow: none; }

/* ------------------------------------------------------------ links.html */

.links-hero {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right,  rgba(14, 11, 7, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 11, 7, .09) 1px, transparent 1px);
}
/* The same outline the homepage trace leaves, static. */
.links-hero__mark path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round;
                         vector-effect: non-scaling-stroke; }
.links-hero .door__no { color: var(--ink); }
.links-hero__sub { color: var(--ink-2); opacity: 1; }
.anniv-stamp { color: var(--ink); border-color: var(--ink); }


/* ==========================================================================
   MOBILE (max 767px) — only what changes on top of crt.css's own mobile composition.
   ========================================================================== */

@media (max-width: 767px) {
  /* The services band is one row now (the marquee), so the fold's peek only needs to clear one
     row — crt.css reserved 4.25rem for the old two-row band. */
  .hero { min-height: calc(100svh - var(--header-h) - 2.25rem); }
  .pin__copy { padding-inline: var(--gutter); margin-inline: 0; }
  .stories { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}