/*
 * Cover Story — she is the issue, and the flagship: every liked piece in one luxurious magazine that alternates white
 * spreads with black cinema. White: warm paper and linen grain, near-black ink, one editorial red used sparingly, gold
 * hairlines. Black (.cs-dark): the premiere, film bands, the poster wall, the storyboard, the 9:00 signal, the stunt
 * reel, the archive and the back cover, in gold on black. Type is the Higgsfield system the owner chose for legibility
 * (2026-10-08): Space Grotesk for headings, Inter for reading, furniture and tracked small caps; Bodoni Moda only for the
 * VERMA masthead, which is a logo, not reading text. Drama comes
 * from the films, the photographs, the motion and the white space, never from type size (owner rule: small text).
 */
:root {
  --bg: #f8f6f1;
  --bg-raised: #fbfaf6;
  --paper: #fdfcf9;
  --mat: #ffffff;
  --fg: #141210;
  --muted: #736b60;
  --line: rgb(20 18 16 / 0.1);
  --line-strong: rgb(20 18 16 / 0.26);
  --gold: #b8955a;
  --gold-soft: rgb(184 149 90 / 0.45);
  --gold-grad: linear-gradient(100deg, #a8844a 0%, #e6cc94 38%, #b38a4c 62%, #ecd6a6 100%);
  --shadow-paper: 0 1px 1px rgb(20 18 16 / 0.04), 0 8px 16px -8px rgb(20 18 16 / 0.08), 0 40px 80px -48px rgb(20 18 16 / 0.28);
  --accent: #16130f;
  --on-accent: #f6f1e8;
  --accent-hover: #8f1d14;
  --accent-text: #8f1d14;
  --red: #8f1d14;
  --focus: #8f1d14;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-caps: 'Inter', system-ui, sans-serif;
  --font-italic: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mast: 'Bodoni Moda', 'Didot', serif;
  --page: #f8f6f1;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-quote: 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --h-weight: 500;
  --metric-weight: 500;
  --radius: 4px;
  --media-radius: 2px;
  --btn-radius: 2px;
  --motion-bg: rgb(20 18 16 / 0.82);
  --gutter: clamp(16px, 5.4vw, 112px);
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --bar-h: 58px;
  /* Where the studio window starts: under the bar, the gap and the nameplate (1000 × 170, capped at 21svh). */
  --mast-h: min((100vw - 2 * var(--gutter)) * 0.17, 21svh);
  --scene-top: calc(var(--bar-h) + clamp(12px, 2.4vh, 32px) + var(--mast-h) + clamp(12px, 2vh, 24px));
}

body {
  background-color: var(--bg);
  /* Linen: a faint woven grain over warm white paper. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  font-size: var(--fs-body);
}
.cs-noscript { padding: 120px var(--gutter); }
em { font-style: italic; }

/* ── Type ─────────────────────────────────────────────────────────────────────────────────────────────── */
.cs-kicker, .cs-eyebrow { font: 600 var(--fs-meta) / 1.3 var(--font-caps); letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); }
.cs-h1 { font: 500 var(--fs-h1) / 1.18 var(--font-display); letter-spacing: -0.02em; max-width: 19ch; }
.cs-h2 { font: 500 clamp(20px, 1.5vw, 26px) / 1.26 var(--font-display); letter-spacing: -0.015em; max-width: 36ch; }
.cs-h2 em, .cs-h1 em { font-family: var(--font-display); font-style: normal; font-weight: 400; color: var(--muted); }
.cs-h3 { font: 600 var(--fs-meta) / 1.3 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: var(--s-6) 0 var(--s-3); }
.cs-h3:first-child { margin-top: 0; }
.cs-body { font: 400 var(--fs-body) / 1.7 var(--font-body); color: color-mix(in oklab, var(--fg) 84%, transparent); max-width: 60ch; }
.cs-folio { font: 500 var(--fs-meta) / 1 var(--font-ui); letter-spacing: 0.08em; color: var(--muted); }

/* ── Bar ──────────────────────────────────────────────────────────────────────────────────────────────── */
.cs-bar {
  position: fixed; z-index: 800; inset: 0 0 auto; height: var(--bar-h); display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: var(--s-5);
  /* 0.96: over the black sections the grey nav text still clears 4.5:1 (axe, 2026-10-08: 0.88 fell below it). */
  padding: 0 var(--gutter); background: rgb(251 250 246 / 0.96); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line); transition: transform 0.5s var(--ease-out);
}
.cs-bar.is-hidden { transform: translateY(-100%); }
.cs-bar__mast { display: inline-flex; align-items: center; min-height: var(--tap); font: 600 16px/1 var(--font-mast); letter-spacing: 0.36em; text-decoration: none;
  color: #1b1814; text-shadow: 0 1px 0 rgb(255 255 255 / 0.9), 0 -1px 0 rgb(20 18 16 / 0.12); /* debossed into the paper */ }
.cs-bar__issue { color: var(--muted); text-align: center; }
.cs-bar__nav { display: flex; gap: var(--s-5); font: 500 var(--fs-small) / 1 var(--font-ui); }
.cs-bar__nav a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; color: var(--muted); }
.cs-bar__nav a:hover { color: var(--fg); }
.cs-bar__hire { min-height: var(--tap); }
.cs-bar__sep { width: 1px; align-self: center; height: 14px; background: var(--line-strong); }
.cs-case__open { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); margin-top: var(--s-4); color: var(--red); text-decoration: none;
  font: 600 var(--fs-meta) / 1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; }
.cs-case__open span { transition: transform 0.3s var(--ease-lux); }
.cs-case__open:hover span { transform: translateX(4px); }
.cs-foot__nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.cs-foot__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); color: var(--fg); text-decoration: none; font-size: var(--fs-small); }

/* ── Hero: the studio, then the cover ────────────────────────────────────────────────────────────────────
   A paper nameplate (the VERMA masthead, a logo set in Bodoni) above a widescreen scene of her studio that is alive:
   a slow camera, the window light travelling across the wall, dust in the air. The headline sits in the empty wall
   the photograph was composed for. On wide screens with motion the hero is staged: the page holds while the scene
   closes down into the living cover, the masthead flies up into the bar, and the issue turns to its contents. */
.cs-hero { position: relative; }
.cs-hero__stage { position: relative; display: grid; }
.cs-hero__scene {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: max(100svh, 640px);
  padding: calc(var(--bar-h, 72px) + clamp(12px, 2.4vh, 32px)) var(--gutter) clamp(16px, 2.6vh, 32px); overflow: hidden;
  transform-origin: 50% 50%;
}
/* The nameplate: VERMA across the full measure, ink on paper, faintly embossed. */
.cs-hero__mast { position: relative; z-index: 3; display: block; width: 100%; height: var(--mast-h); overflow: visible;
  transform-origin: 0 0; }
