/* Ohio Hometown Atlas design tokens (Fable 5.1, 2026-09-15).
   These are the UI tokens. The 68 topic palettes stay in the engine's palette.css (extracted from template.html).
   The first 13 names below are the ones the engine already uses, so the map and the pages share one skin.
   Light is the default on bare :root; dark is redefined under prefers-color-scheme (unless data-theme="light")
   and again under [data-theme="dark"] so a manual toggle wins in both directions. */
:root{
  color-scheme:light;
  /* surfaces and ink (engine names) */
  --bg:#f2f4f6; --panel:#ffffff; --panel-2:#f7f9fa;
  --ink:#14212b; --muted:#5c6b78; --faint:#8a97a3;
  --line:#dbe1e6; --line-strong:#b9c3cc;
  --accent:#1d5fb3; --shadow:0 8px 28px rgba(20,33,43,.14);
  --font-display:"Bricolage Grotesque","IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  /* new */
  --accent-ink:#ffffff; --accent-soft:#e3edf9; --accent-line:#a9c6ea;
  --warm:#c9532a; --warm-soft:#fbe7dd;          /* big numbers, highlights; large text only (4.1:1 on white) */
  --ok:#1a7f4b; --warn:#b8741a; --bad:#b8321f;  /* compare arrows, status pills */
  --shadow-sm:0 1px 2px rgba(20,33,43,.08),0 2px 8px rgba(20,33,43,.06);
  --focus:var(--accent);
  /* type scale (px so the engine's 12-14 px rail copy lines up) */
  --fs-1:12px; --fs-2:13px; --fs-3:14px; --fs-4:16px; --fs-5:18px; --fs-6:22px; --fs-7:28px; --fs-8:36px; --fs-9:48px; --fs-10:64px;
  --lh-tight:1.1; --lh-snug:1.25; --lh-body:1.5;
  /* space, radius, layout, motion */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --r-1:6px; --r-2:8px; --r-3:12px; --r-4:16px; --r-pill:999px;
  --container:72rem; --prose:68ch; --rail:400px; --gutter:16px;
  --t-fast:150ms; --t-base:250ms; --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0f1620; --panel:#161f2a; --panel-2:#1b2530;
    --ink:#e8eef3; --muted:#9aa8b5; --faint:#6f7e8c;
    --line:#26313d; --line-strong:#3a4756;
    --accent:#79aef2; --shadow:0 8px 28px rgba(0,0,0,.55);
    --accent-ink:#0f1620; --accent-soft:#1c2f47; --accent-line:#2f5580;
    --warm:#ef8a5e; --warm-soft:#3a2418;
    --ok:#5fc48f; --warn:#e0a24a; --bad:#ff7a72;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1620; --panel:#161f2a; --panel-2:#1b2530;
  --ink:#e8eef3; --muted:#9aa8b5; --faint:#6f7e8c;
  --line:#26313d; --line-strong:#3a4756;
  --accent:#79aef2; --shadow:0 8px 28px rgba(0,0,0,.55);
  --accent-ink:#0f1620; --accent-soft:#1c2f47; --accent-line:#2f5580;
  --warm:#ef8a5e; --warm-soft:#3a2418;
  --ok:#5fc48f; --warn:#e0a24a; --bad:#ff7a72;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
}
@media (prefers-contrast: more){
  :root{ --muted:#3f4c57; --line:#9aa5ae; --line-strong:#6f7c88; }
  :root[data-theme="dark"], :root:not([data-theme="light"]){ }
}
/* Ohio Hometown Atlas base styles (Fable 5.1, 2026-09-15): reset, type, layout primitives, utilities. Loads after tokens.css. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-3);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;min-height:100dvh}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-display:swap;src:url("../fonts/bricolage-grotesque-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2")}

h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.015em;line-height:var(--lh-snug);margin:0 0 var(--s-3);text-wrap:balance;font-weight:700}
h1{font-size:var(--fs-8);font-weight:800;line-height:var(--lh-tight)}
h2{font-size:var(--fs-6)}
h3{font-size:var(--fs-5)}
h4{font-size:var(--fs-4)}
p{margin:0 0 var(--s-3)}
p:last-child{margin-bottom:0}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
a:hover{text-decoration-color:currentColor}
small,.small{font-size:var(--fs-1)}
b,strong{font-weight:600}
code,kbd,.mono{font-family:var(--font-mono);font-size:.92em}
ul,ol{margin:0 0 var(--s-3);padding-left:20px}
li{margin:0 0 var(--s-1)}
img,svg,video{max-width:100%;height:auto}
img{display:block}
figure{margin:0}
figcaption{font-size:var(--fs-1);color:var(--muted);margin-top:var(--s-1)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-5) 0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
table{border-collapse:collapse;width:100%;font-size:var(--fs-2)}
caption{text-align:left;font-weight:600;padding:0 0 var(--s-2)}
th,td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:var(--fs-1);letter-spacing:.04em;text-transform:uppercase}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
abbr[title]{text-decoration:underline dotted;text-underline-offset:2px}
dl.kv{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:6px 12px;margin:var(--s-3) 0 0;font-size:var(--fs-2)}
dl.kv dt{color:var(--muted)}
dl.kv dd{margin:0}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
::selection{background:var(--accent-soft)}

/* layout primitives */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:var(--prose)}
.stack>*+*{margin-top:var(--s-4)}
.stack-sm>*+*{margin-top:var(--s-2)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center}
.grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr))}
.grid-2{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media (min-width:760px){.grid-2{grid-template-columns:1fr 1fr}}
.with-rail{display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media (min-width:1000px){.with-rail{grid-template-columns:220px minmax(0,1fr)}}

/* text utilities */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s-2)}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}
.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:var(--s-3);top:-40px;background:var(--panel);color:var(--ink);padding:8px 12px;border-radius:var(--r-2);box-shadow:var(--shadow);z-index:100}
.skip-link:focus{top:var(--s-3)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important}
}
@media print{
  .site-header,.site-footer,.share-bar,.jump,.on-page,.btn{display:none!important}
  details{display:block}
  details>summary{display:none}
  a{color:inherit;text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555}
}
/* Ohio Hometown Atlas components (Fable 5.1, 2026-09-15). Loads after tokens.css and base.css.
   Class names here are the contract for the page templates and the map UI (site/templates, site/map/ui.js).
   The engine's own card classes (.card .source .kv .chain .lp .rn .syslist .facts .photo .also .chip ...) come
   from cards.css, extracted from template.html; do not restyle them here beyond the few overrides at the end. */

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .container{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-3) var(--s-4);align-items:center;min-height:56px;padding-block:var(--s-2)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:var(--fs-5);letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .mark{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 200deg,var(--c-erie,#2a78d6),var(--c-river,#1a9e6a),var(--c-gw,#e06030),var(--c-ohio,#6f3fb0),var(--c-erie,#2a78d6));flex:none}
.brand .short{display:none}
.site-nav{display:flex;gap:var(--s-4);font-size:var(--fs-2);font-weight:500}
.site-nav a{color:var(--muted);text-decoration:none;padding:6px 2px}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}
@media (max-width:640px){
  .site-header .container{grid-template-columns:auto auto;grid-template-rows:auto auto}
  .brand .long{display:none}.brand .short{display:inline}
  .site-search{grid-column:1 / -1;grid-row:2}
  .site-nav{justify-self:end;gap:var(--s-3)}
}
/* D-73: the home page's hero carries the one big search box, so the header's copy is hidden there (and only
   there); site/templates/home.html sets body.home. The header grid keeps brand left, nav right without it. */
body.home .site-header .site-search{display:none}

/* ---------- search (site-wide) ---------- */
.site-search{position:relative;max-width:34rem;width:100%}
.site-search input{width:100%;padding:10px 40px 10px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);background:var(--panel);font-size:var(--fs-4);outline:none;color:var(--ink)}
.site-search input::placeholder{color:var(--faint)}
.site-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.site-search .kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:1px 6px;pointer-events:none}
.site-search.big input{padding:16px 52px 16px 20px;font-size:var(--fs-5);box-shadow:var(--shadow-sm)}
.site-search .go{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow);z-index:50;max-height:min(60vh,380px);overflow:auto}
.suggest li{padding:8px 10px;border-radius:var(--r-1);cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
.suggest li[aria-selected="true"],.suggest li:hover{background:var(--panel-2)}
.suggest .k{font-family:var(--font-mono);font-size:12px;color:var(--muted);min-width:52px}
.suggest .t{font-weight:500}
.suggest .t small{display:block;font-weight:400;color:var(--muted);font-size:12px}

/* ---------- breadcrumb, jump nav, on-page rail ---------- */
.breadcrumb{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px;font-size:var(--fs-1);color:var(--muted)}
.breadcrumb li+li::before{content:"›";margin-right:6px;color:var(--faint)}
.breadcrumb a{color:var(--muted)}
.jump{position:sticky;top:56px;z-index:30;background:var(--bg);margin:var(--s-4) calc(-1 * var(--gutter)) 0;padding:var(--s-2) var(--gutter);display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;font-size:var(--fs-2);font-weight:500;color:var(--muted);text-decoration:none;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);white-space:nowrap}
.jump a[aria-current="true"],.jump a:hover{color:var(--ink);border-color:var(--line-strong)}
@media (min-width:1000px){.jump{display:none}}
.on-page{display:none}
@media (min-width:1000px){
  .on-page{display:block;position:sticky;top:76px;align-self:start;font-size:var(--fs-2)}
  .on-page ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
  .on-page li{margin:0}
  .on-page a{display:block;padding:5px 12px;color:var(--muted);text-decoration:none;border-left:2px solid transparent;margin-left:-2px}
  .on-page a:hover,.on-page a[aria-current="true"]{color:var(--ink);border-left-color:var(--accent)}
  .on-page .sub a{padding-left:24px;font-size:var(--fs-1)}
}

