/* Hallmark · shape: the edit timeline · genre: atmospheric · theme: custom · job: hire · idea: "the page is the reel: a ruler of the real running time of the work, a teal playhead that moves as you scroll, chapters you jump to" · vibe: "dark cutting room, film grain, one teal playhead"
 * paper: oklch(15.9% 0.005 95) · accent: oklch(78.1% 0.139 176) · display: Archivo 62 wdth 900 · body: Archivo 100 wdth · outlier: Instrument Serif italic (the key line only) · mono: JetBrains Mono (timecodes only) · hero: three of the edits fanned and playing muted, the headline crossing their faded feet, the page's chapter ruler at the foot · nav: wordmark left, three quiet text links right, no button · footer: phase 2 · imagery: the editor's own edits (muted loops, posters) · signature: the ruler, 04:26 of real work laid out as a timeline with a teal playhead
 * axes: dark/display-condensed/chromatic-teal · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V5 · weakest: S, a fanned reel stack could sit on any editor's site; the ruler carries the specific fact (the real minutes of work) and the stack only shows the work itself */
/* Hallmark · waive 38iii · the second hero line set whole in teal italic serif · editor's locked direction (design.md, 03/11): one accent on the key phrase, once, in the hero */
/* Hallmark · hero-review: fix · 5 findings · 3 resolved 1 partial (no 16:9 film on phones) 1 open (headline copy waits for the editor) · impeccable critique: 10 findings · 7 resolved 1 partial 1 kept by choice 1 dismissed on measure · see DECISIONS.md */
/* Hallmark · dismissed render · the font WARN comes from the file:// render, where Chrome blocks font loads; the served page (--url) loads Archivo and Instrument Serif in every shot */
/* Hallmark · waive 79 · the capture measures while the entrance animation still holds the side block and the ruler at opacity 0 · Settled, the ruler ends at 888px of the 900px fold at 1440x900 (measured in Playwright), so no dead band is left under the hero */
/* Hallmark · waive 28b · every work-tile video and the player's one video sit below the fold and are never the LCP · The tiles carry their poster as a lazy image element under the video (a video's own poster cannot be lazy: nine posters were fetched on the first view), the player's poster is set per piece when it opens */
/* Hallmark · waive 83 · photographs cover 37% of the page below the hero: nine tiles, each a poster image under its own video · This is a video portfolio: the pictures are the work, shown once each, and everything around them is type */
/* Hallmark · dismissed 3 · the three equal columns hold three videos of one 9:16 shape, not icon tiles; they are the work itself */
/* Hallmark · dismissed 70 · the form posts to /api/lead (functions/api/lead.js) and the success text is only shown after a 200 from it */
/* Hallmark · dismissed 23 · the teal on the hero's second line is the one accent phrase the editor locked (design.md, 03/11); the accent covers that line, the primary button and the playhead, and nothing else on the screen */

/* ---------- page ---------- */
html { scroll-padding-top: var(--nav-h); }
body { min-height: 100svh; }
body::after {
  content: ""; position: fixed; inset: -50%; z-index: var(--z-grain); pointer-events: none;
  opacity: var(--grain-opacity); background-size: 220px 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grain 900ms steps(3) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); text-decoration: none; font-weight: 600; }
.skip:focus-visible { top: var(--space-md); }