.cs-hero__mast text { font-family: var(--font-mast); font-weight: 500; fill: var(--fg); }
/* The film window: everything below the nameplate is the studio. */
.cs-hero__media, .cs-hero__light, .cs-hero__motes, .cs-hero__veil {
  position: absolute; left: var(--gutter); right: var(--gutter); top: var(--scene-top); bottom: clamp(56px, 8vh, 88px); border-radius: 2px;
}
.cs-hero__media { z-index: 0; overflow: hidden; background: #e8e1d5; box-shadow: var(--shadow-paper); }
.cs-hero__media .sv-media { width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 0; will-change: transform; }
.cs-hero__media .sv-label { right: 14px; bottom: 14px; }
.cs-hero__light { z-index: 1; overflow: hidden; pointer-events: none; }
.cs-hero__light::before { content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 46%;
  background: linear-gradient(104deg, rgb(255 251 240 / 0) 0%, rgb(255 249 234 / 0.34) 46%, rgb(255 251 240 / 0) 100%);
  transform: translateX(var(--light-x, -60%)) skewX(-8deg); will-change: transform; }
.cs-hero__motes { z-index: 1; width: auto; height: auto; pointer-events: none; }
.cs-hero__veil { z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgb(248 246 241 / 0.86) 0%, rgb(248 246 241 / 0.62) 30%, rgb(248 246 241 / 0) 54%); }
.cs-hero__copy { position: relative; z-index: 2; align-self: center; display: grid; gap: clamp(14px, 2.2vh, 22px); align-content: center;
  max-width: 500px; padding: clamp(20px, 3vh, 40px) 0 clamp(20px, 3vh, 40px) clamp(20px, 2.4vw, 56px); }
