/* ══════════════════════════════════════════════════════════════════════════════
   FORECAST CITY — the shared design system
   Linked by every page; page-specific rules stay inline in the page that owns them.
   1961 bones, 2026 build. The sign vocabulary is period-correct MUTCD — the
   official blue #003f87, red #af1e2d and guide-sign green — set in Overpass,
   which is the libre relative of the FHWA Series the real signs are cut in. It
   sits on a modern substrate with selected light and dark palettes rather than
   an automatic flip.

   Every scale on the map was generated in OKLCH from those brand hues and
   validated: sequential ramps for sky and wind, a diverging pair about the
   freezing point for temperature, and three all-pairs-separable hues for
   precipitation phase. Because the marks are hairlines rather than filled
   areas, the pale end of every ramp is held to 2:1 against its own surface —
   a step that recedes into the paper does not dim a road, it erases it.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;
  --paper:#f3ede0;          /* the ground: map stock, not white */
  --paper2:#e9e0cd;
  --panel:#fbf7ee;
  --ink:#191510;
  --ink2:#4c463c;
  --mut:#8a8075;
  --line:#d8cfbb;
  --hair:rgba(25,21,16,.13);

  --blue:#003f87;           /* MUTCD interstate blue */
  --red:#af1e2d;            /* MUTCD shield red */
  --sign:#006b54;           /* guide-sign green */
  --sign-dk:#00513f;
  --gold:#b8860b;

  --casing:rgba(25,21,16,.34);
  --state:rgba(25,21,16,.10);
  --aux:rgba(25,21,16,.26);

  /* precipitation phase — validated all-pairs on this surface */
  --rain:#1d7635; --snow:#5e93e1; --ice:#8a235e;
  /* hazard status — the fixed reserved scale, never themed */
  --st-good:#0ca30c; --st-warn:#fab219; --st-serious:#ec835a; --st-crit:#d03b3b;

  --shadow:0 10px 30px rgba(25,21,16,.13);
  --rail-h:96px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0c1018; --paper2:#131a27; --panel:#141c2b;
    --ink:#f2ede2; --ink2:#b3ab9c; --mut:#7f7768;
    --line:#28313f; --hair:rgba(242,237,226,.14);
    --blue:#4d84cc; --red:#d1626c; --sign:#0e8b6c; --sign-dk:#0a6b53; --gold:#d8a531;
    --casing:rgba(242,237,226,.20); --state:rgba(242,237,226,.085); --aux:rgba(242,237,226,.22);
    --rain:#33974b; --snow:#2d67bb; --ice:#d35b9a;
    --shadow:0 10px 34px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0c1018; --paper2:#131a27; --panel:#141c2b;
  --ink:#f2ede2; --ink2:#b3ab9c; --mut:#7f7768;
  --line:#28313f; --hair:rgba(242,237,226,.14);
  --blue:#4d84cc; --red:#d1626c; --sign:#0e8b6c; --sign-dk:#0a6b53; --gold:#d8a531;
  --casing:rgba(242,237,226,.20); --state:rgba(242,237,226,.085); --aux:rgba(242,237,226,.22);
  --rain:#33974b; --snow:#2d67bb; --ice:#d35b9a;
  --shadow:0 10px 34px rgba(0,0,0,.55);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font:400 15px/1.5 Overpass,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'Overpass Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}

/* ── utility strip ─────────────────────────────────────────────────────────── */
.util{
  background:var(--blue); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}
.util .in{display:flex;align-items:center;gap:14px;padding:6px 16px;flex-wrap:wrap}
.util .dot{width:7px;height:7px;border-radius:50%;background:#7dd3a0;flex:none;
  box-shadow:0 0 0 3px rgba(125,211,160,.25)}