/* ---------- hero ---------- */
.hero{display:grid;gap:var(--s-5);grid-template-columns:1fr;padding:var(--s-5) 0 var(--s-4);align-items:start}
@media (min-width:760px){.hero{grid-template-columns:minmax(0,1fr) 180px}}
.hero .zipcode{font-family:var(--font-display);font-weight:800;font-size:clamp(44px,9vw,var(--fs-10));letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;margin:0}
.hero h1{margin:0}
.hero .names{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,4vw,var(--fs-7));letter-spacing:-.02em;line-height:1.1;margin:var(--s-1) 0 var(--s-2)}
.hero .sub{color:var(--muted);font-size:var(--fs-4);margin:0 0 var(--s-3)}
.hero .answer{font-size:var(--fs-4);line-height:1.45;max-width:var(--prose);margin:0 0 var(--s-4);padding:12px 14px;border-left:3px solid var(--accent);background:var(--panel);border-radius:0 var(--r-2) var(--r-2) 0}
.hero .answer b{font-weight:600}
.locator{width:100%;max-width:180px;justify-self:end}
.locator svg{display:block;width:100%;height:auto}
.locator .state{fill:var(--panel-2);stroke:var(--line-strong);stroke-width:1}
.locator .county{fill:var(--accent-soft);stroke:var(--accent-line);stroke-width:1}
.locator .unit{fill:var(--accent);stroke:var(--accent);stroke-width:1.2;stroke-linejoin:round}
.locator figcaption{text-align:right}

