/* aerosync.co.in — the public surface (doc 35 §8). The app's tokens and its two
   typefaces, never a second palette; the light the app refuses, because this
   page shows no footage a director is judging. Dark only, as the door screens
   are. Everything that moves stops for a visitor who asks for less motion. */

@font-face { font-family: Switzer; src: url("fonts/switzer.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  /* theme.css, dark */
  --base: #0a0e10;
  --raised: #121819;
  --overlay: #1a2224;
  --well: #000000;
  --line: #1e2729;
  --line-strong: #2a3538;
  --fg: #e6ebea;
  --fg-muted: #88979a;
  --fg-subtle: #5a686b;
  --accent: #2fa39b;
  --accent-hover: #3fbdb2;
  --accent-on: #04120f;
  --mark: #f05032;
  --mark-word: #2fa39b;
  --verified: #3fb950;
  --pending: #4a9eff;
  /* the script's own marks, as the app draws them */
  --tag-cast: #8b6cf0;
  --tag-prop: #e0702e;
  --tag-place: #5f95a8;
  --munshi-glint: #e6c75a;
  --paper: #f4f1ea;
  --ink: #1b1b1b;
  /* a panel: a shade up from the page, so one sliding over another is seen */
  --panel: #0d1214;

  --gutter: clamp(16px, 5vw, 96px);
  --measure: 2040px;
  --inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --radius: clamp(20px, 2vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--well); color: var(--fg);
  font: 400 clamp(16px, 0.55vw + 12px, 22px) / 1.55 Switzer, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 750; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; }
h2 { font-size: clamp(34px, 3.4vw, 80px); line-height: 1.02; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------- the name -- */
.name { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.top .mark { width: clamp(24px, 0.9vw, 34px); height: auto; }
.wordmark { font-weight: 800; letter-spacing: 0.28em; font-size: clamp(13px, 0.55vw, 20px); white-space: nowrap; }
.wordmark.small { font-size: 12px; }
.aero { color: var(--mark); }
.sync { color: var(--mark-word); }

/* --------------------------------------------------------------- the bar -- */
/* Clear over the first screen; frosted once the page moves under it. */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(14px, 1.6vw, 32px);
  padding: clamp(10px, 0.8vw, 18px) var(--inline); font-size: clamp(13px, 0.25vw + 10px, 16px);
  transition: background-color 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.top.solid {
  background: color-mix(in oklab, var(--base) 72%, transparent);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: color-mix(in oklab, var(--fg) 7%, transparent);
  padding-block: clamp(8px, 0.6vw, 14px);
}
.top nav { margin-left: auto; display: flex; gap: clamp(14px, 1.6vw, 32px); }
.top nav a { color: var(--fg-muted); text-decoration: none; transition: color 0.2s; }
.foot-of-page nav a { color: var(--fg-muted); text-decoration: none; font-size: 0.9em; transition: color 0.2s; }
.top nav a:hover, .foot-of-page nav a:hover, .top nav a[aria-current="page"] { color: var(--fg); }
.sign-in { text-decoration: none; font-weight: 550; }
.top .button.small { min-height: 32px; padding: 0.4em 1em; font-size: 1em; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s; }
.top.solid .button.small { opacity: 1; visibility: visible; transform: none; }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; position: relative; overflow: hidden;
  background: var(--accent); color: var(--accent-on); font-weight: 650; text-decoration: none;
  border-radius: 999px; padding: 0.7em 1.4em; transition: background-color 0.2s var(--ease);
}
.button::after { /* a glint that crosses once on hover, as light across a lens */
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
}
.button:hover { background: var(--accent-hover); }
.button:hover::after { transform: translateX(120%); transition: transform 0.8s var(--ease); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.aside { color: var(--fg-muted); font-size: 0.9em; }

/* ------------------------------------------------------------- the light -- */
/* Gate, as Door.tsx draws it: one beam from a lens off the top left, with the
   dust a projector's throw shows, and grain over all of it. */
.light { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.beam { position: absolute; inset: -10% 0 0 0; filter: blur(clamp(24px, 3vw, 64px)); opacity: 0; transform-origin: 0 0;
  animation: lamp 1.6s var(--ease) 0.15s forwards, breathe 9s ease-in-out 1.8s infinite; }
.beam::before {
  content: ""; position: absolute; inset: 0; clip-path: polygon(0% 0%, 8% 0%, 98% 34%, 88% 96%);
  background: linear-gradient(118deg,
    color-mix(in oklab, var(--fg) 50%, transparent) 0%,
    color-mix(in oklab, var(--accent) 55%, transparent) 18%,
    color-mix(in oklab, var(--accent) 26%, transparent) 55%,
    color-mix(in oklab, var(--accent) 10%, transparent) 100%);
}
.lens { position: absolute; inset: 0; opacity: 0; animation: lamp 1.2s var(--ease) forwards;
  background: radial-gradient(circle at -3% -6%, color-mix(in oklab, var(--fg) 60%, transparent) 0%,
    color-mix(in oklab, var(--accent) 35%, transparent) 5%, transparent 16%); }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The beam in WebGL (site.js), drawing its section's ground and the light on it, blended with nothing; the CSS
   beam is its stand-in wherever the shader does not run. The grain lies plainly over it, never blended either. */
.light canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.light.gl .beam, .light.gl .lens, .light.gl .dust { display: none; }
.grain { position: absolute; inset: -50%; opacity: 0.035; animation: grain 0.9s steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes lamp { to { opacity: 0.8; } }
@keyframes breathe { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(0.6deg) scale(1.02); } }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } }

/* -------------------------------------------------------------- the hero -- */
.hero {
  position: relative; min-height: 100svh; background: var(--base); overflow: clip;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 96px);
  padding-top: clamp(96px, 7vw, 168px); padding-inline: var(--inline);
}
.hero-words { position: relative; z-index: 2; display: grid; gap: clamp(20px, 2vw, 40px); container-type: inline-size; }
.hero h1 { font-size: min(15.5cqw, 176px); line-height: 0.95; letter-spacing: -0.045em; }
.hero h1 .line { display: block; animation: rise 1.1s var(--ease) both; }
.hero h1 .line + .line { animation-delay: 0.12s; }
.hero-words > p { color: var(--fg-muted); font-size: clamp(18px, 1.15vw, 30px); max-width: 34ch; animation: rise 1.1s var(--ease) 0.25s both; }
.hero-words .acts { animation: rise 1.1s var(--ease) 0.38s both; }
@keyframes rise { from { opacity: 0; transform: translateY(0.6em); filter: blur(6px); } }

/* The chain: the film's Overview, the app's best screen, large at the back and running off the page's edge, and in
   front of it the script and the shoot day, each at its own depth — they follow the pointer and part as the page
   scrolls. */
.chain { position: relative; z-index: 1; container-type: inline-size; aspect-ratio: 10 / 10.4; perspective: 1400px;
  width: min(100%, calc((100svh - clamp(96px, 7vw, 168px) - clamp(24px, 3vw, 80px) - 24px) / 1.08)); justify-self: end; }
.link {
  position: absolute; box-shadow: 0 3cqw 7cqw rgb(0 0 0 / 0.65);
  transform: translate3d(calc(var(--px, 0) * var(--d) * 14px), calc(var(--py, 0) * var(--d) * 10px + var(--sy, 0) * var(--d) * -80px), 0)
             rotateX(calc(var(--py, 0) * -3deg)) rotateY(calc(var(--px, 0) * 4deg));
  transition: box-shadow 0.6s var(--ease); will-change: transform;
  animation: arrive 1.2s var(--ease) both;
}
.link.screen { --d: 0.3; animation-delay: 0.15s; }
.link.paper { --d: 0.9; animation-delay: 0.4s; }
.link.shoot-day { --d: 1.6; animation-delay: 0.6s; }
@keyframes arrive { from { opacity: 0; translate: 0 6cqw; } }
.link.lit { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 80%, transparent), 0 0 6cqw color-mix(in oklab, var(--accent) 22%, transparent), 0 3cqw 7cqw rgb(0 0 0 / 0.65); }

.paper { left: 0; top: 0; width: 44cqw; background: var(--paper); color: var(--ink); border-radius: 0.5cqw;
  padding: 3cqw 3.6cqw; font: 400 1.6cqw/1.75 "Courier Prime", "Courier New", Courier, monospace; }
.paper .slug { font-weight: 700; display: flex; justify-content: space-between; margin-bottom: 1.6cqw; }
.tag { transition: color 0.5s var(--ease), background-color 0.5s var(--ease); border-radius: 2px; }
.tag.on { font-weight: 700; }
.tag.on.cast { color: var(--tag-cast); }
.tag.on.prop { color: var(--tag-prop); }
.tag.on.place { color: var(--tag-place); }
.tag.now { background: color-mix(in oklab, var(--accent) 22%, transparent); }

.screen { left: 14cqw; top: 15cqw; width: 118cqw; border-radius: 1.2cqw; overflow: clip; border: 1px solid var(--line-strong); background: var(--base); }
.screen img { width: 100%; }
.shoot-day { left: 0; top: 64cqw; width: 50cqw; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 1.4cqw;
  padding: 1.4cqw; display: grid; gap: 1.2cqw; font-size: 1.8cqw; }
