/* ============================================================================
   Crystal Crown Media: title pages (slate/*.html)
   ----------------------------------------------------------------------------
   One film one-sheet per title, on the shared skeleton:
     1 Immersion   hero scrub, the title set like a one-sheet
     2 Clarity     the label schema, plain
     3 Texture     four stills on an asymmetric grid, each with its own wipe
     4 Proof       the screen grows: trailer facade, or a screener card
     5 Intent      shortlist, Request a meeting, the next title

   Each page sets its own scene tokens in a small inline <style> (canvas,
   surface, ink, silver and the scene's own accent values). Everything that is
   the same on all five lives here; per-scene textures are the last section.
   The engine's transforms are never given a `transition` here.
   ========================================================================== */

:root {
  /* the trailer frame starts at k0 x its grown width. title.js refines this at
     desktop widths, where the grown width stops at 1280px. */
  --tf-k0: 0.6;
  /* the act-progress window over which the frame grows: 0 to 0.6 of a pinned
     act on desktop; phones run the act as flow and use their own window */
  --tf-from: 0;
  --tf-span: 0.6;
}

/* ------------------------------------------------------- light grounds --
   Two of the five pages are light. Everything the shared layer derives from the
   ink at :root (hairlines, edge light, shadows) was resolved there, against a
   near-black page, so redefining --sc-ink on the body does not re-derive it.
   Restate each derived token here, keyed to the page's own ink. */
body[data-ground="light"] {
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 17%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 32%, transparent);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.28);
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.14), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.10);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.12), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.18);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.10), 0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.24),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.20);
}
body[data-ground="light"] .sc-grain { opacity: 0.018; }
/* shared controls whose resting states were tuned for a dark ground */
body[data-ground="light"] .shortlist-toggle { border-color: color-mix(in oklab, var(--silver) 78%, transparent); }
body[data-ground="light"] .shortlist-toggle[aria-pressed="true"] {
  background: var(--purple); color: #fff; border-color: var(--purple);
}
body[data-ground="light"] .btn { --btn-edge: color-mix(in oklab, #fff 42%, var(--purple)); }
body[data-ground="light"] .drawer__list [aria-current="page"] { color: var(--purple); }
body[data-ground="light"] .facade__play {
  background: var(--purple); color: #fff; border-color: color-mix(in oklab, #fff 55%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  body[data-ground="light"] .facade:hover .facade__play { background: var(--purple-lift); }
}

/* the bar over a hero: the shared bar fades 78% to nothing across its own
   height, which leaves the nav floating on raw footage. Hold it denser at the
   top until the page has scrolled and the shared solid bar takes over. */
body[data-page^="t-"] .site-bar:not(.is-scrolled) {
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 58%,
    transparent 100%);
}

/* ------------------------------------------------------------ 1. hero -- */
/* The lead scrim, cut to this copy block. The engine's corner gradient is a
   diagonal, which reaches the block's far corner at about a third of its
   density; the title is the longest line on the page, so the density is built
   from a bottom band and a left column and then feathered away from the corner.
   On a light ground the same shape washes toward the (light) canvas, and the
   type stays ink. */
.t-hero .sc-scrim--lead {
  background:
    linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 82%, transparent) 34%,
      color-mix(in oklab, var(--sc-canvas) 40%, transparent) 54%,
      transparent 70%),
    linear-gradient(to right,
      color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 36%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 58%,
      transparent 76%);
  -webkit-mask-image: radial-gradient(130% 120% at 0% 100%, #000 52%, transparent 100%);
          mask-image: radial-gradient(130% 120% at 0% 100%, #000 52%, transparent 100%);
}
.t-hero .sc-copy { display: grid; gap: var(--sc-4); justify-items: start; max-width: min(54rem, 80vw); color: var(--t-hero-ink, var(--sc-ink)); }
.t-hero .sc-copy > * { margin: 0; }
.t-hero__eyebrow { color: inherit; }
.t-hero h1 {
  font-size: clamp(2.05rem, 1.15rem + 3.7vw, 4rem);
  line-height: 1.07; letter-spacing: 0.03em;
  text-wrap: balance; text-shadow: none;
}
.t-hero__format { color: inherit; text-wrap: balance; }
.t-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-4); margin-top: var(--sc-2) !important; }

