@font-face{font-family:"Fraunces";src:url("fonts/Fraunces-display.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Atkinson";src:url("fonts/AtkinsonHyperlegibleNext.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* Snow light by day, a January night by lamplight after dark. Blue is the river under ice; amber is the fair's lanterns. */
:root{
  --paper:#f3f5f6; --surface:#e6ebee; --surface-2:#d8e0e5;
  --ink:#0f1a24; --ink-2:#26394a; --ink-3:#3a4d5e;
  --rule:#c9d3da; --rule-strong:#8fa0ad;
  --accent:#12507a; --accent-2:#0d3f63; --warm:#8a4a06;
  --card:rgba(243,245,246,.95);
  --focus:#8a4a06;
  --shadow:0 1px 2px rgba(15,26,36,.1),0 14px 36px rgba(15,26,36,.14);
  --frost-line:#ffffff;
  --map-bg:#e9edf0; --map-land:#e9e6df; --map-road:#cfc9bd; --map-water:#6d8797; --map-water-2:#8ea6b4;
  --ice:#f4f8fb; --ice-2:#e3edf3; --ice-edge:#9fb4c2; --crack:#a9bfcd;
  --bridge:#4a3d31; --bridge-house:#8a7a66; --label:#132330; --label-halo:rgba(244,242,236,.92);
  --walker:#1d2a36; --lamp:#ffb347;
  --booth-1:#9b3b2e; --booth-2:#2f5d7c; --booth-3:#b4822c; --booth-4:#4f6b3a; --booth-5:#6d4a7a; --snow:#ffffff;
  --stage-ink:#0f1a24; --stage-glass:rgba(243,245,246,.86); --smoke:#8a8474; --flake:#ffffff;
  --maxw:76rem; --measure:35rem; --bar:3.25rem; --r:12px;
}
:root[data-theme="dark"]{
  --paper:#0a1016; --surface:#121b23; --surface-2:#1a2630;
  --ink:#eef3f7; --ink-2:#cdd9e2; --ink-3:#adbdca;
  --rule:#26333e; --rule-strong:#4a5c6a;
  --accent:#9fd0f2; --accent-2:#c3e3fa; --warm:#ffc27a;
  --card:rgba(12,19,26,.93);
  --focus:#ffc27a;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 36px rgba(0,0,0,.45);
  --frost-line:#e8f4ff;
  --map-bg:#0b1219; --map-land:#0f1820; --map-road:#24323d; --map-water:#050a0f; --map-water-2:#1b2c3a;
  --ice:#c9dcea; --ice-2:#a9c2d4; --ice-edge:#6f8ba0; --crack:#88a3b8;
  --bridge:#8c7a66; --bridge-house:#3a322b; --label:#eef3f7; --label-halo:rgba(8,13,18,.9);
  --walker:#1a2530; --lamp:#ffb347;
  --booth-1:#7c3024; --booth-2:#2a4d66; --booth-3:#8f6822; --booth-4:#3e5530; --booth-5:#57405f; --snow:#dfe9f1;
  --stage-ink:#eef3f7; --stage-glass:rgba(10,16,22,.8); --smoke:#3b3a36; --flake:#e8f1f8;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0a1016; --surface:#121b23; --surface-2:#1a2630;
    --ink:#eef3f7; --ink-2:#cdd9e2; --ink-3:#adbdca;
    --rule:#26333e; --rule-strong:#4a5c6a;
    --accent:#9fd0f2; --accent-2:#c3e3fa; --warm:#ffc27a;
    --card:rgba(12,19,26,.93);
    --focus:#ffc27a;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 36px rgba(0,0,0,.45);
    --frost-line:#e8f4ff;
    --map-bg:#0b1219; --map-land:#0f1820; --map-road:#24323d; --map-water:#050a0f; --map-water-2:#1b2c3a;
    --ice:#c9dcea; --ice-2:#a9c2d4; --ice-edge:#6f8ba0; --crack:#88a3b8;
    --bridge:#8c7a66; --bridge-house:#3a322b; --label:#eef3f7; --label-halo:rgba(8,13,18,.9);
    --walker:#1a2530; --lamp:#ffb347;
    --booth-1:#7c3024; --booth-2:#2a4d66; --booth-3:#8f6822; --booth-4:#3e5530; --booth-5:#57405f; --snow:#dfe9f1;
    --stage-ink:#eef3f7; --stage-glass:rgba(10,16,22,.8); --smoke:#3b3a36; --flake:#e8f1f8;
  }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + .5rem)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.62;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--accent-2)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:560;line-height:1.1;letter-spacing:-.01em;margin:0 0 .6em;text-wrap:balance}
