/* ===========================================================================
   Fariha Ayaz — shared surface system.

   One light direction for the whole page: above and to the left, matching the
   key light in the 3D scene. Every shadow below derives from --light-x /
   --light-y, so moving the 3D light moves the CSS with it.
   =========================================================================== */

/* Rockwell, self-hosted and subset to the characters the file labels use.
   It is only ever drawn into a canvas texture, never onto the page, but the
   browser will not load a face nothing references, so it is declared here. */
@font-face{
  font-family:RockwellFA;
  src:url("fonts/rockwell.woff2") format("woff2");
  font-weight:400 700;
  font-display:block;
}
@font-face{
  font-family:TheSignature;
  src:url(fonts/thesignature.woff2) format('woff2');
  font-display:swap;
}

:root{
  --light-x:-1;
  --light-y:-1;

  --display:"Newsreader","Libre Baskerville",Georgia,"Times New Roman",serif;
  --serif:"Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Noto Sans Mono","Noto Sans",ui-monospace,Menlo,monospace;
  --w-light:250;
  --w-body:400;
  --script:TheSignature,"Segoe Script","Bradley Hand",cursive;

  --step--1:clamp(.76rem,.74rem + .1vw,.82rem);
  --step-0:clamp(.95rem,.91rem + .2vw,1.06rem);
  --step-1:clamp(1.12rem,1.05rem + .32vw,1.3rem);
  --step-2:clamp(1.36rem,1.24rem + .56vw,1.72rem);
  --step-3:clamp(1.7rem,1.46rem + 1.06vw,2.4rem);
  --step-4:clamp(2.1rem,1.6rem + 2.2vw,3.6rem);

  --bar-h:60px;
  --gut:clamp(1.1rem,4vw,2.6rem);
  --measure:66ch;
  --radius:0px;
  --radius-lg:0px;

  --ease:cubic-bezier(.22,.75,.28,1);
  --dur:.42s;
}

/* --- dark: the records room after hours ---------------------------------- */
:root,
[data-theme=dark]{
  --room:#0a0e0f;
  --room-2:#0e1415;
  --panel:#131b1b;
  --panel-2:#0f1617;
  --edge:rgba(255,255,255,.10);
  --edge-2:rgba(255,255,255,.055);
  --ink:rgba(244,241,234,.94);
  --ink-2:rgba(244,241,234,.66);
  /* .52, not .42: at .42 the quietest text sat at 3.7:1 against the page
     and 3.8:1 against the recorder rail, both under the 4.5:1 that small text
     needs. Captions and plate labels use this. */
  --ink-3:rgba(244,241,234,.52);
  --accent:#ffce1b;
  --accent-ink:#1c1600;
  --accent-text:#5cc1e8;
  --accent-text-ink:#04161f;
  --mark-ring:#ffce1b;
  --mark-ring-text:#5cc1e8;
  --mark-script:#ffffff;
  --face:#22403c;
  --grain:.030;
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 6px 18px rgba(0,0,0,.42);
  --sh-3:0 18px 46px rgba(0,0,0,.52);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.075);
  --inset-bot:inset 0 -1px 0 rgba(0,0,0,.28);
}

/* --- light: the same room with the strip lights on ----------------------- */
[data-theme=light]{
  --room:#e8e4da;
  --room-2:#f1ede3;
  --panel:#f6f2e8;
  --panel-2:#ece7db;
  --edge:rgba(28,24,18,.14);
  --edge-2:rgba(28,24,18,.075);
  --ink:rgba(26,24,20,.92);
  --ink-2:rgba(26,24,20,.66);
  --ink-3:rgba(26,24,20,.66);   /* .44 gave 2.7:1 on the light page */
  --accent:#26231b;
  --accent-ink:#fff8dc;
  --accent-text:#15718f;
  --accent-text-ink:#f2fbff;
  --grain:.045;
  --sh-1:0 1px 2px rgba(40,34,26,.14);
  --sh-2:0 6px 18px rgba(40,34,26,.13);
  --sh-3:0 18px 46px rgba(40,34,26,.16);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.7);
  --inset-bot:inset 0 -1px 0 rgba(40,34,26,.09);
}

/* One axis of difference between the editions: the accent. Redefining it on
   body cascades to every rule below without duplicating any of them. */
body.edition-text{
  --accent:var(--accent-text);
  --accent-ink:var(--accent-text-ink);
  --mark-ring:var(--mark-ring-text);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0;font-weight:var(--w-body);padding-top:var(--bar-h);
  background:var(--room);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .45s var(--ease), color .45s var(--ease);
}

/* the tooth that stops a flat fill reading as a flat fill */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 18px;background:var(--panel);border:1px solid var(--edge);
  border-radius:var(--radius);font-family:var(--mono);font-size:var(--step--1);
}
.skip:focus{left:12px;top:12px}

.wrap{width:min(100% - var(--gut)*2, 1180px);margin-inline:auto}

/* ===== top bar ============================================================ */
/* Fixed to the viewport rather than sticky. Sticky meant it only pinned once
   the element above it had scrolled by, and the hero card slid underneath a
   half-transparent bar. Fixed, opaque, and the page is padded to clear it. */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:clamp(10px,2vw,26px);
  padding:10px var(--gut);
  min-height:var(--bar-h);
  background:var(--room);
  border-bottom:1px solid var(--edge);
  box-shadow:0 6px 22px -12px rgba(0,0,0,.55);
}
.bar-name{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;line-height:1;white-space:nowrap;
}
.fa-mark{width:clamp(34px,4.4vw,44px);height:clamp(34px,4.4vw,44px);flex:none;display:block;color:var(--accent)}
/* Her signature, and it stays at every width. It used to vanish under 560px,
   which took the only piece of her identity off the bar on a phone. */
.bar-name .wordmark{
  font-family:var(--script);font-size:clamp(1.55rem,5.8vw,2.4rem);
  line-height:1;color:var(--ink);letter-spacing:0;text-transform:none;
  /* the drawn signature hangs above its own baseline, so it needs nudging
     down to sit centred between the top and bottom of the bar */
  position:relative;top:5px;white-space:nowrap;
}

