@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/ebgaramond-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/ebgaramond-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;font-display:swap;src:url(fonts/ebgaramond-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;font-display:swap;src:url(fonts/ebgaramond-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/IBMPlexSans-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:"IBM Plex Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/IBMPlexSans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Dark: threads glow on night. Light: the same threads as ink on paper. */
:root{
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:#f4efe5;--bg-2:#ebe3d4;--card:rgba(247,243,235,.93);--ink:#1d1710;--muted:#463b2c;--line:rgba(29,23,16,.24);--line-soft:rgba(29,23,16,.13);
  --accent:#8a3f00;--accent-2:#6b2f00;--focus:#8a3f00;--chip:rgba(29,23,16,.06);--bar:#8a3f00;--bar-2:rgba(138,63,0,.28);--dark-sky:#1c4aa6;
  --to-top-bg:#f4efe5;--to-top-fg:#1d1710;
  --vh:100vh;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#04060e;--bg-2:#0a0e1a;--card:rgba(6,9,19,.84);--ink:#f3ece0;--muted:#cfc5b4;--line:rgba(243,236,224,.24);--line-soft:rgba(243,236,224,.12);
  --accent:#ffc47a;--accent-2:#ffe0b0;--focus:#ffe0b0;--chip:rgba(243,236,224,.07);--bar:#ffc47a;--bar-2:rgba(255,196,122,.3);--dark-sky:#9ec2ff;
  --to-top-bg:#04060e;--to-top-fg:#f3ece0;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#04060e;--bg-2:#0a0e1a;--card:rgba(6,9,19,.84);--ink:#f3ece0;--muted:#cfc5b4;--line:rgba(243,236,224,.24);--line-soft:rgba(243,236,224,.12);
  --accent:#ffc47a;--accent-2:#ffe0b0;--focus:#ffe0b0;--chip:rgba(243,236,224,.07);--bar:#ffc47a;--bar-2:rgba(255,196,122,.3);--dark-sky:#9ec2ff;
  --to-top-bg:#04060e;--to-top-fg:#f3ece0;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.17rem/1.56 var(--serif);font-kerning:normal;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration-thickness:.07em;text-underline-offset:.15em}
a:hover{color:var(--accent-2)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--bg);color:var(--ink);padding:.5rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar: slim, takes the page tone */
.topbar{position:fixed;inset:0 0 auto 0;height:44px;z-index:40;display:flex;align-items:center;gap:.9rem;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
  background:color-mix(in srgb,var(--bg) 94%,transparent);color:var(--ink);font:500 .82rem/1 var(--sans);letter-spacing:.02em;border-bottom:1px solid var(--line-soft);-webkit-backdrop-filter:none}
.topbar a{color:inherit;text-decoration:none}
.topbar .home{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;display:flex;align-items:center;gap:.45rem}
.topbar .home svg{width:16px;height:16px}
.topbar nav{display:flex;gap:1rem;margin-left:auto;align-items:center}
.topbar nav a{opacity:.85}.topbar nav a:hover{opacity:1}
.topbar .jump{display:none}
@media (min-width:1100px){body:not(.in-story) .topbar .jump{display:inline}}
.tbtn{appearance:none;background:transparent;border:1px solid var(--line);color:inherit;border-radius:999px;width:32px;height:32px;display:inline-grid;place-items:center;cursor:pointer;padding:0}
.tbtn svg{width:16px;height:16px}
.lang{border:1px solid var(--line);border-radius:999px;padding:.32rem .6rem}
.progress{position:fixed;left:0;top:43px;height:1px;width:100%;transform-origin:0 0;transform:scaleX(0);background:var(--accent);z-index:41;opacity:.7}

/* the story: a sticky stage and cards that pass over it */
.story{position:relative}
.stage-wrap{position:sticky;top:0;height:var(--vh);z-index:1}
#stage{position:absolute;inset:0;background:var(--bg);overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
#stage:active{cursor:grabbing}
#stage canvas{position:absolute;left:0;top:0;display:block}
#still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.no-gl #still{display:block}.no-gl #gl,.no-gl #ov{display:none}
.hint{position:absolute;right:18px;bottom:16px;font:500 .78rem/1 var(--sans);color:var(--muted);opacity:.8;pointer-events:none}
#legend{position:absolute;left:auto;right:18px;top:58px;display:flex;flex-direction:column;gap:.28rem;align-items:flex-end;font:500 .78rem/1.2 var(--sans);color:var(--muted);pointer-events:none;max-width:14rem}
#legend span{display:flex;align-items:center;gap:.45rem}
#legend i{width:18px;height:2px;background:var(--c);display:inline-block;border-radius:2px}
#legend i.sp{background:var(--muted);opacity:.6}
.steps{position:relative;z-index:2;margin-top:calc(-1 * var(--vh));pointer-events:none}
.step{min-height:calc(var(--vh) * .92);display:flex;align-items:center;padding:12vh max(4vw,24px) 12vh max(4vw,24px)}
.step:first-child{min-height:var(--vh);padding-top:64px}
.step:last-child{min-height:calc(var(--vh) * 1.0)}
.card{pointer-events:auto;max-width:31rem;background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:1.3rem 1.45rem 1.35rem;box-shadow:0 18px 60px -30px rgba(0,0,0,.45)}
.card h1{font:600 clamp(2rem,3.3vw,2.85rem)/1.06 var(--serif);margin:.2rem 0 .75rem;letter-spacing:-.005em}
.card h2{font:600 1.65rem/1.15 var(--serif);margin:.15rem 0 .6rem}
.card p{margin:.5rem 0}
.kicker{font:600 .74rem/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin:0 0 .25rem}
.deck{font-size:1.2rem}
.meta{font:400 .86rem/1.45 var(--sans);color:var(--muted)}
.step:first-child .card{max-width:34rem}

/* date picker */
.picker{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end;margin:.8rem 0 .4rem}
.picker label{display:flex;flex-direction:column;gap:.25rem;font:500 .78rem/1 var(--sans);color:var(--muted)}
select,input[type=search]{font:500 1rem/1.2 var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.55rem .65rem;min-height:44px}
.btn{appearance:none;font:500 .86rem/1 var(--sans);color:var(--ink);background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:.6rem .85rem;min-height:40px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.peaks{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0}
.peaks .btn{padding:.42rem .65rem;min-height:36px;font-size:.78rem}
@media (pointer:coarse){.peaks .btn{min-height:44px}}
.out{font-size:1.16rem;min-height:3.2em;border-left:2px solid var(--accent);padding:.15rem 0 .15rem .8rem;margin:.6rem 0}
.out b{font-weight:600}
.clear{appearance:none;background:none;border:0;color:var(--accent);font:500 .86rem/1 var(--sans);cursor:pointer;padding:.5rem 0;min-height:44px}

/* share row */
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.7rem 0 .2rem}
.share-row .lbl{font:500 .8rem/1 var(--sans);color:var(--muted);margin-right:.25rem}
.share-row a,.share-row button{width:40px;height:40px;display:inline-grid;place-items:center;border:1px solid var(--line-soft);border-radius:999px;color:var(--ink);background:transparent;cursor:pointer;padding:0}
.share-row a:hover,.share-row button:hover,.share-row a:focus-visible,.share-row button:focus-visible{border-color:var(--accent);color:var(--accent)}
.share-row svg{width:18px;height:18px}
@media (pointer:coarse){.share-row a,.share-row button{width:44px;height:44px}}
.share-row .meta{flex-basis:100%;min-height:1.2em}

/* page after the story */
.page{position:relative;z-index:3;background:var(--bg);border-top:1px solid var(--line-soft)}
.wrap{max-width:44rem;margin:0 auto;padding:3.2rem 22px 1rem}
.wide{max-width:62rem}
.page h2{font:600 2rem/1.15 var(--serif);margin:0 0 .7rem}
.page h3{font:600 1.3rem/1.2 var(--serif);margin:1.6rem 0 .4rem}
.calc{margin:1rem 0 0}
.calc .row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end}
.calc label{display:flex;flex-direction:column;gap:.3rem;font:500 .8rem/1 var(--sans);color:var(--muted);flex:1 1 16rem}
.sugg{list-style:none;margin:.2rem 0 0;padding:0;border:1px solid var(--line-soft);border-radius:10px;max-height:16rem;overflow:auto;background:var(--bg)}
.sugg li button{all:unset;display:block;width:100%;box-sizing:border-box;padding:.6rem .75rem;font:400 .95rem/1.2 var(--sans);cursor:pointer;min-height:44px}
.sugg li button:hover,.sugg li button:focus-visible{background:var(--chip);outline:none}
.sugg small{color:var(--muted)}
.tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin:.9rem 0 .4rem}
.tabs .btn[aria-current="true"]{border-color:var(--accent);color:var(--accent)}
.answer{font-size:1.18rem;margin:.7rem 0}
.chart{width:100%;height:auto;display:block;margin:.4rem 0 .2rem;overflow:visible}
.chart text{font:500 11.5px var(--sans);fill:var(--muted)}
.chart .b1{fill:var(--bar)}.chart .b2{fill:var(--bar-2)}.chart .ax{stroke:var(--line);stroke-width:1}
.chart .moon{fill:var(--muted);opacity:.28}.chart .day{fill:var(--muted);opacity:.14}
.chart .dk{fill:none;stroke:var(--dark-sky);stroke-width:1.6;stroke-dasharray:3 3}
.keyrow{display:flex;flex-wrap:wrap;gap:1rem;font:500 .8rem/1.3 var(--sans);color:var(--muted)}
.keyrow i{display:inline-block;width:14px;height:10px;margin-right:.35rem;vertical-align:-1px;background:var(--bar)}
.keyrow i.k2{background:var(--bar-2)}.keyrow i.k4{background:var(--muted);opacity:.25}.keyrow i.k5{background:var(--muted);opacity:.45}.keyrow i.k3{background:none;border-top:2px dashed var(--dark-sky);height:0;width:16px}
.reset{display:inline-flex}
table{border-collapse:collapse;width:100%;font:400 .9rem/1.35 var(--sans)}
th,td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-weight:600;color:var(--muted)}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tablewrap{overflow-x:auto}
.sources{font:400 .9rem/1.45 var(--sans);padding-left:1.2rem}
.sources li{margin:.35rem 0}
.more{margin-top:.6rem}
footer{position:relative;z-index:3;background:var(--bg);border-top:1px solid var(--line-soft);font:400 .86rem/1.5 var(--sans);color:var(--muted)}
footer .wrap{padding:1.4rem 22px 2.4rem}

