@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 700;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+2000-206F,U+2074,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 700;font-display:swap;src:url(fonts/ebgaramond-normal-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}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 700;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+2000-206F,U+2074,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 700;font-display:swap;src:url(fonts/ebgaramond-italic-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}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;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:400 600;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}

/* the map is one look (a night satellite view) in both themes; the theme switches the text */
:root{
  --map-bg:#070b11;--map-paqe:#ffa463;--map-ana:#9bd6ff;--map-ink:#f3ecdf;--map-mute:#cfc6b5;--map-spark:#fff4d8;
  --serif:"EB Garamond",Georgia,serif;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* light: dusk paper */
  --bg:#f3eee4;--card:#fffcf6;--ink:#1d1914;--muted:#4b4338;--line:#cdc2ae;--line-soft:#ddd3c1;
  --paqe:#80300a;--ana:#164a74;--accent:#8a3a0c;--on-paqe:#ffffff;--spark:#5a3a10;--bar:#efe8db;
  --vh100:100vh;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a0f17;--card:#0e1520;--ink:#efe8db;--muted:#c4bba9;--line:#2c3a4a;--line-soft:#1b2633;
  --paqe:#ffa463;--ana:#9bd6ff;--accent:#ffb27a;--spark:#fff4d8;--bar:#0a0f17;--on-paqe:#1a0d04;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a0f17;--card:#0e1520;--ink:#efe8db;--muted:#c4bba9;--line:#2c3a4a;--line-soft:#1b2633;
  --paqe:#ffa463;--ana:#9bd6ff;--accent:#ffb27a;--spark:#fff4d8;--bar:#0a0f17;--on-paqe:#1a0d04;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden],g[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.2rem/1.55 var(--serif);overflow-x:hidden}
a{color:var(--accent);text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:8px;top:8px;z-index:50;background:var(--card);padding:6px 10px}
h1,h2{font-weight:500;line-height:1.15;letter-spacing:-.005em}
h1{font-size:clamp(2rem,5.2vw,3.4rem);margin:.25em 0 .4em}
h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 .45em}
p{margin:0 0 .9em}
.wrap{max-width:44rem;margin:0 auto;padding:0 18px}
.wrap.wide{max-width:72rem}
.kicker{font:600 .78rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0}
.meta{font:400 .86rem/1.45 var(--sans);color:var(--muted)}
.deck{font-size:1.32rem;line-height:1.5}

/* topbar: slim, takes the page's night */
.topbar{position:fixed;inset:0 0 auto 0;height:44px;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 12px;
  background:var(--bar);border-bottom:1px solid var(--line-soft);font:500 .86rem/1 var(--sans)}
.topbar a{color:var(--ink);text-decoration:none}
.topbar .home{display:flex;align-items:center;gap:7px}
.topbar .home svg{width:20px;height:20px;color:var(--paqe)}
.topbar nav{display:flex;align-items:center;gap:2px}
.topbar .jump{padding:8px 9px;border-radius:6px;color:var(--muted)}
.topbar .jump:hover{color:var(--ink)}
.topbar .lang{padding:8px 9px;font-weight:600}
.tbtn{width:40px;height:40px;display:grid;place-items:center;background:none;border:0;color:var(--ink);cursor:pointer;border-radius:50%}
.tbtn svg{width:17px;height:17px}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;display:block;pointer-events:none}
.progress b{position:absolute;left:0;bottom:0;height:1px;width:100%;transform-origin:0 0;transform:scaleX(0);background:linear-gradient(90deg,var(--paqe),var(--ana))}
body.in-story .topbar .jump{display:none}
@media (max-width:720px){.topbar .jump{display:none}}

/* rail: hairline dots at the far edge, after the opening screen */
.rail{position:fixed;right:6px;top:50%;transform:translateY(-50%);z-index:25;display:flex;flex-direction:column;gap:2px;opacity:0;transition:opacity .4s;pointer-events:none}
body.railon .rail{opacity:1;pointer-events:auto}
.rail a{position:relative;display:block;width:22px;height:18px}
.rail a::after{content:"";position:absolute;right:8px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.55}
.rail a[aria-current]::after{background:var(--paqe);opacity:1;transform:scale(1.4)}
.rail a span{position:absolute;right:24px;top:0;white-space:nowrap;font:500 .76rem/18px var(--sans);color:var(--ink);background:var(--card);padding:0 6px;border-radius:4px;opacity:0;pointer-events:none}
.rail a:hover span,.rail a:focus-visible span{opacity:1}
@media (max-width:720px){.rail{display:none}}

/* hero */
.hero{padding:84px 0 28px;background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--paqe) 7%,transparent),transparent 70%)}
.shared-intro{font:500 1rem/1.4 var(--sans);color:var(--accent);margin:.6em 0 0}
.braid-fig{margin:26px 0 10px}
.braid-fig figcaption p{font-size:1.05rem;color:var(--muted)}
.braid-box{position:relative;max-width:1240px;margin:8px auto 0;padding:0 10px}
.braid{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.braid.v{display:none;max-width:440px;margin:0 auto}
@media (max-width:700px){.braid.h{display:none}.braid.v{display:block}}
.braid .th{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.braid .th.p{stroke:var(--paqe)}.braid .th.a{stroke:var(--ana)}
.braid .spark{stroke:var(--spark);stroke-width:1.7;stroke-linecap:round;opacity:.95}
.braid .endpt{stroke-width:2;fill:var(--bg)}
.braid .endpt.p{stroke:var(--paqe)}.braid .endpt.a{stroke:var(--ana)}
.braid .tick{stroke:var(--muted);stroke-width:1}
.braid .tl{font:500 12px var(--sans);fill:var(--muted);text-anchor:middle}
.braid.v .tl{font-size:13px}
.braid .an{font:500 13.5px var(--sans);fill:var(--ink)}
.braid.v .an{font-size:14px}
.braid .lead{stroke:var(--muted);stroke-width:.8;stroke-dasharray:2 3}
.braid .nm{font:italic 600 19px var(--serif)}
.braid .nm.p{fill:var(--paqe)}.braid .nm.a{fill:var(--ana)}
.braid .sc{stroke:var(--muted);stroke-width:1}
.braid .cursor line{stroke:var(--ink);stroke-width:1;opacity:.6}
.btip{position:absolute;z-index:3;pointer-events:none;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font:400 .86rem/1.35 var(--sans);max-width:260px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.btip b{font-weight:600}
.btip .p{color:var(--paqe)}.btip .a{color:var(--ana)}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:16px auto 0}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);
  font:500 .95rem/1 var(--sans);text-decoration:none;cursor:pointer}
