/* ══════════════════════════════════════════════════════════════════════
   Nobody's Road

   Mobile-first, down to 360px. Light and dark via prefers-color-scheme.

   Colour note (deliberate, not stylistic): the band ramp is SINGLE-HUE
   sequential navy-blue, matching the brand's deep-navy-on-cream identity.
   Red-to-green is prohibited here — it reads as a danger/safety scale,
   which this map does not make, and it is the exact ramp that fails
   red-green colour vision deficiency. Lightness, saturation AND line
   weight all carry the signal alongside hue, so the map still ranks
   correctly in greyscale or with any form of CVD. The four band colours
   are identical in light and dark mode because they sit on the same
   light basemap tiles either way; the ramp's dark end is pulled inward
   from pure near-black so it still reads against a dark-mode panel, and
   its pale end is pulled inward from pure pastel so it still reads
   against a cream/white panel — see app.js BANDS for the exact values
   and the contrast reasoning.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --band-solitude: #25498b;
  --band-quiet:    #3f6cb4;
  --band-easy:     #7e9bc5;
  --band-steady:   #a3b7cd;

  --bg:        #f6f4fb;
  --surface:   #ffffff;
  --surface-2: #efebf8;
  --ink:       #1d1a2b;
  --ink-2:     #55506b;
  --ink-3:     #7d7791;
  --line:      #ded8ef;
  --accent:    #25498b;
  --accent-ink:#ffffff;
  --shadow:    0 1px 3px rgba(29, 26, 43, .10), 0 6px 20px rgba(29, 26, 43, .07);
  --topbar-h:  56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #131020;
    --surface:   #1c1830;
    --surface-2: #262041;
    --ink:       #eeeaf8;
    --ink-2:     #b6aed0;
    --ink-3:     #8b83a6;
    --line:      #322b4d;
    --accent:    #a3b7cd;
    --accent-ink:#16233c;
    --shadow:    0 1px 3px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .38);
  }
}

* { box-sizing: border-box; }

/* The document scrolls (hero first, map below). The map application is
   its own full-viewport flex column — see .app — so everything inside it
   sizes exactly as it did before the hero existed. */