.bar-nav{display:flex;gap:clamp(8px,1.4vw,20px);margin-inline:auto;overflow:auto;scrollbar-width:none}
.bar-nav::-webkit-scrollbar{display:none}
.bar-nav a{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.06em;
  text-decoration:none;color:var(--ink-2);white-space:nowrap;
  padding:6px 2px;border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.bar-nav a:hover,.bar-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.bar-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.bar-swap{
  font-family:var(--mono);font-size:var(--step--1);text-decoration:none;color:var(--ink-2);
  padding:8px 14px;border:1px solid var(--edge);border-radius:3px;white-space:nowrap;
  letter-spacing:.08em;
  box-shadow:var(--inset-top);
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .16s var(--ease);
}
.bar-swap:hover{color:var(--ink);border-color:var(--accent);transform:translateY(-1px)}

/* theme switch: a real toggle, pressed like a switch */
.themebtn{
  all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:6px 12px 6px 8px;border:1px solid var(--edge);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.05));
  box-shadow:var(--inset-top),var(--sh-1);
  font-family:var(--mono);font-size:var(--step--1);color:var(--ink-2);
  transition:transform .16s var(--ease),border-color .2s var(--ease);
}
.themebtn:hover{border-color:var(--accent)}
.themebtn:active{transform:scale(.97)}
.themebtn .tr{
  width:30px;height:16px;border-radius:999px;position:relative;flex:none;
  background:color-mix(in srgb,var(--room) 60%, #000);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.themebtn .tr::after{
  content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#c9c6c0);box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:transform .28s var(--ease);
}
[data-theme=light] .themebtn .tr::after{transform:translateX(14px)}
[data-theme=light] .themebtn .tr{background:color-mix(in srgb,var(--accent) 45%,#fff)}

/* ===== type =============================================================== */
h1,h2,h3{
  font-family:var(--display);font-weight:400;
  line-height:1.2;letter-spacing:-.014em;margin:0;
}
/* Libre Baskerville runs large for its point size, so the scale steps back */
h1{font-size:clamp(2rem,1.55rem + 2vw,3.3rem)}
h2{font-size:clamp(1.55rem,1.32rem + 1vw,2.25rem)}
h3{font-size:clamp(1.08rem,1rem + .3vw,1.28rem)}
h2 em,h1 em,.closing h2 em{font-style:italic;font-weight:400;color:var(--accent)}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
h2 em,h1 em{font-style:italic;color:var(--accent)}
p{margin:0 0 1em;max-width:var(--measure)}
strong{font-weight:650;color:var(--ink)}

.ref,.kicker{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;
}
.lede{font-size:var(--step-1);font-weight:var(--w-light);color:var(--ink-2);font-style:italic;max-width:48ch}
/* the emphasis in a lede takes the accent, so the last step of a career
   reads as the point of the sentence */
.lede strong{font-weight:inherit;color:var(--accent)}
.caption{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);font-style:normal;margin:.5em 0 0}
/* Notes in the margin are in her hand. Set large enough to read, which is
   what sent them to italic last time; the size is the fix, not the face. */
.margin{
  font-family:var(--script);font-style:normal;
  font-size:clamp(1.85rem,1.45rem + 1.35vw,2.6rem);
  line-height:1.2;color:var(--accent);
  margin:1em 0 .35em;max-width:22ch;
  /* balance evens the lines out; the last two words are already tied together
     in the markup so a line can never come down to one */
  text-wrap:balance;
  padding-left:16px;border-left:2px solid color-mix(in srgb,var(--accent) 40%,transparent);
}

/* ===== hero =============================================================== */
.hero{padding:clamp(46px,9vh,110px) 0 clamp(30px,5vh,60px)}
.hero .status-line{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 18px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.hero h1{max-width:16ch;margin-bottom:.4em}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-sub{font-size:var(--step-1);font-weight:var(--w-light);color:var(--ink-2);max-width:56ch}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);gap:clamp(24px,5vw,64px);align-items:end}
.hero-plate{margin:0}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin:1.6em 0 0;max-width:none}
.cap-inline{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:1.6em 0 .7em;
}
.btn{
  display:inline-block;text-decoration:none;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.1em;
  padding:11px 18px;border-radius:var(--radius);
  border:1px solid var(--edge);color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.05));
  box-shadow:var(--inset-top),var(--inset-bot),var(--sh-1);
  transition:transform .16s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--inset-top),var(--sh-2);border-color:var(--accent)}
.btn:active{transform:translateY(1px) scale(.995);box-shadow:inset 0 2px 5px rgba(0,0,0,.3)}
.btn.primary{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff),var(--accent));
  border-color:color-mix(in srgb,var(--accent) 70%,#000);color:var(--accent-ink);
}

/* ===== counters =========================================================== */
.counts{
  list-style:none;margin:clamp(30px,6vh,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--edge-2);border:1px solid var(--edge-2);border-radius:var(--radius-lg);overflow:hidden;
}
.counts li{background:var(--panel);padding:clamp(18px,3vw,28px)}
.counts b{display:block;font-size:var(--step-3);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.counts span{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);line-height:1.5;display:block;margin-top:6px}

/* ===== sections =========================================================== */
.sec-head{margin:0 0 clamp(22px,4vh,44px)}
.sec-head h2{max-width:22ch}

.file{
  scroll-margin-top:78px;
  padding:clamp(34px,7vh,80px) 0;
  border-top:1px solid var(--edge-2);
}
.file-head{margin-bottom:clamp(22px,4vh,42px)}

/* ===== entries ============================================================ */
.entry{
  display:grid;grid-template-columns:minmax(160px,208px) minmax(0,1fr);
  gap:clamp(14px,3vw,40px);
  padding:clamp(18px,3vh,30px) 0;
  border-top:1px solid var(--edge-2);
}
.entry:first-child{border-top:0}
.entry-meta{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:var(--step--1)}
.entry-meta .when{color:var(--ink);letter-spacing:.02em}
.entry-meta .org{color:var(--ink-2)}
.entry-meta .place{color:var(--ink-3)}
.entry-body h3{margin-bottom:.25em}
.entry-body .sub{color:var(--ink-2);font-style:italic;margin-bottom:.7em}
.pts{margin:0;padding:0 0 0 1.1em;color:var(--ink-2)}
.entry-doc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:1.2em 0 0;max-width:none}
.doc-note{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);letter-spacing:.06em}
.pts li{margin:.35em 0;max-width:var(--measure)}
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:1.1em}

