/* The site's stylesheet: index.html's <style>, written here by scripts/build-site.mjs for the chapters. */
  /* One document: it opens at night, turns to paper for reading, and keeps two dark rooms
     inside the paper. One grid (12 columns, registration crosses), one type system
     (Archivo wide, Newsreader, Plex Mono) and one accent. Every change of world is the
     next world rising in stepped blocks. */
  :root {
    --paper: #e8e6e1;
    --ink: #131312;
    --night: #0b0b0a;
    --bone: #e8e6e1;
    --accent: #ea5a1e;
    --ink-soft: #57544e;
    --rule: rgba(19, 19, 18, .2);
    --mark: rgba(19, 19, 18, .42);
    --cross: var(--ink);
    --cross-o: .6;
    --f-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --f-text: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --m: clamp(16px, 2vw, 32px);
    --g: clamp(12px, 1.67vw, 24px);
    --fs-mono: clamp(11.5px, .8vw, 12px);
    --ease: cubic-bezier(.2, .7, 0, 1);
    --handoff: 110svh;
    --pin: 110svh;
    --bpin: 56svh;
    /* the wear on the instant-film cards (04), drawn procedurally (feTurbulence) */
    --wear-sq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='535' viewBox='0 0 440 535' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='18'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .27 0 0 0 0 .18 1.5 0 0 0 -.7'/%3E%3C/filter%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .014' numOctaves='3' seed='19'/%3E%3CfeColorMatrix values='0 0 0 0 .64 0 0 0 0 .52 0 0 0 0 .3 1.7 0 0 0 -.78'/%3E%3C/filter%3E%3Cfilter id='e' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='5' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .018' numOctaves='3' seed='20' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -.95' result='k'/%3E%3CfeComposite in='b' in2='k' operator='in' result='w'/%3E%3CfeColorMatrix in='w' values='0 0 0 0 .44 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .34 0'/%3E%3C/filter%3E%3Cfilter id='f' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='.9' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07 .07' numOctaves='2' seed='21' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 0 0 0 -.7' result='k'/%3E%3CfeComposite in='b' in2='k' operator='in' result='w'/%3E%3CfeColorMatrix in='w' values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .32 0'/%3E%3C/filter%3E%3Cfilter id='y' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='440' height='535' fill='none' stroke='rgb(196,166,104)' stroke-opacity='.15' stroke-width='40' filter='url(%23y)'/%3E%3Crect width='440' height='535' filter='url(%23m)' opacity='.34'/%3E%3Crect width='440' height='535' fill='none' stroke='black' stroke-width='22' filter='url(%23e)'/%3E%3Crect width='440' height='535' fill='none' stroke='black' stroke-width='4' filter='url(%23f)'/%3E%3Crect width='440' height='535' filter='url(%23g)' opacity='.22'/%3E%3Cpath d='M30.0 452.0Q37.0 445.8 43.7 434.8' fill='none' stroke='rgb(92,80,60)' stroke-opacity='0.17' stroke-width='0.62' stroke-linecap='round'/%3E%3Cpath d='M396.0 500.0Q391.5 507.7 382.7 512.2' fill='none' stroke='rgb(92,80,60)' stroke-opacity='0.15' stroke-width='0.54' stroke-linecap='round'/%3E%3Cpath d='M418.0 120.0Q418.3 131.4 426.2 144.7' fill='none' stroke='rgb(255,255,250)' stroke-opacity='0.64' stroke-width='0.60' stroke-linecap='round'/%3E%3Cpath d='M12.0 260.0Q10.2 268.4 8.4 279.7' fill='none' stroke='rgb(255,255,250)' stroke-opacity='0.66' stroke-width='0.88' stroke-linecap='round'/%3E%3Cpath d='M360.0 446.0Q372.0 457.8 385.6 461.7' fill='none' stroke='rgb(255,255,250)' stroke-opacity='0.47' stroke-width='0.83' stroke-linecap='round'/%3E%3Cpath d='M70.0 512.0Q79.7 507.1 83.4 507.9' fill='none' stroke='rgb(92,80,60)' stroke-opacity='0.15' stroke-width='0.72' stroke-linecap='round'/%3E%3C/svg%3E");
    --wear-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='430' viewBox='0 0 540 430' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='30'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .27 0 0 0 0 .18 1.5 0 0 0 -.7'/%3E%3C/filter%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .014' numOctaves='3' seed='31'/%3E%3CfeColorMatrix values='0 0 0 0 .64 0 0 0 0 .52 0 0 0 0 .3 1.7 0 0 0 -.78'/%3E%3C/filter%3E%3Cfilter id='e' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='5' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .018' numOctaves='3' seed='32' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -.95' result='k'/%3E%3CfeComposite in='b' in2='k' operator='in' result='w'/%3E%3CfeColorMatrix in='w' values='0 0 0 0 .44 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .34 0'/%3E%3C/filter%3E%3Cfilter id='f' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='.9' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07 .07' numOctaves='2' seed='33' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 0 0 0 -.7' result='k'/%3E%3CfeComposite in='b' in2='k' operator='in' result='w'/%3E%3CfeColorMatrix in='w' values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .32 0'/%3E%3C/filter%3E%3Cfilter id='y' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='540' height='430' fill='none' stroke='rgb(196,166,104)' stroke-opacity='.15' stroke-width='40' filter='url(%23y)'/%3E%3Crect width='540' height='430' filter='url(%23m)' opacity='.34'/%3E%3Crect width='540' height='430' fill='none' stroke='black' stroke-width='22' filter='url(%23e)'/%3E%3Crect width='540' height='430' fill='none' stroke='black' stroke-width='4' filter='url(%23f)'/%3E%3Crect width='540' height='430' filter='url(%23g)' opacity='.22'/%3E%3Cpath d='M16.0 300.0Q20.4 288.5 24.0 279.5' fill='none' stroke='rgb(92,80,60)' stroke-opacity='0.16' stroke-width='0.62' stroke-linecap='round'/%3E%3Cpath d='M502.0 402.0Q495.4 408.2 488.7 416.9' fill='none' stroke='rgb(92,80,60)' stroke-opacity='0.13' stroke-width='0.89' stroke-linecap='round'/%3E%3Cpath d='M522.0 60.0Q520.9 71.4 526.1 83.7' fill='none' stroke='rgb(255,255,250)' stroke-opacity='0.51' stroke-width='0.64' stroke-linecap='round'/%3E%3Cpath d='M440.0 384.0Q458.9 374.5 469.8 367.7' fill='none' stroke='rgb(255,255,250)' stroke-opacity='0.60' stroke-width='0.67' stroke-linecap='round'/%3E%3C/svg%3E");
    --wear-wb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='430' viewBox='0 0 540 430' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='42'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .27 0 0 0 0 .18 1.5 0 0 0 -.7'/%3E%3C/filter%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .014' numOctaves='3' seed='43'/%3E%3CfeColorMatrix values='0 0 0 0 .64 0 0 0 0 .52 0 0 0 0 .3 1.7 0 0 0 -.78'/%3E%3C/filter%3E%3Cfilter id='e' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='5' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .018' numOctaves='3' seed='44' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -.95' result='k'/%3E%3CfeComposite in='b' in2='k' operator='in' result='w'/%3E%3CfeColorMatrix in='w' values='0 0 0 0 .44 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .34 0'/%3E%3C/filter%3E%3Cfilter id='f' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='.9' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07 .07' numOctaves='2' seed='45' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 0 0 0 -.7' result='k'/%3E%3CfeComposite in='b' in2='k' operator='in' result='w'/%3E%3CfeColorMatrix in='w' values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .32 0'/%3E%3C/filter%3E%3Cfilter id='y' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='540' height='430' fill='none' stroke='rgb(196,166,104)' stroke-opacity='.15' stroke-width='40' filter='url(%23y)'/%3E%3Crect width='540' height='430' filter='url(%23m)' opacity='.34'/%3E%3Crect width='540' height='430' fill='none' stroke='black' stroke-width='22' filter='url(%23e)'/%3E%3Crect width='540' height='430' fill='none' stroke='black' stroke-width='4' filter='url(%23f)'/%3E%3Crect width='540' height='430' filter='url(%23g)' opacity='.22'/%3E%3Cpath d='M40.0 404.0Q45.9 396.0 53.8 392.4' fill='none' stroke='rgb(92,80,60)' stroke-opacity='0.11' stroke-width='0.87' stroke-linecap='round'/%3E%3Cpath d='M520.0 210.0Q520.3 223.5 519.3 234.0' fill='none' stroke='rgb(255,255,250)' stroke-opacity='0.59' stroke-width='0.65' stroke-linecap='round'/%3E%3Cpath d='M300.0 8.0Q315.6 11.4 327.4 13.6' fill='none' stroke='rgb(255,255,250)' stroke-opacity='0.65' stroke-width='0.76' stroke-linecap='round'/%3E%3Cpath d='M120.0 382.0Q134.4 387.2 143.4 393.3' fill='none' stroke='rgb(255,255,250)' stroke-opacity='0.49' stroke-width='0.56' stroke-linecap='round'/%3E%3C/svg%3E");
    color-scheme: light;
  }
  /* The worlds are designed (night, paper, ink, accent); tokens are the same in both schemes. */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #e8e6e1; --ink: #131312; --night: #0b0b0a; } }
  :root[data-theme="dark"] { --paper: #e8e6e1; --ink: #131312; --night: #0b0b0a; }

  * { box-sizing: border-box; }
  /* no CSS smooth scrolling: it shifts ScrollTrigger's measurements; anchors scroll smoothly in JS */
  html { background: var(--night); }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--f-text); font-size: 18px; line-height: 1.45;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  }
  main { overflow-x: clip; }
  a { color: inherit; }
  img { max-width: 100%; }
  ::selection { background: var(--accent); color: var(--ink); }
  :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--paper); color: var(--ink); padding: 8px 12px; }
  .skip:focus { left: 8px; }
  [tabindex="-1"]:focus { outline: none; }

  .grain { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: url(assets/grain.png); opacity: .5; }

  .mono {
    font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 400;
    letter-spacing: .07em; line-height: 1.55; text-transform: uppercase; font-variant-numeric: tabular-nums;
  }
  .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
  .sec { position: relative; padding-inline: var(--m); }
  .lbl { margin: 0; }
  /* the dark worlds re-point the same tokens */
  .dark {
    color: var(--bone);
    --rule: rgba(232, 230, 225, .2); --ink-soft: #a7a39b; --mark: rgba(232, 230, 225, .45);
    --cross: var(--bone); --cross-o: .32;
  }

  /* registration crosses (the grid, made visible): only in the night and the dark rooms */
  .reg { position: absolute; left: var(--m); right: var(--m); top: 0; height: 0; pointer-events: none; z-index: 3; }
  .reg i { position: absolute; top: 0; width: 13px; height: 13px; transform: translate(-50%, -50%); }
  .reg i::before, .reg i::after { content: ""; position: absolute; background: var(--cross); opacity: var(--cross-o); }
  .reg i::before { left: 6px; top: 0; width: 1px; height: 13px; }
  .reg i::after { top: 6px; left: 0; width: 13px; height: 1px; }

  /* ---------- header: one bar, coloured by the world beneath it ---------- */
  .top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 20px var(--m) 15px; color: var(--hc);
    --hc: var(--bone); --hb: rgba(11, 11, 10, .95); --hr: rgba(232, 230, 225, .14); --sq: var(--accent);
    transition: transform .55s var(--ease), background-color .3s, color .3s, box-shadow .3s;
  }
  .top[data-world="dark"] { --hb: rgba(19, 19, 18, .96); }
  .top[data-world="paper"] { --hc: var(--ink); --hb: rgba(232, 230, 225, .96); --hr: rgba(19, 19, 18, .16); }
  .top[data-world="accent"] { --hc: var(--ink); --hb: var(--accent); --hr: rgba(19, 19, 18, .2); --sq: var(--ink); }
  .top.up { transform: translateY(-101%); }
  .top:focus-within { transform: none; }
  .top.solid { background: var(--hb); box-shadow: 0 1px 0 var(--hr); }
  .top a { text-decoration: none; }
  .top nav { display: flex; gap: clamp(14px, 2vw, 30px); }
  .top nav a { position: relative; }
  .top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
  .top nav a:hover::after { transform: scaleX(1); }
  .sq { display: inline-block; width: .7em; height: .7em; background: var(--sq); margin-left: .45em; vertical-align: -.02em; transition: background-color .3s; }

  /* =====================================================================
     HERO (night): a dust cloud assembles into the 2018 portrait. On the way out the
     portrait comes loose and falls, and paper rises in stepped blocks to take the page.
     ===================================================================== */
  .hero { position: relative; height: 100vh; height: 100svh; background: var(--night); }
  .js:not(.rm) .hero { height: calc(100svh + var(--handoff)); }
  .rm .hero, html:not(.js) .hero { height: auto; padding-bottom: calc(100vw / 24 * 3 + 24px); }
  .rm .hero-pin, html:not(.js) .hero-pin { position: relative; }
  .hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
  .gl-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
  html:not(.gl) .gl-field { display: none; }
  .hero .reg { top: 13.5svh; z-index: 4; --cross: #fbf9f3; --cross-o: .34; mix-blend-mode: difference; }
  /* the portrait's box: particles (WebGL) or the still photograph (no WebGL, reduced motion) at night,
     the paper print at the end of the hand-off. The print is the same crop, so the picture never moves. */
  .hero-plate, .hero-marks {
    position: absolute; margin: 0; left: 50%; top: 13.5svh; transform: translateX(-50%);
    --ar: 1.6117; --ph: 62svh; width: min(62vw, calc(var(--ph) * var(--ar))); aspect-ratio: var(--ar);
  }
  .hero-plate { z-index: 1; }
  .hero-plate .ph, .hero-plate .print { position: absolute; inset: 0; }
  .hero-plate img { display: block; width: 100%; height: 100%; object-fit: contain; }
  html.gl .hero-plate .ph img { visibility: hidden; }
  .hero-plate .print { visibility: hidden; }
  .hero-print { position: absolute; z-index: 3; display: block; pointer-events: none; }
  /* the finished hand-off: plain paper and the print as an image; the canvases are released */
  .hero-pin.paper { background: var(--paper); }
  .hero-pin.paper .gl-field, .hero-pin.paper .hero-stairs, .hero-pin.paper .hero-print, .hero-pin.paper .hero-plate .ph { visibility: hidden; }
  .hero-pin.paper .hero-plate .print { visibility: visible; }
  .hero-copy { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
  .hero-copy > * { will-change: opacity; }
  .hero-copy.inked { color: var(--ink); --rule: rgba(19, 19, 18, .2); --cross: var(--ink); --cross-o: .6; }
  .hero-copy.inked .hero-toc { border-top-color: var(--ink); }
  .hero-copy a { pointer-events: auto; }
  .hero-marks { pointer-events: none; }
  /* before the page script runs, the copy waits (it rises in after the name; the caption only shows on paper) */
  .js:not(.rm) .hero-sub, .js:not(.rm) .hero-toc, .js:not(.rm) .hero-marks { visibility: hidden; }
  .hero-marks .cap { position: absolute; left: 0; right: 0; top: 100%; margin-top: 12px; color: inherit; opacity: .78; }
  .hero-copy .hero-marks .cap .res { color: inherit; }
  .hero-sub {
    position: absolute; left: var(--m); top: calc(13.5svh + 22px); margin: 0; max-width: 13em;
    font-size: clamp(21px, 1.8vw, 29px); line-height: 1.22; letter-spacing: -.01em; text-wrap: balance;
  }
  .hero-toc {
    position: absolute; right: var(--m); top: calc(13.5svh + 22px);
    width: calc((100vw - 2 * var(--m) - 11 * var(--g)) / 12 * 3 + 2 * var(--g));
    display: grid; border-top: 1px solid rgba(232, 230, 225, .55);
  }
  .hero-toc a { display: grid; grid-template-columns: 3.4em 1fr; padding: 9px 0 8px; border-bottom: 1px solid var(--rule); text-decoration: none; transition: padding-left .45s var(--ease); }
  .hero-toc a span { color: var(--accent); }
  .hero-toc a:hover { padding-left: 10px; }
  .hero-stairs { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; z-index: 2; pointer-events: none; }
  /* the name is set twice: bone where the night is, ink where the paper has risen. Each copy is
     clipped to its world, block by block, from the same column heights the steps are drawn with. */
  .hero-name {
    position: absolute; z-index: 5; left: var(--m); right: var(--m); bottom: 3.4svh; margin: 0;
    font-family: var(--f-display); font-weight: 800; font-stretch: 125%; text-transform: uppercase;
    font-size: 12.2vw; line-height: .8; letter-spacing: -.045em; white-space: nowrap;
    color: #f0eee9;
  }
  .hero-name.ink { color: var(--ink); clip-path: inset(100% 0 0 0); }
  .rm .hero-name.ink, html:not(.js) .hero-name.ink { display: none; }
  .hero-name .ln { display: inline-block; overflow: hidden; vertical-align: top; padding-top: .03em; margin-top: -.03em; }
  .hero-name .w { display: inline-block; }

  /* ---------- plates (block-assembled photographs) ---------- */
  .plate { margin: 0; position: relative; }
  .frame { position: relative; width: 100%; }
  .frame img, .frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .frame img { object-fit: cover; }
  .frame canvas { pointer-events: none; }
  .js:not(.rm) .frame img { opacity: 0; }
  .js .frame.fail img, .js .frame.done img { opacity: 1; }
  .frame.done canvas { visibility: hidden; }
  .js .peek-frame.done img, .js:not(.rm) .peek-frame.done img { opacity: 1; }   /* must outrank the hidden-until-assembled rule below */
  .peek-frame.done canvas { visibility: hidden; }
  /* an accordion item closing above the one just opened collapses at once (the scroll takes up the difference) */
  .row.snap .row-panel, .row.snap .row-panel > div, .proj.snap .proj-shot, .proj.snap .proj-shot > div { transition: none !important; }
  .rm .frame canvas { display: none; }
  .cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; color: var(--ink-soft); }
  .cap .res, .cap .cap-r { color: var(--ink); min-width: 6ch; text-align: right; }
  .dark .cap .res, .dark .cap .cap-r { color: var(--bone); }
  /* the resolution readout (64 px ... 04 px) is part of the assembly: it shows only while a picture is
     being put together from blocks (the plate marks its figure .asm) and fades once it is whole */
  .cap .res { margin-left: auto; }
  .res { opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; }
  .asm .res { opacity: 1; visibility: visible; transition: opacity .15s linear, visibility 0s; }
  .rm .res { transition: none; }

  /* ---------- introduction ---------- */
  .intro { padding-block: clamp(120px, 13vw, 210px) clamp(110px, 12vw, 190px); }
  .intro .lbl { grid-column: 1 / 4; padding-top: .9em; }
  .lede { grid-column: 4 / 12; margin: 0; font-size: clamp(27px, 3.05vw, 47px); line-height: 1.17; letter-spacing: -.012em; text-wrap: pretty; }
  .ref { font-family: var(--f-mono); font-size: max(10px, .26em); font-weight: 500; letter-spacing: .02em; line-height: 0; position: relative; top: -1.75em; margin-left: .25em; vertical-align: baseline; }
  .ref a { text-decoration: none; padding: 2px 3px; border: 1px solid var(--rule); }
  .ref a:hover { background: var(--accent); border-color: var(--accent); }

  /* ---------- four areas (index rows + meter) ---------- */
  .areas { padding-bottom: clamp(230px, 20vw, 320px); }
  .areas-head { padding-block: 0 22px; }
  .areas-head .lbl { grid-column: 1 / 4; }
  .rows-wrap { position: relative; }
  .rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
  .row { border-bottom: 1px solid var(--rule); position: relative; }
  .row-link { padding-block: clamp(26px, 2.7vw, 42px); text-decoration: none; align-items: start; position: relative; -webkit-tap-highlight-color: transparent; cursor: pointer; }
  button.row-link { appearance: none; -webkit-appearance: none; width: 100%; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; padding-inline: 0; }
  .row-no { grid-column: 1 / 2; padding-top: .55em; }
  .row-title {
    grid-column: 2 / 7; font-family: var(--f-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase;
    font-size: clamp(26px, 3.15vw, 50px); line-height: .98; letter-spacing: -.03em; transition: transform .6s var(--ease);
  }
  .row-meta { grid-column: 11 / 13; padding-top: .55em; justify-self: end; text-align: right; white-space: nowrap; }
  .row-meta .go { display: block; color: var(--ink-soft); }
  .row-link::before { content: ""; position: absolute; left: calc(-1 * var(--m)); top: -1px; bottom: -1px; width: calc(var(--m) - 8px); background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
  .row-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
  .row-panel > div { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .55s; }
  .row.open .row-panel { grid-template-rows: 1fr; }
  .row.open .row-panel > div { visibility: visible; transition-delay: 0s; }
  .row-panel canvas { display: block; width: 100%; margin-bottom: 16px; }
  .row-panel a { display: inline-block; margin-bottom: 26px; text-decoration: none; border-bottom: 1px solid var(--ink); }
  .meter { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; display: none; }
  @media (hover: hover) and (pointer: fine) {
    .meter { display: block; }
    .row-panel { display: none; }
    .row.hot .row-title { transform: translateX(14px); }
    .row.hot .row-link::before { transform: scaleY(1); }
  }

  /* ---------- stairs (stepped-block world changes) ---------- */
  .stairs { position: absolute; left: 0; bottom: -1px; width: 100%; display: block; pointer-events: none; z-index: 0; }
  .s-host > .grid, .s-host > .rows-wrap, .s-host > .areas-head { position: relative; z-index: 1; }
  .room > .stairs { z-index: 30; }

  /* =====================================================================
     ROOMS: pinned stages built from depth layers (room / dust / title / players / kit / dust)
     ===================================================================== */
  /* the apron is ink below the pinned stage: the paper steps rise into it, never over the copy */
  .room { position: relative; background: var(--ink); padding-bottom: var(--apron); --apron: calc(100vw / 24 * 3 + 40px); --ttop: 16cqh; }
  .js:not(.rm) .room { height: calc(100svh + var(--pin) + var(--apron)); }
  .stage {
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; container-type: size; isolation: isolate; background: var(--ink);
    --ar: 1.5; --fx: .5; --fy: .5; --ax: .5; --ay: .5; --zm: 1; --ox: .5; --oy: .5;
    --fw: calc(max(100cqw, 100cqh * var(--ar)) * var(--zm));
  }
  .rm .stage { position: relative; }
  .fr {
    position: absolute; width: var(--fw); height: calc(var(--fw) / var(--ar));
    left: clamp(calc(100cqw - var(--fw)), calc(var(--ax) * 100cqw - var(--fx) * var(--fw)), 0px);
    top: clamp(calc(100cqh - var(--fw) / var(--ar)), calc(var(--ay) * 100cqh - var(--fy) * var(--fw) / var(--ar)), 0px);
    transform-origin: calc(var(--ox) * 100%) calc(var(--oy) * 100%); pointer-events: none;
  }
  .live [data-z] { will-change: transform; }
  .fr > img { position: absolute; max-width: none; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
  canvas.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .scrim { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
  .hud { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
  .hud a { pointer-events: auto; }
  .rv { opacity: var(--r, 1); transform: translate3d(0, calc((1 - var(--r, 1)) * 22px), 0); }

  #a01 .stage { --ar: 1.3333; --fx: .5; --fy: .4; --ax: .5; --ay: .46; --ox: .42; --oy: .3; }
  #a01 .t, .reel .t {
    position: absolute; left: var(--tl, var(--m)); top: var(--ttop); margin: 0; white-space: nowrap; color: var(--bone);
    font-family: var(--f-display); font-weight: 800; font-stretch: 125%; text-transform: uppercase;
    font-size: 14.6cqw; line-height: .8; letter-spacing: -.035em; transform-origin: 5% 10%;
  }
  #a01 .t .tw, .reel .t .tw { display: inline-block; }
  .reel .t { font-size: 11cqw; transform-origin: 50% 60%; }
  #a01 .scrim {
    background:
      linear-gradient(180deg, var(--ink) 0, rgba(19, 19, 18, .85) 3.5%, rgba(19, 19, 18, .35) 9%, rgba(19, 19, 18, 0) 15%),
      linear-gradient(0deg, var(--ink) 0, rgba(19, 19, 18, .94) 13%, rgba(19, 19, 18, .58) 30%, rgba(19, 19, 18, 0) 52%),
      radial-gradient(ellipse 80% 90% at 50% 45%, rgba(19, 19, 18, 0) 55%, rgba(19, 19, 18, .5) 100%);
  }
  #a01 .reg { top: calc(var(--ttop) - 26px); z-index: 7; }
  .room-lbl { position: absolute; left: var(--m); top: var(--ttop); margin: 0; color: var(--bone); }
  .room-lbl b { font-weight: 400; color: var(--accent); }
  .room .sub {
    position: absolute; right: var(--tr, var(--m)); margin: 0; color: var(--bone); text-align: right;
    top: calc(var(--ttop) + var(--tfs, 14.6cqw) * .8 + 14px);
    font-style: italic; font-size: clamp(26px, 2.6vw, 42px); line-height: 1; letter-spacing: -.01em; text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
  }
  .panel { position: absolute; left: var(--m); bottom: clamp(30px, 7cqh, 72px); width: min(44ch, 40cqw); display: flex; flex-direction: column; gap: 16px; }
  .panel .mono { margin: 0; color: var(--ink-soft); }
  .panel .mono b { font-weight: 400; color: var(--accent); margin-right: 1.2em; }
  .panel .e-big { color: var(--bone); opacity: .85; margin: 0 0 6px -.04em; }
  .prose { margin: 0; font-size: clamp(19px, 1.45vw, 22px); line-height: 1.42; text-wrap: pretty; }
  .num { color: var(--accent); font-variant-numeric: lining-nums; }

  /* ---------- entries ---------- */
  .entry { padding-block: clamp(40px, 4vw, 60px) clamp(120px, 12vw, 200px); }
  #a02 { padding-top: clamp(110px, 11vw, 170px); }
  .entry > .grid { align-items: start; }
  .e-no { grid-column: 1 / 4; display: grid; gap: 18px; }
  .e-big { font-family: var(--f-display); font-stretch: 125%; font-weight: 200; font-size: clamp(76px, 10.4vw, 176px); line-height: .78; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
  .e-plate { grid-column: 4 / 9; }
  .e-plate .frame { aspect-ratio: 1 / 1; }
  .e-plate.land .frame { aspect-ratio: 3 / 2; }
  .e-text { grid-column: 9 / 13; align-self: stretch; display: flex; flex-direction: column; gap: 24px; padding-left: var(--g); border-left: 1px solid var(--rule); }
  .e-title { margin: 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 2.25vw, 36px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
  .e-text p { margin: 0; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.42; max-width: 22em; text-wrap: pretty; }
  .e-link { margin-top: auto; align-self: flex-start; text-decoration: none; display: inline-flex; gap: .6em; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
  .e-link:hover { border-color: var(--accent); }
  .e-link i { font-style: normal; transition: transform .35s var(--ease); }
  .e-link:hover i { transform: translateX(4px); }
  .panel .e-link { margin-top: 4px; }

  /* software: project index */
  .projects { grid-column: 1 / -1; margin-top: clamp(70px, 7.5vw, 120px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
  .proj-head { grid-column: 4 / 13; display: grid; grid-template-columns: 1.15fr 2fr .9fr; gap: var(--g); padding-bottom: 12px; color: var(--ink-soft); margin: 0; }
  .proj-list { grid-column: 4 / 13; grid-row: 2; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); position: relative; z-index: 0; }
  .proj { border-bottom: 1px solid var(--rule); }
  .proj-row::before { content: ""; position: absolute; left: -10px; right: -10px; top: -1px; bottom: -1px; z-index: -1; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease); }
  .proj.hot .proj-row::before { transform: scaleX(1); }
  .proj-row {
    appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
    box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 1.15fr 2fr .9fr; gap: var(--g); align-items: baseline; padding: 21px 0 20px; position: relative;
  }
  .proj-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .proj-name { font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.02em; line-height: 1.05; transition: transform .5s var(--ease); }
  .proj-desc { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.35; }
  .proj-status { color: var(--ink-soft); transition: color .3s; }
  .proj-status::after { content: "+"; float: right; font-size: 14px; line-height: 1; transition: transform .4s var(--ease); }
  .proj.open .proj-status::after { transform: rotate(45deg); }
  .proj.hot .proj-name { transform: translateX(10px); }
  .proj.hot .proj-status { color: var(--ink); }
  .proj-shot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
  .proj-shot > div { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .55s; }
  .proj-shot img { display: block; width: 100%; max-width: 640px; height: auto; margin: 14px 0 22px; }
  .proj-shot img.tall { width: 46%; max-width: 260px; }
  .proj.open .proj-shot { grid-template-rows: 1fr; }
  .proj.open .proj-shot > div { visibility: visible; transition-delay: 0s; }
  .peek { grid-column: 1 / 4; grid-row: 2; position: relative; pointer-events: none; display: none; }
  .peek-move { position: absolute; left: 0; top: 0; right: 0; }
  .peek-frame { position: absolute; left: 0; top: 0; visibility: hidden; }
  .peek.on .peek-frame.on { visibility: visible; }
  .peek-frame canvas, .peek-frame img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
  .peek-frame img { object-fit: cover; object-position: 0 0; }
  .js:not(.rm) .peek-frame img { opacity: 0; }
  .rm .peek-frame canvas { display: none; }
  .peek-cap { position: absolute; left: 0; right: 0; top: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px 7px; background: var(--ink); color: var(--paper); }
  @media (hover: hover) and (pointer: fine) { .peek { display: block; } }
  #a04 { padding-bottom: clamp(240px, 22vw, 340px); }

  /* 04: three prints, as instant film. The family snapshot is a Polaroid (88 x 107 mm, a square
     picture); the 8mm still and the Seneca screen are wide instant prints (108 x 86 mm, 3:2). They
     lie in one row across the grid, evenly spaced on one baseline, each at its own slight angle.
     One unit (--u) is a millimetre of film, so both formats keep their real proportions. Only the
     card is treated, never the picture: data-pol="distressed" (the default) ages the card (uneven
     edge wear, yellowing toward the edges, scuffs, grain, one piece of tape); "clean" leaves it crisp
     (?pol=clean). Until a picture has assembled, its window is the dark of undeveloped film. */
  .a04-grid .e-no, .a04-grid .e-text { grid-row: 1; }
  .a04-grid .e-text { grid-column: 4 / 10; }
  .pols {
    grid-column: 1 / -1; grid-row: 2; margin-top: clamp(72px, 7vw, 120px);
    display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: auto auto; justify-content: space-between;
    container-type: inline-size; --uw: 370; --u: min(calc(100cqw / var(--uw)), .45svh);
  }
  .pol { position: relative; z-index: 1; min-width: 0; width: calc(var(--pw) * var(--u)); display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .pol > .plate { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
  .pol-sq { --pw: 88; --pt: 6; --pb: 22; --wear: var(--wear-sq); --r: -2.5deg; --rh: -1.5deg; z-index: 3; }
  .pol-w { --pw: 108; --pt: 5; --pb: 15; --wear: var(--wear-wa); --r: 1.5deg; --rh: .5deg; }
  .pol-w + .pol-w { --wear: var(--wear-wb); --r: -1deg; --rh: 0deg; z-index: 2; }
  .pol-deal { align-self: end; position: relative; transform-origin: 50% 60%; }
  .pol-card {
    position: relative; padding: calc(var(--pt) * var(--u)) calc(4.5 * var(--u)) calc(var(--pb) * var(--u)); border-radius: calc(.6 * var(--u));
    transform: rotate(var(--r)); transform-origin: 50% 60%;
    background: var(--wear) 0 0 / 100% 100% no-repeat,
      radial-gradient(130% 120% at 50% 42%, rgba(255, 252, 240, 0) 52%, rgba(186, 156, 96, .13) 100%),
      linear-gradient(162deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%, rgba(60, 40, 10, .03)), #f1ede3;
    box-shadow: 0 .5px .5px rgba(40, 30, 15, .2), 0 1px 3px rgba(40, 30, 15, .12), 0 6px 14px -4px rgba(40, 30, 15, .16), 0 18px 30px -14px rgba(40, 30, 15, .24);
  }
  /* deeper shadows: one while a card is in the air (being dealt), one for the pointer */
  .pol-card::before, .pol-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; }
  .pol-card::before { opacity: var(--lift, 0); box-shadow: 0 3px 6px rgba(40, 30, 15, .1), 0 24px 40px -12px rgba(40, 30, 15, .3); }
  .pol-card::after { box-shadow: 0 2px 4px rgba(40, 30, 15, .08), 0 16px 30px -10px rgba(40, 30, 15, .26); transition: opacity .5s var(--ease); }
  .pol .frame { aspect-ratio: 1 / 1; background: #262521; }
  .pol-w .frame { aspect-ratio: 3 / 2; }
  .pol .frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(20, 16, 10, .16), inset 0 1px 1.5px rgba(20, 16, 10, .2); }
  .pol-pen {
    position: absolute; left: calc(4.5 * var(--u)); right: calc(4.5 * var(--u)); bottom: 0; height: calc(var(--pb) * var(--u));
    display: flex; align-items: center; justify-content: center; white-space: nowrap;
    font-family: var(--f-text); font-style: italic; font-weight: 400; font-size: calc(5.3 * var(--u)); line-height: 1; letter-spacing: -.005em;
    color: #262838; opacity: .86; mix-blend-mode: multiply;
  }
  .pol-sq .pol-pen { padding-bottom: calc(1.5 * var(--u)); }
  /* matte tape across the top edge, clear of the picture */
  .pol-tape { position: absolute; left: 50%; top: calc(-3.6 * var(--u)); width: 34%; height: calc(7.4 * var(--u)); transform: translateX(-50%) rotate(-3deg); filter: drop-shadow(0 .5px .6px rgba(60, 50, 30, .16)); pointer-events: none; }
  .pol-tape::before {
    content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(252, 251, 246, .8), rgba(238, 236, 228, .74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(120, 110, 90, .1);
    clip-path: polygon(1.5% 6%, 0 22%, 2% 38%, .5% 55%, 2.2% 72%, 0 88%, 1.8% 100%, 98.4% 100%, 100% 86%, 98% 70%, 99.6% 52%, 97.8% 36%, 100% 18%, 98.2% 0, 3% 0);
  }
  [data-pol="clean"] .pol-card { background: linear-gradient(162deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .018)), #f7f6f2; }
  [data-pol="clean"] .pol-tape { display: none; }
  [data-pol="clean"] .pol-pen { color: #1c1e2a; opacity: .92; }
  .pol .cap { margin-top: clamp(18px, 1.7vw, 26px); opacity: var(--cap, 1); }
  .pol .cap2 .l1 > span:first-child { min-width: 0; }
  .pol .cap2 a { position: relative; }
  .pol .cap2 a::after { content: ""; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -14px; }   /* a 44px target */
  /* the pointer lifts a card a little and straightens it */
  @media (hover: hover) and (pointer: fine) {
    html:not(.rm) .pol-card { transition: transform .5s var(--ease); }
    html:not(.rm) .pol-deal:hover > .pol-card { transform: translateY(-5px) rotate(var(--rh)); }
    html:not(.rm) .pol-deal:hover > .pol-card::after { opacity: 1; }
    .pol:hover { z-index: 4; }
  }
  .frame video.film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .5s; pointer-events: none; }
  .frame.done.run video.film { opacity: 1; }
  .cap2 { display: block; }
  .cap2 .l1, .cap2 .l2 { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
  .cap2 .l2 { flex-wrap: wrap; margin-top: 4px; }
  .cap2 a { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; transition: border-color .3s; }
  .cap2 a:hover { border-color: var(--accent); }
  .cap2 a i { font-style: normal; }

  /* sound: a small capsule in the meter's own language. Four bars at rest; they move, in the accent,
     while the clip plays with sound. Muted by default, on only when pressed. */
  .snd {
    appearance: none; -webkit-appearance: none; margin: 0; border: 0; cursor: pointer; line-height: 1;
    display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 7px 13px 6px 11px; border-radius: 999px;
    background: var(--ink); color: var(--paper); white-space: nowrap; -webkit-tap-highlight-color: transparent;
  }
  .snd:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .snd .bars { display: inline-flex; align-items: center; gap: 2px; height: 11px; }
  .snd .bars i { width: 3px; height: 5px; border-radius: 2px; background: currentColor; opacity: .6; }
  .snd .bars i:nth-child(2) { height: 8px; } .snd .bars i:nth-child(3) { height: 6px; } .snd .bars i:nth-child(4) { height: 4px; }
  .snd[aria-pressed="true"] .bars i { background: var(--accent); opacity: 1; animation: snd .62s ease-in-out infinite alternate; }
  .snd[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: -.21s; }
  .snd[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: -.44s; }
  .snd[aria-pressed="true"] .bars i:nth-child(4) { animation-delay: -.33s; }
  @keyframes snd { from { height: 3px; } to { height: 11px; } }
  .rm .snd .bars i { animation: none !important; }
  .snd .on { display: none; } .snd[aria-pressed="true"] .on { display: inline; } .snd[aria-pressed="true"] .off { display: none; }
  .row-panel .snd { margin: 0 0 26px 18px; vertical-align: top; }
  @media (hover: hover) and (pointer: fine) {
    /* inside the meter window, over the row it belongs to */
    .row .snd { position: absolute; z-index: 5; left: var(--sx, 50%); top: calc(50% + 10px); opacity: 0; pointer-events: none; transition: opacity .25s; }
    .row.hot .snd, .row:hover .snd, .row .snd:focus-visible, .row.sounding .snd { opacity: 1; pointer-events: auto; transition: opacity .35s .3s; }
    .row.sounding .snd, .row .snd:focus-visible { transition-delay: 0s; }
  }

  /* ---------- background: the second dark room. The band reel runs the full grid and holds
     still (pinned) while its layers move; the word sits behind the band, as "Sessions" does in room 1 ---------- */
  .bg {
    background: var(--ink); padding-block: clamp(64px, 6.5vw, 100px) clamp(250px, 21vw, 330px);
    --rh: min(calc((100vw - 2 * var(--m)) / 2.2), calc(100svh - 176px));
  }
  .reel-pin { position: relative; }
  .js:not(.rm) .reel-pin::after { content: ""; display: block; height: var(--bpin); }
  .reel-stick { position: relative; }
  .js:not(.rm) .reel-stick { position: sticky; top: max(58px, calc((100svh - var(--rh) - 78px) / 2)); }
  .bg-head { align-items: baseline; padding-bottom: 14px; }
  .bg-head .lbl { grid-column: 1 / 7; }
  .reel-wrap { position: relative; }
  .reel {
    position: relative; height: var(--rh); overflow: hidden; container-type: size; isolation: isolate; background: #140c09;
    --ar: 1.3333; --fx: .5; --fy: .5; --ax: .5; --ay: .5; --zm: 1; --ox: .5; --oy: .42;
    --fw: calc(max(100cqw, 100cqh * var(--ar)) * var(--zm));
  }
  /* the back wall is dimmed behind the word, so bone type holds against the stage lights */
  .reel .dim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 9, 7, .62) 0, rgba(14, 9, 7, .5) 22%, rgba(14, 9, 7, .12) 40%, rgba(14, 9, 7, 0) 52%); }
  .reel .t { position: absolute; left: var(--tl, 8%); top: var(--tt, 8cqh); }
  .reel-stick > .cap { margin-top: 12px; }
  .bg-body { margin-top: clamp(56px, 6vw, 96px); }
  .bg-text { grid-column: 7 / 13; }
  .bg-p { margin: 0; font-size: clamp(25px, 2.3vw, 36px); line-height: 1.2; letter-spacing: -.01em; text-wrap: pretty; }
  .bg-p i { font-style: italic; white-space: nowrap; }

  /* ---------- in their words (paper): an index of pulls. Each row is one person: the line lifted
     from their note, set large, with the note itself one step away. The portrait waits in grey and
     is assembled in its own colour when the note is opened. ---------- */
  .words { padding-block: clamp(100px, 10vw, 164px) clamp(250px, 22vw, 340px); }
  .words > .grid, .words > .qs { position: relative; z-index: 1; }
  .w-head { align-items: start; }
  .w-head .lbl { grid-column: 1 / -1; }
  .w-title {
    grid-column: 1 / -1; margin: clamp(22px, 2.6vw, 44px) 0 0; white-space: nowrap;
    font-family: var(--f-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase;
    font-size: clamp(48px, 8.4vw, 168px); line-height: .8; letter-spacing: -.05em;
  }
  .w-press { grid-column: 4 / 11; margin: clamp(56px, 6vw, 100px) 0 clamp(64px, 7vw, 116px); }
  .w-press blockquote { margin: 0; }
  .w-press p { position: relative; margin: 0; font-size: clamp(24px, 2.3vw, 38px); line-height: 1.16; letter-spacing: -.01em; }
  .w-press figcaption { margin-top: 16px; color: var(--ink-soft); }
  /* quotation marks hang in the margin so every line starts on the grid */
  .w-press p::before, .q-pull p::before { content: "\201C"; position: absolute; right: 100%; }
  .w-press p::after, .q-pull p::after { content: "\201D"; }
  /* a title inside a mono line is set in the text face, as it would be in a printed credit */
  .mono cite { font-family: var(--f-text); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.32em; line-height: 1; }

  .qs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
  .q { position: relative; border-bottom: 1px solid var(--rule); padding-block: clamp(30px, 3.1vw, 50px) clamp(26px, 2.7vw, 44px); align-items: start; }
  /* an open note is marked in the margin with the accent, as a row is when it is chosen above */
  .q::before { content: ""; position: absolute; left: calc(-1 * var(--m)); top: -1px; bottom: -1px; width: calc(var(--m) - 8px); background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .55s var(--ease); }
  .q.open::before { transform: scaleY(1); }
  .q-no { grid-column: 1 / 2; padding-top: clamp(8px, .9vw, 16px); }
  /* a gutter short of column 3, so the pull's opening mark hangs in clear paper */
  .q-photo { grid-column: 2 / 4; margin-right: var(--g); }
  .q-photo .frame { aspect-ratio: 1 / 1; background: #d9d6cf; }
  .q-photo .frame img { filter: grayscale(1) contrast(1.04); transition: filter .9s var(--ease); }
  .js .q-photo .frame img { opacity: 1; }
  .q.colour .q-photo .frame img { filter: none; transition: none; }
  .q-main { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
  .q-pull { grid-column: 1 / 9; margin: 0; }
  .q-pull p { position: relative; margin: 0; font-size: clamp(30px, 3.9vw, 72px); line-height: 1.04; letter-spacing: -.022em; text-wrap: balance; overflow-wrap: break-word; }
  .q-by, .q-area { margin: clamp(20px, 2vw, 32px) 0 0; }
  .q-by { grid-column: 1 / 5; }
  .q-area { grid-column: 5 / 8; }
  .q-by > span, .q-area > span { display: block; }
  .q-name { font-weight: 500; }
  .q-role, .q-about { color: var(--ink-soft); }
  .q-area b { font-weight: 400; color: var(--accent); margin-right: 1.2em; }
  /* the disclosure: a plain mono line with the registration cross, which turns to a close mark */
  .q-tog {
    grid-column: 8 / 10; justify-self: end; margin-top: calc(clamp(20px, 2vw, 32px) - 13px);
    appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
    min-height: 44px; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  }
  .q-tog .u { border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: border-color .3s; }
  .q-tog:hover .u { border-color: var(--accent); }
  .q-tog .x { position: relative; width: 13px; height: 13px; flex: none; transition: transform .5s var(--ease); }
  .q-tog .x::before, .q-tog .x::after { content: ""; position: absolute; background: currentColor; }
  .q-tog .x::before { left: 6px; top: 0; width: 1.5px; height: 13px; }
  .q-tog .x::after { top: 6px; left: 0; width: 13px; height: 1.5px; }
  .q-tog:hover .x { transform: rotate(90deg); }
  .q.open .q-tog .x { transform: rotate(45deg); }
  .q-tog .shut { display: inline; } .q-tog .opened { display: none; }
  .q.open .q-tog .shut { display: none; } .q.open .q-tog .opened { display: inline; }
  html:not(.js) .q-tog { display: none; }
  /* the full note: open without the page script, folded (0fr) with it; the row's height animates */
  .q-note { grid-column: 1 / 8; display: grid; grid-template-rows: 1fr; }
  .q-note > div { overflow: hidden; min-height: 0; }
  .js .q-note { grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
  .js .q-note > div { visibility: hidden; transition: visibility 0s .6s; }
  .js .q.open .q-note { grid-template-rows: 1fr; }
  .js .q.open .q-note > div { visibility: visible; transition-delay: 0s; }
  .rm .q-note, .rm .q-note > div, .rm .q::before, .rm .q-full mark { transition: none !important; }
  .q-full { margin: clamp(22px, 2.2vw, 34px) 0 6px; padding-left: var(--g); border-left: 1px solid var(--rule); }
  .q-full p { margin: 0; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.45; max-width: 33em; text-wrap: pretty; }
  /* the line that was lifted, underlined in the accent as the note opens */
  .q-full mark {
    color: inherit; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 92% / 0 2px;
    transition: background-size .9s var(--ease) .3s;
  }
  .q.open .q-full mark, html:not(.js) .q-full mark { background-size: 100% 2px; }
  .w-close { margin-top: clamp(26px, 2.6vw, 40px); align-items: baseline; }
  .w-close p { grid-column: 4 / 9; margin: 0; }
  .w-close .e-link { grid-column: 9 / 13; justify-self: end; }
  .w-close .e-link:hover i { transform: translate(3px, -3px); }

  /* ---------- contact (accent) ---------- */
  .contact { background: var(--accent); color: var(--ink); padding-top: clamp(30px, 3vw, 50px); }
  .c-grid { row-gap: 40px; padding-bottom: clamp(90px, 10vw, 160px); }
  .contact .lbl { grid-column: 1 / 4; }
  .c-title { grid-column: 1 / -1; margin: clamp(20px, 3vw, 50px) 0 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(56px, 11.2vw, 200px); line-height: .8; letter-spacing: -.05em; }
  .c-p { grid-column: 1 / 6; margin: 0; font-size: clamp(24px, 2.25vw, 35px); line-height: 1.2; letter-spacing: -.01em; max-width: 15em; }
  .form { grid-column: 7 / 13; display: grid; gap: 26px; }
  .field { display: grid; gap: 4px; }
  .field input, .field textarea { font: inherit; font-family: var(--f-text); font-size: 21px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 8px 0 10px; width: 100%; resize: vertical; }
  .field textarea { min-height: 120px; }
  .field input:focus, .field textarea:focus { outline: none; border-bottom-width: 3px; padding-bottom: 8px; background: rgba(19, 19, 18, .07); }
  .field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
  .field input::placeholder, .field textarea::placeholder { color: rgba(19, 19, 18, .65); }
  fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
  fieldset.field legend { padding: 0; margin-bottom: 10px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { position: relative; }
  .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .chip span { display: inline-block; border: 1px solid var(--ink); padding: 8px 13px 7px; cursor: pointer; transition: background-color .2s, color .2s; }
  .chip input:checked + span { background: var(--ink); color: var(--accent); }
  .chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
  .send-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
  .send { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 0; padding: 17px 26px 16px; cursor: pointer; display: inline-flex; gap: 14px; align-items: center; }
  .send:hover i { transform: translateX(4px); }
  .send:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .send:disabled { cursor: default; opacity: .55; }
  .send i { font-style: normal; transition: transform .3s var(--ease); }
  .status { margin: 0; min-height: 1.5em; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .foot { position: relative; padding-bottom: 26px; }
  .foot-name { margin: 0; white-space: nowrap; display: block; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 12.6vw; line-height: .8; letter-spacing: -.05em; }
  .foot-name span { display: inline-block; }
  .foot-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--ink); }
  .foot-row a { text-decoration: none; }
  .contact { --cross-o: .8; }

  /* ---------- tablet ---------- */
  @media (max-width: 1100px) {
    .e-no { grid-column: 1 / 3; }
    .e-plate { grid-column: 3 / 8; }
    .e-text { grid-column: 8 / 13; }
    .proj-head, .proj-list { grid-column: 3 / 13; }
    .peek { grid-column: 1 / 3; }
    .intro .lbl { grid-column: 1 / -1; padding-top: 0; margin-bottom: 26px; }
    .lede { grid-column: 1 / 12; }
    .row-meta { grid-column: 10 / 13; justify-self: start; text-align: left; white-space: normal; }
    .bg-text { grid-column: 5 / 13; }
    .w-press { grid-column: 3 / 12; }
    .q-pull { grid-column: 1 / -1; }
    .q-pull p { font-size: clamp(32px, 4.6vw, 50px); }
    .q-by { grid-column: 1 / 6; }
    .q-area { grid-column: 6 / 10; }
    .q-tog { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
    .q-note { grid-column: 1 / -1; }
    .w-close p { grid-column: 3 / 9; }
    .hero-toc { width: calc((100vw - 2 * var(--m) - 11 * var(--g)) / 12 * 4 + 3 * var(--g)); }
    .panel { width: min(44ch, 52cqw); }
    .a04-grid .e-text { grid-column: 3 / 10; }
  }

  /* ---------- phone and portrait tablets: the rooms re-frame ---------- */
  @media (max-width: 760px), (max-aspect-ratio: 4/5) {
    /* the players' layer is wide: frame it on the bassist with the guitarist and the cymbal rims at the edges */
    #a01 .stage { --fw: calc(100cqh * 1.04 * 1.3333); --fx: .47; --fy: 0; --ax: .5; --ay: 0; --ox: .47; --oy: .22; }
    .room { --ttop: calc(78px + 4.5cqh); }
    #a01 .reg { top: calc(var(--ttop) - 40px); }
    .room-lbl { top: calc(var(--ttop) - 2.2em); }
    .room .sub { font-size: 26px; }
    #a01 .scrim { background: linear-gradient(0deg, var(--ink) 0, rgba(19, 19, 18, .96) 30%, rgba(19, 19, 18, .7) 40%, rgba(19, 19, 18, 0) 56%), linear-gradient(180deg, var(--ink) 0, rgba(19, 19, 18, .5) 7%, rgba(19, 19, 18, 0) 16%); }
    .panel { left: var(--m); right: var(--m); width: auto; bottom: 26px; gap: 12px; }
  }

  /* ---------- phone ---------- */
  @media (max-width: 760px) {
    :root { --fs-mono: 11.5px; --handoff: 100svh; --pin: 60svh; --bpin: 50svh; }
    .room { --apron: calc(100vw / 12 * 3 + 32px); }
    .top { padding-top: 16px; }
    .top nav { gap: 16px; }
    .top nav .hide-s { display: none; }

    .hero .reg { display: none; }
    .rm .hero, html:not(.js) .hero { padding-bottom: calc(100vw / 12 * 3 + 16px); }
    .hero-plate, .hero-marks { --ph: 34svh; top: 11svh; width: min(100vw, calc(var(--ph) * var(--ar))); }
    .hero-marks .cap { left: var(--m); right: var(--m); }
    .hero-sub { top: calc(11svh + min(100vw, 34svh * 1.6117) / 1.6117 + 3svh + 22px); font-size: 21px; max-width: 13em; }
    .hero-toc { top: auto; left: var(--m); right: var(--m); width: auto; bottom: calc(3svh + 32.96vw + 30px); }
    .hero-name { white-space: normal; font-size: 20.6vw; bottom: 3svh; }
    .hero-name .ln { display: block; }
    .hero-name .ln + .ln { text-align: right; }

    .intro { padding-block: 96px 84px; }
    .intro .grid, .areas-head, .entry > .grid, .bg-body, .c-grid { display: flex; flex-direction: column; }
    .intro .grid { gap: 22px; }
    .lede { font-size: 26px; line-height: 1.2; }
    .ref { top: -1.5em; }

    .areas { padding-bottom: 170px; }
    .areas-head { gap: 6px; }
    .row { --rowno: 52px; }
    .row-link { display: grid; grid-template-columns: var(--rowno) 1fr; row-gap: 10px; padding-block: 22px; padding-right: 30px; }
    .row-no { grid-column: 1; padding-top: .35em; }
    .row-title { grid-column: 2; font-size: 25px; }
    .row-meta { grid-column: 2; padding-top: 0; justify-self: start; text-align: left; white-space: normal; }
    .row-panel > div { padding-left: calc(var(--rowno) + var(--g)); }
    .row-link::after { content: "+"; position: absolute; right: 0; top: 22px; font-family: var(--f-mono); font-size: 18px; line-height: 1; transition: transform .4s var(--ease); }
    .row.open .row-link::after { transform: rotate(45deg); }

    .prose { font-size: 17.5px; }
    .entry { padding-block: 26px 104px; }
    #a02 { padding-top: 96px; }
    #a04 { padding-bottom: 180px; }
    /* the text, then the three cards one under another, set left, right, left */
    .pols { display: flex; flex-direction: column; gap: 46px; margin-top: 30px; --u: calc(90cqw / 108); }
    .pol, .pol > .plate { display: block; }
    .pol { align-self: flex-start; }
    .pol + .pol { align-self: flex-end; }
    .pol + .pol + .pol { align-self: flex-start; }
    .pol-sq { --r: -2deg; } .pol-w { --r: 1.8deg; } .pol-w + .pol-w { --r: -1.4deg; }
    .pol .cap { margin-top: 16px; }
    .pol .cap .res { display: none; }   /* the block readout needs a wider line than a phone gives a card */
    .cap2 .l2 { margin-top: 2px; }
    .entry > .grid { gap: 26px; align-items: stretch; }
    .e-no { display: flex; justify-content: space-between; align-items: flex-end; }
    .e-big { font-size: 84px; }
    .e-text { border-left: 0; padding-left: 0; gap: 20px; }
    .e-link { margin-top: 4px; }
    .projects { display: block; margin-top: 44px; }
    .proj-head { display: none; }
    .proj-row { grid-template-columns: 1fr auto; row-gap: 6px; padding-block: 18px; }
    .proj-name { grid-column: 1; }
    .proj-status { grid-column: 2; grid-row: 1; text-align: right; }
    .proj-status::after { margin-left: 12px; }
    .proj-desc { grid-column: 1 / -1; }
    .proj-shot img { max-width: 100%; }

    .bg { padding-block: 64px 170px; --rh: min(calc((100vw - 2 * var(--m)) / 1.12), calc(100svh - 200px)); }
    .bg-head { display: flex; justify-content: space-between; gap: 12px; }
    .reel-stick > .cap { flex-wrap: wrap; row-gap: 2px; }
    .reel-stick > .cap span { white-space: nowrap; }
    .reel-stick > .cap .cap-r { text-align: left; }
    /* the kit is too close to the lens to read in a narrow frame: the room keeps its other layers */
    #a01 .fr[data-z="1"] { display: none; }
    .bg-body { margin-top: 44px; }
    .bg-p { font-size: 24px; }
    .reel { --fy: .5; --zm: 1.04; --fx: .46; --ox: .46; }

    /* in their words: the pull first, then the portrait beside the byline */
    .words { padding-block: 92px 180px; }
    .w-head { display: flex; flex-direction: column; }
    .w-title { margin-top: 18px; white-space: normal; font-size: 15vw; line-height: .84; }
    .w-title span { display: block; }
    /* the opening marks hang inside the 16px margin: the text is set in by the mark's own width */
    .w-press { margin: 44px 0 52px; padding-left: 10px; }
    .w-press p { font-size: 24px; }
    /* the gap clears the frame's registration crosses (10px out, 13px wide) */
    .q { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 22px; padding-block: 22px 18px; }
    .q-main { display: contents; }
    .q-no { grid-column: 1 / -1; grid-row: 1; padding-top: 0; margin-bottom: 12px; }
    .q-pull { grid-column: 1 / -1; grid-row: 2; }
    .q-pull p { font-size: 31px; line-height: 1.08; margin-left: .4em; }
    .q-photo { grid-column: 1; grid-row: 3 / span 2; margin: 20px 0 0; }
    .q-by { grid-column: 2; grid-row: 3; margin-top: 20px; }
    .q-area { grid-column: 2; grid-row: 4; margin-top: 10px; }
    .q-tog { grid-column: 1 / -1; grid-row: 5; justify-self: start; margin-top: 12px; }
    .q-note { grid-column: 1 / -1; grid-row: 6; }
    .q-full { margin-top: 10px; padding-left: 14px; }
    .q-full p { font-size: 18.5px; }
    .w-close { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 22px; }
    .w-close .e-link { padding-top: 20px; }

    .c-grid { gap: 26px; }
    .c-title { margin-top: 18px; font-size: 15vw; }
    .c-p { font-size: 24px; }
    .form { margin-top: 10px; }
    .foot-row { flex-direction: column; }
  }
  /* short phones, and wide ones where the stacked name rises into the index: the sub line stands alone */
  @media (max-width: 760px) and (max-height: 740px), (max-width: 760px) and (min-aspect-ratio: 13/20) {
    .hero-toc { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
  }