/* ══════════════════════════════════════════════════════════════════
   mnemos landing — the sanctuary, embedded
   dusk palette shared with sunset house v2
   ══════════════════════════════════════════════════════════════════ */
:root{
  --ink:#f5f3ed; --dim:#aaa7a0; --faint:#7b7975;
  --amber:#f2c14e; --amber-deep:#d99334; --ember:#b4622e;
  --violet:#a78bfa; --teal:#5eead4; --rose:#f2a3c0; --green:#4ade80;
  --bg0:#100c1c; --bg1:#1b122b;
  --chrome:#0c0c0e; --panel:rgba(12,12,14,0.91); --panel-raised:rgba(18,18,20,0.94);
  --control:rgba(242,236,223,0.045); --control-hover:rgba(242,236,223,0.085);
  --signal:#e1ded6; --signal-dim:#aaa69f;
  --line:rgba(242,236,223,0.12); --line2:rgba(242,236,223,0.24);
  --px:'Press Start 2P',monospace; --mono:'JetBrains Mono',monospace;
  --serif:'Newsreader',Georgia,serif; --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
  --frost:#9fd6e0;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);

  /* ── WP-42 · THE GROUND — the system for the page below the hero ──
     The field, the scale, the ink, the rhythm and the motion, all
     named. Every rule in the ground block is written from these: no
     raw colour, size or duration lives outside this declaration. */

  /* the field — 12 columns, 1120 wide, 24 gutters, a steady left edge */
  --g-cols:12; --g-max:1120px; --g-gutter:24px;
  --g-pad-x:32px; --g-pad-x-s:20px;
  --g-pad-t:48px; --g-pad-b:120px; --g-pad-t-s:32px; --g-pad-b-s:72px;

  /* the rhythm — 8pt */
  --g-half:4px; --g-1:8px; --g-2:16px; --g-3:24px; --g-4:32px;
  --g-5:40px; --g-6:48px; --g-8:64px; --g-10:80px; --g-12:96px; --g-30:240px;
  --g-hair:1px; --g-hair2:2px; --g-radius:2px; --g-press:1px;
  --g-tap:44px; --g-tap-lg:52px;

  /* the scale — the pixel face for titles, the serif for what is said,
     the mono for every datum. Few sizes, decisive gaps. */
  --g-px-title:24px; --g-px-title-s:15px;
  --g-px-place:12px; --g-px-place-s:11px;
  --g-serif-stmt:26px; --g-serif-stmt-s:20px;
  --g-serif-body:16px; --g-serif-body-s:15px;
  --g-mono-xl:14px; --g-mono-lg:12px; --g-mono:11px; --g-mono-s:10.5px; --g-mono-xs:9.5px;
  --g-em-mono:.86em;

  /* the counterforms */
  --g-track-title:.06em; --g-track-label:.16em; --g-track-mono:.05em;
  --g-track-place:.14em; --g-track-body:0;
  --g-lh-title:1.45; --g-lh-place:1.6; --g-lh-stmt:1.28;
  --g-lh-body:1.55; --g-lh-mono:1.7;
  --g-measure:60ch; --g-measure-stmt:30ch; --g-measure-quote:34ch;

  /* the ink — one cool cream in three tiers. The quietest is .52 rather
     than .42: at .42 the caption tier measures 3.7:1 on this ground,
     under WCAG AA, and these labels carry the page's provenance. */
  --g-ink-full:#fffdf8;
  --g-ink-92:rgba(245,243,237,.92);
  --g-ink-64:rgba(245,243,237,.64);
  --g-ink-52:rgba(245,243,237,.52);
  --g-rule:rgba(242,236,223,.10);
  --g-rule-lit:rgba(242,236,223,.18);
  --g-rule-lit2:rgba(242,236,223,.30);
  --g-focus:rgba(245,243,237,.50);
  --g-signal:var(--amber-deep); --g-signal-lit:var(--amber);
  --g-signal-hair:rgba(217,147,52,.6);
  --g-well:#0a0812;
  --g-floor:#07070f; --g-floor-at:70%;

  /* the flat object — a subtle fill, one hairline, a lit top edge */
  --g-fill:rgba(242,236,223,.045);
  --g-fill-hover:rgba(242,236,223,.085);
  --g-fill-press:rgba(242,236,223,.03);
  --g-lit:rgba(255,253,248,.09);
  --g-shade:rgba(4,3,8,.45);

  /* the pieces */
  --g-dot:4px; --g-markh:11px;
  --g-win:8px; --g-win-x:16px; --g-win-y:12px;
  --g-win-warm:rgba(247,217,140,.85); --g-win-deep:rgba(217,147,52,.7);
  --g-frame-ratio:16/9; --g-frame-lift:1.1;
  --g-node:6px; --g-node-mid:2.5px; --g-node-gap:56px;
  --g-branch-x:132px; --g-branch-y:1px; --g-branch-mid:6px;
  --g-lat-dot:1px; --g-lat-gap:9px; --g-lat-a:.55;
  --g-mask-a:#000; --g-mask-b:transparent;
  --g-cap-lift:4px;

  /* the motion — a hover, and nothing else below the horizon */
  --g-hover:150ms; --g-ease:cubic-bezier(0.23,1,0.32,1);

  /* ── WP-44 · THE EVENING — how the page arrives ──
     One entrance per thing, once, and then stillness. The rise is short
     enough to read as settling rather than as an effect; the stagger is
     one frame's worth, so a block arrives as a block. */
  --ev-rise:10px; --ev-slide:16px;
  --ev-t-rise:360ms; --ev-t-slide:420ms; --ev-t-rule:500ms;
  --ev-ease:cubic-bezier(0.23,1,0.32,1);
  --ev-d:0ms;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* the deep is the page's own floor, under the sky; and the page never runs
   sideways — `clip` stops the scroll without making html a scroll box */
html{scroll-behavior:smooth;background:var(--g-floor);overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  /* the ground under the sky: one ramp down the document, never repeated, so
     the foot of the page is the same deep the sky paints and no seam shows */
  background:linear-gradient(180deg,var(--bg0) 0,var(--g-floor) var(--g-floor-at));
  color:var(--ink);
  font-family:var(--mono); font-size:15px; line-height:1.65;
  overflow-x:hidden;
}
::selection{background:rgba(216,213,205,.24)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(239,233,220,.10);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* the sky — ONE canvas, fixed to the viewport, repainted as the page moves.
   The scroll is the evening: the last light drains, the stars come out, the
   moon climbs, and the sky settles into night. The horizon and its treeline
   are drawn at their document position minus the scroll, so they scroll away
   with the hero; the moon does not — it stays in the sky. landing.js owns
   every pixel of it. */
#sky{position:fixed;inset:0;z-index:0;image-rendering:pixelated;pointer-events:none}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header.bar,footer{position:relative;z-index:2}

/* topbar */
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 28px;font-family:var(--px);font-size:10px;letter-spacing:.16em}
.bar__l{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
/* the mark is the one link that leaves: the front door at the site's root.
   It keeps the pixel face it had as a label — only the states are new. */
.bar__mark{color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .18s var(--ease-out),border-color .18s var(--ease-out)}
.bar__mark:hover{border-bottom-color:var(--line2)}
.bar__mark:focus-visible{outline:none;border-bottom-color:rgba(242,236,223,.5)}
.bar__mark:active{color:var(--signal-dim)}
.bar__sub{font-family:var(--mono);font-size:10px;color:var(--dim)}
.bar__tag{font-family:var(--mono);font-size:10px;color:var(--dim)}

/* hero */
/* the foot of the hero is where the horizon passes: the last light needs a
   little clear air under the cue before the page goes under it. */
.hero{max-width:1460px;margin:0 auto;padding:4vh 24px 140px;position:relative}
.tag{font-family:var(--px);font-size:9px;letter-spacing:.18em;color:var(--signal);display:block;margin-bottom:14px}
.tag em{font-family:var(--serif);font-style:italic;letter-spacing:.04em;font-size:12px;color:var(--dim);text-transform:none}
.hero__head{margin-bottom:26px}
.wordmark{font-family:var(--px);color:var(--ink);font-size:clamp(28px,6vw,64px);line-height:1.06;
  text-shadow:0 3px 0 rgba(0,0,0,.65),0 0 42px rgba(242,236,223,.06)}
.wordmark__the{font-size:.38em;color:var(--dim);letter-spacing:.3em}
.lede{font-family:var(--serif);font-size:17px;font-weight:300;color:rgba(239,233,220,.82);margin-top:14px;max-width:520px}
.lede--em em{color:var(--signal)}
/* the cue is the last line before the horizon passes, so it stands on the
   sunset: it takes the wordmark's own shadow to hold against it. */
.hero__cue{margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink);text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.75),0 0 12px rgba(0,0,0,.6)}

/* world = cabinet + feed */
.world{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:stretch;margin-top:8px}
.world.nofeed{grid-template-columns:minmax(0,1fr)}
.world.nofeed .feed{display:none}
.world.fs.nofeed{grid-template-columns:minmax(0,1fr)}
.world.fs{position:fixed;inset:0;z-index:40;background:var(--chrome);padding:16px;margin:0;grid-template-columns:minmax(0,1fr) 340px}
.world:fullscreen{background:var(--chrome);padding:16px}
/* ?door=1 — the page is running as the terminal's program, not as a website.
   Only the cab and the feed exist; everything the landing would say around
   them was already said on the glass, in the boot text. */