/* Light grounds. A wash toward a light canvas fogs the whole frame, so the two
   light heroes do the opposite: the footage keeps its full contrast, and the
   copy is set in light ink on a dark lead corner (a bottom-left block, about
   half the frame's width and height, feathered on both axes). The light ground
   starts after the hero. The tokens come from each page's own style block. */
body[data-ground="light"] .t-hero .sc-scrim--lead {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--t-scrim) 93%, transparent) 0%,
    color-mix(in oklab, var(--t-scrim) 91%, transparent) 33%,
    color-mix(in oklab, var(--t-scrim) 52%, transparent) 42%,
    transparent 51%);
  -webkit-mask-image: linear-gradient(to right, #000 0 47%, rgb(0 0 0 / 0.5) 56%, transparent 66%);
          mask-image: linear-gradient(to right, #000 0 47%, rgb(0 0 0 / 0.5) 56%, transparent 66%);
}
/* the copy block sits wholly inside the scrim's dense core (its box is what a
   contrast check samples, not only its glyphs) */
body[data-ground="light"] .t-hero .sc-copy { max-width: min(37rem, 41vw); }
body[data-ground="light"] .t-hero .sc-copy--lead { bottom: clamp(2rem, 6vh, 4rem); }
body[data-ground="light"] .t-hero h1 { font-size: clamp(1.95rem, 1rem + 3vw, 3.3rem); }
body[data-ground="light"] .t-hero .shortlist-toggle {
  color: var(--t-hero-ink); border-color: color-mix(in oklab, var(--t-hero-ink) 72%, transparent);
}
body[data-ground="light"] .t-hero .shortlist-toggle .gem { color: var(--t-hero-ink); }
body[data-ground="light"] .t-hero .shortlist-toggle[aria-pressed="true"] {
  background: var(--purple); color: #fff; border-color: color-mix(in oklab, #fff 55%, var(--purple));
}

/* ---------------------------------------------------------- 2. clarity -- */
.t-clarity {
  position: relative; isolation: isolate;
  min-height: 62vh; min-height: 62svh;
  padding-block: clamp(3rem, 7vw, 6.5rem) calc(var(--sc-section) * 1.2);
}
.t-clarity__grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(2.5rem, 7vw, 8rem);
}
.t-clarity .sc-lede {
  font-size: var(--sc-t-xl); line-height: 1.34; letter-spacing: 0; font-weight: 500;
  max-width: 24ch; text-wrap: balance;
}
.t-clarity .sc-lede--long { font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.42; max-width: 32ch; }
.nb { white-space: nowrap; }
.t-clarity__onreq { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); max-width: 22ch; }
.t-clarity .sheet { max-width: 40rem; }
.t-clarity .sheet > dd { font-size: var(--sc-t-base); }
.t-clarity .sheet > dt { width: 7.6rem; }

/* ----------------------------------------------------------- 3. texture -- */
.t-texture { position: relative; isolation: isolate; padding-block: 0 calc(var(--sc-section) * 1.9); }
.t-texture .sc-wrap { max-width: min(100%, 100rem); padding-inline: max(1rem, calc(var(--sc-gutter) * 0.6)); }
.t-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sc-4); row-gap: var(--sc-5);
  align-items: start;
}
/* a wide frame, a tall crop, two mediums: the tall one runs the full height of
   the block, and the second medium steps down so no two frames share a baseline */
.t-fig { margin: 0; min-width: 0; position: relative; padding: var(--t-matte, 0); background: var(--t-matte-bg, transparent); box-shadow: var(--t-matte-shadow, none); }
.t-fig--wide { grid-column: 1 / 9;  grid-row: 1; }
.t-fig--tall { grid-column: 9 / 13; grid-row: 1 / 3; align-self: stretch; }
.t-fig--a    { grid-column: 1 / 5;  grid-row: 2; }
.t-fig--b    { grid-column: 5 / 9;  grid-row: 2; margin-top: var(--sc-8); }
.t-frame { position: relative; overflow: hidden; background: var(--sc-surface); border-radius: var(--r); isolation: isolate; }
.t-fig--wide .t-frame { aspect-ratio: 16 / 9; --ov: 34px; }
.t-fig--tall .t-frame { height: 100%; min-height: 26rem; --ov: 44px; }
.t-fig--a .t-frame { aspect-ratio: 4 / 3; --ov: 34px; }
.t-fig--b .t-frame { aspect-ratio: 4 / 3; --ov: 34px; }
/* the image is taller than its frame by the parallax travel each way, so the
   light parallax (rate x 50px either side of centre) never shows an edge */
