/* After Hours — indigo, tungsten, tobacco gold */
:root{
  --night:#11112a; --night-2:#1a1a3d; --night-3:#242452;
  --ink:#efe6d4; --ink-2:#c9bfae; --tung:#ffb766; --gold:#d9a34f; --gold-ink:#f0c27a;
  --rule:rgba(239,230,212,.18); --focus:#ffe08a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --display:"Didot","Bodoni 72","Hoefler Text",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pad:16px; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--night);color:var(--ink);font:1.0625rem/1.65 var(--serif);overflow-x:hidden}
a{color:var(--gold-ink);text-underline-offset:.18em}
a:hover{color:var(--tung)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0 0 .5em;font-weight:700}
h2{font-size:clamp(1.9rem,6vw,3.2rem);color:#fff4e0}
h3{font-size:1.45rem}
p{margin:0 0 1em}
section{padding:3rem var(--pad);max-width:1180px;margin:0 auto}
.skip{position:absolute;left:8px;top:-60px;background:var(--tung);color:#1a1006;padding:10px 14px;z-index:20;font:600 1rem var(--sans)}
.skip:focus{top:8px}
.kicker{font:700 .75rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.hint{font:.84rem/1.5 var(--sans);color:var(--ink-2)}
.section-dek{max-width:64ch;color:var(--ink-2)}

/* tags */
.tag{display:inline-block;font:700 .66rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:.32em .55em;border-radius:3px;border:1px solid currentColor;margin-right:.35em;vertical-align:.12em}
.t-fact{color:#9fe0c0}.t-interp{color:#f0c27a}.t-meta{color:#c8b6ff;border-style:dashed}.t-spec{color:#ffb0a0;border-style:dotted}.t-fic{color:#9cc8ff}

/* header */
.top{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:center;justify-content:space-between;padding:.7rem var(--pad);border-bottom:1px solid var(--rule);background:rgba(17,17,42,.92);position:sticky;top:0;z-index:10}
.brand{font:700 1.15rem var(--display);color:var(--tung);text-decoration:none;letter-spacing:.06em}
.top ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 1rem;margin:0;padding:0}
.top nav a{font:600 .82rem var(--sans);color:var(--ink);text-decoration:none;display:inline-block;padding:.45rem 0}
.top nav a:hover{color:var(--tung);text-decoration:underline}

/* hero */
.hero{padding-top:3.5rem}
h1{font-size:clamp(3.4rem,16vw,8rem);line-height:.9;color:#fff4e0;letter-spacing:-.01em}
h1 em{color:var(--tung);font-style:italic;text-shadow:0 0 28px rgba(255,183,102,.35)}
.dek{font:italic clamp(1.3rem,4vw,1.9rem)/1.3 var(--display);color:var(--gold-ink);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.5em 0;max-width:30ch}
.lede{font-size:1.15rem;max-width:62ch}
.legend{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;font:.82rem var(--sans);color:var(--ink-2)}

/* city */
.city-head{display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:baseline;justify-content:space-between}
.stage{position:relative;border:1px solid var(--rule);border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:linear-gradient(#1b1b44,#0b0b1d);max-height:72vh;width:100%}
#scene{display:block;width:100%;height:100%}
.stage-clock{position:absolute;left:14px;top:10px;margin:0;font:700 clamp(1.4rem,5vw,2.4rem)/1 var(--display);color:#fff4e0;text-shadow:0 2px 12px #000}
.stage-clock span+span{display:block;font:600 .72rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tung);margin-top:.4rem}
.lowpower .stage{display:none}
.controls{display:grid;gap:1rem;margin:1.2rem 0}
.clock label{display:flex;justify-content:space-between;gap:1rem;font:600 .95rem var(--sans)}
.clock output{color:var(--tung);font-variant-numeric:tabular-nums}
.ticks{display:flex;justify-content:space-between;font:.72rem var(--sans);color:var(--ink-2)}
input[type=range]{width:100%;height:44px;accent-color:var(--tung);background:transparent;margin:0;cursor:pointer}
.view-opts{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center}
.switch{display:flex;gap:.55rem;align-items:center;font:600 .92rem var(--sans);cursor:pointer;min-height:44px}
.switch input{width:1.2rem;height:1.2rem;accent-color:var(--tung)}
.btn{min-height:44px;padding:.55em 1.1em;border-radius:999px;border:1.5px solid var(--gold);background:transparent;color:var(--ink);font:650 .92rem var(--sans);cursor:pointer}
.btn:hover,.btn[aria-pressed=true]{background:var(--gold);color:#1a1006}
.btn.big{font-size:1.05rem;padding:.75em 1.4em}
.map{border-top:1px solid var(--rule);padding-top:1rem}
.map h3{font-size:1.2rem}
.districts{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.districts li{border-left:3px solid var(--gold);padding:.2rem 0 .2rem .9rem}
.districts h4{font:700 .8rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tung);margin:0 0 .25rem}
.districts p{margin:0;font-size:1rem}

/* residents */
.picker{border:0;padding:0;margin:1rem 0}
.picker legend{font:700 .9rem var(--sans);margin-bottom:.7rem}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.rcard{position:relative;display:flex;flex-direction:column;gap:.15rem;padding:.8rem .9rem .8rem 2.6rem;border:1px solid var(--rule);border-radius:8px;cursor:pointer;background:var(--night-2);min-height:64px}
.rcard input{position:absolute;left:.85rem;top:.95rem;width:1.15rem;height:1.15rem;accent-color:var(--tung)}
.rcard:has(input:checked){border-color:var(--tung);box-shadow:0 0 0 1px var(--tung) inset;background:var(--night-3)}
.rcard:has(input:disabled){opacity:.5;cursor:not-allowed}
.rcard:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.rname{font:700 1.2rem var(--display);color:#fff4e0}
.rrole{font:.82rem var(--sans);color:var(--ink-2)}
.stories{display:grid;gap:1rem;margin-top:1rem}
.story{background:linear-gradient(180deg,var(--night-2),var(--night));border:1px solid var(--rule);border-top:3px solid var(--tung);border-radius:8px;padding:1.2rem}
.story h3{color:var(--tung)}
.when{font:600 .85rem var(--sans);color:var(--ink-2)}
.js .story{display:none}.js .story.on{display:block}
.story-empty{color:var(--ink-2);font-style:italic}
html:not(.js) .story-empty{display:none}

/* desk */
.faders{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;background:#0b0b1d;border:1px solid var(--rule);border-radius:10px;padding:1rem .5rem}
.fader{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.fader label{font:700 .7rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);text-align:center;min-height:2.2em}
.fader input{writing-mode:vertical-lr;direction:rtl;width:44px;height:160px}
.fader output{font:700 1rem var(--sans);font-variant-numeric:tabular-nums}
.presets{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.mix-read{font-style:italic;color:var(--ink-2);min-height:1.6em}

/* endings */
.choices{display:flex;flex-wrap:wrap;gap:.7rem;margin:1rem 0}
.ending{border:1px solid var(--rule);border-radius:10px;padding:1.3rem;background:var(--night-2);min-height:7rem}
.ending h3{color:var(--tung)}
.ending:focus{outline:none}.ending:focus-visible{outline:3px solid var(--focus)}
.found{margin-top:.8rem;font:600 .9rem var(--sans)}
html:not(.js) .needs-js{display:none}
.nojs{border-left:3px solid var(--gold);padding-left:.8rem;color:var(--ink-2)}
.js .nojs{display:none}

/* essays */
.essays{max-width:900px}
.essay{padding:1.6rem 0;border-top:1px solid var(--rule)}
.essay h3{font-size:clamp(1.5rem,4.5vw,2.2rem);color:#fff4e0}
.essay p{max-width:66ch}
.prompts{margin-top:1.5rem;padding:1.4rem;border:1px solid var(--gold);border-radius:10px;background:rgba(217,163,79,.06)}
.prompts h3{color:var(--tung)}
.prompts li{margin:.5rem 0}
.sources ol{padding-left:1.2rem}.sources li{margin:.5rem 0}
.foot{border-top:1px solid var(--rule);padding:2rem var(--pad);text-align:center;font:.88rem var(--sans);color:var(--ink-2)}
.home{font:700 1.3rem var(--display);color:var(--tung)}

@media (min-width:700px){
  :root{--pad:28px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .stories{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .districts{grid-template-columns:1fr 1fr}
  .controls{grid-template-columns:1.6fr 1fr;align-items:end}
}
@media (min-width:1100px){
  .districts{grid-template-columns:repeat(5,1fr)}
  .faders{max-width:640px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
section,.essay{scroll-margin-top:72px}