html, body {
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
em { font-style: normal; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   HERO / LANDING SECTION

   Generated by scripts/hero/ — do not hand-edit; rebuild and re-apply.

   EVERY rule below is scoped under .nr-root and every class is nr-*, so
   the hero cannot reach the map UI (which owns the unprefixed .band,
   .card, .legend, .topbar, .mark and .foot names) and the map cannot
   reach the hero. The hero's custom properties are all --nr-*, so its
   --nr-accent / --nr-ink / --nr-band-* never collide with the app's
   --accent, --accent-ink or --band-* tokens above.

   The legend illustration in the "rarest tier" section uses the app's
   real band ramp (--nr-band-solitude … --nr-band-steady are the same hex
   as app.js BANDS), so the landing page and the map agree on colour.
   ═══════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   Nobody's Road — landing page
   Self-contained: system fonts only, inline SVG only, zero runtime requests.
   ========================================================================== */ /* ---- tokens: light ------------------------------------------------------ */
.nr-root{--nr-paper-bg:#F5F1E7;   --nr-paper-ink:#16233C;  --nr-paper-mut:#4A5A75;
  --nr-paper-rule:rgba(22,35,60,.20); --nr-paper-hair:rgba(22,35,60,.12);
  --nr-navy-bg:#16233C;    --nr-navy-ink:#F2EDE3;   --nr-navy-mut:#AABCD2;
  --nr-navy-rule:rgba(242,237,227,.26); --nr-navy-hair:rgba(242,237,227,.14);
  --nr-foot-bg:#0F1C33;
  --nr-accent:#3F6488;          /* muted slate blue, on paper */
  --nr-accent-on-navy:#9FBFDC;  /* muted slate blue, on navy  */
  --nr-shield-bg:#E7D9B0;  --nr-shield-ink:#16233C; --nr-shield-line:#A8801F;
  --nr-btn-bg:#16233C;     --nr-btn-ink:#F5F1E7;    --nr-btn-bg-h:#233458;
  /* the map's own band ramp — identical hex to app.js BANDS */
  --nr-band-solitude:#25498b; --nr-band-quiet:#3f6cb4;
  --nr-band-easy:#7e9bc5;     --nr-band-steady:#a3b7cd;
  --nr-legend-surface:#ffffff; --nr-legend-edge:rgba(22,35,60,.22);
  --nr-contour:rgba(22,35,60,.115);
  --nr-map-fill:rgba(22,35,60,.032);
  --nr-map-terrain:rgba(22,35,60,.085);
  --nr-map-outline:rgba(22,35,60,.55);
  --nr-map-road:#3F6488;
  --nr-map-road-hi:#16233C;
  --nr-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --nr-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --nr-cond:"Avenir Next Condensed","Roboto Condensed","Arial Narrow",var(--nr-sans);
  --nr-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --nr-pad:clamp(1.25rem,4.4vw,4rem);}
/* ---- tokens: dark (a considered inversion, not a filter) ----------------- */
@media (prefers-color-scheme:dark){
  .nr-root{/* the "paper" bands become a warm-tinted deep slate; the "navy" bands go
     deeper still, so the light/dark alternation reads in the same direction */
  --nr-paper-bg:#151E2C;   --nr-paper-ink:#EDE6D8;  --nr-paper-mut:#9FADC2;
  --nr-paper-rule:rgba(237,230,216,.24); --nr-paper-hair:rgba(237,230,216,.13);
  --nr-navy-bg:#0A1220;    --nr-navy-ink:#EDE6D8;   --nr-navy-mut:#93A5BC;
  --nr-navy-rule:rgba(237,230,216,.22); --nr-navy-hair:rgba(237,230,216,.11);
  --nr-foot-bg:#060C16;
  --nr-accent:#89AFD4;
  --nr-accent-on-navy:#89AFD4;
  --nr-shield-bg:#3A331F;  --nr-shield-ink:#E8D9A6; --nr-shield-line:#B99B49;
  --nr-btn-bg:#E8DFCD;     --nr-btn-ink:#0F1826;    --nr-btn-bg-h:#F5EEE0;
  /* band ramp is fixed across themes — it sits on the same basemap either way */
  --nr-legend-surface:#1c1830; --nr-legend-edge:rgba(237,230,216,.20);
  --nr-contour:rgba(237,230,216,.085);
  --nr-map-fill:rgba(237,230,216,.035);
  --nr-map-terrain:rgba(237,230,216,.07);
  --nr-map-outline:rgba(237,230,216,.45);
  --nr-map-road:#7FA6CC;
  --nr-map-road-hi:#D9E6F3;}
}
/* ---- base --------------------------------------------------------------- */
.nr-root *,
.nr-root *::before,
.nr-root *::after{box-sizing:border-box}
.nr-root{-webkit-text-size-adjust:100%}
.nr-root{margin:0; overflow-x:hidden;
  font-family:var(--nr-sans); font-size:16px; line-height:1.55;
  background:var(--nr-paper-bg); color:var(--nr-paper-ink);
  -webkit-font-smoothing:antialiased;}
.nr-root img,
.nr-root svg{max-width:100%}
.nr-root h1,
.nr-root h2,
.nr-root h3,
.nr-root p,
.nr-root ul,
.nr-root figure,
.nr-root blockquote{margin:0}
.nr-root ul{padding:0;list-style:none}
.nr-root a{color:inherit}
.nr-root :focus-visible{outline:2px solid var(--nr-accent);outline-offset:3px;border-radius:2px}
.nr-root .nr-band{position:relative;padding:clamp(3rem,7vw,6rem) var(--nr-pad)}
.nr-root .nr-wrap{max-width:1180px;margin:0 auto;position:relative;z-index:1}
.nr-root .nr-band--paper{background:var(--nr-paper-bg);color:var(--nr-paper-ink);--nr-bandbg:var(--nr-paper-bg);
  --nr-ink:var(--nr-paper-ink); --nr-mut:var(--nr-paper-mut); --nr-rule:var(--nr-paper-rule);
  --nr-hair:var(--nr-paper-hair); --nr-acc:var(--nr-accent);}
.nr-root .nr-band--navy{background:var(--nr-navy-bg);color:var(--nr-navy-ink);--nr-bandbg:var(--nr-navy-bg);
  --nr-ink:var(--nr-navy-ink); --nr-mut:var(--nr-navy-mut); --nr-rule:var(--nr-navy-rule);
  --nr-hair:var(--nr-navy-hair); --nr-acc:var(--nr-accent-on-navy);}
/* shared type helpers */
.nr-root .nr-eyebrow{font-size:.6875rem;letter-spacing:.19em;text-transform:uppercase;
  font-weight:650;color:var(--nr-mut);}
.nr-root .nr-sec-label{text-align:center;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:650;color:var(--nr-mut);margin-bottom:2.75rem;}
.nr-root .nr-sec-label::after{content:"";display:block;width:34px;height:1px;background:var(--nr-rule);
  margin:.9rem auto 0;}
/* ==========================================================================
   1 — HERO
   ========================================================================== */
.nr-root .nr-hero{padding-top:clamp(1.1rem,2.6vw,1.75rem);overflow:hidden}
.nr-root .nr-hero-bg{position:absolute;inset:-8% -4%;width:108%;height:118%;
  z-index:0;pointer-events:none;}
.nr-root .nr-hero-bg .nr-ct{fill:none;stroke:var(--nr-contour);stroke-width:1.1;vector-effect:non-scaling-stroke}
.nr-root .nr-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding-bottom:clamp(2rem,5vw,3.75rem);}
.nr-root .nr-mark{display:flex;align-items:center;gap:.6rem;min-width:0}
.nr-root .nr-mark-glyph{width:30px;height:30px;flex:none}
.nr-root .nr-mark-glyph .nr-g-line{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.nr-root .nr-mark-glyph .nr-g-road{fill:none;stroke:var(--nr-accent);stroke-width:1.6;
  stroke-linecap:round;stroke-dasharray:3 2.6}
.nr-root .nr-mark-txt{font-family:var(--nr-cond);font-weight:800;font-size:clamp(.95rem,2.4vw,1.075rem);
  letter-spacing:.115em;text-transform:uppercase;white-space:nowrap;}
.nr-root .nr-coverage{display:flex;align-items:center;gap:.55rem;
  border:1px solid var(--nr-rule);border-radius:999px;padding:.4rem .85rem .4rem .7rem;}
.nr-root .nr-coverage svg{width:12px;height:16px;flex:none;fill:none;stroke:var(--nr-accent);
  stroke-width:1.5;stroke-linejoin:round}
.nr-root .nr-coverage b,
.nr-root .nr-coverage span{display:block;font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.35}
.nr-root .nr-coverage b{font-weight:700}
.nr-root .nr-coverage span{color:var(--nr-mut);font-weight:500}
.nr-root .nr-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,3.75rem);align-items:center;}
.nr-root h1{font-family:var(--nr-serif);font-weight:600;
  /* sized so both lines stay unbroken from 360px up to the 1180px cap */
  font-size:clamp(2rem,4.15vw,3.3rem);line-height:1.06;letter-spacing:-.018em;}
@media (max-width:900px){
  .nr-root h1{font-size:clamp(2rem,8.4vw,3.6rem)}
}
.nr-root h1 .nr-l{display:block}
.nr-root .nr-h-rule{width:62px;height:2px;background:var(--nr-ink);opacity:.85;margin:1.5rem 0 1.25rem;border:0}
.nr-root .nr-subhead{font-size:clamp(1rem,1.55vw,1.145rem);color:var(--nr-mut);max-width:44ch;line-height:1.55}
.nr-root .nr-pullquote{margin:1.75rem 0 0;padding:.15rem 0 .15rem 1.05rem;
  border-left:2px solid var(--nr-acc);
  font-family:var(--nr-serif);font-style:italic;font-size:clamp(1.02rem,1.7vw,1.19rem);
  line-height:1.45;max-width:30ch;}
.nr-root .nr-cta-row{margin-top:2.1rem}
.nr-root .nr-cta{display:inline-flex;align-items:center;gap:.65rem;
  background:var(--nr-btn-bg);color:var(--nr-btn-ink);
  text-decoration:none;border:1px solid var(--nr-btn-bg);
  padding:.92rem 1.6rem;border-radius:3px;
  font-family:var(--nr-cond);font-weight:750;font-size:.9375rem;
  letter-spacing:.13em;text-transform:uppercase;
  transition:background-color .16s ease,transform .16s ease;}
.nr-root .nr-cta:hover{background:var(--nr-btn-bg-h);border-color:var(--nr-btn-bg-h)}
.nr-root .nr-cta:active{transform:translateY(1px)}
.nr-root .nr-cta svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.nr-root .nr-cta-note{margin-top:.85rem;font-size:.8125rem;color:var(--nr-mut);letter-spacing:.01em}
.nr-root .nr-hero-map{margin:0;min-width:0}
.nr-root .nr-hero-map svg{display:block;width:100%;height:auto}
.nr-root .nr-map-fill{fill:var(--nr-map-fill)}
.nr-root .nr-tr{fill:none;stroke:var(--nr-map-terrain);stroke-width:.85;vector-effect:non-scaling-stroke}
.nr-root .nr-net{fill:none;stroke:var(--nr-map-road);stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round}
.nr-root .nr-featline{fill:none;stroke:var(--nr-map-road-hi);stroke-width:3.4;stroke-linecap:round;
  stroke-linejoin:round}
.nr-root .nr-st-outline{fill:none;stroke:var(--nr-map-outline);stroke-width:1.5;stroke-linejoin:round}
.nr-root .nr-st-label{fill:var(--nr-mut);font-family:var(--nr-cond);font-weight:750;font-size:26px;
  letter-spacing:.13em;text-anchor:middle;opacity:.62;
  stroke:var(--nr-bandbg);stroke-width:6px;paint-order:stroke fill}
.nr-root .nr-map-cap{margin-top:.9rem;font-size:.6875rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--nr-mut);text-align:right}
/* ==========================================================================
   2 — THE TRANSLATION
   ========================================================================== */
