@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/newsreader-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/newsreader-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F}
@font-face{font-family:"Atkinson";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/AtkinsonHyperlegibleNext.woff2) format("woff2")}

:root{
  --bg:#f1f0ea;--bg2:#e7e5db;--card:#fbfaf6;--ink:#14181d;--ink2:#2f3640;--muted:#424954;
  --line:#c9c6b9;--line-soft:#dad7cb;--accent:#8d3204;--accent-ink:#fff;
  --sky0:#f6e7cf;--sky1:#b9d2e8;--ground:#d6d1c2;--bld:#39424f;--bld2:#566174;--win-off:#e9eff6;--win-on:#f7d98a;--ghost:#39424f;--rule:#14181d;--rec:#8d3204;--stars:0;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Atkinson",system-ui,-apple-system,sans-serif;
  --bar:3rem;color-scheme:light
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a0e13;--bg2:#10161e;--card:#121922;--ink:#ece8dc;--ink2:#cfcabb;--muted:#a7a395;
  --line:#2a3340;--line-soft:#202833;--accent:#ffb454;--accent-ink:#1b1200;
  --sky0:#34415a;--sky1:#070b11;--ground:#05080c;--bld:#0f151d;--bld2:#1b2532;--win-off:#18212d;--win-on:#ffd27a;--ghost:#8da2bd;--rule:#ece8dc;--rec:#ffb454;--stars:1;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a0e13;--bg2:#10161e;--card:#121922;--ink:#ece8dc;--ink2:#cfcabb;--muted:#a7a395;
  --line:#2a3340;--line-soft:#202833;--accent:#ffb454;--accent-ink:#1b1200;
  --sky0:#34415a;--sky1:#070b11;--ground:#05080c;--bld:#0f151d;--bld2:#1b2532;--win-off:#18212d;--win-on:#ffd27a;--ghost:#8da2bd;--rule:#ece8dc;--rec:#ffb454;--stars:1;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.08rem/1.6 var(--serif);text-rendering:optimizeLegibility}
a{color:var(--accent);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--card);padding:.5rem 1rem;z-index:60}
.skip:focus{left:8px;top:8px}
section{scroll-margin-top:calc(var(--bar) + 8px)}
h1,h2,h3{font-family:var(--serif);line-height:1.14;margin:0;text-wrap:balance}
button,select,input{font:inherit}
.num{font-variant-numeric:tabular-nums lining-nums}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;height:var(--bar);display:flex;align-items:center;gap:.7rem;padding:0 max(16px,env(safe-area-inset-left));
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft);font:500 .9rem/1 var(--sans)}
.home{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);text-decoration:none;white-space:nowrap;font-weight:700}
.home-ico{color:var(--accent)}
.topnav{display:flex;gap:.9rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:0 1 auto}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--ink2);text-decoration:none;white-space:nowrap;padding:.9rem .1rem}
.topnav a:hover{color:var(--accent)}
.spacer{flex:1}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 .7rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600}
.icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:var(--accent)}
.progress i{position:absolute;bottom:1px;left:0;width:12px;height:16px;margin-left:-6px;color:var(--accent);will-change:transform}
@media (max-width:760px){.topnav{display:none}}
@media (pointer:coarse){.chip,.icon-btn{min-height:44px;min-width:44px}.icon-btn{width:44px;height:44px}}

main{display:block}

/* the story: a canvas that climbs, and cards that scroll over it */
.story{position:relative}
.stage{position:sticky;top:var(--bar);height:calc(100svh - var(--bar));z-index:0;overflow:hidden;background:var(--bg2)}
.stage canvas{display:block;width:100%;height:100%}
html:not(.js) .stage{display:none}
.steps{position:relative;z-index:2;margin-top:calc(var(--bar) - 100svh)}
html:not(.js) .steps{margin-top:0}
.step{min-height:100svh;display:flex;align-items:center;justify-content:flex-end;padding:0 clamp(16px,4vw,60px)}
.card{width:min(31rem,40vw);background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--line);border-radius:14px;padding:1.35rem 1.5rem;box-shadow:0 10px 40px -18px rgb(0 0 0/.35);backdrop-filter:blur(10px)}
.card h2{font-size:clamp(1.35rem,2.4vw,1.9rem);margin:.15rem 0 .8rem}
.card h2 a{color:inherit;text-decoration:none}
.card p{margin:0 0 .8rem}
.card p:last-of-type{margin-bottom:.4rem}
.kick{font:700 .78rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 .35rem}
.card.hero{width:min(34rem,43vw)}
.card.hero h1{font-size:clamp(1.8rem,3.1vw,2.7rem);margin:.15rem 0 .9rem}
.deck{font-size:1.12rem;color:var(--ink2)}
.cue{font:600 .88rem/1.3 var(--sans);color:var(--muted);display:flex;align-items:center;gap:.5rem;margin-top:.9rem}
.cue svg{flex:none;color:var(--accent)}
.srcs{font:500 .82rem/1.4 var(--sans);color:var(--muted);margin-top:.5rem}
.srcs a{color:var(--muted)}
.fig{margin:.2rem 0 .9rem}
.figs{display:grid;grid-template-columns:1fr;gap:.6rem}
.fig img{display:block;width:100%;height:auto;max-height:15rem;object-fit:cover;object-position:center 30%;border-radius:8px;border:1px solid var(--line-soft);background:var(--bg2)}
.fig figcaption{font:500 .78rem/1.35 var(--sans);color:var(--muted);margin-top:.3rem}
.figs.two{grid-template-columns:1fr 1fr}
.figs.two img{max-height:11rem}