.t-frame__px { position: absolute; left: 0; right: 0; top: calc(var(--ov) * -1); bottom: calc(var(--ov) * -1); }
.t-frame__px img { width: 100%; height: 100%; object-fit: cover; }
/* the tall block needs its own height from the two rows, not from its image */
.t-fig--tall { display: flex; }
.t-fig--tall .t-frame { flex: 1 1 auto; }

/* ------------------------------------------------------------ 4. proof -- */
.t-proof { --tf-wend: min(88vw, 1280px); }
.t-proof__stage {
  display: grid; place-items: center;
  padding-top: var(--bar-h);
  /* growth: t runs 0 to 1 across the growth window, then holds; e is a
     smoothstep of t; k is the frame's scale */
  --t: clamp(0, calc((var(--sc-p, 0) - var(--tf-from)) / var(--tf-span)), 1);
  --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
  --tf-k: calc(var(--tf-k0) + (1 - var(--tf-k0)) * var(--e));
}
.t-proof__stage::before {
  /* the screen lights the room: a glow behind the frame that opens as it grows */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(52% 46% at 50% 54%, var(--t-glow, transparent), transparent 72%);
  opacity: calc(0.35 + 0.65 * var(--e));
}
.t-proof__title {
  position: absolute; z-index: 2; left: 50%; translate: -50% 0; margin: 0; text-align: center;
  top: max(calc(var(--bar-h) + 0.5rem), calc(50% - var(--tf-wend) * var(--tf-k0) * 0.28125 - 4.25rem));
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); letter-spacing: 0.08em;
  pointer-events: none;
}
.t-proof__frame {
  position: relative; z-index: 1;
  width: var(--tf-wend);
  scale: var(--tf-k);
  transform-origin: 50% 50%;
  will-change: scale;
}
.t-proof__frame .facade, .t-screener { box-shadow: var(--sc-e3); }
/* the play label holds its size while the frame grows around it */
.t-proof__frame .facade__play {
  scale: calc(1 / var(--tf-k));
  width: max-content; max-width: calc(var(--tf-k) * 78%); justify-content: center; text-align: center;
}
.t-screener {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  overflow: clip; border-radius: var(--r); background: var(--sc-surface);
}
.t-screener > img { width: 100%; height: 100%; object-fit: cover; }
/* the card holds a constant size while its frame grows: it is counter-scaled by
   1/k and its layout width tracks the frame's current width */
.t-screener__card {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  scale: calc(1 / var(--tf-k));
  width: calc(var(--tf-k) * 62%); min-width: 0;
  padding: var(--sc-5) var(--sc-5) calc(var(--sc-5) + 2px);
  display: grid; justify-items: center; gap: var(--sc-4); text-align: center;
  background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--r);
  box-shadow: var(--sc-e2);
}
.t-screener__line { margin: 0; font-family: var(--sc-font-display); font-weight: 500; letter-spacing: 0.04em; font-size: var(--sc-t-lg); line-height: 1.25; text-wrap: balance; }
.t-screener__card .btn { max-width: 100%; }

/* ------------------------------------------------------------ 5. close -- */
/* The next title is the centrepiece: its name large in Cinzel beside its tall
   portrait, the actions directly underneath, the compact foot at the bottom. */
.t-close {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: calc(var(--bar-h) + var(--sc-6));
}
.t-close__in { flex: 1 1 auto; display: grid; align-content: center; padding-block: var(--sc-5) var(--sc-6); }
.t-close__grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "text thumb" "row row";
  column-gap: clamp(2rem, 7vw, 8rem);
  row-gap: clamp(1.75rem, 4.5vh, 3rem);
}
.t-next__text { grid-area: text; min-width: 0; }
.t-next__label { margin: 0 0 var(--sc-4); color: var(--sc-ink-soft); }
.t-next__name {
  display: inline-block; max-width: 18ch;
  font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4rem); line-height: 1.06; letter-spacing: 0.03em;
  text-wrap: balance; color: var(--sc-ink); padding-block: 0.22em;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.16em; text-decoration-thickness: 2px;
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
.t-next__name::after { content: " \2192" / ""; }
@media (hover: hover) and (pointer: fine) {
  .t-next__name:hover { text-decoration-color: var(--silver); }
}
.t-next__thumb {
  grid-area: thumb; justify-self: end;
  display: block; height: clamp(20rem, 48vh, 36rem); aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r);
  background: var(--sc-surface); box-shadow: var(--sc-e2);
}
.t-next__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .t-next__thumb:hover img { transform: scale(1.04); } }
.t-close__row {
  grid-area: row;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-5);
  padding-top: clamp(1.25rem, 3vh, 2rem); border-top: 1px solid var(--sc-hairline-strong);
}
.t-close .link-arrow { min-height: 44px; align-items: center; }
.t-close__foot { padding-block: var(--sc-4) calc(var(--sc-5) + env(safe-area-inset-bottom)); }
.t-close__foot .foot-mini { gap: 0 1.6rem; }