.util .sp{margin-left:auto}
.util b{font-weight:700;color:#ffd24a}
.util .hide-sm{display:none}
@media(min-width:760px){.util .hide-sm{display:inline}}

/* ── masthead: a guide sign ────────────────────────────────────────────────── */
.mast{display:flex;align-items:center;gap:14px;padding:12px 16px 10px;flex-wrap:wrap}
.plate{
  display:flex;align-items:center;gap:13px;
  background:var(--sign); border-radius:7px; padding:9px 16px 9px 13px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.30), var(--shadow);
}
.plate svg{display:block;flex:none}
.word{
  min-width:0;font-weight:900;font-size:clamp(19px,3.4vw,27px);line-height:1;letter-spacing:.005em;
  color:#fff; white-space:nowrap;
}
/* Button copy: the raised reflective buttons that formed the letters on signs of
   the period, before sheeting replaced them. Two layered backgrounds clipped to the
   glyphs — a white fill under a dot grid — so the wordmark reads as cast metal.
   Falls back to plain white where background-clip:text is unsupported. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .word{
    background-image:
      radial-gradient(circle at 50% 50%, rgba(0,0,0,.30) 30%, rgba(0,0,0,0) 32%),
      linear-gradient(#fff,#fff);
    background-size:5px 5px, 100% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}
.tag{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-top:3px}
.mast .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.ghost{
  background:transparent;border:1.5px solid var(--line);color:var(--ink2);
  border-radius:6px;padding:7px 11px;font:700 11px/1 Overpass;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;
}
.ghost:hover{border-color:var(--sign);color:var(--sign)}

/* ── control rail ──────────────────────────────────────────────────────────── */
.rail{padding:9px 16px 12px;display:flex;flex-direction:column;gap:9px}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;border:0;cursor:pointer;border-radius:6px;padding:8px 13px;
  background:var(--paper2);color:var(--ink2);
  font:800 11px/1 Overpass;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px var(--hair);
}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{
  background:var(--sign);color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.42);
}
.timeline{display:flex;align-items:center;gap:11px}
.play{
  flex:none;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:var(--blue);color:#fff;display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}
.play svg{display:block}
#slider{
  flex:1;-webkit-appearance:none;appearance:none;height:26px;background:transparent;cursor:pointer;
}
#slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--line),var(--line));box-shadow:inset 0 0 0 1px var(--hair)}
#slider::-moz-range-track{height:6px;border-radius:3px;background:var(--line)}
#slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:22px;margin-top:-8px;border-radius:3px;
  background:var(--sign);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 2px 6px rgba(0,0,0,.3);
}
#slider::-moz-range-thumb{width:16px;height:22px;border:0;border-radius:3px;background:var(--sign);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.stamp{
  flex:none;min-width:152px;text-align:right;
  font:700 12px/1.25 'Overpass Mono',monospace;letter-spacing:.05em;color:var(--ink);
}
.stamp small{display:block;font-size:10px;color:var(--mut);letter-spacing:.11em;
  text-transform:uppercase;margin-top:2px}

/* ── page body ─────────────────────────────────────────────────────────────── */
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.rule{display:flex;align-items:center;gap:13px;margin:44px 0 18px}
.rule h2{font:900 clamp(19px,3vw,26px)/1.1 Overpass;letter-spacing:-.01em;white-space:nowrap}
.rule .ln{flex:1;height:3px;background:var(--sign);border-radius:2px}
.rule .sub{font:700 10px/1 'Overpass Mono',monospace;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);white-space:nowrap}

.odo{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.odo > div{background:var(--panel);padding:14px 15px}
.odo .n{font:900 clamp(21px,3.4vw,30px)/1 Overpass;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.odo .l{font:700 10px/1.3 'Overpass Mono',monospace;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mut);margin-top:7px}
.odo .warnmi .n{color:var(--st-crit)}

.prose{max-width:66ch;color:var(--ink2);font-size:15.5px;line-height:1.62}
.prose p{margin:0 0 13px}
.prose strong{color:var(--ink);font-weight:700}
.prose code{font:600 13px/1 'Overpass Mono',monospace;background:var(--paper2);
  padding:2px 5px;border-radius:3px;color:var(--ink)}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:13px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:15px 16px}
.card h3{font:900 15px/1.2 Overpass;margin-bottom:7px}
.card p{font-size:13.5px;line-height:1.55;color:var(--ink2)}
.card .num{font:900 26px/1 Overpass;color:var(--sign);margin-bottom:6px}

/* route index */
.routes{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:9px}
.rt{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;transition:border-color .12s ease,transform .12s ease;
}
.rt:hover{border-color:var(--sign);transform:translateY(-2px)}
.rt.off{opacity:.55}
.rt.off .a{color:var(--mut);font-style:italic}
.rt svg{flex:none}
.rt .m{min-width:0}
.rt .a{font:800 12.5px/1.2 Overpass;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt .b{font:600 10px/1.3 'Overpass Mono',monospace;color:var(--mut);letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.rt .mi{margin-left:auto;font:700 11px/1 'Overpass Mono',monospace;color:var(--sign);flex:none}

footer{margin:56px 0 0;padding:26px 0 40px;border-top:1px solid var(--line)}
footer .prose{font-size:13.5px}
footer a{color:var(--sign);text-decoration:none;font-weight:700}
footer a:hover{text-decoration:underline}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}