/* Stage colours and layout for the canvas explainers (film.js). */
:root {
  --stage-bg: #f6f7f9;
  --stage-ink: #1b1f27;
  --stage-dim: #6b7380;
  --stage-faint: #d9dde3;
  --stage-pos: #2f6db5;
  --stage-neg: #c46a1c;
  --stage-hl: #c99a06;
  --stage-good: #2a8a68;
}
@media (prefers-color-scheme: dark) {
  :root {
    --stage-bg: #0e1219;
    --stage-ink: #e8eaee;
    --stage-dim: #8b94a3;
    --stage-faint: #262c37;
    --stage-pos: #5aa5f0;
    --stage-neg: #f0a050;
    --stage-hl: #ffd34d;
    --stage-good: #6fd0a8;
  }
}
.film-canvas { display: block; width: 100%; touch-action: pan-y; }
.film-text var, .film-steps var { font-family: Georgia, 'Times New Roman', serif; font-style: italic; }
.film-steps .hl { color: var(--stage-hl); font-weight: 600; }
.film-steps .pos { color: var(--stage-pos); font-weight: 600; }
.film-steps .neg { color: var(--stage-neg); font-weight: 600; }

/* ---------- full page ---------- */
body.film { background: var(--stage-bg); }
.film .site-header { background: var(--c-bg); position: relative; z-index: 3; }
.film-intro { max-width: 46rem; margin: 0 auto; padding: clamp(2.5rem, 8vh, 5rem) 1rem 1.5rem; }
.film-intro .eyebrow { font: .8rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stage-dim); }
.film-intro h1 { font-family: var(--reading-serif); font-weight: 500; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.08; letter-spacing: -.03em; margin: .6rem 0 1rem; color: var(--stage-ink); }
.film-intro p { font-size: 1.1rem; color: var(--reading-ink); margin: 0 0 .8rem; }
.film-intro .hint { color: var(--stage-dim); font-size: .95rem; }
.film-body { position: relative; display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 0 2rem; padding: 0 clamp(1rem, 3vw, 2rem); }
.film-stage { position: sticky; top: 0; height: 100vh; height: 100svh; grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; }
.film-stage canvas { flex: 1; min-height: 0; height: 100%; }
.film-hud { position: absolute; top: 12px; left: 0; right: 0; display: flex; align-items: center; gap: 10px; pointer-events: none; z-index: 2; }
.film-hud .chapter { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: .75rem/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stage-dim); }
.film-hud .bar { flex: 1 1 24px; height: 2px; background: var(--stage-faint); overflow: hidden; }
.film-hud .bar i { display: block; height: 100%; background: var(--stage-hl); transform-origin: 0 50%; transform: scaleX(0); }
.film-hud button { white-space: nowrap; pointer-events: auto; font: .8rem var(--font-sans); padding: .3rem .6rem; border-radius: 4px; border: 1px solid var(--stage-faint); background: transparent; color: var(--stage-dim); cursor: pointer; }
.film-hud button:hover { color: var(--stage-ink); border-color: var(--stage-dim); }
.film-steps { grid-column: 1; grid-row: 1; padding: 30vh 0 40vh; }
.film-steps .step { min-height: 88vh; display: flex; align-items: center; }
.film-steps .card { background: var(--c-bg); border: 1px solid var(--reading-line); border-radius: 8px; padding: 1.1rem 1.25rem 1.2rem; opacity: .45; transition: opacity .3s; }
.film-steps .step.active .card { opacity: 1; box-shadow: 0 1px 3px #0000000d, 0 8px 24px #0000000a; }
.film-steps .k { font: .72rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stage-hl); margin-bottom: .55rem; }
.film-steps h2 { font-family: var(--reading-serif); font-weight: 500; font-size: 1.35rem; line-height: 1.25; margin: 0 0 .5rem; color: var(--c-strong); }
.film-steps p { margin: 0 0 .6rem; color: var(--reading-ink); font-size: 1rem; line-height: 1.6; }
.film-steps p:last-child { margin-bottom: 0; }
.film-steps .control { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; font-size: .9rem; color: var(--c-gray-3); }
.film-steps .control input { flex: 1; accent-color: var(--stage-hl); }
.film-steps .control output { font: .9rem var(--font-mono); color: var(--c-strong); min-width: 8ch; text-align: right; }
.film-outro { max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 5rem; }
.film-outro h2 { font-family: var(--reading-serif); font-weight: 500; font-size: 1.6rem; margin: 0 0 .6rem; color: var(--c-strong); }
.film-outro p { color: var(--reading-ink); margin: 0 0 .8rem; }
.film-outro a { color: var(--c-strong); }

/* phones and narrow windows: the stage sits on top and the cards scroll up beneath it */
@media (max-width: 899px) {
  .film-body { display: block; padding: 0; }
  .film-stage { height: 58vh; height: 58svh; z-index: 2; background: var(--stage-bg); border-bottom: 1px solid var(--stage-faint); padding: 40px 8px 4px; box-sizing: border-box; }
  .film-hud { left: 12px; right: 12px; top: 8px; }
  .film-steps { padding: 6vh 1rem 50vh; }
  .film-steps .step { min-height: 60vh; align-items: flex-start; }
  .film-steps h2 { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .film-steps .card { transition: none; } }
.film-steps .katex-display { margin: .7rem 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.film-steps .katex { font-size: 1.05em; }