/* ================================================================ SCENES ==
   Distinct per title. The accent stays the brand purple everywhere.          */

/* van-amburgs: warm tungsten bar light behind the one-sheet */
.t-van-amburgs .t-clarity::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: -12%; bottom: -18%;
  background:
    radial-gradient(46% 62% at 24% 46%, rgb(255 154 62 / 0.22), transparent 70%),
    radial-gradient(30% 40% at 84% 30%, rgb(255 190 110 / 0.07), transparent 72%);
}
.t-van-amburgs .t-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(90% 80% at 50% 42%, transparent 55%, rgb(18 8 2 / 0.38) 100%);
}

/* mario-hodge: a thin royal-blue and yellow rule system, lines not blocks */
.t-mario-hodge .t-clarity::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: var(--sc-gutter); right: var(--sc-gutter); top: 0; height: 7px;
  max-width: calc(var(--sc-maxw) - 2 * var(--sc-gutter)); margin-inline: auto;
  border-top: 2px solid var(--t-rule-b);
  border-bottom: 2px solid var(--t-rule-y);
}
.t-mario-hodge .t-clarity .sheet > dt:first-of-type,
.t-mario-hodge .t-clarity .sheet > dt:first-of-type + dd { border-top-color: var(--t-rule-y); }
.t-mario-hodge .t-fig { outline: 1px solid var(--t-rule-b); outline-offset: 6px; }
.t-mario-hodge .t-fig--tall, .t-mario-hodge .t-fig--b { outline-color: var(--t-rule-y); }
.t-mario-hodge .t-proof__frame { outline: 2px solid var(--t-rule-y); outline-offset: 7px; }
.t-mario-hodge .t-proof__frame::after {
  content: ""; position: absolute; inset: -13px; border: 1px solid var(--t-rule-b); pointer-events: none;
}
.t-mario-hodge .t-close__row { border-top: 0; position: relative; padding-top: calc(clamp(1.25rem, 3vh, 2rem) + 7px); }
.t-mario-hodge .t-close__row::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  border-top: 2px solid var(--t-rule-b); border-bottom: 2px solid var(--t-rule-y);
}

/* good-people: noir. deep vignettes, candle-warm highlights on the frames */
.t-good-people .t-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(70% 58% at 84% 88%, rgb(255 168 84 / 0.20), transparent 70%),
    radial-gradient(112% 92% at 50% 46%, transparent 40%, rgb(6 2 2 / 0.72) 100%);
}
.t-good-people .t-clarity::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -8% 0 -12% 0;
  background: radial-gradient(38% 46% at 88% 20%, rgb(255 160 74 / 0.09), transparent 72%);
}
.t-good-people .t-proof__frame .t-screener::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(112% 92% at 50% 46%, transparent 40%, rgb(6 2 2 / 0.6) 100%);
}

/* vonnworld: pop-art halftone. Red dots that shrink away from the edge, as on
   the show's own backgrounds. Seven staggered rows, largest at the edge. */