.nr-root .nr-trans-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:center;}
.nr-root .nr-trans-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(.75rem,2vw,1.35rem);
  align-items:stretch}
.nr-root .nr-tbox{border:1px solid var(--nr-rule);padding:clamp(1.15rem,2.6vw,1.85rem) 1rem;
  text-align:center;display:flex;flex-direction:column;justify-content:center;
  gap:.6rem;min-width:0;}
.nr-root .nr-tbox .nr-eyebrow{font-size:.625rem;letter-spacing:.17em}
.nr-root .nr-tbox-num{font-family:var(--nr-sans);font-weight:250;font-size:clamp(1.8rem,5.2vw,2.85rem);
  line-height:1;letter-spacing:-.01em;}
.nr-root .nr-tbox-num b{font-weight:400}
.nr-root .nr-tbox-sub{font-size:.6875rem;letter-spacing:.17em;text-transform:uppercase;color:var(--nr-mut)}
.nr-root .nr-tbox-felt{font-family:var(--nr-serif);font-size:clamp(1.25rem,3.4vw,1.85rem);line-height:1.18;
  font-weight:500;}
.nr-root .nr-arrow{align-self:center;flex:none}
.nr-root .nr-arrow svg{display:block;width:clamp(26px,4.5vw,44px);height:auto;fill:none;
  stroke:var(--nr-acc);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nr-root .nr-trans-copy p{font-size:clamp(1rem,1.5vw,1.09rem);color:var(--nr-mut);max-width:34ch}
.nr-root .nr-trans-copy .nr-kicker{margin-top:1.15rem;font-family:var(--nr-serif);font-style:italic;
  color:var(--nr-ink);font-size:clamp(1.1rem,2vw,1.32rem);line-height:1.35;}
/* ==========================================================================
   3 — PROOF IS ON THE MAP
   ========================================================================== */
.nr-root .nr-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--nr-rule);border:1px solid var(--nr-rule)}
.nr-root .nr-card{background:var(--nr-paper-bg);padding:1.35rem 1.15rem 1.5rem;display:flex;
  flex-direction:column;gap:.85rem;min-width:0}
