/* ============================================================
   THE NIGHT COLLECTION — night.css
   One stylesheet for the whole museum.
   Registers:
     body.page-room   — the entrance hall (index.html)
     body.page-essay  — a reading room (essays, lab papers)
     body.page-wing   — east wing, laboratory, visitors' book
     body.cold        — laboratory light (colder accent)
   ============================================================ */

:root{
  --night-0:#04060a;
  --night-1:#070b12;
  --night-2:#0c1320;
  --ink:#e9e4d6;
  --ink-dim:#9a958a;
  --faint:#7d8597;
  --amber:#d9a85c;
  --amber-dim:rgba(217,168,92,.72); /* label text on near-black: ~5:1, clears WCAG AA */
  --amber-ghost:rgba(217,168,92,.14);
  --hair:rgba(233,228,214,.13);
  --err:#cf8e8e; /* form error text — readable muted red on near-black */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --display:"Fraunces",Georgia,serif;
  --sans:"Hanken Grotesk",-apple-system,"Segoe UI",sans-serif;
  --mono:"Iosevka","SF Mono",Consolas,monospace;
  /* type scale — text/label band; display sizes stay literal */
  --fs-2xs:.66rem; --fs-xs:.7rem; --fs-sm:.78rem; --fs-ms:.84rem;
  --fs-base:.92rem; --fs-md:.98rem; --fs-lg:1.04rem; --fs-read:1.06rem; --fs-xl:1.2rem;
  /* tracking scale — title animation + arrival lead-in stay literal */
  --tr-optical:.02em; --tr-tight:.12em; --tr-label:.2em; --tr-wide:.26em;
  --warmth:0; /* runtime: 0 by day → ~1 near the museum's 1am; set by room.js */
}
body.cold{
  --amber:#8fb6d8;
  --amber-dim:rgba(143,182,216,.72);
  --amber-ghost:rgba(143,182,216,.12);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--night-0);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
::selection{background:rgba(217,168,92,.28);color:var(--ink)}
button{background:none;border:none;color:inherit;font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber-dim);outline-offset:3px;
}
a{color:inherit}
img{max-width:100%;display:block}

/* cross-document transitions where supported */
@view-transition{navigation:auto}
::view-transition-old(root){animation:nc-out .45s ease both}
::view-transition-new(root){animation:nc-in .65s ease both}
@keyframes nc-out{to{opacity:0}}
@keyframes nc-in{from{opacity:0}}

/* spatial grammar — the museum has a geography.
   east is a walk to the right; the visitors' book is a step down to the desk */
@keyframes vt-out-west{to{opacity:0;transform:translateX(-30px)}}
@keyframes vt-in-east{from{opacity:0;transform:translateX(34px)}}
@keyframes vt-out-east{to{opacity:0;transform:translateX(30px)}}
@keyframes vt-in-west{from{opacity:0;transform:translateX(-34px)}}
@keyframes vt-out-up{to{opacity:0;transform:translateY(-26px)}}
@keyframes vt-in-below{from{opacity:0;transform:translateY(30px)}}
@keyframes vt-out-down{to{opacity:0;transform:translateY(26px)}}
@keyframes vt-in-above{from{opacity:0;transform:translateY(-30px)}}
html:active-view-transition-type(move-east)::view-transition-old(root){animation:vt-out-west .38s ease both}
html:active-view-transition-type(move-east)::view-transition-new(root){animation:vt-in-east .56s cubic-bezier(.2,.65,.25,1) both}
html:active-view-transition-type(move-west)::view-transition-old(root){animation:vt-out-east .38s ease both}
html:active-view-transition-type(move-west)::view-transition-new(root){animation:vt-in-west .56s cubic-bezier(.2,.65,.25,1) both}
html:active-view-transition-type(move-down)::view-transition-old(root){animation:vt-out-up .38s ease both}
html:active-view-transition-type(move-down)::view-transition-new(root){animation:vt-in-below .56s cubic-bezier(.2,.65,.25,1) both}
html:active-view-transition-type(move-up)::view-transition-old(root){animation:vt-out-down .38s ease both}
html:active-view-transition-type(move-up)::view-transition-new(root){animation:vt-in-above .56s cubic-bezier(.2,.65,.25,1) both}
/* shared elements — the plate you touch becomes the room's title */
::view-transition-group(door-east),::view-transition-group(door-visitors),
::view-transition-group(door-anime),::view-transition-group(door-games),
::view-transition-group(door-use),::view-transition-group(door-link){
  animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.65,.25,1);
}

/* tiny shared atoms */
.placard-label{
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;
  color:var(--amber-dim);
}
.quiet{color:var(--faint)}

/* ---- the voices and their figures ----
   Fraunces = inscription/title · Newsreader = prose & spoken aside ·
   Hanken = wall label/instrument · Iosevka = machine. The reading and
   inscription voices set numerals as OLD-STYLE figures that sit in the line
   like real typesetting; the label voice keeps lining figures (which align
   with the tracked caps it always wears). */
.e-body, .e-note, .e-title, .e-ghost, .e-body blockquote, #placard .pq,
.panel.prose p, .panel.prose blockquote, .card p, .vb-entry p, .vb-question,
.wing-sub, .idx-title, .idx-author, .door-sub, .reg-last, #desk .song-title,
.mnote p, .wing-head h1, .door-list .b-title{
  font-variant-numeric:oldstyle-nums proportional-nums;
}

/* ============================================================
   THE ENTRANCE HALL (index.html)
   ============================================================ */
body.page-room{overflow:hidden;height:100vh}

#sky{position:fixed;inset:0;z-index:0;display:block}
#sky.star-hover{cursor:pointer}

/* arrival */
#arrival{
  position:fixed;inset:0;z-index:100;background:var(--night-0);
  display:flex;align-items:center;justify-content:center;text-align:center;
  transition:opacity .9s ease;cursor:pointer;
}
#arrival.gone{opacity:0;pointer-events:none}
#arrival .lines{max-width:34rem;padding:0 2rem}
#arrival p{
  font-size:var(--fs-xl);font-style:italic;color:var(--ink-dim);
  line-height:2;opacity:0;letter-spacing:.06em;
  transition:opacity 1s ease,letter-spacing 1.5s cubic-bezier(.2,.65,.25,1);
}
#arrival p.lit{opacity:1;letter-spacing:.015em} /* the words settle as they surface */
#arrival .skip{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;
  color:var(--faint);padding-bottom:.55rem;
  border-bottom:1px solid rgba(217,168,92,.22);
  animation:doorbreathe 4.4s ease-in-out infinite;
}
@keyframes doorbreathe{0%,100%{opacity:.45}50%{opacity:.85}}

