/* ═══ MedUnfolded — one stylesheet for the whole museum ═══
   Monochrome doctrine: the photographs are the only colour source.
   --lit is the colour of the light in the room; everything luminous is
   rgba(var(--lit),a), so one token swings the whole temperature. The
   temporal gradient animates exactly that token plus the surface tones. */

:root{
  --lit:255,255,255;
  --ink:#090909; --floor:#050505; --raise:#171717;
  --plate1:#1e1e1e; --plate2:#181818;
  --line:rgba(var(--lit),.09); --line2:rgba(var(--lit),.05);
  /* Greys are pinned by measured contrast, not by taste: tools/contrast.mjs
     samples the pixels actually painted behind every text run at five points
     of the temporal gradient, and both of these must clear WCAG AA (4.5:1)
     there. The v6 mockup's --mid #9e9e9e / --dim #5c5c5c measured 2.7–3.5:1
     and failed. Do not darken these without re-running the sweep. */
  --w:#fafafa; --mid:#b4b4b4; --dim:#949494;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.8 0.8 0.8 0 -1.05'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.0055' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.34 0.34 0.34 0 -0.46'/%3E%3C/filter%3E%3Crect width='900' height='600' filter='url(%23m)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--floor);color:var(--w);font-family:var(--ui);
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;font-family:var(--ui)}
a{color:inherit}
:focus-visible{outline:2px solid rgba(var(--lit),.75);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ─── masthead ─────────────────────────────────────────────────────── */
.hdr{position:relative;z-index:60;display:flex;align-items:center;gap:2rem;
  padding:1.35rem 2rem;background:var(--ink)}
.hdr::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--lit),0),rgba(var(--lit),.055) 26%,
    rgba(var(--lit),.075) 50%,rgba(var(--lit),.055) 74%,rgba(var(--lit),0))}
.wordmark{font-size:.86rem;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
nav.main{display:flex;gap:1.9rem;margin-left:auto}
nav.main a{font-size:.78rem;font-weight:500;color:var(--mid);text-decoration:none;
  position:relative;transition:color .25s}
nav.main a:hover{color:var(--w)}
nav.main a[aria-current="page"]{color:var(--w)}
nav.main a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-7px;
  height:1px;background:var(--w)}
.tools{display:flex;align-items:center;gap:1rem}
.iconBtn{background:none;border:0;cursor:pointer;color:var(--mid);padding:.2rem;display:grid;
  place-items:center;transition:color .25s}
.iconBtn:hover{color:var(--w)}
.iconBtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.newsBtn{font-size:.74rem;font-weight:500;color:var(--mid);text-decoration:none;
  border:1px solid var(--line);border-radius:2px;padding:.3rem .7rem;transition:color .25s,border-color .25s}
.newsBtn:hover{color:var(--w);border-color:rgba(var(--lit),.3)}

/* ─── site-wide search ─────────────────────────────────────────────── */
.seek{position:absolute;top:0;left:0;right:0;z-index:70;background:rgba(9,9,9,.96);
  backdrop-filter:blur(24px);border-bottom:1px solid var(--line);padding:1.15rem 2rem}
.seek[hidden]{display:none}
.seek input{width:100%;background:none;border:0;color:var(--w);font-family:var(--ui);
  font-size:1.15rem;font-weight:300;letter-spacing:-.01em;outline:0;padding:.2rem 0}
.seek input::placeholder{color:var(--dim)}
#searchDrop{max-height:60vh;overflow-y:auto;margin-top:.6rem}
#searchDrop .grp{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);padding:.9rem 0 .35rem;border-top:1px solid var(--line2);margin-top:.5rem}
#searchDrop a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.5rem .3rem;text-decoration:none;border-radius:2px}
#searchDrop a[aria-selected="true"],#searchDrop a:hover{background:rgba(var(--lit),.07)}
#searchDrop .st{font-size:.92rem}
#searchDrop .ss{font-size:.7rem;color:var(--dim);text-align:right;flex:0 1 45%;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
#searchDrop .none{padding:1rem .3rem;color:var(--dim);font-size:.85rem}

/* ─── the Stream stage (homepage) ──────────────────────────────────── */
body.stream{overflow:hidden}
body.stream .hdr{position:absolute;top:0;left:0;right:0;background:none}
body.stream .ftr{display:none}
.stage{position:fixed;inset:0;overflow:hidden;isolation:isolate;background:var(--floor)}

