@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin.woff2") format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-ext.woff2") format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;src:url("fonts/newsreader-italic-400-latin.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Newsreader";font-style:italic;src:url("fonts/newsreader-italic-400-latin-ext.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"Marquee";src:url("fonts/barlow-condensed-900-latin-ext.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#f3eee3; --bg-2:#e9e2d2; --surface:#fbf8f1; --ink:#15110d; --ink-2:#3a322a; --muted:#4b4238;
  --rule:#cfc4b0; --accent:#8a4b00; --accent-ink:#6a3900; --lamp:#d98a1c; --velvet:#8c1f1f; --screen:#fffaf0;
  --shade:#15110d; --beam:rgba(255,196,110,.55); --film:#2a221b; --film-2:#43372b; --hole:#f3eee3;
  --dark-a:#1c1712; --focus:#1a4fb8; --r:#b1332a; --g:#2f7d3a; --b:#2553a8;
  --serif:"Newsreader",Georgia,"Times New Roman",serif; --display:"Marquee","Arial Narrow",sans-serif; --mono:"Plex Mono",ui-monospace,Menlo,monospace;
  --bar:3.1rem; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d0b09; --bg-2:#16120e; --surface:#1b1611; --ink:#f4ecdc; --ink-2:#e0d5c1; --muted:#cbbfa9;
  --rule:#3a3027; --accent:#f3b35a; --accent-ink:#f6c47c; --lamp:#f3b35a; --velvet:#d9574c; --screen:#f6eedd;
  --shade:#050404; --beam:rgba(255,200,120,.30); --film:#241d16; --film-2:#3b3027; --hole:#0d0b09;
  --dark-a:#050404; --focus:#8fb4ff; --r:#ff6f61; --g:#6ccf7a; --b:#79a6ff; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d0b09; --bg-2:#16120e; --surface:#1b1611; --ink:#f4ecdc; --ink-2:#e0d5c1; --muted:#cbbfa9;
  --rule:#3a3027; --accent:#f3b35a; --accent-ink:#f6c47c; --lamp:#f3b35a; --velvet:#d9574c; --screen:#f6eedd;
  --shade:#050404; --beam:rgba(255,200,120,.30); --film:#241d16; --film-2:#3b3027; --hole:#0d0b09;
  --dark-a:#050404; --focus:#8fb4ff; --r:#ff6f61; --g:#6ccf7a; --b:#79a6ff; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.14rem/1.62 var(--serif);font-optical-sizing:auto;overflow-x:clip}
a{color:var(--accent-ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.9rem;height:var(--bar);padding:0 1rem;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);font:500 .9rem/1 var(--serif)}
.topbar a{color:var(--ink);text-decoration:none}
.topbar .home{font-weight:600;white-space:nowrap}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:0 1 auto}
.topnav::-webkit-scrollbar{display:none}
.topnav a{white-space:nowrap;color:var(--ink-2);padding:.4rem 0}
.topnav a[aria-current="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.spacer{flex:1}
.chip{border:1px solid var(--rule);padding:.42rem .7rem;border-radius:99px;white-space:nowrap}
.icon-btn{display:inline-grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;flex:0 0 auto}
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}
@media (max-width:40rem){.topbar .home{display:none}.topbar{gap:.7rem}}

/* ---------- reading rail: a film strip ---------- */
.rail{display:none}
@media (min-width:76rem){
  .rail{display:flex;flex-direction:column;gap:.35rem;position:fixed;right:1.1rem;top:50%;transform:translateY(-50%);z-index:40;padding:.5rem .35rem;background:var(--film);border-radius:3px}
  .rail a{position:relative;display:block;width:1.2rem;height:.9rem;border-radius:1px;background:var(--film-2);outline-offset:2px}
  .rail a i{position:absolute;inset:2px;border-radius:1px;background:transparent;transition:background .25s}
  .rail a[aria-current="true"] i{background:var(--lamp)}
  .rail a span{position:absolute;right:1.9rem;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--surface);color:var(--ink);font:500 .82rem/1 var(--serif);padding:.35rem .55rem;border:1px solid var(--rule);border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s}
  .rail a:hover span,.rail a:focus-visible span{opacity:1}
}
@media print{.rail,.topbar{display:none}}