/* chrome */
.chrome{
  position:fixed;z-index:30;font-family:var(--sans);
  font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--faint);
}
/* the wordmark — a stamped plate, same metal as the register */
#wordmark{
  top:1.6rem;left:2rem;line-height:1.9;
  border:1px solid var(--hair);padding:.65rem .95rem .55rem;
}
#wordmark::after{
  content:"";position:absolute;inset:3px;pointer-events:none;
  border:1px solid rgba(217,168,92,.1);
}
#wordmark .wm-title{color:var(--ink-dim);letter-spacing:var(--tr-label)}

/* doorways */
/* ============================================================
   THE RIGHT RAIL — three plates cut from one sheet of metal:
   where to go · what the keeper says · who was here
   ============================================================ */
.doorway,#notes-stack,#visitor-line{
  position:fixed;right:2rem;z-index:30;width:16.5rem;
  display:block;text-align:left;text-decoration:none;
  border:1px solid var(--hair);background:rgba(233,228,214,.028);
  padding:.85rem 1.05rem .8rem;
}
.doorway::before,#notes-stack::before,#visitor-line::before{
  content:"";position:absolute;inset:3px;pointer-events:none;
  border:1px solid rgba(217,168,92,.1);transition:border-color .5s ease;
}
/* material response: the plate lifts, then its keyline warms — metal, then light */
.doorway:hover,#notes-stack:hover,#visitor-line:hover{
  background:rgba(233,228,214,.05);border-color:var(--amber-ghost);
  transform:translateY(-1px);
}
.doorway,#notes-stack,#visitor-line{
  transition:border-color .45s ease,background .45s ease,opacity .55s ease,
             transform .45s cubic-bezier(.2,.65,.25,1);
}
.doorway:hover::before,#notes-stack:hover::before,#visitor-line:hover::before{
  border-color:rgba(217,168,92,.3);transition-delay:.06s;
}
/* one modular rhythm up the right wall, even gaps: 1.8 → 8.4 → 12.5 → 16.6 */
#visitor-line{bottom:1.8rem;view-transition-name:door-visitors}
#notes-stack{bottom:8.4rem}
#door-east{bottom:12.5rem;view-transition-name:door-east}
#door-catalogue{bottom:16.6rem}
.door-label{
  display:block;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--amber-dim);margin-bottom:.45rem;transition:color .4s;
}
.doorway:hover .door-label,#notes-stack:hover .door-label{color:var(--amber)}
.door-sub{
  display:block;font-family:var(--serif);font-style:italic;font-size:var(--fs-ms);
  line-height:1.7;color:var(--ink-dim);letter-spacing:var(--tr-optical);
}
#nc-text{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* the desk */
#desk{
  position:fixed;left:2rem;bottom:1.8rem;z-index:30;
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-tight);color:var(--faint);
  line-height:2.2;
}

/* (curator's notes plate styles live with the right-rail family above) */
/* the song — an object on the desk, not a footnote */
#desk .song-block{display:block;margin-top:1rem;max-width:30ch}
#desk .song-label{
  display:block;font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--amber-dim);
}
#desk .song-title{
  display:block;margin-top:.35rem;font-family:var(--serif);font-style:italic;
  font-size:var(--fs-base);letter-spacing:var(--tr-optical);line-height:1.6;color:var(--ink-dim);
}

/* the register — a brass plate by the door, holding the last signature */
#visitor-line{
  position:fixed;right:2rem;bottom:1.8rem;z-index:30;display:block;
  width:16.5rem;padding:.85rem 1.05rem .8rem;text-decoration:none;
  border:1px solid var(--hair);background:rgba(233,228,214,.028);
  transition:border-color .45s ease,background .45s ease,opacity .55s ease,
             transform .45s cubic-bezier(.2,.65,.25,1);
}
#visitor-line::before{
  content:"";position:absolute;inset:3px;pointer-events:none;
  border:1px solid rgba(217,168,92,.1);transition:border-color .5s ease;
}
#visitor-line:hover{border-color:var(--amber-ghost);background:rgba(233,228,214,.05)}
#visitor-line:hover::before{border-color:rgba(217,168,92,.3)}
.reg-label{
  display:block;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--amber-dim);margin-bottom:.5rem;
}
.reg-last{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--serif);font-style:italic;font-size:var(--fs-ms);line-height:1.65;
  color:var(--ink-dim);letter-spacing:var(--tr-optical);margin-bottom:.55rem;
}
.reg-count{
  display:block;font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:var(--tr-label);
  color:var(--faint);line-height:1.9;
}
.reg-count .n{color:var(--ink-dim)}
.reg-cta{
  display:block;margin-top:.4rem;font-family:var(--sans);font-size:var(--fs-2xs);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--faint);transition:color .4s;
}
#visitor-line:hover .reg-cta{color:var(--amber)}

/* room title */
#room-title{
  position:fixed;z-index:10;top:11vh;left:50%;transform:translateX(-50%);
  width:max-content;max-width:92vw;
  text-align:center;pointer-events:none;
}
/* a deepening of the night behind the title, so stars never cut through it */
#room-title::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:42%;transform:translate(-50%,-50%);
  width:122%;height:150%;
  background:radial-gradient(ellipse at center,
    rgba(4,6,10,.82) 0%, rgba(4,6,10,.5) 44%, rgba(4,6,10,0) 73%);
}
/* the title wall — four lines, one strict cascade of weight:
   the name burns, the hours inform, the keeper invites, the hour whispers */
#room-title h1{
  font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,3.6vw,2.9rem);
  letter-spacing:.3em;text-indent:.3em;color:var(--ink);opacity:1;
  text-shadow:0 0 16px rgba(4,6,10,.9);
}
#room-title .sub{
  margin-top:1.3rem;font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;color:var(--faint);opacity:1;
}
/* the keeper's placard — the about, hung in the room itself */
#room-title .keeper{
  margin-top:1.8rem;pointer-events:auto;
  font-family:var(--serif);font-style:italic;font-size:var(--fs-base);letter-spacing:var(--tr-optical);
  color:var(--ink-dim);opacity:.85;transition:color .4s,opacity .4s;
}
#room-title .keeper:hover{color:var(--amber);opacity:1}
/* the hour line — the room knows what time it is where you are */
#hour-line{
  margin-top:1.1rem;font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:var(--tr-label);text-indent:.2em;
  text-transform:uppercase;color:var(--faint);opacity:0;transition:opacity 2s ease 1s;
}
body.room-lit #hour-line{opacity:.9}
#hour-line .dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber-dim);
  margin-right:.6em;vertical-align:1px;
}
#hour-line.open .dot{animation:hourpulse 3.2s ease-in-out infinite}
#hour-line.open{color:var(--amber-dim)}
@keyframes hourpulse{0%,100%{box-shadow:0 0 0 0 rgba(217,168,92,.4)}50%{box-shadow:0 0 9px 2px rgba(217,168,92,.25)}}