/* reading rail: hairline dots, out of the layout */
.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity .4s}
body.past-top .rail{opacity:1}
.rail a{position:relative;display:block;width:9px;height:9px;border-radius:50%;border:1px solid var(--muted);opacity:.7}
.rail a[aria-current="true"]{background:var(--accent);border-color:var(--accent);opacity:1}
.rail a span{position:absolute;right:16px;top:50%;transform:translateY(-50%);white-space:nowrap;font:500 .74rem/1 var(--sans);color:var(--ink);background:var(--card);padding:.25rem .45rem;border-radius:6px;opacity:0;pointer-events:none}
.rail a:hover span,.rail a:focus-visible span{opacity:1}
@media (max-width:1180px){.rail{display:none}}

/* phone: the stage keeps the top 40 % and the text never goes under it */
@media (max-width:860px){
  body{font-size:1.09rem}
  .topbar{background:var(--bg)}
  .stage-wrap{top:44px;height:calc(var(--vh) * .4);z-index:5;border-bottom:1px solid var(--line-soft)}
  .steps{margin-top:0}
  .step,.step:first-child,.step:last-child{min-height:auto;padding:1.2rem 14px 2.4rem;align-items:flex-start}
  .step:first-child{padding-top:1.2rem}
  .card{max-width:none;background:transparent;border:0;box-shadow:none;padding:0}
  .card h1{font-size:1.85rem}
  #legend{top:auto;bottom:8px;right:10px;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;max-width:70%;font-size:.7rem;gap:.2rem .6rem}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.stage-wrap,.topbar,.rail,.share-row{display:none}.steps{margin-top:0}.card{background:none;border:0;box-shadow:none}}