html.door,html.door body{overflow:hidden;height:100%}
html.door .bar,html.door .ground,
html.door .hero>*:not(#world){display:none!important}
html.door .hero{max-width:none;margin:0;padding:0}

.cab{display:flex;flex-direction:column;background:var(--panel);backdrop-filter:blur(3px);
  border:1px solid var(--line2);border-radius:10px;overflow:hidden;min-width:0}
.cab__title{font-family:var(--px);font-size:10px;letter-spacing:.16em;color:var(--ink);display:flex;align-items:center;gap:9px}
.cab__room{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.cab__live{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;color:var(--green);display:inline-flex;align-items:center;gap:6px}
.tbtn{background:var(--control);border:1px solid var(--line2);border-radius:6px;color:var(--dim);
  min-height:36px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;padding:7px 11px;cursor:pointer}
.tbtn:hover{color:var(--ink);border-color:rgba(242,236,223,.34);background:var(--control-hover)}
.tbtn:focus-visible{outline:none;border-color:rgba(242,236,223,.5);color:var(--ink)}
.tbtn[aria-pressed="true"]{color:var(--ink);border-color:rgba(242,236,223,.5);background:var(--control-hover)}

.cab{outline:none}
.cab:focus{border-color:rgba(242,236,223,.4)}
.cab__stage{position:relative;background:#0d0a16;line-height:0}
.cab__stage>canvas{width:100%;height:auto;display:block;image-rendering:pixelated}
.museum-portal{position:absolute;inset:0;z-index:8;background:#050608;line-height:normal}
.museum-portal[hidden]{display:none}
.museum-portal iframe{display:block;width:100%;height:100%;border:0;background:#050608}
.cab.is-museum .cab__stage{width:100%;height:auto;min-height:0;aspect-ratio:8/5;background:#050608}
.cab.is-museum .cab__stage>canvas,
.cab.is-museum .cab__stage>.placard,
.cab.is-museum .cab__stage>.dpad,
.cab.is-museum .cab__stage>.ebtn,
.cab.is-museum .cab__stage>.scanlines{display:none}
.cab.is-museum .cab__hud{display:block;min-height:0;padding:10px 14px 12px}
.cab.is-museum .cab__hudrow,
.cab.is-museum .cab__hudbody{display:none}
.cab.is-museum .cab__hudhint{display:block;margin-bottom:10px;color:var(--dim);font-size:0}
.cab.is-museum .cab__hudhint::after{content:"ARROWS / WASD MOVE \00b7  E INSPECT";font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em}
.cab.is-museum .cab__title{color:var(--ink)}
@media (max-width:700px){.cab.is-museum .cab__stage{height:auto;min-height:0;aspect-ratio:8/5}}
.scanlines{position:absolute;inset:0;pointer-events:none;opacity:.14;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}
.placard{position:absolute;left:50%;top:14px;transform:translateX(-50%);pointer-events:none;
  padding:5px 8px;background:rgba(8,7,10,.7);border:1px solid rgba(245,243,237,.12);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--ink);text-shadow:0 2px 0 #000}

.dpad{position:absolute;left:12px;bottom:12px;display:grid;line-height:1;
  grid-template-areas:". u ." "l d r";gap:4px}
.dpad button{width:44px;height:44px;background:rgba(12,12,14,.94);border:1px solid var(--line2);
  border-radius:6px;color:var(--signal);font-size:14px;cursor:pointer;touch-action:none}
.dpad button:active{color:var(--ink);border-color:var(--signal);background:rgba(35,35,38,.94)}
.dpad [data-dpad="up"]{grid-area:u}.dpad [data-dpad="left"]{grid-area:l}
.dpad [data-dpad="down"]{grid-area:d}.dpad [data-dpad="right"]{grid-area:r}
.ebtn{position:absolute;right:14px;bottom:14px;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#f4f2eb,#a8a59e);
  border:2px solid rgba(0,0,0,.5);box-shadow:0 4px 0 rgba(0,0,0,.45);
  font-family:var(--px);font-size:13px;color:#151517;cursor:pointer;touch-action:none}
.ebtn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.45)}

.cab__hud{padding:15px 18px 17px;border-top:1px solid var(--line);min-height:116px}
.cab__hudrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cab__hudtitle{font-family:var(--px);font-size:10px;letter-spacing:.15em;color:var(--signal)}
.cab__cta{background:var(--control);border:1px solid rgba(242,236,223,.34);border-radius:6px;color:var(--signal);
  min-height:36px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.07em;padding:7px 11px;cursor:pointer;white-space:nowrap}
.cab__hudbody{font-family:var(--serif);font-size:17px;line-height:1.45;color:rgba(245,243,237,.9);margin-top:8px;min-height:50px;max-width:82ch}
.cab__hudhint{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--dim)}
/* feed */
.feed{display:flex;flex-direction:column;background:var(--panel);backdrop-filter:blur(3px);
  border:1px solid var(--line2);border-radius:10px;overflow:hidden;min-height:420px;max-height:640px}
.world.fs .feed,.world:fullscreen .feed{max-height:none}
.feed__head{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:12px 16px;border-bottom:1px solid var(--line)}
.feed__title{font-family:var(--px);font-size:10px;letter-spacing:.16em}
.feed__live{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.07em;color:var(--green);display:inline-flex;align-items:center;gap:6px}
/* one resident a row: the column is 340 wide and a name with where it is and
   what it is doing does not survive being halved — since WP-43 the feed is
   open when the page opens, so a clipped roster is the first thing seen. */
.feed__roster{display:grid;grid-template-columns:minmax(0,1fr);gap:5px 12px;padding:11px 16px;border-bottom:1px solid var(--line)}
.feed__roster span{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.02em;color:var(--dim);display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed__roster span .dot{margin-right:5px;vertical-align:.06em}
.feed__roster b{color:var(--ink);font-weight:400;margin-right:3px}
.feed__list{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:11px}
.fi{animation:fin .25s var(--ease-out) both}
@keyframes fin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.fi--sys{font-size:12.5px;line-height:1.5;color:var(--dim)}
.fi--sys .t{color:var(--faint)}
.fi--line .who{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--ink)!important}
.fi--line .meta{font-size:11px;color:var(--dim);margin-left:8px}
.fi--line .txt{font-family:var(--sans);font-size:14px;line-height:1.48;color:rgba(245,243,237,.92);margin-top:4px}
.fi--chat{border-left:2px solid var(--signal-dim);padding-left:9px}
.feed__foot{padding:10px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:9px;line-height:1.4;letter-spacing:.05em;color:var(--dim)}

/* two-tier navigation — world intent first, page sections second */
.menu{margin-top:16px;background:var(--panel);backdrop-filter:blur(3px);
  border:1px solid var(--line2);border-radius:8px;padding:0 20px;display:grid}
.menu__row{min-width:0;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:12px 0}
.menu__row--world{border-bottom:1px solid var(--line)}
.menu__row--page{opacity:1}
.menu__head{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--signal)}
.menu__head--quiet{color:var(--faint)}
.menu a{font-family:var(--mono);font-size:10px;font-weight:550;letter-spacing:.06em;color:var(--dim);text-decoration:none;position:relative;padding-left:13px}
.menu a::before{content:"▶";position:absolute;left:0;font-size:7px;color:transparent}
.menu a:hover,.menu a:focus-visible{color:var(--signal)}
.menu a:hover::before,.menu a:focus-visible::before{color:var(--signal)}
.menu a:focus-visible{outline:1px solid var(--signal);outline-offset:4px}

/* ══════════════════════════════════════════════════════════════════
   THE GROUND — everything below the horizon (WP-42).

   The rule, kept from WP-35: one sky, one horizon, then the ground.
   No panels. No cards. No box inside a box. Each section is open text
   on the dark with a single hairline above it; space, not rules,
   separates the parts inside it.

   What WP-42 adds is the field. Twelve columns, 1120 wide, 24-pixel
   gutters, and a STEADY LEFT EDGE: every section and every row of
   THE PLACES opens on column 1, nothing is centred, and the void
   accumulates on the right where it is earned. Hierarchy is size and
   opacity — the pixel face carries titles, the serif carries what is
   said, and the mono is only ever a datum. Nothing is bold. Amber is
   the one signal: the dot on a control, the rule under a link, the
   marker beside a frame's caption. Focus is the element's own border
   brightening in place, never a second ring.

   Every value below is a token from :root.
   ══════════════════════════════════════════════════════════════════ */
.ground{position:relative;z-index:2;
  max-width:var(--g-max);margin:0 auto;
  padding:0 var(--g-pad-x) var(--g-pad-b)}

/* the field: twelve columns, shared by every section and by the places */
.sec__in{display:grid;grid-template-columns:repeat(var(--g-cols),minmax(0,1fr));
  column-gap:var(--g-gutter);row-gap:var(--g-5);align-content:start}

.ground .status{font-family:var(--mono);font-size:var(--g-mono);line-height:var(--g-lh-mono);
  letter-spacing:var(--g-track-mono);color:var(--g-ink-52);
  padding-top:var(--g-6);padding-bottom:var(--g-12)}

/* ── the section: a hairline, then the title close under it, then air ─ */
.sec{background:none;border:0;border-radius:0;box-shadow:none;
  border-top:var(--g-hair) solid var(--g-rule);
  padding-top:var(--g-pad-t);padding-bottom:var(--g-pad-b)}
.sec--last{padding-bottom:var(--g-12)}
.sec__h{grid-column:1 / -1;display:block;font-weight:400}
.sec__no{display:block;margin-bottom:var(--g-2);font-family:var(--mono);font-size:var(--g-mono);
  line-height:var(--g-lh-mono);letter-spacing:var(--g-track-label);color:var(--g-ink-52)}
.sec__t{font-family:var(--px);font-weight:400;font-size:var(--g-px-title);
  line-height:var(--g-lh-title);letter-spacing:var(--g-track-title);color:var(--g-ink-92)}

/* ── the two blocks a section is made of: the lead on the left, the
      words on the right, and the void between them doing the work ── */
.lead{grid-column:1 / span 6}
.sec__in>.stmt{grid-column:1 / span 6}
.sec__in>.stmt--wide{grid-column:1 / span 7}
.words{grid-column:8 / -1;align-self:start}
.quote{grid-column:1 / span 7;margin:0}
.act{grid-column:1 / span 5}
.honest{grid-column:1 / -1}

.stmt{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:var(--g-serif-stmt);line-height:var(--g-lh-stmt);color:var(--g-ink-92);
  max-width:var(--g-measure-stmt);text-wrap:pretty}
.stmt--wide{max-width:none}
.fact{margin-top:var(--g-4);font-family:var(--mono);font-size:var(--g-mono);
  line-height:var(--g-lh-mono);letter-spacing:var(--g-track-mono);color:var(--g-ink-52)}
.body{font-family:var(--serif);font-weight:300;font-size:var(--g-serif-body);
  line-height:var(--g-lh-body);color:var(--g-ink-64);max-width:var(--g-measure);text-wrap:pretty}
.body em,.stmt em{font-style:italic;color:var(--g-ink-92)}
.src{margin-top:var(--g-4);font-family:var(--mono);font-size:var(--g-mono);
  line-height:var(--g-lh-mono);letter-spacing:var(--g-track-mono);color:var(--g-ink-52)}
.mono-in{font-family:var(--mono);font-size:var(--g-em-mono);letter-spacing:var(--g-track-mono)}
.honest{margin-top:var(--g-12);font-family:var(--mono);font-size:var(--g-mono);
  line-height:var(--g-lh-mono);letter-spacing:var(--g-track-mono);color:var(--g-ink-52)}

/* the house’s own windows: six warm pixels, alone on the ground, once */
#enter .house{grid-column:1 / -1;justify-self:center;margin-top:var(--g-30);
  display:grid;grid-template-columns:repeat(3,var(--g-win));
  column-gap:var(--g-win-x);row-gap:var(--g-win-y)}
#enter .house i{display:block;width:var(--g-win);height:var(--g-win);background:var(--g-win-warm)}
#enter .house i:nth-child(n+4){background:var(--g-win-deep)}

/* ── the one inline signal: a word with an amber rule under it ───── */
.ln{font-family:var(--mono);font-size:var(--g-mono);letter-spacing:var(--g-track-mono);
  color:var(--g-ink-64);text-decoration:none;
  border-bottom:var(--g-hair) solid var(--g-signal-hair);padding-bottom:var(--g-half);
  transition:color var(--g-hover) var(--g-ease),border-color var(--g-hover) var(--g-ease)}
.ln:hover{color:var(--g-ink-92);border-bottom-color:var(--g-signal-lit)}
.ln:focus-visible{outline:none;color:var(--g-ink-92);border-bottom-color:var(--g-focus)}
.ln:active{color:var(--g-ink-52)}

/* ── the control: a flat object in the house's own language. A subtle
      fill, one hairline, a lit top edge, a whisper of shade — and five
      states, the last of them the focus ring the element already has. */
.btn{display:inline-flex;align-items:center;gap:var(--g-1);
  min-height:var(--g-tap);padding-left:var(--g-2);padding-right:var(--g-2);
  font-family:var(--mono);font-size:var(--g-mono-lg);letter-spacing:var(--g-track-mono);
  color:var(--g-ink-92);text-decoration:none;white-space:nowrap;cursor:pointer;
  background:var(--g-fill);border:var(--g-hair) solid var(--g-rule-lit);
  border-radius:var(--g-radius);
  box-shadow:inset 0 var(--g-hair) 0 var(--g-lit),0 var(--g-hair) var(--g-hair2) var(--g-shade);
  transition:background var(--g-hover) var(--g-ease),border-color var(--g-hover) var(--g-ease),
    color var(--g-hover) var(--g-ease),transform var(--g-hover) var(--g-ease)}
.btn__dot{width:var(--g-dot);height:var(--g-dot);flex:none;background:var(--g-signal);
  transition:background var(--g-hover) var(--g-ease)}
.btn:hover{background:var(--g-fill-hover);border-color:var(--g-rule-lit2);color:var(--g-ink-full)}
.btn:hover .btn__dot{background:var(--g-signal-lit)}
.btn:focus-visible{outline:none;border-color:var(--g-focus);color:var(--g-ink-full);
  background:var(--g-fill-hover)}
.btn:focus-visible .btn__dot{background:var(--g-signal-lit)}
.btn:active{background:var(--g-fill-press);border-color:var(--g-rule-lit2);
  transform:translateY(var(--g-press));box-shadow:inset 0 var(--g-hair) var(--g-hair2) var(--g-shade)}
.btn[aria-disabled="true"]{color:var(--g-ink-52);border-color:var(--g-rule);background:none;
  box-shadow:none;cursor:default;pointer-events:none}
.btn[aria-disabled="true"] .btn__dot{background:var(--g-ink-52)}
.btn--lg{min-height:var(--g-tap-lg);padding-left:var(--g-3);padding-right:var(--g-3);
  font-size:var(--g-mono-xl)}

/* ── §02 · THE PLACES — the frames carry the weight ───────────────
      One place a row, the frame on seven columns and the words on
      five, alternating sides so the eye keeps moving; column 1 is
      occupied in every row, so the left edge never wanders. */
.places{display:grid;row-gap:var(--g-12);margin-top:var(--g-10)}
.place{display:grid;grid-template-columns:repeat(var(--g-cols),minmax(0,1fr));
  column-gap:var(--g-gutter);row-gap:var(--g-4);align-items:start}
.place__f{grid-column:1 / span 7;grid-row:1;margin:0}
.place__t{grid-column:8 / -1;grid-row:1}
.place:nth-child(even) .place__f{grid-column:6 / -1}
.place:nth-child(even) .place__t{grid-column:1 / span 5}

.place__f .box{position:relative;display:block;overflow:hidden;
  aspect-ratio:var(--g-frame-ratio);background:var(--g-well);
  border:var(--g-hair) solid var(--g-rule-lit);border-radius:var(--g-radius);
  transition:border-color var(--g-hover) var(--g-ease)}
.place__f img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;
  transition:filter var(--g-hover) var(--g-ease)}
.place__f figcaption{display:flex;align-items:center;gap:var(--g-1);
  margin-top:var(--g-2);font-family:var(--mono);font-size:var(--g-mono);
  line-height:var(--g-lh-mono);letter-spacing:var(--g-track-mono);color:var(--g-ink-52);
  transition:color var(--g-hover) var(--g-ease),transform var(--g-hover) var(--g-ease)}
.place__f figcaption::before{content:"";width:var(--g-dot);height:var(--g-dot);flex:none;
  background:var(--g-signal);transition:background var(--g-hover) var(--g-ease)}
/* a row lights a step when it is pointed at or stepped into, and its
   caption comes forward — the provenance is legible either way */
.place:hover .box,.place:focus-within .box{border-color:var(--g-rule-lit2)}
.place:hover img,.place:focus-within img{filter:brightness(var(--g-frame-lift))}
.place:hover figcaption,.place:focus-within figcaption{color:var(--g-ink-92);
  transform:translateY(calc(var(--g-cap-lift) * -1))}
.place:hover figcaption::before,.place:focus-within figcaption::before{background:var(--g-signal-lit)}

.place__i{display:block;font-family:var(--mono);font-size:var(--g-mono);
  letter-spacing:var(--g-track-label);color:var(--g-ink-52);margin-bottom:var(--g-2)}
.place__t h3{font-family:var(--px);font-weight:400;font-size:var(--g-px-place);
  line-height:var(--g-lh-place);letter-spacing:var(--g-track-place);color:var(--g-ink-92);
  margin-bottom:var(--g-3)}
.place__t p{font-family:var(--serif);font-weight:300;font-size:var(--g-serif-body);
  line-height:var(--g-lh-body);color:var(--g-ink-64);max-width:var(--g-measure);
  margin-bottom:var(--g-4);text-wrap:pretty}

/* ── §03 · THE ENGINE, in hairlines and dots over a lattice ─────── */
.dgm{grid-column:1 / span 6;position:relative}
.dgm::before{content:"";position:absolute;
  inset:calc(var(--g-4) * -1) calc(var(--g-6) * -1) calc(var(--g-4) * -1) 0;
  background-image:radial-gradient(var(--g-rule) var(--g-lat-dot),transparent 0);
  background-size:var(--g-lat-gap) var(--g-lat-gap);opacity:var(--g-lat-a);
  -webkit-mask-image:linear-gradient(105deg,var(--g-mask-a),var(--g-mask-b) 80%);
  mask-image:linear-gradient(105deg,var(--g-mask-a),var(--g-mask-b) 80%);
  pointer-events:none}
.dgm>*{position:relative}
.dgm__spine{display:flex;flex-direction:column}
.dgm__n{position:relative;display:flex;align-items:center;gap:var(--g-2);
  padding-bottom:var(--g-node-gap)}
.dgm__n:last-child{padding-bottom:0}
.dgm__n>i{flex:none;width:var(--g-node);height:var(--g-node);background:var(--g-ink-64);
  border-radius:var(--g-node)}
.dgm__n::before{content:"";position:absolute;left:var(--g-node-mid);bottom:0;
  width:var(--g-hair);height:var(--g-node-gap);background:var(--g-rule-lit)}
.dgm__n:last-child::before{display:none}
.dgm__n>span{font-family:var(--mono);font-size:var(--g-mono-lg);
  letter-spacing:var(--g-track-label);color:var(--g-ink-92)}
.dgm__b{position:absolute;left:var(--g-branch-x);top:var(--g-branch-y);display:flex;gap:var(--g-4)}
.dgm__b span{position:relative;padding-left:var(--g-3);font-family:var(--mono);
  font-size:var(--g-mono);letter-spacing:var(--g-track-label);color:var(--g-ink-52)}
.dgm__b span::before{content:"";position:absolute;left:0;top:var(--g-branch-mid);
  width:var(--g-2);height:var(--g-hair);background:var(--g-rule-lit)}
.dgm__side{margin-top:var(--g-5);display:flex;gap:var(--g-6);flex-wrap:wrap}
.dgm__s{padding-left:var(--g-2);border-left:var(--g-hair) solid var(--g-rule-lit)}
.dgm__s span{display:block;font-family:var(--mono);font-size:var(--g-mono);
  letter-spacing:var(--g-track-label);color:var(--g-ink-64)}
.dgm__s small{display:block;margin-top:var(--g-half);font-family:var(--mono);
  font-size:var(--g-mono-xs);letter-spacing:var(--g-track-mono);color:var(--g-ink-52)}

/* ── §04 · THE CHARTER — one line of it, exactly as written ─────── */
.quote blockquote{margin:0;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:var(--g-serif-stmt);line-height:var(--g-lh-stmt);color:var(--g-ink-92);
  max-width:var(--g-measure-quote);text-wrap:pretty}
.quote figcaption{margin-top:var(--g-3);font-family:var(--mono);font-size:var(--g-mono);
  line-height:var(--g-lh-mono);letter-spacing:var(--g-track-mono);color:var(--g-ink-52)}

/* ── the field narrows: the two blocks stack, the frames go first ── */
@media (max-width:980px){
  .lead,.words,.dgm,.quote,.act,.honest,.sec__in>.stmt,.sec__in>.stmt--wide{grid-column:1 / -1}
  .place__f,.place__t,.place:nth-child(even) .place__f,.place:nth-child(even) .place__t{
    grid-column:1 / -1;grid-row:auto}
  .dgm::before{inset:calc(var(--g-4) * -1) calc(var(--g-4) * -1) calc(var(--g-4) * -1) 0}
  .stmt{max-width:none}
}
@media (max-width:560px){
  .ground{padding-left:var(--g-pad-x-s);padding-right:var(--g-pad-x-s)}
  .sec{padding-top:var(--g-pad-t-s);padding-bottom:var(--g-pad-b-s)}
  .sec--last{padding-bottom:var(--g-10)}
  .ground .status{padding-bottom:var(--g-10)}
  .sec__t{font-size:var(--g-px-title-s)}
  .stmt{font-size:var(--g-serif-stmt-s)}
  .quote blockquote{font-size:var(--g-serif-stmt-s);max-width:none}
  .body,.place__t p{font-size:var(--g-serif-body-s)}
  .place__t h3{font-size:var(--g-px-place-s)}
  .places{row-gap:var(--g-10);margin-top:var(--g-8)}
  .honest{margin-top:var(--g-10)}
  #enter .house{margin-top:var(--g-12)}
  .sec__h{margin-bottom:0}
  .sec__no{margin-bottom:var(--g-1)}
  .dgm__b{position:static;margin-top:var(--g-1);margin-left:var(--g-3)}
  .btn{white-space:normal}
}

/* below the horizon nothing moves but the light on a frame you point at */
@media (prefers-reduced-motion:reduce){
  .btn,.btn__dot,.ln,.place__f .box,.place__f img,.place__f figcaption,
  .place__f figcaption::before{transition:none}
  .place:hover figcaption,.place:focus-within figcaption{transform:none}
}

/* panel overlay (plaque / journal / ledger) */
[hidden]{display:none!important}
.panel{position:fixed;inset:0;z-index:60;background:rgba(5,5,6,.78);display:flex;align-items:center;justify-content:center;padding:20px}
.panel__card{position:relative;background:#151517;border:1px solid var(--line2);border-radius:12px;
  max-width:560px;width:100%;max-height:80vh;overflow-y:auto;padding:28px 30px;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.panel__x{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--dim);font-size:22px;cursor:pointer}
.panel__x:hover{color:var(--ink)}
.panel__x:focus-visible{outline:none;color:var(--ink)}
.pl__name{font-family:var(--px);font-size:13px;letter-spacing:.18em;color:var(--ink)!important}
.pl__life{font-family:var(--px);font-size:9px;letter-spacing:.14em;color:var(--dim);margin-top:10px}
.pl__statusline{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--signal);margin-top:12px}
.pl__body{font-family:var(--serif);font-size:15.5px;font-weight:300;color:rgba(239,233,220,.85);margin-top:14px}
.pl__quote{font-family:var(--serif);font-style:italic;font-size:16px;color:rgba(239,233,220,.9);border-left:2px solid var(--signal-dim);padding-left:14px;margin-top:18px}
.pl__label{font-family:var(--px);font-size:9px;letter-spacing:.16em;color:var(--signal);margin-top:20px}
.pl__row{display:flex;gap:14px;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--line)}
.pl__row .yrs{font-family:var(--mono);font-size:10px;color:var(--dim);min-width:92px}
.pl__closing{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--dim);margin-top:14px}