/* title letters — lit one by one when the room resolves */
#room-title h1 .L{
  display:inline-block;opacity:0;transform:translateY(.3em);
  transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.6,.2,1);
}
body.room-lit #room-title h1 .L{opacity:1;transform:none}
/* keep each word's letters together so the title only breaks at spaces */
#room-title h1 .W{display:inline-block;white-space:nowrap}

/* the lantern — a faint light carried by the cursor */
#lantern{
  position:fixed;z-index:5;width:380px;height:380px;margin:-190px 0 0 -190px;
  pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .8s ease;
  will-change:transform;
  background:radial-gradient(circle,rgba(217,168,92,.07) 0%,rgba(217,168,92,.025) 40%,transparent 70%);
}

/* the lamp keeps the hour — a warm pool that rises from the desk as local time
   nears the museum's 1am. screen-blended: it adds light, never darkens.
   --warmth (0 by day → ~1 near 1am) is set by room.js; invisible at 0. */
body.page-room::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:var(--warmth,0);transition:opacity 2.5s ease;
  /* normal blend, not screen: over near-black the result is identical, but it
     avoids re-blending against the animating canvas every frame */
  background:radial-gradient(140% 78% at 50% 100%,
    rgba(217,168,92,.11) 0%, rgba(217,168,92,.035) 38%, transparent 66%);
}

/* film grain — the room has a surface */
body.page-room::after,body.page-essay::after,body.page-wing::after{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size:222px 222px; /* off-tile scale: the eye never finds the repeat */
}

/* placard pulse — for lights that cannot be entered yet */
#placard.flash{animation:plflash .9s ease}
@keyframes plflash{0%{opacity:1}30%{opacity:.35}100%{opacity:1}}

/* halls — a timeline etched into the floor, not a widget.
   the whole floor of the room sits on one 1.8rem baseline */
#halls{
  position:fixed;z-index:30;left:50%;bottom:1.8rem;transform:translateX(-50%);
  display:flex;gap:2.2rem;align-items:baseline;padding-top:.9rem;
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
}
#halls::before{
  content:"";position:absolute;top:0;left:-1rem;right:-1rem;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair) 18%,var(--hair) 82%,transparent);
}
#halls .halls-label{color:var(--faint)}
#halls button{
  position:relative;color:var(--faint);letter-spacing:var(--tr-label);font-size:var(--fs-xs);
  transition:color .4s ease;
}
#halls button::before{
  content:"";position:absolute;top:-.95rem;left:50%;transform:translateX(-50%);
  width:1px;height:8px;background:rgba(217,168,92,0);transition:background .45s ease,height .45s ease;
}
#halls button:hover{color:var(--ink-dim)}
#halls button:hover::before{background:var(--amber-ghost)}
#halls button[aria-current="true"]{color:var(--amber)}
#halls button[aria-current="true"]::before{
  background:var(--amber);height:11px;
  animation:tickbreathe 4.6s ease-in-out infinite;
}
@keyframes tickbreathe{
  0%,100%{box-shadow:0 0 0 0 rgba(217,168,92,0)}
  50%{box-shadow:0 0 7px 1px rgba(217,168,92,.35)}
}
/* the catalogue lives on the same etched line — navigation is one instrument */
#halls .halls-sep{color:rgba(125,133,151,.55)}
#halls .halls-cat{position:relative;color:var(--faint);letter-spacing:var(--tr-label);font-size:var(--fs-xs);transition:color .4s ease}
#halls .halls-cat::before{display:none}
#halls .halls-cat:hover{color:var(--amber)}
#halls .halls-cat .key{color:rgba(217,168,92,.35);margin-left:.55em;letter-spacing:0}

/* whisper — the museum's one-time guidance, in its own voice */
#whisper{
  position:fixed;z-index:19;left:50%;bottom:6.8rem;transform:translateX(-50%);
  width:min(560px,84vw);text-align:center;pointer-events:none;
  font-family:var(--serif);font-style:italic;font-size:var(--fs-base);color:var(--amber-dim);
  opacity:0;transition:opacity 1.4s ease;
}
#whisper.lit{opacity:.9}

/* hover placard — rises like type settling into a chase, clear of the halls */
#placard{
  position:fixed;z-index:20;left:50%;bottom:6.8rem;
  transform:translateX(-50%) translateY(9px);filter:blur(2px);
  width:min(620px,86vw);text-align:center;pointer-events:none;
  opacity:0;will-change:transform,opacity,filter;
  transition:opacity .5s ease,transform .65s cubic-bezier(.2,.65,.25,1),filter .5s ease;
}
#placard::before{
  content:"";position:absolute;top:-1.2rem;left:50%;
  width:2.6rem;height:1px;background:var(--amber-dim);opacity:.5;
  transform:translateX(-50%) scaleX(0);transition:transform .7s cubic-bezier(.2,.65,.25,1) .08s;
}
#placard.lit{opacity:1;transform:translateX(-50%) translateY(0);filter:none}
#placard.lit::before{transform:translateX(-50%) scaleX(1)}
/* the placard speaks in the museum's display voice, not the text face */
#placard .pq{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:var(--fs-xl);line-height:1.65;color:var(--ink);text-wrap:balance;
}
#placard .pa{
  margin-top:.65rem;font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:var(--tr-label);text-indent:.22em;
  text-transform:uppercase;color:var(--amber-dim);
}
#placard .pm{
  margin-top:.85rem;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-indent:.22em;
  text-transform:uppercase;color:var(--faint);
}

/* overlays */
.ov{
  position:fixed;inset:0;z-index:40;background:rgba(4,6,10,.92);
  /* no backdrop-filter: blurring an animating canvas every frame is the
     single most expensive thing a museum can do. darkness is free. */
  display:flex;align-items:flex-start;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .6s ease;overflow-y:auto;
}
.ov.open{opacity:1;pointer-events:auto}
/* the panel arrives like a wall stepped up to, not a dialog appearing */
.ov .panel{
  width:min(680px,90vw);padding:7rem 2rem 6rem;
  transform:translateY(16px);
  transition:transform .7s cubic-bezier(.2,.65,.25,1);
}
.ov.open .panel{transform:none}
.ov-label{
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;
  color:var(--amber-dim);margin-bottom:2.4rem;
}
/* the exit always lives in the same corner, everywhere in the museum */
.ov-close{
  position:fixed;top:1.6rem;left:2rem;z-index:41;font-family:var(--sans);font-size:var(--fs-xs);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--faint);transition:color .4s;
}
.ov-close:hover{color:var(--amber)}

