/* Layout: atlas plate. A full-bleed hero map with a ledger rail, then a reading column where map plates break wide.
   Sections are grouped by what the reader is doing: Forecast, Classify, Detect, Diagnose. Light ground only. */
:root{
  color-scheme: light;
  --paper:#F5F7F7; --card:#FFFFFF; --ink:#0F2236; --ink-2:#34485D; --ink-3:#5B6D80; --hair:#D2DBE1; --hair-2:#E6ECEF;
  --ocean:#DCE8EE; --land:#F3F1EA; --coast:#8EA3B1;
  --rule:#FFCC00; --sign:#006B45; --sign-ink:#FFFFFF;
  --v0:#9DB8C4; --v1:#1F9E8A; --v2:#2A7AC4; --v3:#5747C4; --v4:#B8318F; --v5:#D7402F;
  --q-dry:#C9A25A; --q-wet:#173E8C;
  --display:"Overpass", "Helvetica Neue", Arial, sans-serif;
  --body:"Source Serif 4", "Iowan Old Style", Georgia, serif;
  --mono:"Overpass Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --s1:13px; --s2:15px; --s3:18px; --s4:22px; --s5:30px; --s6:44px; --s7:clamp(48px, 8.5vw, 108px);
  --gut:clamp(16px, 4vw, 48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--s3);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--v2);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--v2);outline-offset:2px;border-radius:3px}
.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--gut)}
.read{max-width:68ch}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;color:var(--ink)}
h2{font-size:clamp(28px,3.6vw,var(--s6));font-weight:800;line-height:1.08;letter-spacing:-.015em}
h3{font-size:var(--s4);font-weight:750;line-height:1.2}
p{margin:0}
.eyebrow{font-family:var(--display);font-size:var(--s1);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.eyebrow .grp{background:var(--ink);color:var(--paper);padding:3px 8px 2px;border-radius:2px;letter-spacing:.12em}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.unit{font-family:var(--display);font-size:.72em;color:var(--ink-3);font-weight:600;margin-left:2px}

/* ---------- network bar (guide sign) ---------- */
.netbar{background:var(--sign);color:var(--sign-ink);font-family:var(--display)}
.netbar .wrap{display:flex;align-items:center;gap:18px;padding-block:9px;flex-wrap:wrap}
.netbar .shield{font-weight:900;letter-spacing:.12em;font-size:var(--s1);text-transform:uppercase;border:2px solid var(--sign-ink);border-radius:5px;padding:3px 8px 1px}
.netbar nav{display:flex;gap:4px 18px;flex-wrap:wrap;font-size:var(--s2);font-weight:600}
.netbar nav a{color:var(--sign-ink);text-decoration:none;opacity:.92}
.netbar nav a:hover{opacity:1;text-decoration:underline}
.netbar nav a[aria-current]{opacity:1;border-bottom:2px solid var(--rule)}

/* ---------- masthead ---------- */
.mast{border-top:6px solid var(--rule);padding-block:30px 22px}
.mast .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px 48px;align-items:end}
.wordmark{font-family:var(--display);font-weight:900;font-size:var(--s7);line-height:.86;letter-spacing:-.03em;text-transform:uppercase;margin:0}
.wordmark .paren{display:block;font-family:var(--body);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:.30em;line-height:1;color:var(--ink-2);margin:.28em 0 .14em .06em}
.wordmark .rivers{background:linear-gradient(92deg,var(--v1) 0%,var(--v2) 30%,var(--v3) 58%,var(--v4) 82%,var(--v5) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;padding-bottom:.04em}
.deck{font-size:clamp(19px,1.7vw,22px);line-height:1.5;color:var(--ink-2);max-width:46ch}
.deck strong{color:var(--ink);font-weight:600}
.verbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.verbs a{font-family:var(--display);font-weight:700;font-size:var(--s2);text-decoration:none;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:5px 14px 3px;background:var(--card)}
.verbs a:hover{background:var(--ink);color:var(--paper)}

/* ---------- hero plate ---------- */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.plate{position:relative;background:var(--ocean);border:1px solid var(--hair);border-radius:4px;overflow:hidden}
.plate canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mapcol{position:relative;min-width:0}
.plate-cap{position:absolute;left:12px;top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;pointer-events:none}
.chip{font-family:var(--display);font-size:var(--s1);font-weight:700;background:rgba(255,255,255,.92);color:var(--ink);border:1px solid var(--hair);border-radius:3px;padding:4px 8px 2px;line-height:1.3}
.chip.demo{background:var(--rule);border-color:var(--rule)}
.legend{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);border:1px solid var(--hair);border-radius:3px;padding:8px 10px 6px;font-family:var(--display);font-size:var(--s1);color:var(--ink-2);pointer-events:none}
.legend .bar{display:grid;grid-template-columns:repeat(5,44px);height:10px;margin:5px 0 3px;border-radius:2px;overflow:hidden}
.legend .ticks{display:grid;grid-template-columns:repeat(5,44px);font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.legend b{color:var(--ink);font-weight:800}
.layers{position:absolute;right:12px;top:12px;z-index:3;display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.94);border:1px solid var(--hair);border-radius:3px;padding:8px 10px;font-family:var(--display);font-size:var(--s2);font-weight:600}
.layers label{display:flex;gap:8px;align-items:center;cursor:pointer;white-space:nowrap}
.layers input{accent-color:var(--ink);width:16px;height:16px;margin:0}
.tip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--ink);border-radius:3px;padding:6px 9px 4px;font-family:var(--display);font-size:var(--s2);line-height:1.35;color:var(--ink);box-shadow:0 4px 14px rgba(15,34,54,.14);white-space:nowrap;z-index:5}
.tip .num{font-weight:700}

