/* Second Site Studio. Matte black, off-white, brushed champagne gold.
   Dark is the lead look; light mode is re-picked (porcelain paper, black
   lacquer, a deeper gold for text), not inverted. Mobile first. */

/* Instrument Serif: SIL Open Font Licence (assets/fonts/OFL.txt), self-hosted. */
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark light;
  --paper: #0b0b0c;
  --panel: #111113;
  --ink: #f2efe8;
  --ink-soft: #a9a49b;
  --gold: #c8a96a;          /* decorative and large text */
  --gold-text: #c8a96a;     /* 9.2:1 on paper */
  --gold-hi: #dcc28c;
  --on-gold: #0b0b0c;
  --line: #2f2b25;
  --line-strong: #4a4337;
  --focus: #e6cf98;
  --film-bg: #0b0b0c;
  --font-display: "Instrument Serif", "Didot", "Bodoni 72", "Bodoni MT", Georgia, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
  --step-0: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 4.25rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: light) {
  :root {
    --paper: #f4f4f2;
    --panel: #ffffff;
    --ink: #121212;
    --ink-soft: #4f4c47;
    --gold: #b38f4d;
    --gold-text: #7a5a1f;   /* 5.8:1 on paper */
    --gold-hi: #c6a462;
    --on-gold: #121212;
    --line: #dcd8cf;
    --line-strong: #b9b2a3;
    --focus: #7a5a1f;
    --film-bg: #ecebe8;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--header-h) + 0.75rem); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, dialog { margin: 0; padding: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 400; line-height: 0.98; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-0); line-height: 1.3; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.gold { color: var(--gold-text); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--gutter), 78rem); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: 0.6rem 1rem; background: var(--gold); color: var(--on-gold); font-weight: 600; }
.skip-link:focus { top: 0.75rem; }

.preview-banner {
  margin: 0;
  padding: 0.3rem var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-align: center;
}

/* --- Header ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px solid var(--line);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 1rem; }
.logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; padding-block: 0.3rem; }
.logo picture { flex: none; }
.logo img { width: 1.55rem; height: auto; }
.logo-words { display: grid; line-height: 1; }
.logo-name { font-weight: 300; font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase; }
.logo-studio { margin-top: 0.38rem; font-weight: 400; font-size: 0.56rem; letter-spacing: 0.62em; text-transform: uppercase; color: var(--gold-text); }
nav { display: none; }
.nav-list { display: flex; gap: 0.25rem; }
.nav-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem;
  text-decoration: none; font-size: var(--step--1); color: var(--ink-soft);
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0.75rem calc(100% - 0.6rem) / 0 1px;
  transition: color 160ms ease, background-size 220ms var(--ease);
}
.nav-list a:hover, .nav-list a:focus-visible { color: var(--ink); background-size: calc(100% - 1.5rem) 1px; }
.label-long { display: none; }
@media (min-width: 40rem) { .label-short { display: none; } .label-long { display: inline; } }
@media (min-width: 64rem) { nav { display: block; } }

/* --- Buttons: square, hairline, quiet. Press, hover and focus under 250ms. ---- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3.25rem; padding: 0.7rem 1.5rem;
  border: 1px solid transparent; border-radius: 2px;
  font-size: var(--step-0); font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms ease;
}
.btn svg { flex: none; }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-hi); }
.btn-gold:active { transform: translateY(1px); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--gold); }
.btn-line:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.btn-line:active { transform: translateY(1px); }
.btn-small { min-height: 44px; padding: 0.45rem 0.9rem; font-size: var(--step--1); }
/* A hairline that grows under the button on hover and focus. */
.btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 220ms var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.link-btn {
  background: none; border: 0; padding: 0.6rem 0.2rem; cursor: pointer;
  font-size: var(--step--1); font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.3em;
  transition: text-underline-offset 160ms ease;
}
.link-btn:hover { text-underline-offset: 0.45em; }

/* --- The film -----------------------------------------------------------------
   One 3D world behind the whole page (film.js). The words never live in it:
   each scene gets a "stage" where the film is the picture, with its words on a
   card; the prices and contact are solid sheets that scroll over it. Without
   the film (reduced motion, Save-Data, weak devices, no JavaScript) each stage
   shows a still frame rendered from the film itself. */
.film {
  position: fixed; inset: 0; z-index: -1;
  display: none; pointer-events: none; overflow: hidden;
  background: var(--film-bg);
}
html.film-on .film { display: block; }
.film canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms ease; }
html.film-ready .film canvas { opacity: 1; }

/* Labels pinned to the 3D: solid pills, so they pass in every frame. */
.film-labels { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.film-label {
  position: absolute; left: 0; top: 0;
  padding: 0.3rem 0.8rem 0.35rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 2px;
  font-size: var(--step--1);
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}
.film-lead { position: absolute; left: 0; top: 0; height: 1px; background: var(--gold); transform-origin: 0 50%; opacity: 0; }
.film-lead::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.film-pill {
  position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none;
  padding: 0.35rem 0.85rem; border-radius: 2px;
  background: var(--gold); color: var(--on-gold);
  font-size: var(--step--1); font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity 180ms ease;
}

/* --- Hero: liquid gold becomes the monogram ---------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: calc(100svh - var(--header-h) - 1.6rem);
  display: flex;
  flex-direction: column;
}
/* Phones: the monogram has its own box under the words, so the words and the
   button never sit over the metal at any screen height. The film measures
   this box and fits the S inside it. */
.hero-stage { position: relative; flex: 1 0 auto; min-height: 40svh; }
.hero-poster { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-poster img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
html.film-ready .hero-poster { opacity: 0; transition: opacity 700ms ease, visibility 0s linear 700ms; visibility: hidden; }
/* Desktops start the 3D straight after load and open on the pool of gold, so
   they don't flash the finished still first: the words show on the plain
   studio black until the liquid fades in. */
html.film-on:not(.film-lite) .hero-poster img { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.film-on .hero-poster img { animation: settle 4.5s cubic-bezier(.2, .6, .2, 1) both; transform-origin: 50% 60%; }
  .hero h1 { animation: rise 1000ms var(--ease) both; }
  .hero-sub { animation: rise 1000ms 120ms var(--ease) both; }
}
.hero.is-paused .hero-poster img { animation-play-state: paused; }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes rise { from { transform: translateY(0.35em); } to { transform: none; } }

/* Phones: the words on top, the monogram below them. Nothing moving reaches
   the button: it sits in the words' block, well above the metal. */
.hero-words { position: relative; z-index: 2; padding: clamp(1.25rem, 4.5svh, 3.5rem) var(--gutter) 1rem; max-width: 40rem; }
.hero h1 { font-size: clamp(2.9rem, 1.6rem + 7.4vw, 7.2rem); line-height: 0.94; }
.hero-sub { margin-top: 1rem; max-width: 28ch; font-size: var(--step-1); line-height: 1.4; color: var(--ink); }
.hero-action { margin-top: 1.5rem; }

/* --- Scene titles: huge hollow serif, a gold hairline like the outlined S ---- */
.scene-title {
  position: absolute; left: var(--gutter); top: 0.5rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 17vw, 13rem);
  line-height: 0.9;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  pointer-events: none;
  user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .scene-title { transform: translateX(calc((0.5 - var(--p, 0.5)) * 36vw)); will-change: transform; }
}

/* --- Stages -------------------------------------------------------------------- */
.stage { position: relative; overflow-x: clip; }
.stage-inner { position: relative; }
html.film-on .stage { height: 200svh; }
html.film-on .stage--second { height: 270svh; }
html.film-on .stage--work { height: 290svh; }
html.film-on .stage--how { height: 230svh; }
html.film-on .stage--land { height: 170svh; }
html.film-on .stage-inner {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  overflow: clip;
}
html.film-on .stage-still { position: absolute; inset: 0; z-index: -1; }
html.film-on .stage-still img { width: 100%; height: 100%; object-fit: cover; }
html.film-ready .stage-still { display: none; }
.stage-still img { width: 100%; max-height: 92svh; object-fit: cover; background: var(--film-bg); }

/* The words for each scene: a solid card with a gold hairline on top. */
.stage-card {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 2.5rem;
  background: var(--paper);
  border-top: 1px solid var(--gold);
}
.stage-card h2 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem); }
html.film-on .stage-card {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.1rem var(--gutter) 1.4rem;
}
html:not(.film-on) .stage .scene-title { top: 1rem; }