/* ===== plates (imagery) =================================================== */
.plate{
  margin:0;border-radius:var(--radius);overflow:hidden;
  background:var(--panel-2);border:1px solid var(--edge-2);
  box-shadow:var(--sh-1);
  aspect-ratio:var(--ratio,4/3);
}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.plate-open{
  all:unset;display:block;width:100%;height:100%;cursor:zoom-in;position:relative;
}
.plate-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* A chip in the corner so the picture reads as openable. It sits on its own
   dark ground rather than inheriting the theme's ink, because the plates are
   pale in both themes and themed ink disappears against them. */
.plate-open::after{
  content:"";position:absolute;right:9px;bottom:9px;width:26px;height:26px;
  background:rgba(18,18,18,.62);
  background-image:
    linear-gradient(#fff 0 0),linear-gradient(#fff 0 0),
    linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
  background-repeat:no-repeat;
  background-size:8px 1.5px,1.5px 8px,8px 1.5px,1.5px 8px;
  background-position:7px 7px,7px 7px,11px 17.5px,17.5px 11px;
  opacity:0;transition:opacity .2s var(--ease);
}
.plate-open:hover::after,.plate-open:focus-visible::after{opacity:1}
/* nothing hovers on a touch screen, so show it quietly all the time */
@media (hover:none){ .plate-open::after{opacity:.75} }

/* ---- the picture viewer ------------------------------------------------ */
/* The hidden attribute is styled by the browser as [hidden]{display:none},
   which is one class selector. #lightbox is an id, so it outranks it and the
   display:grid below won a fight it was never meant to be in: the viewer sat
   over both editions at zero opacity, swallowing every click and tap. The
   guard on the next line has to stay. */
#lightbox[hidden]{display:none}
#lightbox{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:color-mix(in srgb, #000 86%, transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s var(--ease);padding:clamp(16px,4vw,56px);
}
#lightbox:not(.in){pointer-events:none}   /* belt as well as braces */
#lightbox.in{opacity:1;pointer-events:auto}
#lightbox img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:scale(.97);transition:transform .24s var(--ease);
}
#lightbox.in img{transform:none}
#lightbox .lb-close{
  all:unset;cursor:pointer;position:absolute;top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);
  width:44px;height:44px;display:grid;place-items:center;color:rgba(255,255,255,.8);
  transition:color .2s var(--ease),transform .16s var(--ease);
}
#lightbox .lb-close svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}
#lightbox .lb-close:hover{color:#fff;transform:rotate(90deg)}
#lightbox .lb-close:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Paging through a set. Minimal, at the foot of the screen, out of the way of
   the sheet itself. */
/* Same trap as the viewer itself: #lightbox .lb-nav outranks the browser's
   own [hidden]{display:none}, so without this guard the arrows would sit on
   screen for single pictures too. checkcascade.mjs caught it. */
#lightbox .lb-nav[hidden]{display:none}
#lightbox .lb-nav{
  position:absolute;left:50%;bottom:clamp(14px,3vh,34px);transform:translateX(-50%);
  display:flex;align-items:center;gap:clamp(14px,3vw,30px);
  padding:6px 10px;border-radius:0;
  background:rgba(0,0,0,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
#lightbox .lb-nav button{
  all:unset;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;
  color:rgba(255,255,255,.75);transition:color .18s var(--ease),transform .18s var(--ease);
}
#lightbox .lb-nav button svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
#lightbox .lb-nav button:hover{color:#fff}
#lightbox .lb-prev:hover{transform:translateX(-3px)}
#lightbox .lb-next:hover{transform:translateX(3px)}
#lightbox .lb-nav button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#lightbox .lb-count{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  color:rgba(255,255,255,.7);min-width:5ch;text-align:center;
}
#lightbox img{margin-bottom:clamp(52px,9vh,86px)}

/* how many sheets are behind this one, on the page itself */
.plate-count{
  position:absolute;right:8px;top:8px;z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(18,18,18,.6);padding:3px 7px;
}
.plate{position:relative}

body.lb-open{overflow:hidden}

/* ===== cases ============================================================== */
.cases{display:grid;gap:clamp(18px,3vh,30px)}
.case{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(190px,.85fr) minmax(96px,132px);
  gap:clamp(16px,3vw,32px);align-items:start;
  padding:clamp(18px,3vh,28px);
  background:var(--panel);border:1px solid var(--edge-2);border-radius:var(--radius-lg);
  box-shadow:var(--inset-top),var(--sh-1);
}
.case-meta{display:flex;gap:10px;font-family:var(--mono);font-size:var(--step--1);margin-bottom:8px}
.case-meta .tag{color:var(--accent);letter-spacing:.11em;text-transform:uppercase}
.case-meta .year{color:var(--ink-3)}
.case h3{margin-bottom:.4em}
.case p{color:var(--ink-2)}
.case-metric{text-align:right;border-left:1px solid var(--edge-2);padding-left:clamp(12px,2vw,22px)}
.case-metric b{display:block;font-size:var(--step-2);color:var(--accent);line-height:1}
.case-metric span{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);line-height:1.45;display:block;margin-top:6px}

/* ===== trials ============================================================= */
.trials{margin-top:clamp(24px,4vh,42px);padding-top:clamp(18px,3vh,28px);border-top:1px solid var(--edge-2)}
.trials h3{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.trial-row{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);gap:14px;margin:12px 0}
.trial-role{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-2)}
.trial-row ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.trial-row li{
  font-family:var(--mono);font-size:var(--step--1);
  padding:4px 9px;border:1px solid var(--edge-2);border-radius:0;
  background:var(--panel-2);color:var(--ink-2);
}

/* ===== credentials ======================================================== */
.cred-grid{display:grid;gap:clamp(22px,4vh,40px)}
.cred-group h3{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.reg{list-style:none;margin:0;padding:0}
.reg li{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(120px,160px);
  gap:12px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--edge-2);
}
.reg-name{font-weight:600}
.reg-by{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-2)}
.reg-when{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);text-align:right}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.tags li{
  font-family:var(--mono);font-size:var(--step--1);
  padding:6px 11px;border:1px solid var(--edge-2);border-radius:0;
  background:var(--panel-2);color:var(--ink-2);
  box-shadow:var(--inset-top);
}