.cs-hero__rule { display: inline-block; width: 44px; height: 1px; margin-right: 12px; vertical-align: 0.3em; background: var(--gold); transform-origin: 0 50%; }
.cs-h1 .line, .cs-h1 .cs-line { overflow: hidden; padding-bottom: 0.08em; }
.cs-hero__ticker { display: flex; align-items: center; gap: 14px; min-height: 30px; padding: 10px 0; border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); }
.cs-hero__tick-label { flex: none; font: 600 var(--fs-meta) / 1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cs-hero__ticks { position: relative; flex: 1; height: 22px; overflow: hidden; }
.cs-hero__tick { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.cs-hero__tick:not(:first-child) { opacity: 0; }
.cs-hero__tick b { font: 600 var(--fs-h3) / 1.2 var(--font-display); letter-spacing: -0.01em; color: var(--red); font-variant-numeric: lining-nums; }
.cs-hero__tick span { font: 500 var(--fs-small) / 1.2 var(--font-ui); color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
.cs-dek { font: 400 var(--fs-body) / 1.7 var(--font-body); color: color-mix(in oklab, var(--fg) 82%, transparent); max-width: 44ch; }
.cs-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-avail { font: 500 var(--fs-meta) / 1.5 var(--font-ui); letter-spacing: 0.02em; color: var(--muted); max-width: 46ch; }
.cs-hero__foot { position: relative; z-index: 2; grid-row: 3; display: flex; justify-content: space-between; gap: var(--s-4); align-items: center;
  min-height: 24px; font: 600 var(--fs-meta) / 1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cs-hero__cue { display: inline-flex; align-items: center; gap: 10px; }
.cs-hero__cue::after { content: ''; width: 1px; height: 18px; background: linear-gradient(var(--fg), transparent); animation: cs-cue 2.4s var(--ease-lux) infinite; transform-origin: top; }
@keyframes cs-cue { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
html[data-motion='paused'] .cs-hero__cue::after, html[data-perf='lite'] .cs-hero__cue::after { animation: none; }

/* The issue: the living cover with the cover lines beside it. */
.cs-hero__object { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; gap: var(--s-8);
  padding: var(--s-9) var(--gutter) var(--s-8); max-width: 1500px; margin-inline: auto; width: 100%; }
.cs-hero__issue { order: -1; display: grid; gap: var(--s-4); max-width: 520px; justify-self: end; }
.cs-mag-wrap { justify-self: center; perspective: 2200px; }
.cs-mag { position: relative; width: min(30vw, 540px, 60svh); aspect-ratio: 3 / 4; perspective: 2200px; transform-style: preserve-3d; }
.cs-coverlines { display: grid; gap: 2px; }
.cs-coverlines a { display: flex; align-items: baseline; gap: 10px; min-height: var(--tap); padding: 8px 0; text-decoration: none; border-top: 1px solid var(--line); }
.cs-coverlines li:last-child a { border-bottom: 1px solid var(--line); }
.cs-coverlines b { font: 600 var(--fs-h3) / 1 var(--font-display); min-width: 4.2em; font-variant-numeric: lining-nums; }
.cs-coverlines span { font-size: var(--fs-small); color: color-mix(in oklab, var(--fg) 80%, transparent); }
.cs-coverlines i { flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-3px); min-width: 12px; }
.cs-coverlines small { font: 500 var(--fs-meta) / 1 var(--font-ui); color: var(--red); white-space: nowrap; }
.cs-coverlines a:hover b { color: var(--red); }
.cs-mag__issue { position: absolute; inset: 0; transform-style: preserve-3d; border-radius: 2px; }
.cs-mag__issue .sv-media { width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 2px; box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset; }
.cs-mag__issue--front { z-index: 3; }
/* The printed cover: masthead, cover lines and strap set over the portrait. */
.cs-print { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: grid; grid-template-rows: auto 1fr auto; padding: 4% 6% 5%; }
.cs-print__mast { width: 100%; height: auto; }
.cs-print__mast text { font: 400 136px/1 'Bodoni Moda', Didot, serif; letter-spacing: 0.02em; fill: #141210; }
.cs-print__lines { list-style: none; padding: 0; margin: 0; align-self: center; display: grid; gap: 1.1em; max-width: 27%; text-shadow: 0 0 12px rgb(255 255 255 / 0.7); font: 600 var(--fs-meta) / 1.25 var(--font-ui, 'Inter'), sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #141210; }
.cs-print__foot { justify-self: center; white-space: nowrap; font: 600 var(--fs-meta) / 1 var(--font-ui, 'Inter'), sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / 0.45); }
@media (max-width: 760px) { .cs-print__lines { display: none; } }
.cs-mag__issue--front::after { /* page block: the stack of pages seen at the fore-edge */
  content: ''; position: absolute; top: 3px; bottom: 3px; right: -9px; width: 9px; border-radius: 0 2px 2px 0; transform-origin: left center; transform: rotateY(70deg);
  background: repeating-linear-gradient(180deg, #f3eee5 0 1px, #d9d1c3 1px 2px);
}
.cs-mag__issue--b1 { z-index: 2; transform: translate3d(-9%, 3%, -60px) rotateZ(-6deg); filter: brightness(0.92); }
.cs-mag__issue--b2 { z-index: 1; transform: translate3d(-18%, 6%, -120px) rotateZ(-11deg); filter: brightness(0.85); }
.cs-mag__sheen { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 2px; mix-blend-mode: soft-light;
  background: linear-gradient(var(--sheen-angle, 115deg), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0.55) 48%, rgb(255 255 255 / 0) 62%); opacity: var(--sheen, 0.6); }
.cs-mag__shadow { position: absolute; left: 6%; right: 2%; bottom: -7%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgb(22 19 15 / 0.34), transparent); filter: blur(8px); transform: translateZ(-160px); }
.cs-mag__issue--front .sv-label { right: 10px; bottom: 10px; }
.cs-mag__caption { font: 500 var(--fs-meta) / 1.6 var(--font-ui); color: var(--muted); max-width: 52ch; }

@media (min-width: 2000px) {
  .cs-mag { width: min(24vw, 700px, 62svh); }
  .cs-hero__object { gap: var(--s-10); }
  .cs-hero__issue { max-width: 600px; }
}

/* Staged (wide screens with motion; set by the script before the page is revealed): the page holds on the hero while
   the scene closes into the cover. The object waits in the same frame, invisible, until the scene hands over. */
.cs-hero--staged { height: 230svh; }
.cs-hero--staged .cs-hero__stage { position: sticky; top: 0; height: 100svh; min-height: 640px; overflow: hidden; }
.cs-hero--staged .cs-hero__object { position: absolute; inset: 0; padding-top: calc(var(--bar-h, 72px) + var(--s-6)); padding-bottom: var(--s-6);
  opacity: 0; visibility: hidden; max-width: none; }
.cs-hero--staged .cs-hero__object > * { will-change: transform; }
.cs-hero--staged.is-issue .cs-hero__object { visibility: visible; }
.cs-hero--staged .cs-hero__scene { will-change: transform; }

/* ── Sections ─────────────────────────────────────────────────────────────────────────────────────────── */
.cs-section { padding: var(--s-10) 0; }
.cs-sechead { position: relative; display: grid; gap: var(--s-3); margin-bottom: var(--s-8); max-width: 900px; padding-top: var(--s-4); --rule: 1; }
.cs-sechead::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; max-width: 900px; height: 1px; background: var(--gold); transform: scaleX(var(--rule)); transform-origin: 0 50%; }
/* The colour-plate flash: the four inks run along the rule as a section opens, then leave gold behind. */
.cs-sechead::after { content: ''; position: absolute; left: 0; top: -1px; width: 100%; max-width: 900px; height: 3px; opacity: var(--plates, 0); pointer-events: none;
  background: linear-gradient(90deg, #18a7c9 0 25%, #d4317f 25% 50%, #f1c40f 50% 75%, #141210 75%); transform: scaleX(var(--plates-x, 0)); transform-origin: 0 50%; }
.cs-sechead .cs-folio { order: -1; }
.cs-sechead__dek { margin-top: var(--s-2); }

/* Contents */
.cs-contents { border-top: 1px solid var(--line); }
.cs-contents__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.8fr); gap: var(--s-8); align-items: start; }
.cs-contents__lead { display: grid; gap: var(--s-4); position: sticky; top: 110px; }
.cs-toc { counter-reset: toc; }
.cs-toc a { display: grid; grid-template-columns: 3.2em 1fr auto; align-items: baseline; gap: 14px; padding: 16px 0; min-height: var(--tap); border-top: 1px solid var(--line); text-decoration: none; }
.cs-toc li:last-child a { border-bottom: 1px solid var(--line); }
.cs-toc__p { font: 500 var(--fs-meta) / 1 var(--font-ui); color: var(--red); }
.cs-toc__t { font: 500 var(--fs-h3) / 1.3 var(--font-display); }
.cs-toc__d { grid-column: 2; font-size: var(--fs-small); color: var(--muted); font-family: var(--font-body); }
.cs-toc__arrow { color: var(--muted); transition: transform 0.4s var(--ease-out); }
.cs-toc a:hover .cs-toc__arrow { transform: translateX(4px); color: var(--red); }
.cs-toc a:hover .cs-toc__t { color: var(--red); }
.cs-contents__portrait { position: sticky; top: 110px; }
.cs-contents__portrait figcaption { margin-top: 10px; font: 500 var(--fs-meta) / 1.5 var(--font-ui); color: var(--muted); }
.cs-peek { position: fixed; z-index: 700; left: 0; top: 0; width: 220px; aspect-ratio: 3 / 4; pointer-events: none; opacity: 0; border-radius: 2px; overflow: hidden; box-shadow: 0 30px 60px rgb(22 19 15 / 0.25); }
.cs-peek img { width: 100%; height: 100%; object-fit: cover; }

/* Needs (editor's letter) */
.cs-letter .sv-needs { --bg-raised: var(--paper); border-radius: 2px; }
.cs-letter .sv-need__need { font-family: var(--font-display); }

/* Features: each case is a widescreen banner — its film full width, the kicker, name and result set over it — and
   the case file on a paper panel that rises over the banner's lower edge (left and right in turn). */
.cs-spreads .sv-case { display: block; position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: none; box-shadow: none; outline: 0; }
.cs-spreads .sv-case + .sv-case { margin-top: var(--s-10, 160px); }
.cs-spreads .sv-case__media { position: relative; height: clamp(440px, 46vw, 88svh); overflow: hidden; background: #0b0a09; }
.cs-spreads .sv-case__media > .sv-media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 0; }
.cs-spreads .sv-case__media > .sv-media .sv-label { top: 18px; bottom: auto; right: var(--gutter); }
/* A full-bleed banner is 100vw wide; where a classic scrollbar takes room, the section clips the difference. */
.cs-features { overflow-x: clip; }
.cs-spreads .sv-case__media::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgb(6 5 4 / 0.82) 0%, rgb(6 5 4 / 0.45) 38%, rgb(6 5 4 / 0) 66%), linear-gradient(0deg, rgb(6 5 4 / 0.55) 0%, rgb(6 5 4 / 0) 45%); }
.cs-spreads .sv-case:nth-child(even) .sv-case__media::after { background: linear-gradient(270deg, rgb(6 5 4 / 0.82) 0%, rgb(6 5 4 / 0.45) 38%, rgb(6 5 4 / 0) 66%), linear-gradient(0deg, rgb(6 5 4 / 0.55) 0%, rgb(6 5 4 / 0) 45%); }
.cs-case__over { position: absolute; z-index: 3; left: var(--gutter); top: clamp(56px, 12%, 140px); width: min(560px, 42vw); display: grid; gap: var(--s-4); color: #f6f1e8; }
.cs-spreads .sv-case:nth-child(even) .cs-case__over { left: auto; right: var(--gutter); text-align: right; justify-items: end; }
.cs-case__over .sv-case__kicker { color: rgb(246 241 232 / 0.78); }
.cs-case__over .sv-case__kicker span:first-child { color: #e3c48a; }
.cs-case__over .sv-case__kicker::after { content: attr(data-folio); color: rgb(246 241 232 / 0.6); }
.cs-case__over .sv-case__name { font: 500 var(--fs-h1) / 1.15 var(--font-display); letter-spacing: -0.01em; color: #fbf7ef; }
.cs-case__over .sv-case__win { font: 400 var(--fs-lead) / 1.55 var(--font-body); color: rgb(246 241 232 / 0.86); max-width: 44ch; }
.cs-spreads .sv-case__body { position: relative; z-index: 4; width: min(980px, calc(100% - 2 * var(--gutter))); margin: calc(-1 * clamp(120px, 12vw, 220px)) var(--gutter) 0 auto;
  padding: var(--s-7) var(--s-7) var(--s-6); background: var(--paper); border-radius: 2px; box-shadow: var(--shadow-paper); outline: 1px solid var(--line); display: grid; gap: var(--s-5); }
.cs-spreads .sv-case__body::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--gold-soft); pointer-events: none; }
.cs-spreads .sv-case:nth-child(even) .sv-case__body { margin: calc(-1 * clamp(120px, 12vw, 220px)) auto 0 var(--gutter); }
.cs-spreads .sv-case__story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.cs-spreads .sv-case__story div { grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; }
.cs-spreads .sv-case__story dd { font: 400 var(--fs-body) / 1.7 var(--font-body); }

/* Making of */
.cs-making { padding-top: 0; }
.cs-making__banner { position: relative; margin: 0 0 var(--s-9); height: min(56vw, 78svh); min-height: 320px; overflow: hidden; background: var(--bg-raised); }
.cs-making__banner .sv-media { position: absolute; inset: 0; aspect-ratio: auto !important; }
.cs-making__films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-bottom: var(--s-9); }
.cs-film { display: grid; gap: var(--s-3); align-content: start; }
.cs-film__t { font: 500 var(--fs-h3) / 1.3 var(--font-display); }
.cs-film__n { font-size: var(--fs-small); color: var(--muted); font-family: var(--font-body); }
.cs-making .sv-prompt { background: var(--paper); padding: var(--s-5); border: 1px solid var(--line); border-radius: 2px; }
.cs-making .sv-prompt dt { color: var(--red); }

/* Contact sheet */

/* Letters */
.cs-letters .sv-note { background: var(--paper); border-radius: 2px; }
.cs-letters .sv-note__q { font-family: var(--font-body); font-size: var(--fs-h3); }

/* Harper's-style index */
.cs-harpers { columns: 2 420px; column-gap: var(--s-9); counter-reset: idx; }
.cs-harpers li { break-inside: avoid; padding: var(--s-4) 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.cs-harpers p { font: 400 var(--fs-lead) / 1.55 var(--font-body); }
.cs-harpers p::before { counter-increment: idx; content: counter(idx, decimal-leading-zero) '  '; font: 500 var(--fs-meta) var(--font-ui); color: var(--red); letter-spacing: 0.06em; }
.cs-harpers b { font: 500 var(--fs-h3) / 1 var(--font-display); white-space: nowrap; }
.cs-harpers .sv-cite { justify-self: start; }

/* Psychology column */
/* The column's cards: a widescreen still life per hook, numbered in small caps, the name and principle over a deep
   gradient; on hover the picture pushes in slowly and a gold hairline draws inside the edge. */
.cs-column .sv-hooks { counter-reset: hk; }
.cs-column .sv-hook { counter-increment: hk; }
.cs-column .sv-hook__front { background: #0f0d0b; border: 0; color: #fbf7ef; box-shadow: var(--shadow-paper); overflow: hidden; gap: 6px;
  outline: 1px solid transparent; outline-offset: -9px; transition: transform 0.9s var(--ease-out), visibility 0s linear 0.12s, outline-color 0.7s var(--ease-lux); }
.cs-column .sv-hook__front img { object-position: 50% 50%; transition: transform 1.8s var(--ease-lux); }
.cs-column .sv-hook__card:hover .sv-hook__front img, .cs-column .sv-hook__card:focus-visible .sv-hook__front img { transform: scale(1.06); }
.cs-column .sv-hook__card:hover .sv-hook__front, .cs-column .sv-hook__card:focus-visible .sv-hook__front { outline-color: rgb(227 196 138 / 0.75); }
.cs-column .sv-hook__front::after { background: linear-gradient(0deg, rgb(8 7 6 / 0.86) 0%, rgb(8 7 6 / 0.42) 46%, rgb(8 7 6 / 0) 72%); }
.cs-column .sv-hook__front::before { content: counter(hk, decimal-leading-zero); position: absolute; z-index: 2; top: var(--s-4); left: var(--s-5);
  font: 600 var(--fs-meta) / 1 var(--font-ui); letter-spacing: 0.22em; color: #e3c48a; text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); }
.cs-column .sv-hook__front .sv-hook__name { color: #fbf7ef; }
.cs-column .sv-hook__front .sv-hook__principle { position: relative; z-index: 1; font-family: var(--font-body); color: rgb(251 247 239 / 0.82); }
.cs-column .sv-hook__front .sv-hook__turn { color: rgb(251 247 239 / 0.62); }
.cs-column .sv-hook__back { background: var(--mat); color: var(--fg); border: 1px solid var(--gold-soft); box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--gold-soft); }
.cs-column .sv-hook__card { --hook-ratio: 16 / 10; }

/* Masthead */
.cs-masthead__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-6) var(--s-9); }
.cs-masthead__grid > .cs-sechead { grid-column: 1 / -1; }
.cs-masthead .sv-job__co { font-family: var(--font-display); }
.cs-masthead .sv-job__pts { font-family: var(--font-body); }
.cs-masthead .sv-tools { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.cs-marquee { margin-top: var(--s-9); overflow: hidden; border-block: 1px solid var(--line); padding: var(--s-4) 0; white-space: nowrap; }
.cs-marquee__track { display: inline-flex; gap: var(--s-7); font: 400 var(--fs-h2) / 1 var(--font-display); color: var(--muted); will-change: transform; }
.cs-marquee__track span::after { content: '✦'; margin-left: var(--s-7); font-style: normal; font-size: 12px; color: var(--red); vertical-align: middle; }

/* ── Cold open: the plate goes to press ───────────────────────────────────────────────────────────────── */
.cs-open { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; overflow: hidden; pointer-events: none; background: var(--paper);
  background-image: radial-gradient(circle at 50% 45%, #fffdf8 0%, var(--paper) 55%, #ece4d6 100%);
  /* If the script never runs, the plate lifts anyway. */
  animation: cs-open-out 0s 3.4s forwards; }
@keyframes cs-open-out { to { visibility: hidden; } }
.cs-open.is-done { display: none; }
html[data-perf='lite'] .cs-open { display: none; }
.cs-open__plate { position: relative; display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-8) var(--s-9); text-align: center; }
.cs-open__reg { position: absolute; width: 22px; height: 22px; border: 1px solid var(--fg); border-radius: 50%; }
.cs-open__reg::before, .cs-open__reg::after { content: ''; position: absolute; background: var(--fg); }
.cs-open__reg::before { left: 50%; top: -8px; bottom: -8px; width: 1px; }
.cs-open__reg::after { top: 50%; left: -8px; right: -8px; height: 1px; }
.cs-open__reg--tl { left: 0; top: 0; } .cs-open__reg--tr { right: 0; top: 0; } .cs-open__reg--bl { left: 0; bottom: 0; } .cs-open__reg--br { right: 0; bottom: 0; }
.cs-open__issue { font: 600 var(--fs-meta) / 1 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); }
.cs-open__mast { position: relative; display: grid; font: 600 var(--fs-h1) / 1 var(--font-mast); letter-spacing: 0.62em; padding: 6px 0 6px 0.62em; overflow: hidden; }
.cs-open__ink { grid-area: 1 / 1; display: flex; justify-content: center; mix-blend-mode: multiply; }
.cs-open__ink span { display: inline-block; }
.cs-open__ink[data-ink='c'] { color: #18a7c9; } .cs-open__ink[data-ink='m'] { color: #d4317f; } .cs-open__ink[data-ink='y'] { color: #f1c40f; }
.cs-open__ink[data-ink='k'] { color: var(--fg); text-shadow: 0 1px 0 rgb(255 255 255 / 0.9), 0 -1px 0 rgb(20 18 16 / 0.12); }
.cs-open__line { font: 400 var(--fs-lead) / 1.4 var(--font-body); color: var(--muted); }
.cs-open__inks { display: flex; gap: 6px; }
.cs-open__inks i { width: 34px; height: 6px; border-radius: 1px; }
.cs-open__inks i:nth-child(1) { background: #18a7c9; } .cs-open__inks i:nth-child(2) { background: #d4317f; }
.cs-open__inks i:nth-child(3) { background: #f1c40f; } .cs-open__inks i:nth-child(4) { background: var(--fg); }
.cs-open__roller { position: absolute; top: 0; bottom: 0; left: 0; width: 26%; background: linear-gradient(90deg, rgb(253 252 249 / 0), rgb(255 255 255 / 0.9) 45%, rgb(20 18 16 / 0.05) 55%, rgb(253 252 249 / 0)); transform: translateX(-110%); }
.cs-open__skip { position: absolute; right: var(--gutter); bottom: var(--s-6); min-height: var(--tap); padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong);
  font: 600 var(--fs-meta) / 1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); pointer-events: auto; background: rgb(251 248 242 / 0.7); }
.cs-open__skip:hover { border-color: var(--red); color: var(--red); }

/* Nav marks the section on screen */
.cs-bar__nav a.is-on { color: var(--fg); box-shadow: inset 0 -1px 0 var(--red); }

/* Ink bleed: a feathered blot spreading from one corner, driven by --ink (motion only; lite shows the picture). */
.cs-ink { -webkit-mask-image: radial-gradient(circle at var(--ix, 15%) var(--iy, 20%), #000 calc(var(--ink, 160%) - 22%), transparent var(--ink, 160%));
  mask-image: radial-gradient(circle at var(--ix, 15%) var(--iy, 20%), #000 calc(var(--ink, 160%) - 22%), transparent var(--ink, 160%)); }
html[data-perf='lite'] .cs-ink { -webkit-mask-image: none; mask-image: none; }

/* Lines that rise out of masks (SplitText). */
.cs-line { padding-bottom: 0.06em; }

/* ── The profile: in her studio ──────────────────────────────────────────────────────────────────────── */
.cs-studio__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--s-6) var(--s-9); align-items: center; }
.cs-studio__grid > .cs-sechead { grid-column: 1 / -1; margin-bottom: var(--s-4); }
.cs-salon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 52px; gap: var(--s-4); perspective: 1400px; padding-top: 40px; }
.cs-frame { position: relative; margin: 0; padding: 10px; background: linear-gradient(145deg, #c99a55, #7a5426 45%, #d6aa66); border-radius: 3px; transform-origin: 50% -34px;
  box-shadow: 0 2px 2px rgb(20 18 16 / 0.08), 0 30px 50px -26px rgb(20 18 16 / 0.4), inset 0 0 0 2px rgb(255 255 255 / 0.3); will-change: auto; }
.cs-frame::selection { background: none; }
.cs-frame::before { content: ''; position: absolute; left: 50%; top: -38px; width: 1px; height: 38px; background: linear-gradient(180deg, rgb(22 19 15 / 0), rgb(22 19 15 / 0.45)); }
.cs-frame::after { content: ''; position: absolute; left: calc(50% - 3px); top: -42px; width: 7px; height: 7px; border-radius: 50%; background: #8c6a3a; }
.cs-frame .sv-media { height: 100%; aspect-ratio: auto !important; border-radius: 1px; outline: 8px solid var(--mat); outline-offset: -8px; }
.cs-frame__sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: var(--sheen-o, 0); mix-blend-mode: soft-light;
  background: linear-gradient(var(--sheen-a, 115deg), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0.7) 48%, rgb(255 255 255 / 0) 64%); transition: opacity 0.6s var(--ease-lux); }
.cs-frame .sv-media img { --pos: 50% 35%; }
.cs-frame:nth-child(1) { grid-column: 1 / span 5; grid-row: 1 / span 8; }
.cs-frame:nth-child(2) { grid-column: 6 / span 4; grid-row: 2 / span 6; }
.cs-frame:nth-child(3) { grid-column: 10 / span 3; grid-row: 1 / span 5; }
.cs-frame:nth-child(4) { grid-column: 10 / span 3; grid-row: 6 / span 5; }
.cs-salon__note { grid-column: 6 / span 4; grid-row: 8 / span 2; font-size: var(--fs-small); color: var(--muted); align-self: center; font-family: var(--font-body); }
.cs-studio__text .sv-origin p { font-family: var(--font-body); font-size: var(--fs-lead); }
.cs-studio__text .sv-origin p:first-child::first-letter { float: left; font: 500 3.4em/0.8 var(--font-display); margin: 6px 10px 0 0; color: var(--red); }

/* ── The making of: the catalogue ────────────────────────────────────────────────────────────────────── */
.cs-cat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); margin-bottom: var(--s-9); }
/* The rail: every picture with a brief, side by side; arrows or a click choose one. */
.cs-cat__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin; padding: 4px 2px 10px; }
.cs-cat__item { scroll-snap-align: start; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 76px; padding: 6px; border-radius: 3px;
  text-align: left; border: 1px solid var(--line); background: var(--paper); transition: background 0.4s, border-color 0.4s, box-shadow 0.4s; }