/* Your second site: the pain, then the pleasure, as the page rebuilds. */
.second-card { display: grid; }
.beat p { margin-top: 0.6rem; max-width: 36ch; color: var(--ink-soft); }
.beat-head { font-family: var(--font-display); font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem); line-height: 0.98; color: var(--gold-text) !important; margin-top: 0 !important; max-width: 16ch; }
.beat--pleasure { margin-top: 1.75rem; }
html.film-on .second-card .beat { grid-area: 1 / 1; margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* A clean swap at one point in the scroll, then a short timed fade, so the
     words are never left half-faded at any scroll position. */
  html.film-on .second-card .beat { transition: opacity 220ms ease; }
  html.film-on .beat--pain { opacity: clamp(0, (0.575 - var(--p, 0)) * 1000, 1); }
  html.film-on .beat--pleasure { opacity: clamp(0, (var(--p, 0) - 0.575) * 1000, 1); }
}

/* The work: the list beside the ring. */
.work-lede { margin-top: 0.6rem; color: var(--ink-soft); max-width: 38ch; }
.work-list { margin-top: 1rem; display: grid; counter-reset: w; }
.work-list li { padding: 0.75rem 0 0.75rem 2.2rem; border-top: 1px solid var(--line); position: relative; counter-increment: w; transition: border-color 200ms ease; }
.work-list li:last-child { border-bottom: 1px solid var(--line); }
.work-list li::before { content: "0" counter(w); position: absolute; left: 0; top: 0.8rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-text); }
.work-list li.is-front { border-top-color: var(--gold); }
.work-name { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.05; }
.work-line { margin-top: 0.2rem; font-size: var(--step--1); color: var(--ink-soft); }
.work-links { display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; align-items: center; font-size: var(--step--1); }
.work-links a { display: inline-block; padding: 0.6rem 0; font-weight: 600; text-decoration-color: var(--gold); text-underline-offset: 0.3em; }
.work-links:empty { display: none; }
.tag { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border: 1px solid var(--gold); border-radius: 2px; font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.5; vertical-align: 0.35em; color: var(--gold-text); }
.work-note { margin-top: 0.9rem; font-size: var(--step--1); color: var(--ink-soft); }

