/* site.css — Surf or Skate marketing page.
   Design language inherited from romyilano/sfmoma_alejandro: dark editorial
   ground, Pirata One display type against Inter UI type, a gold hairline as the
   only accent, and section labels big enough to read across a room. */

/* ── 1. Tokens ── */
:root {
  --color-bg:        #0d0b09;
  --color-surface:   #111111;
  --color-header-bg: #000000;
  --color-text:       #f0ede8;
  --color-text-muted: rgba(255, 255, 255, 0.55);
  --color-text-faint: rgba(255, 255, 255, 0.30);
  --color-accent:    #c8a96e;
  --border:          rgba(255, 255, 255, 0.07);

  --page-x:        clamp(20px, 5vw, 60px);
  --header-h:      52px;
  --section-y:     clamp(48px, 8vw, 112px);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display:   'Pirata One', 'Papyrus', fantasy;
  --font-ui:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-editorial: 'Libre Baskerville', Georgia, serif;
  --font-mono:      ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

/* ── 2. Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { min-height: 100dvh; overflow-x: hidden; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade-out 220ms ease forwards; }
::view-transition-new(root) { animation: fade-in  220ms ease forwards; }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }

:focus-visible { outline: 2px solid #ffffff; outline-offset: 6px; }

/* ── 3. Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.skip-link:focus { top: 16px; }

/* ── 4. Splash hero ── */
.splash {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #080808;
}

/* The permanent hero: two stacked full-bleed video plates that alternate
   active/standby roles to crossfade a three-clip reel (surf → bike →
   skate → surf → ...) forever. Only the incoming (standby) plate ever
   animates opacity, and it does so stacked on top at z-index 1 while the
   outgoing plate stays put at opacity 1 / z-index 0 underneath — animating
   both at once would composite as roughly 25% of this section's #080808
   background bleeding through at the transition's midpoint, a visible dip
   toward black. A one-sided fade over an opaque backdrop is a true
   dissolve with no bleed.

   `800ms` below is one half of a constant whose other half is
   `HERO_FADE_MS` in index.html's sequencing script — the two must be
   changed together. The `@media (prefers-reduced-motion: reduce)` block
   near the end of this file already forces this transition's duration to
   ~0ms; index.html's script independently reads the same preference so
   the incoming clip doesn't still start 800ms early under that mode.

   `object-fit`/`object-position` and this filter apply identically to
   both plates despite the three clips' differing source aspect ratios
   (1536x672, 1376x768, 1440x704) — `cover` crops each to the viewport
   with the subject centered, no letterboxing. */
.splash-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.04);
  opacity: 1;
}
.splash-plate.is-standby {
  z-index: 1;
  opacity: 0;
}
.splash-plate.is-fading-in {
  opacity: 1;
  transition: opacity 800ms linear;
}

/* Two-axis scrim: the horizontal pass keeps the wordmark legible over a light
   mesh, the vertical pass anchors the page to the section below it. */
.splash-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.60) 0%,
      rgba(0,0,0,0.32) 35%,
      rgba(0,0,0,0.15) 60%,
      rgba(0,0,0,0.48) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.00) 30%,
      rgba(13,11,9,0.92) 100%);
}

.splash-headline {
  position: absolute;
  bottom: clamp(1.5rem, 5vw, 4rem);
  left: var(--page-x);
  z-index: 3;
  /* 'Surf, Bike or Skate' is half again as long as the name this was sized
     for; 26ch lets it break as three short display lines rather than one
     cramped stack of orphans. */
  max-width: min(92vw, 26ch);
}

.splash-eyebrow {
  font-family: var(--font-ui);
  font-size: clamp(0.65rem, 0.9vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.splash-wordmark {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 10.5vw, 10rem);
  font-weight: 400;
  line-height: 0.92;
  margin: 0;
  text-shadow: 0 2px 30px rgba(0,0,0,0.40);
}

.splash-tagline {
  font-family: var(--font-editorial);
  font-size: clamp(0.95rem, 2.1vw, 1.9rem);
  font-style: italic;
  line-height: 1.25;
  margin-top: 12px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.50);
}

