/* =========================================================
   MODIFI CLASSICS: stylesheet (v5)
   Design tokens per DESIGN-SPEC.md section "Design tokens"
   ========================================================= */

:root {
  /* Color: cinematic dark, auction-house warmth. Never pure #000. */
  --bg-0: #0C0C0E;
  --bg-1: #121215;
  --bg-2: #1A1A1F;
  --ink-hi: #F4F1EA;
  --ink-body: #B9B5AC;
  --ink-mute: #6E6B64;
  --gold: #C9A227;
  --gold-soft: #E3C878;
  --line: rgba(244, 241, 234, 0.10);
  --danger: #E2837B;

  --tint-corvette: #4F6DB8;
  --tint-skyline: #D9B23B;
  --tint-ferrari: #B8B8BC;
  --tint-f250: #C97B3F;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-data: "IBM Plex Mono", "Courier New", monospace;

  --content-max: 1200px;
  --space-24: 24px;
  --space-96: 96px;
  --space-160: 160px;
}

/* =========================================================
   Reset
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  body { font-size: 18px; }
}

img, video { max-width: 100%; display: block; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

p { margin: 0; }

figure { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink-hi);
  font-weight: 600;
  margin: 0;
}

button, input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* =========================================================
   Utilities
   ========================================================= */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-24);
}

.eyebrow {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 16px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  background: var(--gold);
  color: var(--bg-0);
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: top 200ms ease;
}

.skip-link:focus {
  top: 16px;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-0);
}

.btn-primary:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-hi);
}

.btn-ghost:hover {
  border-color: var(--gold-soft);
  color: var(--gold-soft);
  transform: translateY(-1px);
}

.btn-lg {
  min-height: 56px;
  padding: 18px 40px;
  font-size: 1.05rem;
}

/* =========================================================
   Nav
   ========================================================= */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 250ms ease, backdrop-filter 250ms ease, border-color 250ms ease, padding 250ms ease;
}

.site-nav.is-scrolled {
  padding: 14px 0;
  background: rgba(12, 12, 14, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
}

.wordmark-modifi {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--gold-soft);
}

.wordmark-classics {
  font-family: var(--font-data);
  letter-spacing: 0.35em;
  font-size: 10px;
  color: var(--gold-soft);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  text-decoration: none;
  color: var(--ink-body);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 200ms ease;
}

.nav-links a:hover { color: var(--gold-soft); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--ink-hi);
  cursor: pointer;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-0);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The display:flex above would override the UA [hidden] rule,
   leaving the menu open on load. Re-assert hidden explicitly. */
.mobile-menu[hidden] { display: none; }

.mobile-menu-close {
  position: absolute;
  top: 22px;
  right: 24px;
  background: transparent;
  border: 0;
  color: var(--ink-hi);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: center;
}

.mobile-menu-links a {
  text-decoration: none;
  color: var(--ink-hi);
  font-family: var(--font-display);
  font-size: 2rem;
}

.mobile-menu-links a:hover { color: var(--gold-soft); }

/* =========================================================
   Hero lockup (v5): merged into chapter 1's pin. It overlays the
   corvette-profile clip's held frame 0 exactly like .chapter-title
   overlays a profile phase elsewhere, so it shares that positioning
   pattern instead of a standalone full-bleed section.
   ========================================================= */

.hero-lockup {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--space-24);
}

.hero-eyebrow {
  margin-bottom: 30px;
  text-shadow: 0 1px 3px rgba(12, 12, 14, 0.85);
}

.hero-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  line-height: 1;
}

.hero-wordmark-modifi {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3.4rem, 10vw, 6rem);
  line-height: 1;
  color: var(--ink-hi);
  text-shadow: 0 2px 12px rgba(12, 12, 14, 0.6);
}

/* letter-spacing adds a trailing gap; the negative margin recenters. */
.hero-wordmark-classics {
  font-family: var(--font-data);
  font-size: clamp(0.8rem, 2vw, 1.05rem);
  letter-spacing: 0.45em;
  margin-right: -0.45em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(12, 12, 14, 0.85);
}

.pixel-flag { display: block; }

.hero-flag {
  width: 58px;
  height: auto;
  margin: 28px 0 26px;
}

.wordmark-flag {
  width: 22px;
  height: auto;
  align-self: center;
  flex-shrink: 0;
}

.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  line-height: 1.4;
  color: var(--ink-body);
  text-shadow: 0 1px 3px rgba(12, 12, 14, 0.85);
}