/* How it works */
.steps { margin-top: 1rem; display: grid; counter-reset: s; }
.steps li { position: relative; padding: 0.7rem 0 0.7rem 2.6rem; border-top: 1px solid var(--line); counter-increment: s; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.5; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0.35rem; font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--gold-text); }
.steps strong { display: block; font-weight: 600; font-size: var(--step-0); color: var(--ink); }
.how-note { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--gold); font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; }

/* Phones with the film: compact cards so the 3D keeps the top of the screen. */
@media (max-width: 47.99rem) {
  html.film-on .stage-card h2 { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 2.6rem); }
  html.film-on .beat-head { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 2.6rem); }
  html.film-on .work-lede, html.film-on .work-note, html.film-on .work-line { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  html.film-on .work-list { grid-template-columns: 1fr 1fr; column-gap: 1rem; margin-top: 0.6rem; }
  html.film-on .work-list li { padding: 0.45rem 0 0.35rem 1.7rem; }
  html.film-on .work-list li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  html.film-on .work-list li::before { top: 0.5rem; font-size: 1rem; }
  html.film-on .work-name { font-size: 1.2rem; }
  html.film-on .work-name .tag { display: block; width: max-content; margin: 0.25rem 0 0; vertical-align: 0; }
  html.film-on .work-links a, html.film-on .link-btn { padding-block: 0.45rem; }
  html.film-on .steps li { padding-block: 0.45rem; }
  html.film-on .steps li::before { font-size: 1.6rem; top: 0.3rem; }
  html.film-on .how-note { display: none; }
  /* Keep the card clear of the pause button. */
  html.film-on .stage-card { padding-bottom: 3.6rem; }
}