/* ===== notes / asides ===================================================== */
.note{
  display:grid;grid-template-columns:minmax(180px,270px) minmax(0,1fr);
  gap:clamp(16px,3vw,32px);align-items:start;
  margin-top:clamp(24px,4vh,40px);padding:clamp(18px,3vh,28px);
  background:var(--panel);border:1px solid var(--edge-2);border-radius:var(--radius-lg);
  box-shadow:var(--inset-top),var(--sh-1);
}
.note p{color:var(--ink-2)}
.note p:last-child{margin-bottom:0}

/* ===== custody ladder ===================================================== */
.custody-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  background:var(--edge-2);border:1px solid var(--edge-2);border-radius:var(--radius-lg);overflow:hidden}
.custody-list li{background:var(--panel);padding:clamp(18px,3vw,26px)}
.cn{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.13em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px}
.custody-list h3{margin-bottom:.4em}
.custody-list p{color:var(--ink-2);margin:0}

/* ===== about ============================================================== */
.about-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr);gap:clamp(24px,5vw,56px);align-items:start}
.status{
  padding:clamp(18px,3vw,26px);
  background:var(--panel);border:1px solid var(--edge-2);border-radius:var(--radius-lg);
  box-shadow:var(--inset-top),var(--sh-1);
}
.status h3{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.status dl,.avail{margin:0}
.status dl>div,.avail>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--edge-2)}
.status dt,.avail dt{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3)}
.status dd,.avail dd{margin:0;text-align:right}
.avail dd i{display:block;font-style:normal;font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3)}
.status-plate{margin-top:16px}

/* ===== contact ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,5vw,56px);align-items:start}
.portrait{max-width:340px}

/* ===== stamp ============================================================== */
.stamp{
  display:inline-block;margin:clamp(20px,4vh,36px) 0 0;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.11em;text-transform:uppercase;
  padding:8px 14px;border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);
  color:color-mix(in srgb,var(--accent) 88%,var(--ink));
  border-radius:0;transform:rotate(-1.6deg);opacity:.9;
}

/* ===== edition switch ===================================================== */
.edition{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;
  margin:0 auto;width:max-content;max-width:100%;
}
.ed{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-3);padding:13px 24px;
  border:1px solid var(--edge);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.05));
  box-shadow:var(--inset-top);
  transition:color .2s var(--ease),background .25s var(--ease);
}
.ed:first-of-type{border-radius:0}
.ed:last-of-type{border-radius:0;border-left:0}
.ed:hover{color:var(--ink)}
.ed.on{
  color:var(--accent-ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff),var(--accent));
  box-shadow:inset 0 2px 5px rgba(0,0,0,.22);
}
.edition-note{
  flex-basis:100%;text-align:center;margin:14px 0 0;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.1em;color:var(--ink-3);
}

/* ===== footer ============================================================= */
.foot{
  padding:clamp(40px,8vh,90px) var(--gut) clamp(30px,6vh,60px);
  border-top:1px solid var(--edge-2);text-align:center;
}
.foot-line{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);margin:clamp(26px,5vh,44px) 0 6px;max-width:none}
.foot-mail{margin:0;max-width:none}
.foot-mail a{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--edge)}
.foot-mail a:hover{color:var(--accent)}


/* ===== sign-off: her own mark, then the name in type ====================== */
.signoff-block{
  display:flex;flex-direction:column;align-items:center;
  margin:0 auto clamp(26px,5vh,44px);
  max-width:340px;
}
/* the one that closes the letter sits smaller and to the left, the way a
   name is signed at the foot of a page rather than centred on a poster */
.signoff-letter{
  align-items:flex-start;margin:clamp(26px,5vh,44px) 0 0;max-width:260px;
}
.signoff-letter .sig-mark{width:min(250px,62vw)}
.signoff-letter .signoff-rule{width:260px;background:var(--edge)}
.signoff-letter .signoff-name{font-size:var(--step--1)}
.signoff-letter .signoff-role{display:none}
.sig-mark{
  width:min(340px,74vw);height:auto;display:block;
  color:var(--accent);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
[data-theme=light] .sig-mark{filter:none}
.signoff-rule{
  display:block;width:min(360px,78vw);height:1px;margin:8px 0 14px;
  background:linear-gradient(90deg,transparent,var(--edge) 18%,var(--edge) 82%,transparent);
}
.signoff-name{
  margin:0;font-family:var(--mono);font-size:var(--step--1);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  text-indent:.34em;
}
.signoff-role{
  margin:5px 0 0;font-family:var(--mono);font-size:var(--step--1);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  text-indent:.2em;
}

/* ===== the chart recorder (text edition) ==================================
   A strip of chart paper with the 2-8 C band running through it and a pen
   that walks along as you scroll. It runs down the left on a desktop and
   across the top on a phone, where there is no room beside the text.
   ========================================================================= */
.rec{
  position:fixed;left:0;top:0;bottom:0;width:96px;z-index:30;
  pointer-events:none;opacity:0;transition:opacity .7s var(--ease);
}
.rec.on{opacity:1}
.rec::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--room-2);border-right:1px solid var(--edge-2);
}
/* An <svg> is a replaced element. Given a definite height and width:auto it
   takes its own intrinsic aspect ratio — 1000:90 here — and quietly ignores
   the `right` inset. At 58px tall that is 644px wide, which is within a pixel
   or two of the room a tablet has, so the tablet looked perfect and nothing
   seemed wrong. On a 373px phone the same rule made a 578px chart inside a
   358px bar: two thirds of the trace was off the right-hand edge, so the pen
   reached the edge of the screen at about 54% of the page. Four rounds of
   "the line is all the way across and I'm only halfway down" was this.

   Every horizontal rule below therefore states an explicit width. */