/* .chapter-overlay (the parent) is pointer-events: none so the pinned
   video beneath stays hit-test-transparent; the lockup's CTA is the
   one interactive element ever placed inside it, so it opts back in. */
.hero-cta-row {
  margin-top: 44px;
  pointer-events: auto;
}

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.scroll-cue-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--gold-soft));
  animation: scroll-cue-move 2.2s ease-in-out infinite;
}

.scroll-cue-label {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
}

@keyframes scroll-cue-move {
  0% { transform: translateY(-8px); opacity: 0.2; }
  50% { transform: translateY(4px); opacity: 1; }
  100% { transform: translateY(-8px); opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue-line { animation: none; opacity: 0.7; }
}

/* Short viewports (phones in landscape, small browser windows): the
   full lockup stack (eyebrow, wordmark, rule, tagline, CTA, scroll
   cue) doesn't fit without the scroll cue colliding with the CTA.
   Drop the scroll cue and shrink the wordmark and vertical rhythm
   one step so the eyebrow clears the nav and the CTA clears the
   bottom edge. */
@media (max-height: 500px) {
  .hero-lockup .scroll-cue { display: none; }
  /* The nav wordmark already reads MODIFI CLASSICS; at tiny heights the
     lockup eyebrow lands inside the nav band, so drop it. */
  .hero-eyebrow { display: none; }
  .hero-wordmark-modifi { font-size: clamp(2rem, 7vw, 3.2rem); }
  /* Compact the on-film dossier blocks so none can reach under the
     fixed nav at squat landscape heights. */
  .detail-chip, .detail-story, .detail-case, .detail-specs,
  .scene-case, .scene-specs {
    font-size: 0.62rem;
    line-height: 1.45;
    padding: 8px 12px;
  }
  .detail-case li + li, .scene-case li + li { margin-top: 4px; }
  /* Sequencing means chip/story are gone when the case shows, so at
     squat heights anchor the case to the top (below the nav) and let
     it grow downward instead of poking above the nav. */
  .detail-case, .scene-case { top: 80px; bottom: auto; }
  .hero-wordmark-classics { font-size: clamp(0.65rem, 1.6vw, 0.85rem); }
  .hero-eyebrow { margin-bottom: 14px; }
  .hero-flag { width: 44px; margin: 14px 0 12px; }
  .hero-cta-row { margin-top: 20px; }
}

/* =========================================================
   The Film v5: hero merged into chapter 1's pin, two acts + terminal
   finale. Act I: four chapter pins (profile clip stitched to the
   angle clip on a matched frame, no black at the seam), each now
   carrying its own on-film dossier overlay in place of the deleted
   info-A sections. Act II: four scene pins, each carrying THE CASE +
   spec strip in place of the deleted info-B sections. Black brackets
   every pinned segment: dark, then information, then the next
   animation.
   ========================================================= */

.film {
  background: var(--bg-0);
  position: relative;
}

.chapter,
.scene,
.film-terminal { position: relative; }

.chapter[data-tint="corvette"],
.scene[data-tint="corvette"] { --tint: var(--tint-corvette); }
.chapter[data-tint="skyline"],
.scene[data-tint="skyline"] { --tint: var(--tint-skyline); }
.chapter[data-tint="ferrari"],
.scene[data-tint="ferrari"] { --tint: var(--tint-ferrari); }
.chapter[data-tint="f250"],
.scene[data-tint="f250"],
.film-terminal[data-tint="f250"] { --tint: var(--tint-f250); }

/* Film blacks are true #000 (chapter brackets); the warm --bg-0 base
   stays everywhere else. */
.chapter-pin {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

.chapter-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.chapter-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.chapter-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The detail/angle clip starts invisible; the chapter timeline
   stitches it in on its matched first frame over the profile's held
   last frame (dissolve 50-54, black stays down at the seam). */
.chapter-video-detail { opacity: 0; }

.chapter-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12, 12, 14, 0.30) 0%,
    rgba(12, 12, 14, 0.18) 40%,
    rgba(12, 12, 14, 0.62) 80%,
    rgba(12, 12, 14, 0.88) 100%
  );
  pointer-events: none;
}

.chapter-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Profile-phase title stack (timeline drives opacity, visible ~12-46). */
.chapter-title {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: 64px var(--space-24);
}

/* Tint mixed 75% toward white so the small mono text clears 4.5:1
   over dark video frames; the tint survives as a hue cast + glow.
   A tight dark shadow guards against bright patches in the video. */