.cs-cat__item:hover { border-color: var(--line-strong); }
.cs-cat__item[aria-selected='true'] { background: var(--mat); border-color: var(--gold); box-shadow: var(--shadow-paper); }
.cs-cat__thumb { width: 64px; height: 64px; overflow: hidden; border-radius: 2px; background: #ddd; }
.cs-cat__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cs-cat__item span:last-child { display: grid; gap: 2px; font: 500 var(--fs-small) / 1.3 var(--font-body); }
.cs-cat__item small { font: 500 var(--fs-meta) / 1.2 var(--font-mono); color: var(--muted); }
/* The banner: widescreen, the picture whole at the centre over a blurred, darkened bed of itself. */
.cs-cat__banner { position: relative; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 2px; background: #0b0a09; box-shadow: 0 50px 100px -50px rgb(22 19 15 / 0.6); display: grid; place-items: center; }
.cs-cat__bed { position: absolute; inset: -40px; }
.cs-cat__bed picture, .cs-cat__bed img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(36px) saturate(1.15) brightness(0.55); transform: scale(1.1); }
.cs-cat__banner > .sv-media { position: relative; z-index: 1; height: 88%; width: auto; max-width: 92%; border-radius: 2px; box-shadow: 0 30px 70px -20px rgb(0 0 0 / 0.7); }
.cs-cat__out > p { margin-top: var(--s-3); font: 500 var(--fs-meta) / 1.5 var(--font-ui); color: var(--muted); text-align: center; }
html[data-perf='lite'] .cs-cat__bed img { filter: brightness(0.5); }
/* The brief below it, in columns: each label stays with its text. */
.cs-cat__card { position: relative; padding: var(--s-7) var(--s-7) var(--s-6); background: var(--mat); outline: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow-paper); }
.cs-cat__card::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--gold-soft); pointer-events: none; }
.cs-cat__card h3 { margin: var(--s-2) 0 var(--s-5); font: 500 var(--fs-h3) / 1.3 var(--font-display); }
.cs-cat__card .sv-prompt dl { display: block; columns: 3 300px; column-gap: var(--s-7); }
.cs-pair { break-inside: avoid; display: grid; gap: 4px; margin-bottom: var(--s-4); }
.cs-pair dd { margin: 0; }
.cs-cat__how { margin-top: var(--s-4); font-size: var(--fs-meta); color: var(--muted); }
.cs-making__films-h { margin-bottom: var(--s-5); }

