/* ============================================================================
   ReelWrap — "The Cutting Room"
   Theme layer over scrollcraft. Tokens first, then this page's own markup.
   The engine owns the devices; nothing here restyles a mechanism.
   ========================================================================== */

/* ------------------------------------------------------------- tokens ---- */
:root {
  /* Six roles. The page runs cold ink for the film, then inverts once to bone
     at the wrap and stays there. film.js interpolates these live, so every
     value below is the DARK end of the ramp and the starting state. */
  --sc-canvas:     #0A0C10;
  --sc-surface:    #12161F;
  --sc-ink:        #F1EFE9;
  --sc-ink-soft:   #939CAC;
  --sc-accent:     #5B84FF;
  --sc-accent-ink: #0A0C10;

  /* Two families. Archivo carries voice on a real width axis; Geist carries
     prose; Geist Mono is for timecode and counts, which are actual data. */
  --sc-font-display: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ramp. Floors are phone floors: scrollcraft's 3.4rem 4xl wraps a six word
     headline to five lines at 390px. */
  --sc-t-xs:   clamp(0.688rem, 0.66rem + 0.13vw, 0.75rem);
  --sc-t-sm:   clamp(0.813rem, 0.79rem + 0.16vw, 0.9rem);
  --sc-t-base: clamp(0.975rem, 0.94rem + 0.2vw, 1.075rem);
  --sc-t-lg:   clamp(1.15rem, 1.05rem + 0.46vw, 1.4rem);
  --sc-t-xl:   clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --sc-t-2xl:  clamp(1.95rem, 1.5rem + 2.2vw, 3.1rem);
  --sc-t-3xl:  clamp(2.3rem, 1.55rem + 3.6vw, 4.2rem);
  --sc-t-4xl:  clamp(2.6rem, 1.5rem + 5.2vw, 5.5rem);

  --sc-track-tight: -0.034em;
  --sc-track-snug:  -0.018em;
  --sc-track-wide:   0.16em;
  --sc-leading-none: 0.86;
  --sc-measure: 58ch;

  --sc-maxw: 88rem;
  --sc-gutter: clamp(1.25rem, 4.2vw, 4.5rem);
  --sc-section: clamp(4rem, 8vw, 9.5rem);

  /* One radius scale for UI. The film frame is a physical object and carries
     its own, which is the only exception on the page. */
  --sc-r-sm: 8px; --sc-r-md: 12px; --sc-r-lg: 12px; --sc-r-pill: 12px;
  --r-film: 26px;

  --sc-shadow-color: 222 45% 2%;

  /* The rail. Desktop puts it on the left edge, mobile on the bottom. */
  --rail-w: 78px;
  --rail-h: 56px;
}

html { scroll-behavior: auto; }              /* the page IS the scroll device */
body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-weight: 400;
  /* Light type on a dark ground needs a touch more tracking and leading than
     the same face would take on white. */
  letter-spacing: 0.002em;
  transition: none;
}

::selection { background: var(--sc-ink); color: var(--sc-canvas); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }

/* ---------------------------------------------------------- typography --- */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 780;
  font-stretch: 94%;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  color: var(--sc-ink);
}
.sc-display em { font-style: normal; font-weight: 780; font-stretch: 118%; }
.sc-lede {
  font-size: var(--sc-t-lg); line-height: 1.42;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink); max-width: 34ch; font-weight: 400;
}
.sc-body { color: var(--sc-ink-soft); max-width: var(--sc-measure); line-height: 1.62; }
.sc-label {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); font-weight: 500;
}

/* ------------------------------------------------------------ controls --- */
/* One label per intent on this page: "Get launch updates". The fill inverts
   with the ground so the pair always clears AA on whichever half it lands on. */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 1.02em 1.4em; border-radius: var(--sc-r-md);
  background: var(--sc-ink); color: var(--sc-canvas);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm);
  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), box-shadow 180ms var(--sc-ease-out);
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color)/.3), 0 6px 18px -6px hsl(var(--sc-shadow-color)/.4);
}
.btn:active { transform: translateY(1px); }
.btn__arrow { width: 1em; height: 1em; flex: 0 0 auto; }
.btn--ghost {
  background: transparent; color: var(--sc-ink);
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px hsl(var(--sc-shadow-color)/.3), 0 12px 28px -8px hsl(var(--sc-shadow-color)/.45); }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--sc-ink); }
}