.frames { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.8cqw; aspect-ratio: 2.1 / 1; }
.frames > * { width: 100%; height: 100%; object-fit: cover; border-radius: 0.6cqw; min-height: 0; background: var(--well); }
.frames .a { grid-row: span 2; }
.shoot-day .title, .shoot-day .foot { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; }
.shoot-day .title b { font-weight: 600; }
.count, .shoot-day .foot { color: var(--fg-muted); }
.count i { font-style: normal; font-variant-numeric: tabular-nums; }
.shoot-day .bar { height: 0.5cqw; border-radius: 99px; background: var(--overlay); overflow: hidden; }
.shoot-day .bar span { display: block; height: 100%; width: calc(var(--done, 0) * 100%); background: linear-gradient(90deg, var(--pending), var(--accent)); border-radius: inherit; }
.hero.done .shoot-day .bar span { background: var(--verified); }
.safe { display: inline-flex; align-items: center; gap: 0.8cqw; color: var(--verified); font-weight: 650; border-radius: 99px;
  padding: 0.5cqw 1.6cqw; background: color-mix(in oklab, var(--verified) 14%, transparent); opacity: 0; transform: scale(0.85);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.safe svg { width: 2.3cqw; height: 2.3cqw; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.proof { color: var(--fg-subtle); font-size: 1.85cqw; opacity: 0; transition: opacity 0.6s var(--ease) 0.2s; }
.hero.done .safe { opacity: 1; transform: none; }
.hero.done .proof { opacity: 1; }

/* ------------------------------------------------------------- sections -- */
/* As Frame.io's sections meet, and nothing is pinned: the page always scrolls at
   the reader's pace. Only two sections do it, Footage and Munshi; on every
   section it would be a trick. A raised section (.card), rounded where it meets
   another, rides up over the bottom of the one above, faster than the page; the
   black section after it (.revealed) starts tucked beneath it and settles into
   place slower than the page, uncovered as the card lifts away. site.js sets
   --lift (how far they overlap) and each section's --rise or --sink. The rest
   are plain sections on the page. */
main { position: relative; }
.panel { position: relative; padding: clamp(80px, 8vw, 200px) var(--inline); }
/* Room for the card that rides over this section's foot. */
.hero { padding-bottom: clamp(80px, 8vw, 200px); }
.panel:has(+ .card) { padding-bottom: calc(clamp(80px, 8vw, 200px) + var(--lift, 0px)); }
.hero, .revealed { z-index: 1; }
.revealed { background: var(--well); transform: translate3d(0, var(--sink, 0px), 0); }
.card {
  z-index: 2; margin-top: calc(-1 * var(--lift, 0px));
  background: var(--raised); border-radius: var(--radius);
  box-shadow: 0 -30px 80px rgb(0 0 0 / 0.55), 0 30px 80px rgb(0 0 0 / 0.55), inset 0 1px 0 color-mix(in oklab, var(--fg) 7%, transparent);
  transform: translate3d(0, var(--rise, 0px), 0); will-change: transform;
}
.inner { position: relative; display: grid; gap: clamp(32px, 4vw, 96px); }
.split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(32px, 5vw, 128px); }
.words { display: grid; gap: clamp(20px, 2vw, 40px); align-content: start; }
.words > p, .tile p, .pricing .fee-says { color: var(--fg-muted); max-width: 40ch; font-size: clamp(17px, 1vw, 26px); }
.words.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(20px, 5vw, 128px); }

/* Words rise into place as they are reached. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--delay, 0s); }
.reveal.seen { opacity: 1; transform: none; }

/* ---------------------------------------------------------- checkpoint -- */
.checkpoint { padding-bottom: clamp(56px, 5vw, 120px); }
.lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 128px); align-items: start; }
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 1.6vw, 32px) clamp(24px, 3vw, 64px); color: var(--fg-muted); font-size: clamp(16px, 0.95vw, 24px); }
.points li { border-top: 1px solid var(--line-strong); padding-top: 14px; }
.points b { color: var(--fg); font-weight: 600; display: block; margin-bottom: 4px; }

/* Clips stream past a line of light: to its right they arrive, as they cross
   it they are checked against the DIT's record. */
.flow { position: relative; width: 100vw; margin: clamp(48px, 5vw, 120px) 0 0 calc(50% - 50vw); padding-top: 32px; display: grid; gap: clamp(12px, 1vw, 22px); overflow: clip;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lane { display: flex; gap: clamp(12px, 1vw, 22px); width: max-content; will-change: transform; }
.flow .clip { position: relative; width: clamp(220px, 15vw, 420px); flex: none; background: var(--overlay); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: grid; gap: 8px; overflow: hidden;
  transition: border-color 0.4s var(--ease); }
.flow .clip img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; width: 100%; background: var(--well); filter: saturate(0.35) brightness(0.6); transition: filter 0.6s var(--ease); }
.flow .clip > div { display: flex; justify-content: space-between; gap: 8px; font: 400 clamp(11px, 0.62vw, 15px)/1.3 "Plex Mono", ui-monospace, monospace; color: var(--fg-muted); padding: 0 2px 2px; }
.flow .clip .file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow .clip .state { white-space: nowrap; color: var(--pending); }
.flow .clip .state::before { content: "Arriving"; }
.flow .clip .fill { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--got, 0) * 100%); background: var(--pending); }
.flow .clip.checked { border-color: color-mix(in oklab, var(--verified) 35%, var(--line)); }
.flow .clip.checked img { filter: none; }
.flow .clip.checked .state { color: var(--verified); }
.flow .clip.checked .state::before { content: "Checked"; }
.flow .clip.checked .fill { width: 100%; background: var(--verified); }
.gate { position: absolute; z-index: 2; top: 28px; bottom: 0; left: 50%; width: 2px; background: linear-gradient(180deg, var(--accent), var(--accent) 88%, transparent);
  box-shadow: 0 0 24px 4px color-mix(in oklab, var(--accent) 45%, transparent); }
.gate span { position: absolute; top: -8px; left: 50%; translate: -50% -100%; white-space: nowrap; font: 500 clamp(11px, 0.62vw, 15px)/1 "Plex Mono", ui-monospace, monospace; color: var(--accent); letter-spacing: 0.04em; }

/* --------------------------------------------------------------- watching -- */
/* The real player, as photographed: a screen is a picture of the product, never a drawing of one. Given more of
   the row than words beside a drawing were, so the director's note on it can be read. */
@media (min-width: 1101px) { #watching .split { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.shot img { width: 100%; border-radius: 14px; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgb(0 0 0 / 0.6); }

/* ------------------------------------------------------------- pieces -- */
/* A part of the app drawn large over its own screen, so what is too small to read in the photograph is read:
   a check, tagged words, strips, calls. Built from the app's own colours (theme.css), each meaning in the
   app what it means here — green is safe, red clashes, amber asks — never decoration. */
:root {
  --failed: #f2555a; --unverified: #d8952a;
  --strip-int-day: #c9cfcc; --strip-ext-day: #c9a94a; --strip-int-night: #4f78b0; --strip-ext-night: #4f9a6a;
  /* a tagged word's letters on the paper, as the app draws them */
  --on-paper-cast: #6b3fb8; --on-paper-junior: #8a4b12; --on-paper-props: #c0561a; --on-paper-costume: #a8326e; --on-paper-vehicles: #00838f;
}
.eyebrow, .words > p.eyebrow { font: 500 clamp(12px, 0.62vw, 15px)/1 "Plex Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.words.two > .eyebrow { grid-column: 1 / -1; margin-bottom: calc(-1 * clamp(20px, 5vw, 128px) + 12px); }
.shot.has-piece { position: relative; container-type: inline-size; }
.piece { position: absolute; z-index: 1; bottom: -6cqw; right: -5cqw; width: 46cqw; font-size: max(12px, 1.9cqw); line-height: 1.4;
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: 14px; padding: 2.2cqw; display: grid; gap: 1.6cqw;
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(0 0 0 / 0.4); }
.flip .piece { right: auto; left: -5cqw; }
.piece .head { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; color: var(--fg-muted); font-size: 0.85em; }
.piece .head b { color: var(--fg); font-weight: 600; }
.piece svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill { display: inline-flex; align-items: center; gap: 0.4em; border-radius: 99px; padding: 0.2em 0.65em; font-size: 0.82em; font-weight: 700; white-space: nowrap; }
.pill.verified { color: var(--verified); background: color-mix(in oklab, var(--verified) 13%, transparent); }
.pill.pending { color: var(--pending); background: color-mix(in oklab, var(--pending) 13%, transparent); }
.pill.unverified { color: var(--unverified); background: color-mix(in oklab, var(--unverified) 15%, transparent); }
.pill.failed { color: var(--failed); background: color-mix(in oklab, var(--failed) 14%, transparent); }
.pill.neutral { color: var(--fg-muted); background: var(--overlay); }

/* A piece acts out its one step once its screen is reached, as the app would do it: it rises over the screen,
   then what appears appears ([data-at]) and what changes changes in place ([data-mark]), in order (site.js). */
.piece.acts { opacity: 0; translate: 0 40px; transition: opacity 0.8s var(--ease), translate 0.8s var(--ease); }
.piece.acts.in { opacity: 1; translate: 0 0; }
.piece [data-at], .piece [data-mark] { transition: opacity 0.5s var(--ease), translate 0.5s var(--ease), color 0.4s var(--ease), background-color 0.4s var(--ease), box-shadow 0.5s var(--ease), text-decoration-color 0.5s var(--ease); }
.piece.acts [data-at]:not(.on) { opacity: 0; translate: 0 10px; }
.piece.acts .page b[data-mark]:not(.on) { color: inherit; font-weight: 400; }
.piece.acts .doubt[data-mark]:not(.on) { text-decoration-color: transparent; }
.piece.acts .choices span[data-mark]:not(.on) { background: transparent; color: var(--fg-muted); font-weight: 400; }
.piece.acts .strip.clashes[data-mark]:not(.on) { box-shadow: none; }
/* drag: in from the side and settled with a little give, as a strip let go on its day */
.piece.acts[data-motion=drag] [data-at] { transition: opacity 0.35s var(--ease), translate 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
.piece.acts[data-motion=drag] [data-at]:not(.on) { translate: -80px 0; }
/* the pointer, and what it presses */
.pointer { position: absolute; left: 0; top: 0; z-index: 3; width: 22px; height: 22px; opacity: 0; translate: 60% 120%; pointer-events: none;
  transition: translate 0.7s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.4s var(--ease), scale 0.15s var(--ease); filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.6)); }
.pointer svg { width: 100%; height: 100%; fill: var(--fg); stroke: var(--base); stroke-width: 1.4; }
.pointer.shown { opacity: 1; }
.pointer.press { scale: 0.82; }
/* read: Munshi's light going down the page */
.piece .page { position: relative; }
.reading { position: absolute; left: -6px; right: -6px; top: -2px; height: 3px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), var(--munshi-glint), var(--accent), transparent); box-shadow: 0 0 14px 2px color-mix(in oklab, var(--accent) 55%, transparent); }
/* tilt: a page's first screen lies back, and is flat once it is reached */
[data-motion=tilt] { perspective: 1600px; }
[data-motion=tilt] img { transform-origin: 50% 0; transform: rotateX(calc((1 - var(--flat, 1)) * 24deg)) scale(calc(0.9 + var(--flat, 1) * 0.1)); will-change: transform; }
/* light: a list's lines dim until they pass the middle of the window */
[data-motion=light] > * { transition: opacity 0.6s var(--ease), border-color 0.6s var(--ease); }
[data-motion=light] > :not(.lit) { opacity: 0.28; }
[data-motion=light] > .lit { border-top-color: var(--accent); }