/* ─── the temporal gradient ────────────────────────────────────────────
   The room's light travels with the reader: one smooth crossfade from the
   PAST palette (roomA) to the PRESENT palette (roomB) across the whole
   journey. Both rooms share the identical light *geometry* — only the
   colour of the light and the depth of the ink differ, so nothing in the
   frame moves; the room simply changes temperature as time passes.
   --lit is interpolated in JS for the lines, glows and card faces. */
.room{position:absolute;inset:0;z-index:0;pointer-events:none;
  --room-lit:var(--lit); --room-ink:var(--ink);
  background:
    radial-gradient(142% 120% at 50% 48%, rgba(0,0,0,0) 20%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.9) 100%),
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.1) 13%, rgba(0,0,0,0) 26%),
    linear-gradient(0deg, rgba(0,0,0,.42), rgba(0,0,0,0) 12%),
    radial-gradient(96% 13% at 50% 78%, rgba(var(--room-lit),.03), rgba(var(--room-lit),0) 82%),
    radial-gradient(58% 23% at 50% 84%, rgba(var(--room-lit),.075), rgba(var(--room-lit),0) 80%),
    radial-gradient(64% 50% at 50% 45%, rgba(var(--room-lit),.085), rgba(var(--room-lit),.022) 54%, rgba(var(--room-lit),0) 84%),
    radial-gradient(72% 17% at 50% 5%, rgba(var(--room-lit),.055), rgba(var(--room-lit),0) 80%),
    var(--room-ink)}
.roomA{--room-lit:var(--past-lit); --room-ink:var(--past-ink)}
.roomB{--room-lit:var(--now-lit); --room-ink:var(--now-ink); opacity:0}

/* DAWN — chosen by Rozen 2026-07-30. Lamplight in the deep past giving way to
   instrument light at the present. The two rival palettes and the comparison
   switch were deleted with the decision; these values are now the design.
   Changing them requires re-running tools/a11y-sweep.mjs. */
:root{
  --past-lit:255,236,208; --past-ink:#0b0907;
  --now-lit:206,224,255;  --now-ink:#08090c;
}
.room-grain{position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 108% at 50% 52%, #000 18%, rgba(0,0,0,.22) 76%, transparent 96%);
          mask-image:radial-gradient(120% 108% at 50% 52%, #000 18%, rgba(0,0,0,.22) 76%, transparent 96%)}
.room-grain::before,.room-grain::after{content:'';position:absolute;inset:0}
.room-grain::before{background-image:var(--mottle);background-size:150% 150%;
  background-position:62% 30%;opacity:.15}
.room-grain::after{background-image:var(--grain);background-size:200px 200px;opacity:.085}
.stage::after{content:'';position:absolute;inset:0;z-index:95;pointer-events:none;
  background-image:var(--grain);background-size:200px 200px;opacity:.038}

/* structure: decade/century measure, generated from the same marks as the axis */
.struct{position:absolute;inset:0;z-index:1;pointer-events:none}
.struct i{position:absolute;top:11%;height:18%;width:1px;background:rgba(var(--lit),.038)}
.struct i.tick{top:67px;height:11px;background:rgba(var(--lit),.13)}
.sHorizon{position:absolute;left:0;right:0;top:78%;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--lit),.045) 16%,
    rgba(var(--lit),.1) 50%,rgba(var(--lit),.045) 84%,transparent)}

/* cards */
.streamWrap{position:absolute;inset:0;z-index:2}
.card{position:absolute;top:0;left:0;border:0;background:none;padding:0;cursor:pointer;
  text-align:left;will-change:transform,opacity;text-decoration:none;display:block;color:inherit}
.cin{height:100%;display:flex;flex-direction:column;background:var(--raise);
  border:1px solid rgba(var(--lit),.075);overflow:hidden;
  box-shadow:0 34px 70px -26px rgba(0,0,0,.95), 0 6px 18px -8px rgba(0,0,0,.8),
             inset 0 1px 0 rgba(var(--lit),.06)}
.cim{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--raise)}
.cim img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.cim::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,6,0) 34%,rgba(6,6,6,.2) 62%,rgba(6,6,6,.56))}
.card:hover .cim img{transform:scale(1.05)}
.cbody{padding:1.15rem 1.25rem 1.3rem;border-top:1px solid rgba(var(--lit),.07);
  background:linear-gradient(180deg,var(--plate1),var(--plate2) 55%,var(--raise))}