/* ---------- buttons, pills, chips ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);font-weight:500;font-size:var(--fs-3);text-decoration:none;cursor:pointer;line-height:1.2;white-space:nowrap}
.btn:hover{border-color:var(--ink)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06);border-color:var(--accent)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--accent)}
.btn-sm{min-height:32px;padding:5px 12px;font-size:var(--fs-2)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.btn{min-height:44px}}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;padding:2px 8px;border-radius:var(--r-pill);background:var(--panel-2);border:1px solid var(--line);color:var(--muted);vertical-align:middle;white-space:nowrap}
.pill.hi{color:var(--ink);border-color:var(--line-strong)}
.pill .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px;border:1px solid rgba(0,0,0,.1)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2);color:var(--muted)}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;border:1px solid rgba(0,0,0,.1);flex:none}

/* ---------- ten facts ---------- */
.facts-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));counter-reset:fact}
.fact{position:relative;padding:14px 14px 12px 16px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--panel);box-shadow:var(--shadow-sm);display:grid;gap:4px;border-left-width:4px}
.fact .fact-n{font-family:var(--font-display);font-weight:800;font-size:var(--fs-7);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.fact .fact-n small{font-size:var(--fs-3);font-weight:600;letter-spacing:0;color:var(--muted);margin-left:4px}
.fact .fact-t{font-size:var(--fs-3);line-height:1.4}
.fact .fact-src{font-size:var(--fs-1);color:var(--muted)}
.fact .fact-src a{color:var(--muted)}
.fact .fact-topic{position:absolute;right:12px;top:12px;font-size:11px;color:var(--faint);text-decoration:none}
.fact .fact-topic:hover{color:var(--ink)}

/* ---------- chapters and topics ---------- */
.section{padding:var(--s-6) 0 0}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-4)}
.section-head h2{margin:0;font-size:var(--fs-7)}
.section-head .blurb{color:var(--muted);max-width:var(--prose);margin:0}
.chapter{padding:var(--s-6) 0 0;border-top:1px solid var(--line);margin-top:var(--s-6)}
.chapter>.section-head{margin-bottom:var(--s-4)}
.topics{display:grid;gap:var(--s-3)}
.topic{border:1px solid var(--line);border-radius:var(--r-3);background:var(--panel);padding:14px 16px;scroll-margin-top:110px}
.topic-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin-bottom:6px}
.topic-head h3{margin:0;font-size:var(--fs-5);display:inline-flex;align-items:center;gap:8px}
.topic-head .pill{margin-left:auto}
.topic .lede{font-size:var(--fs-4);line-height:1.45;margin:0}
.topic .lede b{font-weight:600}
.topic .lede .m{display:block;color:var(--muted);font-size:var(--fs-2);margin-top:2px}
.topic .src{font-size:var(--fs-1);color:var(--muted);margin:6px 0 0}
.topic .src a{color:var(--muted)}
.topic .nodata{color:var(--muted)}
.card-details{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.card-details>summary{cursor:pointer;list-style:none;font-weight:600;font-size:var(--fs-2);color:var(--accent);display:inline-flex;align-items:center;gap:6px;padding:6px 0}
.card-details>summary::-webkit-details-marker{display:none}
.card-details>summary::before{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease);margin-right:2px}
.card-details[open]>summary::before{transform:rotate(45deg)}
.card-details>.card{margin-top:8px}
.topic .card{border:0;padding:0;background:transparent}