/* the script's check: its words dashed in amber on the paper, the card asking */
.piece .page { background: var(--paper); color: var(--ink); border-radius: 6px; padding: 1.4cqw 1.8cqw; font: 400 0.9em/1.6 "Courier Prime", "Courier New", Courier, monospace; }
.piece .page .doubt { text-decoration: underline dashed var(--unverified) 2px; text-underline-offset: 3px; }
.piece .ask { font-weight: 600; }
.choices { display: grid; grid-template-columns: 1fr 1fr; background: var(--overlay); border-radius: 8px; padding: 3px; font-size: 0.9em; }
.choices span { text-align: center; padding: 0.35em; border-radius: 6px; color: var(--fg-muted); }
.choices .chosen { background: var(--accent); color: var(--accent-on); font-weight: 600; }
.piece .done { justify-self: end; background: var(--accent); color: var(--accent-on); font-weight: 600; font-size: 0.9em; border-radius: 99px; padding: 0.3em 1em; }

/* tagged words: bold letters in their department's colour, and the list they make */
.page b.cast { color: var(--on-paper-cast); } .page b.junior { color: var(--on-paper-junior); } .page b.props { color: var(--on-paper-props); }
.page b.costume { color: var(--on-paper-costume); } .page b.vehicles { color: var(--on-paper-vehicles); }
.needs { display: grid; gap: 0.5cqw; }
.needs li { display: grid; grid-template-columns: 7.5em 1fr; gap: 1cqw; align-items: baseline; color: var(--fg-muted); font-size: 0.9em; }
.needs li span { display: inline-flex; align-items: center; gap: 0.45em; color: var(--fg); }
.needs li span::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 3px; background: var(--c); }

/* strips: the stripboard's own colours on the edge, a clash said in red */
.strips { display: grid; gap: 4px; }
.strip { display: grid; grid-template-columns: 1.6em 2.4em 3.4em minmax(0, 1fr) auto; gap: 0.6em; align-items: center; background: var(--overlay); border-radius: 6px;
  padding: 0.45em 0.7em 0.45em 0.9em; border-left: 5px solid var(--c); font-variant-numeric: tabular-nums; }
.strip > span:not(.set) { color: var(--fg-muted); font-size: 0.85em; }
.strip .set { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip small { color: var(--fg-muted); font-size: 0.85em; }
.strip.clashes { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--failed) 55%, transparent); }
.day-foot { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; color: var(--fg-muted); font-size: 0.85em; }

/* calls: who has confirmed, from their phone */
.calls { display: grid; }
.calls li { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; padding: 0.55em 0; border-top: 1px solid var(--line); }
.calls li:first-child { border-top: 0; }
.calls li b { font-weight: 600; }
.calls li small { display: block; color: var(--fg-muted); font-size: 0.85em; }

/* -------------------------------------------------------------- budget -- */
/* The story: the screen stays while the words go by; the step in the middle of the window lights its part. */
.story-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: clamp(32px, 5vw, 128px); }
.story-screen { position: sticky; top: max(80px, calc(50vh - 18vw)); }
.frame { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: clip; border: 1px solid var(--line-strong); background: var(--base); box-shadow: 0 30px 80px rgb(0 0 0 / 0.6); }
.stage { position: absolute; inset: 0; transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(var(--z, 1)); transition: transform 1.1s var(--ease), transform-origin 1.1s var(--ease); }
.stage img { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transition: opacity 0.6s var(--ease); }
.stage img.on { opacity: 1; }
.spot { position: absolute; left: var(--x, 0%); top: var(--y, 0%); width: var(--w, 100%); height: var(--h, 100%); border: 2px solid var(--accent); border-radius: 6px;
  box-shadow: 0 0 0 200vmax rgb(0 0 0 / 0.55), 0 0 18px color-mix(in oklab, var(--accent) 45%, transparent);
  transition: left 0.9s var(--ease), top 0.9s var(--ease), width 0.9s var(--ease), height 0.9s var(--ease); pointer-events: none; }
.story-steps { display: grid; padding-bottom: 20vh; }
.story-steps li { min-height: 72vh; display: grid; align-content: center; gap: clamp(16px, 1.4vw, 28px); opacity: 0.25; transition: opacity 0.6s var(--ease); }
.story-steps li:first-child { min-height: 60vh; }
.story-steps li.on { opacity: 1; }
.story-steps p:not(.eyebrow) { color: var(--fg-muted); max-width: 40ch; font-size: clamp(17px, 1vw, 26px); }
/* The meter: each figure's digits roll into place, as a meter's do. */
.meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 64px); margin: 0; }
.meter dt { color: var(--fg-muted); font-size: clamp(14px, 0.8vw, 19px); margin-bottom: 8px; }
.meter dd { margin: 0; font-weight: 750; letter-spacing: -0.03em; font-size: clamp(30px, 3.6vw, 92px); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter .moved dd { color: var(--unverified); }
.meter .col { display: inline-block; height: 1em; overflow: clip; vertical-align: top; }
.meter .reel { display: flex; flex-direction: column; transition: translate 1.8s cubic-bezier(0.2, 0.7, 0.1, 1); transition-delay: var(--d, 0s); }
.meter .reel span { height: 1em; }

/* --------------------------------------------------------------- shoot -- */
/* The ledger: a day's files beside the DIT's record; each is checking until it crosses the line in the middle of
   the window, and then says how it ended. */
.ledger { position: relative; margin-top: clamp(40px, 4vw, 96px); background: var(--raised); border: 1px solid var(--line-strong); border-radius: 16px; padding: clamp(12px, 1.4vw, 28px);
  font-size: clamp(13px, 0.8vw, 19px); }
.ledger-head, .ledger li { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) 10em; gap: 1.2em; align-items: center; padding: 0.85em 0.6em; }
.ledger-head { color: var(--fg-subtle); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0; }
.ledger li { border-top: 1px solid var(--line); transition: background-color 0.5s var(--ease); }
.ledger .file { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger .sum { font: 400 0.9em/1.3 "Plex Mono", ui-monospace, monospace; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger .pill { justify-self: start; grid-column: 4; grid-row: 1; transition: opacity 0.4s var(--ease), scale 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.ledger .pill svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ledger .ended { opacity: 0; scale: 0.6; }
.ledger li.done .ended { opacity: 1; scale: 1; }
.ledger li.done .checking { opacity: 0; }
.ledger li.done[data-ends=failed] { background: color-mix(in oklab, var(--failed) 7%, transparent); }
.ledger li.done[data-ends=failed] .sum:nth-of-type(3) { color: var(--failed); }
.ledger-line { position: absolute; left: -12px; right: -12px; top: 0; height: 2px; translate: 0 var(--at, -999px); pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 10%, var(--accent) 90%, transparent); box-shadow: 0 0 22px 3px color-mix(in oklab, var(--accent) 40%, transparent); }

/* The night: pinned while its scroll passes; the footage opens from a frame to the whole width and darkens, the
   words rise over it, and the day's bar fills (--open, --fill: 0 to 1, from site.js). */
.night { position: relative; height: 260vh; background: var(--well); }
.night-pin { position: sticky; top: 0; height: 100vh; overflow: clip; display: grid; place-items: end start; }
.night-picture { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--open, 0)) * 14%) calc((1 - var(--open, 0)) * 18%) round calc((1 - var(--open, 0)) * 28px)); }
.night-picture video { width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(1 - var(--open, 0) * 0.5)); }
.night-picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / 0.75), transparent 60%); opacity: var(--open, 0); }
.night-words { position: relative; z-index: 1; padding: 0 var(--inline) clamp(150px, 16vh, 220px); display: grid; gap: clamp(16px, 1.4vw, 28px);
  opacity: clamp(0, calc(var(--open, 0) * 3 - 1.8), 1); translate: 0 calc((1 - clamp(0, calc(var(--open, 0) * 3 - 1.8), 1)) * 40px); }