/* --- Dialogs ------------------------------------------------------------------- */
.work-dialog {
  width: min(32rem, calc(100% - 2rem));
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: var(--panel);
  color: var(--ink);
}
.work-dialog::backdrop { background: rgb(0 0 0 / 0.72); }
.work-dialog h3 { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; line-height: 1; }
.work-dialog p { margin-top: 0.9rem; color: var(--ink-soft); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.work-dialog[open] { animation: dlg 220ms var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Pause button: fixed bottom right, above everything that moves ---------- */
.motion-toggle {
  position: fixed; right: 0.75rem; bottom: 0.75rem; z-index: 30;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0.4rem 0.9rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 2px;
  font-size: var(--step--1); cursor: pointer;
  transition: border-color 160ms ease, transform 120ms ease;
}
.motion-toggle[hidden], html:not(.film-on) .motion-toggle { display: none; }
.motion-toggle:hover { border-color: var(--gold); }
.motion-toggle:active { transform: scale(0.97); }
.motion-toggle svg { fill: var(--gold); }
.ml-long { display: none; }
@media (min-width: 40rem) { .ml-long { display: inline; } }
.motion-toggle .icon-play { display: none; }
body:has(.hero.is-paused) .motion-toggle .icon-play { display: inline; }
body:has(.hero.is-paused) .motion-toggle .icon-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

/* --- Sheets ---------------------------------------------------------------------- */
.section { position: relative; z-index: 1; padding-block: clamp(4rem, 10vw, 8rem); background: var(--paper); border-top: 1px solid var(--line); }
.section h2 { font-size: clamp(2.6rem, 1.5rem + 5vw, 6rem); }

.prices-lede { margin-top: 1rem; font-size: var(--step-1); color: var(--ink-soft); }
.price-options { margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; gap: 2.5rem; }
.price { padding-top: 1.25rem; border-top: 1px solid var(--gold); }
.price h3 { color: var(--ink-soft); font-weight: 500; }
.price-big { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.num { font-family: var(--font-display); font-size: clamp(4.5rem, 2.5rem + 9vw, 8.5rem); line-height: 0.9; font-variant-numeric: tabular-nums; color: var(--ink); }
.price-then { font-size: var(--step-1); line-height: 1.35; max-width: 18ch; }
.price-note { margin-top: 0.9rem; max-width: 34ch; color: var(--gold-text); }
.covers { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.covers h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); line-height: 1.05; }
.covers-list { margin-top: 1rem; display: grid; }
.covers-list li { position: relative; padding: 0.8rem 0; }
.covers-list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.covers-note { margin-top: 1rem; color: var(--ink-soft); }
@media (min-width: 48rem) {
  .price-options { grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 5rem); }
  .covers { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 5rem); align-items: start; }
  .covers-list { margin-top: 0; grid-row: span 2; }
}

.section-contact { border-top: 0; min-height: 70svh; display: flex; align-items: center; }
.contact-layout { display: grid; gap: 1.25rem; }
.section-contact h2 { font-size: clamp(2.7rem, 1.4rem + 6.4vw, 7rem); max-width: 14ch; }
.contact-lede { font-size: var(--step-1); line-height: 1.45; max-width: 34ch; color: var(--ink-soft); }
.contact-actions { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; }
.contact-plain { color: var(--ink-soft); }
.contact-plain a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 0.3em; overflow-wrap: anywhere; }
.contact-who { font-size: var(--step--1); color: var(--ink-soft); }