/* index overlay rows */
.idx-year{
  font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:var(--tr-wide);color:var(--faint);
  text-transform:uppercase;margin:2.6rem 0 .8rem;
}
.idx-year:first-of-type{margin-top:0}
.idx-row{
  display:flex;align-items:baseline;gap:1.2rem;padding:.78rem 0;
  border-bottom:1px solid var(--hair);text-decoration:none;transition:padding-left .35s ease;
}
.idx-row:hover{padding-left:.6rem}
.idx-row:hover .idx-title{color:var(--amber)}
.idx-no{font-family:var(--sans);font-size:var(--fs-xs);color:var(--faint);letter-spacing:var(--tr-tight);min-width:2.2rem}
.idx-title{font-size:var(--fs-lg);color:var(--ink);transition:color .4s}
.idx-author{
  margin-left:auto;font-family:var(--serif);font-style:italic;font-size:var(--fs-sm);
  color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:11rem;
}
.idx-date{font-family:var(--sans);font-size:var(--fs-xs);color:var(--faint);letter-spacing:var(--tr-tight);white-space:nowrap}
.idx-row .idx-author + .idx-date{margin-left:1.2rem}
.idx-row.visited .idx-no{color:var(--amber-dim)}
.idx-wander{
  margin-top:2.6rem;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--faint);transition:color .4s;
}
.idx-wander:hover{color:var(--amber)}
.idx-foot{
  margin-top:1.4rem;font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:var(--tr-tight);
  color:var(--faint);line-height:1.9;
}

/* curator's note cards */
.card{
  background:rgba(233,228,214,.035);border:1px solid var(--hair);
  padding:1.3rem 1.5rem;margin-bottom:1.1rem;
}
.card .c-date{font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--amber-dim);margin-bottom:.6rem}
.card p{font-size:var(--fs-base);line-height:1.8;color:var(--ink-dim)}

/* №∞ — reserved in the catalogue */
.idx-row.reserved{pointer-events:none}
.idx-row.reserved .idx-no{color:rgba(143,182,216,.5)}
.idx-row.reserved .idx-title{color:var(--faint);font-style:italic}

/* the leave-a-light ritual */
#leave-light{
  display:block;margin:1.4rem auto 0;text-align:center;
  font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:var(--tr-label);text-indent:.18em;text-transform:uppercase;
  color:var(--faint);transition:color .4s;
}
#leave-light:hover{color:var(--amber)}
#leave-light.lit-done{color:var(--amber-dim);pointer-events:none}

/* the door question above the visitors' book */
.vb-question{
  margin-bottom:1.6rem;font-family:var(--serif);font-style:italic;
  font-size:var(--fs-lg);line-height:1.8;color:var(--ink-dim);
}
.vb-question::before{
  content:"tonight's question";display:block;margin-bottom:.5rem;
  font-family:var(--sans);font-style:normal;font-size:var(--fs-2xs);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--amber-dim);
}

/* ============================================================
   THE RINGS · disclosure as architecture
   ring 3 — returning strangers (devotion, never identity)
   ring 4 — keyholders (a phrase the keeper hands you)
   sealed seams — acknowledged, and withheld
   ============================================================ */
.mnote.ring3{display:none}
body.devoted.interior .mnote.ring3{display:block}
.mnote.ring4{display:none}
body.interior .mnote.ring4.ring-open{display:block}
body.interior .mnote-locked{
  display:flex;align-items:center;gap:.8rem;margin:1.6rem 0;padding:.9rem 1.4rem;
  border-left:1px solid rgba(143,182,216,.4);background:rgba(143,182,216,.05);
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;
  color:rgba(143,182,216,.7);cursor:pointer;
}
.mnote-locked:hover{color:#8fb6d8}
body:not(.interior) .mnote-locked{display:none}
.sealed-seam{
  display:inline-block;height:.95em;vertical-align:baseline;
  width:7ch;border-radius:1px;cursor:help;user-select:none;
  background:repeating-linear-gradient(90deg,
    rgba(143,182,216,.18) 0 6px, rgba(143,182,216,.05) 6px 9px);
}

/* arrival, after hours — the facade's two lit windows */
#arrival .facade{
  display:flex;gap:1.1rem;justify-content:center;margin-bottom:2.2rem;
}
#arrival .facade i{
  display:block;width:13px;height:18px;border-radius:1px;
  background:rgba(217,168,92,.5);
  box-shadow:0 0 14px rgba(217,168,92,.35);
  animation:windowflicker 5.5s ease-in-out infinite;
}
#arrival .facade i:last-child{animation-delay:2.2s;opacity:.8}
@keyframes windowflicker{0%,100%{opacity:.85}50%{opacity:.55}}
#arrival .hours-line{
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--amber-dim);margin-bottom:1.6rem;font-style:normal;
}

/* collector overlay prose */
.prose p{font-size:var(--fs-md);line-height:1.95;color:var(--ink-dim);margin-bottom:1.2rem}
.prose .lit-line{color:var(--ink)}
.prose em{color:var(--ink)}
.prose blockquote{
  margin:0 0 2.2rem;padding-left:1.4rem;border-left:1px solid var(--amber-dim);
  font-style:italic;font-size:var(--fs-lg);line-height:1.9;color:var(--ink-dim);
}
.prose blockquote footer{
  margin-top:.7rem;font-style:normal;font-family:var(--sans);
  font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--amber-dim);
}
.prose blockquote.closing{margin:2.8rem 0 0}

/* noscript entrance */
.noscript-hall{
  position:relative;z-index:5;max-width:680px;margin:0 auto;padding:14vh 2rem;
}
.noscript-hall h1{font-family:var(--display);font-weight:300;letter-spacing:var(--tr-label);font-size:1.6rem;margin-bottom:2rem}
.noscript-hall a{display:block;padding:.6rem 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink-dim)}
.noscript-hall a:hover{color:var(--amber)}

/* ============================================================
   READING ROOMS (essays & lab papers)
   ============================================================ */
body.page-essay{overflow-x:hidden}
body.page-essay::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(217,168,92,.05), transparent 70%),
    linear-gradient(180deg,var(--night-0) 0%,var(--night-1) 30%,var(--night-1) 100%);
}
body.page-essay.cold::before{
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(143,182,216,.05), transparent 70%),
    linear-gradient(180deg,var(--night-0) 0%,var(--night-1) 30%,var(--night-1) 100%);
}

.top-return{
  position:fixed;top:1.6rem;left:2rem;z-index:30;
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--faint);text-decoration:none;transition:color .4s;
}
.top-return:hover{color:var(--amber)}

.essay-inner{max-width:680px;margin:0 auto;padding:13vh 2rem 12vh;position:relative}

.e-door{
  font-style:italic;font-size:var(--fs-base);line-height:1.8;color:var(--faint);max-width:46ch;
}
.e-door .e-door-author{
  display:block;margin-top:.5rem;font-style:normal;font-family:var(--sans);
  font-size:var(--fs-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--amber-dim);
}