.timebar{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--hair);border-radius:4px;padding:12px 14px}
.play{font-family:var(--display);font-weight:800;font-size:var(--s2);background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:9px 16px 7px;cursor:pointer;min-width:86px}
.play:hover{background:var(--v3)}
.track{display:grid;gap:6px;min-width:0}
.phases{display:grid;grid-template-columns:24fr 30fr 18fr 18fr 30fr;gap:3px}
.phases button{font-family:var(--display);font-size:var(--s1);font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:0;border-radius:2px;padding:5px 4px 3px;cursor:pointer;color:var(--ink-2);background:var(--hair-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phases button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
input[type=range]{width:100%;accent-color:var(--ink);margin:0;height:22px}
.fhr{font-family:var(--mono);font-weight:700;font-size:var(--s4);min-width:5.5ch;text-align:right}
.ticks24{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--ink-3);padding-inline:2px}

.ledger{background:var(--card);border:1px solid var(--hair);border-radius:4px;padding:18px 18px 14px;display:grid;gap:14px;align-content:start}
.ledger .badge{display:flex;align-items:center;gap:14px}
.rank{font-family:var(--display);font-weight:900;color:#fff;border-radius:4px;padding:6px 12px 2px;font-size:44px;line-height:1;letter-spacing:-.02em;min-width:2.6em;text-align:center}
.rank small{font-size:.42em;font-weight:800;letter-spacing:.04em;display:block;margin-top:-2px;margin-bottom:4px}
.ledger .desc{font-family:var(--display);font-weight:700;font-size:var(--s3);line-height:1.25}
.ledger .desc span{display:block;font-weight:500;color:var(--ink-2);font-size:var(--s2);margin-top:3px}
.ledger dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-family:var(--display);font-size:var(--s2)}
.ledger dt{color:var(--ink-3);font-weight:600}
.ledger dd{margin:0;text-align:right;font-weight:700}
.ledger dd .num{font-size:var(--s3)}
.phase-pill{display:inline-block;color:#fff;border-radius:2px;padding:2px 7px 0;font-size:var(--s1);letter-spacing:.06em;text-transform:uppercase;font-weight:800}
.spark-h{font-family:var(--display);font-size:var(--s1);font-weight:700;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase}
.ledger svg{display:block;width:100%;height:auto}
.ledger .note{font-size:var(--s2);color:var(--ink-2);line-height:1.45;border-top:1px solid var(--hair-2);padding-top:10px}

/* ---------- section nav ---------- */
.secnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(245,247,247,.95);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--hair);margin-top:28px}
.secnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:8px}
.secnav .wrap::-webkit-scrollbar{display:none}
.secnav a{font-family:var(--display);font-weight:700;font-size:var(--s2);color:var(--ink-2);text-decoration:none;white-space:nowrap;padding:6px 11px 4px;border-radius:999px}
.secnav a:hover{background:var(--hair-2);color:var(--ink)}
.secnav .sep{width:1px;background:var(--hair);margin:4px 6px;flex:none}