/* ---------- nav ---------- */
.site-nav { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky-nav); min-height: var(--nav-h); }
.site-nav::before { content: ""; position: absolute; inset: 0; background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.is-scrolled .site-nav::before { opacity: 1; }
.site-nav-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-lg); min-height: var(--nav-h); max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; text-decoration: none; color: var(--color-ink); white-space: nowrap; }
.wm-hhh { font-weight: 900; font-stretch: 62%; }
.wm-dot { font-weight: 900; font-stretch: 62%; color: var(--color-accent); }
.wm-editor { font-weight: 600; font-stretch: 80%; }
.wordmark:hover .wm-editor { color: var(--color-ink-2); }
.nav-links { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-md); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav-links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav-links a:active { color: var(--color-accent); }
/* one switch for every muted preview on the page (moving content past 5 s needs a pause) */
.motion-toggle { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 400 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.motion-toggle:hover { border-color: var(--color-ink); color: var(--color-ink); }
.motion-toggle:active { transform: translateY(1px); }
.motion-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.motion-toggle svg { flex-shrink: 0; }
.motion-toggle .mt-play, .motion-toggle[aria-pressed="true"] .mt-pause { display: none; }
.motion-toggle[aria-pressed="true"] .mt-play { display: block; color: var(--color-accent); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { border-color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-ink); border-color: var(--color-ink); }

/* ---------- hero ---------- */
.hero {
  --reel-h: min(48svh, 600px); --reel-w: calc(var(--reel-h) * 9 / 16); --cx: 62%; --overlap: calc(var(--reel-h) * 0.22);
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: var(--gap-columns); align-content: end;
  min-height: 100svh; max-width: var(--container); margin-inline: auto; padding: calc(var(--nav-h) + var(--space-md)) var(--gutter) var(--space-sm);
}
/* the edits laid on the desk: one 16:9 film behind, three 9:16 reels fanned in front; the pile fades into the page as one piece,
   and its box reaches past the gutter so tilted corners are never cut */
.reels { grid-column: 1 / -1; grid-row: 1; position: relative; height: calc(var(--reel-h) * 1.08 + var(--space-xl)); margin: calc(-1 * var(--space-lg)) calc(-1 * var(--gutter)) 0; padding: 0; list-style: none;
  -webkit-mask-image: linear-gradient(to bottom, var(--mask-solid) 60%, transparent 97%); mask-image: linear-gradient(to bottom, var(--mask-solid) 60%, transparent 97%); }
/* one fan, regular steps: every card turns 3.4deg more than its neighbour and sits 3.6% lower per step from the lead; one shared shadow */
.reel { --k: 0; --ak: 0; --step: 3.4deg; --drop: 3.6%; --tx: -50%; --ty: calc(var(--ak) * var(--drop)); --r: calc(var(--k) * var(--step)); position: absolute; top: var(--space-xl); left: var(--cx); width: var(--reel-w); aspect-ratio: 9 / 16;
  transform: translate(var(--tx), var(--ty)) rotate(var(--r)); transition: transform var(--dur-long) var(--ease-out); }
.slot-lead { z-index: 3; }
.slot-left { --k: -1; --ak: 1; --tx: calc(-50% - var(--reel-w) * 0.8); z-index: 2; }
.slot-right { --k: 1; --ak: 1; --tx: calc(-50% + var(--reel-w) * 0.8); z-index: 2; }
.slot-wide { --k: -2; --ak: 2; --tx: calc(-50% - var(--reel-w) * 2.3); width: calc(var(--reel-h) * 0.98); aspect-ratio: 16 / 9; z-index: 1; }
.reel:hover, .reel:focus-within { z-index: 4; transform: translate(var(--tx), calc(var(--ty) - 2%)) rotate(calc(var(--r) * 0.4)); }
.reel-link { position: absolute; inset: 0; display: block; border-radius: var(--radius-card); color: var(--color-ink); text-decoration: none; }
.reel-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.reel-frame { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-card); }
.reel-frame video { width: 100%; height: 100%; object-fit: cover; }
/* the clip's tab, as on a timeline: chapter, what it is, how long */
.reel-tab { position: absolute; left: 0; bottom: 100%; display: flex; align-items: baseline; gap: var(--space-xs); padding-bottom: var(--space-xs); font-size: var(--text-xs); line-height: 1; color: var(--color-ink-2); white-space: nowrap; }
.slot-right .reel-tab { left: auto; right: 0; }
.tab-num, .tab-dur { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.tab-num { color: var(--color-ink); }
.tab-dur { color: var(--color-muted); }
.reel-hint { position: absolute; top: var(--space-sm); left: var(--space-sm); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-scrim); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.slot-right .reel-hint { left: auto; right: var(--space-sm); }
.reel-hint svg { flex-shrink: 0; color: var(--color-accent); }
.reel-link:hover .reel-hint, .reel-link:focus-visible .reel-hint { opacity: 1; }
.reel-link:focus-visible .reel-hint { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* poster state (autoplay off, paused, reduced motion, data saver) and touch: a play mark on every tile, the words on the lead tile only */
.is-static .reel-hint { opacity: 1; }
.is-static:not(.slot-lead) .reel-hint, .is-touch .reel:not(.slot-lead) .reel-hint { width: 36px; padding: 0; justify-content: center; }
.is-static:not(.slot-lead) .reel-hint-text, .is-touch .reel:not(.slot-lead) .reel-hint-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-touch .reel-hint { opacity: 1; }
.reel-gone { position: absolute; left: var(--space-sm); right: var(--space-sm); top: 40%; padding: var(--space-xs) var(--space-sm); background: var(--color-scrim); color: var(--color-ink); font-size: var(--text-sm); text-align: center; border-radius: var(--radius-card); }
.is-unavailable .reel-gone { display: block; }

.hero-copy { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 4; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); margin-top: calc(-1 * var(--overlap)); }
.hero-title { grid-column: 1 / -1; grid-row: 1; max-width: none; font-weight: 900; font-stretch: 62%; font-size: var(--text-hero); line-height: 1; letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--color-ink); text-wrap: balance; }
.hero-title .l1, .hero-title .l2 { display: block; }
.hero-title .l2 { margin-top: -0.02em; font-family: var(--font-outlier); font-style: italic; font-weight: 400; font-stretch: 100%; font-size: var(--text-hero-serif); line-height: 1; letter-spacing: -0.012em; text-transform: none; color: var(--color-accent); }
.hero-side { grid-column: 9 / 13; grid-row: 1; align-self: start; margin-top: calc(var(--text-hero) + var(--space-md)); }
.hero-sub { max-width: 32ch; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* the ruler: every chapter placed by the running time of the edits in it; the total is the sum of the real files */
.ruler { grid-column: 1 / -1; grid-row: 3; position: relative; margin-top: var(--space-md); }
.ruler-total { margin: 0 0 var(--space-xs); text-align: right; font-size: var(--text-sm); line-height: 1; color: var(--color-ink-2); max-width: none; }
.ruler-total .ch-tc { font-size: var(--text-sm); color: var(--color-ink); }
.ruler-scale { position: relative; height: 14px; border-top: var(--rule-hair) solid var(--color-rule-strong);
  background:
    linear-gradient(to right, var(--color-rule-strong) 1px, transparent 1px) 0 0 / calc(100% * 30 / var(--total)) 12px repeat-x,
    linear-gradient(to right, var(--color-rule) 1px, transparent 1px) 0 0 / calc(100% * 5 / var(--total)) 6px repeat-x; }
.ruler-mark { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 100%); width: 1px; background: var(--color-ink-2); }
.ruler-mark--end { left: auto; right: 0; }
.ruler-chapters { position: relative; height: 52px; margin: 0; padding: 0; list-style: none; }
.chapter { position: absolute; top: 0; left: calc(var(--at) * 100%); }
.chapter a { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--space-xs); row-gap: var(--space-2xs); align-items: baseline; min-height: 48px; padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-sm); border-left: var(--rule-hair) solid var(--color-ink-2); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.chapter a:hover { color: var(--color-ink); border-left-color: var(--color-accent); }
.chapter a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ch-tc { grid-column: 1 / -1; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; line-height: 1; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.ch-num { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.ch-name { font-size: var(--text-sm); }
.playhead { position: absolute; left: 0; top: -14px; width: 2px; height: 28px; background: var(--color-accent); transform: translateX(0); pointer-events: none; }
.playhead::before { content: ""; position: absolute; left: -5px; top: 0; border: 6px solid transparent; border-top: 8px solid var(--color-accent); border-bottom: 0; }
.playhead-tc { position: absolute; left: var(--space-sm); top: -2px; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; line-height: 1; color: var(--color-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- preloader (first visit only; the head script sets .pl) ---------- */
.preloader { display: none; }
.pl .preloader { display: grid; place-items: center; position: fixed; inset: 0; z-index: var(--z-preloader); background: var(--color-paper); animation: pl-lift 300ms var(--ease-in) 500ms both; }
.pl-mark { width: min(70vw, 520px); height: auto; overflow: visible; }
.pl-g { fill: var(--color-ink); fill-opacity: 0; stroke: var(--color-ink); stroke-width: 14; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.pl-hhh { animation: pl-draw 290ms var(--ease-in-out) calc(var(--i) * 40ms) forwards, pl-fill 150ms var(--ease-out) calc(240ms + var(--i) * 30ms) forwards; }
.pl-dot { fill: var(--color-accent); stroke: none; transform-box: fill-box; transform-origin: center; transform: scale(0); fill-opacity: 1; animation: pl-pop 200ms var(--ease-out) 320ms forwards; }
.pl-editor { stroke: none; animation: pl-fill 130ms var(--ease-out) calc(320ms + (var(--i) - 4) * 14ms) forwards; }
@keyframes pl-draw { to { stroke-dashoffset: 0; } }
@keyframes pl-fill { to { fill-opacity: 1; } }
@keyframes pl-pop { to { transform: scale(1); } }
@keyframes pl-lift { to { transform: translateY(-100%); visibility: hidden; } }

/* ---------- hero entrance: the edits deal out once, the copy settles ---------- */
:root { --enter: 0ms; }
.pl { --enter: 500ms; } /* Hermes 05/11: preloader ~0.3 s shorter (editor yes): lift at 500 ms, was 780 ms */
.js .reel { animation: deal var(--dur-deal) var(--ease-out) backwards; animation-delay: calc(var(--enter) + var(--n) * 50ms); }
/* the headline does not wait for the preloader: it settles underneath it, so the words are painted (and readable) the moment the curtain lifts */
.js .hero-title .l1 { animation: rise 520ms var(--ease-out) 100ms backwards; }
.js .hero-title .l2 { animation: rise 520ms var(--ease-out) 160ms backwards; }
.js .hero-side, .js .ruler { animation: rise 520ms var(--ease-out) calc(var(--enter) + 220ms) backwards; }
@keyframes deal { from { opacity: 0; transform: translate(-50%, 8%) rotate(0deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- reduced motion: no preloader (never set), no grain motion, everything at rest ---------- */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .js .reel, .js .hero-title .l1, .js .hero-title .l2, .js .hero-side, .js .ruler { animation: none; }
  .reel, .btn, .nav-links a, .chapter a, .reel-hint, .site-nav::before, .motion-toggle { transition: none; }
  .pl .preloader { display: none; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 75rem) {
  :root { --text-hero-serif: clamp(3.6rem, 8.6vw, 9.25rem); }
  .hero { --cx: 66%; }
  .hero-side { grid-column: 8 / 13; }
  /* chapters spread evenly under the scale; the marks on the scale keep the true proportions */
  .ruler-chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: auto; }
  .chapter { position: static; }
  .chapter a { border-left-color: var(--color-rule-strong); }
}
@media (max-width: 60rem) {
  .hero { --reel-h: min(56svh, 620px); --cx: 50%; --overlap: calc(var(--reel-h) * 0.2); grid-template-columns: minmax(0, 1fr); align-content: end; padding-top: calc(var(--nav-h) + var(--space-sm)); }
  .reel { --step: 2.6deg; --drop: 2.6%; }
  .slot-left { --tx: calc(-50% - var(--reel-w) * 0.36); }
  .slot-right { --tx: calc(-50% + var(--reel-w) * 0.36); }
  /* the outer part of each peeking card fades, so no caption is ever cut mid-word at the screen edge */
  .slot-left .reel-frame { -webkit-mask-image: linear-gradient(to right, transparent 2%, var(--mask-half) 38%, var(--mask-solid) 62%); mask-image: linear-gradient(to right, transparent 2%, var(--mask-half) 38%, var(--mask-solid) 62%); }
  .slot-right .reel-frame { -webkit-mask-image: linear-gradient(to left, transparent 2%, var(--mask-half) 38%, var(--mask-solid) 62%); mask-image: linear-gradient(to left, transparent 2%, var(--mask-half) 38%, var(--mask-solid) 62%); }
  /* narrow screens: the 16:9 film waits for its chapter; the three reels carry the first screen */
  .slot-wide { display: none; }
  .slot-left .tab-label, .slot-left .tab-dur, .slot-right .tab-label, .slot-right .tab-dur { display: none; }
  .reel-hint { min-height: 36px; }
  .hero-copy { grid-column: 1; display: block; }
  .hero-side { margin-top: var(--space-md); }
  .hero-actions { margin-top: var(--space-md); }
}
@media (max-width: 40rem) {
  :root { --nav-h: 56px; }
  .site-nav-inner { gap: var(--space-md); }
  .nav-links { gap: var(--space-md); }
  .nav-wide { display: none; }
  .wordmark { font-size: var(--text-lg); }
  .motion-toggle { width: 44px; padding: 0; justify-content: center; }
  .mt-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero { --reel-h: min(44svh, 440px); }
  .chapter a { grid-template-columns: auto; padding-inline: var(--space-xs); }
  .hero-title { font-size: clamp(2.75rem, 13.6vw, 4rem); }
  .hero-title .l2 { font-size: clamp(2.9rem, 14.2vw, 4.2rem); }
}
@media (max-width: 40rem) and (max-height: 47.5rem) {
  .hero { --reel-h: 38svh; }
}
/* phones on their side: the screen is too short to scale the stack by height */
@media (orientation: landscape) and (max-height: 32rem) {
  .hero { --reel-h: 280px; min-height: auto; }
}

/* Hermes 04/11: headline B ("with something to say.") is longer than the old line 2; on wide screens it ran under .hero-side. Keep line 2 inside the left 7-8 columns. Phase 2 may replace this with a proper layout. */
@media (min-width: 60.01rem) { .hero-title .l2 { font-size: min(var(--text-hero-serif), 6vw); } }
@media (min-width: 75.01rem) { .hero-title .l2 { font-size: min(var(--text-hero-serif), 7vw, 6.9rem); } }

/* =====================================================================
   Phase 2: work, about, how it works, contact, credits, footer, player
   ===================================================================== */

/* ---------- shared ---------- */
.sec-head { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sec-title { font-weight: 900; font-stretch: 62%; font-size: var(--text-display); line-height: 0.95; letter-spacing: var(--tracking-display); text-transform: uppercase; }
.sec-intro { max-width: 38ch; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }
.ch-tc { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; line-height: 1; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }

/* scroll reveals: JS adds .rv to the blocks; transform and opacity only */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- nav: the running ruler (shows once the page moves) ---------- */
.nav-ruler { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.is-scrolled .nav-ruler { opacity: 1; }
.nr-mark { position: absolute; bottom: 0; left: calc(var(--at) * 100%); width: 1px; height: 8px; background: var(--color-rule-strong); }
.nr-head { position: absolute; bottom: 0; left: 0; width: 2px; height: 12px; background: var(--color-accent); transform: translateX(0); will-change: transform; }

/* ---------- work ---------- */
.work { padding-top: var(--section-gap-l); }
.work-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-xl); }
.work-head .sec-title { grid-column: 1 / 8; }
.work-head .sec-intro { grid-column: 8 / 13; }
.chapter-links { grid-column: 1 / -1; display: none; margin: var(--space-md) 0 0; padding: 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-md); }
.chapter-links a { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-xs); row-gap: var(--space-2xs); align-items: baseline; min-height: 56px; padding: var(--space-xs) var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule-strong); color: var(--color-ink-2); text-decoration: none; }
.chapter-links a:hover { color: var(--color-ink); border-left-color: var(--color-accent); }
.chapter-links .ch-tc { grid-column: 1 / -1; }
.chapter-links .ch-num { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; color: var(--color-ink); }
.chapter-links .ch-name { font-size: var(--text-sm); }

.group { max-width: var(--container); margin-inline: auto; padding: var(--space-2xl) var(--gutter) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.group-head { grid-column: 1 / 5; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); display: grid; row-gap: var(--space-sm); padding-right: var(--space-md); }
.group-tc { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); margin: 0; max-width: none; }
.group-meta { font-size: var(--text-sm); color: var(--color-muted); }
.group-num { margin: 0; max-width: none; font-family: var(--font-mono); font-weight: 400; font-size: var(--text-sm); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.group-title { font-weight: 900; font-stretch: 62%; font-size: var(--text-display-s); line-height: 0.95; letter-spacing: var(--tracking-display); text-transform: uppercase; }
.group-blurb { max-width: 34ch; color: var(--color-ink-2); }
.tiles { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl) var(--gap-columns); }
.group--wide .tiles { grid-template-columns: minmax(0, 1fr); }
.group--tall .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tile { min-width: 0; }
.tile-link { display: block; border-radius: var(--radius-card); color: var(--color-ink); text-decoration: none; }
.tile-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.tile-frame { position: relative; display: block; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); aspect-ratio: 9 / 16; box-shadow: var(--shadow-card); transition: transform var(--dur-long) var(--ease-out); }
.tile--wide .tile-frame { aspect-ratio: 16 / 9; }
.tile-poster, .tile-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-frame video { background: transparent; }
.tile-link:hover .tile-frame { transform: translateY(-4px); }
.tile-tc { position: absolute; right: var(--space-sm); bottom: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-scrim); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.tile-hint { position: absolute; top: var(--space-sm); left: var(--space-sm); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-scrim); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.tile-hint svg { flex-shrink: 0; color: var(--color-accent); }
/* large text sizes: the hint never grows past its tile (the hero's chips keep their own sizes) */
.tile-hint { max-width: calc(100% - 2 * var(--space-sm)); }
.tile-hint-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-link:hover .tile-hint, .tile-link:focus-visible .tile-hint, .is-static .tile-hint, .is-touch .tile-hint { opacity: 1; }
.tile-gone { position: absolute; left: var(--space-sm); right: var(--space-sm); top: 42%; padding: var(--space-xs) var(--space-sm); background: var(--color-scrim); color: var(--color-ink); font-size: var(--text-sm); text-align: center; border-radius: var(--radius-card); }
.tile-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-sm); row-gap: var(--space-2xs); align-items: baseline; padding-top: var(--space-sm); }
.tile-count { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.tile-title { font-weight: 600; font-size: var(--text-md); line-height: 1.25; overflow-wrap: break-word; min-width: 0; }
.tile-label { grid-column: 2; font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- about ---------- */
.about { max-width: var(--container); margin-inline: auto; padding: var(--section-gap-l) var(--gutter); border-top: var(--rule-hair) solid var(--color-rule); }
.about-text { margin-top: var(--space-lg); max-width: 22em; font-family: var(--font-display); font-weight: 900; font-stretch: 75%; font-size: clamp(2.1rem, 5.2vw, 5rem); line-height: 1.08; letter-spacing: 0.03em; text-transform: uppercase; text-wrap: pretty; color: var(--color-ink); }
/* words light up as the paragraph crosses the screen (JS sets --p); the dimmest word still reads at 3:1; with no JS --p is 1 and every word is lit */
.about-text .w { opacity: clamp(0.4, calc(0.4 + (var(--p, 1) * (var(--n) + 2) - var(--i)) * 0.6), 1); }
/* the closing row: where, and the page's own numbers (counted at build from content.json, same total as the hero ruler); fills the right side with something true */
.about-foot { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: end; }
.about-where { grid-column: 1 / span 5; margin: 0; color: var(--color-ink-2); max-width: 40ch; }
.about-slate { grid-column: 7 / -1; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.about-slate dt { font-size: var(--text-xs); color: var(--color-muted); }
.about-slate dd { margin: var(--space-2xs) 0 0; font-family: var(--font-mono); font-weight: 400; font-size: var(--text-2xl); line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-ink); }

/* ---------- how it works: the cream flip ---------- */
.process { background: var(--color-cream); color: var(--color-cream-ink); padding: var(--section-gap) 0 var(--section-gap-l); }
.process-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.process .sec-head { padding-inline: 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: var(--space-3xl) 0 0; padding: var(--space-lg) 0 0; list-style: none; border-top: var(--rule-hair) solid var(--color-cream-ink); position: relative; }
.step { position: relative; display: grid; align-content: start; row-gap: var(--space-sm); }
.step::before { content: ""; position: absolute; left: 0; top: calc(-1 * var(--space-lg) - 12px); width: 2px; height: 12px; background: var(--color-accent-deep); }
.step-num { font-family: var(--font-display); font-weight: 900; font-stretch: 62%; font-size: clamp(4.5rem, 9vw, 8.5rem); line-height: 0.88; color: var(--color-cream-ink); font-variant-numeric: tabular-nums; }
.step-title { font-size: var(--text-xl); font-weight: 600; font-stretch: 85%; line-height: 1.15; }
.step-text { max-width: 30ch; color: var(--color-cream-muted); }
.process-note { margin-top: var(--space-3xl); max-width: 30ch; font-family: var(--font-outlier); font-style: italic; font-size: var(--text-2xl); line-height: 1.15; color: var(--color-cream-ink); }

/* ---------- contact ---------- */
.contact { max-width: var(--container); margin-inline: auto; padding: var(--section-gap-l) var(--gutter) var(--section-gap); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.contact-side { grid-column: 1 / 7; display: grid; row-gap: var(--space-md); }
.contact-title { font-weight: 900; font-stretch: 62%; font-size: clamp(3rem, 7.4vw, 7rem); line-height: 0.95; letter-spacing: var(--tracking-display); text-transform: uppercase; }
.contact-title:focus { outline: none; }
.contact-title .l1, .contact-title .l2 { display: block; }
.contact-title .l2 { font-family: var(--font-outlier); font-style: italic; font-weight: 400; font-stretch: 100%; text-transform: none; letter-spacing: -0.012em; color: var(--color-accent); }
.contact-lede { max-width: 34ch; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); margin-top: var(--space-sm); }
.contact-mail { color: var(--color-ink-2); }
.contact-mail a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.contact-form-wrap { grid-column: 8 / 13; min-width: 0; }
.lead-form { display: grid; gap: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); min-width: 0; border: 0; margin: 0; padding: 0; }
.field label, .field legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); padding: 0; }
.field .opt { font-weight: 400; color: var(--color-muted); }
.lead-form input[type="text"], .lead-form input[type="email"], .lead-form textarea { width: 100%; min-height: 48px; padding: var(--space-sm) 0; border: 0; border-bottom: var(--rule-hair) solid var(--color-muted); border-radius: 0; background: transparent; color: var(--color-ink); font: 400 1.0625rem/1.4 var(--font-body); caret-color: var(--color-accent); transition: border-color var(--dur-short) var(--ease-out); }
.lead-form textarea { resize: vertical; min-height: 112px; }
.lead-form input:hover, .lead-form textarea:hover { border-bottom-color: var(--color-ink-2); }
.lead-form input:focus-visible, .lead-form textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-bottom-color: var(--color-accent); }
.lead-form [aria-invalid="true"] { border-bottom-color: var(--color-error); }
.field-help, .field-count { font-size: var(--text-xs); color: var(--color-muted); max-width: none; }
.field-count { text-align: right; font-variant-numeric: tabular-nums; }
.field-error { font-size: var(--text-sm); color: var(--color-error); max-width: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.chip label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.chip input:hover + label { border-color: var(--color-ink); color: var(--color-ink); }
.chip input:checked + label { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.chip input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.from-note { font-size: var(--text-sm); color: var(--color-ink-2); max-width: none; }
.from-note b { color: var(--color-ink); font-weight: 600; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; align-items: center; gap: var(--space-md); }
.form-actions .btn { min-width: 160px; }
.form-status { font-size: var(--text-sm); }
.form-status:empty { display: none; }
.form-status { padding: var(--space-md); border: var(--rule-hair) solid var(--color-error); border-radius: var(--radius-card); color: var(--color-ink); }
.form-status ul { margin: var(--space-xs) 0 0; padding-left: var(--space-lg); }
.form-status a { color: var(--color-ink); }
.noscript-note { font-size: var(--text-sm); color: var(--color-ink-2); }
.noscript-note a { color: var(--color-ink); }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.sent { padding: var(--space-xl); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-card); display: grid; gap: var(--space-md); justify-items: start; }
.sent:focus { outline: none; }
.sent-title { font-family: var(--font-outlier); font-style: italic; font-size: var(--text-3xl); line-height: 1; color: var(--color-accent); max-width: none; }
.sent-text { color: var(--color-ink-2); overflow-wrap: anywhere; }

/* ---------- credits ---------- */
.credits { max-width: var(--container); margin-inline: auto; padding: calc(var(--nav-h) + var(--section-gap-s)) 0 var(--section-gap); }
.credits-back { padding: var(--space-xl) var(--gutter) 0; max-width: none; }
.credits-title { font-weight: 900; font-stretch: 62%; font-size: var(--text-display-s); line-height: 0.95; text-transform: uppercase; margin-top: var(--space-md); }
.credits .sec-intro { margin-top: var(--space-md); font-size: var(--text-md); }
.credit-list { list-style: none; margin: var(--space-xl) 0 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.credit { min-width: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }
.credit p { max-width: none; margin-top: var(--space-2xs); overflow-wrap: anywhere; }
.credit-title { font-family: var(--font-body); font-weight: 600; font-stretch: 100%; font-size: var(--text-sm); line-height: 1.3; color: var(--color-ink); text-wrap: pretty; }

/* ---------- footer ---------- */
.site-footer { border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-2xl) 0 calc(var(--space-lg) + env(safe-area-inset-bottom)); overflow: hidden; }
.footer-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.footer-brand { display: grid; row-gap: var(--space-md); align-content: start; }
.wordmark--lg { font-size: var(--text-2xl); }
.footer-tagline { max-width: 32ch; color: var(--color-ink-2); }
.footer-clock { display: flex; align-items: center; gap: var(--space-sm); margin: 0; max-width: none; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); animation: live 2s var(--ease-in-out) infinite; }
@keyframes live { 50% { opacity: 0.35; } }
.footer-h { font-family: var(--font-body); font-weight: 600; font-stretch: 100%; font-size: var(--text-sm); color: var(--color-ink-2); margin-bottom: var(--space-sm); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 36px; overflow-wrap: anywhere; color: var(--color-ink); text-decoration: none; }
.footer-col a:hover, .footer-legal a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.footer-big { margin: var(--space-2xl) 0 0; max-width: none; padding-inline: var(--gutter); font-family: var(--font-display); font-weight: 900; font-stretch: 62%; font-size: clamp(4.5rem, 20.5vw, 21rem); line-height: 0.82; letter-spacing: -0.01em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--color-rule-strong); user-select: none; }
.footer-legal { max-width: var(--container); margin: var(--space-lg) auto 0; padding-inline: var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.footer-legal p { max-width: none; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-ink); }