.cs-rec { width: 8px; height: 8px; border-radius: 50%; background: #d7263d; box-shadow: 0 0 0 4px rgb(215 38 61 / 0.15); animation: cs-rec 1.2s steps(2, jump-none) infinite; }
@keyframes cs-rec { 50% { opacity: 0.2; } }
html[data-perf='lite'] .cs-rec { animation: none; }

/* A white film strip: hairline sprocket holes punched in paper, gold rules either side. */

/* ── Back cover (black): the name banner, the introductions card, the brass card ───────────────────────── */
.cs-back { position: relative; padding-bottom: var(--s-9); }
/* The banner is the whole poster (3360 × 1440): its own aspect ratio, so the name is never cropped on any width. */
.cs-back__media { margin: 0; aspect-ratio: 3360 / 1440; position: relative; overflow: hidden; }
.cs-back__media .sv-media { position: absolute; inset: 0; aspect-ratio: auto !important; --pos: 50% 30%; }
.cs-back__media::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, #0b0a09 2%, rgb(11 10 9 / 0) 48%); }
.cs-back__media .sv-label { z-index: 3; top: 76px; bottom: auto; }
.cs-back__grid { position: relative; z-index: 3; margin-top: calc(-1 * min(13vw, 230px)); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-6); align-items: end; }
.cs-back__card { position: relative; padding: var(--s-8) var(--s-7) var(--s-7); border-radius: 4px; display: grid; gap: var(--s-5); outline: 1px solid var(--line);
  background: rgb(14 13 12 / 0.74); backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15); box-shadow: 0 60px 120px -50px rgb(0 0 0 / 0.8); }