section,[id]{scroll-margin-top:calc(var(--bar) + 1rem)}

/* ---------- hero: a projector beam onto a screen ---------- */
.hero{position:relative;min-height:calc(100svh - var(--bar));display:grid;align-items:end;overflow:hidden;background:var(--shade);color:#f4ecdc;isolation:isolate}
.hero-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-art .beam{fill:url(#beamGrad)}
.hero-art .dust circle{fill:#ffe2b0}
.hero-art .screen-rect{fill:#1d1812}
.hero-art .screen-lit{fill:#fff1d6}
.hero-copy{padding:0 1.25rem 3.2rem;max-width:62rem;margin:0 auto;width:100%}
.kicker{font:400 .8rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#f3c886;margin:0 0 1rem}
.hero h1{font:900 clamp(2.9rem,6.4vw,5.9rem)/.92 var(--display);letter-spacing:-.005em;text-transform:uppercase;margin:0 0 1.2rem;color:#fff6e6;text-wrap:balance;max-width:14ch}
.hero h1 em{font-style:normal;color:#f3b35a}
.deck{font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.45;max-width:38rem;margin:0 0 1.6rem;color:#efe4cf}
.counter{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;font:400 .95rem/1.4 var(--serif);color:#e9dcc5;max-width:40rem;border-top:1px solid rgba(255,230,190,.28);padding-top:1rem}
.counter output{font:400 1.7rem/1 var(--mono);color:#f3b35a;font-variant-numeric:tabular-nums;min-width:5.5ch}
.grain{position:absolute;inset:-50%;z-index:1;pointer-events:none;background:url("grain.svg");opacity:.13;mix-blend-mode:screen;animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.scratch{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,240,210,.35);z-index:1;pointer-events:none;animation:scratch 7s linear infinite}
.scratch.s2{animation-duration:11s;animation-delay:-4s}
@keyframes scratch{0%{left:12%;opacity:0}3%{opacity:.7}9%{left:14%;opacity:0}50%{left:71%;opacity:0}53%{opacity:.6}58%{left:69%;opacity:0}100%{left:69%;opacity:0}}
@media (prefers-reduced-motion:reduce){.grain,.scratch{animation:none}.scratch{display:none}}

/* ---------- body layout ---------- */
main{display:block}
.wrap{max-width:43rem;margin:0 auto;padding:0 1.25rem}
.wide{max-width:72rem;margin:0 auto;padding:0 1.25rem}
.chapter{padding:5.5rem 0 2rem;border-top:1px solid var(--rule)}
.chapter:first-of-type{border-top:0}
.reel{font:400 .78rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;gap:.8rem;align-items:center;margin:0 0 1rem}
.reel b{font-weight:400;color:var(--accent-ink)}
.reel::after{content:"";flex:1;height:1px;background:var(--rule)}
h2{font:900 clamp(2.1rem,5.4vw,3.9rem)/.95 var(--display);text-transform:uppercase;letter-spacing:0;margin:0 0 1.4rem;text-wrap:balance}
h3{font:600 1.3rem/1.25 var(--serif);margin:2.2rem 0 .7rem}
p{margin:0 0 1.1rem}
.lede{font-size:1.3rem;line-height:1.5;color:var(--ink-2)}
.note{font-size:1rem;color:var(--muted)}
strong{font-weight:650}
.year{font:900 1.05em/1 var(--display);letter-spacing:.02em;color:var(--accent-ink)}
blockquote{margin:1.6rem 0;padding:0 0 0 1.2rem;border-left:3px solid var(--lamp);font-style:italic;font-size:1.22rem;color:var(--ink-2)}
blockquote cite{display:block;margin-top:.5rem;font:400 .9rem/1.3 var(--serif);font-style:normal;color:var(--muted)}

/* intertitle: silent-film card */
.intertitle{margin:3rem auto;max-width:34rem;background:var(--shade);color:#f4ecdc;padding:2.4rem 2rem;text-align:center;position:relative;font:400 1.35rem/1.45 var(--serif);font-style:italic}
.intertitle::before{content:"";position:absolute;inset:.6rem;border:1px solid rgba(243,200,134,.55);pointer-events:none}
.intertitle::after{content:"";position:absolute;inset:1rem;border:1px solid rgba(243,200,134,.25);pointer-events:none}
.intertitle p{margin:0}
.intertitle .small{display:block;font:400 .8rem/1.3 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#f3c886;margin-top:1rem}

/* ---------- figures ---------- */
figure{margin:2rem 0}
figcaption{font:400 .95rem/1.5 var(--serif);color:var(--muted);margin-top:.7rem}
figcaption .cr{display:block;font-size:.82rem;margin-top:.25rem}
.photo{background:var(--bg-2);padding:.6rem;border:1px solid var(--rule)}
.pair{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media (min-width:48rem){.pair{grid-template-columns:1fr 1fr}}
.stage{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:1.2rem;margin:2rem 0}
.stage.dark{background:var(--shade);border-color:var(--shade);color:#f4ecdc}
.stage svg{display:block;width:100%;height:auto}
.ctl{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin-top:1rem;font-size:1rem}
.ctl label{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ctl input[type=range]{width:min(15rem,62vw);accent-color:var(--lamp)}
.stage.dark .ctl input[type=range]{accent-color:#f3b35a}
.btn{font:600 .98rem/1 var(--serif);padding:.7rem 1.05rem;min-height:2.75rem;border-radius:4px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink)}
.stage.dark .btn{background:#f4ecdc;color:#15110d;border-color:#f4ecdc}
.stage.dark .btn.ghost{background:transparent;color:#f4ecdc}
.btn[aria-pressed="true"]{background:var(--lamp);border-color:var(--lamp);color:#15110d}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:4px;overflow:hidden;flex-wrap:wrap}
.seg button{font:500 .95rem/1 var(--serif);padding:.65rem .8rem;min-height:2.75rem;border:0;border-right:1px solid var(--rule);background:transparent;color:inherit;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--lamp);color:#15110d}
.readout{font:400 1rem/1.45 var(--serif);margin:.9rem 0 0;min-height:1.45em}
.readout b{font:400 1.05em/1 var(--mono);color:var(--accent-ink);font-variant-numeric:tabular-nums}
.stage.dark .readout{color:#efe4cf}
.stage.dark .readout b{color:#f3b35a}
.big-num{font:900 clamp(3rem,10vw,6rem)/.9 var(--display);color:var(--accent-ink)}
.stage-note{font-size:.95rem;color:var(--muted);margin:.7rem 0 0}
.stage.dark .stage-note{color:#d9ccb4}

/* two dots */
.dots svg circle{fill:var(--lamp)}
.dots svg .ghost{fill:none;stroke:var(--rule);stroke-dasharray:3 4}

/* phenakistiscope */
.disc-wrap{display:grid;gap:1.4rem;grid-template-columns:1fr;align-items:center}
@media (min-width:48rem){.disc-wrap{grid-template-columns:1.1fr 1fr}}
.disc .face{fill:#efe2c6}.disc .ring{fill:none;stroke:#8a6a3a;stroke-width:1.2}
.disc .slit{fill:#15110d}.disc .fig{fill:#8c1f1f}.disc .fig-l{stroke:#8c1f1f;stroke-width:3.2;stroke-linecap:round;fill:none}
.disc .hub{fill:#8a6a3a}
.viewer{background:#15110d;border-radius:6px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.viewer svg{width:100%;height:100%}
.blur-on .disc-rot{filter:url(#spinBlur)}

/* Muybridge */
.horse-view{position:relative;background:#e9e2d2;border:1px solid var(--rule);aspect-ratio:var(--ar,1.3);overflow:hidden}
.horse-view canvas{width:100%;height:100%;display:block}
.frames{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:.8rem}
@media (min-width:40rem){.frames{grid-template-columns:repeat(12,1fr)}}
.frames button{padding:0;border:2px solid transparent;background:var(--bg-2);cursor:pointer;aspect-ratio:1.3;overflow:hidden;min-height:2.75rem}
.frames button canvas{width:100%;height:100%;display:block}
.frames button[aria-current="true"]{border-color:var(--lamp)}
.frames button.air{box-shadow:inset 0 -4px 0 var(--velvet)}

/* programme ticket */
.programme{background:var(--surface);border:1px solid var(--rule);padding:1.6rem 1.4rem;margin:2rem 0;position:relative}
.programme h3{margin:0 0 .3rem;font:900 1.6rem/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.programme .sub{font:400 .85rem/1.4 var(--mono);color:var(--muted);margin:0 0 1rem}
.programme ol{margin:0;padding:0;list-style:none;counter-reset:f;columns:1}
@media (min-width:40rem){.programme ol{columns:2;column-gap:2rem}}
.programme li{counter-increment:f;padding:.35rem 0 .35rem 2.2rem;position:relative;break-inside:avoid;border-bottom:1px dotted var(--rule);font-size:1rem}
.programme li::before{content:counter(f,decimal-leading-zero);position:absolute;left:0;top:.45rem;font:400 .8rem/1 var(--mono);color:var(--accent-ink)}
.programme li i{color:var(--muted);font-style:italic;display:block;font-size:.9rem}

/* the machine */
.machine svg .frame-cell{fill:#3b3027}.machine svg .frame-img{fill:#e7d6b4}
.machine svg .perf{fill:#0d0b09}
.machine svg .strip{fill:#241d16}
.machine svg .gear{fill:#6d5a45;stroke:#a88d6c;stroke-width:1}
.machine svg .cross{fill:#b8955f;stroke:#e7c992;stroke-width:1}
.machine svg .pin{fill:#f3b35a}
.machine svg .blade{fill:#0b0908;stroke:#f3b35a;stroke-width:1.2}
.machine svg .lamp{fill:#f3b35a}
.machine svg .lens{fill:#2c2620;stroke:#a88d6c}
.machine svg .scr{fill:#2a241d;stroke:#6d5a45}
.machine svg .trace{fill:none;stroke:#f3b35a;stroke-width:2}
.machine svg .trace-fill{fill:rgba(243,179,90,.18)}
.machine svg .axis{stroke:#6d5a45;stroke-width:1}
.machine svg text{font:400 12px var(--mono);fill:#d9ccb4}
.machine svg .lbl{font:500 13px var(--serif);fill:#efe4cf}
.machine svg .beam-m{fill:rgba(255,210,140,.22)}

/* crank */
.crank svg .wheel{fill:#2a241d;stroke:#a88d6c;stroke-width:2}
.crank svg .arm{stroke:#b8955f;stroke-width:9;stroke-linecap:round}
.crank svg .knob{fill:#f3b35a;cursor:grab}
.crank svg .spoke{stroke:#6d5a45;stroke-width:2}
.crank-grid{display:grid;gap:1rem;grid-template-columns:1fr;align-items:center}
@media (min-width:48rem){.crank-grid{grid-template-columns:.8fr 1.2fr}}
.crank .dial{touch-action:none;user-select:none;-webkit-user-select:none}

/* sound */
.sound svg .strip{fill:#1b1611}.sound svg .track-bg{fill:#050404}.sound svg .track{fill:#f6eedd}
.sound svg .frame{fill:#3b3027;stroke:#5a4a3a}.sound svg .perf{fill:#0d0b09}
.sound svg .slit{fill:#f3b35a}.sound svg .cell{fill:#6d5a45;stroke:#f3b35a}
.sound svg text{font:400 12px var(--mono);fill:#d9ccb4}

/* colour */
.sep{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0}
.sep figure{margin:0}
.sep canvas,.mix canvas{width:100%;height:auto;display:block;background:#000}
.sep figcaption{font-size:.85rem;margin-top:.35rem}
.mix{max-width:40rem;margin:0 auto}

/* aspect */
.aspect svg .sky{fill:url(#skyGrad)}
.aspect svg .mask{fill:var(--bg)}
.aspect svg .edge{fill:none;stroke:var(--lamp);stroke-width:2}
.aspect svg .curtain{fill:var(--velvet)}
.aspect svg text{font:400 13px var(--mono);fill:var(--muted)}
.tv-chart .bar{fill:var(--lamp)}.tv-chart text{font:400 12px var(--mono);fill:var(--muted)}
.tv-chart .axis{stroke:var(--rule)}

/* digital */
.chart svg text{font:400 12px var(--mono);fill:var(--muted)}
.chart svg .grid{stroke:var(--rule);stroke-width:1}
.chart svg .film{fill:var(--ink-2)}
.chart svg .dig{fill:var(--lamp)}
.chart svg .lbl{font:500 13px var(--serif);fill:var(--ink)}

/* yours */
.calc{display:grid;gap:1rem;grid-template-columns:1fr}
.calc label{display:grid;gap:.4rem;font-size:1rem}
.calc input[type=number]{font:400 1.1rem/1 var(--mono);padding:.6rem .7rem;width:8rem;border:1px solid var(--rule);background:var(--bg);color:var(--ink);border-radius:4px;min-height:2.75rem}
.result{font:400 1.3rem/1.45 var(--serif)}
.result b{font:900 2.4rem/1 var(--display);color:var(--accent-ink);display:block;margin:.3rem 0}

/* timeline strip */
.strip-tl{display:flex;gap:0;overflow-x:auto;padding:1.4rem 0;margin:2rem 0;scroll-snap-type:x mandatory;background:var(--film);border-radius:4px;position:relative}
.strip-tl::before,.strip-tl::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent 0 10px,var(--hole) 10px 20px);opacity:.9}
.strip-tl::before{top:4px}.strip-tl::after{bottom:4px}

/* sources */
.block{padding:4rem 0 2rem;border-top:1px solid var(--rule)}
.block h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.srcs{padding-left:1.1rem;font-size:.95rem}
.srcs li{margin:.4rem 0}
.method{font-size:1rem}
.foot{border-top:1px solid var(--rule);padding:2rem 1.25rem 3rem;text-align:center;font-size:.95rem;color:var(--muted)}
.foot p{margin:.3rem 0}
.nf main{max-width:36rem;margin:20vh auto;padding:0 1.25rem}

.fallback{font-size:.95rem;color:var(--muted)}
html.js .fallback.js-hide{display:none}
html:not(.js) .needs-js{display:none}
canvas{max-width:100%}
.disc-wrap>*,.crank-grid>*,.sep>*,.pair>*{min-width:0}
.aspect svg .mask{fill:var(--surface)}
.block{max-width:43rem;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
@media (max-width:48rem){.hero-art .hero-horse{opacity:.55}.hero-copy{padding-bottom:2rem}}
.srcs a,figcaption a{overflow-wrap:anywhere}
.nw{white-space:nowrap}
.machine-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.machine-scroll svg{min-width:620px}
@media (max-width:40rem){.hero h1{font-size:clamp(2.5rem,12vw,3.4rem)}.hero .kicker{margin-top:40vh}}
.stage.dark a{color:#f6c47c}
.seg button[aria-pressed="true"],.btn[aria-pressed="true"]{background:#f3b35a;border-color:#f3b35a;color:#15110d}