/* The story you wake with: page and stage. Chrome tokens: --bg --ink --ink-2 --line --accent --surface */
:root{
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* the stage is night in both themes */
  --night-0:#0d0b18; --night-1:#191330; --night-2:#2a1d3f;
  --star:#f6ead2; --gold:#f0b766; --gold-2:#ffd99a; --lav:#b8a6e6;
  --on-night:#f4ecdc; --on-night-2:#d9cdb8;
}
:root,[data-theme="light"]{
  --bg:#f5efe3; --ink:#1d1824; --ink-2:#463e4f; --line:#d9cfbd; --accent:#6b380b; --surface:#fbf7ef;
  --card:#fbf6ea; --card-ink:#1d1824; --card-ink-2:#463e4f; --card-line:#dccfb8; --card-accent:#6b380b;
  --btn:#f3eadb; --btn-on:#efdcb8;
}
[data-theme="dark"]{
  --bg:#0f0c19; --ink:#efe7d8; --ink-2:#cfc4b2; --line:#352c45; --accent:#f0b766; --surface:#171223;
  --card:#141020; --card-ink:#f1e9da; --card-ink-2:#d3c8b6; --card-line:#3a3050; --card-accent:#f3c27c;
  --btn:#1d1730; --btn-on:#2f2440;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f0c19; --ink:#efe7d8; --ink-2:#cfc4b2; --line:#352c45; --accent:#f0b766; --surface:#171223;
    --card:#141020; --card-ink:#f1e9da; --card-ink-2:#d3c8b6; --card-line:#3a3050; --card-accent:#f3c27c;
    --btn:#1d1730; --btn-on:#2f2440;
  }
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:1.1875rem;line-height:1.55;font-optical-sizing:auto}
a{color:var(--accent);text-underline-offset:.18em}
html:not(.js) .js-only{display:none!important}
html:not(.js) .stage{display:none}
html:not(.js) .steps{margin-top:0}

/* ---------- the story: a pinned night with cards over it ---------- */
.story{position:relative;background:var(--night-0)}
.stage{position:sticky;top:var(--topbar-h,0px);height:calc(100lvh - var(--topbar-h,0px));width:100%;overflow:hidden;z-index:0;background:
  radial-gradient(120% 80% at 70% 110%,var(--night-2) 0%,var(--night-1) 45%,var(--night-0) 100%)}
.stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-caption{position:absolute;left:var(--cap-l,0);right:var(--cap-r,0);bottom:calc(var(--hyp-h,28%) + .6rem);margin:0;padding:0;
  text-align:center;font:italic 400 clamp(1.05rem,1.9vw,1.45rem)/1.4 var(--serif);color:var(--on-night);
  text-shadow:0 1px 2px #000,0 0 18px rgba(13,11,24,.9);opacity:0;transition:opacity .9s ease}
.stage-caption.on{opacity:1}
.steps{position:relative;z-index:1;margin-top:calc(var(--topbar-h,0px) - 100lvh);padding:0 0 30vh}

.step{position:relative;width:min(31rem,calc(100% - 2rem));margin:0 0 70vh clamp(1rem,6vw,6.5rem);
  background:var(--card);color:var(--card-ink);border:1px solid var(--card-line);border-radius:4px;
  padding:1.5rem 1.6rem 1.4rem;box-shadow:0 18px 50px rgba(5,3,12,.45)}
.step h2{font:500 1.6rem/1.2 var(--serif);margin:0 0 .7rem;letter-spacing:-.005em}
.step p{margin:0 0 .85rem}
.step p:last-child{margin-bottom:0}
.step .note{font:400 .875rem/1.5 var(--sans);color:var(--card-ink-2)}
.step a{color:var(--card-accent)}

/* the hero sits on the night itself, no card */
.hero{background:none;border:0;box-shadow:none;padding:0;min-height:calc(100lvh - var(--topbar-h,0px));display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:calc(var(--hyp-h-px,220px) + 2.5rem);margin-bottom:30vh;width:min(34rem,calc(100% - 2rem));color:var(--on-night)}
.kicker{font:600 .8125rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .8rem}
.hero h1{font:400 clamp(2.2rem,4vw,3.35rem)/1.06 var(--serif);letter-spacing:-.015em;margin:0 0 1rem;text-wrap:balance;
  text-shadow:0 2px 24px rgba(13,11,24,.85)}
.deck{font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.5;color:var(--on-night-2);margin:0 0 1.2rem;max-width:36rem;text-shadow:0 1px 14px rgba(13,11,24,.95)}
.cue{font:500 .875rem/1.3 var(--sans);color:var(--gold-2);margin:0;letter-spacing:.02em}
.cue::after{content:" ↓"}

/* controls */
.sleep-times{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin:.2rem 0 .9rem}
.sleep-times label{font:500 .9375rem/1 var(--sans);color:var(--card-ink-2);display:flex;align-items:center;gap:.5rem}
.sleep-times input{font:500 1.0625rem/1 var(--sans);color:var(--card-ink);background:var(--btn);border:1px solid var(--card-line);
  border-radius:3px;min-height:44px;padding:.35rem .55rem}
.night-result{font-weight:500}
.plots{display:grid;gap:.55rem;margin:.4rem 0 .9rem}
.plot{all:unset;box-sizing:border-box;display:block;min-height:44px;cursor:pointer;padding:.7rem .9rem .7rem 1rem;border:1px solid var(--card-line);
  border-left:3px solid var(--card-line);border-radius:3px;background:var(--btn);color:var(--card-ink);font:italic 400 1.0625rem/1.42 var(--serif)}
.plot:hover{border-left-color:var(--card-accent)}
.plot:focus-visible{outline:3px solid var(--card-accent);outline-offset:2px}
.plot[data-on]{background:var(--btn-on);border-left-color:var(--card-accent)}
.plots.chosen .plot:not([data-on]){opacity:.78}
.plot-after:empty{display:none}


/* anchors land below the topbar, and on phones below the stage too */

.record{overflow-wrap:anywhere}
.stage-pause{position:absolute;right:max(1rem,env(safe-area-inset-right));top:1rem;z-index:3;min-height:44px;padding:.4rem .8rem;border-radius:22px;
  border:1px solid rgba(244,236,220,.35);background:rgba(13,11,24,.72);color:var(--on-night);font:500 .8125rem/1 var(--sans);cursor:pointer}
.stage-pause:hover{border-color:var(--gold)}
.stage-pause:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* the arithmetic of coincidence */
.calc{display:grid;gap:.9rem;margin:.6rem 0 1rem}
.calc label{display:grid;gap:.35rem;font:500 .9375rem/1.3 var(--sans);color:var(--card-ink-2)}
.calc .val{font-weight:600;color:var(--card-ink)}
.calc input[type=range]{width:100%;min-height:44px;accent-color:var(--card-accent);margin:0}
.calc-out{font:500 1.25rem/1.35 var(--serif);color:var(--card-ink);border-left:3px solid var(--card-accent);padding:.2rem 0 .2rem .8rem;margin:.2rem 0 .9rem}

/* the reveal: the reader's own draw, laid open */
.dealt-list{font:italic 400 1.125rem/1.5 var(--serif);color:var(--card-accent);margin:.2rem 0 .8rem}
.all-plots{margin:.3rem 0 .9rem;padding-left:1.1rem}
.all-plots li{margin:0 0 .5rem;font-style:italic;color:var(--card-ink-2)}
.all-plots li.yours{color:var(--card-ink)}
.all-plots .tag{font:600 .75rem/1 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--card-accent)}
.step blockquote{margin:.4rem 0 .9rem;padding:0 0 0 .9rem;border-left:2px solid var(--card-line);font-style:italic;color:var(--card-ink)}
.step blockquote cite{display:block;font:400 .8125rem/1.4 var(--sans);font-style:normal;color:var(--card-ink-2);margin-top:.3rem}
.step figure{margin:.6rem 0 .9rem}
.step figure img{display:block;width:100%;height:auto;border-radius:2px}
.step figcaption{font:400 .8125rem/1.45 var(--sans);color:var(--card-ink-2);margin-top:.4rem}

/* after the story: the record, on the page's own paper */
.record{background:var(--bg);color:var(--ink);padding:4rem 1rem 3rem;position:relative;z-index:3}
.record > *{max-width:42rem;margin-left:auto;margin-right:auto}
.record h2{font:500 1.75rem/1.2 var(--serif);margin:2.4rem auto .8rem}
.record h3{font:600 1rem/1.3 var(--sans);margin:1.6rem auto .5rem;color:var(--ink)}
.record p,.record li{color:var(--ink)}
.record .muted,.record small{color:var(--ink-2)}
.record ol.sources{padding-left:1.3rem;font-size:1rem}
.record ol.sources li{margin:0 0 .6rem}
.record .related{display:grid;gap:.6rem;padding:0;list-style:none}
.record .related a{display:block;padding:.75rem .9rem;border:1px solid var(--line);border-radius:3px;text-decoration:none;color:var(--ink);background:var(--surface)}
.record .related a:hover{border-color:var(--accent)}
.record .related span{display:block;font:400 .875rem/1.4 var(--sans);color:var(--ink-2)}