.btn.primary{background:var(--paqe);border-color:var(--paqe);color:var(--on-paqe)}
.btn:hover{border-color:var(--accent)}

/* stage + story */
.scrolly{position:relative;margin-top:30px}
#stage{position:sticky;top:44px;height:calc(var(--vh100) - 44px);width:100%;overflow:hidden;background:var(--map-bg);z-index:1}
#map{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;left:14px;top:12px;display:flex;flex-direction:column;gap:3px;pointer-events:none;color:var(--map-ink);text-shadow:0 1px 3px #000,0 0 12px #000}
.hud-date{font:500 1.05rem/1.2 var(--sans);letter-spacing:.02em}
.hud-who{font:400 .82rem/1.2 var(--sans);color:var(--map-mute)}
.credit{position:absolute;right:10px;top:10px;margin:0;font:400 .7rem/1.3 var(--sans);color:var(--map-mute);text-shadow:0 1px 2px #000;max-width:70%;text-align:right}
.story{position:relative;z-index:2;margin-top:calc(-1 * (var(--vh100) - 44px))}
.step{min-height:105vh;display:flex;align-items:flex-start;padding:28vh 0 0}
.step:last-child{min-height:120vh}
.card{background:color-mix(in srgb,var(--card) 93%,transparent);border:1px solid var(--line-soft);border-radius:14px;padding:22px 24px 10px;max-width:31rem;
  margin-left:max(18px,calc(50vw - 36rem));box-shadow:0 10px 40px rgba(0,0,0,.28)}
.card h2{font-size:1.65rem}
.card p{font-size:1.12rem}
.fates{padding-left:1.1em;margin:0 0 .9em}
.fates li{margin:0 0 .6em;font-size:1.06rem}
@media (max-width:900px){
  #stage{height:calc(var(--vh100) * .42);z-index:4;box-shadow:0 6px 18px rgba(0,0,0,.35)}
  .story{margin-top:0}
  .step{min-height:auto;padding:0 0 22vh;display:block;scroll-margin-top:calc(var(--vh100) * .42 + 56px)}
  .step:first-child{padding-top:14px}
  .step:last-child{padding-bottom:30vh}
  .card{margin:0 12px;max-width:none;padding:18px 18px 8px;background:var(--card)}
  .card h2{font-size:1.45rem}
  .card p{font-size:1.08rem}
}

/* instrument */
.page{position:relative;z-index:3;background:var(--bg)}
.page section{padding:64px 0 24px}
.picker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 8px}
.picker label{font:500 .9rem/1 var(--sans);color:var(--muted)}
.picker input{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:500 1rem/1 var(--sans)}
.clear{min-height:40px;background:none;border:0;color:var(--accent);font:500 .9rem/1 var(--sans);cursor:pointer;padding:0 6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 16px}
.chip{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line-soft);background:transparent;color:var(--ink);font:400 .86rem/1 var(--sans);cursor:pointer}
.chip:hover,.chip[aria-current]{border-color:var(--paqe);color:var(--paqe)}
.daytext{font-size:1.2rem}
.daygrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:6px 0 10px}
@media (min-width:760px){.instrument .wrap{max-width:64rem}.daygrid{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}}
#daymap,#profile{width:100%;display:block;border-radius:10px;background:var(--map-bg)}
#daymap{aspect-ratio:1/1}
#profile{aspect-ratio:16/10}
.prof{margin:0}
.prof figcaption{font:400 .82rem/1.4 var(--sans);color:var(--muted);margin-top:6px}

/* table */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font:400 .9rem/1.4 var(--sans)}
th,td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line-soft)}
thead th{font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)}
tbody th{font:italic 600 1.1rem/1.2 var(--serif);color:var(--accent);white-space:nowrap}
@media (max-width:640px){table,thead,tbody,tr,th,td{display:block}thead{display:none}tr{padding:10px 0;border-bottom:1px solid var(--line)}td,tbody th{border:0;padding:2px 0}}

.sources{font:400 .85rem/1.45 var(--sans);color:var(--muted);padding-left:1.3em}
.sources li{margin:0 0 .4em}

/* share row */
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0}
.share-row .lbl{font:500 .82rem/1 var(--sans);color:var(--muted);margin-right:2px}
.share-row a,.share-row button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--ink);cursor:pointer}
.share-row a:hover,.share-row button:hover{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}}

footer{padding:30px 0 60px;border-top:1px solid var(--line-soft);font:400 .86rem/1.5 var(--sans);color:var(--muted)}
.page main.page,main.page{padding:80px 0}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
html:not(.js) #stage{display:none}
@media (max-width:900px){.credit{top:auto;bottom:24px;max-width:58%;font-size:.62rem}}