.splash-enter {
  position: absolute;
  bottom: clamp(1.5rem, 5vw, 4rem);
  right: var(--page-x);
  z-index: 3;
  font-size: clamp(1rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  padding: 12px 0;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition: border-color 200ms ease, transform 180ms ease;
  text-shadow: 0 2px 20px rgba(0,0,0,0.50);
}
.splash-enter:hover {
  border-bottom-color: var(--color-accent);
  transform: translateY(-1px);
}

/* ── 5. Sticky header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  padding: 14px var(--page-x);
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.site-name:hover { opacity: 0.65; }

.site-nav {
  display: flex;
  gap: clamp(14px, 2.5vw, 32px);
  list-style: none;
}

.site-nav a {
  font-size: clamp(0.62rem, 0.85vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}
.site-nav a:hover { color: #fff; }

/* ── 6. Sections ── */
.section {
  padding: var(--section-y) var(--page-x);
  border-top: 1px solid var(--border);
  scroll-margin-top: var(--header-h);
}

.section-label {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6.5vw, 6rem);
  font-weight: 400;
  line-height: 1;
  margin-bottom: clamp(20px, 3vw, 40px);
}

.eyebrow {
  font-size: clamp(0.65rem, 0.85vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.lede {
  font-family: var(--font-editorial);
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  font-style: italic;
  line-height: 1.45;
  max-width: 24ch;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.body-copy {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  color: var(--color-text);
  max-width: 62ch;
}
.body-copy + .body-copy { margin-top: 1.1em; }
.body-copy strong { font-weight: 600; }
.body-copy em { font-family: var(--font-editorial); font-style: italic; }

.accent { color: var(--color-accent); }

/* Inline links in running text. Without this they fall back to the browser's
   default blue, which is the one colour nothing else on the page uses. */
.body-copy a,
.figure figcaption a,
.art figcaption a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(200, 169, 110, 0.45);
}
.body-copy a:hover,
.figure figcaption a:hover,
.art figcaption a:hover { text-decoration-color: var(--color-accent); }

/* ── 7. Fleet grid ── */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 3px;
  margin-top: clamp(20px, 3vw, 36px);
}

.fleet-card {
  background: var(--color-surface);
  padding: clamp(20px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 172px;
  border-top: 2px solid transparent;
  transition: border-color 200ms ease, background 200ms ease;
}
.fleet-card:hover {
  border-top-color: var(--color-accent);
  background: #161616;
}

.fleet-card--lead { border-top-color: var(--color-accent); }

.fleet-glyph { font-size: 1.4rem; line-height: 1; }

.fleet-name {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.2;
}

.fleet-role {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ── 8. Model showcase ── */
.model-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 3px;
  margin-top: clamp(20px, 3vw, 36px);
}

.model-cell {
  position: relative;
  background: var(--color-surface);
  aspect-ratio: 1 / 1;
}

.model-cell model-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  --progress-bar-color: var(--color-accent);
}

/* Deliberate scope: only the Surf card reads better on solid black; the rest keep --color-surface. */
.model-cell--black {
  background: #000;
}

.model-cell--black model-viewer {
  --poster-color: #000;
}

.model-caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  pointer-events: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

/* ── 9. Steps ── */
.steps { counter-reset: step; margin-top: clamp(20px, 3vw, 36px); }

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-top: 1px solid var(--border);
  align-items: start;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-accent);
  padding-top: 0.35em;
}

.step-title {
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 600;
  margin-bottom: 6px;
}

.step-body {
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 62ch;
}

/* ── 10. Code block ── */
.code-block {
  margin-top: clamp(20px, 3vw, 32px);
  background: #080808;
  border: 1px solid var(--border);
  border-left: 2px solid var(--color-accent);
  padding: clamp(16px, 2.2vw, 26px);
  overflow-x: auto;
}

.code-block pre {
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1.05vw, 0.85rem);
  line-height: 1.75;
  color: var(--color-text);
  white-space: pre;
}

.code-block .c { color: var(--color-text-faint); }
.code-block .k { color: var(--color-accent); }

/* ── 11. Sponsor rows ── */
.link-rows { border-top: 1px solid var(--border); margin-top: clamp(16px, 2vw, 28px); }