/* ----------------------------------------------------------------- bar --- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: 68px; display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--sc-gutter);
  padding-left: max(var(--sc-gutter), var(--rail-w));
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.wordmark {
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 118%;
  font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none; display: inline-flex; gap: 0.55em; align-items: baseline;
}
.wordmark span { font-stretch: 62%; font-weight: 500; color: var(--sc-ink-soft); letter-spacing: 0.12em; font-size: 0.72rem; }
.bar .btn { padding: 0.6em 1.05em; font-size: var(--sc-t-xs); }

/* ============================================================== the rail ==
   The signature. Not chrome: the ticks are the film's own frames, the readout
   is its real timecode, and the five notches are the cuts the copy is pinned
   to. It is the same instrument on both breakpoints, rotated, not shrunk. */
.rail {
  position: fixed; z-index: calc(var(--sc-z-chrome) - 1);
  pointer-events: none;
  font-family: var(--sc-font-mono);
  left: 0; top: 0; bottom: 0; width: var(--rail-w);
}
.rail__line {
  position: absolute; left: 30px; top: 12vh; bottom: 12vh; width: 1px;
  background: var(--sc-hairline);
}
.rail__ticks, .rail__cuts { position: absolute; left: 30px; top: 12vh; bottom: 12vh; width: 1px; }
.rail__tick {
  position: absolute; left: 0; top: 0; height: 1px; width: 5px;
  background: var(--sc-ink); opacity: 0.24;
}
.rail__tick--major { width: 12px; opacity: 0.42; }
.rail__cut {
  position: absolute; left: -3px; top: 0; width: 7px; height: 7px; margin-top: -3px;
  border-radius: 50%;
  background: var(--sc-canvas);
  box-shadow: inset 0 0 0 1px var(--sc-ink-soft);
  opacity: 0.5;
  transition: opacity 320ms var(--sc-ease-out), background-color 320ms var(--sc-ease-out), box-shadow 320ms var(--sc-ease-out);
}
.rail__cut.is-lit {
  opacity: 1; background: #3B6BFF;
  box-shadow: inset 0 0 0 1px #3B6BFF, 0 0 0 4px rgb(59 107 255 / 0.20);
}
.rail__head {
  position: absolute; left: 18px; top: 12vh; width: 26px; height: 1px;
  background: var(--sc-accent);
  opacity: 0; transition: opacity 400ms var(--sc-ease-out);
  will-change: transform;
}
.rail.is-running .rail__head { opacity: 1; }
.rail__tc {
  position: absolute; left: 5px; top: calc(12vh + 11px); width: 74px;
  font-size: 0.625rem; letter-spacing: 0.1em; font-weight: 500;
  color: var(--sc-accent); font-variant-numeric: tabular-nums;
}
.rail__chapter {
  position: absolute; left: 30px; bottom: 5.2vh; width: 12rem;
  transform-origin: 0 0; rotate: -90deg; translate: 0 0;
  font-size: 0.625rem; letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); opacity: 0.75;
  transition: opacity 300ms var(--sc-ease-out);
  white-space: nowrap;
}

/* ================================================================= film ==
   One pinned stage carries the whole 15.8s. clip-map="travel" locks clip time
   to cue time so a scene boundary and its line are the same scroll position.  */
.film { position: relative; }
.film__stage { background: transparent; }

