/* Erebus Ascendant. Site styles. Document pages keep their own styles under .wb, so nothing here styles a bare tag or a short class name. */
@font-face{font-family:'Cinzel';font-weight:500;font-display:swap;src:url('/assets/fonts/Cinzel-normal-500.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-weight:600;font-display:swap;src:url('/assets/fonts/Cinzel-normal-600.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:400;font-display:swap;src:url('/assets/fonts/EBGaramond-normal-400.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:500;font-display:swap;src:url('/assets/fonts/EBGaramond-normal-500.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/EBGaramond-italic-400.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:400;font-display:swap;src:url('/assets/fonts/SourceSerif4-normal-400.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/SourceSerif4-italic-400.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:600;font-display:swap;src:url('/assets/fonts/SourceSerif4-normal-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-weight:400;font-display:swap;src:url('/assets/fonts/IBMPlexSansCondensed-normal-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-weight:500;font-display:swap;src:url('/assets/fonts/IBMPlexSansCondensed-normal-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-weight:600;font-display:swap;src:url('/assets/fonts/IBMPlexSansCondensed-normal-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url('/assets/fonts/IBMPlexMono-normal-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url('/assets/fonts/IBMPlexMono-normal-500.woff2') format('woff2')}
@font-face{font-family:'Kristi';font-weight:400;font-display:swap;src:url('/assets/fonts/Kristi-normal-400.woff2') format('woff2')}

:root{
  --bg:#07080b;--bg2:#0d1016;--glass:rgba(11,13,18,.82);--line:rgba(200,165,90,.24);--line2:rgba(255,255,255,.09);
  --gold:#c8a55a;--gold-hi:#f1dfae;--bone:#ece6d6;--mute:#9aa0a8;--dim:#646a73;--crim:#b3262f;--thread:#d8404c;--steel:#7fa6c9;--cold:#5aa3cf;--ember:#e0703a;--green:#6fae8e;
  --caps:'Cinzel',Georgia,serif;--serif:'EB Garamond','Source Serif 4',Georgia,serif;--read:'Source Serif 4',Georgia,serif;
  --sans:'IBM Plex Sans Condensed','Arial Narrow',sans-serif;--mono:'IBM Plex Mono',Consolas,monospace;--hand:'Kristi',cursive;
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark;scroll-padding-top:70px}
body{margin:0;color:var(--bone);font:400 18px/1.55 var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;text-align:inherit}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
::selection{background:#c8a55a66}
.k:not(.wb *){font:500 11px/1.4 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #d8404caa}70%{box-shadow:0 0 0 9px #d8404c00}100%{box-shadow:0 0 0 0 #d8404c00}}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.2%,-1%)}}
@keyframes tw{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes flow{to{stroke-dashoffset:-32}}
@keyframes bars{0%,100%{height:4px}50%{height:15px}}
@keyframes toastin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

/* ---------------------------------------------------------------- frame */
.top{position:fixed;inset:0 0 auto 0;height:58px;z-index:50;display:flex;align-items:center;gap:26px;padding:0 22px;background:linear-gradient(#07080bee,#07080baa);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{font:600 14px var(--caps);letter-spacing:.26em;text-transform:uppercase;display:flex;gap:11px;align-items:center;color:var(--gold-hi);white-space:nowrap}
.brand .mark{width:26px;height:26px}
#nav{display:flex;gap:20px;flex:1;min-width:0}
#nav a{font:500 11.5px var(--caps);letter-spacing:.17em;text-transform:uppercase;color:var(--mute);padding:21px 0;position:relative;white-space:nowrap;transition:color .2s}
#nav a:hover,#nav a.on{color:var(--bone)}
#nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:13px;height:1px;background:var(--gold)}
.tools{display:flex;gap:18px;align-items:center;font:500 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.tools a:hover,.tools a.on{color:var(--bone)}
.wall-link{color:#f0b9bd;display:flex;gap:8px;align-items:center}
.wall-link i{width:8px;height:8px;border-radius:50%;background:var(--thread)}
.wall-link.new i{animation:pulse 1.6s infinite}
.who{color:var(--gold-hi);cursor:pointer}
.burger{display:none;width:34px;height:34px;margin-left:auto}
.burger i,.burger i::before,.burger i::after{display:block;width:20px;height:1.5px;background:var(--bone);position:relative;margin:auto;content:""}
.burger i::before{position:absolute;top:-6px}.burger i::after{position:absolute;top:6px}
#main{display:block;min-height:100vh;padding:58px 0 120px}
#main.full{padding:0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:1px solid var(--line);font:600 11.5px var(--caps);letter-spacing:.22em;text-transform:uppercase;color:var(--bone);
  background:#0b0d1299;transition:border-color .2s,color .2s,background .2s;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--gold);color:var(--gold-hi)}
.btn.gold{background:linear-gradient(#ecd79f,#b8944a);color:#161006;border-color:#f1dfae}
.btn.gold:hover{background:linear-gradient(#fff0c4,#caa558);color:#000}
.btn.sm{padding:7px 14px;font-size:10px;letter-spacing:.18em}
.btn.ghost{background:none}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--line2);border-radius:30px;font:500 11.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);background:#0b0d12aa;transition:.2s;cursor:pointer}
.chip:hover{color:var(--bone)}
.chip.on{border-color:var(--gold);color:var(--gold-hi)}
.chip.seal.locked{border-style:dashed;color:var(--dim)}
.chip.seal.locked::before{content:"";width:9px;height:8px;border:1.5px solid currentColor;border-radius:2px;box-shadow:0 -5px 0 -2.5px var(--bg),0 -6px 0 -1px currentColor}
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.ph{padding:64px 6vw 26px;max-width:1500px}
.ph h1{margin:10px 0 12px;font:600 clamp(40px,6.2vw,84px)/1 var(--caps);letter-spacing:.07em;text-transform:uppercase;background:linear-gradient(#fbf0cf,#b8944a);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin:0;max-width:760px;font-size:21px;line-height:1.5;color:#d8d2c2}
.banner{position:relative;min-height:54vh;display:flex;align-items:flex-end;background:linear-gradient(#07080b33,#07080b99 55%,#07080b),var(--img) center/cover no-repeat;margin-top:-58px;padding-top:58px}
.banner .ph{padding-bottom:40px;width:100%}
.fine{font-size:15px;color:var(--mute);padding:0 6vw}
.sect{padding:50px 6vw 0}
.foot{display:flex;justify-content:space-between;gap:20px;padding:30px 6vw 20px;font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ---------------------------------------------------------------- landing */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end}
.hero-bg,.hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.hero-bg{animation:kb 40s ease-in-out infinite alternate}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#07080bb0 0,#07080b00 62%),linear-gradient(#07080b88,#07080b00 26%,#07080b00 44%,#07080bd9 80%,#07080b)}
.hero-in .k{text-shadow:0 1px 10px #000,0 0 2px #000}
.hero-in h1{filter:drop-shadow(0 6px 26px #000b)}
.hero-ring{position:absolute;left:4%;right:4%;top:84px;width:92%;overflow:visible}
.hero-ring path{fill:none;stroke:#f1dfae;stroke-width:.5;opacity:.4}
.hero-ring .st{fill:#fff6da;filter:drop-shadow(0 0 5px #ffe9b0);animation:tw 4s ease-in-out infinite;animation-delay:var(--d)}
.hero-ring .dk{fill:#07080b;stroke:#d8404c;stroke-width:1}
.hero-in{position:relative;padding:0 6vw 9vh;max-width:1200px}
.hero-in h1{margin:14px 0 14px;font:600 clamp(54px,10.5vw,170px)/.92 var(--caps);letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(#fff6dc 20%,#b8944a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-in h1 span{display:block;font-size:.62em;letter-spacing:.21em;margin-top:.1em}
.hero-in .tag{font-size:23px;color:#e4dece;margin:0 0 26px}
.hero-act{display:flex;gap:12px;flex-wrap:wrap}
.scrollcue{position:absolute;left:50%;bottom:20px;width:22px;height:36px;border:1px solid var(--line);border-radius:12px}
.scrollcue i{position:absolute;left:50%;top:7px;width:2px;height:7px;background:var(--gold);margin-left:-1px;animation:tw 1.6s infinite}
.wallban{position:relative;display:flex;align-items:center;min-height:62vh;margin:0 0 14px;overflow:hidden;background:var(--img) center/cover no-repeat}
.wallban::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07080bf5 0,#07080bd0 38%,#07080b33 75%)}
.wallban-t{position:relative;padding:60px 6vw;max-width:680px}
.wallban-t h2{margin:10px 0;font:600 clamp(38px,5vw,70px)/1 var(--caps);letter-spacing:.08em;text-transform:uppercase;color:#f6dadc}
.wallban-t p{font-size:20px;color:#ddd6c6;margin:0 0 22px}
.wallban .k{color:#f08a8f}
.wallban .btn{border-color:#d8404c88}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 14px 30px}
.door{position:relative;display:flex;align-items:flex-end;min-height:44vh;overflow:hidden;border:1px solid var(--line2);background:#0d1016}
.door::before{content:"";position:absolute;inset:0;background:var(--img) center/cover no-repeat;transition:transform 1.2s ease}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(#07080b00 35%,#07080be6);transition:.3s}
.door:hover::before{transform:scale(1.06)}
.door:hover{border-color:var(--gold)}
.door.wide{grid-column:span 2}
.door-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.door-v.on,.door:hover .door-v{opacity:1}
.door-t{position:relative;z-index:2;padding:26px 28px}
.door-t h2{margin:0 0 4px;font:600 28px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.door-t p{margin:0;font-size:17.5px;color:#ddd6c6;max-width:520px}
.door-faces{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.door-faces img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:saturate(.8)}
.wallban .door-v{opacity:1}

/* ---------------------------------------------------------------- stages: maps, the Ring, the Wall */
.stage,.wallstage{position:relative;height:100vh;min-height:560px;overflow:hidden}
.mapwrap{position:absolute;inset:58px 264px 0 0}
.stage::before{content:"";position:absolute;left:0;top:58px;width:620px;height:380px;z-index:4;pointer-events:none;background:radial-gradient(ellipse at 0 0,#07080bf5 0,#07080bcc 38%,#07080b00 72%)}
.mapwrap svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none;user-select:none}
.mapwrap svg.drag{cursor:grabbing}
.stage-h{position:absolute;left:26px;top:82px;max-width:400px;z-index:5;pointer-events:none;text-shadow:0 2px 14px #000}
.stage-h h1{margin:8px 0 8px;font:600 clamp(30px,3.3vw,50px)/1 var(--caps);letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(#fbf0cf,#b8944a);-webkit-background-clip:text;background-clip:text;color:transparent}
.stage-h .lede{font-size:17.5px}
.stage-h .layers,.stage-h .wall-act{pointer-events:auto;display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.sidelist{position:absolute;right:14px;top:74px;bottom:20px;width:250px;z-index:5;overflow:auto;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);padding:14px 12px;scrollbar-width:thin}
.sidelist .k{margin:10px 4px 6px}
.sidelist .k:first-child{margin-top:0}
.sidelist .pl{display:grid;grid-template-columns:auto 1fr;column-gap:8px;width:100%;padding:6px 6px;border-bottom:1px solid var(--line2);transition:background .15s}
.sidelist .pl:hover,.sidelist .pl.on{background:#c8a55a1c}
.sidelist .pl em{grid-row:span 2;font:500 11px var(--mono);color:var(--gold);font-style:normal;width:18px;padding-top:3px}
.sidelist .pl b{font:600 12.5px var(--caps);letter-spacing:.1em;text-transform:uppercase;grid-column:2}
.sidelist .pl i{font:italic 13.5px var(--serif);color:var(--mute);grid-column:2;line-height:1.25}
.sidelist .pl.dark b{color:#f08a8f}
.sidelist .btn{margin-top:14px;width:100%;justify-content:center}
.mapctl{position:absolute;right:280px;bottom:22px;z-index:5;display:flex;flex-direction:column;gap:6px}
.mapctl button{width:38px;height:38px;border:1px solid var(--line);background:var(--glass);font:500 18px var(--mono);text-align:center;color:var(--gold-hi)}
.mapctl button:hover{border-color:var(--gold)}
/* the empire */
.empmap .m-grat{fill:none;stroke:#141d29;stroke-width:1}
.m-other{fill:#0c1016;stroke:#1b2430;stroke-width:1}
.m-ring{fill:none;stroke:#1a3a56;stroke-width:1;opacity:.6}.m-ring.r1{opacity:.38}.m-ring.r2{opacity:.2}
.m-prov{fill:#191c22;stroke:#8a7340;stroke-width:1.1;transition:fill .25s;cursor:pointer}
.m-prov:hover,.m-prov.on{fill:#3b3119}
.m-prov[data-id=Carthage]{fill:#6b5626}
.m-lake{fill:#07080b;stroke:#24405a;stroke-width:.8;pointer-events:none}.m-river{fill:none;stroke:#1f3850;stroke-width:1;pointer-events:none}
.m-coast{fill:none;stroke:#d9b96a;stroke-width:1.3;pointer-events:none;filter:drop-shadow(0 0 5px #c8a55a77)}
.m-rail{stroke:#c0303a;stroke-width:1.6;stroke-dasharray:8 5;fill:none;opacity:.85;pointer-events:none}
.m-eq{fill:none;stroke:#c8a55a;stroke-width:1;stroke-dasharray:6 6;opacity:.5}
.m-stn{fill:#f1dfae;stroke:#07080b;stroke-width:1}.m-stn.dark{fill:#07080b;stroke:#d8404c;stroke-width:1.8}
.m-lab{font-family:var(--caps);font-weight:600;letter-spacing:.3em;fill:#ece6d6;opacity:.42;pointer-events:none}
.m-lab.ring{font-size:15px;opacity:.8;fill:#c8a55a}
g.pin{cursor:pointer}
g.pin text{font:italic 500 15px var(--serif);fill:#ece6d6;paint-order:stroke;stroke:#07080b;stroke-width:4px;stroke-linejoin:round}
g.pin.seat circle{fill:#07080b;stroke:#ece6d6;stroke-width:1.6}g.pin.seat .c{fill:#ece6d6;stroke:none}
g.pin.seat.cap circle{stroke:#ff6a75}g.pin.seat.cap .c{fill:#ff6a75}
g.pin.place rect{fill:#c8a55a;stroke:#07080b;stroke-width:1}
g.pin.place text{font-size:13.5px;fill:#f1dfae}
.empmap.far g.pin text{opacity:0;transition:opacity .2s}
.empmap.far g.pin:hover text,.empmap.far g.pin.cap text{opacity:1}
.empmap.far .m-lab.sm{opacity:0}
.empmap .m-lab{transition:opacity .3s}
/* the capital */
.cityplan .cl{pointer-events:none;fill:#ece6d6}
.cl-dist{font-family:var(--caps);font-weight:600;letter-spacing:.22em;opacity:.6}
.cl-park,.cl-street{font-family:var(--serif);font-style:italic;opacity:.72}
.cl-water{font-family:var(--serif);font-style:italic;letter-spacing:.2em;fill:#5aa3cf!important}
.cl-rail{font-family:var(--serif);font-style:italic;fill:#e0606a!important}
.cityplan.no-labels .labels{display:none}
.cityplan.no-pins .pins{display:none}
g.cpin circle{fill:#07080b;stroke:#c8a55a;stroke-width:1.3}g.cpin .c{fill:#f1dfae;stroke:none}g.cpin .halo{fill:#c8a55a1c;stroke:none;transition:.2s}
g.cpin:hover .halo,g.cpin.on .halo{fill:#c8a55a55}
g.cpin text{font:500 10.5px var(--sans);letter-spacing:.06em;fill:#f1dfae;stroke-width:3px;opacity:0;transition:opacity .2s;font-style:normal}
g.cpin:hover text,g.cpin.on text,.cityplan.near g.cpin text{opacity:1}
g.cpin.k-state circle{stroke:#7fa6c9}g.cpin.k-lower circle{stroke:#e0703a}g.cpin.k-water circle{stroke:#5aa3cf}g.cpin.k-transit circle{stroke:#ff6a75}g.cpin.k-school circle{stroke:#6fae8e}
.cityplan .cp-dist{transition:fill .3s}
.beneath{display:none}
.cityplan.show-beneath .beneath{display:block;animation:fadein 1.6s}
.cityplan.show-beneath .cb-main{stroke-dasharray:12 6;animation:flow 1.1s linear infinite}
.cityplan.show-beneath .cb-core{animation:tw 3s ease-in-out infinite}
.cb-t{font-family:var(--caps);font-weight:600;letter-spacing:.3em;font-size:9px;fill:#ff9a8a!important}
.cb-t.s{font:italic 7.4px var(--serif);letter-spacing:.04em;fill:#ffc9b8!important}.cityplan .cb-t.w{fill:#9fd0ee!important}.cityplan .cb-t.e{fill:#dcc083!important}
.cityplan.night .cb-main.off{stroke:#27323d;animation:none}
.cityplan.night .cb-east{opacity:.15}.cityplan.night .cb-east.live{opacity:1;stroke:#9fd0ee;animation:flow 1s linear infinite}
.nightfx circle{fill:none;stroke:#fff3d6;stroke-width:1.4}
.nightfx .hot{fill:#ff5a4a;stroke:none;filter:url(#glow)}
.nightbar{position:absolute;left:26px;right:280px;bottom:22px;z-index:6;display:grid;grid-template-columns:auto 1fr auto;gap:12px 16px;align-items:center;padding:14px 18px;background:var(--glass);
  backdrop-filter:blur(12px);border:1px solid var(--thread)}
.nightbar[hidden]{display:none}
.nightbar input{width:100%;accent-color:#d8404c}
.night-read{grid-column:1/-1;display:flex;gap:16px;align-items:baseline}
.night-read b{font:500 26px var(--mono);color:#ffd9c9;min-width:86px}
.night-read span{font-size:18px}
/* the Ring */
.ringstage{background:radial-gradient(ellipse at 50% 60%,#0b1626 0,#07080b 70%)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.gl-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gl-l{position:absolute;transform:translate(-50%,-170%);font:500 10.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#f1dfae;white-space:nowrap;text-shadow:0 0 6px #000,0 0 2px #000;transition:opacity .2s}
.gl-l b{font:500 9.5px var(--mono);color:var(--gold);margin-right:5px}
.gl-l.dark{color:#f08a8f}.gl-l.hid{opacity:0}.gl-l.on{color:#fff;font-weight:600}
.gl-l.work::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;border:1.5px solid var(--cold);transform:rotate(45deg)}

/* ---------------------------------------------------------------- sheets */
.sheet{position:fixed;inset:58px 0 0 auto;width:min(560px,100vw);z-index:60;background:#0a0c11f5;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-left:1px solid var(--line);
  overflow:auto;animation:sheetin .35s ease}
.sheet[hidden]{display:none}
@keyframes sheetin{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.sheet.modal{inset:58px 0 0 0;width:auto;display:grid;place-items:start center;padding:26px 14px 60px;background:#050608e0;border:0;animation:fadein .3s}
.sheet.modal[hidden]{display:none}
.sheet.widechart{width:min(820px,100vw)}
.sheet .wb svg.fg{width:100%;height:auto;display:block}
.sh-card{width:min(1120px,100%);background:#0b0d12;border:1px solid var(--line);position:relative}
.sh-x{position:absolute;right:12px;top:10px;z-index:3;width:34px;height:34px;border:1px solid var(--line);background:#07080bcc;font:400 20px var(--mono);text-align:center;color:var(--gold-hi)}
.sh-x:hover{border-color:var(--gold)}
.sh-img{position:relative;aspect-ratio:1.7;background:#0d1016 center/cover no-repeat}
.sh-img::after{content:"";position:absolute;inset:0;background:linear-gradient(#0000 50%,#0a0c11)}
.sh-b{padding:8px 28px 40px}
.sh-b h2{margin:6px 0 4px;font:600 30px/1.1 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi)}
.sh-b .sub{font:italic 19px var(--serif);color:#d8d2c2;margin:0 0 14px}
.sh-b .tx{font-size:18px;margin:0 0 14px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:14px 0;font-size:16.5px}
.kv dt{font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding-top:5px}
.kv dd{margin:0}
.facesrow{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.fchip{display:flex;align-items:center;gap:9px;padding:4px 12px 4px 4px;border:1px solid var(--line2);border-radius:30px;font:600 11px var(--caps);letter-spacing:.1em;text-transform:uppercase}
.fchip:hover{border-color:var(--gold)}
.fchip img,.fchip span.nf{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 15%;background:#1a1e26;display:grid;place-items:center;font-size:11px}
.workbox{margin:18px 0;padding:14px 16px;border:1px solid #5aa3cf66;background:#5aa3cf10}
.workbox .k{color:var(--cold)}
.workbox p{margin:6px 0 0;font-size:16.5px}
/* a person */
.person{display:grid;grid-template-columns:minmax(260px,400px) 1fr}
.person .face{position:relative;min-height:440px;background:#0d1016 center 12%/cover no-repeat}
.person .face .sig{position:absolute;left:16px;bottom:16px;width:74px;height:74px;filter:drop-shadow(0 2px 8px #000)}
.person .face.none{display:grid;place-items:center;font:600 90px var(--caps);color:#2a2f38}
.person .pb{padding:30px 34px 34px;min-width:0}
.person h2{margin:6px 0 2px;font:600 clamp(28px,3vw,40px)/1.05 var(--caps);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi)}
.person .ttl{font:italic 20px var(--serif);color:#d8d2c2;margin:0 0 4px}
.person .dates{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 16px}
.person .tx{font-size:18.5px;margin:0 0 6px}
.ties{grid-column:1/-1;display:grid;grid-template-columns:minmax(300px,540px) 1fr;gap:10px 30px;padding:10px 34px 34px;border-top:1px solid var(--line2);align-items:center}
.ties svg{width:100%;height:auto;display:block}
.ties .tl line{stroke-width:1.5;opacity:.75}
.ties .tn{cursor:pointer}
.ties .tn circle{fill:#11141a;stroke-width:1.6}
.ties .tn text{font:600 9.5px var(--caps);letter-spacing:.08em;text-transform:uppercase;fill:#ece6d6;text-anchor:middle;paint-order:stroke;stroke:#0b0d12;stroke-width:3px}
.ties .tn:hover circle{stroke-width:3}
.tielist{display:flex;flex-direction:column;gap:2px}
.tielist button{display:grid;grid-template-columns:10px 1fr;gap:10px;padding:6px 8px;text-align:left;border-bottom:1px solid var(--line2);align-items:baseline}
.tielist button:hover{background:#c8a55a14}
.tielist b{font:600 12px var(--caps);letter-spacing:.1em;text-transform:uppercase}
.tielist span{font:italic 16px var(--serif);color:#cfc9ba}
.tk{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.tk-blood{background:#c8a55a}.tk-marriage{background:#f1dfae}.tk-love{background:#ff8fa3}.tk-friend{background:#6fae8e}.tk-ally{background:#7fa6c9}.tk-serves{background:#9aa0a8}.tk-commands{background:#b38cd9}.tk-enemy{background:#d8404c}

/* ---------------------------------------------------------------- people and houses */
.viewsw{display:flex;gap:8px;padding:0 6vw 10px}
.pgroup{padding:22px 6vw 6px}
.pgroup h2,.shelf h2,.tree h2{margin:0 0 14px;font:600 15px var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:16px}
.pgroup h2::after,.shelf h2::after,.tree h2::after{content:"";flex:1;height:1px;background:var(--line)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.pcard{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line2);background:#0d1016;display:block;width:100%}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease,filter .4s;filter:saturate(.85)}
.pcard:hover img{transform:scale(1.06);filter:none}
.pcard:hover{border-color:var(--gold)}
.noface{position:absolute;inset:0;display:grid;place-items:center;font:600 46px var(--caps);color:#2c323c;background:radial-gradient(#141821,#0b0d12)}
.pc-t{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 11px;background:linear-gradient(#0000,#07080bf2 60%);display:flex;flex-direction:column;gap:2px}
.pc-t b{font:600 12.5px/1.2 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi)}
.pc-t i{font:italic 13.5px/1.25 var(--serif);color:#cfc9ba}
.webwrap{padding:0 3vw}
.webwrap[hidden]{display:none}
.webkey{display:flex;gap:8px;flex-wrap:wrap;padding:6px 3vw 12px}
.webbox{height:calc(100vh - 250px);min-height:520px;border:1px solid var(--line);background:#090b0fcc;position:relative;overflow:hidden}
.webbox svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.webbox .we{stroke-width:1.3;opacity:.55;transition:opacity .2s}
.webbox .wn{cursor:pointer}
.webbox .wn circle{fill:#11141a;stroke:#c8a55a;stroke-width:1.4}
.webbox .wn text{font:600 9px var(--caps);letter-spacing:.08em;text-transform:uppercase;fill:#ece6d6;text-anchor:middle;paint-order:stroke;stroke:#090b0f;stroke-width:3px;pointer-events:none}
.webbox.focus .wn:not(.hi){opacity:.18}.webbox.focus .we:not(.hi){opacity:.05}.webbox.focus .we.hi{opacity:1;stroke-width:2}
.webtip{position:absolute;left:14px;bottom:12px;max-width:520px;font:italic 17px var(--serif);color:#e4dece;pointer-events:none}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;padding:30px 6vw 10px}
.hcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px 22px;border:1px solid var(--line2);background:#0b0d12bb;text-align:center;transition:.25s}
.hcard:hover{border-color:var(--gold);background:#12151c}
.hcard img{width:120px;height:120px;object-fit:contain;margin-bottom:8px;transition:transform .5s}
.hcard:hover img{transform:scale(1.08)}
.hcard b{font:600 15px var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi)}
.hcard .words{font:italic 17px var(--serif);color:#e4dece}
.hcard span{font:400 12.5px var(--sans);letter-spacing:.06em;color:var(--mute)}
.house-h{display:flex;gap:26px;align-items:center;padding:34px 28px 6px}
.house-h img{width:150px;height:150px;object-fit:contain}
.tree{padding:30px 6vw 10px}
.treefit{overflow-x:auto;padding-bottom:10px}
.treebox{position:relative;margin:0 auto;transform-origin:0 0}
.treebox svg{position:absolute;inset:0;width:100%;height:100%}
.treebox .tl{fill:none;stroke:#8a7340;stroke-width:1.4}.treebox .tl.dot{stroke-dasharray:2 6}.treebox .tw{fill:none;stroke:#f1dfae;stroke-width:1.2}
.treebox .tn{position:absolute;transform:translate(-50%,-46px);width:170px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.treebox .tn img,.treebox .tn .noface{position:static;width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:50% 16%;border:1px solid var(--gold);background:#11141a;font-size:26px;transition:.25s}
.treebox button.tn:hover img,.treebox button.tn:hover .noface{border-color:#fff;box-shadow:0 0 0 4px #c8a55a33}
.treebox .tn.unk .noface{border-style:dashed;border-color:#6b6f78;color:#6b6f78}
.treebox .tn b{font:600 11.5px/1.2 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi);margin-top:4px}
.treebox .tn i{font:italic 13px/1.2 var(--serif);color:#bdb7a8}

/* ---------------------------------------------------------------- chronicle */
.chron-f{position:sticky;top:58px;z-index:6;display:flex;gap:8px;flex-wrap:wrap;padding:12px 6vw;background:linear-gradient(#07080bf2,#07080bd0);backdrop-filter:blur(10px)}
.chron-f i,.tags i{display:inline-block;width:8px;height:8px;border-radius:50%}
.tg-crown{background:#f1dfae}.tg-ring{background:#7fa6c9}.tg-blackwood{background:#9aa0a8}.tg-erebus{background:#d8404c}.tg-cranes{background:#c8a55a}.tg-story{background:#6fae8e}
.chron{max-width:1060px;margin:0 auto;padding:10px 22px 60px}
.era-h{padding:44px 0 10px 174px}
.era-h h2{margin:0;font:600 26px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.era-h p{margin:2px 0 0;font:italic 17px var(--serif);color:var(--mute)}
.ev{display:grid;grid-template-columns:150px 1fr;gap:24px;transition:opacity .35s}
.ev .yr{font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-align:right;padding-top:5px}
.evb{position:relative;border-left:1px solid var(--line);padding:0 0 26px 28px}
.evb::before{content:"";position:absolute;left:-5px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--gold)}
.ev[data-hook] .evb::before{border-color:var(--thread);background:var(--thread)}
.evb img{width:100%;max-width:620px;aspect-ratio:1.9;object-fit:cover;margin:2px 0 12px;border:1px solid var(--line2);display:block}
.evb h3{margin:0 0 4px;font:600 19px/1.25 var(--caps);letter-spacing:.08em;color:var(--bone)}
.evb p{margin:0;font-size:18px;color:#d2ccbc;max-width:680px}
.ev.small .evb{padding-bottom:12px}.ev.small h3{font-size:14px;color:var(--mute);letter-spacing:.14em;text-transform:uppercase}
.tags{display:flex;gap:5px;margin-top:8px}
.chron.filter .ev:not(.m){opacity:.1}

/* ---------------------------------------------------------------- archive and readers */
.tomes{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:30px;padding:36px 6vw 60px}
.tome{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center;padding:18px;border:1px solid var(--line2);background:#0b0d12aa;transition:.25s;position:relative}
.tome:hover{border-color:var(--gold);background:#11141b}
.tome-cover{aspect-ratio:8.5/11;overflow:hidden;box-shadow:0 18px 40px #000b;transition:transform .5s}
.tome:hover .tome-cover{transform:translateY(-4px) rotate(-1deg)}
.tome-cover img{width:100%;height:100%;object-fit:cover;display:block}
.tome-t h2{margin:6px 0 2px;font:600 22px/1.15 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi)}
.tome-t .sub{margin:0 0 8px;font:italic 17px var(--serif);color:#d8d2c2}
.tome-t .blurb{margin:0;font-size:16px;color:#bdb7a8}
.tome.locked .tome-cover img{filter:blur(9px) brightness(.5)}
.tome.locked::after{content:"Sealed";position:absolute;left:18px;top:50%;width:180px;text-align:center;font:600 13px var(--caps);letter-spacing:.3em;text-transform:uppercase;color:#f08a8f}
.reader{display:grid;grid-template-columns:150px minmax(0,1fr)}
.reader.bookreader{display:block}
.rail{position:sticky;top:58px;height:calc(100vh - 58px);overflow:auto;padding:14px 12px 120px;border-right:1px solid var(--line2);scrollbar-width:thin}
.rail .back{font:500 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.rail .thumbs{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.rail .th{position:relative;border:1px solid var(--line2);opacity:.6;transition:.2s}
.rail .th img{width:100%;display:block}
.rail .th span{position:absolute;right:4px;bottom:2px;font:500 9.5px var(--mono);color:#111;background:#fffc;padding:0 3px}
.rail .th.on,.rail .th:hover{opacity:1;border-color:var(--gold)}
.stage-d{padding:26px 26px 60px;min-width:0}
.dochead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.dochead h1{margin:6px 0 0;font:600 clamp(26px,3vw,40px)/1.05 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi)}
.dochead .sub{margin:2px 0 0;font:italic 19px var(--serif);color:#d8d2c2}
.doctools{display:flex;gap:8px;align-items:center}
.doctools .pos{font:500 12px var(--mono);color:var(--mute);margin-right:6px}
.doctools>button{width:32px;height:32px;border:1px solid var(--line);font:500 16px var(--mono);text-align:center}
.facts{margin:0 0 6px;font-size:16.5px;color:#cfc9ba;border:1px solid var(--line2);padding:10px 16px}
.facts summary{cursor:pointer;font:500 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.facts ul{margin:10px 0 4px;padding-left:20px;columns:2;column-gap:36px}
.how{font:italic 15.5px var(--serif);color:var(--mute);margin:8px 0 16px}
.sheets.wb{background:none;width:816px;margin:0 auto;zoom:var(--z,1)}
.sheet-wrap{position:relative;margin:0 0 30px;box-shadow:0 24px 70px #000c}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;padding:6px 2px 0;font:400 10px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#9aa0a8;background:none}
.sheet-foot button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:#c8a55a}
.sheets mark.hl{background:#f6d77a;color:inherit;cursor:pointer;border-radius:1px}
.sheets mark.hl.me{background:#ffc94d}
.cc:not(:empty){display:inline-block;min-width:17px;padding:0 5px;margin-left:5px;border-radius:9px;background:var(--gold);color:#141006;font:600 10px/17px var(--mono);text-align:center;letter-spacing:0}
.prose{max-width:740px;margin:0 auto;padding:54px 22px 100px;font:400 19.5px/1.75 var(--read);color:#e3ddcd}
.prose h1{margin:8px 0 6px;font:600 clamp(32px,4.4vw,54px)/1.05 var(--caps);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi)}
.prose p{margin:0 0 1.05em}
.prose .brk{text-align:center;color:var(--gold);margin:1.6em 0;font-size:22px}
.prose .part{font:600 20px var(--caps);letter-spacing:.3em;text-align:center;color:var(--gold);margin:2em 0 1em}
.prose mark.hl{background:#c8a55a40;color:inherit;border-bottom:1px solid var(--gold);cursor:pointer}
.pn{display:flex;justify-content:space-between;gap:16px;margin-top:50px;padding-top:18px;border-top:1px solid var(--line);font:600 11.5px var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.shelf{padding:26px 6vw 10px;max-width:1200px}
.chrow{display:grid;grid-template-columns:44px 1fr auto auto;gap:16px;align-items:baseline;padding:13px 6px;border-bottom:1px solid var(--line2);transition:background .15s}
.chrow:hover{background:#c8a55a12}
.chrow .n{font:500 13px var(--mono);color:var(--gold)}
.chrow .t{font:600 18px var(--caps);letter-spacing:.1em;text-transform:uppercase}
.chrow .s{font:500 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.chrow .s.redo{color:var(--ember)}
.tracks{padding:30px 6vw 40px;max-width:1100px;display:grid;gap:8px}
.track{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:center;padding:12px 14px;border:1px solid var(--line2);background:#0b0d12aa;width:100%;transition:.2s}
.track:hover,.track.on{border-color:var(--gold);background:#12151c}
.track .tp{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);position:relative}
.track .tp::before{content:"";position:absolute;left:17px;top:13px;border-left:13px solid var(--gold-hi);border-top:8px solid #0000;border-bottom:8px solid #0000}
.track.on .tp::before{left:14px;top:13px;width:5px;height:16px;border:0;border-left:5px solid var(--gold-hi);border-right:5px solid var(--gold-hi)}
.track .tt b{display:block;font:600 17px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.track .tt i{font:italic 16.5px var(--serif);color:#bdb7a8}
.ruling{padding:14px 6px;border-bottom:1px solid var(--line2)}
.ruling p{margin:0 0 9px;font-size:18px}
.ruling .rb{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ruling .rb button{padding:5px 13px;border:1px solid var(--line2);border-radius:30px;font:500 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ruling .rb button:hover{color:var(--bone);border-color:var(--gold)}
.ruling .rb button.on[data-v=accept]{background:#2f6b4f;border-color:#6fae8e;color:#fff}
.ruling .rb button.on[data-v=reject]{background:#7a1f27;border-color:#d8404c;color:#fff}
.ruling .rb button.on[data-v=discuss]{background:#4a4126;border-color:#c8a55a;color:#fff}
.ruling .verdict{font:italic 15px var(--serif);color:var(--mute)}
.chg{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:12px 6px;border-bottom:1px solid var(--line2)}
.chg time{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding-top:5px}
.chg h3{margin:0;font:600 16px var(--caps);letter-spacing:.1em}
.chg p{margin:2px 0 0;font-size:16.5px;color:#bdb7a8}

/* ---------------------------------------------------------------- notes */
.panel{position:fixed;inset:58px 0 0 auto;width:min(390px,100vw);z-index:55;background:#0a0c11f7;border-left:1px solid var(--line);transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column}
.panel.open{transform:none}
.panel-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line2)}
.panel-h h3{margin:0;font:600 13px var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.panel-h button{font:400 22px var(--mono);color:var(--mute)}
.thread{padding:6px 18px 110px;overflow:auto;flex:1}
.thread.wide{padding:10px 6vw 30px;max-width:1100px}
.nt{padding:13px 0;border-bottom:1px solid var(--line2)}
.nt .m{display:flex;justify-content:space-between;gap:10px;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.nt .m b{color:var(--gold-hi);font-weight:500}
.nt .q{margin:7px 0 5px;padding-left:10px;border-left:2px solid var(--gold);font:italic 15.5px/1.35 var(--serif);color:#e9dcb6;cursor:pointer}
.nt .b{margin:5px 0 0;font-size:17px;white-space:pre-wrap}
.nt .del{font:500 10px var(--mono);letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.nt .where{font:italic 14.5px var(--serif);color:var(--steel)}
.nt.flash{background:#c8a55a22}
.composer{padding:14px 0;border-bottom:1px solid var(--line)}
.composer .q{margin:0 0 8px;padding-left:10px;border-left:2px solid var(--gold);font:italic 15.5px/1.35 var(--serif);color:#e9dcb6}
.composer textarea{width:100%;min-height:96px;resize:vertical;background:#0d1016;border:1px solid var(--line);color:var(--bone);padding:10px 12px;font:17px/1.45 var(--serif)}
.composer textarea:focus{outline:1px solid var(--gold)}
.composer .row{display:flex;gap:8px;margin-top:8px}
.thread .none{font:italic 16px var(--serif);color:var(--mute);padding:14px 0}
.selnote{position:absolute;z-index:65;padding:7px 13px;background:linear-gradient(#ecd79f,#b8944a);color:#161006;font:600 10.5px var(--caps);letter-spacing:.18em;text-transform:uppercase;box-shadow:0 8px 24px #000a}
.selnote[hidden]{display:none}
.selnote::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid #0000;border-top-color:#b8944a;border-bottom:0}
.notes-fab{position:fixed;right:18px;bottom:18px;z-index:54;padding:11px 18px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);font:600 11px var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi)}

@media (min-width:1100px){body.panel-open .stage-d{padding-right:416px}body.panel-open .bookreader .prose{margin-right:max(420px,calc(50vw - 370px))}body.panel-open .notes-fab{display:none}}
/* ---------------------------------------------------------------- the wall */
.wallstage{background:#101113;display:flex;flex-direction:column;padding-top:58px}
.wallstage .stage-h{position:static;max-width:none;text-shadow:none;display:grid;grid-template-columns:auto 1fr auto;gap:8px 30px;align-items:center;padding:12px 22px;pointer-events:auto;border-bottom:1px solid var(--line2);background:#0b0c0e}
.wallstage .stage-h .k{grid-column:1;grid-row:1}
.wallstage .stage-h h1{grid-column:1;grid-row:2;margin:0;font-size:34px;white-space:nowrap}
.wallstage .stage-h .lede{grid-column:2;grid-row:1/3;font-size:16.5px;max-width:860px}
.wallstage .stage-h .wall-act{grid-column:3;grid-row:1/3;margin:0}
.wallstage .board-wrap{position:relative;inset:auto;flex:1;min-height:0}
.board-wrap{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;
  background:radial-gradient(ellipse at 50% 30%,#2b2a27 0,#17171a 60%,#0d0d0f 100%)}
.board-wrap.drag{cursor:grabbing}
.board{position:absolute;left:0;top:0;transform-origin:0 0;
  background-image:radial-gradient(#ffffff0a 1px,#0000 1.4px);background-size:23px 23px}
.threads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:4}
.threads path{fill:none;stroke:#c22b36;stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 3px 2px #0009)}
.threads path.f{stroke:#e9c46a;stroke-width:1.6;opacity:.8}
.threads path.new{stroke-dasharray:var(--len);animation:draw 1.4s ease forwards}
.clue{position:absolute;width:250px;transform:rotate(var(--r));transition:transform .25s,box-shadow .25s,opacity .4s;box-shadow:0 12px 26px #000a}
.clue:hover{transform:rotate(0) scale(1.04);z-index:7}
.clue .pin,.finding .pin{position:absolute;left:50%;top:-8px;margin-left:-8px;width:16px;height:16px;border-radius:50%;z-index:6;
  background:radial-gradient(circle at 35% 30%,#ff9a9a,#b3262f 55%,#5a0e14);box-shadow:0 3px 4px #000a}
.clue-on{background:#ece7d8;color:#16181c;padding:16px 16px 14px}
.clue-on img{width:100%;aspect-ratio:1.6;object-fit:cover;display:block;margin-bottom:10px;filter:saturate(.7) contrast(1.05)}
.clue.k-face .clue-on img{aspect-ratio:1;object-position:50% 14%}
.clue-on h3{margin:0 0 5px;font:600 13.5px/1.2 var(--caps);letter-spacing:.08em;text-transform:uppercase}
.clue-on p{margin:0 0 8px;font:400 14.5px/1.35 var(--read)}
.clue-on .src{font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8c1a22}
.clue.k-form .clue-on{background:#dfe6ea;border-top:14px solid #2f4558}
.clue.k-paper .clue-on{background:#efe9d6}
.clue.k-paper .clue-on p{font:400 25px/1 var(--hand);color:#1b2a4d}
.clue-off{display:none;border:1.5px dashed #6b6f78;padding:16px;color:#b9b4a6;background:#0000002e}
.clue-off span{font:500 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8d9199}
.clue-off p{margin:6px 0 8px;font:400 28px/1 var(--hand);color:#e4decd}
.clue-off a{font:600 10px var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.clue:not(.found) .clue-on{display:none}.clue:not(.found) .clue-off{display:block}
.clue:not(.found){box-shadow:none}.clue:not(.found) .pin{filter:grayscale(1) brightness(.6)}
.clue.fresh{animation:toastin .8s}
.finding{position:absolute;width:300px;background:#0b0d12;border:1px solid var(--gold);padding:20px 20px 18px;box-shadow:0 18px 44px #000c;z-index:3}
.finding h3{margin:6px 0 8px;font:600 21px/1.15 var(--caps);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi)}
.finding p{margin:0 0 12px;font-size:16px;color:#d8d2c2}
.finding .fin-off{text-align:center}
.finding .q{display:block;font:600 60px/1 var(--caps);color:#353a44;margin:4px 0 4px}
.finding .need{font:italic 15px var(--serif);color:var(--mute);margin:0}
.finding:not(.found) .fin-on{display:none}.finding.found .fin-off{display:none}
.finding:not(.found){border-style:dashed;border-color:#4a4f58;background:#0b0d12b0}
.finding.final{width:340px;border-color:var(--thread)}
.finding.final h3{color:#ffd9c9}
.wallstage .mapctl{right:22px}


/* ---------------------------------------------------------------- the registry */
.reg{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;padding:10px 6vw 50px;align-items:start}
.reg-q{width:100%;padding:12px 14px;background:#0d1016;border:1px solid var(--line);color:var(--bone);font:17px var(--serif)}
.reg-q:focus{outline:1px solid var(--gold)}
.reg-list{margin-top:10px;max-height:66vh;overflow:auto;border:1px solid var(--line2);scrollbar-width:thin}
.reg-item{display:grid;grid-template-columns:1fr auto;gap:10px;width:100%;padding:9px 12px;border-bottom:1px solid var(--line2);align-items:baseline}
.reg-item:hover,.reg-item.on{background:#c8a55a16}
.reg-item b{font:500 16px var(--serif)}
.reg-item i{font:400 10.5px var(--mono);letter-spacing:.08em;color:var(--mute);font-style:normal}
.reg-card{position:relative;background:#ece8dc;color:#14161a;padding:38px 44px 34px;font-family:var(--read);box-shadow:0 26px 70px #000c;min-height:420px}
.reg-card .empty{color:#6b6f78;font-style:italic}
.reg-card .rh1{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #14161a;padding-bottom:10px;margin-bottom:18px;font:500 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase}
.reg-card h2{margin:0 0 16px;font:600 26px/1.15 var(--caps);letter-spacing:.06em}
.reg-card dl{display:grid;grid-template-columns:190px 1fr;gap:9px 18px;margin:0;font-size:17px}
.reg-card dt{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#5d6066;padding-top:5px}
.reg-card dd{margin:0}
.reg-card .lk{color:#8c1a22;border-bottom:1px solid #8c1a22;cursor:pointer}
.reg-card .stampr{position:absolute;right:38px;top:74px;transform:rotate(7deg);border:2px solid #8c1a22;color:#8c1a22;padding:6px 12px;font:600 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.reg-card .hold{margin-top:18px;padding-top:14px;border-top:1px solid #b9b19c}
.reg-card .hand{margin:20px 0 0;font:400 27px/1.05 var(--hand);color:#1f3f8a;transform:rotate(-1.2deg);max-width:620px}
.reg-card .hand small{display:block;font:500 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#5d6066;margin-bottom:2px}
.chartwrap{margin:10px 6vw 40px;border:1px solid var(--line);padding:26px;position:relative}
.chartwrap.sealed .chart-in{display:none}
.chartwrap:not(.sealed) .seal-msg{display:none}
.seal-msg{text-align:center;padding:30px 10px}
.seal-msg h2,.chart-in h2{margin:8px 0;font:600 22px var(--caps);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi)}
.seal-msg p{color:var(--mute);margin:0 0 14px}
.chartbox{height:560px;overflow:hidden;border:1px solid var(--line2);background:#090b0f;margin-top:10px}
.netchart{width:100%;height:100%;cursor:grab;touch-action:none}
.netchart .nl{fill:none;stroke:#4c5766;stroke-width:1.1;transition:.2s}
.netchart .nl.hi{stroke:#f1dfae;stroke-width:2}
.netchart .nn{cursor:pointer}
.netchart .nn rect{fill:#141a23;stroke:#7fa6c9;stroke-width:1.2;transition:.2s}
.netchart .nn:hover rect{fill:#22303f}
.netchart .nn text{font:500 10px var(--sans);fill:#ece6d6;text-anchor:middle;pointer-events:none}
.netchart .c-T rect{stroke:#e9c46a;fill:#2b2414}.netchart .c-H rect{fill:#ece6d6;stroke:#ece6d6}.netchart .c-H text{fill:#0b0d12;font-weight:600}
.netchart .c-S rect{stroke:#9aa0a8}.netchart .c-G rect{stroke:#5aa3cf;fill:#0e2130}.netchart .c-F rect{stroke:#6fae8e;fill:#11231b}.netchart .c-P rect{stroke-dasharray:4 3;stroke:#9aa0a8}
.netchart .nrow{font:500 9.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;fill:#c8a55a}
.chartkey{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font:500 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.chartkey span::before{content:"";display:inline-block;width:12px;height:9px;margin-right:6px;border:1.2px solid #7fa6c9;vertical-align:-1px}
.chartkey .c-T::before{border-color:#e9c46a;background:#2b2414}.chartkey .c-H::before{background:#ece6d6;border-color:#ece6d6}.chartkey .c-S::before{border-color:#9aa0a8}
.chartkey .c-G::before{border-color:#5aa3cf}.chartkey .c-F::before{border-color:#6fae8e}

/* ---------------------------------------------------------------- finds */
.toasts{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:min(600px,94vw)}
.toast{pointer-events:auto;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;width:100%;background:#0b0d12f7;border:1px solid var(--thread);padding:12px 18px 12px 14px;
  box-shadow:0 22px 60px #000d;animation:toastin .5s;cursor:pointer}
.toast .tp{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9a9a,#b3262f 55%,#5a0e14);animation:pulse 1.6s 3}
.toast .tk2{font:500 9.5px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:#f08a8f}
.toast b{display:block;font:600 15px var(--caps);letter-spacing:.1em;text-transform:uppercase;margin:1px 0}
.toast p{margin:0;font-size:15.5px;line-height:1.35;color:#cfc9ba}
.reveal{position:fixed;inset:0;z-index:90;background:#040506f5;display:grid;place-items:center;text-align:center;padding:30px;animation:fadein .8s}
.reveal-in{max-width:820px}
.reveal .k{color:#f08a8f}
.reveal h2{margin:16px 0 18px;font:600 clamp(42px,7.4vw,104px)/1 var(--caps);letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(#fff6dc,#b8944a);-webkit-background-clip:text;background-clip:text;color:transparent}
.reveal p{font-size:23px;line-height:1.45;color:#e4dece;margin:0 0 26px}
.reveal .line{height:2px;background:var(--thread);margin:0 auto 22px;width:0;animation:grow 1.6s .3s ease forwards;box-shadow:0 0 14px #d8404c}
@keyframes grow{to{width:min(520px,80vw)}}
.reveal .opened{font:500 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.reveal .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------------------------------------------------------------- player */
.player{position:fixed;left:16px;bottom:16px;z-index:70;display:flex;align-items:center;gap:12px;padding:7px 16px 7px 7px;background:#0b0d12ee;border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:40px;max-width:calc(100vw - 32px)}
#pl-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--gold);position:relative;flex:none}
#pl-toggle span{position:absolute;left:15px;top:12px;border-left:13px solid var(--gold-hi);border-top:8px solid #0000;border-bottom:8px solid #0000}
.player.playing #pl-toggle span{left:13px;top:12px;width:14px;height:16px;border:0;border-left:5px solid var(--gold-hi);border-right:5px solid var(--gold-hi)}
.pl-meta{display:flex;flex-direction:column;min-width:0;max-width:230px}
.pl-meta b{font:600 11px var(--caps);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-meta i{font:italic 13px var(--serif);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-bars{display:flex;gap:2px;align-items:flex-end;height:16px;width:16px}
.pl-bars i{width:2.5px;height:4px;background:var(--gold)}
.player.playing .pl-bars i{animation:bars .9s ease-in-out infinite}
.player.playing .pl-bars i:nth-child(2){animation-delay:.2s}.player.playing .pl-bars i:nth-child(3){animation-delay:.45s}.player.playing .pl-bars i:nth-child(4){animation-delay:.1s}
#pl-next{font-size:10px;color:var(--mute);letter-spacing:-3px;padding-right:4px}
#pl-next:hover{color:var(--gold-hi)}
#pl-vol{width:70px;accent-color:#c8a55a}
body.bare .player,body.bare .top,body.bare .panel{display:none}

/* ---------------------------------------------------------------- gate */
.gate{position:relative;min-height:100vh;display:grid;place-items:center;padding:20px}
.gate-bg{position:absolute;inset:0;background:linear-gradient(#07080b88,#07080bdd),url(/assets/gate.webp) center/cover no-repeat;animation:kb 50s ease-in-out infinite alternate}
.gate-in{position:relative;width:min(420px,100%);padding:40px 36px;background:#0a0c11e0;border:1px solid var(--line);backdrop-filter:blur(14px);text-align:center}
.gate-in .mark{width:64px;height:64px;margin:0 auto 14px;display:block}
.gate-in h1{margin:10px 0 24px;font:600 30px/1.1 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi)}
.gate form{display:grid;gap:14px;text-align:left}
.gate label{display:grid;gap:5px;font:500 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.gate select,.gate input{padding:12px;background:#0d1016;border:1px solid var(--line);color:var(--bone);font:18px var(--serif)}
.gate .btn{justify-content:center}
.gate .err{min-height:20px;margin:0;color:#f08a8f;font-size:15px;text-align:center}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width:1180px){
  #nav{gap:14px}#nav a{font-size:10.5px;letter-spacing:.12em}.tools{gap:12px}
}
@media (max-width:980px){
  .burger{display:block}
  #nav{position:fixed;inset:58px 0 auto 0;flex-direction:column;gap:0;background:#07080bf7;border-bottom:1px solid var(--line);padding:6px 22px 14px;display:none}
  #nav.open{display:flex}#nav a{padding:12px 0}#nav a.on::after{bottom:6px}
  .tools a:not(.wall-link){display:none}
  .doors{grid-template-columns:1fr}.door.wide{grid-column:auto}.door{min-height:36vh}
  .sidelist{position:absolute;inset:auto 0 0 0;width:auto;top:auto;height:34vh;border-width:1px 0 0}
  .mapctl{right:12px;bottom:calc(34vh + 12px)}
  .stage-h .lede{display:none}
  .person{grid-template-columns:1fr}.person .face{min-height:340px}.ties{grid-template-columns:1fr}
  .reader{grid-template-columns:1fr}.rail{display:none}
  .reg{grid-template-columns:1fr}.tomes{grid-template-columns:1fr}.tome{grid-template-columns:120px 1fr}
  .ev{grid-template-columns:86px 1fr;gap:14px}.era-h{padding-left:100px}
  .facts ul{columns:1}.nightbar{right:12px;left:12px;bottom:calc(34vh + 12px)}
  .pl-meta{max-width:120px}#pl-vol{display:none}
}

/* the plan of New Carthage */
.cityplan .cp-ground{fill:#080b10}.cityplan .cp-outer{fill:#10151c}.cityplan .cp-park{fill:#11211a}.cityplan .cp-contour{fill:none;stroke:#24402f;stroke-width:.5}
.cityplan .cp-civic{fill:#39485a}.cityplan .cp-tree{fill:#1d3a2a}.cityplan .cp-pierline{fill:none;stroke:#4a4334;stroke-width:2.2}.cityplan .cp-wall{fill:none;stroke:#c8a55a;stroke-width:.5;opacity:.55}
.cityplan .cp-water{fill:#0a1826}.cityplan .cp-shore{fill:none;stroke:#1c3a55;stroke-width:.6}.cityplan .cp-shore.s2{stroke:#132b40;stroke-width:.4}
.cityplan .cp-walk{fill:none;stroke:#2f4638;stroke-width:1}.cityplan .cp-precinct{fill:#141a23}
.cityplan .cp-dist{fill:#0c1016;stroke:none}.cityplan .cp-yard{fill:#10151c}
.cityplan .cp-blk{fill:#1b222c}.cityplan .cp-blk.d-lower{fill:#191c22}.cityplan .cp-blk.d-commercial{fill:#222a35}.cityplan .cp-blk.d-upper{fill:#242d39}.cityplan .cp-blk.d-palace{fill:#2a3340}
.cityplan .cp-blk.d-engineers{fill:#232b37}.cityplan .cp-blk.d-warehouse{fill:#1b212a}.cityplan .cp-blk.d-industrial{fill:#191f27}
.cityplan .cp-ridge{fill:none;stroke:#2a323d;stroke-width:.5}
.cityplan .cp-ave{fill:none;stroke:#473f2d;stroke-linecap:round;stroke-linejoin:round}.cityplan .cp-avec{fill:none;stroke:#c8a55a;stroke-width:.6;stroke-dasharray:5 3;opacity:.8}
.cityplan .cp-bridge{fill:none;stroke:#4a4334;stroke-width:5}.cityplan .cp-bridgec{fill:none;stroke:#0a1826;stroke-width:2.2}
.cityplan .cp-rail{fill:none;stroke:#a8222d;stroke-width:1.2}.cityplan .cp-pier{fill:none;stroke:#3a2226;stroke-width:5;stroke-dasharray:1.2 7}
.cityplan .cp-lm{stroke:#c8a55a;stroke-width:.5}.cityplan .lm-crown{fill:#c8a55a}.cityplan .lm-plaza{fill:#2f2a1e;stroke:#c8a55a}.cityplan .lm-state{fill:#5d7a94}.cityplan .lm-school{fill:#4e7a63}
.cityplan .lm-house,.lm-guild{fill:#c8a55a}.cityplan .lm-town{fill:#59606a}.cityplan .lm-transit{fill:#3a2226;stroke:#a8222d}.cityplan .lm-water{fill:#2c6f9c;stroke:#5aa3cf}
.cityplan .cp-pave{fill:none;stroke:#c8a55a;stroke-width:.4;opacity:.7}.cityplan .cp-pad{fill:#0a0d12;stroke:#a8222d;stroke-width:.8}.cityplan .cp-plat{fill:none;stroke:#0a0d12;stroke-width:1}

.cityplan .cb-lens{fill:#a8222d;fill-opacity:.10;stroke:#d8404c;stroke-width:1.2;stroke-dasharray:6 3}.cityplan .cb-lens.l2{fill-opacity:.12;stroke-width:.7;stroke-dasharray:3 3}
.cityplan .cb-lens.l3{fill-opacity:.16;stroke-width:.6;stroke-dasharray:2 3}.cityplan .cb-core{fill:#ff5a4a;fill-opacity:.75;stroke:#ffd2b8;stroke-width:.6}
.cityplan .cb-gallery{fill:none;stroke:#e0703a;stroke-width:1.3;stroke-dasharray:1 3}
.cityplan .cb-main{fill:none;stroke:#5aa3cf;stroke-width:3.2;stroke-linecap:round}.cityplan .cb-starved{fill:none;stroke:#5aa3cf;stroke-width:1.2;stroke-dasharray:2 4;opacity:.7}
.cityplan .cb-return{fill:none;stroke:#e0703a;stroke-width:2;stroke-dasharray:6 3}.cityplan .cb-east{fill:none;stroke:#dcc083;stroke-width:2;stroke-dasharray:7 3}
.cityplan .cb-shaft{fill:none;stroke:#5aa3cf;stroke-width:1.2}.cityplan .cb-node{fill:#5aa3cf;stroke:#dff1ff;stroke-width:.8}