:root{
--bg:#f7f3e8;--bg-soft:#eee7d3;--panel:#fffdf6;--ink:#1d2733;--muted:#42505d;--line:#d9cfb4;
--accent:#8a1f15;--accent-ink:#ffffff;--accent-soft:#f6ddd6;
--sky1:#cfdff2;--sky2:#f7ecd4;--sun:#df9226;--ridge:#b9a77f;
--sea:#d7e6f4;--land:#e9e1cb;--lake:#cfe0f0;--river:#7fa8c9;--grat:#c3c9d4;
--r0:#b3352b;--r1:#1f6f8b;--r2:#8a6d00;
--focus:#0f5f7a;--ok:#1e6e3e;--bad:#a93226;
--font-b:"Atkinson Hyperlegible Next",system-ui,sans-serif;
--font-d:"Fraunces Display",Georgia,serif;
}
html[data-theme="dark"]{
--bg:#0b1524;--bg-soft:#0f1d33;--panel:#12203a;--ink:#edf2f8;--muted:#a9b8c7;--line:#263a56;
--accent:#f09673;--accent-ink:#20100a;--accent-soft:#3a241c;
--sky1:#0b1524;--sky2:#1e3254;--sun:#e8d9b0;--ridge:#1c2c4c;
--sea:#10233d;--land:#1b2f4b;--lake:#16324f;--river:#4d7ea6;--grat:#2b3f5c;
--r0:#e8805f;--r1:#62c2e4;--r2:#e0b13c;
--focus:#7fd4ef;--ok:#7cc79a;--bad:#e8805f;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-b);font-size:1.075rem;line-height:1.68;overflow-x:clip;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--font-d);line-height:1.14;letter-spacing:.002em;margin:0 0 .5rem}
h1{font-size:clamp(2rem,5.4vw + 1rem,3.2rem);font-weight:600}
h2{font-size:clamp(1.5rem,3.4vw + .9rem,2.2rem);font-weight:600}
h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1rem}
a{color:var(--accent);text-underline-offset:.14em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums lining-nums}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.1rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:.6rem;top:-3rem;z-index:60;background:var(--panel);color:var(--ink);padding:.5rem .9rem;border-radius:.6rem;transition:top .15s}
.skip:focus{top:.6rem}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .4rem}
.lede{font-size:1.2rem}
.note{font-size:.92rem;color:var(--muted)}
.credit{display:block;font-size:.85rem;color:var(--muted)}
.byline{font-size:.92rem;color:var(--muted)}
/* topbar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.7rem;padding:.5rem .9rem;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .home{font-weight:700;color:var(--ink);text-decoration:none;font-size:.95rem;white-space:nowrap}
.topnav{display:flex;gap:.9rem;font-size:.92rem}
.topnav a{color:var(--muted);text-decoration:none}
.topnav a:hover,.topnav a.on{color:var(--ink);text-decoration:underline}
.topbar .spacer{flex:1}
.chip{border:1px solid var(--line);border-radius:999px;padding:.15rem .7rem;font-size:.85rem;color:var(--ink);text-decoration:none;background:var(--panel);text-transform:none}
.home-short,.chip-short{display:none}
@media(max-width:560px){.home-full,.chip-full{display:none}.home-short,.chip-short{display:inline}.chip-short{text-transform:uppercase}.topnav{gap:.6rem;font-size:.85rem}.topbar{gap:.5rem;padding:.5rem .6rem}}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);cursor:pointer}
/* rail */
.rail{display:none}
@media(min-width:1100px){.rail{position:fixed;right:1rem;top:50%;translate:0 -50%;z-index:40;display:flex;flex-direction:column;gap:.55rem}
.rail-dot{display:flex;align-items:center;gap:.5rem;flex-direction:row-reverse;text-decoration:none}
.rail-dot .dot{width:.7rem;height:.7rem;border-radius:50%;border:2px solid var(--muted);background:transparent}
.rail-dot .rail-label{font-size:.78rem;color:var(--muted);opacity:0;transition:opacity .15s}
.rail-dot:hover .rail-label,.rail-dot.on .rail-label{opacity:1}
.rail-dot.on .dot{background:var(--accent);border-color:var(--accent)}}
/* hero */
.hero{position:relative;overflow:clip}
.scene{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky1),var(--sky2) 78%)}
.stars{display:none}
html[data-theme="dark"] .stars{display:block;position:absolute;inset:0;background-image:radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),radial-gradient(1.1px 1.1px at 32% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 55% 26%,#fff,transparent),radial-gradient(1px 1px at 71% 10%,#fff,transparent),radial-gradient(1.3px 1.3px at 86% 30%,#fff,transparent),radial-gradient(1px 1px at 44% 34%,#fff,transparent),radial-gradient(1.2px 1.2px at 22% 44%,#fff,transparent),radial-gradient(1px 1px at 66% 42%,#fff,transparent)}
.sun{position:absolute;right:12%;top:16%;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 38% 35%,color-mix(in srgb,var(--sun) 55%,#fff),var(--sun) 72%)}
.flyer{position:absolute;top:0;color:var(--ink);opacity:.85}
.flyer svg{width:76px;height:23px;fill:currentColor}
.f1{left:-12%;top:22%}.f2{left:-20%;top:34%}.f3{left:-8%;top:46%}
.flyer svg{width:64px}
.f2 svg{width:88px}.f3 svg{width:52px}
@media(prefers-reduced-motion:no-preference){.f1{animation:glide 34s linear infinite}.f2{animation:glide 48s linear infinite 6s}.f3{animation:glide 28s linear infinite 14s}
@keyframes glide{from{translate:-15vw 0}to{translate:125vw -34px}}}
.ridge{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:110px;fill:var(--ridge);opacity:.75}
.hero-copy{position:relative;max-width:44rem;margin:0 auto;padding:4.2rem 1.1rem 5.4rem}
.hero .panel{background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:1.1rem;padding:1.6rem 1.5rem;box-shadow:0 14px 40px rgb(0 0 0/.14)}
.cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;padding:.7rem 1.2rem;border-radius:.8rem;margin:.4rem 0 1rem}
.cta:hover{text-decoration:underline}
.btn{font:inherit;font-weight:700;color:var(--ink);background:var(--panel);border:2px solid var(--ink);border-radius:.8rem;padding:.55rem 1.1rem;cursor:pointer}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn[disabled]{opacity:.45;cursor:default}
/* share */
.share{margin:1.2rem auto 0}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.share-row .lab{font-weight:700;margin-right:.3rem}
.share-row a,.share-row button{font-size:.92rem;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:.3rem .8rem;text-decoration:none;cursor:pointer;font-family:var(--font-b)}
.share-status{min-height:1.2em;font-size:.88rem;color:var(--muted);margin:.2rem 0 0}
.share-fallback{width:100%;min-height:4.5rem;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:.6rem;margin-top:.5rem}
/* chapters */
.chapter{padding:3.2rem 0 .6rem}
.chapter-head{margin-bottom:.4rem}
figure{margin:1.6rem auto;max-width:60rem;padding:0 1.1rem}
figure img{width:100%;height:auto;display:block;border-radius:.9rem;border:1px solid var(--line)}
figcaption{font-size:.92rem;color:var(--muted);margin-top:.5rem;max-width:44rem}
.fig-narrow img{max-width:26rem;margin:0 auto}
/* guess + sea + cuckoo cards */
.guess,.sea,.cuckoo,.height{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1.2rem 1.2rem .6rem;margin:1.4rem 0}
.sea .answers,.game .answers{display:flex;flex-wrap:wrap;gap:.6rem;margin:.4rem 0 1rem}
.sea .answers button,.game .answers button{font:inherit;font-weight:700;padding:.6rem 1.1rem;border-radius:.8rem;border:2px solid var(--ink);background:var(--bg);color:var(--ink);cursor:pointer}
.sea .answers button.picked{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.verdict{background:var(--bg-soft);border:1px solid var(--line);border-radius:.8rem;padding:.9rem 1rem;margin:0 0 1rem}
.verdict p:last-child{margin-bottom:0}
.cuckoo h3{margin-top:0}
/* sliders */
.slider label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:700}
.slider output{font-variant-numeric:tabular-nums}
input[type="range"]{width:100%;accent-color:var(--accent);height:2.2rem}
/* journey */
.journey{max-width:72rem;margin:1rem auto;padding:0 1.1rem}
.jmap-frame{position:sticky;top:3.2rem;z-index:5;border:1px solid var(--line);border-radius:1rem;overflow:clip;background:var(--sea)}
.jmap-frame>svg{display:block;width:100%;height:auto;aspect-ratio:1200/1585;max-height:38vh}
@media(min-width:900px){.journey{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.4rem;align-items:start}.jmap{position:sticky;top:3.2rem}.jmap-frame{position:static}.jmap-frame>svg{max-height:72vh}}
@media(max-width:899px){.journey{display:grid;grid-template-areas:"map" "controls" "static" "steps";gap:.6rem}.jmap{display:contents}.jmap-frame{grid-area:map}.jcontrols{grid-area:controls;margin:0}.journey-static{grid-area:static}.jsteps{grid-area:steps}}
.m-sea{fill:var(--sea)}.m-land{fill:var(--land);stroke:var(--line);stroke-width:1}.m-lake{fill:var(--lake)}.m-river{fill:none;stroke:var(--river);stroke-width:1.4;opacity:.8}.m-grat{fill:none;stroke:var(--grat);stroke-width:.8;opacity:.7}
.m-label{fill:var(--muted);font-family:var(--font-b);font-size:15px;font-style:italic;paint-order:stroke;stroke:var(--sea);stroke-width:3px}
.route .trace{fill:none;stroke-width:3;opacity:.28}
.route .done{fill:none;stroke-width:3.4;stroke-linecap:round}
.route[data-bird="DER AR445"] .trace,.route[data-bird="DER AR445"] .done{stroke:var(--r0)}
.route[data-bird="PLG 5P311"] .trace,.route[data-bird="PLG 5P311"] .done{stroke:var(--r1)}
.route[data-bird="Zozu (DER AL581)"] .trace,.route[data-bird="Zozu (DER AL581)"] .done{stroke:var(--r2)}
.route{opacity:.35}.route.on{opacity:1}
.route .nest{fill:var(--panel);stroke-width:3}
.route[data-bird="DER AR445"] .nest{stroke:var(--r0)}.route[data-bird="PLG 5P311"] .nest{stroke:var(--r1)}.route[data-bird="Zozu (DER AL581)"] .nest{stroke:var(--r2)}
.route .winter{stroke:none}
.route[data-bird="DER AR445"] .winter{fill:var(--r0)}.route[data-bird="PLG 5P311"] .winter{fill:var(--r1)}.route[data-bird="Zozu (DER AL581)"] .winter{fill:var(--r2)}
.route .marker{display:none}.route.on .marker{display:block}
.route .mk use{fill:var(--ink)}
.no-js .route.on .marker,.no-js .route .marker{display:none}
.town-dot{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.town-name{font-style:normal;font-weight:700;fill:var(--ink)}
.hud{position:absolute;left:.6rem;right:.6rem;bottom:.6rem;display:flex;gap:.6rem;justify-content:space-between;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:.8rem;padding:.45rem .8rem;font-size:.88rem}
.hud div{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.hud .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.no-js .hud{display:none}
.jcontrols{padding:.8rem 0}
.stage-pick{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem}
.pick{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-weight:700;font-size:.9rem;border:2px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:.3rem .8rem .3rem .4rem;cursor:pointer}
.pick[aria-pressed="true"]{border-color:var(--ink)}
.swatch{width:1.1rem;height:1.1rem;border-radius:50%}
.sw0{background:var(--r0)}.sw1{background:var(--r1)}.sw2{background:var(--r2)}
.scrub-row{display:flex;gap:.8rem;align-items:center}
.scrub-row .btn{white-space:nowrap}
.scrub{flex:1}
.town-row{display:flex;gap:.6rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}
.town-row label{font-weight:700}
.town-row select{font:inherit;color:var(--ink);background:var(--panel);border:2px solid var(--line);border-radius:.6rem;padding:.35rem .6rem;max-width:16rem}
.town-say{min-height:1.4em;font-weight:700;margin-top:.4rem}
.jsteps{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.9rem}
.jsteps li{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1rem 1.1rem .4rem;opacity:.75}
.jsteps li.on{opacity:1;border-color:var(--ink);box-shadow:0 8px 26px rgb(0 0 0/.12)}
.jsteps .when{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 .2rem}
.journey-static ul{margin:0;padding-left:1.2rem}
/* thermal */
.thermal svg{width:100%;height:auto;max-width:40rem;display:block;margin:0 auto}
.th-col{fill:var(--accent-soft);opacity:.7}
.th-spiral{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.th-glide{stroke:var(--ink);stroke-width:3;stroke-dasharray:9 7}
.th-bird use{fill:var(--ink)}
#th-arrow path{fill:var(--ink)}
/* rings */
.ring-cards{display:grid;gap:.7rem;margin:.6rem 0 1.2rem}
@media(min-width:640px){.ring-cards{grid-template-columns:repeat(3,1fr)}}
.ring-card{display:flex;flex-direction:column;gap:.2rem;background:var(--panel);border:2px solid var(--ink);border-radius:1rem;padding:.9rem 1rem;text-decoration:none}
.ring-no{font-weight:700;font-size:1.3rem;color:var(--ink)}
.ring-bird{font-size:.9rem;color:var(--muted)}
.ring-go{font-weight:700;margin-top:.3rem}
/* height */
.height-svg{width:100%;max-width:26rem;height:auto;display:block;margin:0 auto}
.h-ground{stroke:var(--ink);stroke-width:3}
.h-you use{fill:var(--r1)}
.h-stork use{stroke:var(--ink)}
.h-range line{stroke:var(--accent);stroke-width:3}
.height-say{font-weight:700}
/* game */
.game{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1.2rem}
.game-progress{list-style:none;display:flex;gap:.4rem;padding:0;margin:0 0 .4rem}
.game-progress li{width:1.6rem;height:.5rem;border-radius:999px;background:var(--line)}
.game-progress li.now{background:var(--muted)}.game-progress li.done{background:var(--muted)}
.game-progress li.good{background:var(--ok)}.game-progress li.bad{background:var(--bad)}
.game .q{font-size:1.25rem;font-weight:700}
.game .tag{font-weight:700}
.game .tag.good{color:var(--ok)}.game .tag.bad{color:var(--bad)}
.explain{background:var(--bg-soft);border:1px solid var(--line);border-radius:.8rem;padding:.9rem 1rem;margin:.6rem 0}
.result .score{font-size:1.4rem;font-weight:700}
.all-answers{padding-left:1.2rem;margin:.4rem 0}
.all-answers li{margin-bottom:.7rem}
.boom{position:relative;height:0}
.boom i{position:absolute;top:-1rem;width:.55rem;height:.9rem;border-radius:2px;background:var(--r0);animation:fall 1.8s ease-in forwards}
.boom i:nth-child(3n){background:var(--r1)}.boom i:nth-child(3n+1){background:var(--r2)}
@keyframes fall{to{translate:var(--dx) 190px;rotate:340deg;opacity:0}}
/* sources + footer */
.sources ul{padding-left:1.2rem}
.sources li{margin-bottom:.55rem}
.sources li::marker{color:var(--accent)}
.site-footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.2rem;text-align:center;color:var(--muted)}
.site-footer a{color:var(--ink)}
/* 404 */
.nf-main{padding:4rem 1.1rem;text-align:center}
/* reveal */
.reveal{opacity:1}
@media(prefers-reduced-motion:no-preference){.js .reveal{opacity:0;translate:0 14px;transition:opacity .5s ease,translate .5s ease}.js .reveal.on{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}