.night-words h2 { max-width: 16ch; color: #fff; }
.night-words p { max-width: 44ch; color: rgb(255 255 255 / 0.78); font-size: clamp(17px, 1vw, 26px); }
.night-day { position: absolute; z-index: 1; right: var(--inline); bottom: clamp(40px, 6vh, 80px); width: min(420px, calc(100% - 2 * var(--inline))); display: grid; gap: 10px;
  background: color-mix(in oklab, var(--raised) 88%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--line-strong); border-radius: 14px; padding: 16px; font-size: 15px;
  opacity: clamp(0, calc(var(--open, 0) * 4 - 3), 1); }
.night-day .title, .night-day .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.night-day .title b { font-weight: 600; margin-right: auto; }
.night-day .foot { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.night-day .foot b { color: var(--fg); font-weight: 600; }
.night-day .bar { height: 5px; border-radius: 99px; background: var(--overlay); overflow: hidden; }
.night-day .bar span { display: block; height: 100%; width: calc(var(--fill, 0) * 100%); border-radius: inherit; background: var(--pending); transition: background-color 0.4s var(--ease); }
.night-day .pill svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.night-day .now-safe, .night-day.in .now-arriving { display: none; }
.night-day.in .now-safe { display: inline-flex; }
.night-day.in .bar span { background: var(--verified); }

/* --------------------------------------------------------------- watch -- */
/* The screening: pinned while its scroll passes; the room darkens and the player grows from a frame to the whole
   width (--dim: 0 to 1, from site.js). Its notes come up as the daily's play reaches their frames. */
:root { --pen-red: #ef5b4c; --pen-blue: #4cc9f0; --note-range: #e6c75a; }
.screening { position: relative; height: 230vh; background: var(--well); }
.screening-pin { position: sticky; top: 0; height: 100vh; overflow: clip; display: grid; place-items: center; align-content: center; gap: 24px; padding: 64px var(--gutter) 24px;
  background: radial-gradient(ellipse at 50% 45%, color-mix(in oklab, var(--accent) calc((1 - var(--dim, 0)) * 10%), transparent), transparent 70%); }
.screening-words { font-weight: 750; letter-spacing: -0.035em; font-size: clamp(28px, 2.6vw, 60px); line-height: 1.05; text-align: center; opacity: calc(1 - var(--dim, 0) * 1.4); }
.player { width: calc(58% + var(--dim, 0) * 42%); max-width: calc(100vh * 1.55); background: #000; border: 1px solid var(--line-strong); border-radius: calc(16px - var(--dim, 0) * 10px); overflow: clip;
  box-shadow: 0 40px 120px rgb(0 0 0 / 0.7); }
.player .picture { position: relative; aspect-ratio: 16 / 9; }
.player video { width: 100%; height: 100%; object-fit: cover; }
.watermark { position: absolute; right: 3%; top: 4%; font: 400 clamp(10px, 0.8vw, 16px)/1 "Plex Mono", ui-monospace, monospace; letter-spacing: 0.18em; color: rgb(255 255 255 / 0.32); }
.drawn { position: absolute; inset: 0; width: 100%; height: 100%; }
.drawn [data-note] { fill: none; stroke: var(--pen-red); stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s var(--ease); }
.drawn [data-note].on { stroke-dashoffset: 0; }
.drawn [data-note="1"] { stroke: var(--pen-blue); }
.drawn path { stroke-width: 0.6; opacity: 0; transition: stroke-dashoffset 1.2s var(--ease), opacity 0.3s var(--ease); }
.drawn path.on { opacity: 1; }
.note { position: absolute; left: 3%; bottom: 5%; width: min(380px, 46%); background: color-mix(in oklab, var(--raised) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; font-size: clamp(12px, 0.8vw, 16px); line-height: 1.4; opacity: 0; translate: 0 14px; transition: opacity 0.4s var(--ease), translate 0.5s var(--ease); }
.note.on { opacity: 1; translate: 0 0; }
.note b { font-weight: 600; }
.note .at { justify-self: start; font: 400 0.85em/1.4 "Plex Mono", ui-monospace, monospace; color: var(--note-range); background: color-mix(in oklab, var(--note-range) 15%, transparent); border-radius: 4px; padding: 1px 6px; }
.note .who { color: var(--accent); }
.note .reply { border-left: 2px solid var(--line-strong); padding-left: 10px; color: var(--fg-muted); }
.note .reply b { color: var(--fg); margin-right: 6px; }
.controls { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--base); color: var(--fg-muted); }
.controls .ctl { display: grid; place-items: center; }
.controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.timeline { position: relative; flex: 1; height: 4px; border-radius: 99px; background: var(--overlay); }
.timeline .range { position: absolute; top: -6px; height: 3px; border-radius: 99px; background: var(--note-range); left: var(--from, 0%); width: var(--long, 0%); }
.timeline .range::before { content: ""; position: absolute; left: -3px; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--note-range); }
.timeline .head { position: absolute; top: -5px; left: var(--at, 0%); width: 2px; height: 14px; background: var(--fg); border-radius: 2px; }
.timeline::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--at, 0%); background: var(--accent); border-radius: inherit; }
.timecode { font: 500 14px/1 "Plex Mono", ui-monospace, monospace; color: var(--fg); font-variant-numeric: tabular-nums; }