.nr-root .nr-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
.nr-root .nr-card-id{min-width:0}
.nr-root .nr-card h3{font-family:var(--nr-cond);font-weight:750;font-size:1.02rem;line-height:1.2;
  letter-spacing:.005em}
.nr-root .nr-card-sub{margin-top:.3rem;font-size:.6875rem;letter-spacing:.06em;color:var(--nr-mut);
  text-transform:uppercase}
.nr-root .nr-shield{width:38px;height:40px;flex:none}
.nr-root .nr-shield-bg{fill:var(--nr-shield-bg)}
.nr-root .nr-shield-line{fill:none;stroke:var(--nr-shield-line);stroke-width:1.5}
.nr-root .nr-shield-num{fill:var(--nr-shield-ink);font-family:var(--nr-cond);font-weight:800;
  letter-spacing:.01em}
.nr-root .nr-card-fig{margin:0}
/* each sketch keeps its true north-up aspect; the box reserves equal height */
.nr-root .nr-figbox{height:104px;display:flex;align-items:center;justify-content:center}
.nr-root .nr-figbox svg{display:block;max-width:100%;max-height:104px;height:auto}
.nr-root .nr-road-shadow{fill:none;stroke:var(--nr-hair);stroke-width:5.5;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.nr-root .nr-road{fill:none;stroke:var(--nr-accent);stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.nr-root .nr-card-fig figcaption{margin-top:.55rem;font-size:.72rem;color:var(--nr-mut);line-height:1.4}
.nr-root .nr-card-aadt{margin-top:auto;padding-top:.7rem;border-top:1px solid var(--nr-hair);
  display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.nr-root .nr-card-aadt .nr-num{font-family:var(--nr-cond);font-weight:250;font-size:2.05rem;line-height:1;
  letter-spacing:-.015em}
.nr-root .nr-card-aadt .nr-unit{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nr-mut)}
.nr-root .nr-card-felt{font-family:var(--nr-serif);font-style:italic;font-size:.98rem;color:var(--nr-ink)}
.nr-root .nr-cards-note{margin-top:1.5rem;text-align:center;font-size:.75rem;color:var(--nr-mut);
  letter-spacing:.03em}
/* ==========================================================================
   3b — DESERT BAND (full-bleed engraving)
   ========================================================================== */
.nr-root .nr-desert-band{position:relative;background:var(--nr-paper-bg);color:var(--nr-paper-ink);
  --nr-ink:var(--nr-paper-ink);--nr-mut:var(--nr-paper-mut);--nr-rule:var(--nr-paper-rule);
  border-top:1px solid var(--nr-paper-hair);border-bottom:1px solid var(--nr-paper-hair);
  overflow:hidden;}
.nr-root .nr-desert-band svg{display:block;width:100%;height:clamp(230px,30vw,430px);}
.nr-root .nr-dz{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.nr-root .nr-d-sky{stroke-width:.9;opacity:.16}
.nr-root .nr-d-far{stroke-width:.9;opacity:.3}
.nr-root .nr-d-hz{stroke-width:1.1;opacity:.5}
.nr-root .nr-d-mesa{stroke-width:1.35;opacity:.78}
.nr-root .nr-d-hatch{stroke-width:.75;opacity:.3}
.nr-root .nr-d-ground{stroke-width:.85;opacity:.26}
.nr-root .nr-d-scrub{stroke-width:.95;opacity:.5}
.nr-root .nr-d-road{stroke-width:1.5;opacity:.85}
.nr-root .nr-d-centre{stroke-width:1.6;opacity:.62;stroke:var(--nr-centre-line);
  stroke-dasharray:16 20}
.nr-root{--nr-centre-line:#B7902E}
@media (prefers-color-scheme:dark){
  .nr-root{--nr-centre-line:#C9A64F}
}
.nr-root .nr-desert-quote{position:absolute;top:clamp(1.4rem,4.2vw,3rem);left:50%;transform:translateX(-50%);
  width:min(92%,42ch);margin:0;text-align:center;z-index:1;
  font-family:var(--nr-serif);font-style:italic;line-height:1.3;
  font-size:clamp(1.15rem,3vw,2rem);letter-spacing:-.005em;}
@media (max-width:620px){
  .nr-root .nr-desert-band svg{height:250px}
  .nr-root .nr-desert-quote{top:1.15rem}
}
/* ==========================================================================
   4 — RAREST TIER
   ========================================================================== */
.nr-root .nr-rare-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.62fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center;}
.nr-root .nr-rare-states svg{display:block;width:100%;height:auto}
.nr-root .nr-rare-states .nr-st-outline{stroke:var(--nr-acc);stroke-width:1.6;opacity:.9}
.nr-root .nr-rare-states .nr-st-fill{fill:var(--nr-acc);opacity:.07}
.nr-root .nr-rare-states .nr-st-label{fill:var(--nr-ink);opacity:.75;font-size:38px}
.nr-root .nr-rare-states .nr-net{stroke:var(--nr-acc);stroke-width:1.1;opacity:.34}
.nr-root .nr-rare-copy{text-align:center}
.nr-root .nr-rare-copy .nr-eyebrow{display:block;margin-bottom:1.1rem}
.nr-root .nr-rare-big{font-family:var(--nr-cond);font-weight:700;line-height:1.02;letter-spacing:-.012em;
  font-size:clamp(1.85rem,5.6vw,3.35rem);text-transform:uppercase;}
.nr-root .nr-rare-sub{margin-top:1.15rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nr-mut);line-height:1.75;max-width:34ch;margin-inline:auto;}
/* The legend illustration uses the map's OWN four-band ramp and the map's
   own line weights — same hex values as app.js BANDS — so the landing page
   and the map read as one thing. Single-hue navy; explicitly not a
   red-to-green scale. The bars sit on the map-panel surface colour rather
   than the navy section background, because that is the surface they sit
   on in the app; in dark mode they carry the same faint ring the app's
   legend swatches carry, for the darkest band. */
.nr-root .nr-legend{display:flex;flex-direction:column;gap:.55rem}
.nr-root .nr-legend-cap{font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nr-mut)}
.nr-root .nr-legend-bars{display:flex;flex-direction:column;gap:.65rem;
  padding:.8rem .85rem;background:var(--nr-legend-surface);
  border:1px solid var(--nr-legend-edge);border-radius:6px}
.nr-root .nr-legend-bars i{display:block;width:100%;border-radius:1px}
.nr-root .nr-legend-bars .nr-lb-solitude{height:18px;background:var(--nr-band-solitude)}
.nr-root .nr-legend-bars .nr-lb-quiet{height:13px;background:var(--nr-band-quiet)}
.nr-root .nr-legend-bars .nr-lb-easy{height:9px; background:var(--nr-band-easy)}
.nr-root .nr-legend-bars .nr-lb-steady{height:6px; background:var(--nr-band-steady)}
.nr-root .nr-legend-note{font-size:.6875rem;line-height:1.5;color:var(--nr-mut)}
/* A 4-step single-hue ramp cannot clear 3:1 (WCAG 1.4.11, non-text) at BOTH
   ends against one surface: on white the pale end lands at 2.8:1 / 2.1:1, on
   the dark panel the deep end lands at 2.0:1. The app backstops the dark case
   with a faint ring on its legend swatches; this does the same in both
   directions, so every bar has a defined edge whichever theme you are in.
   Ring alphas chosen so the ring itself clears 3:1 on its own surface
   (light 0.55 -> 3.7:1 on #fff; dark 0.32 -> the app's existing value). */
.nr-root .nr-legend-bars i{box-shadow:0 0 0 1px rgba(22,35,60,.55)}
@media (prefers-color-scheme:dark){
  .nr-root .nr-legend-bars i{box-shadow:0 0 0 1px rgba(255,255,255,.32)}
}
/* ==========================================================================
   5 — HOW IT WORKS
   ========================================================================== */
.nr-root .nr-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3.4vw,2.75rem)}
.nr-root .nr-how-item{min-width:0}
.nr-root .nr-ico{width:56px;height:56px;display:block;margin-bottom:1.05rem}
.nr-root .nr-ico-ring{fill:none;stroke:var(--nr-rule);stroke-width:1.1}
.nr-root .nr-ico-art{fill:none;stroke:var(--nr-acc);stroke-width:1.5;stroke-linecap:round;
  stroke-linejoin:round}