.cfield{font-size:.58rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--dim)}
.ctitle{font-size:1.02rem;line-height:1.32;margin:.5rem 0 0;font-weight:500;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cyear{position:absolute;left:1.25rem;bottom:.75rem;z-index:2;font-family:var(--mono);
  font-size:1.55rem;line-height:1;letter-spacing:-.03em;font-weight:300}
.card.focus .cin{border-color:rgba(var(--lit),.28);
  box-shadow:0 40px 84px -26px rgba(0,0,0,.95), 0 8px 22px -8px rgba(0,0,0,.85),
             0 0 110px -18px rgba(var(--lit),.075), inset 0 1px 0 rgba(var(--lit),.09)}

/* axis */
.axis{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:0 2rem 1.5rem}
.axisLine{position:relative;height:1px;background:var(--line);cursor:pointer}
.axisFill{position:absolute;left:0;top:0;height:1px;background:var(--w)}
.axisKnob{position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--w);
  transform:translateX(-50%);box-shadow:0 0 14px rgba(var(--lit),.55)}
.axisMarks{position:relative;height:1.5rem;margin-top:.55rem}
.axisMarks span{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:.6rem;
  color:var(--dim);white-space:nowrap}
.nowYear{position:absolute;right:2rem;bottom:4.4rem;z-index:6;font-family:var(--mono);
  font-size:clamp(2.4rem,7vw,5.5rem);line-height:.8;font-weight:200;letter-spacing:-.05em;
  color:rgba(var(--lit),.022);-webkit-text-stroke:1px rgba(var(--lit),.15);pointer-events:none;
  white-space:nowrap}
.hint{position:absolute;left:2rem;bottom:4.4rem;z-index:6;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);pointer-events:none}

/* opening block */
.opening{position:absolute;left:3.2rem;top:50%;transform:translateY(-50%);z-index:5;
  max-width:24rem;pointer-events:none}
.opening .eyebrow{font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;color:var(--dim)}
.opening h1{font-size:3.1rem;line-height:1.02;margin:.9rem 0 0;font-weight:200;letter-spacing:-.038em}
.opening p{font-size:.95rem;line-height:1.7;color:var(--mid);margin:1.1rem 0 0;font-weight:300}
.opening .meta{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--line);
  display:flex;gap:1.5rem;font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}

/* fields overlay */
.fieldsBtn{font-size:.74rem;font-weight:500;color:var(--mid);background:none;border:0;cursor:pointer;
  display:flex;align-items:center;gap:.45rem;transition:color .25s}
.fieldsBtn:hover{color:var(--w)}
.fieldsBtn em{font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--ink);
  background:var(--w);border-radius:999px;padding:.02rem .3rem}
.fields{position:fixed;inset:0;z-index:75;background:rgba(9,9,9,.97);backdrop-filter:blur(30px);
  opacity:0;pointer-events:none;transition:opacity .4s;display:grid;place-items:center;padding:2rem}
.fields.on{opacity:1;pointer-events:auto}
.fieldsIn{max-width:44rem;width:100%}
.fields h2{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 1.4rem}
.fieldGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  column-gap:3.2rem;row-gap:.1rem}
.fieldGrid button{background:none;border:0;border-bottom:1px solid var(--line2);text-align:left;
  padding:.75rem .2rem;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;
  font-size:.94rem;font-weight:400;color:var(--mid);transition:color .2s,padding .3s}
.fieldGrid button:hover{color:var(--w);padding-left:.6rem}
.fieldGrid button[aria-pressed="true"]{color:var(--w)}
.fieldGrid button i{font-family:var(--mono);font-size:.62rem;color:var(--dim);opacity:.7;
  font-style:normal;padding-left:1.2rem}
.fields .close{margin-top:2rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);background:none;border:0;cursor:pointer}
.fields .close:hover{color:var(--w)}
.void{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);z-index:3;
  pointer-events:none;font-weight:300}

/* ─── entry pages (moment / person / story) ────────────────────────── */
main#view{position:relative;z-index:2}
.entry{max-width:44rem;margin:0 auto;padding:3.5rem 1.6rem 5rem}
.entry .eyebrow{font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0}
.entry .when{font-family:var(--mono);font-size:2.2rem;line-height:1;font-weight:200;
  letter-spacing:-.04em;margin:.7rem 0 0}
