/* partea-cenusie-a-lunii: night by default (the sky is the subject); paper and ink by day, the stage stays a dusk sky. */
:root{
  --bg:#e7e2d8; --bg2:#ddd7cb; --surface:#f3efe8; --ink:#12151c; --ink2:#252b36; --muted:#474e5a; --line:#b9b5ac; --line-soft:#d2cdc3;
  --acc:#7a4d12; --acc-ink:#6b420c; --focus:#1f4fd1; --card:rgba(244,241,235,.95); --kick:#6b420c;
  --es:#7a4d12; --ce:#1d5fa6; --stage-bottom:#1a2740;
  --ramp:linear-gradient(90deg,#eb4637,#3a3f4a,#4696eb);
  --motif-ash:#9aa0ab; --motif-lit:#12151c;
  --to-top-bg:#e7e2d8; --to-top-fg:#12151c;
  --disp:"Fraunces",Georgia,serif; --serif:"Source Serif 4",Georgia,serif; --ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --vh:1vh; --stage-h:calc(var(--vh) * 100 - 44px);
  color-scheme:light;
}
html.dark{
  --bg:#04060c; --bg2:#090d16; --surface:#0c111b; --ink:#e8edf4; --ink2:#d0d8e3; --muted:#a9b3c1; --line:#29313f; --line-soft:#171e2b;
  --acc:#e9c88f; --acc-ink:#f0d4a3; --focus:#9db8ff; --card:rgba(5,8,14,.84); --kick:#e9c88f;
  --es:#e9c88f; --ce:#8cb8ff; --stage-bottom:#04060c;
  --motif-ash:#4b5361; --motif-lit:#f1ead9;
  --to-top-bg:#04060c; --to-top-fg:#e8edf4;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:56px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.1rem/1.62 var(--serif);text-rendering:optimizeLegibility}
a{color:var(--acc-ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:.5rem 1rem;z-index:50}
.skip:focus{left:8px;top:8px}
h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:-.012em;line-height:1.12;margin:0 0 .55em}
h1,h2,h3{font-variation-settings:"WONK" 0}
h1{font-size:clamp(1.9rem,2.3vw + .9rem,2.8rem);font-variation-settings:"opsz" 130,"WONK" 0;font-weight:400;text-wrap:balance}
h2{font-size:clamp(1.35rem,1.1vw + 1rem,1.8rem);font-variation-settings:"opsz" 72,"WONK" 0;text-wrap:balance;position:relative}
h3{font-size:1.16rem;margin-top:1.5em}
p{margin:0 0 1em}
.nw{white-space:nowrap}
.anchor{position:absolute;left:-1.1em;opacity:0;text-decoration:none;color:var(--muted);font-weight:400}
h2:hover .anchor,.anchor:focus{opacity:1}
.kicker{font:600 .78rem/1.35 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--kick);margin:0 0 .9rem}
.note{font:400 .88rem/1.5 var(--ui);color:var(--muted)}
.wrap{max-width:42rem;margin:0 auto;padding:0 16px}

/* topbar: slim, in the night's colour */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.9rem;height:44px;padding:0 max(16px,env(safe-area-inset-left));background:var(--bg);border-bottom:1px solid var(--line-soft);font:500 .88rem/1 var(--ui)}
.home{display:flex;align-items:center;gap:.45rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.home .motif{width:22px;height:22px;color:var(--ink)}
.topnav{display:flex;gap:1rem;overflow:hidden;min-width:0}
.topnav a{color:var(--ink2);text-decoration:none;white-space:nowrap}
.topnav a:hover{color:var(--ink);text-decoration:underline}
.spacer{flex:1}
.chip{color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.36rem .7rem;min-height:32px;display:inline-flex;align-items:center}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.progress i{display:block;height:100%;width:0;background:var(--acc)}
@media (max-width:980px){.topnav{display:none}}
@media (pointer:coarse){.icon-btn{width:44px;height:44px}.chip{min-height:44px}}
.rail{display:none}

.steps{grid-area:steps;position:relative;z-index:2;padding:0 0 30vh;min-width:0}
.step{min-height:calc(var(--vh) * 94);display:flex;align-items:center;padding:2rem 1.2rem 22vh max(16px,2.4vw);scroll-margin-top:52px}
.step .card{background:var(--card);border:1px solid transparent;border-radius:4px;padding:1.35rem 1.45rem .7rem;max-width:28rem}
.step.intro{min-height:var(--stage-h)}
.step.intro .card{background:transparent;border:0;padding:1rem .2rem}
.deck{font-size:1.12rem;line-height:1.55;color:var(--ink2)}
.hint{font:500 .85rem/1.3 var(--ui);color:var(--muted);margin-top:1.4rem}
.step p{font-size:1.03rem}
.step.explore{min-height:calc(var(--vh) * 100);align-items:flex-start;padding-top:4rem}
.step.explore .card{max-width:30rem;width:100%}
.btn{min-height:38px;padding:.4rem .9rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:500 .86rem/1 var(--ui);cursor:pointer;margin:0 0 .8rem}
.btn:hover{border-color:var(--acc);color:var(--acc-ink)}
.btn.play[data-on="1"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (pointer:coarse){.btn{min-height:44px}}

.slab{display:block;font:600 .85rem/1.3 var(--ui);color:var(--ink2);margin:.9rem 0 .35rem}
.yrow{display:flex;gap:.6rem;align-items:center}
.yrow .btn{margin:0;white-space:nowrap}
input[type=range]{flex:1;width:100%;accent-color:var(--acc);min-height:40px}
.readout{font:400 .9rem/1.45 var(--ui);color:var(--ink2);margin:.3rem 0 .6rem;min-height:1.5em}
.readout b{font:500 1.25rem/1 var(--disp);color:var(--ink)}
.seg{display:flex;flex-wrap:wrap;gap:.35rem;margin:.3rem 0 .6rem}
.seg button{min-height:36px;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:500 .84rem/1 var(--ui);cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
.seg button i{width:9px;height:9px;border-radius:50%;opacity:.35}
.seg button[aria-pressed=true]{border-color:var(--ink2)}
.seg button[aria-pressed=true] i{opacity:1}
@media (pointer:coarse){.seg button{min-height:44px}}

/* share row */
.share-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:1rem}
.share-row .lbl{font:500 .85rem/1 var(--ui);color:var(--muted);margin-right:.2rem}
.sh{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--ink);cursor:pointer}
.sh svg{width:18px;height:18px}
.sh:hover,.sh:focus-visible{color:var(--acc);border-color:var(--acc)}
@media (pointer:coarse){.sh{width:44px;height:44px}}
.status{font:400 .85rem/1.3 var(--ui);color:var(--muted);min-height:1.2em;margin:.3rem 0 0}

/* after the story */
.block{padding:3rem 0;position:relative;z-index:3;background:var(--bg)}
.tinted{background:var(--bg2)}
.plain{list-style:none;padding:0}
.sources li{font:400 .9rem/1.45 var(--ui);margin:.35rem 0}
footer{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:center;padding:2rem 16px 3rem;font:400 .85rem/1.4 var(--ui);color:var(--muted);background:var(--bg);position:relative;z-index:3}
footer a{color:var(--ink2)}
.to-top-x{left:auto!important;right:max(1rem,env(safe-area-inset-right))!important;bottom:76px!important}

/* the story: the sky pinned on the right, text passing on the left (phone: sky on top) */
.story{position:relative;display:grid;grid-template-columns:minmax(0,27rem) minmax(0,1fr);grid-template-areas:"steps stage";min-width:0}
.stage{grid-area:stage;position:sticky;top:44px;height:var(--stage-h);margin:0;overflow:hidden;background:var(--stage-bottom)}
.stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity 1s ease;touch-action:pan-y}
.stage.ready canvas{opacity:1}
.stage[data-scene=change] canvas{cursor:grab}
.caps{position:absolute;inset:0;pointer-events:none;z-index:1}
.cap{position:absolute;translate:-50% 0;white-space:nowrap;font:500 .8rem/1.2 var(--ui);letter-spacing:.02em;color:#dfe6f0;padding:.25rem .6rem;border-radius:999px;background:rgba(6,9,16,.62);border:1px solid rgba(255,255,255,.08)}
.cap.top{translate:-50% 0}
.cap.small{font-size:.7rem}
.cap.none{display:none}
.cap.dot{width:10px;height:10px;padding:0;translate:-50% -50%;border-radius:50%;background:#ffd88a;border:2px solid #1a1206;box-shadow:0 0 0 3px rgba(255,216,138,.25)}
.cap.pin{background:rgba(6,9,16,.78);color:#ffe2a8;font-weight:600}
.tag{position:absolute;left:16px;top:12px;margin:0;font:500 .82rem/1.3 var(--ui);letter-spacing:.02em;color:#dfe6f0;pointer-events:none;max-width:calc(100% - 32px);text-shadow:0 0 12px rgba(0,0,0,.8)}
.stage:not([data-scene=hero]):not([data-scene=explore]):not([data-scene=clouds]):not([data-scene=honest]) .scale{display:none}
.scale{position:absolute;left:16px;bottom:12px;margin:0;font:400 .72rem/1.3 var(--ui);color:#aeb8c6;pointer-events:none;max-width:60%}
.leo{position:absolute;inset:6% 8% 9%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;z-index:2}
.leo img{max-width:100%;max-height:calc(100% - 2.6rem);width:auto;height:auto;object-fit:contain;border-radius:2px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.leo figcaption{font:400 .76rem/1.35 var(--ui);color:#c6cfdb;text-align:center}
.legend{position:absolute;left:50%;translate:-50% 0;bottom:40px;display:grid;gap:.3rem;padding:.5rem .8rem .45rem;border-radius:8px;background:rgba(6,9,16,.72);border:1px solid rgba(255,255,255,.08);font:500 .74rem/1 var(--ui);color:#dfe6f0;pointer-events:none;min-width:250px}
.legend .ramp{display:block;height:7px;border-radius:4px;background:var(--ramp)}
.legend .ends{display:flex;justify-content:space-between;color:#b7c1ce;font-weight:400}
.nogl{position:absolute;left:16px;right:16px;top:12px;margin:0;font:500 .82rem/1.35 var(--ui);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.5rem .7rem;z-index:3}
.chart-stage{position:absolute;left:4%;right:4%;top:50%;translate:0 -50%;aspect-ratio:900/460;max-height:86%;z-index:2;pointer-events:none;padding:16px 18px 8px;border-radius:12px;background:rgba(4,6,12,.86)}
.chart-stage svg{width:100%;height:100%;font-family:var(--ui);overflow:visible}
.chart-stage .ct{fill:#eef2f7;font-size:24px;font-weight:400;font-family:var(--disp)}
.chart-stage .gl{stroke:#3a4558;stroke-width:1}
.chart-stage .gl.zero{stroke:#6c7a90}
.chart-stage .ax{fill:#c3ccd8;font-size:16px}
.chart-stage .unit{font-size:13px}
.chart-stage .es-line{fill:none;stroke:#e9c88f;stroke-width:2;opacity:.7}
.chart-stage .es-pt{fill:#e9c88f;stroke:#0b0f18;stroke-width:1.5}
.chart-stage .es-fit{stroke:#e9c88f;stroke-width:2;stroke-dasharray:7 6}
.chart-stage .ce-line{fill:none;stroke:#8cb8ff;stroke-width:2.4}
.chart-stage .ce-pt{fill:#8cb8ff;stroke:#0b0f18;stroke-width:1.2}
.chart-stage .ce-fit{stroke:#8cb8ff;stroke-width:2;stroke-dasharray:7 6}
.chart-stage .k-es{fill:#e9c88f;font-size:16px;font-weight:600}
.chart-stage .k-ce{fill:#8cb8ff;font-size:16px;font-weight:600}
.chart-stage .gap{fill:#8d98a8;font-size:13px}
.chart-stage.ph .ct{font-size:15px}.chart-stage.ph .ax{font-size:12px}.chart-stage.ph .unit{font-size:11px}.chart-stage.ph .k-es,.chart-stage.ph .k-ce{font-size:13px}.chart-stage.ph .gap{font-size:11px}
.ctl{margin:.2rem 0 .5rem}
select{width:100%;min-height:40px;padding:.35rem .6rem;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 .92rem/1.2 var(--ui)}
#tm-out{font-weight:500;color:var(--ink);margin-left:.4rem}
.readout{font:400 .92rem/1.45 var(--ui);color:var(--ink2);margin:.6rem 0 .4rem}
.readout p{margin:.15rem 0;font-size:.92rem}
.readout b{font-weight:600;color:var(--ink)}
.btn.toggle[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.seg .pill[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

@media (max-width:860px){
  .story{grid-template-columns:minmax(0,1fr);grid-template-areas:"main"}
  .stage{grid-area:main;align-self:start;height:calc(var(--vh) * 40);top:44px;z-index:4;box-shadow:0 1px 0 var(--line-soft),0 26px 0 0 var(--bg),0 48px 20px 6px var(--bg)}
  .steps{grid-area:main;padding-top:calc(var(--vh) * 40);padding-bottom:12vh}
  .step{min-height:calc(var(--vh) * 62);padding:1.4rem 12px 1rem;align-items:flex-start;scroll-margin-top:calc(var(--vh) * 40 + 50px)}
  .step .card{max-width:none;width:100%;padding:1.05rem 1rem .5rem}
  .step.intro{min-height:auto;padding-top:2.6rem}
  .step.intro .card{padding:.6rem .1rem}
  .hint{display:none}
  .scale{display:none}
  .tag{left:8px;top:6px;font-size:.68rem;max-width:calc(100% - 16px)}
  .cap{font-size:.66rem;padding:.15rem .45rem}
  .legend{bottom:6px;min-width:200px;font-size:.62rem;padding:.3rem .5rem}
  .chart-stage{inset:0;border-radius:0;border:0;padding:8px 6px 2px}
  .leo{inset:4% 4% 4%}
  .leo figcaption{display:none}
  .to-top-x{display:none!important}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.stage canvas{transition:none}}
@media print{.stage,.topbar{display:none}.story{display:block}}

/* light theme: the page is paper, the stage stays the night sky; text sits on the column without a box */
html:not(.dark) .step .card{background:transparent;padding-left:.2rem;padding-right:.2rem}
.ytab{margin:.2rem 0 1rem;font:400 .85rem/1.35 var(--ui)}
.ytab summary{cursor:pointer;color:var(--ink2);min-height:32px;display:flex;align-items:center}
.ytab .tw{max-height:14rem;overflow:auto;margin-top:.4rem}
.ytab table{border-collapse:collapse;width:100%}
.ytab th,.ytab td{padding:.15rem .4rem;text-align:right;border-bottom:1px solid var(--line-soft)}
.ytab th:first-child{text-align:left}
@media (max-width:860px){
  .chart-stage{left:0;right:0;top:0;translate:none;height:100%;aspect-ratio:auto;max-height:none}
  .step{padding-top:.6rem;scroll-margin-top:calc(var(--vh) * 40 + 44px)}
  html:not(.dark) .step .card{padding-left:.2rem}
}
.readout b{font:600 .92rem/1.45 var(--ui)!important;color:var(--ink)}

.cap.side{translate:0 -50%;text-align:left}
.cap.big{font:500 1.15rem/1.2 var(--disp);padding:.3rem .8rem;color:#f3ead6;background:rgba(6,9,16,.7)}
.cap.wrap{white-space:normal;max-width:min(92%,34rem);text-align:center}
.leo{inset:3% 5% 5%}
.leo img{box-shadow:0 30px 70px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06)}
@media (max-width:860px){
  .legend{bottom:4px;top:auto;padding:.2rem .45rem}
  .cap.big{font-size:.9rem}
  .cap.side{font-size:.62rem}
}

.cap{font-size:.86rem}
.cap.small{font-size:.78rem}
.scale{font-size:.78rem;color:#c3ccd8}
.leo figcaption{font-size:.84rem}
.explore .ctl.two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.explore .ctl{margin:.1rem 0 .35rem}
.explore .slab{margin:.4rem 0 .25rem}
.explore .readout p{margin:.05rem 0}
@media (max-width:860px){
  .stage::before{display:none}
  .stage{box-shadow:0 1px 0 var(--line-soft),0 10px 0 0 var(--bg),0 18px 10px 2px var(--bg)}
  .step{padding-top:.2rem}
  .cap{font-size:.74rem}.cap.small{font-size:.7rem}
}

@media (max-width:860px){
  .step .card{padding-top:.5rem}
  .step{scroll-margin-top:calc(var(--vh) * 40 + 30px)}
}