.nr-root .nr-how-n{font-family:var(--nr-mono);font-size:.6875rem;letter-spacing:.16em;color:var(--nr-mut);
  margin-bottom:.5rem}
.nr-root .nr-how-t{font-size:.97rem;line-height:1.55;max-width:30ch}
/* ==========================================================================
   6 — FOOTER
   ========================================================================== */
.nr-root .nr-foot{background:var(--nr-foot-bg);color:var(--nr-navy-ink);
  --nr-ink:var(--nr-navy-ink);--nr-mut:var(--nr-navy-mut);--nr-rule:var(--nr-navy-rule);--nr-acc:var(--nr-accent-on-navy);
  padding:clamp(2.5rem,5vw,3.75rem) var(--nr-pad)}
.nr-root .nr-foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3rem);align-items:start}
.nr-root .nr-foot h2{font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--nr-mut);font-weight:650;margin-bottom:.85rem}
.nr-root .nr-foot p{font-size:.9rem;line-height:1.6;max-width:46ch}
.nr-root .nr-foot .nr-src-url{display:inline-block;margin-top:.6rem;font-family:var(--nr-mono);
  font-size:.78rem;color:var(--nr-acc);word-break:break-all}
.nr-root .nr-foot-right{display:flex;gap:1.25rem;align-items:flex-start;justify-content:flex-end}
.nr-root .nr-foot-right p{font-size:.82rem;color:var(--nr-mut);max-width:32ch;text-align:right}
.nr-root .nr-compass{width:52px;height:58px;flex:none;order:2}
.nr-root .nr-compass .nr-c-n{fill:var(--nr-mut);font-family:var(--nr-cond);font-weight:700;font-size:11px;
  letter-spacing:.12em}