/* ---------- share bar, cite, callout ---------- */
.share-bar{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.share-bar .status{font-size:var(--fs-1);color:var(--muted)}
.callout{padding:14px 16px;border-radius:var(--r-3);background:var(--accent-soft);border:1px solid var(--accent-line);font-size:var(--fs-3)}
.cite-box{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--panel-2);font-size:var(--fs-2)}
.cite-box code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-1);margin:6px 0}

/* ---------- tiles, rank lists, tables, dot map ---------- */
.tiles{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr))}
.tile{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--panel)}
.tile .tile-n{font-family:var(--font-display);font-weight:800;font-size:var(--fs-7);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tile .tile-l{font-size:var(--fs-2);color:var(--muted);margin-top:4px}
.tile .tile-s{font-size:var(--fs-1);color:var(--faint);margin-top:6px}
.rank-list{list-style:none;margin:0;padding:0;counter-reset:rank}
.rank-list li{display:grid;grid-template-columns:2ch minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);counter-increment:rank}
.rank-list li::before{content:counter(rank);font-family:var(--font-mono);font-size:var(--fs-1);color:var(--faint);text-align:right}
.rank-list .v{font-family:var(--font-mono);font-size:var(--fs-2);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-list small{display:block;color:var(--muted);font-size:var(--fs-1)}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px}
.dotmap{width:100%;max-width:520px;margin-inline:auto}
.dotmap svg{display:block;width:100%;height:auto}
.dotmap .state{fill:none;stroke:var(--line-strong);stroke-width:.8}
.dotmap circle{stroke:none}
.dotmap circle.hl{stroke:var(--ink);stroke-width:1.5}
.legend-row{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-1);color:var(--muted);margin:var(--s-2) 0 0}
.legend-row span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--k);border:1px solid rgba(0,0,0,.1)}

