/* ═══════════════════════════════════════════════════════════
   US — Volume I · V4 · "A museum of kept things"
   Palette: night / warm ink / oxblood / ivory–bone–parchment–
   sage–blush papers · butter gold + oxide red accents.
   Mobile-first. No external dependencies.
   ═══════════════════════════════════════════════════════════ */

:root{
  --night:#12141d;
  --night-deep:#0c0e15;
  --inkwarm:#1a150f;
  --oxblood:#2e1418;
  --ivory:#f5efe2;
  --bone:#f0eadb;
  --parchment:#ece0c8;
  --sagebg:#e3e7d6;
  --blush:#f4e9e0;
  --ink:#221e18;
  --night-text:#e9e4d8;
  --ox-text:#f2e5d8;
  --stamp:#9e3423;
  --stamp-on-dark:#d08067;
  --butter:#9d7311;
  --butter-b:#dcae4a;
  --muted:#84796a;
  --muted-night:#9094a4;
  --muted-warm:#9d9280;
  --muted-ox:#c2a394;
  --hairline:rgba(34,30,24,.16);
  --hairline-dark:rgba(233,228,216,.16);
  --display:"Didot","Bodoni 72","Playfair Display",Georgia,"Times New Roman",serif;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--night);color:var(--ink);
  font-family:var(--serif);font-size:17px;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* small-caps metadata utility */
.eyebrow,.tag,.est,.pl-no,.xdate,.st-label,.fp-title,.fp-foot,
.specimen figcaption,.t-museum,.t-right,.cue,.wl-head,#index-btn,
.document figcaption,.c-stat span,.pos,.xnote,.chart-legend,.deck-where{
  font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.2em;font-size:10px;font-weight:500;
}

/* ── progress line ─────────────────────────────── */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:210;pointer-events:none}
#progress-line{display:block;height:100%;background:var(--butter-b);
  transform-origin:0 50%;transform:scaleX(0)}

/* ── masthead ──────────────────────────────────── */
.masthead{position:fixed;z-index:200;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));
  mix-blend-mode:difference;color:#fff}