/* the reader's block */
.reader{margin:.4rem 0 .2rem}
.reader label{font:700 .9rem/1 var(--sans);display:flex;justify-content:space-between;gap:1rem;margin-bottom:.4rem}
.reader output{font-variant-numeric:tabular-nums;color:var(--accent)}
.reader input[type=range]{width:100%;accent-color:var(--accent);height:2.2rem;margin:0}
.reader .result{font-size:1.02rem;margin:.6rem 0 .3rem}
.reader .result strong{color:var(--ink)}
.note{font:500 .84rem/1.4 var(--sans);color:var(--muted)}

/* below the story */
.s{max-width:46rem;margin:0 auto;padding:3.4rem 16px 0}
.s h2{font-size:clamp(1.5rem,4.2vw,2.05rem);margin-bottom:1rem}
.s h2 a{color:inherit;text-decoration:none}
.s h3{font-size:1.15rem;margin:1.4rem 0 .5rem}
.tbl{width:100%;border-collapse:collapse;font:500 .95rem/1.4 var(--sans);margin:.5rem 0 1rem}
.tbl th,.tbl td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl th{font-weight:700;color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}
.tblwrap{overflow-x:auto}
.faq details{border-bottom:1px solid var(--line-soft);padding:.7rem 0}
.faq summary{cursor:pointer;font-weight:600;font-family:var(--serif);font-size:1.12rem;list-style-position:outside}
.faq summary:focus-visible{outline-offset:4px}
.faq p{margin:.5rem 0 0}
.srclist{padding-left:1.1rem}
.srclist li{margin:.5rem 0}
.srclinks{font:500 .9rem/1.5 var(--sans);color:var(--muted)}

/* share row */
.share-row{max-width:46rem;margin:2.8rem auto 0;padding:0 16px;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.share-label{font:600 .85rem/1 var(--sans);color:var(--muted);margin-right:.3rem}
.sh{width:40px;height:40px;display:inline-grid;place-items:center;border:1px solid var(--line-soft);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.sh:hover,.sh:focus-visible{color:var(--accent);border-color:var(--accent)}
.copied{font:600 .85rem/1 var(--sans);color:var(--muted);margin:0 0 0 .4rem;min-height:1em}
@media (pointer:coarse){.sh{width:44px;height:44px}}
.foot{max-width:46rem;margin:3rem auto 0;padding:1.5rem 16px 4rem;border-top:1px solid var(--line-soft);font:500 .92rem/1.5 var(--sans);color:var(--muted)}
.foot a{color:var(--muted)}
.nf{display:grid;place-items:center;min-height:100svh;text-align:center;padding:2rem}

/* phone and narrow windows: the ruler stays on top, the cards flow beneath */
@media (max-width:859px){
  .stage{height:44svh;z-index:5;box-shadow:0 8px 24px -16px rgb(0 0 0/.5)}
  .steps{margin-top:0}
  .step{min-height:68svh;align-items:flex-start;justify-content:center;padding:1rem 16px 22svh}
  .card,.card.hero{width:100%;padding:1.1rem 1.15rem}
  .card{font-size:1rem}
  .card h2{font-size:1.28rem}
  .card.hero h1{font-size:1.65rem}
  .fig img{max-height:9rem}
  .figs.two img{max-height:8rem}
}
@media (max-width:400px){.figs.two{grid-template-columns:1fr}}
@media print{.stage{display:none}.steps{margin-top:0}.step{min-height:0}}