/* The record: lines come in at the top and push the rest down, the count going up with them. */
.record { background: var(--raised); border: 1px solid var(--line-strong); border-radius: 16px; padding: clamp(14px, 1.4vw, 28px); font-size: clamp(13px, 0.8vw, 18px); overflow: clip; }
.record-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--fg-muted); }
.record-top .pill svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.record-top .count b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.record ol { display: grid; }
.record li { display: grid; grid-template-columns: 8.5em 7.5em minmax(0, 1fr); gap: 1em; padding: 0.75em 0.4em; border-top: 1px solid var(--line); }
.record li span:first-child { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.record li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record li.new { animation: line-in 0.7s var(--ease); background: color-mix(in oklab, var(--accent) 8%, transparent); transition: background-color 2s var(--ease); }
.record li.new.settled { background: transparent; }
@keyframes line-in { from { opacity: 0; translate: 0 -100%; } }

/* ---------------------------------------------------------------- edit -- */
/* The desktop: the menu drops from the app's mark, the drive comes up on the desktop, and its window opens out of
   it, the days unfolding to cards and clips (site.js adds .menu-open, .mounted, .open, and .on to each row). */
.desk { position: relative; aspect-ratio: 16 / 11; border-radius: 14px; overflow: clip; border: 1px solid var(--line-strong); font-size: clamp(11px, 0.72vw, 16px);
  background: radial-gradient(ellipse at 30% 20%, #1d3b3a, transparent 60%), radial-gradient(ellipse at 80% 90%, #2b2240, transparent 55%), #0e1418; box-shadow: 0 30px 80px rgb(0 0 0 / 0.6); }
.menubar { display: flex; align-items: center; gap: 1.4em; height: 2em; padding: 0 1em; background: rgb(20 24 26 / 0.85); backdrop-filter: blur(10px); color: var(--fg); }
.menubar b { font-weight: 700; }
.menubar .apple { width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--fg-muted); }
.tray { margin-left: auto; display: flex; align-items: center; gap: 1em; }
.tray-mark { width: 1.2em; height: auto; padding: 2px; border-radius: 4px; transition: background-color 0.3s var(--ease); }
.desk.menu-open .tray-mark { background: rgb(255 255 255 / 0.18); }
.menu { position: absolute; z-index: 3; right: 3.6em; top: 2.2em; width: 15em; padding: 0.5em; border-radius: 9px; background: rgb(32 38 40 / 0.94); backdrop-filter: blur(16px); border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.5); opacity: 0; translate: 0 -6px; transition: opacity 0.25s var(--ease), translate 0.25s var(--ease); pointer-events: none; }
.desk.menu-open .menu { opacity: 1; translate: 0 0; }
.menu p { padding: 0.35em 0.6em; border-radius: 5px; display: flex; align-items: center; gap: 0.6em; }
.menu-film { font-weight: 700; }
.menu-item { background: var(--accent); color: var(--accent-on); }
.menu-dim { color: var(--fg-subtle); font-size: 0.9em; }
.desk svg { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.disk { position: absolute; right: 2.2em; top: 4.6em; display: grid; justify-items: center; gap: 0.3em; color: var(--fg); text-shadow: 0 1px 3px #000;
  opacity: 0; scale: 0.4; transition: opacity 0.3s var(--ease), scale 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
.disk svg { width: 3.4em; height: 3.4em; stroke-width: 1.3; color: #d6dcdb; }
.desk.mounted .disk { opacity: 1; scale: 1; }
.finder { position: absolute; left: 6%; top: 12%; width: 74%; height: 80%; border-radius: 10px; overflow: clip; background: rgb(24 28 30 / 0.96); border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.6); transform-origin: 92% 4%; scale: 0.05; opacity: 0; transition: scale 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s var(--ease); }
.desk.open .finder { scale: 1; opacity: 1; }
.finder-bar { display: flex; align-items: center; gap: 0.45em; padding: 0.7em 0.9em; border-bottom: 1px solid var(--line); }
.finder-bar i { width: 0.8em; height: 0.8em; border-radius: 50%; background: #ef5b4c; }
.finder-bar i:nth-child(2) { background: #e6c75a; } .finder-bar i:nth-child(3) { background: #3fb950; }
.finder-bar b { margin: 0 auto; font-weight: 600; padding-right: 3em; }
.tree { padding: 0.4em 0; }
.tree li { display: grid; grid-template-columns: 1em 1.4em minmax(0, 1fr) auto; align-items: center; gap: 0.35em; padding: 0.32em 1em 0.32em calc(1em + var(--depth) * 1.5em);
  overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.35s var(--ease), opacity 0.35s var(--ease); }
.tree li.on { max-height: 2.4em; opacity: 1; }
.tree li:nth-child(odd).on { background: rgb(255 255 255 / 0.025); }
.tree .tw { width: 0.8em; height: 0.8em; color: var(--fg-muted); transition: rotate 0.3s var(--ease); }
.tree li.opens.turned .tw { rotate: 90deg; }
.tree li svg:not(.tw) { color: #7fb7e8; }
.tree li:has(.sz:not(:empty)) svg:not(.tw) { color: var(--fg-muted); }
.tree .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree .sz { color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* Cut off: pinned while a clock goes round with the scroll; at the end the drive is greyed and not available. */
.cutoff { position: relative; height: 200vh; }
.cutoff-pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 5vw, 128px); padding: 0 var(--inline); }
.clockface { position: relative; aspect-ratio: 1; width: min(100%, 60vh); justify-self: center; display: grid; place-items: center; }
.clockface svg { position: absolute; inset: 0; rotate: -90deg; }
.clockface circle { fill: none; stroke-width: 3; }
.clockface .ring { stroke: var(--line-strong); }
.clockface .sweep { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--gone, 0) * 100); filter: drop-shadow(0 0 8px color-mix(in oklab, var(--accent) 60%, transparent)); }
.cutoff.over .sweep { stroke: var(--failed); filter: drop-shadow(0 0 8px color-mix(in oklab, var(--failed) 60%, transparent)); }
.clockface .left { font-weight: 750; letter-spacing: -0.04em; font-size: clamp(48px, 7vw, 160px); font-variant-numeric: tabular-nums; }
.cutoff-words { display: grid; gap: clamp(16px, 1.4vw, 28px); }
.cutoff-words p { color: var(--fg-muted); max-width: 40ch; font-size: clamp(17px, 1vw, 26px); }
.gone { justify-self: start; display: grid; grid-template-columns: auto auto; column-gap: 14px; align-items: center; padding: 14px 18px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line-strong); transition: opacity 0.6s var(--ease), filter 0.6s var(--ease); }
.gone svg { grid-row: span 2; width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gone span { font-weight: 600; }
.gone em { font-style: normal; color: var(--failed); font-size: 0.9em; opacity: 0; transition: opacity 0.4s var(--ease); }
.cutoff.over .gone svg, .cutoff.over .gone span { opacity: 0.45; }
.cutoff.over .gone em { opacity: 1; }

/* The cut: two tracks wider than the page, slid along by the scroll (--slide), the notes dropping on as markers. */
.cut { overflow: clip; margin: clamp(32px, 4vw, 80px) 0; }
.tracks { position: relative; width: 190vw; padding-top: 74px; translate: calc(var(--slide, 0) * -90vw) 0; display: grid; gap: 6px; }
.track { display: flex; gap: 3px; }
.track i { flex: calc(var(--w, 10)) 1 0; font: 500 clamp(11px, 0.6vw, 14px)/1 "Plex Mono", ui-monospace, monospace; font-style: normal; padding: 0.9em 0.8em; border-radius: 5px; overflow: hidden; white-space: nowrap; }
.track.v i { background: color-mix(in oklab, #4f78b0 45%, var(--raised)); border: 1px solid color-mix(in oklab, #4f78b0 70%, transparent); color: #dfe8f5; height: 54px; }
.track.a i { background: color-mix(in oklab, #4f9a6a 35%, var(--raised)); border: 1px solid color-mix(in oklab, #4f9a6a 60%, transparent); color: #d5ecdc;
  background-image: repeating-linear-gradient(90deg, transparent 0 3px, rgb(255 255 255 / 0.12) 3px 4px); }
.flags span { position: absolute; top: 0; left: calc(var(--x) * 1%); display: grid; gap: 2px; padding: 6px 10px; border-radius: 6px; font-size: clamp(12px, 0.7vw, 15px); white-space: nowrap;
  background: color-mix(in oklab, var(--note-range) 18%, var(--raised)); border: 1px solid color-mix(in oklab, var(--note-range) 60%, transparent); color: var(--fg);
  opacity: 0; translate: 0 -24px; transition: opacity 0.4s var(--ease), translate 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
.flags span b { color: var(--note-range); font-weight: 600; font-size: 0.85em; }
.flags span::after { content: ""; position: absolute; left: 10px; top: 100%; width: 2px; height: 160px; background: var(--note-range); opacity: 0.8; }
.flags span.on { opacity: 1; translate: 0 0; }
.tile.wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.tile.wide .tile-words { margin-top: 0; padding-top: clamp(20px, 2.4vw, 56px); }

/* ---------------------------------------------------------------- keep -- */
/* Quiet on purpose: what moves here is slow, and what matters is what does not move. */
.locked-head { display: grid; gap: clamp(16px, 1.4vw, 28px); justify-items: start; }
.lock { width: clamp(40px, 3vw, 64px); height: auto; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.lock .shackle { translate: 0 -3.5px; transition: translate 0.9s cubic-bezier(0.5, 0, 0.2, 1) 0.4s; }
.lock.shut .shackle { translate: 0 0; }
.lock circle { fill: var(--accent); stroke: none; opacity: 0; transition: opacity 0.4s var(--ease) 1.3s; }
.lock.shut circle { opacity: 1; }

/* The years: pinned while the scroll passes; the date counts on, the file stays as it was. */
.years { position: relative; height: 240vh; }
.years-pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto 1fr; align-items: center;
  column-gap: clamp(32px, 5vw, 128px); padding: 96px var(--inline) 48px; }
.years-say { grid-column: 1 / -1; font-size: clamp(28px, 2.6vw, 60px); color: var(--fg-muted); }
.years-date { display: grid; line-height: 0.9; }
.years-date .day { font-weight: 600; font-size: clamp(22px, 2vw, 44px); color: var(--fg-muted); }
.years-date .year { font-weight: 750; letter-spacing: -0.05em; font-size: clamp(110px, 15vw, 360px); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--fg) 20%, color-mix(in oklab, var(--fg) 12%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.years-date .since { color: var(--accent); font: 500 clamp(13px, 0.8vw, 18px)/1.4 "Plex Mono", ui-monospace, monospace; letter-spacing: 0.04em; margin-top: 18px; }
.years-date.turn .year { animation: turn 0.6s var(--ease); }
@keyframes turn { from { opacity: 0.2; translate: 0 18px; } }
.kept-file { display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgb(0 0 0 / 0.55); font-size: clamp(14px, 0.85vw, 18px); }
.kept-file img { border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.kept-file > div { display: grid; gap: 2px; }
.kept-file > div span { color: var(--fg-muted); }
.kept-file b { font-weight: 600; }
.kept-file dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; }
.kept-file dt { color: var(--fg-muted); }
.kept-file dd { margin: 0; font-family: "Plex Mono", ui-monospace, monospace; }
.kept-file .pill { justify-self: start; }
.kept-file .pill svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The printer: the sheet comes out of the slot, a line at a time. */
.printer { position: relative; padding-top: 18px; }
.slot { position: relative; z-index: 2; height: 46px; border-radius: 12px; background: var(--overlay); border: 1px solid var(--line-strong); display: flex; align-items: center; padding: 0 16px; color: var(--fg-muted); font-size: 14px;
  box-shadow: inset 0 -8px 12px rgb(0 0 0 / 0.5); }
.slot span { display: flex; align-items: center; gap: 8px; }
.slot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sheet { position: relative; z-index: 1; margin: -8px 16px 0; background: var(--paper); color: var(--ink); border-radius: 0 0 6px 6px; padding: 20px 18px 16px;
  font: 400 clamp(11px, 0.68vw, 14px)/1.5 "Plex Mono", ui-monospace, monospace; box-shadow: 0 20px 40px rgb(0 0 0 / 0.45); overflow: clip; }
.sheet-head { font-weight: 600; margin-bottom: 10px; }
.sheet li { display: grid; grid-template-columns: minmax(0, 2.6fr) 1fr 1.3fr 1fr; gap: 10px; padding: 4px 0; border-top: 1px dashed rgb(0 0 0 / 0.18); white-space: nowrap; }
.sheet li span { overflow: hidden; text-overflow: ellipsis; }
.printer.printing .sheet li { max-height: 0; padding: 0; border-width: 0; opacity: 0; transition: max-height 0.5s steps(4), padding 0.5s steps(4), opacity 0.2s; }
.printer.printing .sheet li.on { max-height: 2em; padding: 4px 0; border-width: 1px; opacity: 1; }

/* ------------------------------------------------------- edit and kept -- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 40px); }
.tile { position: relative; border-radius: 18px; overflow: clip; background: var(--overlay); border: 1px solid var(--line); display: grid; align-content: start; }
.tile-picture { position: relative; aspect-ratio: 16 / 8; overflow: clip; }
.tile-picture video { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; transform: translateY(calc(var(--pan, 0) * 8%)); }
/* Reaches past the frame's foot: the footage moves by fractions of a pixel, and a
   shade that stops at the edge lets a line of it show. */
.tile-picture::after { content: ""; position: absolute; inset: 0 0 -2px; background: linear-gradient(180deg, transparent 40%, var(--overlay) 94%); }
.tile-words { display: grid; gap: clamp(14px, 1.2vw, 24px); padding: clamp(20px, 2.4vw, 56px); padding-top: 0; margin-top: -2em; position: relative; }
.tile h3 { font-size: clamp(28px, 2.4vw, 60px); line-height: 1.02; }
.section-head { max-width: 22ch; }
/* What is planned and not built is shown as that, never as ready [F] 2026-10-28. */
.coming { display: inline-flex; align-items: center; font: 500 clamp(11px, 0.6vw, 14px)/1 "Plex Mono", ui-monospace, monospace; font-style: normal;
  letter-spacing: 0.04em; color: var(--pending); padding: 0.45em 0.8em; border-radius: 99px; border: 1px solid color-mix(in oklab, var(--pending) 45%, transparent);
  background: color-mix(in oklab, var(--pending) 10%, transparent); white-space: nowrap; }
.coming.on-picture { position: absolute; z-index: 1; left: 16px; top: 16px; background: color-mix(in oklab, var(--base) 70%, transparent); }
.soon { display: flex; align-items: center; gap: 12px; font-size: clamp(14px, 0.8vw, 19px); }

/* ------------------------------------------------------ before the shoot -- */
.screens { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 28px); perspective: 1800px; }
/* The board and the phone each stand two rows high, the script and its breakdown stacked between them, and the call
   sheet the whole width beneath. */
.screens .board { grid-row: span 2; }
.screens .phone { grid-column: 3; grid-row: 1 / span 2; }
.screens .wide { grid-column: 1 / -1; }
.screens .wide img { aspect-ratio: 32 / 9; object-fit: cover; object-position: top left; }
/* The phone cut to its call: the sheet below it is the call sheet beside it. */
.screens .phone img { aspect-ratio: 1170 / 1430; object-fit: cover; object-position: top; border-radius: 22px; }
.screens figure { display: grid; gap: 10px; align-content: start; }
.screens img { border-radius: 10px; border: 1px solid var(--line-strong); width: 100%; box-shadow: 0 30px 60px rgb(0 0 0 / 0.5); }
.tilt { transform: rotateX(calc(var(--tilt, 0) * 22deg)) translateY(calc(var(--tilt, 0) * 60px)) scale(calc(1 - var(--tilt, 0) * 0.06)); transform-origin: 50% 100%;
  opacity: calc(1 - var(--tilt, 0) * 0.6); will-change: transform; }
.screens figcaption { color: var(--fg-muted); font-size: clamp(14px, 0.75vw, 18px); }
.screens figcaption b { color: var(--fg); font-weight: 600; }

/* ------------------------------------------------------------ the budget -- */
/* The picture first and given the larger share, as Watch's is, so its figures can be read. */
@media (min-width: 1101px) { #budget .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* --------------------------------------------------------------- kept -- */
/* The clip as one kept file: its picture, then its name and states, and a Delete that is never pressed — pointed at,
   it says why. */
.kept-picture { display: grid; gap: 0; border-radius: 16px; overflow: clip; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgb(0 0 0 / 0.6); }
.kept-picture video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.kept-bar { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: clamp(14px, 1.1vw, 22px) clamp(16px, 1.3vw, 26px); font-size: clamp(14px, 0.95vw, 20px); }
.kept-bar .pill { font-size: 0.9em; }
.page-shot .kept-bar { font-size: clamp(14px, 1.15vw, 24px); }
.kept-name { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.kept-name b { font-weight: 600; font-family: "Plex Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.kept-name span { color: var(--fg-muted); }
.kept-bar svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kept-delete { position: relative; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.35em 0.8em; border-radius: 8px; border: 1px solid var(--line); color: var(--fg-subtle); font-weight: 600; cursor: not-allowed; }
.kept-delete em { position: absolute; z-index: 1; right: 0; bottom: calc(100% + 10px); white-space: nowrap; font-style: normal; font-weight: 600; padding: 0.45em 0.8em; border-radius: 8px; background: var(--overlay); border: 1px solid var(--line-strong); color: var(--fg); opacity: 0; translate: 0 4px; pointer-events: none; transition: opacity 0.25s var(--ease), translate 0.25s var(--ease); }
.kept-delete:hover em { opacity: 1; translate: 0 0; }

/* ----------------------------------------------------------------- munshi -- */
/* The section wears Munshi's edge, as what asks him does in the app: his colours round its border, travelling
   while it is on screen (site.js), as they do while he works. */
@property --munshi-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes munshi-turn { to { --munshi-turn: 360deg; } }
.munshi-ring { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--munshi-turn), var(--accent), var(--accent-hover) 25%, var(--munshi-glint) 50%, var(--accent-hover) 75%, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.munshi.working .munshi-ring { animation: munshi-turn 6s linear infinite; }
@media (min-width: 1101px) { .munshi .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.who-he-is { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--accent); font-size: clamp(16px, 0.95vw, 24px); }
.who-he-is svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* What people ask him, set over the corner of his answer. */
.munshi .shot { position: relative; }
.asked { position: absolute; z-index: 1; left: -6%; bottom: 8%; display: grid; gap: 10px; justify-items: start; max-width: 70%; }
.asked li { font-size: clamp(13px, 0.75vw, 18px); color: var(--fg); padding: 0.7em 1.1em; border-radius: 14px 14px 14px 4px; background: var(--overlay);
  border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgb(0 0 0 / 0.55); }
.asked li:nth-child(2) { margin-left: 8%; } .asked li:nth-child(3) { margin-left: 3%; }
.points.one { grid-template-columns: minmax(0, 1fr); margin-top: clamp(8px, 1vw, 24px); }

/* -------------------------------------------------- munshi, at work -- */
/* The scene list as Breakdown draws it while he works: a strip's colour, the scene, how it stands; his pill on the
   one he is on, wearing his edge with the light along it (site.js walks it down). */
.worklist { display: grid; border-radius: 16px; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgb(0 0 0 / 0.55);
  font-size: clamp(13px, 0.8vw, 17px); overflow: clip; position: relative; }
.worklist-head { padding: 14px 18px 6px; color: var(--fg-subtle); font-weight: 600; font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; }
.worklist ol { display: grid; }
.worklist li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 7px 18px 7px 14px; border-left: 3px solid var(--strip);
  margin-left: 14px; transition: background 0.4s var(--ease); }
.worklist li + li { margin-top: 2px; }
.worklist .no { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.worklist .nm { display: grid; font-weight: 500; line-height: 1.25; }
.worklist .nm small { color: var(--fg-subtle); font-size: 0.82em; font-weight: 400; margin-top: 2px; }
.worklist .st { color: var(--fg-subtle); font-size: 0.86em; white-space: nowrap; }
.worklist li.worked .st { color: var(--fg-muted); }
.worklist li.next .st { color: var(--fg-muted); }
.worklist li.on { background: color-mix(in oklab, var(--accent) 7%, transparent); }
.worklist li.on .st { display: none; }
.worklist .pill-edge { grid-column: 2; justify-self: start; margin-top: 6px; }
.pill-edge { position: relative; display: inline-flex; align-items: center; gap: 0.35em; padding: 0.25em 0.75em; border-radius: 99px; background: var(--raised); font-weight: 650; font-size: 0.86em; white-space: nowrap; animation: pill-in 0.35s var(--ease); }
.pill-edge::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--munshi-turn), var(--accent), var(--accent-hover) 25%, var(--munshi-glint) 50%, var(--accent-hover) 75%, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: munshi-turn 2.4s linear infinite; }
.pill-edge { isolation: isolate; }
.pill-edge svg, .worklist-munshi svg, .ask-button svg, .worklist-bell svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pill-edge svg { color: var(--accent); }
@keyframes pill-in { from { opacity: 0; scale: 0.9; } }
.worklist-foot { display: grid; gap: 8px; padding: 12px 18px 16px; margin-top: 10px; border-top: 1px solid var(--line); color: var(--fg-subtle); font-size: 0.88em; font-variant-numeric: tabular-nums; }
.worklist-bar { height: 4px; border-radius: 99px; background: var(--line); }
.worklist-munshi { display: flex; align-items: flex-start; gap: 6px; color: var(--fg-muted); }
.worklist-munshi svg { color: var(--accent); margin-top: 0.15em; flex: none; }
.worklist.finished .worklist-munshi { visibility: hidden; }
/* The bell at the end: the draft is broken down. */
.worklist-bell { position: absolute; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 0.55em 0.9em; border-radius: 10px; background: var(--overlay);
  border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgb(0 0 0 / 0.5); font-weight: 600; font-size: 0.9em; opacity: 0; translate: 0 -8px; transition: opacity 0.5s var(--ease), translate 0.5s var(--ease); }
.worklist-bell svg { color: var(--accent); }
.worklist.finished .worklist-bell { opacity: 1; translate: 0 0; }

/* His panel, asked: the tabs, the talk, and the box at its foot, a question typed into it. */
.ask-panel .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.side { display: grid; grid-template-rows: auto 1fr auto; height: clamp(400px, 28vw, 540px); border-radius: 16px; background: var(--base); border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.55); font-size: clamp(14px, 0.85vw, 18px); overflow: clip; }
.side-tabs { display: flex; gap: 22px; padding: 14px 20px 0; border-bottom: 1px solid var(--line); }
.side-tabs span { padding-bottom: 10px; color: var(--fg-subtle); font-weight: 600; }
.side-tabs .on { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
.side-talk { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 20px; overflow: clip; }
.side-talk .q { align-self: flex-end; max-width: 80%; padding: 0.6em 0.95em; border-radius: 14px 14px 4px 14px; background: var(--overlay); border: 1px solid var(--line); animation: said 0.4s var(--ease); }
.side-talk ol { display: grid; gap: 3px; color: var(--fg-subtle); }
.side-talk ol li { animation: said 0.35s var(--ease); }
.side-talk ol li:last-child { color: var(--fg-muted); }
.side-talk .a { line-height: 1.55; animation: said 0.5s var(--ease); }
.side-talk .a b { color: var(--fg); font-weight: 650; }
@keyframes said { from { opacity: 0; translate: 0 10px; } }
.side-ask { display: grid; gap: 10px; padding: 14px; border-top: 1px solid var(--line); }
.typed { min-height: 4.2em; padding: 0.6em 0.8em; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--fg); }
.caret { display: inline-block; width: 1.5px; height: 1.1em; vertical-align: -0.2em; margin-left: 1px; background: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ask-button { position: relative; isolation: isolate; justify-self: end; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4em 1em; border-radius: 99px; background: var(--raised); font-weight: 650; transition: scale 0.15s; }
.ask-button::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--munshi-turn), var(--accent), var(--accent-hover) 25%, var(--munshi-glint) 50%, var(--accent-hover) 75%, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ask-button svg { color: var(--accent); }
.side.asking .ask-button::before { animation: munshi-turn 1.6s linear infinite; }
.ask-button.pressed { scale: 0.94; }

/* A plan, talked through: the scroll carries the conversation down the thread (site.js). */
.talk-plan { position: relative; height: 320vh; background: var(--well); }
.plan-pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
  gap: clamp(32px, 5vw, 128px); padding: 80px var(--inline) 40px; }
.plan-words { display: grid; gap: clamp(20px, 2vw, 40px); }
.plan-words p { color: var(--fg-muted); max-width: 40ch; font-size: clamp(17px, 1vw, 26px); }
.thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; font-size: clamp(14px, 0.9vw, 19px); }
.thread [data-at] { opacity: 0; translate: 0 16px; transition: opacity 0.45s var(--ease), translate 0.45s var(--ease); }
.thread [data-at].on { opacity: 1; translate: 0 0; }
.said { max-width: 86%; padding: 0.7em 1em; border-radius: 16px; }
.said.you { align-self: flex-end; background: var(--overlay); border: 1px solid var(--line); border-bottom-right-radius: 4px; }
.said.him { align-self: flex-start; background: var(--raised); border: 1px solid var(--line-strong); border-bottom-left-radius: 4px; display: grid; gap: 10px; }
.taps { display: flex; flex-wrap: wrap; gap: 8px; }
.taps span { padding: 0.35em 0.85em; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--fg-muted); font-size: 0.92em; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.taps span.chosen { background: color-mix(in oklab, var(--accent) 18%, transparent); border-color: var(--accent); color: var(--fg); }
.doing { color: var(--fg-subtle); padding-left: 4px; }
.plan-card { width: min(100%, 520px); }
.plan-card ol { display: grid; gap: 8px; }
.plan-card li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); align-items: baseline; }
.plan-card li svg { display: none; width: 1em; height: 1em; fill: none; stroke: var(--verified); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; translate: 0 0.15em; grid-row: 1; grid-column: 1; }
.plan-card li .n { color: var(--fg-subtle); grid-row: 1; grid-column: 1; }
.plan-card li.making { font-weight: 650; }
.plan-card li.made { color: var(--fg-muted); }
.plan-card li.made svg { display: block; animation: pill-in 0.3s var(--ease); }
.plan-card li.made .n { visibility: hidden; }
.make { justify-self: start; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4em 1em; border-radius: 8px; background: var(--accent); color: var(--accent-on); font-weight: 650; font-size: 0.92em; }
.make svg, .plan-done svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.make.busy { opacity: 0.75; }
.plan-done { display: none; align-items: center; gap: 0.4em; color: var(--verified); font-weight: 600; }
.plan-card.finished .make { display: none; }
.plan-card.finished .plan-done { display: inline-flex; }

/* ------------------------------------------- the quiet pages, one motion each -- */
/* Pricing: a film's life as a line, the dot carried along it by the scroll; free as far as call sheets, the fee
   once at the shoot. On a phone the line runs down the page, the fee a row of its own. */
.life { position: relative; display: grid; gap: 14px; font-size: clamp(14px, 0.9vw, 19px); }
.life-sides { display: grid; grid-template-columns: 1fr 1fr; }
.life-sides span { justify-self: start; padding: 0.25em 0.8em; border-radius: 99px; font-weight: 650; font-size: 0.86em; }
.life-free { background: var(--overlay); color: var(--fg-muted); }
.life-paid { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
.life-track { position: relative; height: 2px; margin-top: 30px; background: var(--line-strong); border-radius: 2px; }
.life-run { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--at, 0) * 100%); background: var(--accent); border-radius: inherit; }
.life-dot { position: absolute; left: calc(var(--at, 0) * 100%); top: 50%; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 22%, transparent), 0 0 24px color-mix(in oklab, var(--accent) 60%, transparent); }
.life-fee { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; white-space: nowrap; color: var(--fg-subtle); font-weight: 600; font-size: 0.86em; transition: color 0.4s; }
.life-fee::after { content: ""; position: absolute; left: 50%; top: calc(100% + 4px); width: 2px; height: 14px; translate: -50% 0; background: currentColor; }
.life.paid .life-fee { color: var(--accent); }
.life-stages { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); text-align: center; }
.life-stages li { position: relative; padding-top: 14px; color: var(--fg-subtle); transition: color 0.3s; }
.life-stages li::before { content: ""; position: absolute; left: 50%; top: -20px; width: 8px; height: 8px; translate: -50% 0; border-radius: 50%; background: var(--line-strong); transition: background 0.3s; }
.life-stages li.reached { color: var(--fg); }
.life-stages li.reached::before { background: var(--accent); }
.life-stages .life-gate { display: none; }