.t-vonnworld {
  --t-dot: rgb(176 30 38 / 0.86);
  --t-ht-edge:
    radial-gradient(circle at 50% 50%, var(--t-dot) 0 5.8px, transparent 6.3px) 0 0 / 16px 16px repeat-x,
    radial-gradient(circle at 50% 50%, var(--t-dot) 0 5.0px, transparent 5.5px) 8px 14px / 16px 16px repeat-x,
    radial-gradient(circle at 50% 50%, var(--t-dot) 0 4.2px, transparent 4.7px) 0 28px / 16px 16px repeat-x,
    radial-gradient(circle at 50% 50%, var(--t-dot) 0 3.4px, transparent 3.9px) 8px 42px / 16px 16px repeat-x,
    radial-gradient(circle at 50% 50%, var(--t-dot) 0 2.6px, transparent 3.1px) 0 56px / 16px 16px repeat-x,
    radial-gradient(circle at 50% 50%, var(--t-dot) 0 1.8px, transparent 2.3px) 8px 70px / 16px 16px repeat-x,
    radial-gradient(circle at 50% 50%, var(--t-dot) 0 1.0px, transparent 1.5px) 0 84px / 16px 16px repeat-x;
}
.t-vonnworld .t-clarity::before,
.t-vonnworld .t-texture::after {
  content: ""; position: absolute; left: 0; right: 0; height: 100px; pointer-events: none; z-index: -1;
  background: var(--t-ht-edge);
}
.t-vonnworld .t-clarity::before { top: 0; }
.t-vonnworld .t-clarity { padding-top: 9rem; }
.t-vonnworld .t-texture::after { bottom: 0; transform: scaleY(-1); }
.t-vonnworld .t-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at 50% 50%, var(--t-dot) 0 1.7px, transparent 2.2px) 0 0 / 8px 8px;
  -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000, transparent 38%);
          mask-image: radial-gradient(120% 120% at 100% 100%, #000, transparent 38%);
}

/* mitzi-project: daylight. crisp white mats on cool grey, generous air */
.t-mitzi-project { --t-matte: 10px; --t-matte-bg: #fff; --t-matte-shadow: var(--sc-e2); }
.t-mitzi-project .t-clarity { padding-bottom: calc(var(--sc-section) * 1.4); }
.t-mitzi-project .t-frame { border-radius: 1px; }

/* Phones run this act as flow (an inline script switches data-sc-act before the
   engine mounts): a 16:9 frame in a pinned portrait screen is a small window in
   a lot of dead dark. In flow the frame grows to about 94vw as it crosses the
   screen, and the empty space is gone. */
.t-proof[data-sc-act="flow"] { --tf-wend: 94vw; --tf-k0: 0.74; --tf-from: 0.08; --tf-span: 0.36; }
.t-proof[data-sc-act="flow"] .t-proof__stage {
  position: relative; height: auto; overflow: clip;
  display: grid; justify-items: center; align-content: start; gap: var(--sc-5);
  padding: var(--sc-7) 0 var(--sc-5);
}
.t-proof[data-sc-act="flow"] .t-proof__title { position: static; translate: none; }
.t-proof[data-sc-act="flow"] .t-proof__frame .facade, .t-proof[data-sc-act="flow"] .t-screener { border-radius: var(--r); }

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* the frame rests at a size worth reading, the heading stays, the glow is
     steady: opacity carries meaning, nothing travels */
  .t-proof { --tf-k0: 0.88; }
  .t-proof[data-sc-act="flow"] { --tf-k0: 0.94; }
  .t-proof__stage { --e: 0; }
  .t-proof__stage::before { opacity: 0.8; }
  .t-proof__title { top: max(calc(var(--bar-h) + 0.5rem), calc(50% - var(--tf-wend) * 0.88 * 0.28125 - 4.25rem)); }
  .t-next__thumb img { transition: none; }
}