.rec__svg{position:absolute;overflow:visible}
.rec__svg--v{left:0;top:58px;width:96px;height:calc(100% - var(--bar-h) - 132px)}
.rec__svg--h{display:none}
.rec__grid path{stroke:var(--edge-2);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.rec__ticks{stroke:var(--edge-2);stroke-width:1;opacity:.55}
.rec__band{fill:var(--accent);fill-opacity:.07}
/* The paper ahead of the pen, drawn faintly. Without it the traced part and
   the untraced part of a dense 260-point line look the same at phone width. */
.rec__ghost{
  stroke:var(--ink-3);stroke-width:1;fill:none;opacity:.30;
  stroke-dasharray:2 4;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;
}
.rec__trace{
  stroke:var(--accent);stroke-width:1.6;fill:none;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
}
/* The pen lives inside the chart now. It used to be a div positioned in CSS
   pixels from a getBoundingClientRect, which meant converting between two
   coordinate systems every frame and getting it wrong in at least two ways.
   Drawn in the chart's own units it lands exactly where the trace ends, and
   there is nothing left to get wrong.

   Both lines carry non-scaling-stroke, so the aspect distortion from
   preserveAspectRatio="none" cannot squash them. The nib is a zero-length
   line with a round cap, which renders as a true circle at any scale. */
.rec__rule{
  stroke:color-mix(in srgb,var(--accent) 55%,transparent);stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.rec__nib{
  stroke:var(--accent);stroke-width:8;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.rec__scale{
  position:absolute;left:8px;top:34px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);
}
.rec__scale--lo{top:auto;bottom:88px}
.rec__read{
  position:absolute;left:8px;bottom:20px;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.rec__read b{
  font-size:19px;letter-spacing:0;color:var(--accent);
  font-variant-numeric:tabular-nums;font-weight:600;
}
.rec__read span{font-size:11px;color:var(--accent);margin-left:1px}
.rec__read i{display:block;font-style:normal;margin-top:3px}
.rec__read.out b,.rec__read.out span,.rec__read.out i{color:#d4735c}

body.edition-text{padding-left:96px}
.rec{top:var(--bar-h)}

/* --- phone: the recorder lies down across the top ------------------------ */
@media (max-width:1080px){
  .rec{
    left:0;right:0;top:0;bottom:auto;width:auto;height:58px;
    border-bottom:1px solid var(--edge-2);
  }
  .rec::after{border-right:0;border-bottom:1px solid var(--edge-2)}
  .rec__svg--v{display:none}
  .rec__svg--h{display:block;left:104px;top:0;width:calc(100% - 114px);height:58px}
  .rec__ghost{stroke-dasharray:2 3}
  /* the readout sits at the left end, off the trace. On the right it was
     landing on top of the line. */
  .rec__read{
    left:10px;right:auto;bottom:auto;top:8px;text-align:left;
    background:var(--room-2);padding-right:8px;
  }
  .rec__read b{font-size:19px}
  .rec__read span{font-size:11px}
  .rec__read i{display:block;margin-top:1px;font-size:8.5px}
  .rec__scale,.rec__scale--lo{display:none}
  body.edition-text{padding-left:0;padding-top:calc(var(--bar-h) + 58px)}
  .rec{top:var(--bar-h)}
}

/* --- phone: the chart takes the width, the readout gets out of its way ----
   At tablet width there is room for a temperature, a status line and a chart.
   At 390px the readout was eating a quarter of the bar and squeezing eleven
   hours of trace into 270 pixels. The status line goes, the number shrinks
   and sits tight to the left edge, and the chart gets everything else. */
@media (max-width:560px){
  .rec{height:52px}
  .rec__svg--h{left:58px;width:calc(100% - 64px);height:52px}
  .rec__read{left:6px;top:50%;transform:translateY(-50%);background:none;padding:0}
  .rec__read b{font-size:15px;line-height:1}
  .rec__read span{font-size:8px}
  .rec__read i{display:none}
  .rec__trace{stroke-width:1.8}
  .rec__nib{stroke-width:9}
  .rec__ghost{opacity:.34;stroke-dasharray:1.5 3}
  body.edition-text{padding-top:calc(var(--bar-h) + 52px)}
}

/* the narrowest phones give the chart everything but the number */
@media (max-width:400px){
  .rec__svg--h{left:46px;width:calc(100% - 52px)}
  .rec__read b{font-size:13px}
  .rec__read span{display:none}
}

/* ===== narrow ============================================================= */
@media (max-width:900px){
  .hero-grid,.about-grid,.contact-grid,.note{grid-template-columns:minmax(0,1fr)}
  .case{grid-template-columns:minmax(0,1fr)}
  .case-plate{order:2}
  .case-metric{text-align:left;border-left:0;border-top:1px solid var(--edge-2);padding:12px 0 0}
  .entry{grid-template-columns:minmax(0,1fr);gap:10px}
  .entry-meta{flex-direction:row;flex-wrap:wrap;gap:10px}
  .reg li{grid-template-columns:minmax(0,1fr);gap:2px}
  .reg-when{text-align:left}
  .trial-row{grid-template-columns:minmax(0,1fr)}
  .bar-nav{display:none}
  .portrait{max-width:none}
}

/* ===== print: the recruiter's fast path =================================== */
@media print{
  :root{--ink:#111;--ink-2:#333;--ink-3:#666;--accent:#0d6f68;--panel:#fff;--panel-2:#fff;--edge:#ccc;--edge-2:#ddd}
  body{background:#fff;color:#111;font-size:10.5pt;line-height:1.45}
  body::before,.bar,.foot .edition,.actions,.themebtn,.skip,#stage,.hero-plate,.plate,.rec,.closing .tabrow,#lightbox{display:none!important}
  body.edition-text{padding-left:0}
  .sig-mark{color:#111;width:190px}
  .file{page-break-inside:auto;border-top:1px solid #ddd;padding:14pt 0}
  .entry,.case,.note,.custody-list li{page-break-inside:avoid}
  h1{font-size:22pt}h2{font-size:15pt}h3{font-size:11.5pt}
  a{text-decoration:none;color:#111}
  .file-body a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:9pt;color:#666}
  .stamp{border:1px solid #999;color:#555;transform:none}
}

/* ===========================================================================
   Drawer edition: the 3D act
   The words all exist as normal HTML underneath. WebGL only decides how you
   get to them, so with no WebGL, no JS, or reduced motion the page below is
   simply the page.
   =========================================================================== */
#stage{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity .8s var(--ease)}
body.gl-ready #stage{opacity:1}
#gl{display:block;width:100%;height:100%}

#act{display:none}
/* The camera travels nearly three metres and the drawer pulls out most of
   a metre. Same choreography over a shorter spacer felt hurried. */
body.has-3d #act{display:block;height:520vh;position:relative;z-index:1;pointer-events:none}

/* The drawer edition ends at the drawer. The record still exists in the DOM
   for search engines and for the file panel to pull from, but nothing slides
   up over the scene as you keep scrolling. */
body.has-3d main{position:relative;z-index:2}
body.has-3d .file{display:none}
body.has-3d .tally{display:none}
body.has-3d .closing,body.has-3d .foot{
  position:relative;z-index:2;background:var(--room);
}
body.has-3d .closing{box-shadow:0 -50px 90px -24px rgba(0,0,0,.6)}
body.has-3d .hero{display:none}

/* --- overlay copy over the scene ----------------------------------------- */
.hud{position:fixed;z-index:6;pointer-events:none;transition:opacity .3s linear}
/* once the act is behind you the overlays go with it */
body.act-done .hud{opacity:0!important;pointer-events:none!important;visibility:hidden}
body:not(.has-3d) .hud{display:none}

/* The copy sits on a card laid over the scene: a solid surface with a hard
   edge and a shadow, the way a sheet sits on a desk. A soft gradient here
   read as a rendering fault rather than as a deliberate panel. */
/* The card is a caption on the scene, not a page over it. It is capped in
   both directions and sits in the lower left, so the cabinets have the top
   two thirds of the frame to themselves on first load. Left to grow, it
   filled the viewport and buried them. */
#hud-hero{
  left:clamp(12px,3vw,64px);
  top:auto;bottom:clamp(18px,5vh,64px);
  width:min(40ch,46vw);
  max-height:min(62vh,560px);
  padding:clamp(22px,2.4vw,32px) clamp(22px,2.4vw,32px) clamp(24px,2.6vw,34px);
  background:var(--panel);
  border:1px solid var(--edge);
  border-left:3px solid var(--accent);
  box-shadow:var(--sh-3);
  transition:opacity .3s linear;
}
#hud-hero .eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;
}
/* its own scale, not the page h1: this one has to fit a card */
#hud-hero h1{
  font-size:clamp(1.5rem,1.15rem + 1.35vw,2.35rem);
  line-height:1.22;margin:0 0 .55em;
}
#hud-hero h1 em{font-style:italic;color:var(--accent)}
#hud-hero p{
  color:var(--ink-2);font-size:var(--step-0);font-weight:var(--w-light);
  line-height:1.6;margin-bottom:1.2em;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
#hud-hero .actions{pointer-events:auto;margin:0}

/* the card owns the lower left now, so the hint moves to the other side */
#hud-hint{
  right:var(--gut);bottom:clamp(22px,5vh,44px);
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
#hud-hint .bar-line{display:block;width:52px;height:1px;background:var(--edge);position:relative;overflow:hidden}
#hud-hint .bar-line::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  animation:crawl 2.4s var(--ease) infinite;
}
@keyframes crawl{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

.tabrow{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;pointer-events:auto;margin:0;padding:0;list-style:none}
.tabrow a{
  all:unset;cursor:pointer;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.12em;
  padding:10px 16px;border-radius:0;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.24), 0 6px 16px rgba(0,0,0,.35);
  transition:transform .16s var(--ease),filter .16s var(--ease);
}
.tabrow a{text-decoration:none;display:inline-block}
.tabrow a:hover{transform:translateY(-3px);filter:brightness(1.12)}
.tabrow a:active{transform:translateY(0)}
.tabrow a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* --- the opened file ------------------------------------------------------ */
#filepanel{
  position:fixed;inset:0;z-index:50;overflow:auto;overscroll-behavior:contain;
  background:color-mix(in srgb, var(--room) 84%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s var(--ease);
  /* The bar is fixed and 60px tall, so the sheet has to clear it and then
     leave a gap: opening a file used to butt its coloured head straight
     against the underside of the header. */
  padding:calc(var(--bar-h) + clamp(18px,3.5vh,44px)) var(--gut) clamp(40px,8vh,90px);
}
#filepanel.in{opacity:1}
.file-sheet{
  --sheet-pad:clamp(20px,4vw,52px);
  width:min(100%,860px);margin:0 auto;position:relative;
  background:var(--panel);border:1px solid var(--edge);
  border-radius:0;
  box-shadow:var(--sh-3), var(--inset-top);
  padding:var(--sheet-pad);
  /* Ruled, the way a working record is. Faint, and behind everything. */
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0 30px,
      color-mix(in srgb, var(--ink) 7%, transparent) 30px 31px);
  background-position:0 calc(var(--sheet-pad) + 6px);
  transform:translateY(28px) scale(.985) rotate(var(--tilt,0deg));opacity:0;
  transition:transform .42s var(--ease), opacity .32s var(--ease);
}
#filepanel.in .file-sheet{transform:rotate(var(--tilt,0deg));opacity:1}

/* Signs of a page that has been handled: two soft folds where a thumb has
   bent it, a shallow crumple in one corner, and a lift along one edge. All of
   it is light and shadow rather than drawing, so it survives both themes and
   never lands on top of the type. */
.file-sheet::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  /* Every fold below is positioned from a custom property, and the six files
     each set their own. Identical creases on six different pages read as
     wallpaper rather than as paper somebody has handled. */
  background:
    linear-gradient(var(--fold-a-ang, 180deg),
      transparent calc(var(--fold-a, 28%) - 2px),
      color-mix(in srgb, var(--ink) 10%, transparent) var(--fold-a, 28%),
      color-mix(in srgb, #fff 13%, transparent) calc(var(--fold-a, 28%) + 2px),
      transparent calc(var(--fold-a, 28%) + 5px)),
    linear-gradient(var(--fold-b-ang, 180deg),
      transparent calc(var(--fold-b, 63%) - 2px),
      color-mix(in srgb, var(--ink) 8%, transparent) var(--fold-b, 63%),
      color-mix(in srgb, #fff 11%, transparent) calc(var(--fold-b, 63%) + 2px),
      transparent calc(var(--fold-b, 63%) + 5px)),
    radial-gradient(120% 60% at var(--bruise-a, 100% 0%),
      color-mix(in srgb, var(--ink) 8%, transparent), transparent 62%),
    radial-gradient(80% 45% at var(--bruise-b, 0% 100%),
      color-mix(in srgb, var(--ink) 6%, transparent), transparent 58%),
    linear-gradient(var(--fold-c-ang, 174deg),
      transparent calc(var(--fold-c, 44%) - 3px),
      color-mix(in srgb, var(--ink) 7%, transparent) var(--fold-c, 44%),
      color-mix(in srgb, #fff 9%, transparent) calc(var(--fold-c, 44%) + 2px),
      transparent calc(var(--fold-c, 44%) + 6px));
}
/* the odd one out: the corner somebody kept turning back */
.file-sheet::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  right:0;bottom:0;width:var(--dogear, clamp(46px,7vw,86px));height:var(--dogear, clamp(46px,7vw,86px));
  background:linear-gradient(135deg,
    transparent 50%,
    color-mix(in srgb, var(--ink) 10%, transparent) 50%,
    color-mix(in srgb, #fff 12%, transparent) 56%,
    transparent 62%);
}
.file-sheet > *{position:relative;z-index:1}
/* the tab the file was pulled out by, still attached at the top */
/* Blank on purpose. It used to carry the file's name, which is the heading
   two lines below it, so the word appeared twice within an inch. It is a tab
   now, and nothing else. */
#filetab{
  position:absolute;top:-26px;left:clamp(20px,4vw,52px);
  width:clamp(84px,14vw,124px);height:26px;
  border-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 -3px 10px rgba(0,0,0,.25);
}
/* the way out sits on the paper itself, top right, the way you would put a
   pen through a form you are finished with */
/* all:unset resets z-index along with everything else, so the stacking has
   to be declared after it, not before. It was being set two rules earlier and
   quietly wiped, which put the way out underneath the coloured head. */
#fileclose{
  all:unset;cursor:pointer;position:absolute;
  top:clamp(16px,2.6vw,26px);right:clamp(16px,2.6vw,26px);
  width:40px;height:40px;display:grid;place-items:center;
  z-index:4;
  color:#fff;border:1px solid rgba(255,255,255,.45);
  background:rgba(0,0,0,.16);
  transition:color .2s var(--ease),border-color .2s var(--ease),
             background .2s var(--ease),transform .16s var(--ease);
}
#filetab{z-index:4}
#fileclose svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}
#fileclose:hover{color:var(--accent);border-color:var(--edge);transform:rotate(90deg)}
#fileclose:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* keep the heading clear of it */
.file-sheet .file-head{padding-right:56px}
/* without this the panel opens on an element still set to display:none,
   which is why every file came up blank */
body.has-3d .file.is-open{display:block;border-top:0;padding-top:0}

/* The heading block takes the colour of the file you pulled, bleeding to the
   edges of the sheet. Six identical cream headers gave no clue which file
   you had opened. */
.file-sheet .file-head{
  background:var(--file-colour, var(--accent));
  color:#fff;
  margin:calc(var(--sheet-pad) * -1) calc(var(--sheet-pad) * -1) 0;
  padding:calc(var(--sheet-pad) * .82) var(--sheet-pad) calc(var(--sheet-pad) * .74);
  border-bottom:3px solid rgba(0,0,0,.22);
}
.file-sheet .file-head .ref{color:rgba(255,255,255,.72)}
.file-sheet .file-head h2{color:#fff}
.file-sheet .file-head .lede{color:rgba(255,255,255,.88)}
.file-sheet .file-head .lede strong{color:#fff;font-weight:600}
.file-sheet .file-body{margin-top:calc(var(--sheet-pad) * .9)}
/* the X sits on the colour now, so it has to be light */
#fileclose:hover{background:rgba(0,0,0,.32);border-color:#fff}
#fileclose:focus-visible{outline-color:#fff}
body.file-open{overflow:hidden}

/* --- closing block: where the act hands over ----------------------------- */
.closing{
  padding:clamp(46px,9vh,110px) var(--gut) clamp(30px,6vh,60px);
  text-align:center;border-top:1px solid var(--edge-2);
}
.closing h2{
  font-size:var(--step-2);max-width:22ch;margin:0 auto .5em;font-weight:400;
}
.closing h2 em{font-style:italic;color:var(--accent)}
.closing .sub{
  margin:0 auto clamp(24px,4vh,40px);color:var(--ink-2);max-width:46ch;
  font-weight:var(--w-light);
}
.closing .cap{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;
}
.closing .reach{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:14px auto 0;max-width:none;
}
.closing .cap{margin:clamp(26px,5vh,44px) auto 0;text-align:center;width:100%}
.closing .tabrow{margin:0 auto}

/* --- flat fallback -------------------------------------------------------- */
body.no-3d #stage,body.no-3d #filepanel{display:none}
body.no-3d .hero{display:block}

/* --- narrow: the card becomes a strip along the bottom ------------------- */
@media (max-width:900px){
  body.has-3d #act{height:440vh}
  #hud-hero{
    left:0;right:0;bottom:0;width:auto;max-height:none;
    padding:18px var(--gut) calc(20px + env(safe-area-inset-bottom,0px));
    border-left:0;border-right:0;border-bottom:0;border-top:3px solid var(--accent);
  }
  #hud-hero h1{font-size:clamp(1.35rem,5.6vw,1.9rem);margin-bottom:.5em}
  #hud-hero p{display:none}
  #hud-hero .eyebrow{margin-bottom:9px;font-size:10px}
  /* the hint would sit under the strip down here, so it moves up top */
  #hud-hint{bottom:auto;top:calc(var(--bar-h) + 16px);right:var(--gut)}
  .tabrow a{padding:7px 11px;font-size:10px}
}

/* the overlay hero is the only hero: fixed over the scene when WebGL runs,
   an ordinary block at the top of the page when it does not */
body:not(.has-3d) #hud-hero{
  display:block;position:static;max-width:none;
  width:min(100% - var(--gut)*2,1180px);margin:clamp(40px,8vh,90px) auto clamp(20px,4vh,40px);
  opacity:1!important;transform:none!important;pointer-events:auto!important;
  background:none;border:0;box-shadow:none;padding:0;
}
body:not(.has-3d) #hud-hero p{display:block}
body:not(.has-3d) #hud-hint,body:not(.has-3d) .tally{padding:clamp(20px,4vh,40px) 0 0}
body.has-3d .tally{padding-top:clamp(40px,8vh,90px)}


/* ===========================================================================
   Folding files, text edition
   ---------------------------------------------------------------------------
   Six files' worth of record opened at once is a wall of type, so the five
   record files fold behind their own headings. About and Say hello never
   fold. It is a native <details>: keyboard, screen readers and find-in-page
   all work without a line of script, and with JavaScript off every file is
   still one click from open.
   ========================================================================= */
/* A folding file hands its spacing to the fold. Left alone it kept its own
   80px of padding and its own rule as well, so every closed row carried two
   dividers and about 240 pixels of nothing. */
.fold:not(.fold--open){padding:0;border-top:0}

.fold-d{border-top:1px solid var(--edge-2)}
.fold-d > .fold-head{
  list-style:none;cursor:pointer;
  display:flex;gap:clamp(14px,2.2vw,26px);align-items:flex-start;
  padding:clamp(15px,2vh,22px) 0;
  transition:opacity .18s var(--ease);
}
.fold-d > .fold-head::-webkit-details-marker{display:none}
.fold-d > .fold-head:hover{opacity:.82}
.fold-d > .fold-head:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* the plus that becomes a minus */
.fold-mark{
  flex:0 0 auto;position:relative;width:26px;height:26px;margin-top:.35em;
  border:1px solid var(--edge);
}
.fold-mark::before,.fold-mark::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--accent);
  transition:transform .38s var(--glide),opacity .38s var(--glide);
}
.fold-mark::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.fold-mark::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
.fold-d[open] .fold-mark::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.fold-d[open] .fold-mark{border-color:var(--accent)}

.fold-text{display:block}
.fold-text .ref{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 6px;
}
.fold-text h2{margin:0 0 .14em}
  /* the summary is a row, so its lede sits tight under the title */
.fold-text .lede{
  display:block;font-size:var(--step-1);font-weight:var(--w-light);
  color:var(--ink-2);font-style:italic;max-width:48ch;
}
/* indented to sit under the heading rather than under the plus, so the
   record reads as belonging to the file it came out of */
.fold-body{
  padding-bottom:clamp(30px,5vh,64px);
  padding-left:calc(26px + clamp(14px,2.2vw,26px));
}
@media (max-width:640px){ .fold-body{padding-left:0} }

/* the control that opens the lot, for anyone who would rather read straight
   through or print it */
/* a folded file that has just been jumped to gets a moment of the accent so
   you can see which one answered */
.fold-d[open].just-opened > .fold-head{animation:foldflash 1.1s var(--ease)}
@keyframes foldflash{ from{background:color-mix(in srgb,var(--accent) 12%,transparent)} to{background:transparent} }

@media (prefers-reduced-motion:reduce){
  .fold-mark::before,.fold-mark::after{transition:none}
  .fold-d[open].just-opened > .fold-head{animation:none}
}


/* ===========================================================================
   Motion, text edition
   ---------------------------------------------------------------------------
   Everything below is gated behind html.motion, which the page adds to itself
   only when script is running and the reader has not asked for reduced
   motion. With JavaScript off, or with reduced motion on, none of these rules
   apply and every word is on screen from the first paint. Nothing here is
   allowed to be the reason something cannot be read.
   ========================================================================= */

/* Three curves, because three different jobs.

   --glide  eases in as gently as it eases out. A panel that starts at full
            speed and crawls to a stop reads as fast-then-stuck; this one
            gets under way, moves, and settles.
   --lift   mostly deceleration, for something arriving into place.
   --press  a shallow overshoot, for the stamp. 1.2 rather than the 1.5 it
            had, so it still bites without snapping. */
:root{
  --glide:cubic-bezier(.42,.02,.18,1);
  --lift:cubic-bezier(.25,.6,.28,1);
  --press:cubic-bezier(.25,1.2,.4,1);
}

/* --- a file opening ------------------------------------------------------ */
.motion .fold-body{will-change:height}

/* --- things arriving as you reach them ----------------------------------- */
.motion .rise{
  opacity:0;transform:translateY(14px);
  transition:opacity .78s var(--lift),transform .78s var(--lift);
  transition-delay:var(--rise-in,0ms);
}
.motion .rise.risen{opacity:1;transform:none}

/* a plate develops rather than slides */
.motion .plate.rise{transform:translateY(16px) scale(.985)}
.motion .plate.rise.risen{transform:none}

/* the counts come up as figures, one after another */
.motion .counts li.rise{transform:translateY(18px)}

/* a note in her hand is written, not placed */
.motion .margin.rise{
  transform:translateY(8px) rotate(-.6deg);
  transition-duration:.9s;
  transition-timing-function:var(--lift);
}
.motion .margin.rise.risen{transform:none}

/* --- the stamp ------------------------------------------------------------
   A rubber stamp comes down hard, bites, and rocks back a degree. It arrives
   from above the paper, too big and out of focus, and lands. */
.motion .stamp.rise{
  opacity:0;
  transform:scale(1.85) rotate(-13deg);
  filter:blur(3px);
  transition:none;
}
.motion .stamp.rise.risen{
  opacity:.9;
  transform:rotate(-1.6deg);
  filter:blur(0);
  transition:
    opacity .24s linear var(--rise-in,0ms),
    transform .58s var(--press) var(--rise-in,0ms),
    filter .30s ease-out var(--rise-in,0ms);
}
/* the paper takes the hit */
@keyframes stampbite{
  0%   {box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 34%,transparent)}
  55%  {box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}
  100% {box-shadow:0 0 0 0 transparent}
}
.motion .stamp.rise.risen{animation:stampbite .8s var(--lift) var(--rise-in,0ms) both}