/* Security: the record checks itself — a line runs down the Activity, then its own words are ringed in green. */
.self-check { position: relative; overflow: clip; border-radius: 14px; }
.check-line { position: absolute; left: 0; right: 0; top: 21%; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 15%, var(--accent) 85%, transparent);
  box-shadow: 0 0 18px 4px color-mix(in oklab, var(--accent) 45%, transparent); }
.self-check.scan .check-line { animation: check-run 2.6s cubic-bezier(0.45, 0, 0.55, 1) forwards; }
@keyframes check-run { 0% { top: 21%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { top: 99%; opacity: 0; } }
.check-ring { position: absolute; left: 4.1%; top: 14.9%; width: 12%; height: 5.6%; border-radius: 99px; border: 2px solid var(--verified); pointer-events: none;
  box-shadow: 0 0 22px color-mix(in oklab, var(--verified) 45%, transparent); opacity: 0; scale: 1.25; transition: opacity 0.5s var(--ease), scale 0.5s var(--ease); }
.self-check.ok .check-ring { opacity: 1; scale: 1; }

/* About: the copies in bags, each a drive nobody is sure of, come together into one, checked. */
.copies { display: grid; gap: 16px; justify-items: start; margin-top: clamp(8px, 1vw, 24px); font-size: clamp(14px, 0.85vw, 18px); }
.copies ol { display: flex; gap: 14px; }
.copies li { --w: clamp(84px, 7vw, 132px); position: relative; z-index: calc(4 - var(--i)); display: grid; justify-items: center; gap: 8px; width: var(--w); padding: 16px 8px 12px;
  border-radius: 12px; background: var(--raised); border: 1px solid color-mix(in oklab, var(--unverified) 55%, var(--line)); color: var(--unverified);
  transition: translate 0.9s var(--ease), rotate 0.9s var(--ease), opacity 0.6s var(--ease) 0.3s, border-color 0.5s 0.7s, color 0.5s 0.7s; }
.copies li svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.copies li span { color: var(--fg-muted); font-weight: 600; font-size: 0.9em; transition: opacity 0.3s; }
.copies-ask { color: var(--unverified); font-weight: 600; transition: opacity 0.4s; }
.copies-one { color: var(--fg-muted); opacity: 0; translate: 0 6px; transition: opacity 0.5s var(--ease) 0.9s, translate 0.5s var(--ease) 0.9s; }
.copies-one b { color: var(--verified); font-weight: 650; }
.copies.one li { translate: calc((1.5 - var(--i)) * (var(--w) + 14px)) 0; rotate: calc((var(--i) - 1.5) * 2deg); border-color: color-mix(in oklab, var(--verified) 60%, var(--line)); color: var(--verified); }
.copies.one li:not(:first-child) { opacity: 0; }
.copies.one li:first-child { rotate: 0deg; }
.copies.one li span { opacity: 0; }
.copies.one .copies-ask { opacity: 0; }
.copies.one .copies-one { opacity: 1; translate: 0 0; }

/* -------------------------------------------------- a way to a page -- */
/* A link that goes on to a page, as words with the arrow after them. */
.more { display: inline-flex; align-items: center; gap: 0.5em; color: var(--accent); font-weight: 600; text-decoration: none; font-size: clamp(15px, 0.85vw, 20px); justify-self: start; }
.more svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.more:hover { color: var(--accent-hover); }
.more:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------ a page's opening -- */
/* Every page but Home opens on its name, a line of what it does, and the screen it is about, in the beam. */
.page-head { position: relative; z-index: 1; overflow: clip; background: var(--base); padding: clamp(120px, 11vw, 240px) var(--inline) clamp(56px, 5vw, 120px); }
.page-head .inner { position: relative; gap: clamp(20px, 2vw, 40px); max-width: 1400px; }
.page-head h1 { font-size: clamp(44px, 5.4vw, 140px); line-height: 0.98; letter-spacing: -0.045em; max-width: 16ch; animation: rise 1.1s var(--ease) both; }
.page-head .lede { color: var(--fg-muted); font-size: clamp(18px, 1.15vw, 28px); max-width: 46ch; animation: rise 1.1s var(--ease) 0.15s both; }
.page-head .acts { animation: rise 1.1s var(--ease) 0.25s both; }
.page-shot { position: relative; margin-top: clamp(40px, 4vw, 96px); animation: rise 1.2s var(--ease) 0.3s both; }
.page-shot img { width: 100%; border-radius: 14px; border: 1px solid var(--line-strong); box-shadow: 0 40px 100px rgb(0 0 0 / 0.65); }
.page-head.plain { padding-bottom: clamp(24px, 2vw, 48px); }

/* Sections of a page: a picture beside its words, the side changing as the page goes down. */
.split.flip > :first-child { order: 2; }
@media (min-width: 1101px) { .split.wide-shot { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .split.flip.wide-shot { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.panel.tight { padding-block: clamp(56px, 5vw, 120px); }
.shot figcaption { color: var(--fg-muted); font-size: clamp(14px, 0.75vw, 18px); margin-top: 12px; }
.shot.phone img { max-width: 360px; margin-inline: auto; display: block; border-radius: 28px; }

/* The next stage of the film, at the foot of a stage's page. */
.next { padding-block: clamp(48px, 4vw, 96px); border-top: 1px solid var(--line); background: var(--base); }
.next a { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; text-decoration: none; }
.next span { color: var(--fg-muted); }
.next b { font-size: clamp(36px, 4vw, 96px); font-weight: 750; letter-spacing: -0.04em; display: inline-flex; align-items: center; gap: 0.3em; }
.next b svg { width: 0.7em; height: 0.7em; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.next a:hover b svg { transform: translateX(8px); }

/* ------------------------------------------------- words to be read -- */
/* Terms, privacy and the like: one column a person can read, nothing to look at. */
.prose { max-width: 74ch; display: grid; gap: 1em; color: var(--fg-muted); font-size: clamp(16px, 0.9vw, 20px); }
.prose h2 { font-size: clamp(22px, 1.5vw, 32px); color: var(--fg); letter-spacing: -0.02em; margin-top: 1.2em; }
.prose h3 { font-size: clamp(17px, 1vw, 22px); color: var(--fg); letter-spacing: -0.01em; margin-top: 0.6em; }
.prose ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 0.4em; }
.prose b, .prose strong { color: var(--fg); font-weight: 600; }
.prose a { color: var(--accent); }
.prose .as-typed { white-space: pre-line; overflow-wrap: anywhere; }
.prose .stamp { color: var(--fg-subtle); font-size: 0.9em; }
/* A notice set apart from the words it is about: a draft, or what could not be loaded. */
.notice { border: 1px solid color-mix(in oklab, var(--pending) 45%, transparent); background: color-mix(in oklab, var(--pending) 8%, transparent);
  color: var(--fg); border-radius: 12px; padding: 14px 18px; font-size: clamp(14px, 0.8vw, 18px); }

/* About and Contact: people, and ways to reach them. */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 40px); }
.people li { border-top: 1px solid var(--line-strong); padding-top: 16px; display: grid; gap: 4px; }
.people b { color: var(--fg); font-size: clamp(18px, 1.1vw, 26px); font-weight: 650; letter-spacing: -0.01em; }
.people span { color: var(--accent); font-size: 0.95em; }
.people p { color: var(--fg-muted); font-size: clamp(15px, 0.85vw, 19px); margin-top: 6px; }
.reach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 40px); }
.reach li { border-top: 1px solid var(--line-strong); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.reach b { color: var(--fg-muted); font-weight: 500; font-size: 0.9em; }
.reach a, .reach span { color: var(--fg); font-size: clamp(18px, 1.2vw, 28px); font-weight: 600; text-decoration: none; letter-spacing: -0.01em; }
.reach a:hover { color: var(--accent); }
.reach address { font-style: normal; color: var(--fg); font-size: clamp(16px, 0.95vw, 22px); line-height: 1.5; }

/* Words for a screen reader alone: a heading the page's layout makes plain to the eye. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* What people ask Munshi, as a row of questions on his own page. */

/* The two ways a film stands, free and upgraded, side by side. */
.plans .plan { padding-top: clamp(20px, 2.4vw, 48px); }
.plans .plan .tile-words { margin-top: 0; }
.plans h3 { font-size: clamp(24px, 1.8vw, 44px); }
.plans .soon { display: flex; gap: 10px; align-items: center; }

/* ------------------------------------------------------ start to finish -- */
/* The stages of one film and its budget, each a picture and a way to its section (A, chosen 2026-10-28 [F]). */
.stages { padding-block: clamp(48px, 4.5vw, 112px); background: var(--base); }
.stages ol { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 28px); }
.stages a { display: grid; gap: 8px; align-content: start; text-decoration: none; color: var(--fg-muted); font-size: clamp(14px, 0.8vw, 19px); }
.stages a b { color: var(--fg); font-size: clamp(20px, 1.5vw, 36px); font-weight: 700; letter-spacing: -0.02em; transition: color 0.2s; }
.stages a:hover b, .stages a:focus-visible b { color: var(--accent); }
.stages img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 10px; border: 1px solid var(--line-strong); margin-bottom: 6px;
  filter: saturate(0.85) brightness(0.85); transition: filter 0.4s var(--ease); }