.link-row {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 2vw, 24px);
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--color-text);
}
a.link-row:hover { opacity: 0.65; }

.link-label {
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 600;
  flex: 0 0 clamp(110px, 22vw, 210px);
}

.link-value {
  font-size: clamp(0.85rem, 1.15vw, 1rem);
  color: var(--color-text-muted);
  flex: 1;
  line-height: 1.5;
}

.link-arrow { color: var(--color-text-muted); flex-shrink: 0; }

/* ── 11b. FAQ accordion ── */
.faq-list {
  border-top: 1px solid var(--border);
  margin-top: clamp(16px, 2vw, 28px);
  /* One muted hue per row, cycling — same desaturated-editorial family as
     --color-accent rather than a saturated rainbow, so it reads as "five
     variants of this site's palette" and not a UI-kit demo. */
  --faq-1: #c8a96e; /* gold — existing accent */
  --faq-2: #8fae8f; /* sage */
  --faq-3: #a68fc9; /* dusty lavender */
  --faq-4: #6e9ac8; /* slate blue */
  --faq-5: #c98f6e; /* terracotta */
}

.faq-item {
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  padding-left: 14px;
  margin-left: -16px;
  transition: border-left-color 0.15s ease;
}

.faq-item:nth-of-type(5n+1) { border-left-color: var(--faq-1); }
.faq-item:nth-of-type(5n+2) { border-left-color: var(--faq-2); }
.faq-item:nth-of-type(5n+3) { border-left-color: var(--faq-3); }
.faq-item:nth-of-type(5n+4) { border-left-color: var(--faq-4); }
.faq-item:nth-of-type(5n+5) { border-left-color: var(--faq-5); }