h2{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.7rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
blockquote{margin:1.2em 0;padding:0 0 0 1.1rem;border-left:3px solid var(--accent)}
blockquote p{font-family:"Fraunces",Georgia,serif;font-size:1.1em;line-height:1.45;font-style:italic;margin:0 0 .35em}
blockquote cite{font-style:normal;font-size:.85rem;color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.6rem;
  min-height:var(--bar);padding:0 clamp(.75rem,2vw,1.4rem);line-height:1;
  background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.topbar .home{font-family:"Fraunces",Georgia,serif;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;font-size:.95rem;display:flex;align-items:center;min-height:2.75rem}
.topnav{display:flex;gap:.85rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:0 1 auto}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--ink-2);text-decoration:none;white-space:nowrap;font-size:.9rem;display:flex;align-items:center;min-height:2.75rem}
.topnav a:hover{color:var(--accent)}
.spacer{flex:1 1 auto}
.chip{color:var(--ink-2);text-decoration:none;font-size:.85rem;white-space:nowrap;border:1px solid var(--rule);border-radius:999px;padding:.25rem .6rem;display:flex;align-items:center;min-height:2.2rem}
.chip:hover{border-color:var(--accent)}
.icon-btn{display:grid;place-items:center;width:2.1rem;height:2.1rem;flex:0 0 auto;border:1px solid var(--rule);border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;position:relative}
.icon-btn::after{content:"";position:absolute;inset:-.4rem}
.icon-btn svg{display:block}
.icon-btn:hover{color:var(--accent);border-color:var(--accent)}
@media (max-width:40rem){.topnav{display:none}}

/* ---------- reading rail ---------- */
.rail{display:none}
@media (min-width:88rem){
  .rail{display:flex;flex-direction:column;gap:.55rem;position:fixed;right:1.1rem;top:50%;transform:translateY(-50%);z-index:30}
  .rail a{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;min-height:1.4rem;text-decoration:none;color:var(--ink-2);font-size:.78rem}
  .rail a span{opacity:0;transition:opacity .2s;background:var(--paper);padding:.1rem .35rem;border-radius:4px;white-space:nowrap}
  .rail a:hover span,.rail a:focus-visible span{opacity:1}
  .rail a i{display:block;width:6px;height:6px;border-radius:50%;background:var(--rule-strong);transition:transform .2s,background .2s}
  .rail a[aria-current="true"] i{background:var(--accent);transform:scale(1.5)}
}
.anchor{color:inherit;text-decoration:none}
.anchor:hover{color:var(--accent)}

