/* The transcript as a screenplay. Hollywood scripts are easy to read because of fixed conventions, so the page keeps
   them: one monospaced face at one size (Courier), scene headings in capitals, action full width, the character's
   name in capitals above a narrow dialogue column, (V.O.) and (CONT'D) where a script would put them, SUPER: and
   MUSIC: as action lines. Hierarchy comes from position and spacing, not from changing fonts or colours. Black page,
   paper type; the only white is a name and a scene heading. Univers stays for the page title and the UI labels. */
:root { --mono: "Courier Prime", "Courier New", Courier, "Nimbus Mono PS", monospace; --m: 1ch; }
.intro .lead { max-width: 42em; }
.note { margin: 18px 0 0; max-width: 42em; font-size: 15px; line-height: 1.5; color: var(--paper-dim); }
.dl { margin-top: 12px; font-size: 15px; color: var(--paper-dim); }
.dl a { margin-right: 16px; font: 400 13px/2 var(--light); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); text-decoration: none; }
.dl a:hover { color: #fff; }
/* the toolbar: one quiet row that stays while you read */
.tools { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: clamp(28px, 4vw, 48px);
  padding: 12px 0; background: rgba(0,0,0,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tools label { font: 400 12px/1 var(--light); letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); }
.tools .f { display: flex; align-items: center; gap: 8px; }
.tools input[type=search] { width: min(100%, 240px); padding: 7px 0; font: 400 15px/1.2 var(--mono); color: var(--paper); background: none; border: 0; border-bottom: 1px solid rgba(243,233,216,.4); outline: 0; -webkit-appearance: none; }
.tools input[type=search]::placeholder { color: rgba(243,233,216,.4); }
.tools input[type=search]:focus { border-bottom-color: #fff; }
.tools select { max-width: 220px; padding: 7px 0; font: 400 14px/1.2 var(--mono); color: var(--paper); background: #000; border: 0; border-bottom: 1px solid rgba(243,233,216,.4); outline: 0; }
.tools .tog { display: inline-flex; border: 1px solid rgba(243,233,216,.4); border-radius: 2px; overflow: hidden; }
.tools .tog button { padding: 7px 11px 6px; font: 400 12px/1 var(--light); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); background: none; border: 0; cursor: pointer; }
.tools .tog button[aria-pressed=true] { background: var(--paper); color: #111; }
.tools .n { margin-left: auto; font: 400 13px/1 var(--mono); color: var(--paper-dim); min-height: 1em; }
.tools .jump { display: none; }
/* two columns: the scenes down the left, the script page on the right */
.cols { display: grid; grid-template-columns: 220px minmax(0, 79ch); gap: clamp(32px, 6vw, 100px); align-items: start; margin-top: clamp(24px, 3vw, 44px); font: 400 clamp(15px, 1.05vw, 17px)/1.55 var(--mono); }
nav .rail { position: sticky; top: 62px; max-height: calc(100vh - 80px); overflow: auto; margin: 0; padding: 0; list-style: none; scrollbar-width: thin; }
.rail li a { display: grid; grid-template-columns: 3ch 1fr auto; gap: 0 6px; align-items: baseline; padding: 5px 0; color: var(--paper-dim); text-decoration: none; font-size: 13px; line-height: 1.35; }
.rail .rn { color: rgba(243,233,216,.4); }
.rail .rc { color: rgba(243,233,216,.4); }
.rail li a:hover, .rail li.on a { color: #fff; }
.rail li.on .rt { text-decoration: underline 1px; text-underline-offset: 4px; }
.script { min-width: 0; color: var(--paper); padding-left: 8ch; }
/* the page: a script's margins in characters. Action runs the measure; the name sits at 22ch, dialogue from 10ch to 60ch,
   a parenthetical at 16ch. Two blank lines before a scene heading, one between blocks. */
.scene { padding: 2.6em 0 0; }
.scene:first-child { padding-top: .6em; }
.sh { position: relative; margin: 0 0 1.4em; }
.slug { margin: 0; font: 700 1em/1.55 var(--mono); text-transform: uppercase; color: #fff; }
.stc { position: absolute; left: -8ch; top: 0; color: rgba(243,233,216,.4); text-decoration: none; font-size: 12px; line-height: 2.2; white-space: nowrap; }
.stc:hover { color: #fff; }
.act { margin: 0 0 1.4em; max-width: 60ch; color: var(--paper); }
.act.sup, .act.cue { color: var(--paper-dim); }
.act .btn { font-family: var(--light); }
.line { position: relative; margin: 0 0 1.4em; }
.line .tc { position: absolute; left: -8ch; top: 0; color: rgba(243,233,216,.4); text-decoration: none; font-size: 12px; line-height: 2.2; white-space: nowrap; }
.line .tc:hover { color: #fff; }
.js.live .line .tc { color: var(--paper-dim); text-decoration: underline 1px; text-underline-offset: 3px; }
.who { margin: 0 0 0 22ch; font-weight: 400; text-transform: uppercase; letter-spacing: 0; color: #fff; }
.par { margin: 0 0 0 16ch; max-width: 34ch; color: var(--paper-dim); }
.say { margin: 0 0 0 10ch; max-width: 50ch; color: var(--paper); }
.say mark { background: var(--paper); color: #111; padding: 0 2px; }
.held { color: var(--paper-dim); }
.cp { position: absolute; right: 0; top: 0; padding: 4px 8px; font: 400 11px/1 var(--light); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); background: #000; border: 1px solid rgba(243,233,216,.3); border-radius: 2px; cursor: pointer; opacity: 0; transition: opacity .2s; }
.line:hover .cp, .line:focus-within .cp, .cp:focus-visible { opacity: 1; }
.line .cp { opacity: 1; }
.line:target, .line.now { box-shadow: -14px 0 0 -12px #fff; }
.hid { display: none !important; }
.veil { padding: 2.6em 0 0; }
.veil .slug { margin-bottom: 1.4em; }
.js .scene.veiled { display: none; }
.js .scene.veiled.open { display: block; }
.js.live .veil, .veil.off { display: none; }
.empty { display: none; padding: 2em 0; color: var(--paper-dim); }
.colophon { margin-top: clamp(50px, 6vw, 90px); padding-top: 22px; border-top: 1px solid var(--rule); max-width: 42em; font: 400 14px/1.55 var(--read); color: var(--paper-dim); }
/* the player, once the film is out: a small frame that follows you */
.player { display: none; position: fixed; z-index: 6; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 32px)); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.player.on { display: block; }
.player iframe { width: 100%; height: 100%; border: 0; }
.player .x { position: absolute; top: -34px; right: 0; padding: 6px 10px; font: 400 12px/1 var(--light); letter-spacing: .18em; text-transform: uppercase; color: var(--paper); background: rgba(0,0,0,.7); border: 1px solid rgba(243,233,216,.4); border-radius: 2px; cursor: pointer; }
@media (max-width: 980px) {
  .cols { grid-template-columns: 1fr; }
  nav .rail { display: none; }
  .tools .jump { display: flex; }
}
@media (max-width: 600px) {
  .cols { font-size: 14px; }
  .script { padding-left: 0; }
  .line .tc, .stc { position: static; display: block; margin: 0 0 .2em; line-height: 1.4; }
  .tools { position: static; gap: 10px 14px; }
  .tools .n { width: 100%; margin-left: 0; }
  .who { margin-left: 8ch; }
  .par { margin-left: 4ch; }
  .say { margin-left: 0; max-width: none; }
  .line:target, .line.now { box-shadow: none; border-left: 2px solid #fff; padding-left: 10px; margin-left: -12px; }
  .cp { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cp { transition: none; } }
@media print {
  html, body { background: #fff; color: #000; }
  .top, .foot, .tools, nav .rail, .player, .cp, .actions, .dl, .note, .veil { display: none !important; }
  .js .scene.veiled { display: block; }
  .wrap { width: 100%; max-width: none; }
  .cols { display: block; font: 12pt/1.5 "Courier Prime", "Courier New", Courier, monospace; }
  .script, .act, .say, .who, .slug, .par, .act.sup, .act.cue { color: #000 !important; }
  .line .tc, .stc { color: #666 !important; position: absolute; }
  .say mark { background: none; }
  .scene { padding-top: 24pt; }
  .sh { break-after: avoid; }
  .line { break-inside: avoid; }
  a[href]::after { content: none !important; }
  @page { margin: 25mm 25mm 25mm 38mm; }
}