.faq-item summary {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::before {
  content: "+";
  flex-shrink: 0;
  width: 1em;
  color: inherit;
  font-family: var(--font-mono);
}

.faq-item:nth-of-type(5n+1) summary::before { color: var(--faq-1); }
.faq-item:nth-of-type(5n+2) summary::before { color: var(--faq-2); }
.faq-item:nth-of-type(5n+3) summary::before { color: var(--faq-3); }
.faq-item:nth-of-type(5n+4) summary::before { color: var(--faq-4); }
.faq-item:nth-of-type(5n+5) summary::before { color: var(--faq-5); }

.faq-item[open] summary::before {
  content: "\2212"; /* − */
}

.faq-item summary:hover { opacity: 0.75; }

.faq-answer { padding: 0 0 20px 2em; }
.faq-answer .body-copy { color: var(--color-text-muted); }
.faq-answer .body-copy code { color: var(--color-text); }

/* ── 12. Footer ── */
.site-footer {
  padding: clamp(24px, 3vw, 40px) var(--page-x);
  border-top: 1px solid var(--border);
  font-size: clamp(0.75rem, 0.85vw, 0.875rem);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

.site-footer a { color: var(--color-text-muted); text-decoration: underline; }
.site-footer a:hover { color: var(--color-text); }

/* ── 13. Mobile ── */
@media (max-width: 640px) {
  .splash-wordmark { font-size: clamp(2.5rem, 12vw, 4rem); }
  .section-label   { font-size: clamp(2rem, 11vw, 3.25rem); }
  .step            { grid-template-columns: 2.25rem 1fr; }
  .link-row        { flex-direction: column; gap: 4px; }
  .link-label      { flex: none; }
}

/* The header is a fixed-width budget: a nowrap wordmark plus four nav items.
   Below 480px that budget is gone, so the wordmark yields first (the splash
   above it already carries the name at full size) and the nav tightens second.
   Measured at 375px: without this the nav's last item overflows the viewport
   by ~42px and gets clipped by body{overflow-x:hidden}. */
@media (max-width: 480px) {
  .site-header { padding-inline: 16px; gap: 10px; }
  .site-name   { font-size: 1.15rem; }
  .site-nav    { gap: 9px; }
  .site-nav a  { font-size: 0.58rem; letter-spacing: 0.045em; }
}

/* ── 14. Diagrams ──
   The three SVGs are hand-authored and inline rather than <img>, so they read
   the same custom properties as the rest of the page and need no extra
   request. Each carries its own viewBox and scales to the column width; the
   type sizes inside them are picked so the smallest label still lands above
   11px at a 375px viewport. */
.figure {
  margin: clamp(28px, 4vw, 48px) 0;
  max-width: 720px;
}

.figure svg {
  display: block;
  width: 100%;
  height: auto;
  background: #0a0908;
  border: 1px solid var(--border);
}

.figure figcaption,
.art figcaption,
.diorama-band figcaption {
  margin-top: 12px;
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 62ch;
}

.dia-panel  { fill: #141414; stroke: rgba(255, 255, 255, 0.11); stroke-width: 1; }
.dia-axis   { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; }
.dia-rule   { stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; }
.dia-spoke  { stroke: rgba(255, 255, 255, 0.20); stroke-width: 1.5; fill: none; }
.dia-lead   { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; fill: none; }
.dia-hot    { stroke: var(--color-accent); stroke-width: 4; fill: none; stroke-linecap: round; }
.dia-name   { fill: var(--color-text); font-family: var(--font-ui); font-weight: 600; }
.dia-body   { fill: var(--color-text); font-family: var(--font-ui); }
.dia-meta   { fill: var(--color-text-muted); font-family: var(--font-mono); }
.dia-mono   { fill: var(--color-text); font-family: var(--font-mono); }
.dia-accent { fill: var(--color-accent); }
.dia-accent-stroke { stroke: var(--color-accent); fill: none; stroke-width: 1.5; }
.dia-dot    { fill: rgba(255, 255, 255, 0.5); }
.dia-display { fill: var(--color-text); font-family: var(--font-display); }

/* ── 15. Photographs and illustrations ── */
.art { margin: clamp(28px, 4vw, 48px) 0; max-width: 900px; }
.art img { display: block; width: 100%; height: auto; }
.art--band img { border: 1px solid var(--border); }

/* The surf illustration was drawn on a white ground. Knocking it out would
   mean cutting the artwork, so instead it gets a paper plate and a gold
   hairline, which reads as a print pasted onto the page rather than as a
   transparency that failed to load. */
.art--plate { max-width: 480px; }
.art--plate img {
  background: #efeae0;
  border: 1px solid var(--color-accent);
  padding: 10px;
}

/* The plate now holds a 3D model rather than the white-ground ink drawing,
   so the cream paper above does not carry over — a lit mesh has no ground to
   hide, and reads better against the page's own dark surface. The gold
   hairline and the inset stay, so the figure still belongs to the same "art"
   family. 5:4 matches the 1200x960 plate it replaces. */
.art--plate model-viewer {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  padding: 10px;
  --poster-color: transparent;
  --progress-bar-color: var(--color-accent);
}

/* Shared by the dense infographics (the #question explainer plate and the
   #argument fleet poster) — both pack small type (agent scores, drive times)
   across a 2:1 plate. The 900px .art cap would push those labels below a
   readable size, so this widens to 1100px, the same width .filmstrip
   already establishes below, rather than inventing a third content width. */
.art--wide { max-width: 1100px; }

.filmstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 3px;
  margin: clamp(20px, 3vw, 36px) 0 0;
  max-width: 1100px;
}

.film-cell { background: var(--color-surface); }
.film-cell img { display: block; width: 100%; height: auto; }

.film-caption {
  display: block;
  padding: 10px 12px 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.film-caption b { color: var(--color-accent); font-weight: 400; }

/* ── 16. The quiet section ──
   Receipts are for the reader who wants to check the numbers, so the block
   sits a shade below the page ground rather than competing with the story
   above it. */
.section--quiet { background: #0a0908; }

/* ── 17. Motion safety ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .splash-enter:hover { transform: none; }
}

/* ── 18. Sound toggle ── */
.sound-toggle {
  position: fixed;
  left: var(--page-x);
  bottom: clamp(1.5rem, 5vw, 4rem);
  z-index: 150;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 11, 9, 0.72);
  color: var(--color-text);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 200ms ease, color 200ms ease;
}
.sound-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.sound-toggle svg {
  width: 20px;
  height: 20px;
}
.sound-toggle .sound-slash { display: none; }
.sound-toggle.is-muted .sound-wave { display: none; }

/* ── 19. Section plate ──
   A full-bleed plate behind one in-flow section. Same three ideas as the splash hero (art,
   scrim, type over the top), but a section is not a 100dvh box, so the whole treatment
   collapses into one background stack instead of three stacked elements: gradient layers are
   painted above the image layer (first layer is topmost), and the section's own text paints
   above every background layer without a wrapper element or a z-index stack.

   background-color is the page ground, so if the JPEG ever 404s this section falls back to
   exactly what it looked like before the plate existed — legible, just flat.

   Currently used once, on #agents. If a second plated section ever appears, lift the url()
   into a --section-plate custom property set per section rather than copying this block. */
.section--plate {
  position: relative;
  background-color: var(--color-bg);
  background-image:
    linear-gradient(90deg,
      rgba(13, 11, 9, 0.82) 0%,
      rgba(13, 11, 9, 0.78) 46%,
      rgba(13, 11, 9, 0.34) 78%,
      rgba(13, 11, 9, 0.46) 100%),
    linear-gradient(180deg,
      rgba(13, 11, 9, 0.58) 0%,
      rgba(13, 11, 9, 0.20) 18%,
      rgba(13, 11, 9, 0.20) 74%,
      rgba(13, 11, 9, 0.66) 100%),
    url("../assets/img/art-agents-van.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* 55%, not center: a tall section crops this 16:9 plate horizontally, and 55% keeps the van's
     cab and the skull star on its sliding door in the window. Same kind of tuning .splash-plate's
     object-position needed. */
  background-position: 55% center;
  /* Deliberately not `fixed`. iOS Safari renders fixed backgrounds at viewport scale and cannot
     composite them while scrolling; the parallax is not worth a broken plate on the phone that
     is the demo's fallback device. */
  background-attachment: scroll;
}

/* Scoped to the plate only — no other section's type changes. Echoes .splash-wordmark, which
   carries a shadow for the same reason: display type over a photograph. */
.section--plate .eyebrow,
.section--plate .section-label,
.section--plate .lede {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

.section--plate .body-copy {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.50);
}

/* Below 640px the text column spans the full width, so there is no quiet right-hand band to
   keep clear — the 90deg pass would only put bright plate under running text. One even vertical
   scrim instead, a shade heavier. */
@media (max-width: 640px) {
  .section--plate {
    background-image:
      linear-gradient(180deg,
        rgba(13, 11, 9, 0.90) 0%,
        rgba(13, 11, 9, 0.82) 28%,
        rgba(13, 11, 9, 0.82) 72%,
        rgba(13, 11, 9, 0.92) 100%),
      url("../assets/img/art-agents-van.jpg");
    background-position: 60% center;
  }
}
/* ── 20. Inline diorama band ──
   A second, closer-framed /xr embed inside #question, full-bleed against
   the section's own padding. Full bleed is a *negative margin-inline*
   that exactly cancels --page-x on both sides — not a full-viewport-width
   rule, which overshoots by the scrollbar width on desktop Windows/Linux.
   The stage carries the convergence-beat still as a background so the
   reader sees a real frame — not a black rectangle — while the scene
   boots, and stays on it if the scene never starts at all. */
.diorama-band {
  margin-block: clamp(28px, 4vw, 48px);
  margin-inline: calc(-1 * var(--page-x));
  width: calc(100% + 2 * var(--page-x));
  max-width: none;
}
.diorama-band figcaption {
  padding-inline: var(--page-x);
}
.diorama-band-stage {
  position: relative;
  overflow: hidden;
  height: clamp(320px, 60vh, 640px);
  border-block: 1px solid var(--border);
  background: #0d0b09 url("../assets/img/beat-5-convergence.jpg") center / cover no-repeat;
}
.diorama-band-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Without this, the full-width A-Frame canvas would capture wheel/
     drag/pinch and trap the reader's scroll mid-page. */
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms var(--ease-out-expo);
}
.diorama-band-frame.is-ready { opacity: 1; }
.sound-toggle.is-muted .sound-slash { display: block; }