/* ---------- hero: the painting under frost ---------- */
.hero{position:relative;min-height:calc(100svh - var(--bar));display:grid;align-items:end;color:#f4f8fb;background:#0c141b;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(1.03);animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.1) translate(-1.5%,-1%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,14,20,.15) 0%,rgba(8,14,20,.3) 40%,rgba(8,14,20,.9) 86%)}
#frost{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:screen}
.hero-text{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 clamp(1rem,4vw,3rem) clamp(2rem,6vh,4rem)}
.kicker{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#cfe8fb;margin:0 0 1rem}
.hero h1{font-size:clamp(2.3rem,1.4rem + 4.4vw,5.2rem);max-width:16ch;margin:0 0 .35em;font-weight:520;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero h1 em{font-style:italic;color:#bfe3ff}
.deck{font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);max-width:37rem;color:#e6eff5;margin:0 0 1.4rem;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hero .cr{position:absolute;right:.8rem;bottom:.5rem;font-size:.7rem;color:rgba(244,248,251,.8);z-index:1;max-width:60%;text-align:right}
.hero .cr a{color:inherit}
.cue{display:inline-flex;align-items:center;gap:.5rem;color:#d7eeff;text-decoration:none;font-size:1rem;min-height:2.75rem;border:1px solid rgba(215,238,255,.45);border-radius:999px;padding:.2rem 1rem}
.cue:hover{color:#fff;border-color:#fff}
.cue svg{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}

/* ---------- the river story ---------- */
.story{position:relative;display:grid;background:var(--map-land)}
.stage-wrap{grid-area:1/1;position:sticky;top:var(--bar);height:calc(100svh - var(--bar));min-height:20rem;z-index:0}
.stage{position:absolute;inset:0;overflow:hidden;background:var(--map-land)}
.stage canvas{display:block;position:absolute;inset:0}
.stage-static{position:absolute;inset:0;display:grid;place-items:center}
.stage-static img{width:100%;height:100%;object-fit:contain}
.stage.live .stage-static{display:none}
.hud{position:absolute;top:.9rem;right:.9rem;max-width:min(22rem,60%);z-index:3;text-align:right;color:var(--stage-ink);pointer-events:none;
  background:var(--stage-glass);border-radius:10px;padding:.45rem .7rem;border:1px solid var(--rule)}
.hud .d{display:block;font-family:"Fraunces",Georgia,serif;font-size:clamp(1.15rem,1rem + .8vw,1.6rem);line-height:1.1}
.hud .t{display:block;font-size:.8rem;color:var(--ink-2);margin-top:.15rem;font-variant-numeric:tabular-nums}
.hud .t:empty{display:none}
html:not(.js) .hud,.stage:not(.live) .hud{visibility:hidden}
.mapnote{position:absolute;left:.9rem;bottom:.8rem;z-index:3;max-width:22rem;margin:0;font-size:.72rem;line-height:1.4;color:var(--ink-2);background:var(--stage-glass);border-radius:8px;padding:.35rem .6rem;pointer-events:none}
@media (max-width:62rem){.mapnote{display:none}}
@media (min-width:88rem){.hud{right:3.2rem}}

.prose{grid-area:1/1;position:relative;z-index:2;pointer-events:none;padding:30vh 0 40vh}
.chapter{min-height:120svh;padding:0 clamp(1rem,4vw,3rem);display:flex;align-items:flex-start}
.chapter:last-child{min-height:90svh}
.card{pointer-events:auto;max-width:27rem;background:var(--card);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r);padding:1.2rem 1.35rem 1.1rem;box-shadow:var(--shadow);
  backdrop-filter:blur(6px);transition:opacity .5s}
.js .chapter:not(.on) .card{opacity:.7}
.stamp{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem;font-weight:700}
.card h2{font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);margin-bottom:.5em}
.card p:last-child{margin-bottom:0}
.card blockquote{margin:.8em 0}
@media (max-width:62rem){
  .prose{padding:62svh 0 30svh}
  .chapter{align-items:flex-end;min-height:125svh}
  .card{max-width:34rem;margin:0 auto;font-size:.97rem}
}

/* ---------- blocks ---------- */
.block{max-width:var(--maxw);margin:0 auto;padding:clamp(3.5rem,8vw,7rem) clamp(1rem,4vw,3rem)}
.block > p,.block > blockquote,.block .lede{max-width:var(--measure)}
.block .lede{font-size:1.08em}
.eyebrow{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 .6rem}
.two{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (min-width:60rem){.two{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.fig{margin:0}
.fig .frame{background:var(--surface-2);border-radius:8px;overflow:hidden}
.fig img{width:100%;height:auto}
figcaption{font-size:.87rem;color:var(--ink-3);margin-top:.55rem;line-height:1.45}
figcaption .cr{display:block;font-size:.78rem;margin-top:.2rem}
.gallery{display:grid;gap:1.6rem;margin-top:2rem}
@media (min-width:56rem){.gallery{grid-template-columns:1fr 1fr}}

/* winter stripes */
.stripes{margin:2rem 0 0}
.stripes .scroll{overflow-x:auto;overscroll-behavior-x:contain}
.stripes svg{width:100%;min-width:680px;height:auto;display:block;touch-action:pan-x pan-y;cursor:crosshair}
.stripes .axis{font:12px Atkinson,system-ui,sans-serif;fill:var(--ink-3)}
.stripes .flag{fill:var(--ink)}
.stripes .flag-l{font:600 12px Atkinson,system-ui,sans-serif;fill:var(--ink)}
.stripes .bridge-l{font:600 12px Atkinson,system-ui,sans-serif;fill:var(--warm)}
.stripes .bridge-line{stroke:var(--warm);stroke-width:2;stroke-dasharray:5 4}
.stripes .cursor{fill:none;stroke:var(--ink);stroke-width:1.5}
.readout{min-height:3.2em;margin:.8rem 0 0;font-size:.95rem;color:var(--ink-2);max-width:44rem}
.readout b{color:var(--ink)}
.stripes label{display:block;font-size:.85rem;color:var(--ink-3);margin-top:.6rem}
.stripes input[type=range]{width:100%;accent-color:var(--accent);min-height:2.75rem}
html:not(.js) .stripes label,html:not(.js) .stripes input{display:none}
.legend{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--ink-3);margin-top:.4rem;flex-wrap:wrap}
.legend .ramp{display:inline-block;width:9rem;height:.7rem;border-radius:3px;background:linear-gradient(90deg,#08306b,#2171b5,#6baed6,#c6dbef,#fde0c5,#f4a582,#b2182b)}
.cold-table{border-collapse:collapse;margin:1.6rem 0 0;font-size:.95rem;min-width:min(100%,34rem)}
.cold-table th,.cold-table td{text-align:left;padding:.45rem .8rem .45rem 0;border-bottom:1px solid var(--rule)}
.cold-table td.n{font-variant-numeric:tabular-nums;text-align:right;padding-right:1.4rem}
.cold-table tr.no td{color:var(--ink)}
.cold-table tr.no td:first-child{font-weight:700}
.table-wrap{overflow-x:auto}

/* the printer */
.tipar{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:2rem}
@media (min-width:56rem){.tipar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.tipar label{display:block;font-weight:700;margin-bottom:.4rem}
.tipar input{width:100%;font:inherit;font-size:1.1rem;padding:.6rem .8rem;border:1px solid var(--rule-strong);border-radius:8px;background:var(--paper);color:var(--ink);min-height:2.9rem}
.card-print{background:#f6efdf;min-height:14rem;display:flex;flex-direction:column;justify-content:center;color:#1c140c;border-radius:4px;padding:clamp(1.4rem,4vw,2.4rem) clamp(1.2rem,4vw,2.2rem);text-align:center;font-family:"Fraunces",Georgia,serif;
  box-shadow:0 2px 3px rgba(0,0,0,.15),0 18px 40px rgba(0,0,0,.18);border:1px solid #d9ccb0;max-width:30rem;margin:0 auto;width:100%}
.card-print .rule{border-top:2px solid #1c140c;border-bottom:1px solid #1c140c;height:4px;margin:.6rem auto;width:70%}
.card-print .card-name{font-size:clamp(1.5rem,1.1rem + 2vw,2.3rem);font-weight:600;line-height:1.15;overflow-wrap:anywhere;margin:.4rem 0}
.card-print p{margin:.3rem 0;font-size:1.02rem;line-height:1.35}
.card-print .small{font-size:.9rem;font-style:italic}
.card-print.pressed .card-name{animation:press .45s ease-out}
@keyframes press{0%{opacity:.2;transform:scale(1.06);filter:blur(1.5px)}100%{opacity:1;transform:none;filter:none}}

/* myths */
.myths{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.2rem;max-width:52rem}
.myths li{border-left:3px solid var(--accent);padding:.2rem 0 .2rem 1rem}
.myths b{display:block;font-family:"Fraunces",Georgia,serif;font-size:1.15rem;margin-bottom:.2rem}
.verdict{display:inline-block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--warm);margin-bottom:.2rem}

.limits{padding-left:1.1rem;max-width:44rem}
.limits li{margin-bottom:.7rem}
.srcs{padding-left:1.1rem;max-width:52rem;font-size:.92rem}
.srcs li{margin-bottom:.45rem;overflow-wrap:anywhere}
.method{font-size:.92rem;color:var(--ink-2);max-width:44rem}

.foot{border-top:1px solid var(--rule);padding:2rem clamp(1rem,4vw,3rem) 3rem;font-size:.9rem;color:var(--ink-3);max-width:var(--maxw);margin:0 auto}
.foot a{color:var(--ink-2)}
.nf main{max-width:40rem;margin:20vh auto;padding:0 1rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js .chapter:not(.on) .card{opacity:1}
}
@media print{.rail,.topbar,.stage-wrap{display:none}.prose{padding:0}.card{box-shadow:none;opacity:1 !important}}