.nr-root .nr-compass .nr-c-ring{fill:none;stroke:var(--nr-rule);stroke-width:1.1}
.nr-root .nr-compass .nr-c-tick{stroke:var(--nr-mut);stroke-width:1.1;stroke-linecap:round}
.nr-root .nr-compass .nr-c-needle{fill:var(--nr-acc);opacity:.9}
.nr-root .nr-compass .nr-c-needle-b{fill:var(--nr-mut);opacity:.5}
.nr-root .nr-foot .nr-foot-legal{max-width:none;margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid var(--nr-rule);
  font-size:.75rem;color:var(--nr-mut);display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap}
/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:1080px){
  .nr-root .nr-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nr-root .nr-rare-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);row-gap:2.25rem}
  .nr-root .nr-legend{grid-column:1 / -1;max-width:320px;margin-inline:auto;width:100%}
}
@media (max-width:900px){
  .nr-root .nr-hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .nr-root .nr-hero-map{order:2}
  .nr-root .nr-map-cap{text-align:left}
  .nr-root .nr-trans-grid{grid-template-columns:1fr;gap:2.25rem}
  .nr-root .nr-trans-copy p{max-width:none}
  .nr-root .nr-how{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.5rem}
  .nr-root .nr-foot-grid{grid-template-columns:1fr}
  .nr-root .nr-foot-right{justify-content:flex-start;flex-direction:row-reverse}
  .nr-root .nr-foot-right p{text-align:left}
}
@media (max-width:760px){
  .nr-root .nr-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .nr-root .nr-trans-pair{grid-template-columns:1fr;gap:0}
  .nr-root .nr-arrow{justify-self:center;padding:.7rem 0}
  .nr-root .nr-arrow svg{transform:rotate(90deg);width:26px}
  .nr-root .nr-rare-grid{grid-template-columns:1fr}
  .nr-root .nr-rare-states{max-width:300px;margin-inline:auto;width:100%}
}
@media (max-width:520px){
  .nr-root .nr-cards{grid-template-columns:1fr}
  .nr-root .nr-how{grid-template-columns:1fr;row-gap:2rem}
  .nr-root .nr-how-t{max-width:none}
  .nr-root .nr-coverage{padding:.35rem .7rem .35rem .6rem}
}
@media (prefers-reduced-motion:reduce){
  .nr-root *{transition:none!important;animation:none!important}
}
@media print{
  .nr-root .nr-hero-bg{display:none}
  .nr-root .nr-band{padding:1.5rem 0}
}