html[data-perf='lite'] .cs-back__card { background: #12110f; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cs-back__card::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgb(227 196 138 / 0.28); pointer-events: none; border-radius: 2px; }
.cs-back__brass { margin: 0; perspective: 1200px; }
.cs-back__brass .sv-media { border-radius: 4px; box-shadow: 0 50px 100px -40px rgb(0 0 0 / 0.85); }

/* ── Black cinema: every .cs-dark section repaints the tokens, so the shared blocks follow ─────────────── */
.cs-dark {
  --bg: #0b0a09; --bg-raised: #0f0e0d; --paper: #141210; --mat: #151311;
  --fg: #f3ede3; --muted: #a59c8e; --line: rgb(243 237 227 / 0.12); --line-strong: rgb(243 237 227 / 0.3);
  --gold: #d9b878; --gold-soft: rgb(217 184 120 / 0.34);
  --accent: #e3c48a; --on-accent: #120d06; --accent-hover: #f2d9a8; --accent-text: #e3c48a; --red: #e3c48a; --focus: #f2d9a8;
  --hook-front: #15120f; --hook-back: #e3c48a; --hook-back-fg: #120d06;
  --shadow-paper: 0 50px 100px -50px rgb(0 0 0 / 0.85);
  position: relative; color: var(--fg);
  /* Projector dimming: script drives --dim from 0 (paper) to 1 (black) as the section arrives; without it, black. */
  background: color-mix(in oklab, #0b0a09 calc(var(--dim, 1) * 100%), var(--page, #f8f6f1));
}
.cs-dark .cs-sechead::before { background: var(--gold-grad); }
.cs-dark .cs-body, .cs-dark .cs-h3 { color: var(--muted); }
.cs-dark .sv-btn { color: var(--fg); border-color: var(--line-strong); }
.cs-dark .sv-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cs-dark .cs-h2 em { color: var(--muted); }
.cs-dark .cs-rec, .cs-premiere .cs-rec { background: #e5484d; box-shadow: 0 0 0 4px rgb(229 72 77 / 0.18); }

/* ── The premiere: the title sequence, full screen (Director's Cut opening) ──────────────────────────────── */
.cs-premiere { height: max(100svh, 680px); overflow: hidden; background: #000; }
/* The big screen: the six shots stacked full bleed, one on at a time. The shot cut in is wiped on from the right
   (clip-path, a gold light running along its edge), dissolves up and settles from a slow push; the one it replaces
   stays underneath until it is covered. */
.cs-premiere__stage { position: absolute; inset: 0; z-index: 1; }
.cs-premiere__grid { position: absolute; inset: 0; margin: 0; padding: 0; }
.cs-pshot { position: absolute; inset: 0; visibility: hidden; opacity: 0; clip-path: inset(0 0 0 100%); transform: scale(1.07);
  transition: clip-path 1.5s cubic-bezier(0.77, 0, 0.18, 1), opacity 1.1s ease, transform 7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 1.6s; }
.cs-pshot.is-on { z-index: 2; visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1);
  transition: clip-path 1.5s cubic-bezier(0.77, 0, 0.18, 1), opacity 1.1s ease, transform 7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
.cs-pshot.is-out { z-index: 1; visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1.02); transition: none; }
.cs-pshot .sv-media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 0; }
.cs-pshot .sv-play { display: none !important; }
.cs-pshot__edge { position: absolute; top: 0; bottom: 0; left: 100%; z-index: 3; width: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, #f2d9a8 22%, #fff4dc 50%, #f2d9a8 78%, transparent); box-shadow: 0 0 28px 6px rgb(242 217 168 / 0.45); }
.cs-pshot.is-on .cs-pshot__edge { animation: cs-edge 1.5s cubic-bezier(0.77, 0, 0.18, 1); }
@keyframes cs-edge { 0% { left: 100%; opacity: 0.95; } 80% { opacity: 0.9; } 100% { left: 0%; opacity: 0; } }
/* Slate and ticks: what is on screen, and a way to choose a shot. Each tick fills while its shot plays. */
.cs-pnav { position: absolute; z-index: 7; right: var(--gutter); bottom: max(var(--s-8), 11vh); display: grid; gap: 14px; justify-items: end; }
.cs-pslate { font: 500 var(--fs-meta) / 1.3 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(243 237 227 / 0.78); }
.cs-pticks { display: flex; gap: 6px; }
.cs-ptick { display: grid; align-items: center; width: 52px; height: 28px; padding: 0; cursor: pointer; }
.cs-ptick i { position: relative; display: block; height: 2px; background: rgb(243 237 227 / 0.26); overflow: hidden; }
.cs-ptick i::after { content: ''; position: absolute; inset: 0; background: #e3c48a; transform: scaleX(0); transform-origin: left; }
.cs-ptick:hover i { background: rgb(243 237 227 / 0.5); }
.cs-ptick[aria-pressed='true'] i::after { animation: cs-fill 6s linear forwards; }
.cs-premiere.is-held .cs-ptick[aria-pressed='true'] i::after { animation-play-state: paused; }
html[data-perf='lite'] .cs-ptick[aria-pressed='true'] i::after { animation: none; transform: scaleX(1); }
@keyframes cs-fill { to { transform: scaleX(1); } }
@media (pointer: coarse) { .cs-ptick { height: var(--tap); width: 48px; } }
.cs-premiere::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.88) 0%, rgb(0 0 0 / 0.5) 34%, rgb(0 0 0 / 0) 60%), linear-gradient(0deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.2) 42%, rgb(0 0 0 / 0) 60%); }
.cs-bars { position: absolute; left: 0; right: 0; z-index: 6; height: 50%; background: #000; transform: scaleY(0.11); transform-origin: top; pointer-events: none; }
.cs-bars--top { top: 0; }
.cs-bars--bottom { bottom: 0; transform-origin: bottom; }
.cs-tc { position: absolute; z-index: 7; right: var(--gutter); top: 96px; display: flex; gap: 10px; align-items: center; font: 500 var(--fs-meta) / 1 var(--font-mono); letter-spacing: 0.12em; color: rgb(243 237 227 / 0.8); }
.cs-premiere__copy { position: absolute; z-index: 7; left: var(--gutter); bottom: max(var(--s-8), 11vh); width: min(580px, calc(100% - 2 * var(--gutter))); display: grid; gap: var(--s-4); }
.cs-premiere__h { font: 600 var(--fs-h1) / 1.15 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg); }
.cs-premiere__h span { color: var(--accent); }
.cs-premiere__dek { font: 400 var(--fs-lead) / 1.65 var(--font-body); color: rgb(243 237 227 / 0.86); max-width: 50ch; }
.cs-billing { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 500 var(--fs-meta) / 1.4 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(243 237 227 / 0.72); }
.cs-billing b { color: var(--accent); font-weight: 700; margin-right: 6px; }
.cs-premiere__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-premiere__avail { font: 500 var(--fs-meta) / 1.5 var(--font-ui); letter-spacing: 0.04em; color: rgb(243 237 227 / 0.6); }