.film__frame {
  position: absolute; top: 50%; left: 50%;
  height: clamp(360px, 74svh, 700px);
  aspect-ratio: 720 / 1470;
  border-radius: var(--r-film);
  overflow: hidden;
  translate: -50% -50%;
  will-change: transform;
  background: #000;
  /* Real light: a lip highlight plus an offset, tinted, blurred shadow. */
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 14%, transparent),
    0 4px 10px hsl(var(--sc-shadow-color)/.34),
    0 26px 60px -12px hsl(var(--sc-shadow-color)/.5),
    0 70px 130px -40px hsl(var(--sc-shadow-color)/.46);
}
/* The engine's own rule positions the clip and the poster against the nearest
   positioned ancestor, which is this box. No override needed, only the frame. */
.film__frame > img, .film__frame > video { border-radius: inherit; }

.film__still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 420ms var(--sc-ease-out); z-index: 2;
}
.film__still.is-on { opacity: 1; }

/* Copy sits beside the frame on the ink ground, so it needs no scrim on a wide
   screen. Below 860px the frame goes full bleed and the band earns its place. */
.film .sc-scrim { opacity: 0; transition: opacity 400ms var(--sc-ease-out); }

.cue { position: absolute; z-index: var(--sc-z-copy); }
.cue--lead   { left: max(var(--sc-gutter), var(--rail-w)); bottom: clamp(4rem, 15vh, 10rem); max-width: min(34rem, var(--copy-max, 37vw)); }
.cue--trail  { right: var(--sc-gutter); bottom: clamp(4rem, 15vh, 10rem); max-width: min(34rem, var(--copy-max, 37vw)); text-align: right; }
.cue--center { left: 50%; top: 50%; translate: -50% -50%; text-align: center; max-width: min(28rem, 62vw); }
.cue__k { display: block; }
.cue .sc-label { display: block; margin-bottom: 1.1rem; }
.cue .sc-lede { margin-top: 1.15rem; }
.cue h1, .cue h2 { margin: 0; }
.cue--hero { max-width: min(43rem, var(--copy-max, 47vw)); }
/* Plan the size and the column together. --copy-max is the real room beside
   the frame, so cap the display against it: a headline that wraps to four
   lines is a font-size error, and on a 900px-wide window the ramp alone
   produced exactly that. The divisors are the longest line's width in ems. */
.cue--hero h1 { font-size: min(var(--sc-t-4xl), calc(var(--copy-max, 200vw) / 7.5)); max-width: 15ch; }
.cue--wrap { max-width: min(38rem, var(--copy-max, 42vw)); }
.cue--wrap h2 { font-size: min(var(--sc-t-4xl), calc(var(--copy-max, 200vw) / 5.4)); max-width: 11ch; }
.cue--mid h2 { font-size: min(var(--sc-t-3xl), calc(var(--copy-max, 200vw) / 6.6)); }
.cue--quiet p { font-size: var(--sc-t-xl); font-family: var(--sc-font-display); font-weight: 500; font-stretch: 84%; letter-spacing: var(--sc-track-snug); color: var(--sc-ink-soft); margin: 0; }

/* A wipe on a wrapper, never on the type: clip-path cuts the border box, and a
   box set at 0.86 leading is shorter than its own ascenders. */
.wipe { display: block; padding-block: 0.16em; margin-block: -0.16em; }

.cue__spec {
  margin-top: 1.4rem; display: flex; gap: 1.1rem; flex-wrap: wrap;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft); letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.cue--trail .cue__spec { justify-content: flex-end; }