.chapter-eyebrow {
  color: color-mix(in srgb, var(--tint, var(--gold-soft)) 25%, white 75%);
  text-shadow:
    0 1px 3px rgba(12, 12, 14, 0.85),
    0 0 24px var(--tint, transparent);
  margin-bottom: 0;
}

.chapter-name {
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.05;
}

.chapter-identity {
  color: var(--ink-hi);
  font-size: 1.1rem;
  max-width: 40ch;
}

/* Detail-phase corner mark: the only text on the clean frame.
   The timeline fades it to 0.7 across the stitch. */
.chapter-corner {
  position: absolute;
  left: var(--space-24);
  bottom: 32px;
  opacity: 0;
  margin: 0;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tint, var(--gold-soft)) 25%, white 75%);
  text-shadow: 0 1px 3px rgba(12, 12, 14, 0.85);
}

/* Black overlay above video AND text: opacity 1 at both ends of every
   pinned segment (default 1 in CSS), driven 1 -> 0 -> 1 by the
   scrubbed timeline, so the viewport is 100% black between segments.
   It stays at 0 across the in-chapter stitch. */
.chapter-black {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: 1;
  pointer-events: none;
}

/* Act II scene caption: mono location mark, bottom-left, driven by
   the scene timeline (visible ~18-82). */
.scene-caption {
  position: absolute;
  left: var(--space-24);
  bottom: 32px;
  opacity: 0;
  margin: 0;
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--ink-hi);
  text-shadow: 0 1px 3px rgba(12, 12, 14, 0.85);
  border-left: 2px solid var(--gold);
  padding-left: 12px;
}

/* Terminal finale overlay: closing line + mono caption, revealed in
   the final 40% of the terminal pin. */
.overlay-terminal {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 64px var(--space-24) 14vh;
}

.terminal-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: 1.2;
  color: var(--ink-hi);
  text-shadow: 0 1px 4px rgba(12, 12, 14, 0.7);
}

.terminal-caption {
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--gold-soft);
  text-shadow: 0 1px 3px rgba(12, 12, 14, 0.85);
}

@media (max-width: 767px) {
  .chapter-title { padding: 32px var(--space-24) 40px; }
  .chapter-corner { bottom: 28px; }
  .overlay-terminal { padding-bottom: 12vh; }
}

/* =========================================================
   THE CASE box: a small dossier card (v5). Used both as an on-film
   overlay (chapters' .detail-case, scenes' .scene-case) and, under
   reduced motion, as a plain static block. Solid background, not a
   translucent scrim, so its bullets clear 4.5:1 over any frame.
   ========================================================= */

.case-box {
  background: rgba(18, 18, 21, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 2px solid var(--gold);
  padding: 24px 28px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.case-label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold-soft);
  margin-bottom: 12px;
}

.case-box ul { display: flex; flex-direction: column; gap: 10px; }

.case-box li {
  font-family: var(--font-data);
  font-size: 0.82rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-hi);
}

/* =========================================================
   Chapter detail-phase dossier overlays (v5, DESIGN-SPEC section 4
   #2): file chip + identity, story, THE CASE, spec strip. These
   replace the deleted info-A flow sections, staged directly on the
   footage in the frame's negative space. Corner-anchored so they
   never sit over the car body at these clips' compositions; the
   position utilities below (.pos-tl/.pos-tr/.pos-bl/.pos-br) are
   assigned per chapter in the markup so the region rotates chapter
   to chapter. All start hidden; js/main.js drives each block's
   entrance on the chapter's scrub timeline (four different motions:
   slide-left, slide-right, rise, and a lights-on flicker).
   ========================================================= */

.detail-chip,
.detail-story,
.detail-specs {
  position: absolute;
  z-index: 2;
  max-width: 30ch;
  padding: 12px 16px;
  /* Translucent glass: the blur carries legibility so the footage
     stays visible through the panel; text-shadow backstops small
     mono text over bright regions. */
  background: rgba(12, 12, 14, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  opacity: 0;
}

.detail-chip-label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 6px;
}

.detail-chip-identity {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-hi);
  margin: 0;
}

.detail-story p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-hi);
  margin: 0 0 10px;
}

.detail-story p:last-child { margin-bottom: 0; }

.detail-case {
  position: absolute;
  z-index: 2;
  max-width: 32ch;
  opacity: 0;
}

.detail-case .case-label { margin-bottom: 8px; }
.detail-case li { font-size: 0.72rem; }