/* ------------------------------------------------------------------ phones -- */
@media (max-width: 860px) {
  /* the corner scrim becomes a taller band: the copy spans the frame here */
  .t-hero .sc-scrim--lead {
    -webkit-mask-image: none; mask-image: none;
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 91%, transparent) 32%,
      color-mix(in oklab, var(--sc-canvas) 68%, transparent) 52%,
      color-mix(in oklab, var(--sc-canvas) 28%, transparent) 68%,
      transparent 82%);
  }
  .t-hero .sc-copy { max-width: none; }
  .t-clarity__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sc-7); }
  .t-vonnworld .t-clarity { padding-top: 7rem; }
  .t-clarity .sc-lede { max-width: 28ch; }
  .t-clarity__onreq { max-width: 26ch; }
  .t-clarity .sheet { max-width: none; }

  .t-vonnworld .t-clarity::before, .t-vonnworld .t-texture::after {
    height: 70px;
    -webkit-mask-image: linear-gradient(#000 0 50px, transparent 70px);
            mask-image: linear-gradient(#000 0 50px, transparent 70px);
  }
}
@media (max-width: 700px) {
  .t-hero h1 { font-size: clamp(1.85rem, 1.2rem + 3.6vw, 2.4rem); }
  /* the longest descriptor ("Animated young adult dramedy series") stays on one line at 360 and 390 */
  .t-hero__format { letter-spacing: 0.12em; }
  /* light heroes: a dark bottom band under compact copy (buttons on one row) */
  body[data-ground="light"] .t-hero .sc-scrim--lead {
    -webkit-mask-image: none; mask-image: none;
    background: linear-gradient(to top,
      color-mix(in oklab, var(--t-scrim) 93%, transparent) 0%,
      color-mix(in oklab, var(--t-scrim) 91%, transparent) 23%,
      color-mix(in oklab, var(--t-scrim) 56%, transparent) 31%,
      transparent 39%);
  }
  body[data-ground="light"] .t-hero h1 { font-size: clamp(1.75rem, 1.1rem + 3.4vw, 2.25rem); }
  body[data-ground="light"] .t-hero .sc-copy--lead { bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
  body[data-ground="light"] .t-hero .sc-copy { gap: var(--sc-3); max-width: none; }
  body[data-ground="light"] .t-hero__actions { gap: var(--sc-2); margin-top: var(--sc-1) !important; }
  body[data-ground="light"] .t-hero .btn,
  body[data-ground="light"] .t-hero .shortlist-toggle { padding-inline: 0.9em; font-size: 0.72rem; letter-spacing: 0.12em; }

  /* the grid, re-cut for a portrait screen: one column of large frames, each at
     a different width and edge, so the rhythm stays asymmetric */
  .t-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sc-4); }
  .t-fig--wide, .t-fig--tall, .t-fig--a, .t-fig--b { grid-column: 1; grid-row: auto; margin-top: 0; }
  .t-fig--wide { width: 100%; }
  .t-fig--tall { width: 90%; justify-self: end; align-self: start; display: block; }
  .t-fig--a { width: 76%; justify-self: start; }
  .t-fig--b { width: 84%; justify-self: end; }
  .t-fig--wide .t-frame { aspect-ratio: 16 / 10; --ov: 17px; }
  .t-fig--tall .t-frame { height: auto; min-height: 0; aspect-ratio: 5 / 6; --ov: 22px; }
  .t-fig--a .t-frame, .t-fig--b .t-frame { aspect-ratio: 4 / 3; --ov: 17px; }
  .t-mario-hodge .t-fig { outline-offset: 4px; }
  .t-mitzi-project { --t-matte: 6px; }

  .t-proof__title { font-size: 1.5rem; }
  .t-screener__card { width: calc(var(--tf-k) * 88%); padding: var(--sc-4); gap: var(--sc-3); }
  .t-screener__line { font-size: var(--sc-t-base); }
  .t-mario-hodge .t-proof__frame { outline-offset: 5px; }
  .t-mario-hodge .t-proof__frame::after { inset: -9px; }

  /* the close on a phone: the name across the top, the actions stacked beside
     the tall portrait */
  .t-close { padding-top: calc(var(--bar-h) + var(--sc-5)); }
  .t-close__in { align-content: start; padding-block: var(--sc-3) var(--sc-6); }
  .t-close__grid {
    grid-template-columns: minmax(0, 1fr) 50vw;
    grid-template-areas: "text text" "row thumb";
    align-items: center; column-gap: var(--sc-4); row-gap: var(--sc-5);
  }
  .t-next__thumb { height: auto; width: 100%; }
  .t-next__name { font-size: clamp(1.9rem, 1.2rem + 3vw, 2.6rem); max-width: none; }
  .t-close__row { flex-direction: column; align-items: stretch; gap: var(--sc-3); padding-top: 0; border-top: 0; }
  .t-close__row .btn, .t-close__row .shortlist-toggle {
    white-space: normal; justify-content: center; text-align: center; line-height: 1.25; padding-block: 0.4em;
  }
  .t-close__row .link-arrow { justify-content: center; }
  .t-mario-hodge .t-close__row::before { display: none; }
  .t-mario-hodge .t-close__row { padding-top: 0; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .t-proof { --tf-k0: 0.9; }
}