.stages a:hover img { filter: none; }

/* ---------------------------------------------------------------- pricing -- */
.pricing { display: grid; align-content: center; }
.pricing .inner { gap: clamp(16px, 1.4vw, 28px); }
.fee { font-size: clamp(64px, 8vw, 220px); font-weight: 750; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; min-height: 1em; }
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 48px); margin-top: clamp(16px, 2vw, 40px); color: var(--fg-muted); font-size: clamp(15px, 0.9vw, 22px); }
.terms li { border-top: 1px solid var(--line-strong); padding-top: 14px; max-width: 34ch; }
.terms b { color: var(--fg); font-weight: 600; }
.problem { color: var(--fg-muted); }

/* ------------------------------------------------------------ the close -- */
.last { min-height: 100svh; display: grid; align-content: space-between; padding-bottom: 0; overflow: clip; background: var(--base); }
.last .inner { align-content: end; min-height: 60svh; gap: clamp(24px, 2.4vw, 48px); }
.last h2 { font-size: clamp(48px, 6vw, 160px); line-height: 0.96; letter-spacing: -0.045em; }

.foot-of-page { position: relative; margin-top: clamp(64px, 6vw, 140px); padding: 40px 0 48px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; align-items: start; }
.foot-of-page .who { display: grid; gap: 16px; }
.foot-of-page address { font-style: normal; color: var(--fg-subtle); font-size: 14px; line-height: 1.6; max-width: 40ch; }
.foot-of-page address a { color: var(--fg-muted); }
.foot-of-page nav { display: grid; gap: 10px; justify-items: start; }
.foot-of-page nav b { color: var(--fg); font-weight: 600; font-size: 14px; }
.credit { grid-column: 1 / -1; color: var(--fg-subtle); font-size: 13px; }