.entry h1{font-size:2.4rem;line-height:1.12;margin:.8rem 0 0;font-weight:300;letter-spacing:-.03em}
.entry .aka,.entry .dek{font-size:1rem;line-height:1.6;color:var(--mid);margin:.8rem 0 0;font-weight:300}
.entry figure.lead{margin:2.2rem 0 0}
.entry figure.lead img{width:100%;border:1px solid var(--line)}
.credit{font-size:.68rem;color:var(--dim);margin-top:.5rem;line-height:1.5}
.credit a{text-decoration:none;border-bottom:1px solid var(--line2)}
.prose{margin-top:2rem}
.prose p{font-size:1.05rem;line-height:1.75;color:#d8d8d8;margin:0 0 1.15rem;font-weight:300}
.prose h2{font-size:1.3rem;font-weight:400;letter-spacing:-.02em;margin:2.2rem 0 .9rem}
.prose blockquote{margin:1.6rem 0;padding-left:1.1rem;border-left:1px solid var(--line)}
.prose blockquote p{color:var(--mid);font-style:italic}
.prose figure{margin:2rem 0}
.prose a{text-decoration:none;border-bottom:1px solid var(--line)}
.prose a:hover{border-color:var(--w)}
.knownfor{margin-top:2.4rem;border-top:1px solid var(--line2);padding-top:1.2rem}
.knownfor h2,.sources h2{font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 .8rem}
.knownfor ul{margin:0;padding-left:1.1rem}
.knownfor li{font-size:.98rem;line-height:1.6;color:var(--mid);margin-bottom:.3rem;font-weight:300}
.sources{margin-top:2.4rem;border-top:1px solid var(--line2);padding-top:1.2rem}
.sources ol{margin:0;padding-left:1.2rem}
.sources li{font-size:.85rem;line-height:1.6;color:var(--mid);margin-bottom:.5rem;font-weight:300}
.sources a{text-decoration:none;border-bottom:1px solid var(--line2)}
.sources a:hover{border-color:var(--w)}
.backlink{margin-top:3rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.backlink a{color:var(--dim);text-decoration:none}
.backlink a:hover{color:var(--w)}

/* ─── wings (indexes, newsletter, privacy, 404) ────────────────────── */
.wing{max-width:60rem;margin:0 auto;padding:3.5rem 1.6rem 5rem}
.wing.prose-page,.wing.newsletter,.wing.notfound{max-width:44rem}
.wingHead h1{font-size:2.6rem;line-height:1.06;margin:0;font-weight:200;letter-spacing:-.035em}
.wingHead p{font-size:1rem;line-height:1.65;color:var(--mid);margin:.9rem 0 0;font-weight:300;max-width:34rem}
.pfilters{display:flex;flex-wrap:wrap;gap:.5rem;margin:2.4rem 0 1.6rem}
.pfilters button{background:none;border:1px solid var(--line);border-radius:2px;cursor:pointer;
  font-size:.72rem;color:var(--mid);padding:.32rem .7rem;transition:color .2s,border-color .2s}
.pfilters button:hover{color:var(--w)}
.pfilters button[aria-pressed="true"]{color:var(--ink);background:var(--w);border-color:var(--w)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1.6rem}
.pcell{text-decoration:none;display:block}
.pcell img,.pcell .noportrait{width:100%;aspect-ratio:3/4;object-fit:cover;
  background:var(--raise);border:1px solid var(--line)}
.pcell .pname{display:block;margin-top:.7rem;font-size:.95rem;font-weight:400}
.pcell .pdates{display:block;margin-top:.15rem;font-family:var(--mono);font-size:.66rem;color:var(--dim)}
.pcell:hover .pname{text-decoration:underline}
.slist{display:grid;gap:2.4rem;margin-top:2.6rem}
.scover{text-decoration:none;display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:1.6rem;align-items:start}
.scover img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.scover .sera{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--dim);display:block}
.scover .stitle{display:block;margin-top:.4rem;font-size:1.5rem;font-weight:300;letter-spacing:-.025em}
.scover .sdek{display:block;margin-top:.5rem;font-size:.95rem;line-height:1.6;color:var(--mid);font-weight:300}
.scover:hover .stitle{text-decoration:underline}

/* newsletter form */
.newsletter form{margin-top:2.4rem;max-width:26rem}
.newsletter label{display:block;font-size:.6rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.5rem}
.newsletter input[type=email]{width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  color:var(--w);font-family:var(--ui);font-size:1.1rem;font-weight:300;padding:.5rem 0;outline:0}
.newsletter input[type=email]:focus{border-color:var(--w)}
.newsletter button[type=submit]{margin-top:1.6rem;background:var(--w);color:var(--ink);border:0;
  border-radius:2px;padding:.6rem 1.2rem;font-size:.8rem;font-weight:500;cursor:pointer}
.newsletter .consent{font-size:.74rem;line-height:1.6;color:var(--dim);margin-top:1.2rem;font-weight:300}
.newsletter .consent a{border-bottom:1px solid var(--line2);text-decoration:none}
.subStatus{font-size:.85rem;color:var(--mid);margin-top:1rem;min-height:1.2em}
.cf-turnstile{margin-top:1.2rem}

/* ─── footer ───────────────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line2);padding:2.4rem 1.6rem 3rem;text-align:center}
.ftr p{font-size:.74rem;color:var(--dim);margin:.4rem 0;font-weight:300}
.ftr a{text-decoration:none;border-bottom:1px solid var(--line2)}
.ftr .disclaimer{font-size:.68rem;opacity:.8}

/* ─── phone: VERTICAL variant ──────────────────────────────────────────
   MOCKUP STATE: both phone layouts ship behind a toggle (?mobile=vertical |
   horizontal, remembered in localStorage) so Rozen can feel both on his own
   iPhone. Once he picks, the loser and the toggle are deleted.
   Vertical turns the stream into an ordinary scrolling column — nothing to
   discover, no two-dimensional scrolling, and the room's light still travels
   (driven by scroll position instead of card position). */
body.vertical{overflow:auto}
body.vertical .stage{position:static;height:auto;overflow:visible}
body.vertical .room,body.vertical .room-grain{position:fixed;inset:0}
body.vertical .struct,body.vertical .sHorizon,body.vertical .axis,
body.vertical .hint,body.vertical .nowYear{display:none}
body.vertical .hdr{position:sticky;top:0;background:rgba(9,9,9,.86);backdrop-filter:blur(18px)}
body.vertical .ftr{display:block}
body.vertical .opening{position:static;transform:none!important;opacity:1!important;
  max-width:none;padding:2.2rem 1.3rem .4rem;pointer-events:auto}
body.vertical .opening h1{font-size:2.3rem}
body.vertical .opening p{display:block;font-size:.95rem}
body.vertical .streamWrap{position:static;display:flex;flex-direction:column;gap:1.6rem;
  padding:1.6rem 1.3rem 3rem}
body.vertical .card{position:static!important;width:auto!important;height:auto!important;
  transform:none!important;opacity:1!important;filter:none!important;z-index:auto!important;
  visibility:visible!important}
body.vertical .cin{height:auto}
body.vertical .cim{flex:none;aspect-ratio:4/3}
body.vertical .cyear{font-size:1.4rem}
body.vertical .void{position:static;padding:3rem 1.3rem}
/* the year rail: a fixed marker of where in time this scroll position sits */
.vrail{display:none}
body.vertical .vrail{display:block;position:fixed;left:0;top:0;bottom:0;width:2px;z-index:5;
  background:linear-gradient(180deg,rgba(var(--lit),.03),rgba(var(--lit),.12),rgba(var(--lit),.03));
  pointer-events:none}
body.vertical .vrail b{position:absolute;left:.55rem;font-family:var(--mono);font-size:.62rem;
  font-weight:400;letter-spacing:.1em;color:var(--mid);white-space:nowrap;
  transform:translateY(-50%);text-shadow:0 0 8px #000,0 0 3px #000}
body.vertical .vrail i{position:absolute;left:0;width:2px;height:2.2rem;background:var(--w);
  transform:translateY(-50%);box-shadow:0 0 12px rgba(var(--lit),.6)}
/* ─── narrow screens (must stay last) ──────────────────────────────── */
@media(max-width:900px){
  .scover{grid-template-columns:1fr;gap:.9rem}
  .opening{top:4.4rem;left:1.4rem;right:1.4rem;transform:none;max-width:28rem}
  .opening h1{font-size:2.1rem}
  .opening p{display:none}
  .opening .meta{margin-top:.9rem;padding-top:.8rem}
  .sHorizon{top:89%}
}
@media(max-width:640px){
  .hdr{padding:1rem 1.2rem;gap:.8rem}
  .wordmark{font-size:.76rem}
  nav.main{gap:.95rem}
  nav.main a{font-size:.72rem}
  .tools{gap:.7rem}
  .newsBtn{padding:.25rem .5rem;font-size:.68rem}
  .entry,.wing{padding:2.4rem 1.2rem 3.5rem}
  .entry h1{font-size:1.9rem}
  .entry .when{font-size:1.7rem}
  .wingHead h1{font-size:2rem}
  .axis{padding:0 1.2rem 1.2rem}
  .axisMarks span:nth-child(even){display:none}
  .nowYear{right:1.2rem;bottom:3.8rem}
  .hint{display:none}
  .seek{padding:1rem 1.2rem}
  .seek input{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }