@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}

/* Paper, brass and a surveyor's red. The dark theme is an observatory at night, not an
   inverted sheet of paper. */
:root{
  --paper:#f3ede1; --surface:#ebe3d3; --surface-2:#e2d8c4;
  --ink:#1b2333; --ink-2:#384256;
  --ink-3:#3d4253;
  --rule:#cbbfa6; --rule-strong:#a99a7c;
  --brass:#5b3c0c; --brass-soft:#b98a33;
  --survey:#79251b; --survey-soft:#c4553f;
  --sea:#dfe6e6; --land:#e7dfcd; --river:#b9c6c8;
  --focus:#1b4a8a;
  --shadow:0 1px 2px rgba(27,35,51,.10),0 8px 24px rgba(27,35,51,.07);
  --maxw:74rem; --measure:36rem; --bar:3.25rem;
  --r:10px;
}
:root[data-theme="dark"]{
  --paper:#0e1421; --surface:#161e2e; --surface-2:#1d273a;
  --ink:#eef2f8; --ink-2:#c3cddd; --ink-3:#9aa7bd;
  --rule:#2c3750; --rule-strong:#44536f;
  --brass:#e2b063; --brass-soft:#b98a33;
  --survey:#f08a72; --survey-soft:#c4553f;
  --sea:#0b1220; --land:#1b2537; --river:#33506a;
  --focus:#8fc0ff;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0e1421; --surface:#161e2e; --surface-2:#1d273a;
    --ink:#eef2f8; --ink-2:#c3cddd; --ink-3:#9aa7bd;
    --rule:#2c3750; --rule-strong:#44536f;
    --brass:#e2b063; --brass-soft:#b98a33;
    --survey:#f08a72; --survey-soft:#c4553f;
    --sea:#0b1220; --land:#1b2537; --river:#33506a;
    --focus:#8fc0ff;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px rgba(0,0,0,.35);
  }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
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.09rem); line-height:1.62;
  overflow-x:clip;
}
img{max-width:100%;height:auto}
a{color:var(--brass);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--survey)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}

/* ---------- 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}
.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,.topnav a[aria-current="true"]{color:var(--survey)}
.topnav a[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--survey)}
.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.75rem}
.chip:hover{border-color:var(--survey)}
.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:-.6rem;} /* 44px touch area, anchored to the button */
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}
.icon-btn:hover{color:var(--survey);border-color:var(--survey)}

main{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}
section{scroll-margin-top:calc(var(--bar) + 1rem)}

/* ---------- hero ---------- */
.hero{padding:clamp(2.2rem,6vw,4.5rem) 0 clamp(1.4rem,3vw,2.2rem);max-width:52rem}
h1{
  font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.08;
  font-size:clamp(2rem,1.2rem + 3.6vw,3.7rem);margin:0 0 1rem;letter-spacing:-.015em;
  text-wrap:balance;
}
.deck{font-size:clamp(1.06rem,1rem + .45vw,1.28rem);color:var(--ink-2);margin:0 0 1rem;max-width:44rem}
.kicker{
  font-family:"Fraunces",Georgia,serif;font-size:clamp(1.05rem,1rem + .5vw,1.35rem);
  color:var(--survey);margin:0 0 1.6rem;font-weight:600;max-width:34rem;
}
.stats{display:flex;flex-wrap:wrap;gap:clamp(1rem,4vw,2.6rem);border-top:1px solid var(--rule);padding-top:1.1rem}
.stat{display:flex;flex-direction:column;gap:.15rem;min-width:8rem}
.stat .n{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);font-weight:600;line-height:1;color:var(--ink)}
.stat .l{font-size:.82rem;color:var(--ink-3);max-width:13rem;line-height:1.35}

/* ---------- the story: sticky map beside the prose ---------- */
.story{display:grid;gap:clamp(1rem,3vw,2.5rem);margin:clamp(1.5rem,4vw,3rem) 0}
@media (min-width:62rem){ .story{grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:start} }
.stage-wrap{
  position:sticky;top:calc(var(--bar) + .5rem);z-index:20;
  background:var(--paper);padding-bottom:.4rem;
}
@media (min-width:62rem){ .stage-wrap{order:2} .prose{order:1} }
.stage{
  border:1px solid var(--rule);border-radius:var(--r);background:var(--sea);
  overflow:hidden;box-shadow:var(--shadow);
}
.stage svg{display:block;width:100%;height:auto}
/* On a phone the map sits on top and must not eat the screen. No rem floor here: at 400% zoom
   a rem-based minimum fills the viewport and the prose disappears. */
@media (max-width:61.99rem){
  .stage{max-height:38svh}
  .stage svg{height:38svh;width:100%;object-fit:contain}
}
.stage-note{margin:.5rem 0 0;font-size:.82rem;color:var(--ink-3);min-height:1.2em}

.prose{max-width:var(--measure)}
.chapter{padding:clamp(1.6rem,5vw,3.4rem) 0;border-top:1px solid var(--rule)}
.chapter:first-child{border-top:0;padding-top:0}
.stamp{
  font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--brass);
  margin:0 0 .5rem;font-weight:700;
}
.chapter h2,.game h2,.tools h2,.figures h2,#limite h2,#surse h2{
  font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.16;
  font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);margin:0 0 .8rem;letter-spacing:-.01em;
}
h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.15rem;margin:0 0 .4rem}
.anchor{color:inherit;text-decoration:none;position:relative;display:inline-block}
.anchor::after{content:"";position:absolute;left:0;right:0;top:50%;height:2.75rem;transform:translateY(-50%)}
.anchor:hover{color:var(--survey)}
.chapter p{margin:0 0 1rem}

/* ---------- commit, then reveal ---------- */
.beat{
  margin:1.4rem 0 0;padding:1rem 1.1rem;background:var(--surface);
  border:1px solid var(--rule);border-left:3px solid var(--brass);border-radius:var(--r);
}
.beat-q{margin:0 0 .75rem;font-weight:700;color:var(--ink)}
.opts{display:flex;flex-direction:column;gap:.45rem}
.opt{
  font:inherit;font-size:.95rem;text-align:left;cursor:pointer;
  min-height:2.75rem;padding:.55rem .8rem;border:1px solid var(--rule-strong);
  border-radius:8px;background:var(--paper);color:var(--ink);
}
.opt:hover{border-color:var(--brass);color:var(--brass)}
.opt[aria-pressed="true"]{background:var(--surface-2);border-color:var(--brass);font-weight:700}
.opt.is-right{border-color:var(--brass);box-shadow:inset 3px 0 0 var(--brass)}
.opt.is-wrong{border-color:var(--survey);box-shadow:inset 3px 0 0 var(--survey)}
.beat-reveal{margin:.85rem 0 0;padding-top:.8rem;border-top:1px dashed var(--rule-strong);color:var(--ink-2)}

/* ---------- the three tools ---------- */
.tools{padding:clamp(1.8rem,5vw,3.2rem) 0;border-top:1px solid var(--rule)}
.tool{margin:0 0 2.2rem;max-width:44rem}
.tool p{color:var(--ink-2);margin:0 0 1rem;max-width:var(--measure)}
.tool-body{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:1.1rem}
.circle-plot{display:block;width:100%;height:auto;background:var(--paper);border-radius:8px;border:1px solid var(--rule)}
.ctl{display:flex;flex-direction:column;gap:.35rem;margin:.9rem 0 0;font-size:.9rem;color:var(--ink-2)}
.ctl.check{flex-direction:row;align-items:center;gap:.55rem;min-height:2.75rem}
.ctl input[type="range"]{width:100%;min-height:2.75rem;accent-color:var(--survey)}
.ctl input[type="checkbox"]{width:1.15rem;height:1.15rem;accent-color:var(--survey)}
.ctl select{font:inherit;min-height:2.75rem;padding:.35rem .6rem;border:1px solid var(--rule-strong);border-radius:8px;background:var(--paper);color:var(--ink)}
.readout{margin:.8rem 0 0;color:var(--ink);font-size:.95rem}
.readout.big{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.2rem,1rem + 1vw,1.7rem);font-weight:600;margin:0}
.ticks{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-3);margin-top:.3rem}
.picks{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.9rem}

/* ---------- the numbers table (also the no-script truth) ---------- */
.figures{padding:clamp(1.8rem,5vw,3.2rem) 0;border-top:1px solid var(--rule)}
.fig-table{width:100%;border-collapse:collapse;font-size:.94rem}
.fig-table th,.fig-table td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--rule);vertical-align:top}
.fig-table th{font-weight:400;color:var(--ink-2);width:58%}
.fig-table td{font-weight:700;color:var(--ink)}

/* ---------- game ---------- */
.game{padding:clamp(1.8rem,5vw,3.2rem) 0;border-top:1px solid var(--rule)}
.lede{color:var(--ink-2);max-width:var(--measure)}
.qs{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.9rem}
.q{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:1rem 1.1rem;max-width:46rem}
.q-s{margin:0 0 .7rem;font-weight:600}
.q-btns{display:flex;gap:.5rem}
.q-btns .opt{min-width:7rem;text-align:center}
.q-why{margin-top:.85rem;padding-top:.8rem;border-top:1px dashed var(--rule-strong);color:var(--ink-2)}
.q-why p{margin:0 0 .4rem}
.q-src{font-size:.85rem;color:var(--ink-3)}
.score{margin:1.2rem 0 0;font-family:"Fraunces",Georgia,serif;font-size:1.2rem;font-weight:600;min-height:1.6em}
.game-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.btn{font:inherit;cursor:pointer;min-height:2.75rem;padding:.5rem 1rem;border:1px solid var(--rule-strong);border-radius:999px;background:var(--paper);color:var(--ink)}
.btn:hover{border-color:var(--survey);color:var(--survey)}

#limite,#surse{padding:clamp(1.8rem,5vw,3.2rem) 0;border-top:1px solid var(--rule)}
.limits,.srcs{max-width:44rem;padding-left:1.1rem;color:var(--ink-2)}
.limits li,.srcs li{margin:0 0 .6rem}
#surse p{max-width:var(--measure);color:var(--ink-2)}

.foot{max-width:var(--maxw);margin:0 auto;padding:2rem clamp(1rem,3vw,2rem) 3rem;border-top:1px solid var(--rule);color:var(--ink-3);font-size:.88rem}
.foot p{margin:.2rem 0}
/* Discrete link targets in lists and the footer get a finger, not a text strip. */
.foot a,.srcs a{display:inline-block;padding-block:.65rem;position:relative}

/* ---------- the map's own marks ---------- */
.m-sea{fill:var(--sea)}
.m-land{fill:var(--land);stroke:var(--rule);stroke-width:.7;vector-effect:non-scaling-stroke}
.m-border{fill:none;stroke:var(--rule-strong);stroke-width:.7;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.m-river{fill:none;stroke:var(--river);stroke-width:1.1;vector-effect:non-scaling-stroke}
.m-chain{fill:none;stroke:var(--survey);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.m-tri{fill:none;stroke:var(--survey-soft);stroke-width:.7;opacity:.55;vector-effect:non-scaling-stroke}
.m-st{fill:var(--survey)}
.m-st-dim{fill:var(--rule-strong)}
.m-label{fill:var(--ink);font-family:"Atkinson",sans-serif;font-weight:700;paint-order:stroke;
  stroke:var(--paper);stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.m-label-sm{fill:var(--ink-2);font-family:"Atkinson",sans-serif;paint-order:stroke;
  stroke:var(--paper);stroke-width:2.5px;vector-effect:non-scaling-stroke}
.m-gap{fill:none;stroke:var(--brass);stroke-width:2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.m-halo{fill:none;stroke:var(--brass);stroke-width:1.6;vector-effect:non-scaling-stroke}

.nf{display:grid;place-items:center;min-height:100svh;text-align:center}
.nf main{padding:2rem}

/* ---------- motion ---------- */
.chapter{transition:opacity .35s ease}
@media (min-width:62rem){
  .story.ready .chapter{opacity:.45}
  .story.ready .chapter.is-live{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  /* This must outrank the collapsed state above, or the reader it protects gets a dimmed page. */
  .story.ready .chapter,.story.ready .chapter.is-live{opacity:1}
}