.detail-specs {
  max-width: 30ch;
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--ink-body);
}

/* Corner regions shared by chapter and scene dossier blocks. Bottom
   offset clears the persistent .chapter-corner tag (bottom: 32px). */
.pos-tl { top: 14%; left: var(--space-24); text-align: left; }
.pos-tr { top: 14%; right: var(--space-24); text-align: right; }
.pos-bl { bottom: 88px; left: var(--space-24); text-align: left; }
.pos-br { bottom: 88px; right: var(--space-24); text-align: right; }

/* THE CASE reads as a left-aligned bullet list regardless of which
   corner it occupies; only its box position flips with pos-bl/br. */
.detail-case.pos-bl,
.detail-case.pos-br { text-align: left; }

@media (max-width: 767px) {
  /* Four independent corners don't fit a narrow viewport: collapse
     each dossier block to a full-width row and stack chip above
     story, case above specs, by vertical offset instead. js/main.js
     also SEQUENCES these on mobile (chip+story, then case+specs) so
     at most two of the four are ever on screen at once; the fixed
     px offsets below only need to keep each pair from colliding with
     itself or the fixed nav, not with the other pair. */
  .detail-chip, .detail-story, .detail-case, .detail-specs {
    left: var(--space-24);
    right: var(--space-24);
    max-width: none;
    text-align: left;
  }
  /* Nav is ~88px tall unscrolled on mobile (44px toggle + 22px*2
     padding), ~72px scrolled; 100px clears either state by at least
     12px. Story sits a fixed offset below chip's own rendered height
     (roughly 67px) plus a 12px gap, rather than a percentage, so it
     can't drift above chip on short viewports. */
  .detail-chip { top: 100px; }
  .detail-story { top: 180px; }
  .detail-case { bottom: 158px; }
  .detail-specs { bottom: 64px; }
  /* Mobile drops the boxes entirely (client request): bare typography
     over the footage, legibility carried by text-shadow. THE CASE
     keeps only its thin gold rule as a brand accent. */
  .detail-chip, .detail-story, .detail-specs,
  .detail-case.case-box {
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 14px rgba(0, 0, 0, 0.8);
  }
  .detail-case.case-box {
    border-left: 2px solid var(--gold);
    padding-left: 14px;
  }
}

/* =========================================================
   Act II scene dossier overlays (v5): THE CASE + spec strip,
   replacing the deleted info-B flow sections, staged opposite the
   existing bottom-left location caption.
   ========================================================= */

.scene-case {
  position: absolute;
  z-index: 2;
  right: var(--space-24);
  bottom: 96px;
  max-width: 34ch;
  opacity: 0;
}

.scene-specs {
  position: absolute;
  z-index: 2;
  right: var(--space-24);
  bottom: 32px;
  max-width: 34ch;
  padding: 10px 14px;
  /* Translucent glass, matching the chapter dossier panels. */
  background: rgba(12, 12, 14, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--ink-body);
  opacity: 0;
}

@media (max-width: 767px) {
  .scene-case, .scene-specs {
    left: var(--space-24);
    right: var(--space-24);
    max-width: none;
  }
  .scene-case { bottom: 104px; }
  .scene-specs { bottom: 60px; }
  .scene-caption { bottom: 20px; }
  /* Same box-less treatment as the chapter dossiers on mobile. */
  .scene-specs,
  .scene-case.case-box {
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 14px rgba(0, 0, 0, 0.8);
  }
  .scene-case.case-box {
    border-left: 2px solid var(--gold);
    padding-left: 14px;
  }
}