.e-head{margin:2.6rem 0 4.2rem;border-bottom:1px solid var(--hair);padding-bottom:2.6rem;position:relative}
.e-no{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);color:var(--amber-dim);margin-bottom:1.1rem;text-transform:uppercase;position:relative;z-index:1}
.e-title{
  font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,5.2vw,3.6rem);
  letter-spacing:var(--tr-tight);color:var(--ink);text-transform:uppercase;line-height:1.12;
  position:relative;z-index:1;
}
.e-meta{margin-top:1.2rem;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--faint);position:relative;z-index:1}
/* the wall numeral — ghosted behind the title, like a museum room number */
.e-ghost{
  position:absolute;right:0;bottom:1.2rem;z-index:0;pointer-events:none;
  font-family:var(--display);font-weight:300;font-size:clamp(5rem,12vw,8.5rem);
  line-height:1;color:rgba(233,228,214,.05);letter-spacing:var(--tr-optical);user-select:none;
}
/* the first letter receives the light */
.e-body > p:first-of-type::first-letter{
  font-family:var(--display);font-weight:400;float:left;
  font-size:3.7em;line-height:.78;padding:.06em .14em 0 0;margin-left:-.02em;
  color:var(--amber);
}
/* the wick — reading progress as a candle burning down the left edge */
#wick,#r-wick{
  position:fixed;left:0;top:0;width:2px;height:100vh;z-index:48;pointer-events:none;
  background:linear-gradient(180deg,var(--amber) 0%,rgba(217,168,92,.25) 100%);
  transform:scaleY(0);transform-origin:top;opacity:.4;
}
/* the reading veil — descending into an essay, the room darkens around the
   column; the lamplight narrows as you read until the closing line sits nearly
   alone in it. --read (0 at the top → 1 at the end) is set by essay.js / room.js.
   z-index:1 keeps it over the text but under the wick and the nav chrome. */
#read-veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  /* fixed gradient (rasterized once); the descent is driven by opacity only —
     a compositor-only change, so scrolling never triggers a repaint */
  background:radial-gradient(120% 100% at 50% 46%,
    transparent 0, transparent 48%, rgba(4,6,10,.72) 100%);
}
body.page-essay #read-veil,
body.in-reader #read-veil{opacity:var(--read,0)}
@media (prefers-reduced-motion:reduce){ #read-veil{display:none} }

.e-body p{font-size:var(--fs-read);line-height:1.95;color:var(--ink);margin-bottom:1.7rem}
.e-body i,.e-body em{color:var(--ink)}
.e-body a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-ghost)}
.e-body a:hover{border-bottom-color:var(--amber-dim)}
.e-body figure{margin:2.6rem 0}
.e-body figure img{filter:brightness(.92);border:1px solid var(--hair)}
.e-body figcaption{margin-top:.7rem;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--faint)}
/* the closing quote — the door you leave through, set like wall text */
.e-body blockquote{
  position:relative;isolation:isolate;
  margin:5rem auto 0;padding:0;border:none;text-align:center;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:1.4rem;line-height:1.75;color:var(--ink);max-width:32ch;
  text-wrap:balance;
}
/* the closing line becomes a lamp — a warm bloom that ignites only as you
   reach the end of the descent (the last third of the read) */
.e-body blockquote::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);width:180%;height:360%;
  background:radial-gradient(ellipse at center,
    rgba(217,168,92,.12) 0%, rgba(217,168,92,.04) 42%, transparent 72%);
  opacity:clamp(0, calc((var(--read,0) - .55) * 2.5), 1);
}
.e-body blockquote::before{
  content:"";display:block;width:1px;height:2.6rem;
  background:linear-gradient(180deg,transparent,var(--amber-dim));
  margin:0 auto 1.8rem;
}
.e-body blockquote footer{
  margin-top:1.3rem;font-style:normal;font-family:var(--sans);
  font-size:var(--fs-2xs);letter-spacing:var(--tr-label);text-indent:.22em;text-transform:uppercase;color:var(--amber-dim);
}
.e-note{
  margin-top:3rem;font-size:var(--fs-base);line-height:1.85;color:var(--faint);font-style:italic;
}
.e-note a{color:var(--amber-dim);text-decoration:none;border-bottom:1px solid var(--amber-ghost)}

/* code, only where the writing needs it (the laboratory) */
.e-body pre{
  font-family:var(--mono);font-size:var(--fs-ms);line-height:1.7;color:var(--ink-dim);
  background:rgba(233,228,214,.03);border-left:1px solid var(--amber-dim);
  padding:.8rem 1.2rem;margin:1.2rem 0;overflow-x:auto;white-space:pre;
}
.e-body code{
  font-family:var(--mono);font-size:.86em;color:var(--ink-dim);
  background:rgba(233,228,214,.05);padding:.08em .35em;
}

/* the interior — marginalia behind the key */
.mnote{
  display:none;margin:1.6rem 0;padding:1.1rem 1.4rem;
  border-left:1px solid var(--amber-dim);background:var(--amber-ghost);
}
.mnote p{font-size:var(--fs-base);line-height:1.8;color:var(--amber);font-style:italic;margin:0;opacity:.85}
.mnote .m-tag{
  font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--amber-dim);font-style:normal;display:block;margin-bottom:.5rem;
}
body.interior .mnote{display:block;animation:mfade 1.2s ease}
@keyframes mfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

#unlock,#r-unlock{
  position:fixed;right:2rem;bottom:2rem;z-index:48;
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--faint);transition:color .4s;text-align:right;
}
#unlock:hover,#r-unlock:hover{color:var(--amber)}
#unlock svg,#r-unlock svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.3;flex-shrink:0}
#unlock[hidden],#r-unlock[hidden]{display:none}

/* adjacent rooms */
/* adjacent rooms — two framed doorways, not prev/next links */
.adjacent{
  margin-top:6rem;display:flex;
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;
}
.adjacent.filled{border:1px solid var(--hair)}
.adjacent a{
  flex:1;padding:1.15rem 1.4rem;color:var(--faint);text-decoration:none;line-height:2;
  background:rgba(233,228,214,.015);
  transition:color .4s ease,background .5s ease;
}
.adjacent a + a{border-left:1px solid var(--hair)}
.adjacent a:hover{color:var(--amber);background:rgba(217,168,92,.045)}
.adjacent .adj-title{display:block;color:var(--ink-dim);letter-spacing:var(--tr-tight);transition:color .4s ease}
.adjacent a:hover .adj-title{color:var(--amber)}
.adjacent .adj-next{text-align:right}

.colophon{
  margin-top:4.5rem;padding-top:2.2rem;border-top:1px solid var(--hair);
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--faint);line-height:2.6;
}
.colophon .quieter{color:var(--faint)}
.colophon a{text-decoration:none;transition:color .4s}
.colophon a:hover{color:var(--amber)}