.cue__actions { margin-top: 1.9rem; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

/* ================================================================ rail ====
   (the lateral one) Four frames of the same flow, read across instead of down.
   The heading is the first item and the note is the last, which is what buys
   the travel its overflow. */
.strip { position: relative; }
.strip__stage { display: flex; align-items: center; }
.strip__rail { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.6rem); padding-inline: max(var(--sc-gutter), var(--rail-w)); }
.strip__item { flex: 0 0 auto; width: clamp(210px, 22vw, 300px); }
.strip__item--head, .strip__item--note { width: clamp(260px, 26vw, 400px); }
.strip__shot {
  width: 100%; aspect-ratio: 480 / 980; height: auto;
  object-fit: cover; border-radius: var(--sc-r-md);
  background: var(--sc-surface);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 10%, transparent),
              0 3px 8px hsl(var(--sc-shadow-color)/.2),
              0 18px 40px -14px hsl(var(--sc-shadow-color)/.4);
}
.strip__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; align-items: baseline; }
.strip__name { font-family: var(--sc-font-display); font-weight: 700; font-stretch: 100%; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); color: var(--sc-ink); }
.strip__tc { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.strip__item--head h2 { font-size: var(--sc-t-2xl); margin: 0; }
.strip__item--head, .strip__item--note { align-self: center; }
.strip__note { font-size: var(--sc-t-xl); margin: 0; max-width: 15ch; }
.strip__item--note p { margin: 0; }

/* ============================================================== reasons ==
   A held ground and three statements crossing over. No media: the contrast
   with the film is the point. */
.claims { position: relative; }
.claims__inner { position: absolute; inset: 0; display: grid; place-items: center; padding-inline: max(var(--sc-gutter), var(--rail-w)); }
.claim { grid-area: 1 / 1; text-align: center; max-width: 44rem; }
.claim h2 { font-size: var(--sc-t-3xl); margin: 0; max-width: 17ch; margin-inline: auto; }
.claim p { margin-top: 1.35rem; font-size: var(--sc-t-base); color: var(--sc-ink-soft); max-width: 42ch; margin-inline: auto; text-wrap: pretty; }

/* ================================================================ close ==
   Resolution: it arrives somewhere and holds. Not a fade into a footer. */
.close { padding-block: clamp(1.5rem, 4vw, 4rem) 0; }
.close__inner { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: max(var(--sc-gutter), var(--rail-w)); padding-right: var(--sc-gutter); }
.close__mark {
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 118%;
  font-size: clamp(3.2rem, 15vw, 15rem); line-height: 0.8;
  letter-spacing: -0.045em; text-transform: uppercase; margin: 0;
  color: var(--sc-ink);
}
.close__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: end;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.close__say { font-size: var(--sc-t-xl); font-family: var(--sc-font-display); font-weight: 500; font-stretch: 88%; letter-spacing: var(--sc-track-snug); line-height: 1.18; margin: 0; max-width: 20ch; }
.close__do { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.close__note { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 34ch; margin: 0; }

.foot {
  margin-top: clamp(3.5rem, 8vw, 7rem);
  border-top: 1px solid var(--sc-hairline);
  padding-block: 1.6rem 2.2rem;
}
.foot__inner {
  max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: max(var(--sc-gutter), var(--rail-w)); padding-right: var(--sc-gutter);
  display: flex; gap: 1.2rem 2.4rem; flex-wrap: wrap; justify-content: space-between; align-items: center;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em;
  color: var(--sc-ink-soft); text-transform: uppercase;
}
.foot a { color: var(--sc-ink-soft); text-decoration: none; }
.foot a:hover { color: var(--sc-ink); }
.foot__links { display: flex; gap: 1.6rem; flex-wrap: wrap; }

/* ================================================================ mobile ==
   Not the desktop composition scaled. The frame becomes the screen, the copy
   moves into a band over it, and the rail lies down along the bottom edge. */
@media (max-width: 1024px) and (orientation: portrait) {
  :root { --rail-w: 0px; }

  .bar { height: 58px; padding-left: var(--sc-gutter); }

  .rail {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; height: var(--rail-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 88%, transparent), transparent);
  }
  .rail__line, .rail__ticks, .rail__cuts {
    left: var(--sc-gutter); right: 5.5rem; top: auto; bottom: 20px;
    width: auto; height: 1px;
  }
  .rail__tick { top: 0; height: 4px; width: 1px; left: auto; }
  .rail__tick--major { height: 9px; }
  .rail__cut { top: 0; left: auto; margin-top: -3px; margin-left: -3px; }
  .rail__head { left: var(--sc-gutter); top: auto; bottom: 14px; width: 1px; height: 13px; }
  .rail__tc { left: auto; right: var(--sc-gutter); top: auto; bottom: 13px; width: auto; text-align: right; }
  .rail__chapter { display: none; }

  .film__frame {
    top: 0; left: 0; translate: none; height: 100svh; width: 100%;
    aspect-ratio: auto; border-radius: 0; box-shadow: none;
  }
  .film .sc-scrim { opacity: 1; }

  .cue, .cue--lead, .cue--trail, .cue--center {
    left: var(--sc-gutter); right: var(--sc-gutter); top: auto;
    bottom: calc(var(--rail-h) + 1.1rem);
    translate: none; text-align: left; max-width: none;
  }
  .cue--trail .cue__spec { justify-content: flex-start; }
  .cue--hero h1 { font-size: var(--sc-t-2xl); }
  .cue--wrap h2 { font-size: var(--sc-t-2xl); }
  .cue--mid h2  { font-size: var(--sc-t-xl); }
  .cue--quiet p { font-size: var(--sc-t-lg); }
  .cue .sc-lede { font-size: var(--sc-t-base); max-width: 30ch; }
  .cue__actions { margin-top: 1.3rem; }

  .strip__stage { align-items: center; }
  .strip__item { width: 62vw; }
  .strip__item--head, .strip__item--note { width: 74vw; }

  .claim { max-width: none; text-align: left; }
  .claim p { margin-inline: 0; }

  .close__grid { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
}

/* A phone in landscape has almost no height; the pinned stages need the copy
   to stop competing with the frame. */
@media (max-width: 900px) and (orientation: landscape) {
  .cue--hero h1, .cue--wrap h2 { font-size: var(--sc-t-xl); }
  .cue .sc-lede, .cue__spec { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .film__frame { transform: none !important; }
  .rail__head { transition: none; }
}

/* ====================================================== progress-driven ====
   --sc-p is published by the engine on the act element. Registering it as a
   <number> is what lets calc() read it, which is how two of the five reveals
   get their own mechanic without a second animation system on the page. */
@property --sc-p { syntax: "<number>"; inherits: true; initial-value: 0; }

/* Tracking settles as the line arrives: wide and loose, closing to its set
   value. Nothing moves, so it survives reduced motion untouched. */
.cue--track h2 {
  letter-spacing: calc(var(--sc-track-tight) + (1 - clamp(0, (var(--sc-p) - 0.50) * 7, 1)) * 0.055em);
}
/* The wrap lands slightly large and settles. Controlled scale, not a bounce. */
.cue--wrap .wipe {
  transform: scale(calc(1.035 - clamp(0, (var(--sc-p) - 0.893) * 14, 1) * 0.035));
  transform-origin: 0% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .cue--wrap .wipe { transform: none; }
}

/* --------------------------------------------------------------- a11y ---- */
.skip {
  position: fixed; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--sc-ink); color: var(--sc-canvas);
  padding: 0.7em 1.1em; border-radius: 0 0 var(--sc-r-md) 0;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: transform 180ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

/* --------------------------------------------------- the page load in ----
   One moment, once: the film arrives out of focus and settles. Opacity and
   filter only, because the frame's transform belongs to the scroll loop and
   two writers on one property is a race, not an animation. */
@keyframes film-in {
  from { opacity: 0; filter: blur(16px); }
  to   { opacity: 1; filter: blur(0); }
}
.film__frame { animation: film-in 900ms 120ms var(--sc-ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  @keyframes film-in { from { opacity: 0; } to { opacity: 1; } }
  .film__frame { animation-duration: 400ms; }
}

/* The hero block is a positioning container now that its children carry their
   own cues; it must not eat clicks meant for the frame behind it. */
.cue--hero { pointer-events: none; }
.cue--hero > * { pointer-events: auto; }

/* ================================================================ bloom ====
   The peak has a light source. When the film cuts from the black "listening"
   screen to the finished Reel, the room lights from the screen outward, and
   the ground follows that light instead of crossfading between two flat
   colours through a dead neutral grey. Painted behind the frame. */
.bloom {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(42% 46% at calc(50% + var(--bx, 0px)) 50%,
    rgb(126 176 255 / 0.62), rgb(80 116 190 / 0.22) 44%, transparent 72%);
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) { .bloom { display: none; } }

/* Rail items settle in sequence: lateral travel alone reads as a slideshow,
   items arriving in order read as a drawer being pulled. The first is exempt,
   because a pan act needs its opening content already there. */
@property --i { syntax: "<number>"; inherits: false; initial-value: 0; }
@media (prefers-reduced-motion: no-preference) {
  .strip__item + .strip__item {
    --settle: clamp(0, calc((var(--sc-p) - var(--i) * 0.07) * 6.5), 1);
    opacity: calc(0.7 + var(--settle) * 0.3);
    transform: translate3d(0, calc((1 - var(--settle)) * 20px), 0);
  }
}

/* The close is the only static section on a page of pinned stages, so it needs
   a stacking context of its own to sit above the fixed bloom layer. */
.close { position: relative; z-index: 2; margin-top: -46svh; }

/* ======================================================= mobile, part two ==
   A phone shows the recording at full bleed, which puts our chrome on top of
   the recording's own status bar and our copy on top of the app's own labels.
   Both are fixed by cutting the frame rather than by laying more over it. */
@media (max-width: 1024px) and (orientation: portrait) {
  /* The recording sits exactly in frame. Scaling it up to hide its own status
     bar cost more than it bought: on a portrait viewport object-fit takes its
     surplus out of the WIDTH, so a 112%-tall box sliced 36px off each side of
     the app's UI to trim 50px off the top. The chrome scrim already gives the
     header its own ground, so the two bars can coexist. */
  .sc-stage .film__frame > :is(video[data-sc-scrub], .sc-stage__poster, .film__still) {
    inset: 0; width: 100%; height: 100%; object-fit: cover;
  }

  /* Mask the film away from the type instead of scrimming over it. The copy
     then sits on plain ground and clears contrast at every frame of the clip,
     which no gradient over a moving image can promise. */
  .film__frame {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgb(0 0 0 / 0.32) 60%, transparent 68%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgb(0 0 0 / 0.32) 60%, transparent 68%);
  }
  .film .sc-scrim { opacity: 0; }

  /* Room for the copy under the mask, above the rail. */
  .cue, .cue--lead, .cue--trail, .cue--center {
    bottom: calc(var(--rail-h) + 1.4rem);
  }
  /* The app's own slot durations are already on screen right there. Printing
     ours beside them reads as two competing timelines. */
  .cue__spec { display: none; }

  /* At 62vw a card's name and its timecode end up at opposite ends of the
     screen and stop reading as a pair. */
  .strip__meta { flex-direction: column; align-items: flex-start; gap: 0.2rem; margin-top: 0.75rem; }
}

/* ========================================================= chrome ground ==
   The bar and the rail are on screen at every scroll position, which makes
   them the two things guaranteed to pass over media eventually. They get a
   ground sized to themselves, as a SIBLING and not a ::before: a scrim that
   lives inside the element it protects is hidden along with it whenever the
   page is photographed to measure what is underneath, so it is never the
   thing that got measured. Bands, not a full-frame overlay. */
.chrome-scrim {
  position: fixed; inset: 0; pointer-events: none;
  z-index: calc(var(--sc-z-chrome) - 2);
  background:
    linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 88%, transparent) 42%,
      color-mix(in oklab, var(--sc-canvas) 34%, transparent) 76%,
      transparent 100%) top / 100% 132px no-repeat,
    linear-gradient(to right,
      color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 55%, transparent) 48%,
      transparent 100%) left / 96px 100% no-repeat;
}
@media (max-width: 1024px) and (orientation: portrait) {
  .chrome-scrim {
    background:
      linear-gradient(to bottom,
        color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%,
        color-mix(in oklab, var(--sc-canvas) 86%, transparent) 46%,
        transparent 100%) top / 100% 108px no-repeat,
      linear-gradient(to top,
        color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
        color-mix(in oklab, var(--sc-canvas) 60%, transparent) 52%,
        transparent 100%) bottom / 100% 96px no-repeat;
  }
  .rail { background: none; }
}