/* ---------- compare ---------- */
.compare{display:grid;gap:var(--s-3);grid-template-columns:minmax(0,1fr)}
.compare-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);align-items:stretch}
.compare-row .k{grid-column:1 / -1;font-size:var(--fs-1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:var(--s-3)}
.compare-cell{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--panel);font-size:var(--fs-2)}
.compare-cell .v{font-family:var(--font-display);font-weight:700;font-size:var(--fs-5);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.compare-cell.better{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.compare-cell .arrow{font-size:var(--fs-1);color:var(--muted);margin-left:6px}
.compare-cell.better .arrow{color:var(--ok)}

/* ---------- home ---------- */
.hero-home{padding:var(--s-7) 0 var(--s-6);text-align:left}
.hero-home h1{font-size:clamp(34px,6vw,var(--fs-9));max-width:22ch;margin-bottom:var(--s-3)}
.hero-home .lead{font-size:var(--fs-5);color:var(--muted);max-width:var(--prose);margin:0 0 var(--s-5)}
.examples{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3);font-size:var(--fs-2);color:var(--muted);align-items:center}
.examples a{text-decoration:none;color:var(--ink);padding:5px 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--panel)}
.tour{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.tour-card{display:block;padding:18px 18px 16px;border:1px solid var(--line);border-radius:var(--r-4);background:var(--panel);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}
.tour-card:hover{border-color:var(--line-strong)}
.tour-card .eyebrow{color:var(--accent)}
.tour-card h3{margin:0 0 6px}
.tour-card p{color:var(--muted);font-size:var(--fs-2)}
.county-grid{display:grid;gap:4px 12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));list-style:none;margin:0;padding:0;font-size:var(--fs-2)}
.county-grid a{display:block;padding:6px 8px;border-radius:var(--r-1);color:var(--ink);text-decoration:none}
.county-grid a:hover{background:var(--panel)}
.county-grid small{color:var(--muted);margin-left:6px}
.did-you-know{display:grid;gap:var(--s-2);padding:18px 20px;border-radius:var(--r-4);background:var(--panel);border:1px solid var(--line)}
.did-you-know .fact-n{font-family:var(--font-display);font-weight:800;font-size:var(--fs-8);letter-spacing:-.03em;line-height:1;color:var(--warm)}

/* ---------- footer ---------- */
.site-footer{margin-top:var(--s-8);border-top:1px solid var(--line);background:var(--panel);font-size:var(--fs-2);color:var(--muted)}
.site-footer .container{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));padding-block:var(--s-6)}
.site-footer h4{font-size:var(--fs-1);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-2)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer a{color:var(--muted)}
.site-footer .sponsor{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);justify-content:space-between}

/* ---------- theme toggle ---------- */
.theme-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-pill);padding:4px 10px;font-size:var(--fs-1);color:var(--muted)}