/* ============================================================
   WINGS (east wing, laboratory, visitors' book)
   ============================================================ */
body.page-wing{overflow-x:hidden}
body.page-wing::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(217,168,92,.04), transparent 70%),
    linear-gradient(180deg,var(--night-0) 0%,var(--night-1) 35%,var(--night-1) 100%);
}
body.page-wing.cold::before{
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(143,182,216,.05), transparent 70%),
    linear-gradient(180deg,var(--night-0) 0%,var(--night-1) 35%,var(--night-1) 100%);
}

.wing-inner{max-width:680px;margin:0 auto;padding:13vh 2rem 12vh}
.wing-head{margin-bottom:4.5rem;border-bottom:1px solid var(--hair);padding-bottom:2.6rem}
.wing-head .e-no{margin-bottom:1.1rem}
.wing-head h1{
  font-family:var(--display);font-weight:300;font-size:clamp(2rem,4.6vw,3.1rem);
  letter-spacing:var(--tr-tight);color:var(--ink);text-transform:uppercase;line-height:1.16;
}
.wing-head .wing-sub{margin-top:1.4rem;font-size:var(--fs-md);line-height:1.9;color:var(--ink-dim);font-style:italic;max-width:52ch}

.wing-section{
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;
  color:var(--amber-dim);margin:4.5rem 0 1.6rem;
}
.wing-section:first-of-type{margin-top:0}

/* wall labels (lists of works) */
.wall{border-top:1px solid var(--hair)}
.wall-row{
  display:flex;align-items:baseline;gap:1.1rem;padding:.85rem .6rem;
  border-bottom:1px solid var(--hair);transition:background .4s ease;
}
.wall-row:hover{background:rgba(233,228,214,.022)}
.wall-row:hover .w-no{color:var(--amber-dim)}
.wall-row .w-no{font-family:var(--sans);font-size:var(--fs-2xs);color:var(--faint);letter-spacing:var(--tr-tight);min-width:1.8rem}
.wall-row .w-title{font-size:var(--fs-md);color:var(--ink)}
.wall-row .w-title a{text-decoration:none;transition:color .4s}
.wall-row .w-title a:hover{color:var(--amber)}
.wall-row .w-note{font-family:var(--sans);font-size:var(--fs-xs);color:var(--faint);letter-spacing:var(--tr-tight);margin-left:auto;white-space:nowrap}

/* labeled entries (workbench, lab) */
.bench{border-top:1px solid var(--hair)}
.bench-item{padding:1.4rem 0;border-bottom:1px solid var(--hair)}
.bench-item .b-head{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:.45rem}
.bench-item .b-title{font-size:var(--fs-md);color:var(--ink)}
.bench-item .b-title a{text-decoration:none;transition:color .4s}
.bench-item .b-title a:hover{color:var(--amber)}
.bench-item .b-tag{
  font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--amber-dim);border:1px solid var(--amber-ghost);padding:.18rem .5rem;
}
.bench-item .b-date{margin-left:auto;font-family:var(--sans);font-size:var(--fs-xs);color:var(--faint);letter-spacing:var(--tr-tight);white-space:nowrap}
.bench-item .b-desc{font-size:var(--fs-base);line-height:1.85;color:var(--ink-dim)}

/* gallery doors (east wing landing) */
.door-list .bench-item{padding:1.9rem 0}
.door-list .b-title{font-family:var(--display);font-size:1.35rem;letter-spacing:var(--tr-tight);text-transform:uppercase}
.door-list .b-title a{display:inline-block}

/* visitors' book */
.vb-form{border:1px solid var(--hair);background:rgba(233,228,214,.025);padding:1.8rem;margin-bottom:3.5rem}
.vb-form .vb-form-label{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--amber-dim);margin-bottom:1.4rem}
.vb-field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem}
.vb-field label{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--faint)}
.vb-field input,.vb-field textarea{
  background:rgba(4,6,10,.6);border:1px solid var(--hair);color:var(--ink);
  font-family:var(--serif);font-size:var(--fs-md);padding:.7rem .9rem;resize:none;outline:none;
  transition:border-color .3s;
}
.vb-field input:focus,.vb-field textarea:focus{border-color:var(--amber-dim);box-shadow:0 0 0 1px var(--amber-dim)}
.vb-field textarea{height:110px;line-height:1.7}
.vb-submit{
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--ink-dim);border:1px solid var(--hair);padding:.65rem 1.4rem;transition:color .3s,border-color .3s;
}
.vb-submit:hover{color:var(--amber);border-color:var(--amber-dim)}
.vb-status{margin-top:1rem;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-tight);color:var(--faint);min-height:1.2rem}
.vb-status.ok{color:var(--amber)}
.vb-status.err{color:var(--err)}
.vb-privacy{margin-top:1.2rem;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-tight);line-height:1.9;color:var(--faint)}

.vb-entry{padding:1.3rem 0;border-bottom:1px solid var(--hair)}
.vb-entry p{font-style:italic;font-size:var(--fs-md);line-height:1.85;color:var(--ink-dim)}
.vb-entry .vb-name{
  margin-top:.6rem;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--faint);font-style:normal;
}
.vb-empty{font-size:var(--fs-base);color:var(--faint);font-style:italic}

/* shared footer on subpages */
.site-foot{
  margin-top:6rem;padding-top:2.2rem;border-top:1px solid var(--hair);
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--faint);line-height:2.6;
}
.site-foot a{text-decoration:none;transition:color .4s}
.site-foot a:hover{color:var(--amber)}

/* ============================================================
   RESPONSIVE · MOTION · PRINT
   ============================================================ */
/* ============================================================
   MOBILE — its own floor plan, not a shrunken desktop.
   Top: the stamp and the title. Middle: the sky, kept clear.
   Bottom: the three plates stacked as a dock, halls above them.
   ============================================================ */