.wordmark{font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:.04em;text-decoration:none}
.wordmark span{color:#b98d2f;margin:0 1px}
#index-btn{background:none;border:0;color:inherit;cursor:pointer;padding:10px 0 10px 14px}

/* ── floor plan overlay ────────────────────────── */
.floorplan{position:fixed;inset:0;z-index:300;background:var(--night);color:var(--night-text);
  display:flex;flex-direction:column;justify-content:center;
  padding:70px max(26px,env(safe-area-inset-left)) 40px;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.floorplan.open{opacity:1;pointer-events:auto}
.floorplan[hidden]{display:none}
.floorplan.open[hidden]{display:flex}
.fp-title{color:var(--butter-b);margin:0 0 16px}
.floorplan ol{list-style:none;margin:0;padding:0;overflow-y:auto}
.floorplan li{border-bottom:1px solid var(--hairline-dark)}
.floorplan a{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;
  gap:12px;text-decoration:none;padding:11px 2px}
.floorplan a i{font:italic 16px var(--display);color:var(--butter-b)}
.floorplan a b{font:500 17px var(--display);letter-spacing:.02em}
.floorplan a em{font:9px var(--sans);font-style:normal;text-transform:uppercase;
  letter-spacing:.16em;color:var(--muted-night);text-align:right}
.fp-foot{color:var(--muted-night);margin:20px 0 0}

/* ── rooms: shared bones ───────────────────────── */
.room{position:relative;padding:19vh max(22px,5.5vw) 16vh}
/* light rooms: overhead gallery light + tonal floor + paper depth */
.ivory{color:var(--ink);background:
  radial-gradient(122% 60% at 50% -8%,#fffbf2 0%,rgba(255,251,242,0) 62%),
  radial-gradient(140% 92% at 50% 116%,rgba(118,94,56,.15),rgba(118,94,56,0) 56%),
  var(--ivory)}
.bone{color:var(--ink);background:
  radial-gradient(120% 58% at 50% -6%,#faf5e9 0%,rgba(250,245,233,0) 60%),
  radial-gradient(140% 92% at 50% 116%,rgba(104,88,54,.16),rgba(104,88,54,0) 56%),
  var(--bone)}
.parchment{color:var(--ink);background:
  radial-gradient(circle at 13% 16%,rgba(146,106,58,.10) 0 2.6%,transparent 3.4%),
  radial-gradient(circle at 86% 30%,rgba(146,106,58,.08) 0 1.9%,transparent 2.7%),
  radial-gradient(circle at 24% 68%,rgba(146,106,58,.07) 0 2.3%,transparent 3.1%),
  radial-gradient(circle at 74% 84%,rgba(146,106,58,.09) 0 1.7%,transparent 2.5%),
  radial-gradient(126% 60% at 50% -6%,#f8efdb 0%,rgba(248,239,219,0) 62%),
  radial-gradient(140% 92% at 50% 116%,rgba(120,88,44,.17),rgba(120,88,44,0) 56%),
  var(--parchment)}
.sage{color:var(--ink);background:
  radial-gradient(120% 58% at 50% -4%,#f2f5e8 0%,rgba(242,245,232,0) 62%),
  radial-gradient(140% 90% at 50% 115%,rgba(66,84,54,.16),rgba(66,84,54,0) 56%),
  var(--sagebg)}
.blush{color:var(--ink);background:
  radial-gradient(120% 60% at 50% -6%,#fdf5ef 0%,rgba(253,245,239,0) 60%),
  radial-gradient(132% 84% at 50% 114%,rgba(146,84,74,.19),rgba(146,84,74,0) 58%),
  var(--blush)}

/* Room IV: faint archival ruling */
.parchment::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:repeating-linear-gradient(180deg,rgba(112,84,44,.055) 0 1px,transparent 1px 38px)}
/* Room II: display-case light shafts */
.vitrine-room::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(103deg,rgba(255,255,255,0) 16%,rgba(255,255,255,.55) 27%,rgba(255,255,255,0) 38%),
    linear-gradient(103deg,rgba(255,255,255,0) 57%,rgba(255,255,255,.38) 67%,rgba(255,255,255,0) 77%)}
/* Census: faint postmark watermark */
.census::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 34%,transparent 0 25%,rgba(158,52,35,.05) 25% 25.4%,transparent 25.4%),
    radial-gradient(circle at 50% 34%,transparent 0 29%,rgba(158,52,35,.04) 29% 29.3%,transparent 29.3%)}
.night{color:var(--night-text);
  background:var(--night) radial-gradient(130% 85% at 50% 0%,#1a1e30 0%,var(--night) 58%)}
.inkwarm{color:#efe7d5;
  background:var(--inkwarm) radial-gradient(95% 65% at 50% 22%,#241b10 0%,var(--inkwarm) 72%)}
.oxblood{color:var(--ox-text);
  background:var(--oxblood) radial-gradient(95% 60% at 50% 28%,#3b1a1f 0%,var(--oxblood) 74%)}

/* paper grain — tactile print texture on light rooms + oxblood */
.grain{isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size:180px 180px}
.oxblood.grain::after{opacity:.07;mix-blend-mode:overlay}

/* live sky canvas (shooting stars); sticky so tall rooms stay cheap */
.skyfx{isolation:isolate}
.skywrap{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:clip}
.sky-canvas{position:sticky;top:0;display:block;width:100%;height:100svh}

/* starfield (deterministic, subtle; night rooms only) */
.starfield{isolation:isolate}
.starfield::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='500'><g fill='%23c9d1e8'><circle cx='12' cy='40' r='.9' fill-opacity='.25'/><circle cx='58' cy='15' r='.7' fill-opacity='.18'/><circle cx='95' cy='88' r='1.1' fill-opacity='.3'/><circle cx='140' cy='30' r='.8' fill-opacity='.22'/><circle cx='188' cy='70' r='.6' fill-opacity='.15'/><circle cx='230' cy='22' r='1' fill-opacity='.28'/><circle cx='300' cy='60' r='.7' fill-opacity='.2'/><circle cx='270' cy='120' r='.9' fill-opacity='.24'/><circle cx='30' cy='150' r='.6' fill-opacity='.16'/><circle cx='110' cy='180' r='1.2' fill-opacity='.32'/><circle cx='210' cy='160' r='.7' fill-opacity='.18'/><circle cx='310' cy='190' r='.8' fill-opacity='.22'/><circle cx='70' cy='240' r='.9' fill-opacity='.26'/><circle cx='160' cy='260' r='.6' fill-opacity='.14'/><circle cx='255' cy='250' r='1' fill-opacity='.28'/><circle cx='20' cy='320' r='.7' fill-opacity='.18'/><circle cx='130' cy='340' r='.9' fill-opacity='.24'/><circle cx='300' cy='330' r='.6' fill-opacity='.16'/><circle cx='200' cy='380' r='1.1' fill-opacity='.3'/><circle cx='60' cy='420' r='.7' fill-opacity='.2'/><circle cx='250' cy='430' r='.8' fill-opacity='.22'/><circle cx='160' cy='460' r='.6' fill-opacity='.15'/></g><g fill='%23dcae4a'><circle cx='90' cy='110' r='1.2' fill-opacity='.3'/><circle cx='280' cy='400' r='1.1' fill-opacity='.26'/></g></svg>");
  background-size:340px 500px}

.room-head{position:relative;max-width:860px;margin-bottom:16vh}
.room-head.centered{margin-inline:auto;text-align:center}
.rn{position:absolute;top:-9vh;right:-2vw;z-index:0;pointer-events:none;
  font:italic clamp(120px,26vw,300px)/1 var(--display);opacity:.055;user-select:none}
.room-head.centered .rn{right:auto;left:50%;transform:translateX(-50%)}
.eyebrow{color:var(--stamp);margin:0 0 20px;position:relative;z-index:1}
.night .eyebrow,.inkwarm .eyebrow{color:var(--butter-b)}
.night .eyebrow::before{content:"✦  ";letter-spacing:.1em}
.oxblood .eyebrow{color:var(--butter-b)}
.room-head h2{position:relative;z-index:1;margin:0;
  font:500 clamp(46px,11vw,116px)/1.0 var(--display);letter-spacing:-.02em}
.room-head .intro{position:relative;z-index:1;font:italic 18px/1.6 var(--serif);
  color:var(--muted);max-width:560px;margin:26px 0 0}
.night .intro{color:var(--muted-night)}
.inkwarm .intro{color:var(--muted-warm)}
.oxblood .intro{color:var(--muted-ox)}
.room-head.centered .intro{margin-inline:auto}

/* ── exhibit label / tag ───────────────────────── */
.tag{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  color:var(--muted);margin-bottom:26px}
.tag .no{color:var(--stamp);font-weight:700}
.tag.light{color:var(--muted-night)}
.oxblood .tag.light{color:var(--muted-ox)}
.tag.light .no{color:var(--stamp-on-dark)}
.kept{color:var(--butter)}
.tag.light .kept{color:var(--butter-b)}

/* ── specimens (real messages) ─────────────────── */
.convo{display:flex;flex-direction:column;gap:30px;max-width:620px}
.specimen{margin:0;max-width:540px}
.specimen figcaption{color:var(--muted);margin-bottom:7px}
.night .specimen figcaption,.inkwarm .specimen figcaption{color:var(--muted-night)}
.inkwarm .specimen figcaption{color:var(--muted-warm)}
.specimen figcaption b{font-weight:700;color:var(--ink)}
.specimen.afroz figcaption b{color:var(--stamp)}
.night .specimen figcaption b,.inkwarm .specimen figcaption b{color:var(--night-text)}
.night .specimen.afroz figcaption b,.inkwarm .specimen.afroz figcaption b{color:var(--stamp-on-dark)}
.specimen blockquote{margin:0;font-size:17.5px;line-height:1.6;
  white-space:pre-line;overflow-wrap:anywhere}
.specimen.afroz{align-self:flex-end;margin-left:12%}
.specimen.punch blockquote{font:500 clamp(22px,5.4vw,34px)/1.3 var(--display);letter-spacing:0}
.specimen.feature blockquote{font:italic clamp(19px,4.4vw,25px)/1.5 var(--serif)}
.centered-convo{align-items:center;max-width:none}
.centered-convo .specimen{margin-left:0;text-align:center;align-self:center}
.convo.mini{margin-inline:auto;max-width:460px}

/* ── Room I ────────────────────────────────────── */
.exhibit{max-width:680px;margin:0 0 17vh}
.exhibit h3{font:500 clamp(26px,6vw,40px)/1.15 var(--display);margin:0 0 14px}
.exhibit .note{font:italic 15.5px/1.6 var(--serif);color:var(--muted);max-width:520px;margin:0 0 30px}
.night .exhibit .note{color:var(--muted-night)}
.after{font:italic 15.5px var(--serif);color:var(--muted);margin-top:34px}

/* ── plates & mats ─────────────────────────────── */
.plate{margin:14vh auto;max-width:460px}
.mat{background:#faf6ec;padding:clamp(10px,2.6vw,16px);
  border:1px solid var(--hairline);box-shadow:0 16px 44px rgba(31,26,18,.13)}
.mat.dark{background:#191b23;border-color:rgba(255,255,255,.08);
  box-shadow:0 18px 48px rgba(0,0,0,.42)}
.plate-img{background:#141210}
.plate-img img{width:100%;height:100%;object-fit:cover}
.ratio-34{aspect-ratio:3/4}
.ratio-tall{aspect-ratio:9/16}
.plate figcaption{display:grid;gap:9px;padding-top:18px}
.pl-no{color:var(--stamp)}
.pl-cap{font:italic 15.5px/1.6 var(--serif);color:var(--muted)}
.pl-q{font:15px/1.6 var(--serif);color:var(--butter)}
.plate.inset{max-width:340px;margin:12vh 0 4vh auto}
.plate.proof{max-width:490px;margin-top:22vh}
.plate.torn{max-width:350px}

/* ── Room II: vitrine ──────────────────────────── */
.vitrine-room{padding-bottom:8vh}
.vitrine{position:relative;max-width:600px;padding:13vh 0;margin:0}
.vitrine .ghost{position:absolute;top:4vh;right:-4vw;z-index:0;
  font:italic clamp(150px,34vw,360px)/1 var(--display);opacity:.05;pointer-events:none;user-select:none}
.vitrine h3{position:relative;z-index:1;font:500 clamp(27px,6.4vw,42px)/1.12 var(--display);margin:0 0 34px;letter-spacing:-.01em}
.vitrine .convo,.vitrine .tag,.vitrine .note{position:relative;z-index:1}
.vitrine .note{font:italic 15.5px/1.6 var(--serif);color:var(--muted);max-width:480px;margin-top:30px}
.xnote{display:inline-block;margin-top:36px;color:var(--butter);
  border:1px solid currentColor;padding:9px 14px}
.vitrine.solo{min-height:88svh;display:flex;flex-direction:column;justify-content:center}

/* ── Room III: lexicon ─────────────────────────── */
.lexicon .term{padding:12vh 0;border-top:1px solid var(--hairline-dark);max-width:820px}
.lexicon .term:first-of-type{border-top:0}
.term h3{font:500 clamp(52px,13vw,120px)/1 var(--display);margin:0;
  color:var(--butter-b);letter-spacing:-.02em;overflow-wrap:anywhere}
.term .butter{font-size:.5em;vertical-align:.35em}
.pos{display:block;color:var(--muted-warm);margin:16px 0 0;line-height:1.9}
.ety{margin-top:44px;display:grid;gap:34px;max-width:600px}
.stage{display:grid;gap:12px}
.st-label{color:var(--butter-b)}
.st-note{font:italic 15.5px/1.65 var(--serif);color:var(--muted-warm);
  border-left:1px solid var(--butter-b);padding-left:16px;margin:6px 0 0;max-width:480px}
.lexicon .specimen.afroz{align-self:auto;margin-left:8%}

/* ── Room IV: cross-references ─────────────────── */
.xref{max-width:660px;margin:0 0 18vh;position:relative}
.xref h3{font:500 clamp(26px,6vw,40px)/1.15 var(--display);margin:0 0 34px}
.xref .moment{position:relative;display:flex;flex-direction:column;gap:24px}
.xdate{display:block;color:var(--muted);margin-bottom:0}
.xref .moment.later{margin-left:9%}
.thread{display:grid;justify-items:start;gap:12px;margin:26px 0 26px 10px}
.thread i{display:block;width:1px;height:52px;background:var(--butter);
  transform-origin:top;transform:scaleY(0);transition:transform 1.1s cubic-bezier(.6,0,.2,1)}
.reveal.in .thread i,.flat .thread i{transform:scaleY(1)}
.thread i:last-child{transition-delay:.5s}
.thread span{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;
  font-size:10px;color:var(--butter);border:1px solid var(--butter);
  padding:8px 14px;margin-left:-1px}
.xref .note{font:italic 15px/1.6 var(--serif);color:var(--muted);margin-top:28px;max-width:480px}

/* ── Room V: Billu ─────────────────────────────── */
.sage .room-head{margin-bottom:10vh}
.diptych{display:grid;gap:20px;max-width:860px;margin:9vh auto}
.diptych .plate{margin:0;max-width:none}
.sage .centered-convo{margin:7vh 0}

/* ── Room VI: off the record ───────────────────── */
.offrecord .room-head{margin-bottom:13vh}
.offitem{max-width:640px;margin:0 auto 15vh;text-align:center}
.offitem .tag{justify-content:center}
.offitem h3{font:500 clamp(27px,6.6vw,42px)/1.15 var(--display);margin:0 0 18px;color:#f6ead9}
.offline{font:italic 16.5px/1.75 var(--serif);color:var(--muted-ox);max-width:460px;margin:0 auto}
.offline.small{margin-top:14px;font-size:15px;color:#a98d80}
.offitem.deck9{padding:9vh 0 7vh}
.deck-where{color:var(--butter-b);margin:0 0 8px}
.offitem h3.deck-title{font:500 clamp(72px,20vw,170px)/1 var(--display);margin:6px 0 30px;
  color:#f6ead9;letter-spacing:-.02em}
.deck-note{max-width:420px}
.offitem.letters{margin-bottom:6vh}

/* the Deck 9 evening — one linked story */
.evening .deck-note{margin-bottom:0}
.ev-thread{display:grid;justify-items:center;gap:12px;margin:52px auto 46px}
.ev-thread i{display:block;width:1px;height:44px;background:var(--butter-b);opacity:.75;
  transform-origin:top;transform:scaleY(0);transition:transform 1s cubic-bezier(.6,0,.2,1) .3s}
.ev-thread i:last-child{transition-delay:.8s}
.reveal.in .ev-thread i,.flat .ev-thread i{transform:scaleY(1)}
.ev-thread span{font-family:var(--sans);text-transform:uppercase;letter-spacing:.24em;
  font-size:10px;color:var(--butter-b);border:1px solid rgba(220,174,74,.55);padding:8px 14px}
.ev-beat{font:italic 16.5px/1.75 var(--serif);color:var(--muted-ox);max-width:420px;margin:0 auto}
.ev-stop{font:500 clamp(38px,9vw,64px)/1 var(--display);color:#f6ead9;margin:0 0 18px;letter-spacing:-.01em}
.letterstack{position:relative;width:min(300px,82%);height:150px;margin:48px auto 12px}
.letter{position:absolute;inset:0;background:#f4ecdc;border:1px solid rgba(0,0,0,.14);
  box-shadow:0 12px 32px rgba(0,0,0,.38)}
.letter.l1{transform:rotate(-3deg) translate(-9px,7px)}
.letter.l2{transform:rotate(2.2deg) translate(7px,-3px)}
.letter.l3{transform:rotate(-.6deg);display:grid;place-items:center}
.letter.l3 span{font-family:var(--sans);text-transform:uppercase;font-size:9.5px;
  letter-spacing:.24em;line-height:2.1;color:#7a6a52;text-align:center}

/* ── NJ → Surat journey ────────────────────────── */
.journey{max-width:620px;margin:0 auto 18vh}
.journey-svg{width:100%;height:auto;display:block;overflow:visible}
.j-arc{fill:none;stroke:var(--butter-b);stroke-opacity:.32;stroke-width:.7;
  stroke-dasharray:2 5;stroke-linecap:round}
.j-node{fill:#e8e4d6;fill-opacity:.9}
.j-star{fill:var(--butter-b);filter:drop-shadow(0 0 4px rgba(220,174,74,.9))}
.j-trail{fill:var(--butter-b)}
.j-trail.t1{fill-opacity:.45}.j-trail.t2{fill-opacity:.26}.j-trail.t3{fill-opacity:.12}
.j-pulse{fill:none;stroke:var(--butter-b);stroke-width:.8;opacity:0;
  transform-origin:372px 148px;animation:j-pulse 9.5s cubic-bezier(.3,0,.4,1) infinite}
@keyframes j-pulse{0%,72%{opacity:0;transform:scale(.4)}
  78%{opacity:.85;transform:scale(.7)}
  92%{opacity:0;transform:scale(2.4)}100%{opacity:0;transform:scale(2.4)}}
.j-code{font:600 15px var(--sans);letter-spacing:.3em;fill:var(--night-text)}
.j-place{font:9px var(--sans);letter-spacing:.22em;fill:var(--muted-night);text-transform:uppercase}
.j-who{font:italic 15px var(--display);fill:#d7d2c4}
.j-who.her{fill:var(--butter-b)}
.j-field circle{fill:#cdd4e8;fill-opacity:.3}
.j-lit{fill:none;stroke:var(--butter-b);stroke-width:1.1;stroke-linecap:round;
  stroke-dasharray:1;opacity:0}
.j-halo{fill:none;stroke:var(--butter-b);stroke-opacity:.16;stroke-width:.8}

/* ── Room VII: distance ────────────────────────── */
.distance .exhibit{margin-inline:auto;max-width:640px;margin-bottom:20vh}
.doc-exhibit{max-width:760px}
.doc-row{display:grid;gap:44px;align-items:start}
.document{margin:0 auto;max-width:230px;background:#f6f2e9;color:var(--ink);
  padding:9px 9px 12px;transform:rotate(-1.6deg);
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.document figcaption{padding-top:10px;text-align:center;letter-spacing:.14em;color:#6d6553}
.doc-copy h3{font:500 clamp(26px,6vw,38px)/1.15 var(--display);margin:0 0 26px}

.letters-exhibit{text-align:center}
.letters-exhibit h3{font:500 clamp(26px,6vw,38px)/1.15 var(--display);margin:0 0 12px}
.letters-exhibit .note{margin-inline:auto}
.letters-exhibit .tag{justify-content:center}
.letterfall{display:flex;flex-direction:column;align-items:center;gap:2px;
  margin:52px 0 40px;font:italic clamp(20px,5vw,27px)/1.5 var(--display)}
.letterfall span{opacity:0;transform:translateY(-8px);
  transition:opacity .5s ease,transform .5s ease;
  transition-delay:calc(var(--i,0)*110ms)}
.reveal.in .letterfall span,.flat .letterfall span{opacity:1;transform:none}
.letterfall span:first-child{font-size:.65em;letter-spacing:.06em;color:var(--muted-night);margin-bottom:10px}
.arrive-late{margin:0 0 0 auto;max-width:300px;text-align:right}
.letters-exhibit .arrive-late{margin-inline:auto;text-align:center}

.eid{max-width:680px;margin:24vh auto 6vh;text-align:center}
.eid .eyebrow{margin-bottom:34px}
.eid-quote{margin:0;font:500 clamp(21px,4.8vw,32px)/1.55 var(--display);
  white-space:pre-line;color:#f2e8d2}
.eid-attr{font:italic 15px var(--serif);color:var(--muted-night);margin:26px 0 54px}
.eid .specimen{margin-inline:auto;text-align:left}

/* ── Room VIII: her words ──────────────────────── */
.words-room .room-head{margin-bottom:10vh}
.pull{max-width:900px;margin:0 0 16vh}
.pull-quote{margin:34px 0 0;font:500 clamp(27px,6.6vw,54px)/1.3 var(--display);
  letter-spacing:-.01em}
.pull-attr{font:italic 16px var(--serif);color:var(--muted);margin:26px 0 0}
.pull .note{font:italic 15.5px/1.6 var(--serif);color:var(--muted);max-width:460px;margin-top:30px}

/* ── census ────────────────────────────────────── */
.census{padding-bottom:12vh}
.census-board{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:7vh 24px;max-width:960px;margin:0 auto;align-items:end}
.c-stat b{display:block;font:500 clamp(40px,9.5vw,92px)/1 var(--display);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.c-stat span{display:block;color:var(--muted);margin-top:10px}
.c-stat.big{grid-column:1/-1;text-align:center}
.c-stat.big b{font-size:clamp(72px,20vw,190px);color:var(--stamp)}
.c-stat.butter-stat b{color:var(--butter)}
.c-stamp{position:absolute;right:2%;top:-30px;transform:rotate(-9deg);
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.3em;
  font-size:11px;font-weight:700;color:var(--stamp);
  border:2px solid var(--stamp);padding:14px 18px;text-align:center;
  opacity:.9;line-height:1.9}
.census-foot{max-width:520px;margin:12vh auto 0;text-align:center;
  font:italic 16px/1.7 var(--serif);color:var(--muted)}

/* ── star chart ────────────────────────────────── */
.chartroom .room-head{margin-bottom:9vh}
.chart-wrap{max-width:540px;margin:0 auto}
.chart-svg{width:100%;height:auto;display:block}
.cs-spine{fill:none;stroke:var(--butter-b);stroke-width:.8;stroke-opacity:.5;
  stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 4.2s cubic-bezier(.35,0,.25,1) .35s}
.reveal.in .cs-spine,.flat .cs-spine{stroke-dashoffset:0}
.cs-pt circle{fill:#e8e4d6;fill-opacity:.95}
.cs-pt circle.cs-hollow,.cs-hollow{fill:none;stroke:#e8e4d6;stroke-opacity:.72;stroke-width:.9}
.heart-node{stroke:var(--butter-b);stroke-opacity:.85}
.cs-heart{font-size:5.4px;fill:var(--butter-b);text-anchor:middle}
.cs-code{font:600 11px var(--sans);letter-spacing:.22em;fill:var(--night-text)}
.cs-places .cs-hollow{stroke:var(--butter-b);stroke-opacity:.7}
.cs-name{font:italic 12px var(--serif);fill:#ddd7c6}
.cs-date{font:9px var(--sans);font-style:normal;fill:var(--muted-night);letter-spacing:.06em}
.cs-glow{fill:var(--butter-b);fill-opacity:.13}
.cs-star path{fill:var(--butter-b)}
.cs-bday{font:11px var(--sans);letter-spacing:.28em;fill:var(--butter-b)}
.cs-bdaysub{font:8.5px var(--sans);letter-spacing:.2em;fill:var(--muted-night);text-transform:uppercase}
.chart-legend{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;
  color:var(--muted-night);margin:44px 0 0}
.chart-legend span{white-space:nowrap}

/* ── finale ────────────────────────────────────── */
.finale{min-height:100svh}
.finale .room-head{margin-bottom:11vh}
.future{max-width:640px;margin:0 auto 16vh}
.centered-note{font:italic 16px/1.75 var(--serif);color:var(--muted-night);
  text-align:center;margin:0 0 7vh}
.wall-label{max-width:640px;margin:0 auto 18vh;border:1px solid var(--hairline-dark);
  outline:1px solid rgba(233,228,216,.05);outline-offset:6px;
  padding:clamp(30px,7vw,56px)}
.wl-head{color:var(--butter-b);margin:0 0 34px}
.wl-body{font:italic 17.5px/1.85 var(--serif);white-space:pre-line;overflow-wrap:break-word}
.wl-body p{margin:0 0 30px;opacity:0;transform:translateY(12px);
  transition:opacity .9s ease,transform .9s ease;
  transition-delay:calc(var(--i,0)*220ms + 200ms)}
.reveal.in .wl-body p,.flat .wl-body p{opacity:1;transform:none}
.wl-lead{font:italic clamp(20px,4.6vw,26px)/1.6 var(--display)}
.wl-sign{font:italic clamp(21px,4.8vw,28px) var(--display);color:var(--butter-b);
  margin:44px 0 0;text-align:center}
/* the last moment — lights down */
.colophon{text-align:center;margin-top:14vh;padding-bottom:6vh}
.end-rule{display:block;width:38px;height:1px;margin:0 auto 40px;
  background:var(--butter-b);opacity:0;transform:scaleX(0);
  transition:opacity 1s ease,transform 1.4s cubic-bezier(.4,0,.2,1)}
.end-mark{font:500 clamp(30px,7vw,46px) var(--display);margin:0;
  opacity:0;transform:translateY(10px);
  transition:opacity 1.2s ease .55s,transform 1.2s ease .55s}
.end-sub{font:italic 17px var(--serif);color:var(--muted-night);margin:18px 0 0;
  opacity:0;transform:translateY(10px);
  transition:opacity 1.2s ease 1.9s,transform 1.2s ease 1.9s}
.reveal.in .end-rule{opacity:.85;transform:scaleX(1)}
.reveal.in .end-mark,.reveal.in .end-sub{opacity:1;transform:none}
.flat .end-rule{opacity:.85;transform:scaleX(1)}
.flat .end-mark,.flat .end-sub{opacity:1;transform:none}
/* sky dims once she reaches the last two lines */
.sky-canvas{transition:opacity 2.8s ease}
.skyfx.quiet .sky-canvas{opacity:.18}

footer{background:var(--night-deep);color:#767b8c;text-align:center;
  padding:34px 24px calc(30px + env(safe-area-inset-bottom));
  font:10px var(--sans);letter-spacing:.18em;text-transform:uppercase}
footer p{margin:0;line-height:2}

/* ── prologue: before the archive ───────────────── */
.prologue{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;text-align:center;
  padding:calc(84px + env(safe-area-inset-top)) max(24px,6vw) 60px;
  background:var(--night) radial-gradient(120% 70% at 50% 8%,#1c2033 0%,var(--night) 62%);
  color:var(--night-text)}
.p-est{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;
  font-size:10px;font-weight:500;color:var(--butter-b);margin:0 0 10vh}
.pnode{max-width:470px;margin:0 auto}
.pn-mark{display:block;font-size:19px;line-height:1;color:var(--butter-b);
  margin:0 0 20px;text-shadow:0 0 16px rgba(220,174,74,.6)}
.pn-mark.heart{font-size:26px}
.pn-where{font-family:var(--sans);text-transform:uppercase;letter-spacing:.26em;
  font-size:10px;font-weight:500;color:var(--muted-night);margin:0 0 16px}
.pn-fact{font:500 clamp(30px,7.4vw,46px)/1.22 var(--display);margin:0;
  color:#f4efe2;letter-spacing:-.01em}
.pn-quote{font:italic clamp(20px,5vw,28px)/1.5 var(--display);margin:0 auto;
  color:#f4ecdb;max-width:21ch}
.pn-sub{font:italic 15.5px/1.7 var(--serif);color:var(--muted-night);
  margin:18px auto 0;max-width:32ch}
.pthread{display:grid;justify-items:center;margin:7vh auto}
.pthread i{display:block;width:1px;height:58px;opacity:.75;
  background:linear-gradient(180deg,transparent,var(--butter-b),transparent)}

/* ── admission ─────────────────────────────────── */
.reveal.dly1{transition-delay:.22s}
.reveal.dly2{transition-delay:.44s}
.reveal.dly3{transition-delay:.66s}
.admission{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(70px + env(safe-area-inset-top)) max(24px,6vw) 60px;
  background:var(--night);color:var(--night-text)}
.est{text-align:center;color:var(--butter-b);margin:0 0 8vh}
.first-msgs{width:min(100%,420px);margin:0 auto;display:flex;flex-direction:column;gap:20px}
.first-msgs .specimen:nth-child(2){margin-left:14%}
.first-msgs .specimen:nth-child(3){margin-left:28%}
.first-msgs .specimen{align-self:auto}
.first-msgs blockquote{font-size:18px}
.title-block{text-align:center;margin:9vh 0 8vh}
.title-block h1{font:500 clamp(120px,34vw,240px)/.8 var(--display);
  letter-spacing:-.01em;margin:0}
.title-block .vol{font:italic clamp(22px,5vw,30px) var(--display);
  color:var(--butter-b);margin:22px 0 0}
.title-block .thesis{font:italic 17px/1.6 var(--serif);color:var(--muted-night);margin:18px 0 0}
.ticket{width:min(100%,380px);margin:0 auto;display:grid;grid-template-columns:1fr auto;
  border:1px solid rgba(220,174,74,.55);outline:1px solid rgba(220,174,74,.14);outline-offset:4px;
  background:#181a24;transform:rotate(-1.8deg)}
.t-left{padding:18px 20px;display:grid;gap:4px}
.t-museum{color:var(--muted-night);letter-spacing:.24em;font-size:8.5px}
.t-admit{font:500 24px/1.1 var(--display);letter-spacing:.02em;text-transform:none}
.t-name{font:italic 27px/1.1 var(--display);color:var(--butter-b)}
.t-right{border-left:1px dashed rgba(220,174,74,.55);padding:14px 16px;
  display:grid;align-content:center;gap:1px;text-align:right;color:var(--muted-night)}
.t-right b{font:500 13.5px var(--display);color:var(--night-text);letter-spacing:.06em}
.t-right span{font-size:8px;letter-spacing:.2em;margin-top:7px}
.t-right span:first-child{margin-top:0}
.cue{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:9vh auto 0;color:var(--muted-night);text-decoration:none;letter-spacing:.3em}
.cue i{display:block;width:1px;height:44px;background:var(--butter-b);
  animation:cue-grow 2.2s ease-in-out infinite}
@keyframes cue-grow{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* opening timed arrival */
.arrive{opacity:0;transform:translateY(16px);
  animation:arrive 1s cubic-bezier(.2,.6,.2,1) forwards}
.a1{animation-delay:.3s}.a2{animation-delay:1.1s}.a3{animation-delay:1.9s}
.a4{animation-delay:2.7s}.a5{animation-delay:3.7s}.a6{animation-delay:4.6s}
.a7{animation-delay:5.3s}
@keyframes arrive{to{opacity:1;transform:none}}

/* ── reveal on scroll ──────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal .specimen{opacity:0;transform:translateY(14px);
  transition:opacity .8s ease,transform .8s ease;
  transition-delay:calc(var(--i,0)*140ms + 250ms)}
.reveal.in .specimen{opacity:1;transform:none}

/* flat mode (QA/screenshots) + reduced motion */
.flat *,.flat *::before,.flat *::after{animation:none!important;transition:none!important}
.flat .arrive,.flat .reveal,.flat .reveal .specimen{opacity:1!important;transform:none!important}
.flat .thread i{transform:scaleY(1)!important}
.flat .cs-line{stroke-dashoffset:0!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .arrive,.reveal,.reveal .specimen{opacity:1!important;transform:none!important}
  .thread i{transform:scaleY(1)!important}
  .letterfall span{opacity:1!important;transform:none!important}
  .cs-line{stroke-dashoffset:0!important}
}

/* ── ≥760px ────────────────────────────────────── */
@media(min-width:760px){
  .room{padding-inline:max(48px,9vw)}
  .exhibit,.xref{margin-left:6vw}
  .vitrine{margin-inline:auto}
  .vitrine.offset{transform:translateX(9vw)}
  .plate.inset{margin-right:-6vw}
  .diptych{grid-template-columns:1fr 1fr;gap:28px}
  .doc-row{grid-template-columns:250px 1fr;gap:64px}
  .document{margin:0}
  .census-board{grid-template-columns:repeat(3,1fr)}
  .c-stat.big{grid-column:1/-1}
  .c-stamp{right:4%;top:-16px}
  .floorplan{padding-inline:12vw}
  .floorplan a{grid-template-columns:70px 1fr auto;padding:13px 2px}
  .floorplan a b{font-size:21px}
  .offitem{margin-bottom:17vh}
}

/* ── ≥1100px ───────────────────────────────────── */
@media(min-width:1100px){
  .room{padding-inline:max(64px,11vw)}
  .room-head{margin-bottom:19vh}
  .convo{max-width:640px}
  .specimen blockquote{font-size:18px}
  .plate{max-width:480px}
  .plate.proof{max-width:500px}
  .lexicon .term{padding:14vh 0}
  .ety{max-width:640px}
  .xref{max-width:720px}
  .wall-label{max-width:700px}
  .chart-wrap{max-width:560px}
}

/* very narrow screens */
@media(max-width:359px){
  body{font-size:16px}
  .room{padding-inline:18px}
  .specimen.afroz{margin-left:6%}
  .xref .moment.later{margin-left:4%}
  .vitrine .ghost{right:-8vw}
  .cs-name{font-size:13px}
}