/* ---------- the map page ---------- */
.map-page{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);height:100dvh;overflow:hidden}
.map-page .rail{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.map-page .rail-scroll{overflow-y:auto;padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}
.map-page .rail-brand{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.map-page .rail-brand .brand{font-size:var(--fs-4)}
.map-page .rail-brand .site-nav{gap:var(--s-3)}
.map-page .mapwrap{position:relative;min-width:0;min-height:0}
.topbar{display:none}
.topic-now{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--panel-2)}
.topic-now .dot{width:14px;height:14px}
.topic-now b{font-weight:600}
.topic-now small{display:block;color:var(--muted);font-size:var(--fs-1)}
.topic-now .btn{margin-left:auto}
.topic-picker{display:flex;flex-direction:column;gap:6px}
.tp-filter{width:100%;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--panel);font-size:var(--fs-2)}
.tp-group{border:1px solid var(--line);border-radius:var(--r-2);background:var(--panel)}
.tp-group>summary{list-style:none;cursor:pointer;padding:8px 10px;font-weight:600;font-size:var(--fs-2);display:flex;align-items:center;gap:8px}
.tp-group>summary::-webkit-details-marker{display:none}
.tp-group>summary .n{margin-left:auto;font-family:var(--font-mono);font-weight:400;font-size:11px;color:var(--faint)}
.tp-group>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform var(--t-fast)}
.tp-group[open]>summary::before{transform:rotate(45deg)}
.tp-group .seg{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:0 6px 6px;border:0;background:transparent;border-radius:0;overflow:visible}
.tp-group .seg button{display:flex;align-items:center;gap:8px;text-align:left;padding:7px 8px;border-radius:var(--r-1);border:1px solid transparent;background:transparent;color:var(--ink);font-size:var(--fs-2);white-space:normal;line-height:1.2;flex:initial}
.tp-group .seg button:hover{background:var(--panel-2)}
.tp-group .seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.tp-group .seg button .dot{width:10px;height:10px}
.layers-btn{position:absolute;left:14px;bottom:14px;z-index:6}
.layers-drawer{position:absolute;left:14px;bottom:62px;z-index:7;width:min(420px,calc(100% - 28px));max-height:60%;overflow:auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-3);box-shadow:var(--shadow);padding:12px}
.layers-drawer .layers{position:static;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.layers-drawer .layers label,.layers-drawer .layers .lyhead,.layers-drawer .layers .lyhint{box-shadow:none}
.card-actions{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}

/* phone: full-screen map, top bar, bottom sheet with tabs */
@media (max-width:899px){
  .map-page{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .topbar{display:flex;align-items:center;gap:var(--s-2);padding:8px var(--gutter);background:var(--panel);border-bottom:1px solid var(--line);z-index:45}
  .topbar .site-search{flex:1}
  .map-page .rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:32dvh;border-right:0;border-top:1px solid var(--line-strong);border-radius:var(--r-4) var(--r-4) 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.18);z-index:44;transition:height var(--t-base) var(--ease)}
  .map-page .rail.expanded{height:85dvh}
  .sheet-handle{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 12px 4px;border:0;background:transparent;width:100%;color:var(--muted);font-size:var(--fs-1)}
  .sheet-handle::before{content:"";width:40px;height:4px;border-radius:2px;background:var(--line-strong)}
  .sheet-tabs{display:flex;gap:4px;padding:0 12px 8px}
  .sheet-tabs button{flex:1;padding:8px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--panel);font-size:var(--fs-2);font-weight:500;color:var(--muted);min-height:40px}
  .sheet-tabs button[aria-selected="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
  .sheet-panel[hidden]{display:none}
  .map-page .rail-scroll{padding:0 14px 18px}
  .map-page .rail-brand{display:none}
  .layers-btn,.layers-drawer{display:none}
  .zoomctl{bottom:calc(32dvh + 14px)}
  .map-page .rail.expanded ~ .mapwrap .zoomctl{bottom:calc(85dvh + 14px)}
}
@media (min-width:900px){.sheet-handle,.sheet-tabs{display:none}}

/* ---------- small overrides on the engine's card classes for the pages ---------- */
.topic .card .zipline,.topic .card .close,.water-card .zipline,.water-card .close{display:none}
.card .also{display:none}                   /* the chips are the topic sections themselves on a page */
.card img[loading="lazy"]{content-visibility:auto}

/* The engine's well roster grid (extracted into the map CSS; content pages need it for embedded system cards) */
.wellgrid{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 0}
.wellgrid span{font-family:var(--font-mono);font-size:11px;border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--ink)}