/* ---------- sections ---------- */
section.sec{padding-block:64px 8px;scroll-margin-top:56px}
.sec-head{display:grid;gap:12px;margin-bottom:26px}
.sec-head .read{font-size:var(--s3);color:var(--ink-2)}
.panel{background:var(--card);border:1px solid var(--hair);border-radius:4px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cap{font-family:var(--display);font-size:var(--s2);color:var(--ink-2);line-height:1.45}
.cap b{color:var(--ink)}

/* lifecycle */
.life{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.life figure{margin:0;display:grid;gap:8px;align-content:start;min-width:0}
.life .mini{position:relative;aspect-ratio:4/3.2;border:1px solid var(--hair);border-radius:3px;overflow:hidden;background:var(--ocean);max-width:100%}
.life .mini canvas{position:absolute;inset:0;width:100%;height:100%}
.life .tag{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-top:4px solid var(--ink);padding-top:7px}
.life .tag h3{font-size:var(--s4);text-transform:uppercase;letter-spacing:.02em;font-weight:900}
.life .tag .num{font-size:var(--s2);color:var(--ink-2);font-weight:700}
.life figcaption{font-size:var(--s2);line-height:1.5;color:var(--ink-2)}
.life figcaption b{font-family:var(--display);color:var(--ink);font-weight:700}

/* hovmoller */
.hov-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.hov-box{position:relative;padding:12px;min-width:0}
.hov-box canvas{display:block;width:100%}
.aside{display:grid;gap:14px;align-content:start}
.aside .panel{padding:16px}
.coast-list{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-family:var(--display);font-size:var(--s2)}
.coast-list li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;border-bottom:1px solid var(--hair-2);padding-bottom:6px}
.mini-rank{font-family:var(--display);font-weight:900;color:#fff;border-radius:2px;padding:2px 6px 0;font-size:var(--s2);min-width:3.2em;text-align:center}

/* ensemble */
.stations{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.stations button,.tabs button,.levels button{font-family:var(--display);font-weight:700;font-size:var(--s2);border:1.5px solid var(--hair);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 13px 4px;cursor:pointer}
.stations button[aria-pressed="true"],.tabs button[aria-pressed="true"],.levels button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ens-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.ens-box{padding:12px;min-width:0}
.ens-box svg{display:block;min-width:620px;width:100%;height:auto}
.big{font-family:var(--display);font-weight:900;font-size:var(--s6);line-height:1;letter-spacing:-.02em}
.kv{font-family:var(--display);font-size:var(--s2);color:var(--ink-2);font-weight:600}
.hist{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-items:end;height:120px;margin-top:8px}
.hist div{display:grid;align-content:end;gap:4px;height:100%;text-align:center;font-family:var(--display);font-size:var(--s1);font-weight:800}
.hist i{display:block;border-radius:2px 2px 0 0;min-height:2px}

/* AR scale */
.scale-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start}
.ctrl{padding:20px;display:grid;gap:18px}
.ctrl label{font-family:var(--display);font-weight:700;font-size:var(--s2);display:flex;justify-content:space-between;gap:12px}
.ctrl output{font-family:var(--mono);font-weight:700;font-size:var(--s3)}
.result{display:flex;gap:16px;align-items:center;border-top:1px solid var(--hair-2);padding-top:16px}
.result .rank{font-size:58px}
.hb{display:grid;gap:5px}
.hb .rail{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--v1),var(--v2),var(--v3),var(--v4),var(--v5));position:relative}
.hb .rail i{position:absolute;top:-5px;width:4px;height:20px;background:var(--ink);border-radius:2px;transform:translateX(-2px);transition:left .25s}
.hb .ends{display:flex;justify-content:space-between;font-family:var(--display);font-size:var(--s1);font-weight:700;color:var(--ink-2)}
.presets{display:flex;gap:6px;flex-wrap:wrap}
.presets button{font-family:var(--display);font-weight:700;font-size:var(--s1);border:1px solid var(--hair);background:var(--paper);color:var(--ink);border-radius:3px;padding:5px 9px 3px;cursor:pointer}
.presets button:hover{border-color:var(--ink)}
.matrix{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:4px;font-family:var(--display);padding:16px}
.matrix .h{font-size:var(--s1);font-weight:800;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;align-self:end;padding:0 4px 4px;text-align:center}
.matrix .rh{font-size:var(--s2);font-weight:700;color:var(--ink);padding:0 10px 0 0;align-self:center;text-align:right;white-space:nowrap}
.matrix .rh span{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-3);font-weight:500}
.matrix .c{border-radius:3px;color:#fff;font-weight:900;font-size:var(--s4);text-align:center;padding:14px 4px 10px;transition:transform .15s, box-shadow .15s;outline:3px solid transparent;outline-offset:-3px}
.matrix .c.zero{background:var(--hair-2);color:var(--ink-3);font-size:var(--s2);font-weight:700}
.matrix .c.on{outline-color:var(--ink);box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink);transform:scale(1.03)}