/* ══════════════════════════════════════════════════════════════════════
   END HERO
   ═══════════════════════════════════════════════════════════════════ */

/* ── top bar ──────────────────────────────────────────────────────── */

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: var(--topbar-h);
  padding: 0 12px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 1200;
}

.brand {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  color: inherit; text-decoration: none;
}
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background:
    linear-gradient(160deg, var(--band-solitude) 0%, var(--band-easy) 100%);
  position: relative;
  overflow: hidden;
}
.mark::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: 50%;
  height: 3px;
  background: rgba(255, 255, 255, .85);
  transform: translateY(-50%) rotate(-28deg);
  border-radius: 2px;
}

.brandtext { min-width: 0; }

.brandtext .bn {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  white-space: nowrap;
}

.brandtext p {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-toggle {
  flex: 0 0 auto;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  min-height: 36px;
}
.panel-toggle:active { transform: translateY(1px); }

/* ── layout ───────────────────────────────────────────────────────── */

/* One viewport tall, and the anchor target for the hero's "Open the map"
   button. dvh first-class where supported so the mobile URL bar does not
   crop the footer; vh is the fallback. */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.layout {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  min-height: 0;
}

.mapwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

#map {
  position: absolute;
  inset: 0;
  background: var(--surface-2);
}

/* Leaflet chrome, themed */
.leaflet-container { font: inherit; background: var(--surface-2); }
.leaflet-control-attribution {
  background: rgba(255, 255, 255, .82) !important;
  color: #333 !important;
  font-size: 10.5px !important;
}
.leaflet-control-attribution a { color: #2d2a55 !important; }
.leaflet-bar a {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-bottom-color: var(--line) !important;
}
.leaflet-bar a:hover { background: var(--surface-2) !important; }

.loading {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  z-index: 900;
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  box-shadow: var(--shadow);
}
.loading[hidden] { display: none; }

/* ── legend (over the map) ────────────────────────────────────────── */

.legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 800;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--ink-2);
  max-width: 58vw;
}
.legend h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.legend .row { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.legend .swatch { flex: 0 0 auto; width: 22px; border-radius: 2px; }
.legend .lbl { color: var(--ink); font-weight: 600; }

/* ── panel ────────────────────────────────────────────────────────── */

.panel {
  flex: 0 0 auto;
  background: var(--surface);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* mobile: full-bleed sheet over the map, toggled from the top bar */
@media (max-width: 799px) {
  .panel {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: none;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .panel.open { display: block; }
}

/* desktop: permanent left column */
@media (min-width: 800px) {
  .panel {
    width: 380px;
    border-right: 1px solid var(--line);
  }
  .panel-toggle { display: none; }
}

.view { padding: 14px 14px 20px; }

.block { margin-bottom: 22px; }
.block:last-child { margin-bottom: 0; }

.block h2 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.hint { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }

.fine {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 9px;
}
.fine:last-child { margin-bottom: 0; }

/* ── band filter chips ────────────────────────────────────────────── */

.bands { display: grid; gap: 7px; }

.band {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  min-height: 48px;
}
.band[aria-pressed="false"] { opacity: .42; }
.band:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.band .dot {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.band .txt { min-width: 0; flex: 1 1 auto; }
.band .nm { font-weight: 700; font-size: 13.5px; display: block; }
.band .sub { font-size: 11.5px; color: var(--ink-2); display: block; }
.band .ct { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── leaderboard ──────────────────────────────────────────────────── */

.leaderboard { display: grid; gap: 7px; }

.card {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-left-width: 4px;
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  min-height: 52px;
}
.card:hover { border-color: var(--line); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.card .rank {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.card .nm { font-weight: 700; font-size: 14px; }
.card .meta { font-size: 11.5px; color: var(--ink-2); }
.card .val { text-align: right; }
.card .val b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.card .val span { font-size: 10.5px; color: var(--ink-3); }

/* ── detail ───────────────────────────────────────────────────────── */

.back {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 4px 0 12px;
  cursor: pointer;
}

.detail-head { margin-bottom: 14px; }
.detail-head .nm {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.detail-head .where { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  /* text colour is set inline per-band in app.js (band.ink) — the ramp
     spans dark-navy-on-white to pale-blue-on-white and a single fixed
     text colour cannot hit 4.5:1 against both ends, so the darker two
     bands get white text and the paler two get dark ink text. */
}
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .85; }

.felt {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.felt .big {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.felt .cap { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
         border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.facts div { background: var(--surface); padding: 10px 12px; }
.facts dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
            color: var(--ink-3); margin-bottom: 2px; }
.facts dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.src { font-size: 11.5px; color: var(--ink-3); margin-top: 12px; line-height: 1.5; }

/* ── footer ───────────────────────────────────────────────────────── */

.citation {
  flex: 0 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 8px 12px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-3);
  text-align: center;
}
.citation .fine { font-size: 11px; color: var(--ink-3); margin: 2px 0 0; }

@media (max-width: 380px) {
  .brandtext p { display: none; }
  .legend { max-width: 50vw; font-size: 11px; }
}

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

/* Dark-end legibility: the deepest band colour (Solitude) is dark navy by
   design (see band ramp note up top), which pulls its contrast against
   the dark-mode panel surfaces low even after pulling the ramp's floor
   inward. A faint fixed ring on the small band-colour shapes (filter dot,
   legend swatch) guarantees they stay perceptible against ANY band
   colour, independent of the ramp maths — belt-and-suspenders, not a
   substitute for the ramp adjustment itself. */
@media (prefers-color-scheme: dark) {
  .band .dot,
  .legend .swatch {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .32);
  }
}