/* ---------- phones: the stage is a band on top, text never under it ---------- */
@media (max-width:759px){
  body{font-size:1.0625rem}
  .stage{height:40svh;top:var(--topbar-h,0px);z-index:2;box-shadow:0 10px 24px rgba(5,3,12,.5)}
  .steps{margin-top:0;padding:1rem 0 40svh;background:var(--bg)}
  .step{width:auto;margin:0 1rem 34svh;padding:1.15rem 1.15rem 1.05rem;box-shadow:none}
  .hero{min-height:0;margin:0 1rem 22svh;padding:1.1rem 0 0;color:var(--ink);justify-content:flex-start}
  .hero h1{font-size:2.05rem;text-shadow:none}
  .deck{color:var(--ink-2);text-shadow:none}
  .kicker{color:var(--accent)}
  .cue{color:var(--accent)}
  .stage-caption{font-size:.98rem;bottom:2.1rem;top:auto}
  .steps .step[id]{scroll-margin-top:40svh}
  .stage-pause{top:.5rem;right:.5rem;padding:.3rem .8rem;font-size:.75rem}
}
@media (max-width:759px) and (max-height:640px){ .stage{height:36svh} }
@media (prefers-reduced-motion:reduce){ .stage-caption{transition:none} }

/* ---------- chrome that stays out of the story ---------- */
/* a slimmer bar; over the night it takes the night's colours and drops the section links */
html:root{--bar-height:calc(2.75rem + var(--browser-safe-top,env(safe-area-inset-top)))}
html .topbar{font-size:.84rem;gap:.6rem;transition:background-color .4s,border-color .4s,color .4s}
html .topbar .icon-btn{border-color:transparent;background:transparent}
html.in-story .topbar{background:var(--night-0);border-bottom-color:rgba(244,236,220,.07);color:var(--on-night)}
html.in-story .topbar .home,html.in-story .topbar .chip[aria-current="page"],html.in-story .topbar .icon-btn{color:var(--on-night)}
html.in-story .topbar .chip{color:var(--on-night-2)}
html.in-story .topbar .chip:hover{color:var(--gold)}
html.in-story .topbar .topnav{visibility:hidden}
html.in-story .topbar a:focus-visible,html.in-story .topbar button:focus-visible{outline-color:var(--gold)}
@media (prefers-reduced-motion:reduce){html .topbar{transition:none}}

/* the reading rail: a hairline of small dots at the very edge, only after the opening */
html nav.rail{left:auto;right:max(.4rem,env(safe-area-inset-right));background:none;border:0;padding:.2rem 0;
  opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
html.rail-on nav.rail{opacity:1;visibility:visible}
html nav.rail::before{left:calc(.75rem - .5px);opacity:.3}
html nav.rail .rail-dot{width:1.5rem;height:1.5rem}
html nav.rail .rail-dot .dot{width:4px;height:4px;box-shadow:none;opacity:.6}
html nav.rail .rail-dot:hover .dot,html nav.rail .rail-dot:focus-visible .dot{opacity:1;transform:scale(1.5)}
html nav.rail .rail-dot[aria-current=true] .dot{opacity:1;transform:scale(1.75);box-shadow:none}
html nav.rail .rail-label{left:auto;right:calc(100% + .1rem);max-width:14rem;transform:translate(4px,-50%)}
html nav.rail .rail-dot:hover .rail-label,html nav.rail .rail-dot:focus-visible .rail-label{transform:translate(0,-50%)}
html.in-story nav.rail::before{background:rgba(244,236,220,.5)}
html.in-story nav.rail .rail-dot .dot{background:var(--on-night-2)}
html.in-story nav.rail .rail-dot[aria-current=true] .dot,html.in-story nav.rail .rail-dot:hover .dot{background:var(--gold)}
html.in-story nav.rail .rail-label{color:var(--on-night);text-shadow:0 1px 6px rgba(13,11,24,.95)}
@media (prefers-reduced-motion:reduce){html nav.rail{transition:none}}

/* the pause control, quieter */
.stage-pause{border-color:transparent;background:rgba(13,11,24,.55);color:var(--on-night-2);font-weight:400}
.stage-pause:hover{color:var(--on-night);border-color:rgba(244,236,220,.3)}

/* back to top: over the night it takes the night's colours (the shared button reads these two tokens) */
@media (min-width:760px){ html.in-story{--to-top-bg:#0d0b18;--to-top-fg:#d9cdb8} }