/* detection lab */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.det-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.det-table{grid-column:1/-1}
.det-map{position:relative;aspect-ratio:16/10.5;max-width:100%}
.det-controls{display:grid;gap:12px;padding:16px}
.det-controls .row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;font-family:var(--display);font-weight:700;font-size:var(--s2)}
.method-note{font-size:var(--s3);color:var(--ink-2);line-height:1.55}
table.obj{width:100%;border-collapse:collapse;font-family:var(--display);font-size:var(--s2)}
table.obj th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);text-align:right;font-weight:800;padding:6px 8px;border-bottom:2px solid var(--ink);white-space:nowrap}
table.obj th:first-child,table.obj td:first-child{text-align:left}
table.obj td{padding:7px 8px;border-bottom:1px solid var(--hair-2);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.obj td.v{text-align:left}
.ok,.no{display:inline-block;border-radius:2px;padding:1px 6px 0;font-weight:800;font-size:12px;letter-spacing:.04em}
.ok{background:#DDF1EC;color:#0D5C4F}
.no{background:#F6E1DE;color:#8E2A1D}
.verdict{font-weight:900;border-radius:2px;padding:2px 8px 0;font-size:var(--s1);letter-spacing:.06em}
.verdict.ar{background:var(--ink);color:var(--paper)}
.verdict.not{background:var(--hair-2);color:var(--ink-2)}
.objno{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);font-weight:900;font-size:13px;margin-right:6px}

/* trajectories */
.traj-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
.traj-map{position:relative;aspect-ratio:16/11;max-width:100%}
.levels{display:flex;gap:6px;flex-wrap:wrap}
.attr{display:grid;gap:10px}
.attr .row{display:grid;grid-template-columns:118px minmax(0,1fr) 48px;gap:10px;align-items:center;font-family:var(--display);font-size:var(--s2);font-weight:700}
.attr .row .b{height:16px;background:var(--hair-2);border-radius:2px;overflow:hidden}
.attr .row .b i{display:block;height:100%}
.attr .row .p{text-align:right}
.qkey{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:var(--s1);font-weight:700;color:var(--ink-2)}
.qkey i{display:block;width:140px;height:10px;border-radius:2px;background:linear-gradient(90deg,var(--q-dry),#7FB27A,#2E9A9A,var(--q-wet))}

/* diagnose */
.diag-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.diag-grid .panel{padding:14px;min-width:0}
.diag-grid svg{display:block;width:100%;height:auto}

/* methods */
.refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ref{padding:16px 16px 14px;display:grid;gap:6px;align-content:start}
.ref .yr{font-family:var(--mono);font-weight:700;font-size:var(--s2);color:var(--ink-2)}
.ref h3{font-size:var(--s3)}
.ref p{font-size:var(--s2);line-height:1.5;color:var(--ink-2)}
.ref .use{font-family:var(--display);font-size:var(--s1);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--v3)}
.honest{margin-top:22px;padding:18px 20px;border-left:6px solid var(--rule);background:var(--card);font-size:var(--s2);line-height:1.55;color:var(--ink-2)}
.honest b{color:var(--ink);font-family:var(--display)}

footer.foot{margin-top:72px;background:var(--sign);color:var(--sign-ink);font-family:var(--display)}
footer.foot .wrap{padding-block:30px 36px;display:grid;gap:14px}
footer.foot .shield{display:inline-block;font-weight:900;letter-spacing:.12em;font-size:var(--s1);text-transform:uppercase;border:2px solid var(--sign-ink);border-radius:5px;padding:3px 8px 1px;justify-self:start}
footer.foot nav{display:flex;gap:6px 22px;flex-wrap:wrap;font-weight:700;font-size:var(--s3)}
footer.foot a{color:var(--sign-ink)}
footer.foot p{font-size:var(--s2);opacity:.92;max-width:70ch}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .timebar{order:2} .ledger{order:3}
  .life{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hov-grid,.ens-grid,.det-grid,.traj-grid,.scale-grid{grid-template-columns:minmax(0,1fr)}
  .refs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .mast .wrap{grid-template-columns:minmax(0,1fr)}
  .life{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diag-grid,.refs{grid-template-columns:minmax(0,1fr)}
  .layers{position:static;flex-direction:row;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
  .legend{left:auto;right:8px;bottom:8px;padding:5px 7px 4px}
  .legend .bar,.legend .ticks{grid-template-columns:repeat(5,30px)}
  .legend .ticks{font-size:10px}
  .timebar{grid-template-columns:auto minmax(0,1fr)}
  .timebar .fhr{grid-column:2;grid-row:1;justify-self:end}
  .timebar .track{grid-column:1/-1}
  .phases button{font-size:11px;letter-spacing:.02em}
  .matrix .c{font-size:var(--s3);padding:12px 2px 8px}
  .rank{font-size:36px}
}
@media (max-width:460px){ .life{grid-template-columns:minmax(0,1fr)} .plate-cap .chip:not(.demo){display:none} }