/* ── The poster wall (black) ──────────────────────────────────────────────────────────────────────────── */
.cs-wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); align-items: start; }
.cs-poster { position: relative; margin: 0; display: grid; gap: 12px; grid-column: span 2; perspective: 1400px; }
.cs-poster .sv-media { border-radius: 2px; box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.06); }
/* A poster's honesty label rides in its caption: inside the frame it covered the headline or the fact line. */
.cs-poster__label { display: block; color: var(--accent); }
.cs-poster figcaption { font: 500 var(--fs-meta) / 1.4 var(--font-ui); letter-spacing: 0.06em; color: var(--muted); }
.cs-poster--tall { grid-column: span 4; grid-row: span 2; }
.cs-poster__sheen { position: absolute; inset: 0 0 26px; z-index: 4; pointer-events: none; opacity: var(--sheen-o, 0); mix-blend-mode: soft-light;
  background: linear-gradient(var(--sheen-a, 115deg), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0.6) 48%, rgb(255 255 255 / 0) 64%); transition: opacity 0.6s var(--ease-lux); }

/* ── Wide banners between sections ────────────────────────────────────────────────────────────────────── */
.cs-banner { position: relative; margin: 0; height: min(42vw, 72svh); min-height: 260px; overflow: hidden; background: #0b0a09; }
.cs-banner .sv-media { position: absolute; inset: 0; aspect-ratio: auto !important; }

/* The blast is bright: a deep wash on the left, where the heading sits, keeps the type legible over it. */

/* ── Widescreen: spend the room on media and columns, never on type ───────────────────────────────────── */
@media (min-width: 2200px) {
  .cs-premiere__copy { width: 640px; }
}

.cs-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-7) var(--s-9); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.cs-foot__note { max-width: 70ch; }