/* ------------------------------------------------------------- narrower -- */
@media (max-width: 1100px) {
  .ask-panel .split, .plan-pin { grid-template-columns: minmax(0, 1fr); }
  .plan-pin { align-content: center; gap: 28px; padding-top: 72px; }
  .plan-words p { display: none; }
  .side { height: 480px; }
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .story-screen { top: 64px; z-index: 1; padding: 12px 0; background: var(--well); }
  .story-steps li, .story-steps li:first-child { min-height: 55vh; }
  .meter { grid-template-columns: minmax(0, 1fr); }
  .piece, .flip .piece { left: auto; right: -2cqw; width: 52cqw; }
  .stages ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .chain { max-width: 760px; width: 100%; justify-self: center; }
  .hero { padding-top: clamp(96px, 12vw, 140px); }
  .split, .lead, .words.two, .split.wide-shot, .split.flip.wide-shot { grid-template-columns: minmax(0, 1fr); }
  .split.flip > :first-child { order: 0; }
  .reach { grid-template-columns: minmax(0, 1fr); }
  .split .words { order: -1; }
  .duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .life { padding-left: 30px; gap: 0; }
  .life-sides, .life-fee { display: none; }
  .life-track { position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; height: auto; margin: 0; }
  .life-run { width: 100%; height: calc(var(--at, 0) * 100%); }
  .life-dot { left: 50%; top: calc(var(--at, 0) * 100%); }
  .life-stages { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .life-stages li { padding: 9px 0; }
  .life-stages li::before { left: -22px; top: 50%; translate: -50% -50%; }
  .life-stages .life-gate { display: block; color: var(--fg-subtle); font-weight: 600; font-size: 0.86em; }
  .life-stages .life-gate::before { display: none; }
  .life.paid .life-gate { color: var(--accent); }
  .copies ol { gap: 10px; }
  .copies li { --w: 74px; padding: 12px 4px 10px; }
  .copies.one li { translate: calc((1.5 - var(--i)) * (var(--w) + 10px)) 0; }
  .years-pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; gap: 20px; padding-top: 80px; }
  .years-date .year { font-size: 30vw; }
  .sheet li { grid-template-columns: minmax(0, 1fr) auto; }
  .sheet li span:nth-child(3), .sheet li span:nth-child(4) { display: none; }
  .cutoff-pin { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 24px; }
  .clockface { width: 52vw; }
  .tracks { width: 340vw; translate: calc(var(--slide, 0) * -240vw) 0; }
  .tile.wide { grid-template-columns: minmax(0, 1fr); }
  .screening { height: 180vh; }
  .player { width: calc(88% + var(--dim, 0) * 12%); }
  .note { width: 62%; font-size: 11px; padding: 8px 10px; }
  .note .reply { display: none; }
  .record li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ledger-head { display: none; }
  .ledger li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .ledger .file { grid-column: 1; }
  .ledger .sum { grid-column: 1; font-size: 11px; }
  .ledger .pill { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .night { height: 220vh; }
  .night-words { padding-bottom: 190px; }
  .piece, .flip .piece { position: relative; inset: auto; width: auto; margin: -24px 12px 0; font-size: 13px; padding: 14px; gap: 10px; }
  .top nav, .top .button.small { display: none; }
  .top .sign-in { margin-left: auto; border: 1px solid var(--line-strong); border-radius: 99px; padding: 0.45em 1em; }
  .points, .terms { grid-template-columns: minmax(0, 1fr); }
  .stages ol { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .stages a { grid-template-columns: 38% minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .stages img { grid-row: span 2; margin: 0; }
  .asked { position: static; max-width: none; margin-bottom: 14px; }
  .asked li:nth-child(n) { margin-left: 0; }
  .screens { grid-template-columns: minmax(0, 1fr); }
  .screens .board { grid-row: auto; }
  .screens .wide, .screens .phone { grid-column: auto; grid-row: auto; }
  .screens .phone { max-width: 320px; }
  .foot-of-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-of-page .who { grid-column: 1 / -1; }
  .flow .clip { width: 200px; }
  /* On a phone the Overview runs off the edge and the day sits over its corner; the script page is left out. */
  .chain { aspect-ratio: 10 / 12; }
  .screen { left: 0; top: 0; width: 140cqw; border-radius: 2cqw; }
  .paper { display: none; }
  .shoot-day { top: 58cqw; width: 82cqw; font-size: 3.5cqw; padding: 2.4cqw; gap: 2cqw; }
  .shoot-day .bar { height: 0.9cqw; }
  .safe svg { width: 3.6cqw; height: 3.6cqw; }
  .proof { font-size: 3cqw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .beam, .lens, .grain, .hero h1 .line, .hero-words > p, .hero-words .acts, .link { animation: none; }
  .beam, .lens { opacity: 0.8; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tilt { transform: none; opacity: 1; }
  .card, .revealed { transform: none; }
  .munshi.working .munshi-ring { animation: none; }
  .pill-edge, .pill-edge::before, .caret { animation: none; }
  .copies li, .copies-one, .check-ring { transition: none; }
  .thread [data-at] { transition: none; }
}