/* ============================================================ the store ===
   One link, one intent, in the header and at the close. The artwork is
   Apple's, used unmodified and with the clear space their guidelines ask for
   (a quarter of the badge height on every side), and it swaps variant at the
   ground inversion so a black badge never lands on the ink half. */
.store {
  display: inline-flex; align-items: center; line-height: 0;
  text-decoration: none; border-radius: var(--sc-r-sm);
  padding: 10px; margin: -10px;             /* clear space, without moving it */
  transition: transform 140ms var(--sc-ease-out);
}
.store:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .store:hover { transform: translateY(-1px); } }
.store__badge { height: 40px; width: auto; display: block; }
.store__badge--light { display: none; }
:root.is-daylight .store__badge--dark { display: none; }
:root.is-daylight .store__badge--light { display: block; }
.store__label { display: none; line-height: 1; }

/* Until Apple's SVGs are in assets/badge/, fall back to the page's own button.
   It does not borrow Apple's wording for a mark that is not there: it names
   the app instead. film.js sets this class if the artwork fails to load. */
:root.no-badge .store__badge { display: none !important; }
:root.no-badge .store__label { display: inline-flex; }
:root.no-badge .store { padding: 0; margin: 0; }

/* The badge needs the height the old text pill did not. */
.bar { height: 76px; }