/* Hero on tablets and phones: nameplate, the studio as a framed picture, the copy below it on paper, then the issue. */
@media (max-width: 900px) {
  .cs-hero__scene { height: auto; grid-template-rows: auto auto auto auto; gap: var(--s-5); padding-bottom: var(--s-6); }
  .cs-hero__media, .cs-hero__light, .cs-hero__motes { position: relative; left: auto; right: auto; top: auto; bottom: auto; grid-row: 2; grid-column: 1; aspect-ratio: 4 / 5; }
  .cs-hero__media { --pos: 66% 30%; }
  .cs-hero__media .sv-media { --pos: 66% 30%; }
  .cs-hero__veil { display: none; }
  .cs-hero__copy { grid-row: 3; padding: 0; max-width: none; }
  .cs-hero__foot { grid-row: 4; }
  .cs-hero__foot > :first-child, .cs-hero__foot > :last-child { display: none; }
  .cs-hero__object { grid-template-columns: minmax(0, 1fr); padding-top: var(--s-6); gap: var(--s-7); }
  .cs-hero__issue { order: 0; justify-self: stretch; max-width: none; }
  .cs-mag { width: min(66vw, 360px); }
}
@media (min-width: 601px) and (max-width: 900px) { .cs-hero__media, .cs-hero__light, .cs-hero__motes { aspect-ratio: 16 / 10; } }
@media (max-width: 760px) {
  .cs-mag__issue--b1 { transform: translate3d(-5%, 2%, -60px) rotateZ(-4deg); }
  .cs-mag__issue--b2 { transform: translate3d(-9%, 4%, -120px) rotateZ(-7deg); }
  .cs-hero__tick span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
}

/* ── Tablet and phone ─────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cs-bar__issue { display: none; }
  .cs-contents__grid { grid-template-columns: 1fr 1fr; }
  .cs-contents__portrait { display: none; }
  .cs-masthead__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .cs-contents__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .cs-contents__lead { position: static; }
  .cs-spreads .sv-case__story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cs-case__over { width: min(520px, 70vw); }
  .cs-making__films { grid-template-columns: minmax(0, 1fr); }
  .cs-studio__grid, .cs-back__grid { grid-template-columns: minmax(0, 1fr); }
  .cs-back__grid { margin-top: -24px; }
  .cs-cat__banner { aspect-ratio: 16 / 10; }
  .cs-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-poster, .cs-poster--tall { grid-column: auto; grid-row: auto; }
  /* The one-sheet leads at full width, so the posters below fill whole rows of two. */
  .cs-poster--tall { grid-column: 1 / -1; }
  .cs-poster--tall .sv-media { width: min(100%, 420px); }
}
@media (max-width: 760px) {
  .cs-coverlines i { display: none; }
  .cs-coverlines a { flex-wrap: nowrap; }
  .cs-coverlines small { white-space: nowrap; margin-left: auto; }
  .cs-bar { grid-template-columns: 1fr auto auto; gap: var(--s-3); }
  .cs-bar__nav { display: none; }
  .cs-section { padding: var(--s-9) 0; }
  .cs-sechead { margin-bottom: var(--s-6); }
  .cs-harpers { columns: 1; }
  .cs-salon { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--s-7) var(--s-3); }
  .cs-frame { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 3 / 4; }
  .cs-salon__note { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .cs-cat__list { grid-auto-columns: 76%; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .cs-cat__list::-webkit-scrollbar { display: none; }
  .cs-cat__banner { aspect-ratio: 4 / 5; }
  .cs-cat__banner > .sv-media { height: auto; width: 88%; max-height: 90%; }
  .cs-cat__card { padding: var(--s-6) var(--s-5) var(--s-5); }
  /* Case banners on a phone: the film as a 4:5 frame with the title over it, the case file below on paper. */
  .cs-spreads .sv-case + .sv-case { margin-top: var(--s-9); }
  .cs-spreads .sv-case__media { height: auto; aspect-ratio: 4 / 5; }
  .cs-spreads .sv-case__media::after, .cs-spreads .sv-case:nth-child(even) .sv-case__media::after { background: linear-gradient(0deg, rgb(6 5 4 / 0.88) 0%, rgb(6 5 4 / 0.5) 42%, rgb(6 5 4 / 0) 70%); }
  .cs-case__over, .cs-spreads .sv-case:nth-child(even) .cs-case__over { top: auto; bottom: var(--s-8); left: var(--gutter); right: var(--gutter); width: auto; text-align: left; justify-items: start; }
  .cs-case__over .sv-case__name { font-size: var(--fs-h2); }
  .cs-spreads .sv-case__body, .cs-spreads .sv-case:nth-child(even) .sv-case__body { width: auto; margin: -36px var(--gutter) 0; padding: var(--s-6) var(--s-5) var(--s-5); }
  .cs-spreads .sv-case__story { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .cs-spreads .sv-case__media > .sv-media .sv-label { top: 14px; right: 14px; }
  .cs-back__card { padding: var(--s-5); }
  /* Phone: the whole name, never cropped letters — the banner keeps its own shape. */
  .cs-back__media { margin-top: 64px; }
  .cs-back__media .sv-label { top: auto; bottom: 12px; }
  .cs-open__plate { padding: var(--s-6) var(--s-6); }
  /* The big screen on a phone: a 4:5 screen under the bar, slate and ticks on it, the copy below. */
  .cs-premiere { height: auto; padding: 64px 0 0; }
  .cs-premiere::after { display: none; }
  .cs-premiere__stage { position: relative; inset: auto; aspect-ratio: 4 / 5; overflow: hidden; }
  .cs-premiere__stage::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(0deg, rgb(0 0 0 / 0.8) 0%, rgb(0 0 0 / 0) 40%); }
  .cs-pnav { left: var(--gutter); right: var(--gutter); bottom: var(--s-5); justify-items: start; }
  .cs-pslate { letter-spacing: 0.08em; }
  .cs-pticks { width: 100%; }
  .cs-pticks li { flex: 1; }
  .cs-ptick { width: 100%; }
  .cs-bars { display: none; }
  .cs-tc { top: 72px; }
  .cs-premiere__copy { position: relative; left: auto; bottom: auto; width: auto; margin: var(--s-6) var(--gutter) var(--s-8); }
  .cs-premiere__h { font-size: var(--fs-h2); }

  .cs-banner { height: 56vw; min-height: 200px; }
}

/* ── The story: seven years, one question, set as a magazine timeline on paper ────────────────────────── */
.cs-story .sv-story { gap: var(--s-7); }
.cs-story .sv-story__q { font-family: var(--font-display); font-style: italic; color: color-mix(in oklab, var(--fg) 82%, transparent); }
.cs-story .sv-chapter { border-top-color: var(--gold-soft); }
.cs-story .sv-chapter__media .sv-media { border-radius: 2px; box-shadow: 0 30px 60px -36px rgb(40 28 12 / 0.45); }
.cs-story .sv-chapter__year { color: var(--red); }
.cs-story .sv-chapter__title { font-family: var(--font-display); }
.cs-story .sv-chapter__line { font-family: var(--font-body); font-style: italic; }
.cs-story .sv-chapter__proof { font-family: var(--font-body); }