.site-footer { position: relative; z-index: 1; padding-block: 2.5rem 5.5rem; background: var(--paper); border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--ink-soft); }
.footer-inner { display: grid; gap: 1.25rem; }
.footer-brand { display: flex; align-items: center; gap: 0.8rem; }
.footer-brand img { width: 1.15rem; }
.footer-brand strong { color: var(--ink); font-weight: 600; }
.site-footer a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 0.25em; overflow-wrap: anywhere; display: inline-block; padding-block: 0.35rem; }
.footer-small { font-size: 0.8rem; }
@media (min-width: 48rem) { .footer-inner { grid-template-columns: auto 1fr; } .footer-small { grid-column: 1 / -1; } }

/* --- Scroll scenes in the sheets (added by script.js; visible without it) ---- */
html.scenes-on [data-scene="count"] { border-top-color: transparent; background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 0 / 0 1px; transition: background-size 900ms var(--ease); }
html.scenes-on [data-scene="count"].is-in { background-size: 100% 1px; }
html.scenes-on [data-scene="steps"] li::after { transform: scaleX(0); transition: transform 600ms var(--ease); }
html.scenes-on [data-scene="steps"].is-in li::after { transform: scaleX(1); }
html.scenes-on [data-scene="steps"] li:nth-child(2)::after { transition-delay: 90ms; }
html.scenes-on [data-scene="steps"] li:nth-child(3)::after { transition-delay: 180ms; }
html.scenes-on [data-scene="steps"] li:nth-child(4)::after { transition-delay: 270ms; }
html.scenes-on [data-scene="steps"] li:nth-child(5)::after { transition-delay: 360ms; }
html.scenes-on [data-scene="steps"].is-in li::after { background: var(--gold); }

/* --- Wide screens ------------------------------------------------------------ */
@media (min-width: 48rem) and (min-aspect-ratio: 1/1) {
  .hero { justify-content: center; }
  .hero-stage { position: absolute; inset: calc(-1 * var(--header-h) - 1.6rem) 0 0 0; z-index: -2; min-height: 0; }
  .hero-poster { background: var(--film-bg); }
  .hero-poster img { object-fit: cover; }
  .hero-words { width: min(42rem, 48vw); max-width: none; padding: 2rem clamp(1.5rem, 4vw, 4rem); margin-left: max(0px, calc((100vw - 78rem) / 2 - 1rem)); }
  .hero h1 { font-size: clamp(3.4rem, 1rem + 6vw, 8rem); }
  .hero-sub { max-width: 30ch; }
  html.film-on .stage-card {
    left: var(--gutter); right: auto; top: 50%; bottom: auto;
    transform: translateY(-50%);
    width: min(29rem, 38vw);
    padding: 1.6rem 1.75rem 1.75rem;
    border: 1px solid var(--line);
    border-top-color: var(--gold);
  }
  html.film-on .scene-title { left: auto; right: var(--gutter); top: 0.25rem; font-size: clamp(3.6rem, 8.4vw, 8rem); }
  html.film-on .stage--second .stage-card { top: auto; bottom: 2.5rem; transform: none; width: min(31rem, 40vw); }
}
@media (min-aspect-ratio: 1/1) and (max-height: 40rem) {
  html.film-on .stage-card { padding: 1rem 1.25rem; }
  html.film-on .work-line, html.film-on .work-lede, html.film-on .work-note { display: none; }
  html.film-on .steps li { padding-block: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .site-header, .film, .film-labels, .stage-still, .hero-poster, .scene-title, .motion-toggle { display: none !important; }
}

/* Still-frame capture (film.js ?still=J): only the film shows. */
html.film-capture body > :not(.film) { visibility: hidden; }
html.film-capture .film { z-index: 1; }
html.film-capture .film canvas { transition: none; }
html.film-capture { scrollbar-width: none; }
html.film-capture::-webkit-scrollbar { display: none; }