/* ====================================================== the closing mark ==
   Sized against its own container rather than the viewport, so it fills the
   measure exactly and cannot run off the right edge at any width. The old
   clamp() was a viewport guess and clipped past ~1700px. */
.close__inner { container-type: inline-size; }
.close__mark { font-size: 27cqi; }

@media (max-width: 1024px) and (orientation: portrait) {
  .bar { height: 66px; }
  .store__badge { height: 40px; }
}

/* On a phone the rail lies along the bottom edge, so the last line of the
   footer has to clear it rather than sit under it. */
@media (max-width: 1024px) and (orientation: portrait) {
  .foot { padding-bottom: calc(1.6rem + var(--rail-h)); }
}

/* ================================================================ about ==
   The film stated in prose, for anyone reading without a scroll wheel. Lives
   inside .close so it shares the stacking context above the bloom, and uses
   the same measure and gutters as the closing grid. */
.about { scroll-margin-top: 90px; margin-top: clamp(3.5rem, 8vw, 7rem); border-top: 1px solid var(--sc-hairline); padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.about__inner { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: max(var(--sc-gutter), var(--rail-w)); padding-right: var(--sc-gutter); }
.about__title { font-family: var(--sc-font-display); font-weight: 700; font-stretch: 100%; font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); line-height: 1.02; margin: 0; max-width: 16ch; text-wrap: balance; }
.about__lede { font-family: var(--sc-font-text); font-size: var(--sc-t-lg); line-height: 1.42; color: var(--sc-ink); margin: 1.4rem 0 0; max-width: 58ch; text-wrap: pretty; }
.about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.6rem, 4vw, 3.4rem); margin-top: clamp(2.2rem, 4vw, 3.4rem); }
.about__item h3, .about__faq h3 { font-family: var(--sc-font-display); font-weight: 600; font-stretch: 96%; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); line-height: 1.15; margin: 0; }
.about__item p { font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft); margin: 0.65rem 0 0; max-width: 40ch; text-wrap: pretty; }
.about__faq { margin-top: clamp(2.4rem, 5vw, 4rem); max-width: 62ch; }
.about__faq dl { margin: 1.1rem 0 0; display: grid; gap: 1.1rem; }
.about__faq dt { font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-base); color: var(--sc-ink); }
.about__faq dd { margin: 0.3rem 0 0; font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; }