/* =========================================================
   Reduced motion: no pins or scrubbing. Act I chapters render their
   profile posters as static banners followed by the SAME dossier
   content (hero lockup where present, chapter title, file chip,
   story, the case, spec strip) stacked as plain static text - this
   replaces the deleted info-A sections. Act II scenes render their
   scene posters as banners followed by the caption, the case, and
   the spec strip, stacked the same way in place of the deleted
   info-B sections. The terminal renders as poster + closing line.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .chapter-pin {
    height: auto;
    background: var(--bg-0);
  }
  .chapter-visual {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 70vh;
  }
  .chapter-poster { display: block; }
  .chapter-video,
  .chapter-scrim,
  .chapter-black { display: none; }

  /* Chapters: the overlay becomes a normal-flow column beneath the
     poster instead of an absolute cover, so every dossier block can
     read top to bottom without truncation. */
  .chapter .chapter-overlay {
    display: block;
    position: static;
    inset: auto;
    pointer-events: auto;
    padding: 40px var(--space-24) 56px;
  }
  .chapter .hero-lockup,
  .chapter .chapter-title,
  .chapter .detail-chip,
  .chapter .detail-story,
  .chapter .detail-case,
  .chapter .detail-specs,
  .chapter .chapter-corner {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    max-width: 62ch;
    margin: 0 auto 32px;
  }
  .chapter .detail-chip,
  .chapter .detail-story,
  .chapter .detail-specs {
    background: none;
    backdrop-filter: none;
    border: 0;
    padding: 0;
    text-align: left;
  }
  .chapter .detail-case {
    text-align: left;
    padding: 24px 28px;
  }
  .chapter .chapter-corner { opacity: 0.7; }

  /* Scenes: same static-column treatment, caption then case then
     spec strip. */
  .scene .chapter-overlay {
    display: block;
    position: static;
    inset: auto;
    pointer-events: auto;
    padding: 32px var(--space-24) 56px;
  }
  .scene .scene-caption,
  .scene .scene-case,
  .scene .scene-specs {
    position: static;
    inset: auto;
    opacity: 1;
    max-width: 62ch;
    margin: 0 0 24px;
    text-shadow: none;
  }
  .scene .scene-specs {
    background: none;
    backdrop-filter: none;
    border: 0;
    padding: 0;
  }

  .film-terminal .chapter-overlay {
    display: block;
    position: relative;
    inset: auto;
    pointer-events: auto;
  }
  .film-terminal .overlay-terminal {
    position: static;
    opacity: 1;
    padding: 48px var(--space-24) 56px;
  }
  .terminal-line,
  .terminal-caption { text-shadow: none; }
}

/* =========================================================
   Teaser band (v5): thin bridge from the film's terminal finale to
   the funnel close at #modifi50.
   ========================================================= */

.teaser-band {
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  padding: 56px 0;
}

.teaser-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}

.teaser-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--ink-hi);
}

/* =========================================================
   Thesis
   ========================================================= */

.thesis {
  background: var(--bg-0);
  padding: var(--space-160) 0;
}

.thesis h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  max-width: 14ch;
}

/* Quiet, definitional answer block (AEO): what Modifi Classics is,
   in one short paragraph, ahead of the louder thesis-intro line. */
.thesis-answer {
  margin-top: 24px;
  max-width: 62ch;
  color: var(--ink-mute);
  font-size: 0.95rem;
  line-height: 1.6;
}

.thesis-intro {
  margin-top: 28px;
  max-width: 52ch;
  color: var(--ink-body);
  font-size: 1.05rem;
}

.thesis-steps {
  margin-top: var(--space-96);
  display: grid;
  gap: 56px;
}

@media (min-width: 900px) {
  .thesis-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
}

.thesis-step {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.step-number {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--gold);
  line-height: 1;
}

.step-body h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.step-body p {
  color: var(--ink-body);
}

.thesis-close {
  margin-top: var(--space-96);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-hi);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.4;
  text-align: center;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Proof / Stats
   ========================================================= */

.proof {
  background: var(--bg-1);
  padding: var(--space-160) 0;
}

.proof h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  max-width: 16ch;
}

.stat-grid {
  margin-top: var(--space-96);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

/* 5 tiles must tile the grid with no empty cell (the 1px-gap
   background would render any empty cell as a visible gray box).
   2-col: rows of 2 + 2, fifth tile spans the full last row.
   6-track: tiles 1-3 span 2 tracks (row of 3), tiles 4-5 span
   3 tracks (row of 2). Every cell is filled at every width. */
@media (min-width: 640px) and (max-width: 959px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-tile:nth-child(5) { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  .stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stat-tile { grid-column: span 2; }
  .stat-tile:nth-child(4),
  .stat-tile:nth-child(5) { grid-column: span 3; }
}

.stat-tile {
  background: var(--bg-1);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stat-value {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--gold);
  font-weight: 500;
  line-height: 1;
}

.stat-caption {
  color: var(--ink-body);
  font-size: 0.95rem;
}

.stat-source {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: auto;
}

.proof-quote {
  margin-top: var(--space-96);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-hi);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.5;
  max-width: 46ch;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Still Early
   ========================================================= */

.early {
  background: var(--bg-0);
  padding: var(--space-160) 0;
}

.early-grid {
  display: grid;
  gap: 64px;
}

@media (min-width: 900px) {
  .early-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}

.early h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin-bottom: 24px;
}

.early-copy p { max-width: 46ch; }

.early-bullets {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.early-bullets li {
  font-family: var(--font-data);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-body);
  padding-left: 20px;
  position: relative;
}

.early-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}