@media (max-width:760px){
  /* the stamp */
  #wordmark{left:1rem;top:1rem;padding:.45rem .65rem .4rem;font-size:var(--fs-2xs)}
  /* the title wall */
  #room-title{top:7.5vh;width:92vw}
  #room-title h1{letter-spacing:var(--tr-label);text-indent:.3em}
  body.room-init #room-title h1{letter-spacing:.38em}
  body.room-init.room-lit #room-title h1{letter-spacing:var(--tr-label)}
  #room-title .sub{margin-top:.7rem;letter-spacing:var(--tr-label)}
  #room-title .keeper{font-size:var(--fs-ms);margin-top:1.1rem}
  #hour-line{margin-top:.8rem;font-size:var(--fs-2xs)}
  /* the dock: three full-width plates, one rhythm */
  .doorway,#notes-stack,#visitor-line{
    left:1rem;right:1rem;width:auto;padding:.65rem .85rem .6rem;
  }
  .doorway{top:auto}
  #visitor-line{bottom:1rem}
  #notes-stack{bottom:4.7rem}
  #door-east{bottom:8.4rem}
  #door-catalogue{bottom:12.1rem}
  .door-label,.reg-label{margin-bottom:.15rem;font-size:var(--fs-2xs)}
  .doorway .door-sub{display:none}
  #nc-text{-webkit-line-clamp:1;font-size:var(--fs-sm);line-height:1.5}
  .reg-last{display:none}
  .reg-count{font-size:var(--fs-2xs);line-height:1.6}
  .reg-cta{display:none}
  /* halls + placard sit above the dock */
  #halls{left:50%;transform:translateX(-50%);bottom:15.5rem;gap:1.5rem}
  #placard{bottom:18.9rem}
  #placard .pq{font-size:var(--fs-base)}
  #whisper{bottom:18.9rem;font-size:var(--fs-sm)}
  /* the desk and lantern rest on mobile */
  #desk{display:none}
  #lantern{display:none}
  /* arrival */
  #arrival p{font-size:var(--fs-lg)}
  /* reading rooms */
  .top-return,#r-ascend,#w-return{left:1rem;top:1.2rem}
  #r-doors{right:1rem;top:1.2rem;gap:1rem}
  .wv-inner{padding:11vh 1.2rem 12vh}
  .essay-inner,.wing-inner{padding:10vh 1.2rem 12vh}
  .reader-inner{padding:11vh 1.2rem 14vh}
  .e-title{letter-spacing:var(--tr-tight)}
  .e-ghost{font-size:4.2rem;right:0;bottom:.8rem}
  .e-body p{font-size:var(--fs-lg);line-height:1.9}
  .e-body blockquote{font-size:var(--fs-xl)}
  #unlock,#r-unlock{right:1rem;bottom:1.2rem;background:rgba(4,6,10,.85);padding:.55rem .75rem;border:1px solid var(--hair)}
  /* doors stack on a narrow landing */
  .adjacent{flex-direction:column}
  .adjacent a + a{border-left:none;border-top:1px solid var(--hair)}
  .adjacent .adj-next{text-align:left}
  /* wings & overlays */
  .wing-head h1{letter-spacing:var(--tr-tight)}
  .wing-head{margin-bottom:3rem}
  .wall-row .w-note,.bench-item .b-date{display:none}
  .ov .panel{padding:6rem 1.2rem 5rem}
  .ov-close{left:1rem;top:1.2rem}
  .idx-author{display:none}
}

/* ============================================================
   THE READER · essays open inside the room — descent & ascent
   ============================================================ */
#reader{
  position:fixed;inset:0;z-index:46;overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .9s ease .3s;
  background:linear-gradient(180deg,
    rgba(4,6,10,.06) 0,
    rgba(7,11,18,.9) 16vh,
    rgba(7,11,18,.985) 30vh,
    rgba(7,11,18,.985) 100%);
}
#reader:not(.open){transition:opacity .55s ease}
#reader.open{opacity:1;pointer-events:auto}
body.in-reader #lantern{opacity:0!important}
.reader-inner{
  max-width:680px;margin:0 auto;padding:17vh 2rem 14vh;position:relative;
  transition:opacity .28s ease,transform .28s ease;
}
.reader-inner.swap{opacity:0;transform:translateY(10px)}
.reader-inner:focus{outline:none}
#r-ascend{
  position:fixed;top:1.6rem;left:2rem;z-index:47;
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--faint);transition:color .4s;opacity:0;
}
#reader.open #r-ascend{opacity:1;transition:color .4s,opacity .9s ease .8s}
#r-ascend:hover{color:var(--amber)}
/* the exits, in strict order of voice: the ritual speaks, the offering whispers */
.exit-line{
  display:block;margin:4.2rem auto 0;text-align:center;
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-indent:.2em;text-transform:uppercase;
  color:var(--amber-dim);transition:color .4s;
}
.exit-line:hover{color:var(--amber)}
body.in-reader #room-title,body.in-wing #room-title{opacity:.12}
body.in-reader .chrome,body.in-reader .doorway,body.in-reader #desk,
body.in-reader #visitor-line,body.in-reader #notes-stack,body.in-reader #halls,
body.in-reader #placard,body.in-reader #whisper,
body.in-wing .chrome,body.in-wing .doorway,body.in-wing #desk,
body.in-wing #visitor-line,body.in-wing #notes-stack,body.in-wing #halls,
body.in-wing #placard,body.in-wing #whisper{opacity:0!important;pointer-events:none;transition:opacity .6s ease}
body.in-wing #lantern{opacity:0!important}

/* the reader's top-chrome doors — adjacent rooms, never at the floor */
#r-doors{
  position:fixed;top:1.6rem;right:2rem;z-index:47;display:flex;gap:1.6rem;
  opacity:0;
}
#reader.open #r-doors{opacity:1;transition:opacity .9s ease .8s}
#r-doors button{
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--faint);transition:color .4s;
}
#r-doors button:hover{color:var(--amber)}
#r-doors button span{color:var(--amber-dim);letter-spacing:var(--tr-tight)}

/* ============================================================
   THE WING SURFACE · crossing the room / kneeling at the desk
   The sky stays alive at the open edge while the wall arrives.
   ============================================================ */
#wing-view{
  position:fixed;inset:0;z-index:46;overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .8s ease .2s;
}
#wing-view:not(.open){transition:opacity .5s ease}
#wing-view.open{opacity:1;pointer-events:auto}
#wing-view.wv-east{
  background:linear-gradient(90deg,
    rgba(7,11,18,0) 0,
    rgba(7,11,18,.88) 11vw,
    rgba(7,11,18,.985) 22vw,
    rgba(7,11,18,.985) 100%);
}
#wing-view.wv-down{
  background:linear-gradient(180deg,
    rgba(7,11,18,.04) 0,
    rgba(7,11,18,.9) 15vh,
    rgba(7,11,18,.985) 28vh,
    rgba(7,11,18,.985) 100%);
}
.wv-inner{
  max-width:680px;margin:0 auto;padding:15vh 2rem 12vh;position:relative;
  opacity:0;transition:opacity .55s ease .15s,transform .65s cubic-bezier(.2,.65,.25,1) .15s;
}
#wing-view.wv-east .wv-inner{transform:translateX(7vw) scale(.988)}
#wing-view.wv-down .wv-inner{transform:translateY(7vh) scale(.988)}
#wing-view.open .wv-inner{opacity:1;transform:none}
.wv-inner.swap{opacity:0!important;transform:translateX(4vw)!important;transition:opacity .26s ease,transform .26s ease}
.wv-inner:focus{outline:none}
#w-return{
  position:fixed;top:1.6rem;left:2rem;z-index:47;
  font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--faint);transition:color .4s;opacity:0;
}
#wing-view.open #w-return{opacity:1;transition:color .4s,opacity .9s ease .7s}
#w-return:hover{color:var(--amber)}
#room-title{transition:opacity .9s ease,transform 1.3s cubic-bezier(.2,.65,.25,1)}