/* ---------- player (native dialog: focus trap, inert page, Esc) ---------- */
html.lb-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--color-lightbox); color: var(--color-ink); }
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: var(--mask-solid); }
.lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 34vw); animation: lb-in 220ms var(--ease-out); }
@keyframes lb-in { from { opacity: 0; } }
.lb-stage { display: grid; place-items: center; min-width: 0; min-height: 0; padding: 56px 32px; }
.lb-frame { position: relative; width: min(100%, calc((100dvh - 112px) * var(--arn, 0.5625))); aspect-ratio: var(--ar, 9 / 16); }
.lb-video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--color-paper-deep); border-radius: var(--radius-card); }
.lb-error { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-scrim); font-size: var(--text-sm); text-align: center; max-width: none; white-space: nowrap; }
.lb-panel { display: flex; flex-direction: column; gap: var(--space-md); min-height: 0; overflow-y: auto; padding: 72px 32px calc(32px + env(safe-area-inset-bottom)); border-left: var(--rule-hair) solid var(--color-rule); overscroll-behavior: contain; }
.lb-kicker { display: flex; align-items: baseline; gap: var(--space-sm); margin: 0; max-width: none; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.lb-num { font-family: var(--font-mono); font-weight: 400; color: var(--color-accent); }
.lb-title { font-weight: 900; font-stretch: 70%; font-size: clamp(1.75rem, 2.6vw, 2.6rem); line-height: 0.98; text-transform: uppercase; letter-spacing: var(--tracking-display); }
.lb-desc { color: var(--color-ink-2); max-width: none; }
.lb-meta { margin: 0; max-width: none; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); font-variant-numeric: tabular-nums; }
/* the CTA and the step buttons share one bar: on desktop it dissolves (CTA under the text, steps at the foot of the panel); on phones it is pinned to the bottom of the dialog */
.lb-bar { display: contents; }
.lb-cta { order: 1; align-self: flex-start; margin-top: var(--space-xs); }
.lb-credit { order: 2; }
.lb-credit { font-size: var(--text-xs); line-height: 1.5; color: var(--color-muted); }
.lb-credit p { max-width: none; margin-top: var(--space-2xs); overflow-wrap: anywhere; }
.lb-credit-h { margin: 0; font-weight: 600; color: var(--color-ink-2); }
.lb-nav { order: 3; display: flex; align-items: center; gap: var(--space-md); margin-top: auto; padding-top: var(--space-md); }
/* on small screens the panel scrolls; the CTA, "1 of 2" and the arrows stay in one bar at the bottom (safe-area aware) */
@media (max-width: 60rem), (orientation: landscape) and (max-height: 32rem) {
  .lb-bar { order: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); position: sticky; bottom: 0; z-index: 1; margin-top: auto; margin-inline: calc(-1 * var(--lb-pad, var(--gutter))); padding: var(--space-sm) var(--lb-pad, var(--gutter)) calc(var(--space-sm) + env(safe-area-inset-bottom)); background: var(--color-paper-deep); border-top: var(--rule-hair) solid var(--color-rule); }
  .lb-cta { order: 0; margin-top: 0; align-self: auto; flex: 1 1 auto; max-width: 20rem; }
  .lb-nav { order: 0; margin: 0; padding: 0; gap: var(--space-xs); }
  .lb-credit { padding-bottom: var(--space-md); }
}
@media (max-width: 24rem) { .lb-cta { padding-inline: var(--space-md); font-size: var(--text-sm); } }
.lb-pos { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.lb-step, .lb-close { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: var(--rule-hair) solid var(--color-rule-strong); border-radius: 50%; background: transparent; color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.lb-step:hover, .lb-close:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.lb-step:focus-visible, .lb-close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.lb-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
.lightbox.is-single .lb-nav { display: none; }

/* ---------- small screens, phase 2 ---------- */
@media (max-width: 75rem) {
  .credit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .work-head .sec-title { grid-column: 1 / -1; }
  .work-head .sec-intro { grid-column: 1 / -1; }
  .group { display: block; padding: var(--space-xl) 0 var(--space-2xl); }
  .group-head { position: static; padding-inline: var(--gutter); margin-bottom: var(--space-lg); }
  .tiles { padding-inline: var(--gutter); }
  .group--wide .tiles { grid-template-columns: minmax(0, 1fr); }
  /* the 9:16 pieces become a swipe row; the next piece peeks in so it reads as a row */
  .group--tall .tiles { display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: var(--space-xs); }
  .group--tall .tiles::-webkit-scrollbar { display: none; }
  .group--tall .tiles[data-fade="end"] { -webkit-mask-image: linear-gradient(90deg, var(--mask-solid) calc(100% - 5rem), transparent); mask-image: linear-gradient(90deg, var(--mask-solid) calc(100% - 5rem), transparent); }
  .group--tall .tiles[data-fade="start"] { -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 5rem); mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 5rem); }
  .group--tall .tiles[data-fade="both"] { -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 5rem, var(--mask-solid) calc(100% - 5rem), transparent); mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 5rem, var(--mask-solid) calc(100% - 5rem), transparent); }
  .group--tall .tile { flex: 0 0 min(64vw, 300px); scroll-snap-align: start; }
  .tile-link:hover .tile-frame { transform: none; }
  .about-where, .about-slate { grid-column: 1 / -1; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact-side, .contact-form-wrap { grid-column: 1; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .step { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-lg); row-gap: var(--space-xs); align-items: start; }
  .step::before { display: none; }
  .step-num { grid-row: 1 / 3; font-size: 4.5rem; }
  .step-title, .step-text { grid-column: 2; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, max-content); }
  .footer-brand { grid-column: 1 / -1; }
  /* player: picture on top, details below */
  .lightbox[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 54dvh minmax(0, 1fr); }
  .lb-stage { padding: calc(var(--space-xl) + var(--space-md)) var(--space-md) var(--space-sm); }
  .lb-frame { width: min(100%, calc((54dvh - 68px) * var(--arn, 0.5625))); }
  .lb-panel { --lb-pad: var(--gutter); padding: var(--space-md) var(--gutter) 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); gap: var(--space-sm); }
  .lb-title { font-size: 1.6rem; }
}
@media (max-width: 40rem) {
  .nav-links a { min-width: 44px; justify-content: center; padding-inline: var(--space-xs); }
  /* phones: a one-line ruler in the hero; the chapter links move into the Work section */
  .ruler-chapters { display: none; }
  .hero { padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); }
  .chapter-links { display: grid; }
  .work-head { margin-bottom: var(--space-xl); }
  .credit-list { grid-template-columns: minmax(0, 1fr); }
  .footer-big { font-size: 19vw; }
}
/* phones on their side: picture left, details right, everything scrolls inside the panel */
@media (orientation: landscape) and (max-height: 32rem) {
  .lightbox[open] { grid-template-columns: minmax(0, 1fr) min(320px, 42vw); grid-template-rows: none; }
  .lb-stage { padding: var(--space-sm) var(--space-md); }
  .lb-frame { width: min(100%, calc((100dvh - 24px) * var(--arn, 0.5625))); }
  .lb-panel { --lb-pad: var(--space-md); padding: calc(var(--space-xl) + var(--space-md)) var(--space-md) 0; border-top: 0; border-left: var(--rule-hair) solid var(--color-rule); gap: var(--space-sm); }
  .lb-close { top: 8px; right: 8px; }
  .lb-title { font-size: 1.4rem; }
}
@media (hover: none) { .tile-link:hover .tile-frame { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv.in { opacity: 1; transform: none; transition: none; }
  .live-dot { animation: none; }
  .tile-frame, .tile-hint, .lb-step, .lb-close, .chip label { transition: none; }
  .lightbox[open] { animation: none; }
}

/* ---------- thanks page (the form posted without JavaScript) ---------- */
.thanks { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: var(--space-md); max-width: var(--container); margin-inline: auto; padding: var(--space-2xl) var(--gutter); }
.thanks-title { font-weight: 900; font-stretch: 62%; font-size: var(--text-display); line-height: 0.95; text-transform: uppercase; }