.era-timeline {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px;
  background: var(--bg-1);
}

.era-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.era-label { min-width: 0; }
.era-track { min-width: 0; }

.era-label {
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--ink-body);
}

.era-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-2);
  overflow: hidden;
  display: block;
}

.era-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ink-mute);
}

.era-fill-mature { width: 100%; }
.era-fill-established { width: 78%; }
.era-fill-early {
  width: 32%;
  background: var(--gold);
}

.era-status {
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  justify-self: end;
}

.era-status-gold { color: var(--gold); }

.era-row-highlight {
  border-radius: 8px;
  margin: -8px;
  padding: 8px;
  background: rgba(201, 162, 39, 0.08);
}

/* =========================================================
   Community
   ========================================================= */

.community {
  position: relative;
  height: 100dvh;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.community-media {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
}

.community-image {
  width: 100%;
  height: 120%;
  object-fit: cover;
}

.community-scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 14, 0.72);
}

.community-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
}

.community h2 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  margin-bottom: 24px;
}

.community p { color: var(--ink-hi); }

.community-line {
  margin-top: 28px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--gold-soft);
}

/* =========================================================
   The Modifi 50 (v5): the product / funnel close. Borrows the
   terminal's market-data aesthetic: thin rules, mono numerals,
   restrained gold.
   ========================================================= */

.modifi50 {
  background: var(--bg-1);
  padding: var(--space-160) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.modifi50 h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin-bottom: 24px;
}

.modifi50-lead {
  max-width: 52ch;
  font-size: 1.05rem;
}

.modifi50-chips {
  margin-top: var(--space-96);
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .modifi50-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.modifi50-chips li {
  background: var(--bg-1);
  padding: 22px 24px;
  font-family: var(--font-data);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-hi);
}

.modifi50-bridge {
  margin-top: var(--space-96);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-hi);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.5;
  max-width: 46ch;
}

.modifi50-cta {
  margin-top: 56px;
}

.modifi50-fine {
  margin-top: 20px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}

/* =========================================================
   FAQ (#faq): six Q/A pairs, word-identical to the FAQPage
   JSON-LD in <head>. Same section rhythm as Thesis/Proof/Early.
   ========================================================= */

.faq {
  background: var(--bg-0);
  padding: var(--space-160) 0;
}

.faq h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  max-width: 18ch;
}

.faq-list {
  margin-top: var(--space-96);
  display: grid;
  gap: 48px;
}

@media (min-width: 700px) {
  .faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 56px;
  }
}

.faq-item {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  max-width: 60ch;
}

.faq-item h3 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.faq-item p {
  color: var(--ink-body);
}

/* =========================================================
   Letter + Footer
   ========================================================= */

.letter {
  background: var(--bg-0);
  padding: var(--space-160) 0;
}

.letter-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 64px 48px;
  text-align: center;
}

.letter-card .eyebrow { justify-content: center; }

.letter-card h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin-bottom: 20px;
}

.letter-card > p { max-width: 44ch; margin: 0 auto; }

.letter-form { margin-top: 36px; }

.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.letter-input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-hi);
}

.letter-input::placeholder { color: var(--ink-mute); }

.letter-input:focus {
  border-color: var(--gold-soft);
}

.form-error {
  margin-top: 14px;
  min-height: 1.2em;
  color: var(--danger);
  font-size: 0.85rem;
}

.letter-success {
  margin-top: 36px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-soft);
  font-size: 1.3rem;
}

.site-footer {
  background: var(--bg-0);
  border-top: 1px solid var(--line);
  padding: 56px 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.footer-links a {
  text-decoration: none;
  color: var(--ink-body);
  font-size: 0.85rem;
}

.footer-links a:hover { color: var(--gold-soft); }

.footer-tagline {
  max-width: 52ch;
  color: var(--ink-body);
}

.footer-fine-print {
  max-width: 60ch;
  color: var(--ink-mute);
  font-size: 0.8rem;
}

.footer-updated {
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* =========================================================
   Generic scroll-reveal (enter-once). CSS default is visible;
   JS applies the hidden starting state only when motion is
   enabled, so content never breaks without JS.
   ========================================================= */

.reveal { opacity: 1; }