/* the catalogue parts the sky; the keeper pushes the camera in.
   while any overlay is open the furniture leaves the room —
   only the night and the parting lights remain behind the panel */
#ov-index{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,6,10,.72)}
.chrome,#desk,#notes-stack,#halls{transition:opacity .55s ease}
body[data-ov] .chrome,body[data-ov] .doorway,body[data-ov] #desk,
body[data-ov] #visitor-line,body[data-ov] #notes-stack,body[data-ov] #halls,
body[data-ov] #whisper{opacity:0!important;pointer-events:none}
body[data-ov] #placard{opacity:0!important}
body[data-ov] #room-title{opacity:.1}
body[data-ov="ov-collector"] #room-title{transform:translateX(-50%) scale(1.05)}

/* ============================================================
   CHOREOGRAPHY · the room dresses itself in order
   (init states applied by JS, so the museum stays whole without it)
   ============================================================ */
body.room-init .chrome,
body.room-init .doorway,
body.room-init #desk,
body.room-init #visitor-line,
body.room-init #notes-stack,
body.room-init #halls,
body.room-init #room-title .sub,
body.room-init #room-title .keeper{
  opacity:0;transform:translateY(7px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.2,.65,.25,1);
}
body.room-init.room-lit #room-title .sub{opacity:1;transform:none;transition-delay:.45s}
body.room-init.room-lit #room-title .keeper{opacity:.85;transform:none;transition-delay:.6s}
body.room-init.room-lit .chrome{opacity:1;transform:none;transition-delay:.75s}
body.room-init.room-lit .doorway{opacity:1;transform:none;transition-delay:.85s}
body.room-init.room-lit #notes-stack{opacity:1;transform:none;transition-delay:.95s}
body.room-init.room-lit #visitor-line{opacity:1;transform:none;transition-delay:1.05s}
body.room-init.room-lit #desk{opacity:1;transform:none;transition-delay:1.15s}
body.room-init.room-lit #halls{opacity:1;transform:none;transition-delay:1.25s}
body.room-init.room-lit .doorway:hover{opacity:1}
/* the display voice breathes: tracking opens AND the optical grade sharpens
   from a soft text form into a crisp display form as the title lights */
#room-title h1{
  transition:letter-spacing 1.4s cubic-bezier(.2,.65,.25,1),
             font-variation-settings 1.5s cubic-bezier(.2,.65,.25,1);
  font-variation-settings:"wght" 300,"opsz" 144;
}
body.room-init #room-title h1{letter-spacing:.4em;font-variation-settings:"wght" 300,"opsz" 38}
body.room-init.room-lit #room-title h1{letter-spacing:.42em;font-variation-settings:"wght" 300,"opsz" 144}

/* the reading room receives you in order: number, title, date, page */
body.essay-init .top-return{opacity:0;transition:opacity 1s ease}
body.essay-init .e-no{opacity:0;transform:translateY(8px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.65,.25,1)}
body.essay-init .e-title{opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.65,.25,1),filter .9s ease}
body.essay-init .e-meta{opacity:0;transition:opacity .9s ease}
body.essay-init .e-head{border-bottom-color:transparent;transition:border-bottom-color 1.4s ease}
body.essay-init .e-body{opacity:0;transform:translateY(10px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.65,.25,1)}
body.essay-init.essay-lit .e-no{opacity:1;transform:none;transition-delay:.08s}
body.essay-init.essay-lit .e-title{opacity:1;transform:none;filter:none;transition-delay:.16s}
body.essay-init.essay-lit .e-meta{opacity:1;transition-delay:.34s}
body.essay-init.essay-lit .e-head{border-bottom-color:var(--hair);transition-delay:.5s}
body.essay-init.essay-lit .e-body{opacity:1;transform:none;transition-delay:.42s}
body.essay-init.essay-lit .top-return{opacity:1;transition-delay:.85s}

/* wings dress more simply */
body.wing-init .wing-head{opacity:0;transform:translateY(10px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.65,.25,1)}
body.wing-init.wing-lit .wing-head{opacity:1;transform:none;transition-delay:.1s}

/* ============================================================
   EDITORIAL DETAIL · type, scroll, touch
   ============================================================ */
.e-title,.wing-head h1,#room-title h1{text-wrap:balance}
.e-body p{text-wrap:pretty}
html{scrollbar-width:thin;scrollbar-color:rgba(125,133,151,.35) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{
  background:rgba(125,133,151,.3);border-radius:5px;border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-track{background:transparent}
#menu button:active,.keeper:active,#halls button:active,
#notes-stack:active,.ov-close:active,.idx-wander:active,
.doorway:active,.adjacent a:active,.vb-submit:active{transform:translateY(1px)}
#visitor-line:active{transform:translateY(1px)}

@media (max-height:640px) and (min-width:761px){
  #notes-stack{bottom:8rem}
  #nc-text{-webkit-line-clamp:1}
  #door-east{bottom:11.7rem}
  #door-catalogue{bottom:15.4rem}
  .doorway .door-sub{display:none}
  .reg-last{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  #room-title h1 .L{opacity:1;transform:none}
  #lantern{display:none}
}

/* ============================================================
   TOUCH TARGETS · text controls reach the 44px floor on phones,
   and the register's fields stop iOS from zooming on focus.
   Hit areas grow via an invisible ::after — no visible pixel moves.
   ============================================================ */
@media (max-width:760px){
  #halls button,#halls .halls-cat,#room-title .keeper,.ov-close,
  #r-ascend,#w-return,.top-return,#r-doors button,.exit-line{position:relative}
  #halls button::after,#halls .halls-cat::after,#room-title .keeper::after,
  .ov-close::after,#r-ascend::after,#w-return::after,.top-return::after,
  #r-doors button::after,.exit-line::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:max(100%,44px);height:44px;
  }
  .doorway,#unlock,#r-unlock{min-height:44px}
  /* 16px on the inputs prevents iOS Safari focus-zoom; controls reach 44px */
  .vb-field input,.vb-field textarea{font-size:16px}
  .vb-field input,.vb-submit{min-height:44px}
}

@media print{
  body{background:#fff;color:#111}
  body.page-essay::before,#unlock,.top-return,.adjacent{display:none}
  .e-body p{color:#111}
  .mnote{display:block;background:#f4ecd8;border-left:2px solid #b8860b}
  .colophon{color:#666}
}