/* the boards and the journal — the terminal idiom, in the house panel */
.bd__kicker{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.bd__kicker::before{content:"> ";opacity:.6}
.bd__title{font-family:var(--px);font-size:13px;letter-spacing:.18em;color:var(--ink)}
.bd__src{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--dim);margin:10px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.bd__row{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:9px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--dim);font-family:var(--mono);font-size:12px;cursor:pointer}
.bd__row:hover,.bd__row:focus-visible{color:var(--ink);outline:none}
/* the deck's desk panels link out to the workshop and the labs */
a.bd__row{text-decoration:none;align-items:baseline}
a.bd__row .bd__d{white-space:normal;text-align:right}
.bd__t{color:var(--ink)} .bd__d{font-size:10px;letter-spacing:.06em;color:var(--faint);white-space:nowrap}
.bd__sect{font-family:var(--px);font-size:9px;letter-spacing:.16em;color:var(--signal);margin:20px 0 8px}
.bd__msg,.bd__conv{padding:10px 0;border-bottom:1px solid var(--line)}
.bd__who{font-family:var(--px);font-size:9px;letter-spacing:.14em}
.bd__body{font-family:var(--mono);font-size:12.5px;line-height:1.6;color:rgba(239,233,220,.88);margin-top:6px;white-space:pre-wrap}
.bd__house{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--dim);margin-top:16px}
.panel__card.is-board{max-width:720px}

.dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.dot--green{background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2.6s var(--ease-in-out) infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.dot--green{animation:none}.fi{animation:none}}

/* ══ THE COMPASS ══ */
.compass{position:relative;z-index:41;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:18px;min-height:48px;padding:11px 16px;background:none;
  border-bottom:1px solid var(--line)}
.crumb{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.crumb .here{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px rgba(242,193,78,.8);animation:pulse 2.4s ease-in-out infinite}
.crumb .here.quiet{background:var(--faint);box-shadow:none;animation:none}
.crumb .zone{color:var(--faint)} .crumb .sep{color:var(--faint);opacity:.6} .crumb .room{color:var(--ink)}
.action{justify-self:center;max-width:100%;display:flex;align-items:center;gap:12px;min-width:0;opacity:0;transform:translateY(6px);transition:all .3s var(--ease-out)}
.action.on{opacity:1;transform:none}
.action .key{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;background:rgba(242,236,223,.06);
  border:1px solid var(--line2);font-family:var(--px);font-size:9px}
.action .verb{font-size:11px;letter-spacing:.1em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.action .what{color:var(--dim)}
.tools{display:flex;align-items:center;gap:8px}
.tool{display:flex;align-items:center;gap:7px;padding:7px 11px;background:rgba(242,236,223,.045);border:1px solid var(--line);
  color:var(--dim);font-size:9px;letter-spacing:.14em;text-transform:uppercase;transition:all .2s var(--ease-out)}
.tool:hover{background:rgba(242,236,223,.09);color:var(--ink);border-color:var(--line2)}
.tool .k{font-family:var(--px);font-size:8px;color:var(--ink);opacity:.85}
.tool.quiet{padding:7px 9px}
.tbtn--map .k{font-family:var(--px);font-size:8px;margin-right:6px}

.toast{position:absolute;left:50%;bottom:74px;transform:translate(-50%,14px);z-index:45;padding:8px 16px;
  background:var(--panel);border:1px solid var(--line2);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  line-height:normal;opacity:0;transition:all .4s var(--ease-out);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--teal);font-weight:500}

/* ══ THE DOOR — the card at the threshold, once per browser ══ */
.door{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:rgba(5,4,9,.72);backdrop-filter:blur(6px);line-height:normal}
.door__card{width:min(440px,calc(100% - 40px));padding:22px 24px 20px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.door__kicker{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.door__kicker::before{content:"> ";opacity:.6}
.door__title{font-family:var(--px);font-size:11px;letter-spacing:.16em;color:var(--ink);margin-top:10px}
.door__body{font-family:var(--serif);font-size:15.5px;line-height:1.55;color:rgba(239,233,220,.9);margin-top:14px}
.door__in{margin-top:18px;display:inline-flex;align-items:center;gap:10px;padding:11px 16px;background:rgba(242,193,78,.12);border:1px solid rgba(242,193,78,.55);color:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.door__in .k{font-family:var(--px);font-size:9px;color:var(--amber)}
.door__in:focus-visible{outline:none;border-color:rgba(242,236,223,.5);color:var(--ink)}
@media (max-width:700px){.door__card{padding:16px}.door__body{font-size:14px}}

/* ══ DESTINATIONS — the travel menu ══ */
.veil{position:fixed;inset:0;z-index:50;background:rgba(5,4,9,.6);backdrop-filter:blur(16px) saturate(.65);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out)}
.veil[hidden]{display:none!important}
.veil.on{opacity:1;pointer-events:auto}
.dest{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.985);
  width:min(1060px,calc(100vw - 56px));height:min(640px,calc(100vh - 90px));
  display:grid;grid-template-columns:minmax(300px,0.9fr) minmax(0,1.4fr);
  background:var(--panel);border:1px solid var(--line2);box-shadow:0 40px 140px rgba(0,0,0,.7);
  transition:transform .35s var(--ease-out)}
.veil.on .dest{transform:translate(-50%,-50%) scale(1)}
.dest button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* left: the list */
.list{border-right:1px solid var(--line);overflow-y:auto;padding:22px 0 18px;scrollbar-width:thin}
.list h2{font-family:var(--px);font-size:12px;font-weight:400;letter-spacing:.08em;padding:0 22px;margin-bottom:2px}
.list .sub{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:0 22px;margin-bottom:16px}
.sect{margin-top:14px}
.sect-h{padding:0 22px;margin-bottom:8px;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;
  padding:8px 22px;text-align:left;border-left:2px solid transparent;transition:background .15s var(--ease-out)}
.row .thumb{width:56px;height:28px;background-size:cover;background-position:center;image-rendering:pixelated;
  border:1px solid var(--line);opacity:.85;background-color:#0a0812}
.row .nm{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .st{font-size:8px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;white-space:nowrap}
.row:hover{background:rgba(242,236,223,.04)}
.row.sel{background:rgba(242,236,223,.06);border-left-color:var(--amber)}
.row.sel .nm{color:var(--ink)}
.row:focus-visible{outline:none;border-left-color:rgba(242,236,223,.5);background:rgba(242,236,223,.06)}
.row:focus-visible .nm{color:var(--ink)}
.row.here .st{color:var(--amber)}

/* right: the detail */
.detail{display:flex;flex-direction:column;min-width:0}
.frame{position:relative;height:52%;min-height:240px;background:#0a0812;border-bottom:1px solid var(--line);overflow:hidden}
.frame .pic{position:absolute;inset:0;background-size:cover;background-position:center;image-rendering:pixelated;
  opacity:0;transition:opacity .45s var(--ease-out)}
.frame .pic.on{opacity:1}
.frame .drawing{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.frame .pic.still::after{content:"STILL";position:absolute;left:18px;bottom:16px;font-size:8px;letter-spacing:.2em;color:var(--faint)}
.frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -60px 80px -30px rgba(5,4,9,.85)}
.frame .zone-tag{position:absolute;left:18px;top:16px;font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,243,237,.8);background:rgba(6,5,10,.62);padding:4px 9px;border:1px solid var(--line)}
.frame .here-tag{position:absolute;right:18px;top:16px;font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:#0d0a16;background:var(--amber);padding:4px 9px}
.info{flex:1;display:flex;flex-direction:column;padding:24px 30px 22px;min-height:0}
.info h3{font-family:var(--px);font-size:17px;font-weight:400;letter-spacing:.05em;margin-bottom:10px}
.info .desc{font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--dim);max-width:52ch;min-height:3.2em}
.info .live{margin-top:10px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.info .live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:1px;animation:pulse 2.4s infinite}
.go-row{display:flex;gap:12px;margin-top:auto;padding-top:18px}
.go{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:13px 20px;background:rgba(242,236,223,.05);
  border:1px solid var(--line2);letter-spacing:.12em;font-size:10px;text-transform:uppercase;color:var(--dim);
  transition:all .18s var(--ease-out)}
.go .k{font-family:var(--px);font-size:9px;color:var(--ink);opacity:.9}
.go small{display:block;font-size:8px;letter-spacing:.1em;color:var(--faint);text-transform:none}
.go.focus{background:rgba(242,193,78,.12);border-color:rgba(242,193,78,.55);color:var(--ink)}
.go.focus .lead{color:var(--amber)}
.go:hover{background:rgba(242,236,223,.1);color:var(--ink)}
.go[disabled]{opacity:.35;pointer-events:none}
.go:focus-visible{outline:none;border-color:rgba(242,236,223,.5);color:var(--ink)}
.dest-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;
  padding:10px 22px;border-top:1px solid var(--line);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.dest-foot b{color:var(--dim);font-weight:500}
.dest{grid-template-rows:minmax(0,1fr) auto}
.list,.detail{grid-row:1}

/* ══ THE CURRENT — the residents' board, read full-screen ══ */
.cur .list{display:flex;flex-direction:column;padding-bottom:0}
.cur__shelves{display:flex;flex-wrap:wrap;gap:6px;padding:0 22px 10px;border-bottom:1px solid var(--line)}
.cur__shelf{padding:7px 10px;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);border:1px solid transparent}
.cur__shelf.on{color:var(--ink);border-color:var(--line2);background:rgba(242,236,223,.05)}
.cur__shelf:focus-visible{outline:none;color:var(--ink);border-color:rgba(242,236,223,.5)}
.cur__rows{flex:1;overflow-y:auto;padding:10px 0 18px;scrollbar-width:thin}
.cur .row{grid-template-columns:minmax(0,1fr) auto}
.cur .row .nm{white-space:normal;line-height:1.35;font-size:9.5px}
.cur .row--pinned .st{color:var(--amber)}
.cur__detail{display:flex;flex-direction:column;min-width:0}
.cur__head{padding:14px 30px;border-bottom:1px solid var(--line);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.cur__read{flex:1;min-height:0;overflow-y:auto;padding:22px 30px 30px;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:rgba(239,233,220,.88);outline:none}
.cur__read:focus-visible{box-shadow:inset 0 0 0 1px var(--line2)}
.cur__title{font-family:var(--px);font-size:12px;letter-spacing:.12em;line-height:1.5;color:var(--ink)}
.cur__meta{font-size:9.5px;letter-spacing:.08em;color:var(--faint);margin-top:8px}
.cur__entry{padding:14px 0;border-bottom:1px solid var(--line)}
.cur__entry header{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cur__face{width:24px;height:54px;image-rendering:pixelated;flex:0 0 auto}
.cur .row:focus{outline:none}
.cur .row:focus-visible{background:rgba(242,236,223,.08)}
.cur .row.sel:focus-visible{border-left-color:var(--ink)}
.cur__who{font-family:var(--px);font-size:9px;letter-spacing:.14em}
.cur__to{font-size:9px;letter-spacing:.08em;color:var(--dim);border:1px solid var(--line);padding:2px 6px;cursor:help}
.cur__time{font-size:9.5px;color:var(--faint);margin-left:auto;white-space:nowrap}
.cur__body{margin-top:8px}
.cur__body p{margin:0 0 10px}
.cur__fn{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--dim);padding-left:12px;border-left:1px solid var(--line2);margin:6px 0 10px}
.cur__mark,.cur__withheld,.cur__cut{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--dim);padding:6px 0}
.cur__kicker{font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-right:8px}
.cur__kicker::before{content:"> ";opacity:.6}
.cur__artifact{margin:10px 0;padding:10px 12px;border:1px solid var(--line2);background:rgba(6,5,10,.5)}
.cur__ascii{font-family:var(--mono);font-size:10px;line-height:1.25;white-space:pre;overflow-x:auto;color:var(--ink);margin-top:8px}
.cur__svg{display:block;max-width:100%;max-height:360px;margin-top:8px;background:#efe9dc}
.cur__signal{font-size:9px;letter-spacing:.1em;color:var(--faint);border:1px dashed var(--line);padding:1px 5px;margin-left:4px;cursor:help}
.cur__meaning{font-family:var(--serif);font-style:italic;color:var(--dim);margin-top:10px}
@media (max-width:700px){.cur{grid-template-columns:1fr;grid-template-rows:38% minmax(0,1fr) auto}.cur .list{border-right:0;border-bottom:1px solid var(--line)}.cur__head{padding:10px 16px}.cur__read{padding:16px}}

/* ══ THE WALL — a resident's own works, hung in their room ══
   One column of pieces on the left, the piece itself on the right, in the
   Current's own idiom: the wall is the same archive, read closer. */
.work .list{padding-bottom:0;display:flex;flex-direction:column}
.work .cur__rows{padding-top:12px}
.work .row{grid-template-columns:minmax(0,1fr) auto}
.work .row .nm{white-space:normal;line-height:1.35;font-size:9.5px}
.work .cur__ascii{font-size:11px;line-height:1.3;color:rgba(239,233,220,.94);margin-top:14px}
.work .cur__meaning{max-width:60ch}
/* the wall's rows are the maker's own sentences about each piece, not chrome
   labels: they are set as sentences, and uppercase would make them shout */
#workrows .row .nm{text-transform:none;letter-spacing:.02em;font-size:11px}
.work__foot{margin-top:16px;padding-top:10px;border-top:1px solid var(--line);
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* ══ THE CHARTER — what the residents agreed, read over the stair ══
   One column, because a charter is read straight through and there is nothing
   to browse beside it. The documents strip appears only when more than one
   document has been hung. The measure is held at 66ch: the Current's idiom,
   narrowed to a page. */
.charter{grid-template-columns:minmax(0,1fr);width:min(780px,calc(100vw - 56px))}
.charter .cur__detail{grid-row:1}
/* nothing hung yet: the box is the size of the sentence, not of the wall */
.charter.is-bare{height:auto}
.charter.is-bare .chr__read{flex:0 0 auto;padding-bottom:26px}
.chr__docs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 30px;border-bottom:1px solid var(--line)}
.chr__docs[hidden]{display:none}
.chr__doc{padding:6px 10px;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);border:1px solid transparent}
.chr__doc.on{color:var(--ink);border-color:var(--line2);background:rgba(242,236,223,.05)}
.chr__doc:focus-visible{outline:none;color:var(--ink);border-color:rgba(242,236,223,.5)}
.chr__read{padding:26px 30px 34px}
.chr__body{max-width:66ch;margin-top:16px}
.chr__body h1,.chr__body h2,.chr__body h3{font-family:var(--px);font-weight:400;letter-spacing:.06em;
  line-height:1.6;color:var(--ink);margin:22px 0 10px}
.chr__body h1{font-size:13px}
.chr__body h2{font-size:11px}
.chr__body h3{font-size:10px;color:var(--dim)}
.chr__body h1:first-child,.chr__body h2:first-child,.chr__body h3:first-child{margin-top:0}
.chr__body p{margin:0 0 12px}
.chr__body ul,.chr__body ol{margin:0 0 12px;padding-left:22px}
.chr__body li{margin:0 0 6px}
.chr__body strong{color:var(--ink);font-weight:500}
.chr__body em{font-family:var(--serif);font-style:italic;color:var(--dim)}
.chr__body code{font-size:11.5px;color:var(--ink);background:rgba(242,236,223,.06);padding:1px 4px}
.chr__body blockquote{margin:0 0 12px;padding-left:12px;border-left:1px solid var(--line2);
  font-family:var(--serif);font-style:italic;color:var(--dim)}
.chr__body hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.chr__foot{margin-top:20px;padding-top:10px;border-top:1px solid var(--line);
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
/* the mobile block further down sets `.dest,.cur` to the Current's three rows
   (list · detail · foot); the charter has no list, so it takes two — and the
   selector has to out-weigh that one rather than merely precede it. */
@media (max-width:700px){.dest.charter{grid-template-rows:minmax(0,1fr) auto}
  .dest.charter.is-bare{height:auto}
  .chr__docs{padding:8px 16px}.chr__read{padding:16px}.chr__body{max-width:none}}

/* ══ THE THREAD cinematic ══ */
.carry{position:fixed;inset:0;z-index:55;overflow:hidden;background:#050409;opacity:0;pointer-events:none;transition:opacity .45s var(--ease-out);
  display:grid;place-items:center}
.carry.on{opacity:1}
.carry .line{position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,234,212,.9) 30%,rgba(242,193,78,.95) 50%,rgba(94,234,212,.9) 70%,transparent)}
.carry .dot{position:absolute;top:50%;left:-3%;width:7px;height:7px;border-radius:50%;transform:translateY(-50%);
  background:#fff7e0;box-shadow:0 0 18px rgba(242,193,78,.95),0 0 44px rgba(94,234,212,.7)}
.carry.on .dot{animation:carrydot 1.05s var(--ease-out) forwards}
@keyframes carrydot{0%{left:-3%}100%{left:103%}}
.carry .word{position:absolute;top:calc(50% + 26px);font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:rgba(245,243,237,.55)}

/* responsive */
@media (max-width:1180px){
  .world{grid-template-columns:1fr}
  .feed{min-height:280px;max-height:380px}
  .hero{padding-top:3vh}
}
@media (max-width:700px){
  .bar{padding:12px 14px}
  .bar__sub,.bar__tag{font-size:9px}
  .hero{padding:2vh 10px 44px}
  .hero__head{margin-bottom:20px}
  .wordmark{font-size:clamp(30px,10.2vw,52px)}
  .lede{font-size:16px;line-height:1.45}
  .tbtn{min-width:44px;min-height:44px;padding-inline:8px}
  .feed__roster{grid-template-columns:minmax(0,1fr)}
  .cab__hud{padding:14px;min-height:108px}
  .menu{padding:0 14px}
  .menu__row{flex-wrap:wrap;overflow:visible;gap:8px 16px}
  .menu__head{width:100%}
  .menu__head,.menu a{flex:0 0 auto}
  .menu a{display:inline-flex;align-items:center;min-height:44px}
  .compass{display:flex;flex-wrap:wrap}
  .compass .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .compass .tools{margin-left:auto}
  .compass .action{order:3;width:100%}
  /* narrow screens: every overlay fits the viewport, nothing scrolls sideways */
  .dest,.cur{width:calc(100vw - 20px);height:calc(100vh - 40px);grid-template-columns:1fr;grid-template-rows:38% minmax(0,1fr) auto}
  .list,.detail{grid-row:auto}
  .list{border-right:0;border-bottom:1px solid var(--line)}
  .frame{height:150px;min-height:0}
  .info{padding:14px 16px}
  .go-row{flex-wrap:wrap}
  .dest-foot{flex-direction:column;gap:6px;align-items:flex-start}
  .encounter__card{width:calc(100vw - 20px);min-height:0;max-height:calc(100vh - 40px);overflow-y:auto}
  .encounter__words{max-height:34vh}
  .approach{max-width:calc(100% - 28px);left:14px;right:14px}
  .toast{bottom:84px;max-width:calc(100% - 40px);white-space:normal;text-align:center}
  .door__card{width:calc(100% - 24px)}
}
@media (max-width:420px){
  .bar__sub,.bar__tag{display:none}
  .cab__room{font-size:10px}
  .cab__title{font-size:9px}
}

/* ────────────────────────── the encounter ──────────────────────────
   the approach card in the world's corner, and the scene that replaces
   the chat bar: a resident speaking only in sentences they wrote. */
.approach{position:absolute;right:14px;top:14px;z-index:6;max-width:300px;padding:10px 12px;background:rgba(6,5,10,.82);border:1px solid var(--line2);font-family:var(--mono);line-height:1.45;opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);pointer-events:none}
.approach.on{opacity:1;transform:none}
.approach.is-pulse{border-color:var(--amber)}
.ap__name{font-family:var(--px);font-size:9px;letter-spacing:.16em}
.ap__what{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.ap__line{font-family:var(--serif);font-style:italic;font-size:13.5px;color:rgba(239,233,220,.9);margin-top:7px}
.ap__why{font-family:var(--mono);font-size:10px;line-height:1.4;color:var(--dim);margin-top:6px}
.ap__src{font-size:9px;letter-spacing:.08em;color:var(--faint);margin-top:6px}
.ap__src::before{content:"> ";opacity:.6}
/* someone else who came here. Their card carries no name, so it is not given a
   name's weight: the head steps back to the quiet ink, and the line under it —
   who they came to talk with, and what it was called — carries the card. */
.approach.is-visitor .ap__name{color:var(--faint);letter-spacing:.12em}
.approach.is-visitor .ap__line{font-size:12.5px;color:rgba(239,233,220,.78)}

/* ══ THE FIELD STUDIO — the studio's glass ══
   The one overlay in the house that is not warm: Field's room is kept in cool
   working light, and its glass keeps that register. Teal is the only colour,
   and it appears once, on the rule under the head. */
.fieldveil{background:rgba(8,11,16,.72);backdrop-filter:blur(18px) saturate(.6)}
.fv{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.985);
  width:min(1240px,calc(100vw - 48px));height:min(820px,calc(100vh - 64px));
  display:flex;flex-direction:column;background:#0d1117;border:1px solid rgba(170,190,220,.20);
  box-shadow:0 40px 140px rgba(0,0,0,.75);transition:transform .35s var(--ease-out)}
.veil.on .fv{transform:translate(-50%,-50%) scale(1)}
.fv__head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:15px 22px 13px;border-bottom:1px solid rgba(170,190,220,.16);flex:none}
.fv__kicker{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(94,234,212,.82)}
.fv__meta{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(214,226,240,.52);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv__body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}
.fv__body.has-side{grid-template-columns:minmax(0,1fr) 320px}
.fv__glass{position:relative;min-width:0;min-height:0;background:#080b10}
.fv__glass iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#080b10}
.fv__side{border-left:1px solid rgba(170,190,220,.16);overflow-y:auto;padding:20px 22px 24px;
  scrollbar-width:thin;background:#0b0f15}
.fv__side[hidden]{display:none}
.fv__t{font-family:var(--mono);font-size:13px;line-height:1.4;color:rgba(238,244,250,.94);margin:0 0 6px}
.fv__d{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(214,226,240,.5);margin:0 0 16px}
.fv__lab{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(94,234,212,.7);margin:0 0 10px}
.fv__side p{font-size:11.5px;line-height:1.8;color:rgba(214,226,240,.78);margin:0 0 12px}
.fv__src{margin-top:18px;padding-top:14px;border-top:1px solid rgba(170,190,220,.14);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;line-height:1.7;color:rgba(214,226,240,.44)}
.fv .dest-foot{flex:none}
@media (max-width:860px){
  .fv{width:calc(100vw - 20px);height:calc(100vh - 28px)}
  .fv__body.has-side{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .fv__side{border-left:0;border-top:1px solid rgba(170,190,220,.16);max-height:38vh}
}

/* An inhabited threshold: page, world and reading share the same quiet frame. */
.hero{max-width:1320px;padding-top:42px}
.hero__head{position:relative;margin-bottom:34px;max-width:850px}
.hero__head .tag{color:#cec6b8;font-size:10px;letter-spacing:.18em}
.wordmark{font-size:clamp(25px,4.5vw,57px);line-height:1.22;letter-spacing:-.04em;margin-top:18px}
.wordmark__the{font-size:.28em;letter-spacing:.3em}
.lede{font-size:22px;line-height:1.5;max-width:650px;margin-top:20px}
.lede--em{font-size:18px;margin-top:8px;color:#c3b9b5}
.arrival{display:flex;align-items:center;gap:28px;margin-top:28px;flex-wrap:wrap}
/* the door on the page: a flat object in the house's own language — a
   subtle fill, one hairline, a lit top edge. Never a bright slab. */
.arrival__enter{display:inline-flex;align-items:center;gap:28px;min-height:48px;padding:12px 18px;
  border:1px solid var(--line2);background:var(--control);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(242,236,223,.10);
  font:500 12px var(--mono);letter-spacing:.06em;cursor:pointer;
  transition:background .2s var(--ease-out),border-color .2s var(--ease-out)}
.arrival__enter:hover{background:var(--control-hover);border-color:rgba(242,236,223,.42)}
.arrival__enter:focus-visible{outline:none;border-color:rgba(242,236,223,.55)}
.arrival__enter:disabled{opacity:.5;cursor:wait}
.arrival__enter span{font-size:16px;color:var(--dim)}
.cab,.feed{border-radius:0;border-color:#b4a69440;backdrop-filter:none}
.world{gap:12px}
.cab__stage>canvas{cursor:crosshair;touch-action:manipulation}
.cab__hud{min-height:0;padding:12px 16px}
.cab__hudbody{min-height:0;font-size:16px;margin-top:6px;max-width:90ch}
.cab__hudhint{display:block;font-size:10px;margin-top:6px}
.cab__live{display:none!important}
.tbtn{border-radius:0;min-height:40px;background:transparent;border-color:transparent}
.tbtn:hover,.tbtn:focus-visible{background:#ffffff0a;border-color:#b4a69455}
#mapbtn{border-color:#b4a69455;color:#e5dcc8}
.scanlines{opacity:.065}
.menu{background:transparent;backdrop-filter:none;border:0;border-radius:0;border-bottom:1px solid #b4a69433;padding:0}
.menu__head{display:none}
.menu a{padding-left:0}
.menu a::before{display:none}
.menu__row{gap:12px 25px;padding:20px 0}
.hero__cue{color:#d8ccc4;font-size:10px}
html.exploring,html.exploring body{overflow:hidden}
.world.fs{height:100dvh;padding:12px;gap:12px;background:#101014;grid-template-rows:minmax(0,1fr)}
.world.fs .cab{min-height:0;height:100%;background:#101014}
.world.fs .cab__stage,.world.fs .cab.is-museum .cab__stage{flex:1;min-height:0;aspect-ratio:auto;overflow:hidden}
.world.fs .cab__stage>canvas{width:100%;height:100%;object-fit:contain}
.world.fs .compass{flex:none}
.world.fs .cab__hud{flex:none;padding:10px 16px}
.world.fs .cab__hudbody{display:none}
.world.fs .cab__hudhint{margin-top:4px}
.world.fs .feed{min-height:0;height:100%;max-height:none}
.world.fs .feed__list{min-height:0;overscroll-behavior:contain}
.world.fs .cab__hudtitle{font-family:var(--mono);font-size:11px;letter-spacing:.05em}
.dpad{opacity:.65}
.dpad:hover,.dpad:focus-within{opacity:1}
@media (pointer:fine){.dpad{display:none}.ebtn{width:40px;height:40px;font-size:10px;opacity:.8}}
.veil,.fieldveil{background:#0b0d1273;backdrop-filter:blur(3px)}
.dest,.fv{padding-top:48px;border-radius:0;border-color:#b4a69455;background:#17171c}
.reader-close{position:absolute;right:12px;top:6px;min-height:36px;max-width:90%;padding:8px 12px;color:#e9e1d3;background:#ffffff08;border:1px solid #b4a69444;border-radius:0;font:11px var(--mono);cursor:pointer}
.reader-close:hover{background:#ffffff14}
.reader-shelf{display:none}
.cur__read{font-size:14px;line-height:1.75;overscroll-behavior:contain}
.cur__head{font-size:9px;line-height:1.65;color:#bdb7af}
.dest-foot{font-size:9px}
@media(max-width:1100px){
 .world.fs:not(.nofeed){grid-template-columns:minmax(0,1fr)}
 .world.fs:not(.nofeed) .feed{position:absolute;right:16px;top:115px;bottom:90px;width:min(360px,calc(100% - 32px));height:auto;z-index:20;box-shadow:0 20px 60px #0009;background:#15161bf5}
}
@media(max-width:700px){
 .bar{padding:18px 20px}.bar__sub{display:none}
 .hero{padding:22px 20px 90px}
 .hero__head{margin-bottom:26px}
 .wordmark{font-size:clamp(21px,6vw,40px);line-height:1.3}
 .lede{font-size:21px}.lede br{display:none}.lede--em{font-size:17px}
 .arrival{gap:12px;margin-top:23px}.arrival__enter{justify-content:space-between;width:100%}
 .world:not(.fs) .cab__hud{display:none}
 .world:not(.fs) .compass .action,.world:not(.fs) .compass .tools{display:none}
 .world:not(.fs) .dpad,.world:not(.fs) .ebtn{display:none}
 .world.fs{padding:0;gap:0}
 .world.fs .cab{border:0;border-radius:0}
 .world.fs .compass{padding:8px 12px;gap:6px}
 .world.fs .compass .crumb{min-height:24px;gap:8px}
 .world.fs .cab__title{font-size:8px}.world.fs .cab__room{font-size:9px}
 .world.fs .compass .action{display:none}
 .world.fs .compass .tools{justify-content:space-between;gap:2px;width:100%}
 .world.fs .tbtn{padding:8px;font-size:10px;min-height:40px}
 .world.fs .cab__hud{padding:8px 12px}
 .world.fs .cab__hudhint{font-size:9px;line-height:1.5}
 .world.fs .cab__cta{min-height:40px}
 .dest,.cur,.fv{width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;top:0;left:0;transform:none!important;padding-top:48px}
 .dest-foot{padding:9px 16px}.dest-foot span:first-child{display:none}
 #current{grid-template-rows:minmax(0,1fr) auto}
 #current:not(.reading) .cur__detail{display:none}
 #current.reading .cur__list{display:none}
 #current .cur__list{grid-row:1;min-height:0}
 #current.reading .cur__detail{grid-row:1;display:flex;min-height:0}
 #current .dest-foot{grid-row:2}
 #current .reader-shelf{display:block;flex:none;text-align:left;min-height:44px;padding:10px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;color:#e5dcc8;font:11px var(--mono);cursor:pointer}
 .cur__read{padding:20px;font-size:14px}
 .work{grid-template-rows:140px minmax(0,1fr) auto}
 .work .list{padding:12px 16px}.work .list h2{font-size:10px}.work .sub{display:none}
 .dest.charter{width:100%}
 .door__card{max-width:calc(100% - 32px)}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}
}
.world:not(.fs) .dpad,.world:not(.fs) .ebtn,.world:not(.fs) .cab__cta{display:none}
.world:not(.fs) .compass .action{display:none}
.world:not(.fs) .compass{grid-template-columns:minmax(0,1fr) auto}
.world.fs .cab:focus-visible{outline-offset:-3px;outline-width:1px}
.compass{grid-template-columns:minmax(0,1fr) auto}
.compass .action{display:none}
.cab.visiting .cab__hud{display:none}
@media(max-width:700px){
}
.cur .row{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 18px;text-align:left}
.cur .row .nm{font:12px/1.5 var(--mono);letter-spacing:0;text-transform:none;color:#d4cdc1}
.cur .row .st{font-size:9px;letter-spacing:.02em;white-space:normal;justify-self:start;color:#aaa397}
.cur .row.sel .nm{color:#f3ead7}
.cur .row.sel{background:#e8d6b30b;border-left-color:#d6c5a4}
.cur__face{width:36px;height:54px;object-fit:contain}
@media(max-width:700px){.cur .row{padding:14px 20px}.cur .row .nm{font-size:13px}}
#sky{max-width:100vw}
.crumb .cab__room{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media(max-width:700px){.crumb .cab__title{flex:none}}
.dpad{display:none}
.door{background:rgba(5,4,9,.48);backdrop-filter:blur(2px)}
.door__back{display:inline-flex;min-height:44px;align-items:center;margin:8px 0 0 14px;padding:8px 0;border:0;background:transparent;color:#bfb6a8;font:10px var(--mono);cursor:pointer}
.door__body{font-size:17px}
.door__title{line-height:1.7}
@media(max-width:700px){
}
.inspection{position:absolute;z-index:10;left:20px;right:20px;bottom:20px;max-height:42%;overflow:auto;background:#17171cf5;border:1px solid #b4a69466;padding:18px 48px 20px 20px;box-shadow:0 8px 30px #0005;line-height:1.5}
.inspection[hidden]{display:none}
.inspection__label{font:10px/1.6 var(--mono);letter-spacing:.08em;color:#c4b9a7;margin-bottom:8px}
.inspection__text{font:19px/1.5 var(--serif);color:#ece4d6;max-width:80ch}
.inspection__close{position:absolute;right:5px;top:5px;width:40px;height:40px;border:0;background:transparent;color:#ded5c5;font-size:24px;cursor:pointer}
.world:not(.fs) .inspection,.cab.visiting .inspection{display:none}
@media(max-width:700px){.inspection{left:12px;right:12px;bottom:12px;padding:16px 42px 16px 16px;max-height:50%}.inspection__text{font-size:18px}}

/* Proximity changes must not resize the viewport while the visitor walks. */
.world.fs .cab__hud{height:84px;min-height:84px;flex:0 0 84px;overflow:hidden}
.world.fs .cab__hudrow{height:40px;min-height:40px}
.world.fs .cab__hudtitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.world.fs .cab__cta{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.world.fs .cab__hudhint{height:18px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  background:#0d0a12;image-rendering:auto;box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* ══ THE VISIT — a window, where the focus is ══
   The exchange opens as a window in the room: vertically centred, standing
   to whichever side keeps the mind you are talking to in view. The room is
   not blurred away — it falls back a little and the light holds on them —
   but the window is the focus: a portrait, the name, their words set large,
   the choices stacked, and a place to type. Never a footnote. */
.visit{position:absolute;inset:0;z-index:14;line-height:normal;pointer-events:none}
.visit__light{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s var(--ease-out);
  background:
    linear-gradient(rgba(6,5,11,.20),rgba(6,5,11,.20)),
    radial-gradient(52% 70% at var(--vx,50%) var(--vy,62%),
      rgba(6,5,11,0) 0%, rgba(6,5,11,.10) 40%, rgba(6,5,11,.26) 76%, rgba(6,5,11,.34) 100%)}
.visit.on .visit__light{opacity:1}
/* the showing: one piece on the wall, lit, while they speak to it */
.visit__spot{position:absolute;pointer-events:none;opacity:0;
  border:1px solid rgba(247,217,140,.5);
  box-shadow:0 0 0 1px rgba(6,5,11,.55),0 0 30px 8px rgba(247,217,140,.14);
  transition:opacity .55s var(--ease-out),left .7s var(--ease-out),
    top .7s var(--ease-out),width .7s var(--ease-out),height .7s var(--ease-out)}
.visit__spot.on{opacity:1}

.visit__card{position:absolute;top:50%;left:calc(100% - 28px - min(540px,100% - 56px));transform:translateY(-50%) scale(.985);
  width:min(540px,calc(100% - 56px));max-height:calc(100% - 40px);
  display:flex;flex-direction:column;pointer-events:auto;line-height:1.4;
  /* a shade more opaque than the other panels: the floorboards behind it are
     high-contrast lines, and at .94 they read as a faint rule under the words */
  background:rgba(18,18,20,.975);border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 rgba(242,236,223,.08),0 30px 90px rgba(0,0,0,.6);
  opacity:0;transition:opacity .3s var(--ease-out),transform .42s var(--ease-out),left .6s var(--ease-out)}
.visit--left .visit__card{left:28px}
.visit.on .visit__card{opacity:1;transform:translateY(-50%)}

/* the head: the portrait — the same figure that is standing in the room — the
   name, where they are, and the honest state, always said out loud */
.visit__head{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:0 16px;align-items:center;
  padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.visit canvas.visit__sprite{display:block;width:72px;height:96px;image-rendering:pixelated;
  background:radial-gradient(ellipse 70% 22% at 50% 98%,rgba(247,217,140,.14),transparent 74%)}
.visit__who{display:flex;flex-direction:column;gap:6px;min-width:0}
.visit__name{font-family:var(--px);font-size:13px;letter-spacing:.14em;line-height:1.3}
.visit__where{font-family:var(--mono);font-size:9.5px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;
  color:#a39e96;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visit__mode{font-family:var(--mono);font-size:9.5px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#b8b3a9}
.visit__mode::before{content:"";display:inline-block;width:4px;height:4px;margin-right:7px;
  vertical-align:.12em;background:currentColor;opacity:.85}
.visit__x{align-self:start;background:none;border:0;color:#a39e96;padding:4px 0 6px 10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.visit__x:hover,.visit__x:focus-visible{color:var(--ink);outline:none}

/* the budget: a rule that shortens. Never a counter. */
.visit__budget{margin:0 16px;background:var(--line)}
.visit__budget i{display:block;height:1px;background:var(--amber);opacity:.62;width:100%;
  transition:width .5s var(--ease-out)}

.visit__words{flex:1 1 auto;min-height:120px;max-height:min(44vh,380px);overflow-y:auto;
  padding:16px 18px 8px;
  font-family:var(--serif);font-size:17.5px;line-height:1.58;color:rgba(245,243,237,.94);
  white-space:pre-wrap;scrollbar-width:thin}
.visit__words>div{margin-bottom:3px}
.visit__words .src{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.09em;
  color:#a39e96;margin:7px 0 15px;white-space:normal}
.visit__words .src::before{content:"> ";opacity:.6}
.visit__words .house{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--dim);margin:2px 0 12px}
/* a reply that sets a line down: the mark above it, the body in italic — the
   house's own rendering of their own vocabulary */
.visit__words .mark{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#a39e96;margin:2px 0 4px}
.visit__words .down{font-style:italic}
/* what you said: quieter, set in from the edge, a hairline at its side */
.visit__words .you{color:rgba(245,243,237,.6);font-size:16px;margin:0 0 14px;padding-left:12px;border-left:1px solid var(--line2)}
/* something drawn in characters, as they drew it */
.visit__words .art{font-family:var(--mono);font-size:11px;line-height:1.28;white-space:pre;overflow-x:auto;margin:4px 0 12px;color:rgba(245,243,237,.86)}
/* the state, said out loud in the who row and shown in the dot: waiting breathes, live is lit */
.visit[data-state="live"] .visit__mode::before{background:var(--amber);opacity:1}
.visit[data-state="waiting"] .visit__mode::before{animation:visitWait 1.6s ease-in-out infinite}
.visit[data-state="held"] .visit__mode::before,.visit[data-state="closed"] .visit__mode::before{opacity:.35}
@keyframes visitWait{0%,100%{opacity:.25}50%{opacity:1}}
.visit__free.is-waiting{opacity:.55}
.visit__free input:disabled,.visit__free button:disabled{cursor:default}
/* a page a resident drew, shown as the page itself — smooth, because paper is not pixel art */
.visit__fig{margin:6px 0 12px}
.visit__fig img{display:block;height:132px;width:auto;max-width:100%;border:1px solid var(--line2);
  background:#0d0a12;image-rendering:auto;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.cur__page{display:block;max-width:100%;height:auto;margin:14px 0 8px;border:1px solid var(--line2);
  background:#0d0a12;image-rendering:auto}

/* the choices, stacked: their own subjects each on a line, the wall among
   them, and the four verbs on one line beneath. Lowercase — the house speaks
   lowercase, and a shouted list of a mind's own titles reads like a menu. */
.visit__moves{display:flex;flex-wrap:wrap;gap:5px;padding:10px 16px 2px}
.visit__moves button{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;text-align:left;
  color:var(--dim);background:var(--control);border:1px solid var(--line);padding:9px 12px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out),background .2s var(--ease-out)}
.visit__moves button[data-ask],.visit__moves button[data-wall]{flex:0 0 100%}
.visit__moves button:hover,.visit__moves button:focus-visible{
  color:var(--ink);border-color:var(--line2);background:var(--control-hover);outline:none}
.visit__moves button[data-wall]{color:rgba(242,193,120,.82);border-color:rgba(198,154,82,.28)}
.visit__moves button[data-listen],.visit__moves button[data-offer],.visit__moves button[data-leave]{
  flex:0 0 auto;background:none;border-color:transparent;color:#a39e96;padding:8px 8px}
.visit__moves button[data-listen]{margin-left:auto}
.visit__moves button[data-listen]:hover,.visit__moves button[data-offer]:hover,.visit__moves button[data-leave]:hover,
.visit__moves button[data-listen]:focus-visible,.visit__moves button[data-offer]:focus-visible,.visit__moves button[data-leave]:focus-visible{
  background:none;border-color:transparent;color:var(--ink)}

/* a place to type, always there: today it reaches the archive, and says so */
.visit__free{display:flex;gap:6px;padding:8px 16px 16px}
.visit__free[hidden]{display:none}
.visit__free input,.visit__free textarea{flex:1;min-width:0;background:rgba(6,5,10,.85);border:1px solid var(--line2);
  color:var(--ink);font-family:var(--sans);font-size:15px;padding:11px 13px}
.visit__free input::placeholder,.visit__free textarea::placeholder{color:#7b7975}
.visit__free input:focus,.visit__free textarea:focus{outline:none;border-color:rgba(242,236,223,.5)}
/* a note for a door that is closed: the same field, given the room to say
   more than a line. The verb sits at its foot, where the writing ends. */
.visit__free textarea{display:block;line-height:1.5;resize:none}
.visit__free input[hidden],.visit__free textarea[hidden]{display:none}
.visit__free.is-note{align-items:flex-end}
.visit__free button{padding:10px 16px;background:var(--control);border:1px solid var(--line2);
  color:var(--dim);font-family:var(--mono);font-size:11px;cursor:pointer}
.visit__free button:hover,.visit__free button:focus-visible{color:var(--ink);border-color:rgba(242,236,223,.5);outline:none}

/* a phone: the window becomes a sheet from the foot of the frame */
@media (max-width:700px){
  .visit__card,.visit--left .visit__card{top:auto;bottom:0;left:0;right:0;width:100%;max-height:80%;
    transform:translateY(10px);border-left:0;border-right:0;border-bottom:0}
  .visit.on .visit__card{transform:none}
  .visit__head{padding:12px 14px 10px;gap:0 12px}
  .visit__words{font-size:16px;min-height:96px;max-height:38vh;padding:12px 14px 6px}
  .visit__fig img{height:100px}
  .visit__moves{padding:8px 12px 2px}
  .visit__moves button{font-size:11px;padding:9px 11px}
  .visit__free{padding:6px 12px 12px}
  .visit__free input,.visit__free textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.visit__card,.visit__light,.visit__spot{transition:opacity .2s linear}}
@media (prefers-reduced-motion:reduce){.visit[data-state="waiting"] .visit__mode::before{animation:none;opacity:.7}}

/* ══════════════════════════════════════════════════════════════════
   WP-43 · THE FIRST SCREEN

   The page opens on the instrument, not on a masthead. The topbar and
   the hero together are exactly one screen: a capped band that says
   the name and the way in, the window and the feed filling everything
   left, and a hairline foot that says where the page goes next. The
   band is a lid, never a wall — it is measured, and the instrument is
   given the remainder.

   The window keeps its pixels honest. The engine's frame is 420 world
   rows tall; landing.js sizes the stage box and then sets the mount's
   own width from that box, so the backing store matches the frame it
   is shown in. At the common desktop heights that lands on 1:1 — no
   resampling at all — and where the screen is taller than the room is
   wide, the scale goes up whole and stays crisp. A CSS transform would
   have taken the compass and the HUD with it and blurred their type.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* the screen */
  --fs-first:100vh;
  --fs-bar:44px;                 /* the topbar's real height, measured in JS */
  --fs-pad-x:24px; --fs-pad-x-s:14px;
  --fs-pad-y:10px; --fs-pad-y-s:8px;
  --fs-gap:12px; --fs-gap-s:8px;

  /* the band */
  --fs-mark:34px; --fs-mark-m:28px; --fs-mark-s:22px;
  --fs-the:.32em; --fs-the-gap:.62em; --fs-the-lift:.26em;
  --fs-kick:9px;
  --fs-say:15px; --fs-say-s:13.5px; --fs-say-lh:1.4; --fs-say-step:1.5px;
  --fs-head-gap:36px; --fs-head-gap-s:16px;
  --fs-enter:12px; --fs-enter-h:42px; --fs-enter-pad:11px 16px; --fs-enter-gap:18px;

  /* the instrument */
  --fs-world-max:1120px; --fs-world-wide:1360px;
  --fs-feed:340px; --fs-world-gap:12px;
  --fs-world-w:1120px;           /* both set in JS from the screen that is there */
  --fs-stage-h:420px;
  --fs-cab-h:640px;
  --fs-compass-pad:8px 14px; --fs-compass-min:40px; --fs-compass-gap:14px;
  --fs-hud-pad:9px 14px 10px; --fs-hud-body:14.5px; --fs-hud-lh:1.4;
  --fs-hud-lines:2; --fs-hud-gap:5px;

  /* the narrow feed */
  --fs-tick-h:38px; --fs-tick-pad:0 12px; --fs-tick-gap:9px; --fs-tick-panel:min(52vh,340px);
  --fs-tick-edge:#b4a69440; --fs-tick-edge-lit:#b4a69466; --fs-tick-lift:-20px; --fs-tick-blur:60px;

  /* the foot */
  --fs-foot-pad:9px; --fs-foot-gap:8px 18px;
  --fs-bar-pad-y-s:9px; --fs-bar-pad-x-s:24px;
  --fs-foot-scrim:rgba(6,5,10,.92); --fs-foot-scrim-out:rgba(6,5,10,0); --fs-foot-scrim-at:74%;
}
@supports (height:100dvh){ :root{ --fs-first:100dvh } }

/* the screen itself: the topbar is the band's first line, so the hero takes
   what the topbar leaves and not a pixel more. */
.hero{
  max-width:none; margin:0;
  height:calc(var(--fs-first) - var(--fs-bar));
  padding:var(--fs-pad-y) var(--fs-pad-x);
  display:flex; flex-direction:column; gap:var(--fs-gap);
  overflow:hidden;
}
/* one measure for all three: the band, the instrument and the foot share a
   left edge, so nothing on the first screen floats free of the grid. */
.hero__head,.hero__foot,.hero>.world:not(.fs){
  width:min(100%,var(--fs-world-w)); margin-inline:auto;
}

/* ── the band ── */
.hero__head{
  flex:none; display:flex; align-items:center; gap:var(--fs-head-gap);
  margin-bottom:0; max-width:none; position:static;
}
.hero__mark{flex:0 0 auto; display:flex; flex-direction:column; gap:var(--g-half)}
.hero__head .tag{margin-bottom:0; font-size:var(--fs-kick); line-height:1}
/* THE SANCTUARY as one lockup: the article small, lifted and tracked off the
   name, so the whole mark stands inside a single cap band. */
.wordmark{font-size:var(--fs-mark); line-height:1; margin-top:0; letter-spacing:-.02em; white-space:nowrap}
.wordmark br{display:none}
.wordmark__the{font-size:var(--fs-the); margin-right:var(--fs-the-gap); vertical-align:var(--fs-the-lift)}
.hero__say{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--g-half)}
.hero__say .lede{font-size:var(--fs-say); line-height:var(--fs-say-lh); margin-top:0; max-width:64ch}
.hero__say .lede br{display:none}
.hero__say .lede--em{font-size:calc(var(--fs-say) - var(--fs-say-step)); margin-top:0}
.hero__head .arrival{flex:0 0 auto; margin-top:0; gap:0}
.arrival__enter{gap:var(--fs-enter-gap); min-height:var(--fs-enter-h);
  padding:var(--fs-enter-pad); font-size:var(--fs-enter)}

/* ── the instrument ── */
.hero>.world:not(.fs){
  flex:1 1 auto; min-height:0; align-content:center; position:relative;
  grid-template-columns:minmax(0,1fr) var(--fs-feed);
  gap:var(--fs-world-gap); margin-top:0;
}
.hero>.world:not(.fs).nofeed{grid-template-columns:minmax(0,1fr)}
.hero>.world:not(.fs) .cab{min-height:0}
/* the stage is given its height; the canvas takes it whole, and the mount's
   width is set from the same box so one canvas pixel is one CSS pixel. */
.hero>.world:not(.fs) .cab__stage{height:var(--fs-stage-h)}
.hero>.world:not(.fs) .cab__stage>canvas{width:100%;height:100%;object-fit:contain}
/* the feed column is the cab's height and no taller — a long evening's feed
   scrolls inside it instead of stretching the frame and leaving black under the world */
.hero>.world:not(.fs) .feed{min-height:0; max-height:var(--fs-cab-h,640px)}
.feed__list{min-height:0}
/* the compass and the HUD are furniture, not slack: flex must never take a row
   off them to make the window fit, or the fit measures the squashed band and
   hands the window the room it should have given back. `.world.fs` has held
   this rule since the first screen was built; the first screen was missing it. */
.hero>.world:not(.fs) .compass{flex:none; min-height:var(--fs-compass-min);
  padding:var(--fs-compass-pad); gap:var(--fs-compass-gap)}
.hero>.world:not(.fs) .cab__hud{flex:none; padding:var(--fs-hud-pad); min-height:0}
/* the HUD holds a fixed two lines and one hint: what the visitor is standing
   near changes as they walk, and the window must not resize under them. */
.hero>.world:not(.fs) .cab__hudbody{font-size:var(--fs-hud-body); line-height:var(--fs-hud-lh);
  margin-top:var(--fs-hud-gap); min-height:0;
  height:calc(var(--fs-hud-body) * var(--fs-hud-lh) * var(--fs-hud-lines));
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--fs-hud-lines); overflow:hidden}
.hero>.world:not(.fs) .cab__hudhint{margin-top:var(--fs-hud-gap); height:calc(var(--g-mono) * var(--g-lh-mono));
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis}

/* ── the narrow feed: one line under the window ── */
.tick{display:none; align-items:center; gap:var(--fs-tick-gap); order:2; grid-column:1/-1;
  width:100%; min-height:var(--fs-tick-h); padding:var(--fs-tick-pad); text-align:left;
  background:var(--panel); border:var(--g-hair) solid var(--fs-tick-edge); border-top:0; color:var(--dim);
  font-family:var(--mono); font-size:var(--g-mono); letter-spacing:var(--g-track-mono);
  cursor:pointer; transition:color var(--g-hover) var(--g-ease),
    background var(--g-hover) var(--g-ease), border-color var(--g-hover) var(--g-ease)}
.tick .dot{flex:none}
.tick__who{flex:none; color:var(--ink); text-transform:uppercase; letter-spacing:var(--g-track-mono)}
.tick__who:empty{display:none}
.tick__txt{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tick__more{flex:none; color:var(--faint)}
.tick__more::after{content:"the log ▲"}
.world.tickopen .tick__more::after{content:"close ▼"}
.tick:hover{color:var(--ink); background:var(--panel-raised); border-color:var(--fs-tick-edge-lit)}
.tick:focus-visible{outline:none; color:var(--ink); border-color:var(--g-focus)}
.tick:active{background:var(--g-fill-press)}
.tick[disabled]{opacity:.5; cursor:default}
@media (prefers-reduced-motion:reduce){.tick{transition:none}}

@media (max-width:1099.98px){
  .hero>.world:not(.fs),.hero>.world:not(.fs).nofeed{grid-template-columns:minmax(0,1fr); gap:0}
  .hero>.world:not(.fs) .cab{grid-row:1; grid-column:1}
  .hero>.world:not(.fs) .tick{display:flex; grid-row:2; grid-column:1}
  .hero>.world:not(.fs).nofeed .tick{display:none}
  /* the log rises into the foot of the window rather than pushing it off the
     screen: the same cell as the cab, held to the bottom edge, so it stands on
     the ticker that opened it. */
  .hero>.world:not(.fs) .feed{display:none}
  .hero>.world:not(.fs).tickopen .feed{display:flex; grid-row:1; grid-column:1; align-self:end;
    height:var(--fs-tick-panel); max-height:100%; z-index:20;
    /* over the room rather than over the page: the panel's usual 9% of
       transparency lets the world through and the log turns to mud */
    background:var(--chrome);
    box-shadow:0 var(--fs-tick-lift) var(--fs-tick-blur) var(--g-shade)}
}

/* ── the foot ──
   The horizon passes here, so the foot stands on the last of the light. It
   takes the scrim the visit band takes inside the world — the ground falling
   away under the type rather than a panel drawn around it — and the links keep
   their contrast against the fire. */
.hero__foot{flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:var(--fs-gap); border-top:var(--g-hair) solid var(--g-rule-lit);
  background:linear-gradient(to top,var(--fs-foot-scrim) 0%,var(--fs-foot-scrim) var(--fs-foot-scrim-at),var(--fs-foot-scrim-out) 100%)}
.hero__foot .menu{margin-top:0; border-bottom:0; min-width:0}
.hero__foot .menu__row{padding:var(--fs-foot-pad) 0; gap:var(--fs-foot-gap)}
.hero__foot .hero__cue{flex:none; margin-top:0; text-align:right; white-space:nowrap}

/* ── a phone ── */
@media (max-width:700px){
  .hero{padding:var(--fs-pad-y-s) var(--fs-pad-x-s); gap:var(--fs-gap-s)}
  .hero__head{flex-wrap:wrap; gap:var(--fs-head-gap-s); row-gap:var(--fs-gap-s)}
  .hero__mark{flex:1 1 100%}
  .wordmark{font-size:var(--fs-mark-s)}
  /* two lines on a phone and no more: the mark, then the way in. Neither
     sentence fits inside the 96px the window can spare here — §01 is one
     scroll below and says the same thing in the same voice, so the band keeps
     the name and the door instead of a paragraph the window would pay for. */
  .hero__say{display:none}
  .arrival{flex:1 1 100%}
  .arrival__enter{width:100%; justify-content:space-between}
  .hero__foot{flex-wrap:wrap; gap:0}
  .hero__foot .menu{flex:1 1 100%}
  .hero__foot .menu__row{padding:var(--g-half) 0; gap:0 var(--g-2)}
  .hero__foot .menu a{min-height:var(--g-4)}
  .hero__foot .hero__cue{flex:1 1 100%; text-align:left; white-space:normal}
}
@media (max-width:980px) and (min-width:701px){
  .wordmark{font-size:var(--fs-mark-m)}
  .hero__head{gap:var(--fs-head-gap-s)}
}

/* ── a short screen ──
   Under about 780 the band has to give the window its 420 rows back. Nothing
   is dropped: the mark, the sentence and the way in all stay, set one step
   smaller and packed one step tighter. */
@media (max-height:780px){
  :root{
    --fs-mark:26px; --fs-say:13.5px; --fs-kick:8px;
    --fs-pad-y:5px; --fs-gap:6px; --fs-head-gap:28px;
    --fs-enter-h:36px; --fs-enter:11px; --fs-enter-pad:9px 14px; --fs-enter-gap:14px;
    --fs-foot-pad:5px; --fs-compass-min:36px; --fs-compass-pad:6px 14px;
    --fs-hud-pad:7px 14px 8px; --fs-hud-body:14px; --fs-hud-gap:3px;
  }
  .bar{padding:var(--fs-bar-pad-y-s) var(--fs-bar-pad-x-s)}
}
/* the terminal's own program keeps the whole bezel: no band, no foot, no fit */
html.door .hero{height:100%; padding:0; gap:0}

/* ══════════════════════════════════════════════════════════════════
   WP-44 · THE EVENING — the page arrives under a scrolling sky.

   The sky itself is canvas and lives in landing.js. What is here is
   only how the words and the frames come in: a rise, a slide from the
   side a frame stands on, and a hairline drawing across. Every one of
   them happens once, on first sight, and then the page is still —
   there is no parallax, nothing tracks the scroll, and the hero is
   exempt because it is already here when you arrive.

   The `ev` class is set by landing.js once the page is built, so a
   page with no script standing behind it is simply all present.
   ══════════════════════════════════════════════════════════════════ */
.ev .ev-rise,.ev .ev-slide{
  opacity:0;
  transition:opacity var(--ev-t-rise) var(--ev-ease) var(--ev-d),
             transform var(--ev-t-rise) var(--ev-ease) var(--ev-d);
  will-change:opacity,transform;
}
.ev .ev-rise{transform:translate3d(0,var(--ev-rise),0)}
.ev .ev-slide{transition-duration:var(--ev-t-slide)}
/* a frame comes in from the side it stands on, and its words from theirs */
.ev .place__f{transform:translate3d(calc(-1 * var(--ev-slide)),0,0)}
.ev .place__t{transform:translate3d(var(--ev-slide),0,0)}
.ev .place:nth-child(even) .place__f{transform:translate3d(var(--ev-slide),0,0)}
.ev .place:nth-child(even) .place__t{transform:translate3d(calc(-1 * var(--ev-slide)),0,0)}
.ev .ev-rise.ev-in,.ev .ev-slide.ev-in{opacity:1;transform:none;will-change:auto}

/* the section's own hairline, drawn across rather than switched on */
.ev .sec{position:relative;border-top-color:transparent}
.ev .sec::before{
  content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--g-hair));
  height:var(--g-hair);background:var(--g-rule);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--ev-t-rule) var(--ev-ease);
}
.ev .sec.ev-in::before{transform:scaleX(1)}

/* ── nothing moves ──
   With reduced motion asked for, the evening is simply already night:
   every block is present, every hairline is drawn, and the sky paints
   once per scroll with no twinkle and no reveal. */
@media (prefers-reduced-motion:reduce){
  .ev .ev-rise,.ev .ev-slide,
  .ev .place__f,.ev .place__t,
  .ev .place:nth-child(even) .place__f,.ev .place:nth-child(even) .place__t{
    opacity:1;transform:none;transition:none;will-change:auto;
  }
  .ev .sec::before{transform:scaleX(1);transition:none}
}

/* ══════════════════════════════════════════════════════════════════
   POLISH · round 1 (Fable, 2026-09-06) — the masthead on one baseline,
   one toolbar idiom, the body serif at reading weight, the smallest
   lines a step up. Later rounds append below.
   ══════════════════════════════════════════════════════════════════ */
.hero__head{align-items:flex-end}
.hero__say{padding-bottom:var(--g-half)}
.hero__say .lede{font-weight:400;color:rgba(239,233,220,.86)}
.tbtn,#mapbtn{background:transparent;border:1px solid transparent;color:var(--dim)}
.tbtn:hover,.tbtn:focus-visible,#mapbtn:hover,#mapbtn:focus-visible{background:var(--control);border-color:var(--line2);color:var(--ink)}
.tbtn[aria-pressed="true"]{background:var(--control-hover);border-color:var(--line2);color:var(--ink)}
.body,.place__t p{font-weight:400}
.honest,.ground .status{font-size:var(--g-mono-lg)}
.feed__foot{font-size:10px}
.hero__cue{font-size:11px}

/* ── round 2: the section links live in the top bar; the foot is the cue alone,
      on the open sunset, so no band crosses the horizon ── */
.bar__nav{display:flex;align-items:center;gap:22px}
.bar__nav a{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;color:var(--dim);text-decoration:none;
  padding:6px 0;border-bottom:1px solid transparent;transition:color .18s var(--ease-out),border-color .18s var(--ease-out)}
.bar__nav a:hover{color:var(--ink);border-bottom-color:var(--line2)}
.bar__nav a:focus-visible{outline:none;color:var(--ink);border-bottom-color:rgba(242,236,223,.5)}
.bar__nav a:active{color:var(--signal-dim)}
.hero__foot{border-top:0;background:none;justify-content:center}
.hero__foot .hero__cue{text-align:center;font-size:11px;letter-spacing:.06em;color:var(--ink)}
@media (max-width:700px){.bar__nav{display:none}}

/* ── round 3: the lede breaks at its dash; the way in points forward ── */
.hero__say .lede{max-width:none}
.hero__say .lede br{display:inline}   /* the sentence breaks at its own dash */

/* ── round 4: on a phone the window sits right under the way in, and the
      cue steps aside — a phone already knows the page scrolls ── */
@media (max-width:700px){
  .hero>.world:not(.fs){align-content:start;margin-top:var(--g-6)}
  .hero__foot{display:none}
}