/* MI Lake Depths — bathymetric chart identity.
   Palette derives from the product's own markers: the Blues depth ramp, the red
   deep-spot survey tags, the gold access buoys. Two grounds: deep-water (dark),
   chart-paper (light). Tokens carry both; components never style inside a media
   query. */
:root {
  color-scheme: light;
  --navy-abyss: #071c2e;
  --navy-deep:  #0a2740;
  --water-mid:  #1c5a80;
  --shoal:      #7fb5d4;
  --sound-red:  #c1121f;
  --buoy-gold:  #d99a1c;

  /* depth ramp — the signature, shallow -> deep */
  --ramp: linear-gradient(90deg,#eaf3fb,#cfe3f2,#9ecae1,#6baed6,#4292c6,#2171b5,#08519c,#08306b);

  --ground:   #eef2f2;   /* cool off-white, faint cyan bias — a chosen neutral */
  --surface:  #ffffff;
  --raised:   #f6f9f9;
  --ink:      #0a2740;
  --ink-soft: #40596b;
  /* ♿ 2026-09-16: was #6a8092, which measured 3.6:1 on the ground and 4.1:1 on
     white at 9-13 px -- WCAG 2.1 AA needs 4.5. #566c7e is 4.85 / 5.47 / 5.16
     and was ~95% of every failure the audit found (docs/ACCESSIBILITY_AUDIT). */
  --muted:    #566c7e;
  --hairline: #d3dee1;
  --accent:   var(--sound-red);
  /* ♿ TEXT-SAFE companions. --water-mid (#1c5a80) is the depth ramp's mid tone
     and must never shift with the theme; as TEXT on the dark ground it is
     2.3:1. Every rule that paints WORDS with it uses --water-text instead,
     which is the same blue in light and a legible sky blue in dark. Likewise
     the soundings red as small text on dark cards (3.98:1) -> --accent-text. */
  --water-text:  #1c5a80;
  --accent-text: var(--sound-red);
  --gold:     #b7860f;
  --gold-text: #7d5c06;   /* ♿ gold as small TEXT: 5.5:1 on the ground; --gold itself is 2.9 */
  /* ⚠️ THE FISHING-RULES MODULE HAD NO PALETTE. Every rule in it was written
     as var(--ok,#1e7d46) / var(--warn,#a05a00) / var(--bad,#a03030) /
     var(--line,#ccd5) and NONE of those four tokens existed anywhere in this
     file -- so the whole module ran on its hard-coded fallbacks and had no
     dark theme at all. Measured on a live page in dark mode: "Open to
     harvest" scored 3.36:1 and "Special rule" 3.26:1 against the ground,
     where AA wants 4.5. Defining them here fixes every rule at once. */
  /* ⚠️ --water-mid IS A DEPTH-RAMP COLOUR, NOT A UI COLOUR, and it was being
     used for both. It is never redefined for dark mode -- correctly, since the
     ramp must not shift -- so every control painted with it sat at #1c5a80 on a
     dark ground. Measured on the new disclosure rows: 1.76:1, effectively
     invisible. --control is the UI blue: the ramp colour on light, --shoal on
     dark, which this file was already doing by hand for nearby-lake links. */
  --control:  var(--water-mid);
  --ok:       #1a6b3c;
  --warn:     #8a4d00;
  --bad:      #a03030;
  --line:     var(--hairline);
  --loc-dot:  #12233a;

  /* Michigan county map. Defined once with color-mix over theme-aware tokens
     so they recompute per theme (substitution uses the element's live values).
     off = unmapped county (visible light slate, NOT near-white); line = county
     grid; on = mapped county; on-line = light separator so ADJACENT mapped
     counties stay distinct tiles instead of merging into one blue blob. */
  --co-off:     color-mix(in srgb, var(--muted) 24%, var(--surface));
  --co-line:    color-mix(in srgb, var(--muted) 60%, var(--surface));
  --co-on:      var(--water-mid);
  --co-on-line: color-mix(in srgb, var(--shoal) 78%, #ffffff);

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono: ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;

  --wrap: 1120px;
  --r: 10px;
  --shadow: 0 1px 2px rgba(8,30,50,.06),0 8px 30px rgba(8,30,50,.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground:   #071c2e;
    --surface:  #0d2a42;
    --raised:   #113253;
    --ink:      #e9eff2;
    --ink-soft: #b6cad7;
    --muted:    #86a4b8;
    --hairline: #1c3e58;
    --accent:   #e2564f;   /* soundings red, lifted for a dark ground */
    --water-text:  #7fb3d5;   /* ♿ 6.5:1 on the dark ground; --water-mid is 2.3 */
    --accent-text: #ea6a63;   /* ♿ 4.7:1 on dark cards for 13 px text; --accent is 3.98 */
    --gold-text:   #e0a72e;   /* the dark gold is already 8:1 as text */
    --gold:     #e0a72e;
    --loc-dot:  #ffffff;
    /* lifted for a dark ground -- see the note in the light block above */
    --control:  var(--shoal);
    --ok:       #5fd08a;
    --warn:     #e8ad55;
    --bad:      #f08f8f;
    --line:     var(--hairline);
    --shadow: 0 1px 2px rgba(0,0,0,.3),0 10px 34px rgba(0,0,0,.38);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground:#eef2f2; --surface:#ffffff; --raised:#f6f9f9; --ink:#0a2740;
  --ink-soft:#40596b; --muted:#566c7e; --hairline:#d3dee1; --accent:#c1121f;
  --water-text:#1c5a80; --accent-text:#c1121f; --gold-text:#7d5c06;
  --gold:#b7860f; --loc-dot:#12233a;
  --control:var(--water-mid);
  --ok:#1a6b3c; --warn:#8a4d00; --bad:#a03030; --line:var(--hairline); --shadow:0 1px 2px rgba(8,30,50,.06),0 8px 30px rgba(8,30,50,.08);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:#071c2e; --surface:#0d2a42; --raised:#113253; --ink:#e9eff2;
  --ink-soft:#b6cad7; --muted:#86a4b8; --hairline:#1c3e58; --accent:#e2564f;
  --water-text:#7fb3d5; --accent-text:#ea6a63; --gold-text:#e0a72e;
  --gold:#e0a72e; --loc-dot:#ffffff;
  --control:var(--shoal);
  --ok:#5fd08a; --warn:#e8ad55; --bad:#f08f8f; --line:var(--hairline); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 34px rgba(0,0,0,.38);
}

*,*::before,*::after { box-sizing: border-box; }
/* in-page jumps (#trophic, #paddling) must clear the 61px sticky .site-head, else the heading lands under it */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
h1,h2,h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; text-wrap: balance; margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.tnum { font-variant-numeric: tabular-nums; }

/* ---- header ---- */
.site-head {
  position: sticky; top: 0; z-index: 50; background: color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--hairline);
}
.site-head .wrap { display: flex; align-items: center; gap: 20px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 19px;
  font-weight: 600; letter-spacing: .01em; text-decoration: none; margin-right: auto; }
.brand .mark { width: 26px; height: 26px; flex: none; }
.navlink { text-decoration: none; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.navlink:hover { color: var(--ink); }
.tgl { border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-soft);
  width: 38px; height: 34px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.tgl:hover { color: var(--ink); border-color: var(--muted); }

/* ---- hero / model ---- */
.hero { position: relative; }
.hero-model {
  position: relative; width: 100%; height: min(66vh,620px);
  background: radial-gradient(120% 90% at 50% 12%, #12456b 0%, var(--navy-deep) 55%, var(--navy-abyss) 100%);
  border-bottom: 1px solid var(--hairline); overflow: hidden;
}
model-viewer { width: 100%; height: 100%; --poster-color: transparent;
  background: transparent; }
.mv-load {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4;
  font: 600 12px var(--sans); letter-spacing: .04em; color: #cfe3f2;
  background: rgba(7,28,46,.55); padding: 6px 12px; border-radius: 20px; display: none;
}
.mv-load.on { display: block; }

/* sounding card overlaid on the hero */
.sounding {
  position: absolute; left: 24px; bottom: 24px; z-index: 5; width: min(360px,calc(100% - 48px));
  background: color-mix(in srgb,var(--surface) 94%,transparent); border: 1px solid var(--hairline);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 18px 20px 16px; backdrop-filter: blur(6px);
}
.sounding .place { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sounding h1 { font-size: clamp(24px,3.4vw,34px); }
.sounding .sub { color: var(--muted); font-size: 13px; margin: 2px 0 14px; }
.depthbig { display: flex; align-items: baseline; gap: 8px; }
.depthbig .n { font-family: var(--serif); font-size: 58px; font-weight: 600; line-height: .9;
  color: var(--accent); font-variant-numeric: tabular-nums; }
.depthbig .u { font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.depthbig .lbl { margin-left: auto; text-align: right; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); align-self: center; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); background: var(--raised); border: 1px solid var(--hairline);
  padding: 4px 10px; border-radius: 20px; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip.acc .dot { background: var(--gold); }
.chip.veg .dot { background: #4e9450; }
.chip.warn { color: var(--accent); border-color: color-mix(in srgb,var(--accent) 40%,var(--hairline)); }

/* Get-directions dropdown in the sounding card. Opens UPWARD (card sits at the
   bottom of the viewer) so the menu never spills off-screen. JS-free <details>;
   a tiny script only reorders Apple-first on iPhones and closes on select. */
.dirs { position: relative; margin-top: 14px; }
.dirs > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; user-select: none; font: 600 13px var(--sans); color: #fff;
  background: var(--water-mid); border: 1px solid transparent; border-radius: 20px; padding: 7px 14px; }
.dirs > summary::-webkit-details-marker { display: none; }
.dirs > summary::marker { content: ""; }
.dirs > summary .ico { width: 15px; height: 15px; flex: none; }
.dirs > summary:hover,
.dirs[open] > summary { background: color-mix(in srgb,var(--water-mid) 86%,#000); }
.dirs > summary:focus-visible { outline: 2px solid var(--water-mid); outline-offset: 2px; }
.dirs-menu { position: absolute; left: 0; bottom: calc(100% + 6px); min-width: 172px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: var(--shadow); padding: 5px; z-index: 20; }
.dirs-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 7px;
  font: 600 13px var(--sans); color: var(--ink); text-decoration: none; }
.dirs-menu a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--water-mid); }
.dirs-menu a[data-svc="apple"]::before { background: var(--muted); }
.dirs-menu a:hover { background: var(--raised); }

/* model-viewer hotspots */
.hs { border: none; padding: 0; width: 13px; height: 13px; border-radius: 50%; cursor: pointer;
  background: var(--sound-red); box-shadow: 0 0 0 3px rgba(255,255,255,.9),0 1px 4px rgba(0,0,0,.5); position: relative; }
.hs .lab { position: absolute; left: 16px; top: -5px; white-space: nowrap; font: 600 12px var(--sans);
  color: #fff; background: rgba(193,18,31,.95); padding: 2px 7px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.hs .lab.wide { white-space: normal; max-width: 168px; line-height: 1.25;
  text-wrap: balance; }
.hs.acc { background: var(--buoy-gold); }
.hs.acc .lab { background: rgba(255,255,255,.94); color: var(--navy-deep); }
/* dense launch pins (Lake St. Clair draws 8): the gold buoy stays, its label
   waits for hover or keyboard focus. Only pages with >2 pins get .q, so a
   typical inland lake with one launch keeps its always-on label. */
.hs.acc.q .lab { opacity: 0; transform: translateX(-3px); pointer-events: none;
  transition: opacity .12s ease, transform .12s ease; }
.hs.acc.q:hover .lab, .hs.acc.q:focus .lab, .hs.acc.q:focus-visible .lab {
  opacity: 1; transform: none; }
/* the pin itself grows slightly so it is clear WHICH one is being read */
.hs.acc.q:hover, .hs.acc.q:focus { transform: scale(1.25); z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .hs.acc.q .lab { transition: none; }
}
.hs[data-visible="false"] { opacity: 0; pointer-events: none; }

/* ---- on-model tools: compass, reset, measure (ported from v1) ----
   All overlay the hero. pointer-events:none on wrappers so orbiting still works;
   only the actual controls take pointer events. */
.tools-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.tools-layer > * { pointer-events: auto; }

/* compass rose — rotates so N always points to on-screen north; click = face N */
/* TOP-RIGHT, under the 3D/2D switch -- NOT top-left. The sounding card is 366px
   tall and the hero is min(66vh,620px), so on any viewport under ~845px tall the
   card's top edge rises past the compass and the two overlap (measured: 21px of
   collision at 1280x720). It is invisible on a tall monitor, which is why it went
   unnoticed. Left side belongs to the card; the right side is free between the
   view switch and the measure bar. Grouping the compass with the view controls
   also reads better -- both are orientation tools. */
#compass { position: absolute; right: 16px; top: 56px; width: 88px; height: 88px;
  cursor: pointer; filter: drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
#compass svg { width: 100%; height: 100%; display: block; }
#compass:hover { filter: drop-shadow(0 2px 7px rgba(0,0,0,.6)) brightness(1.06); }
#compass:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 50%; }

/* shared pill button styling for on-model controls */
.mbtn { font: 600 12px var(--sans); letter-spacing: .01em; border: 1px solid rgba(255,255,255,.5);
  background: rgba(7,28,46,.62); color: #eaf3fb; border-radius: 18px; padding: 6px 13px;
  cursor: pointer; backdrop-filter: blur(6px); }
.mbtn:hover { background: rgba(7,28,46,.85); border-color: #fff; }
.mbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mbtn.on { background: var(--sound-red); border-color: var(--sound-red); color: #fff; }

#resetView { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); }

/* 2D / 3D segmented toggle (top-right of the model) */
.viewseg { position: absolute; right: 16px; top: 16px; display: flex;
  background: rgba(7,28,46,.62); border: 1px solid rgba(255,255,255,.28);
  border-radius: 16px; overflow: hidden; backdrop-filter: blur(6px); }
.viewseg button { font: 700 12px var(--sans); letter-spacing: .02em; border: none;
  background: transparent; color: #cfe3f2; padding: 6px 14px; cursor: pointer; }
.viewseg button:hover { color: #fff; }
.viewseg button.on { background: var(--sound-red); color: #fff; }
.viewseg button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

#mtools { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 7px; align-items: center;
  background: rgba(7,28,46,.62); padding: 6px 8px; border-radius: 20px; backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.28); }
#mout { min-width: 118px; text-align: right; font: 600 12px var(--mono); color: #eaf3fb;
  font-variant-numeric: tabular-nums; padding-right: 4px; }
#mline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
#mlabels { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#mlabels .seg { position: absolute; transform: translate(-50%,-50%); background: var(--sound-red);
  color: #fff; font: 600 11px var(--mono); padding: 2px 7px; border-radius: 4px; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.mdot { border: none; width: 12px; height: 12px; border-radius: 50%; background: var(--sound-red);
  padding: 0; pointer-events: none; box-shadow: 0 0 0 3px #fff, 0 1px 3px rgba(0,0,0,.55); }
model-viewer.measuring { cursor: crosshair; }

/* ---- full-screen map (2026-09-11) -------------------------------------- */
/* ⛔ NOT TOP-LEFT (moved 2026-09-18, Jay: "it tends to just run into the lake
   name"). The .sounding card is bottom-anchored and GROWS UPWARD, so on a
   laptop-height hero its top edge reaches the button: measured at 1366x700 on
   pickerel-lake-grand-traverse the card top was y=62 and the h1 spanned 80-117,
   while the old left:16/top:56 button covered 56-87 -- on top of the title. The
   compass left that corner for the same reason (see its comment above).
   The button now sits on the .viewseg row, just LEFT of it: .viewseg is 90px
   wide at right:16, so right:114 leaves an 8px gap, and top:15 centres the 31px
   button on the 29px switch. That row is clear at every desktop width -- at the
   761px floor the button's left edge is ~600px while the 360px card ends at 384.
   #navOpen (unpositioned, at the layer origin) is no longer anywhere near it. */
.fsbtn { position: absolute; right: 114px; top: 15px; padding: 6px; line-height: 0;
  border-radius: 14px; }
/* ⛔ ON MOBILE THE LEFT CORNER IS TAKEN AND THE RIGHT ONE IS NOT. Under 760px the
   compass jumps to the LEFT (left:12/10, top:12/10) and #navOpen already sits at
   the layer origin, so the left corner holds two controls; measured at 375x812,
   a left-hand button overlapped the compass rose. The right side below .viewseg
   (which ends at y=43) is clear at every mobile width. Desktop uses the viewseg row. */
@media (max-width: 760px) {
  .fsbtn { left: auto; right: 16px; top: 56px; }
}
.fsbtn svg { width: 18px; height: 18px; display: block; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fsbtn .fs-in { display: none; }
.fsbtn[aria-pressed="true"] .fs-out { display: none; }
.fsbtn[aria-pressed="true"] .fs-in { display: block; }

/* ⛔ dvh, not vh: on mobile 100vh is the TALLEST viewport (chrome retracted), so
   a 100vh overlay is taller than the screen and the bottom controls sit off it.
   The vh line is the fallback for browsers without dvh and must come first. */
.hero-model.maxed { position: fixed; inset: 0; z-index: 60;
  width: 100vw; height: 100vh; height: 100dvh;
  border-bottom: none; border-radius: 0; }
body.mv-maxed { overflow: hidden; }
/* the card is a sibling, so it simply sits behind the overlay -- but on mobile it
   is in normal flow, and a fixed overlay over a scrolled page needs it hidden */
body.mv-maxed .sounding { visibility: hidden; }

.rothint { position: absolute; left: 50%; top: 56px; transform: translateX(-50%);
  z-index: 7; font: 600 12px var(--sans); color: #eaf3fb;
  background: rgba(7,28,46,.72); border: 1px solid rgba(255,255,255,.28);
  padding: 6px 12px; border-radius: 18px; backdrop-filter: blur(6px);
  pointer-events: none; white-space: nowrap; }
.rothint[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero-model.maxed { transition: none; }
}

/* weather card — live NWS forecast (public domain, commercial-OK, keyless) */
.wx { margin-top: 16px; padding: 14px 16px; background: var(--raised);
  border: 1px solid var(--hairline); border-radius: var(--r); }
.wx:empty { display: none; }
.wx-head { font: 700 11px var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; }
.wx-now { display: flex; align-items: center; gap: 12px; }
.wx-ico { font-size: 34px; line-height: 1; }
.wx-temp { font-family: var(--serif); font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-desc { font-size: 13px; font-weight: 600; line-height: 1.3; }
.wx-desc small { font-weight: 500; color: var(--muted); }
.wx-row { display: flex; gap: 8px; margin-top: 14px; }
.wx-cell { flex: 1; text-align: center; padding: 8px 4px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 8px; }
.wx-cell .d { font: 700 10px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wx-cell .i { font-size: 20px; margin: 3px 0; }
.wx-cell .t { font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-src { margin-top: 10px; font-size: 11px; color: var(--muted); }

/* sun card — pure client-side solar math, no API */
.sun { display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; margin-top: 16px;
  padding: 14px 16px; background: var(--raised); border: 1px solid var(--hairline);
  border-radius: var(--r); }
.sun .k { font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sun .v { font-family: var(--serif); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sun .note { flex-basis: 100%; font-size: 12px; color: var(--muted); }
/* moon phase tonight — drawn client-side, glows in dark mode */
.moonitem { display: flex; align-items: center; gap: 11px; }
.moonglyph { flex: none; line-height: 0; }
.moonsvg { width: 30px; height: 30px; display: block; overflow: visible; }
.mdisk { fill: color-mix(in srgb, var(--muted) 34%, var(--raised)); }
.mlit { fill: color-mix(in srgb, var(--gold) 46%, #ffffff); transition: filter .2s ease; }
.mrim { fill: none; stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-width: .035; }
.sun .v .prime { color: var(--gold-text); font-weight: 700; margin-left: 4px; font-family: var(--sans); font-size: 12.5px; }
@media (prefers-color-scheme: dark) { .mlit {
  filter: drop-shadow(0 0 3px rgba(246,239,214,.5)) drop-shadow(0 0 8px rgba(246,239,214,.22)); } }
:root[data-theme="dark"] .mlit {
  filter: drop-shadow(0 0 3px rgba(246,239,214,.5)) drop-shadow(0 0 8px rgba(246,239,214,.22)); }
:root[data-theme="light"] .mlit { filter: none; }

@media (max-width: 760px) {
  /* <=760px: the card stacks below the map, so top-left is free again
     and #resetView's bottom-left placement still depends on it. Must
     clear `right` explicitly or the base rule pins both edges. */
  #compass { width: 62px; height: 62px; left: 12px; right: auto; top: 12px; }
  #mtools { right: 10px; bottom: 10px; padding: 5px 6px; }
  #mout { min-width: 88px; font-size: 11px; }
  .mbtn { padding: 5px 10px; font-size: 11.5px; }
}

/* ---- depth scale legend ---- */
.scale { padding: 30px 0; border-bottom: 1px solid var(--hairline); background: var(--surface); }
.scale .row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.scale h2 { font-size: 16px; font-family: var(--sans); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.rampbar { position: relative; flex: 1 1 340px; height: 20px; border-radius: 4px; background: var(--ramp);
  border: 1px solid var(--hairline); }
.rampbar .tick { position: absolute; top: 100%; transform: translateX(-50%); font: 600 11px var(--mono);
  color: var(--muted); padding-top: 6px; white-space: nowrap; }
.rampbar .tick::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 5px;
  background: var(--muted); }
.rampbar .spot { position: absolute; top: -7px; transform: translateX(-50%); width: 10px; height: 10px;
  border-radius: 50%; background: var(--sound-red); box-shadow: 0 0 0 2px var(--surface); }

/* ---- facts ---- */
.facts { padding: 46px 0 12px; }
.facts .grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; }
.facts h2 { font-size: 22px; margin-bottom: 4px; }
.section-note { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 0; border-top: 1px solid var(--hairline); }
.dl > div { display: contents; }
.dl dt, .dl dd { padding: 11px 0; border-bottom: 1px solid var(--hairline); margin: 0; }
.dl dt { color: var(--muted); font-size: 13px; font-weight: 600; padding-right: 20px; align-self: center; }
.dl dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dl dd small { color: var(--muted); font-weight: 500; }
.dl dd.mono { font-family: var(--mono); font-size: 13px; font-weight: 500; }

/* locator mini-map (generated SVG: county silhouette + this lake among the rest,
   each other lake a hover-labelled link to its page) */
.locator { margin-top: 26px; }
.locator .eyebrow { margin-bottom: 8px; }
.loc-wrap { position: relative; max-width: 300px; }
.locator-map { width: 100%; height: auto; display: block; overflow: visible; }
.locator-map .cty { fill: var(--raised); stroke: var(--muted); stroke-width: 1;
  stroke-linejoin: round; }
.locator-map .pt { fill: var(--loc-dot); opacity: .8;
  transform-box: fill-box; transform-origin: center;
  transition: transform .1s ease, fill .1s ease, opacity .1s ease; }
.locator-map .dotlink { cursor: pointer; }
.locator-map .dotlink .hit { fill: transparent; }
.locator-map .dotlink:hover .pt,
.locator-map .dotlink:focus-visible .pt { transform: scale(2.1); fill: var(--accent); opacity: 1; }
.locator-map .dotlink:focus { outline: none; }
.locator-map .dotlink:focus-visible .pt { stroke: var(--surface); stroke-width: 1.2; }
.locator-map .here-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .5; }
.locator-map .here { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.loc-tip { position: absolute; transform: translate(-50%, -100%); margin-top: -6px;
  background: var(--ink); color: var(--surface); font: 600 11px var(--sans);
  padding: 3px 8px; border-radius: 5px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 1px 5px rgba(0,0,0,.3); z-index: 3; }
.loc-tip[hidden] { display: none; }
.loc-cap { margin-top: 7px; font-size: 12px; color: var(--muted); }

.provenance { margin-top: 40px; padding: 22px 24px; background: var(--raised);
  border: 1px solid var(--hairline); border-left: 3px solid var(--water-mid); border-radius: var(--r); }
.provenance h3 { font-family: var(--sans); font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.provenance p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-soft); }
.provenance .src { font-size: 12.5px; color: var(--muted); }
.notnav { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }

/* Corrections route. Deliberately quiet -- it sits under the safety badge for
   a reviewer who went looking, and must not compete with the chart. Added
   2026-08-23 for the citation outreach, which asks experts to review the
   pages and send corrections. */
.fixit { margin: 6px 0 0 !important; font-size: 12.5px; }
.fixit a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.fixit a:hover, .fixit a:focus { color: var(--accent); }

/* ---- shipwreck rail (Great Lakes bay pages only) ----
   Collapsed by default: this is secondary to the depth chart, and the UX
   collapse review's rule is that a new feature must earn visible space.
   Verified and approximate positions must never look alike -- most of the
   source's positions are NOT verified. */
.wrecks{padding:8px 0 40px}
.wreckbox summary{cursor:pointer;font-family:var(--sans);font-size:20px;
  font-weight:700;list-style:none;display:flex;align-items:baseline;
  gap:12px;flex-wrap:wrap}
.wreckbox summary::-webkit-details-marker{display:none}
.wreckbox summary::after{content:"▾";font-size:13px;color:var(--muted)}
.wreckbox[open] summary::after{content:"▴"}
.wkcount{font-size:13.5px;font-weight:400;color:var(--muted)}
.wklist{list-style:none;margin:14px 0 0;padding:0}
.wk{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;
  align-items:baseline;padding:10px 0 10px 22px;border-top:1px solid var(--hairline);
  position:relative}
.wk::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:9px;
  border-radius:50%;border:1.5px dashed var(--muted);box-sizing:border-box}
.wk.v::before{border:none;background:var(--ink)}
.wkn{font-weight:700;font-size:16px}
.wkc{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--hairline);border-radius:3px;padding:1px 6px}
.wk.v .wkc{color:var(--ink);border-color:var(--ink-soft)}
.wkd{font-size:14.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.wkm{grid-column:1 / -1;font-size:13.5px;color:var(--muted)}
.wkrespect{margin-top:18px;padding:12px 14px;border-left:3px solid var(--ink-soft);
  background:var(--raised);font-size:13.5px;color:var(--ink-soft);border-radius:0 4px 4px 0}
.wkrespect strong{color:var(--ink)}
.wklegal{margin-top:16px;padding-top:12px;border-top:1px solid var(--hairline);
  font-size:13px;color:var(--muted)}

/* hub: how much of the collection has been independently reviewed */
.wkcoverage{max-width:60ch;margin:14px 0 0;padding-top:12px;
  border-top:1px solid var(--hairline);font-size:14px;line-height:1.5;color:var(--muted)}
.wkcoverage strong{color:var(--ink)}

/* ---- fishery panel (from DNR SFR reports) ---- */
.fishery { padding: 8px 0 46px; }
.fishery .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.fishery h2 { font-size: 22px; }
.fishery .survey { color: var(--muted); font-size: 13px; }
.fishery .kpis { display: flex; gap: 26px; flex-wrap: wrap; margin: 16px 0 24px; }
.fishery .kpi { display: flex; flex-direction: column; gap: 2px; }
.fishery .kpi .v { font-family: var(--serif); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fishery .kpi .k { font: 700 11px var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.catgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.catcol h3 { font: 700 12px var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--water-text); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--hairline); }
.catcol.gamefish h3 { color: var(--accent); }
/* flex-wrap + min-width:0 are load-bearing: .meta is white-space:nowrap, and a long
   stocking string ("4,850,905 stocked - 1979-2026 - 42 plantings", ~380px) cannot
   shrink or break. Without these it overflows its grid cell and paints over the NEXT
   column -- the DNR-stocking overlap Jay caught 2026-08-08. Now it drops to its own
   line instead. Keep nowrap on .meta so numbers never split mid-value. */
.sprow { display: flex; align-items: baseline; justify-content: space-between; gap: 2px 12px;
  flex-wrap: wrap; min-width: 0;
  padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent); }
.sprow .nm { min-width: 0; overflow-wrap: anywhere; }
.sprow .nm { font-size: 14px; font-weight: 600; }
.sprow .meta { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sprow .meta b { color: var(--ink-soft); font-weight: 700; }
.fishery .foot { margin-top: 22px; font-size: 12.5px; color: var(--muted); }
.fishery .foot a { color: var(--water-text); }
.fishery .stock { margin-top: 16px; padding: 12px 16px; background: var(--raised);
  border: 1px solid var(--hairline); border-radius: var(--r); font-size: 13px; color: var(--ink-soft); }
.fishery .stock b { color: var(--ink); }

/* ---- Fish you might catch (synthesis of angler + survey + recent stocking) ----
   Leads the fish panels: the scannable answer, with the detailed panels below as
   evidence. Silhouettes scale by typical adult length (pike vs perch at a glance);
   align-items:flex-end sits every fish on a common waterline. STRICT corroboration
   rule (see species_section in build_site.py) -- old stocking alone never lists a
   fish here; the untouched DNR-stocking history panel below carries that record. */
.species { padding: 8px 0 40px; }
.species .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.species h2 { font-size: 22px; }
.species h2::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--water-mid); margin-right: 9px; vertical-align: middle; }
.species .survey { color: var(--muted); font-size: 13px; }
.fgrid { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 18px 26px; margin: 18px 0 4px; }
.fitem { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fsil { fill: var(--water-mid); opacity: .92; display: block; }
.fimg { display: block; height: auto; max-width: 100%; }   /* realistic illustration (2026-09-07); same width rule as the silhouette */
.fitem:hover .fimg { filter: brightness(1.06); }
.fitem:hover .fsil { opacity: 1; }
.fname { font-size: 12.5px; font-weight: 600; text-align: center; }
.ftag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 9px;
  font: 700 9px var(--sans); letter-spacing: .07em; text-transform: uppercase;
  background: color-mix(in srgb, var(--buoy-gold) 22%, transparent); color: var(--gold-text);
  vertical-align: middle; }
.species .foot { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.species + .angler,
.species + .fishery { border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 24px; }

/* Lake-page entry point into /compare/, pre-seeded with this lake. Lives in the
   survey readout, not the footer: whoever is reading these numbers is mid-decision
   between lakes, which is exactly the compare audience. (The footer link stays for
   /educators/-style discovery, but that page serves a DIFFERENT audience -- this
   one serves the core visitor, so it earns placement in the content.) */
.cmp-cta { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 4px;
  padding: 9px 15px; border-radius: 8px; font: 600 13.5px var(--sans);
  color: var(--water-text); text-decoration: none;
  background: color-mix(in srgb, var(--water-mid) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--water-mid) 26%, transparent); }
.cmp-cta:hover { background: color-mix(in srgb, var(--water-mid) 16%, transparent); }
.cmp-cta svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Hypsography sentence under the survey readout: one plain-language line beats
   four percentages nobody reads. Carries the estimate caveat with it. */
/* Direct-answer sentence. Added after Search Console's first real queries showed
   people asking "how deep is <lake>" while the page carried the answer only as a
   table row. Sits above the readout so it reads as the summary it is. */
.answer {
  margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--ink);
  max-width: 62ch;
}
.answer strong { font-weight: 700; }

.section-note.morph { margin: 14px 0 0; font-size: 13px; }
.section-note.morph b { color: var(--ink); font-weight: 700; }

/* Interpolation disclosure. Sits ABOVE the numbers, not below, because it
   qualifies the very first figure a reader sees (Maximum depth). Given a real
   rule and a tinted ground so it reads as a caveat about the data rather than
   another fact -- but deliberately not an error/warning colour: an interpolated
   basin is disclosed, not broken. */
.section-note.interp {
  margin: 0 0 18px; padding: 11px 13px; font-size: 13px; line-height: 1.5;
  border-left: 3px solid var(--gold, #c8912f);
  background: color-mix(in srgb, var(--gold, #c8912f) 7%, transparent);
  border-radius: 0 4px 4px 0;
}
.section-note.interp strong { color: var(--ink); font-weight: 700; }

/* ---- /compare/ : 2-3 lakes side by side ---- */
#cmp-pick { position: relative; margin: 22px 0 10px; max-width: 460px; }
.cmp-lbl { display: block; font: 700 11px var(--sans); letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
#cmp-q { width: 100%; padding: 10px 12px; font: 15px var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; }
#cmp-q:focus { outline: 2px solid var(--water-mid); outline-offset: 1px; }
#cmp-sug:not(:empty) { position: absolute; z-index: 20; left: 0; right: 0; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
  overflow: hidden; box-shadow: 0 8px 24px rgba(10,39,64,.14); }
.cmp-sugitem { display: block; width: 100%; text-align: left; padding: 9px 12px;
  font: 14px var(--sans); color: var(--ink); background: none; border: 0; cursor: pointer; }
.cmp-sugitem:hover, .cmp-sugitem:focus { background: var(--raised); }
.cmp-sugitem small { color: var(--muted); margin-left: 6px; }
#cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.cmp-chip { font: 600 13px var(--sans); padding: 6px 12px; border-radius: 16px; cursor: pointer;
  background: color-mix(in srgb, var(--water-mid) 12%, transparent);
  color: var(--ink); border: 1px solid color-mix(in srgb, var(--water-mid) 30%, transparent); }
.cmp-chip:hover { background: color-mix(in srgb, var(--water-mid) 20%, transparent); }
/* wide comparisons scroll inside their own box; the page never scrolls sideways */
.cmp-scroll { overflow-x: auto; }
table.cmp { border-collapse: collapse; width: 100%; min-width: 520px; }
table.cmp th, table.cmp td { padding: 10px 14px; text-align: left; font-size: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent); }
table.cmp thead th { font-family: var(--serif); font-size: 17px; vertical-align: bottom; }
table.cmp thead th small { display: block; font: 400 12px var(--sans); color: var(--muted); }
table.cmp tbody th { font: 700 11px var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; }
table.cmp td { font-variant-numeric: tabular-nums; }
table.cmp td.hi { font-weight: 700; color: var(--water-text); }
.cmp-sp { margin-top: 30px; }
.cmp-sp h2 { font-size: 20px; }
.cmp-sp .subhead { font: 700 11px var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 6px; }
.cmp-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; }
.ftag2 { font: 600 12.5px var(--sans); padding: 4px 10px; border-radius: 13px;
  background: color-mix(in srgb, var(--water-mid) 14%, transparent); color: var(--ink); }
.ftag2.alt { background: color-mix(in srgb, var(--buoy-gold) 18%, transparent); }

/* ---- Bait & tackle nearby (DNR licensed retail bait dealers) ----
   Between public access and the ad slot: closes the trip-planning arc (depth ->
   fish -> launch -> bait), and puts a shop's free listing directly above
   "Advertise Here" -- the upsell pitches itself. */
.bait { padding: 4px 0 46px; margin-top: 8px; border-top: 1px solid var(--hairline); }
.bait .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 26px 0 4px; }
.bait h2 { font-size: 22px; }
.bait h2::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--buoy-gold); margin-right: 9px; vertical-align: middle; }
.bait .survey { color: var(--muted); font-size: 13px; }
.bgrid .sprow { flex-wrap: wrap; }
.bgrid .baddr { flex-basis: 100%; font-size: 12px; color: var(--muted); margin-top: 1px; }
.bgrid .baddr a { color: var(--water-text); }
.bait .foot { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.bait .foot a { color: var(--water-text); }

/* ---- Notable catches (DNR Master Angler) ----
   The only angler-CAUGHT layer: 1,164 lakes vs 750 stocked / 252 surveyed, so it
   leads the fish panels. Shape degrades by tier (full / list / single) in
   build_site.py so a one-record lake reads as finished rather than broken. */
.angler { padding: 8px 0 40px; }
.angler .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.angler h2 { font-size: 22px; }
.angler h2::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sound-red); margin-right: 9px; vertical-align: middle; }
.angler .survey { color: var(--muted); font-size: 13px; }
.angler .kpis { display: flex; gap: 26px; flex-wrap: wrap; margin: 16px 0 22px; }
.angler .kpi { display: flex; flex-direction: column; gap: 2px; }
.angler .kpi .v { font-family: var(--serif); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.angler .kpi .k { font: 700 11px var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.angler .subhead { font: 700 11px var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 24px 0 6px; }
.angler .foot { margin-top: 20px; font-size: 12.5px; color: var(--muted); }
.angler .foot a { color: var(--water-text); }
.sprow .rec { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px;
  font: 700 9.5px var(--sans); letter-spacing: .08em; text-transform: uppercase;
  background: var(--buoy-gold); color: #0a2740; vertical-align: middle; }   /* ♿ ink on gold 4.7-7:1; white was 2.4 */
/* Only divide the two panels when both actually render -- on the 971 lakes with
   no catch records, Fishery is still the lead panel and must not grow a stray rule. */
.angler + .fishery { border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 24px; }

/* ---- DNR stocking panel (what was planted; complements the survey above) ---- */
.stocking { padding: 4px 0 46px; margin-top: 8px; border-top: 1px solid var(--hairline); }
.stocking .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 26px 0 4px; }
.stocking h2 { font-size: 22px; }
.stocking h2::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); margin-right: 9px; vertical-align: middle; }
.stocking .survey { color: var(--muted); font-size: 13px; }
/* Idle measure bar = just the Measure button. Undo/Clear/readout only exist while
   measuring or while a line is on screen -- an idle "off" readout next to real
   buttons read as a dead control (Jay, 2026-08-08). JS toggles .active in idle(). */
#mtools #mundo, #mtools #mclear, #mtools #mout { display: none; }
#mtools.active #mundo, #mtools.active #mclear { display: inline-block; }
#mtools.active #mout { display: inline; }

/* Ruler vertex label: running total + depth at each clicked point. Offset up-right
   of the dot so it never sits under the cursor placing the next point. */
#mlabels .cum { position: absolute; transform: translate(10px, -22px); white-space: nowrap;
  font: 600 11px var(--mono); letter-spacing: .01em; padding: 2px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--navy-abyss) 82%, transparent); color: #fff;
  pointer-events: none; }

/* 340px, not 240px: stocking and angler metas are the longest on the site, and at
   240px every row wrapped. Wide enough that a full meta fits on one line at desktop
   widths while still giving 3 columns on a 1200px page. */
.stkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 22px; }
.stk-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); font-style: italic; }
.stocking .foot { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.stocking .foot a { color: var(--water-text); }

/* ---- public fishing access panel (DNR Family Friendly Fishing) ---- */
.access { padding: 4px 0 46px; margin-top: 8px; border-top: 1px solid var(--hairline); }
.access .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 26px 0 14px; }
.access h2 { font-size: 22px; }
.access h2::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--water-mid); margin-right: 9px; vertical-align: middle; }
.access .survey { color: var(--muted); font-size: 13px; }
.acc-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.acc-badge { font: 700 12px var(--sans); letter-spacing: .02em; padding: 5px 13px; border-radius: 20px;
  background: var(--raised); border: 1px solid var(--hairline); color: var(--ink-soft); }
.acc-badge.b-pier { background: color-mix(in srgb, var(--gold) 18%, var(--surface));
  border-color: var(--gold); color: var(--ink); }
.acc-facts { color: var(--ink-soft); font-size: 14px; margin: 0 0 8px; }
.access .amen { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 4px; }
.access .amen b { color: var(--ink); }
.acc-desc { font-style: italic; color: var(--muted); font-size: 14px; line-height: 1.6;
  border-left: 2px solid var(--hairline); padding-left: 14px; margin: 14px 0 0; }
.access .foot { margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.access .foot a { color: var(--water-text); }

/* ---- state-record water ribbon (prominent, gold; only record waters) ---- */
.record { padding: 6px 0 2px; }
.record .rec-card { display: flex; align-items: center; gap: 15px;
  background: color-mix(in srgb, var(--gold) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--hairline));
  border-left: 3px solid var(--gold); border-radius: var(--r); padding: 14px 18px; }
.record .rec-cup { width: 26px; height: 26px; color: var(--gold); flex: none; }
.record .rec-eyebrow { font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-text); display: block; margin-bottom: 3px; }   /* ♿ 11 px text; --gold measured 2.9:1 */
.record .rec-txt p { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.45; }
.record .rec-txt b { font-weight: 600; }
.record .rec-det { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* ---- ad slot (direct-sold, self-hosted; no third-party scripts) ---- */
.adslot { padding: 10px 0 30px; }
.adslot .wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ad-label { font: 700 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ad-unit { display: block; max-width: 970px; width: 100%; text-align: center; }
.ad-unit img { max-width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--hairline); }
.adslot.house .ad-unit { padding: 18px 22px; background: var(--raised); border: 1px dashed var(--hairline);
  border-radius: var(--r); color: var(--ink-soft); font-size: 14px; font-weight: 600; text-decoration: none; }
.adslot.house .ad-unit:hover { border-color: var(--water-mid); color: var(--ink); }

/* ---- more-in-county rail ---- */
.more { padding: 40px 0 60px; }
.more h2 { font-size: 18px; margin-bottom: 16px; font-family: var(--sans); font-weight: 700; }
.railwrap { overflow-x: auto; }
.rail { display: flex; gap: 14px; padding-bottom: 6px; }
.rail .card { flex: 0 0 200px; }

/* ---- lake cards (landing + rail) ---- */
.card { display: block; text-decoration: none; color: inherit; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease; }
.card:hover { transform: translateY(-3px); border-color: var(--water-mid); }
.card:focus-visible { outline: 2px solid var(--water-mid); outline-offset: 2px; }
.card .thumb { aspect-ratio: 4/3; width: 100%; object-fit: cover; background: var(--navy-deep); display: block; }
.card .body { padding: 12px 14px 14px; }
.card .cname { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.card .meta { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; color: var(--muted);
  font-size: 13px; font-variant-numeric: tabular-nums; }
.card .meta .d { color: var(--accent-text); font-weight: 700; }   /* ♿ 13 px text: 4.7:1 on dark cards */
.card .meta .acc { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }

/* ---- Michigan homepage ---- */
.state-hero { padding: 50px 0 22px; text-align: center; }
.state-hero h1 { font-size: clamp(30px, 5vw, 52px); }
.state-hero p { color: var(--ink-soft); font-size: 17px; max-width: 60ch; margin: 12px auto 24px; }
.state-search { position: relative; max-width: 460px; margin: 0 auto; }
.state-search input { width: 100%; font: 16px var(--sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 26px; padding: 13px 18px 13px 46px; }
.state-search input:focus { outline: 2px solid var(--water-mid); border-color: var(--water-mid); }
.state-search svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.state-results { max-width: 460px; margin: 8px auto 0; text-align: left; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.state-results[hidden] { display: none; }
.state-results .sr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 16px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--hairline); }
.state-results .sr:last-child { border-bottom: none; }
.state-results .sr:hover { background: var(--raised); }
.state-results .srn { font-weight: 600; }
.state-results .src { font-size: 13px; color: var(--muted); white-space: nowrap; }
.state-results .sr-empty { padding: 14px 16px; color: var(--muted); font-size: 14px; }

.state-map { padding: 20px 0 10px; }
.state-map .wrap { display: flex; flex-direction: column; align-items: center; }
.mi-map { width: 100%; max-width: 500px; height: auto; display: block;
  filter: drop-shadow(0 1px 2px rgba(8,30,50,.16)); }
.mi-map .mc-off { fill: var(--co-off); stroke: var(--co-line); stroke-width: .6;
  transition: fill .12s ease; }
.mi-map .mc-on { fill: var(--co-on); stroke: var(--co-on-line); stroke-width: .9;
  transition: fill .12s ease; }
.mi-map a { cursor: pointer; }
.mi-map a:hover .mc-on, .mi-map a:focus-visible .mc-on { fill: var(--accent); }
.mi-map a:focus-visible { outline: none; }
.mi-map a:focus-visible .mc-on { stroke: var(--accent); stroke-width: 1.4; }
.map-hint { margin-top: 12px; font-size: 13px; color: var(--muted); }

.counties { padding: 30px 0 60px; }
.counties h2 { font-size: 20px; font-family: var(--sans); font-weight: 700; margin-bottom: 16px; }
.county-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.county-card { display: block; text-decoration: none; color: inherit; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease; }
.county-card:hover { transform: translateY(-3px); border-color: var(--water-mid); }
.county-card .thumb { aspect-ratio: 4/3; width: 100%; object-fit: cover; background: var(--navy-deep); display: block; }
.county-card .body { padding: 12px 14px 14px; }
.county-card .cname { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.county-card .meta { margin-top: 4px; color: var(--muted); font-size: 13px; }

/* ---- landing ---- */
.county-hero { padding: 54px 0 30px; }
.county-hero h1 { font-size: clamp(30px,5vw,50px); }
.county-hero p { color: var(--ink-soft); font-size: 17px; max-width: 60ch; margin: 12px 0 0; }
.tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 26px 0 4px; }
.search { flex: 1 1 280px; position: relative; }
.search input { width: 100%; font: 15px var(--sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 24px; padding: 11px 16px 11px 42px; }
.search input:focus { outline: 2px solid var(--water-mid); outline-offset: 1px; border-color: var(--water-mid); }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.sortsel { font: 600 14px var(--sans); color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 24px; padding: 10px 16px; cursor: pointer; }
.fbtn { display: inline-flex; align-items: center; gap: 7px; font: 600 14px var(--sans);
  color: var(--ink-soft); background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 24px; padding: 10px 16px; cursor: pointer; }
.fbtn:hover { border-color: var(--muted); color: var(--ink); }
.fbtn .fcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.fbtn .fcount[hidden] { display: none; }

.filters { margin-top: 16px; padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 12px; }
.filters[hidden] { display: none; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 24px; }
.fgroup { display: flex; flex-direction: column; gap: 7px; }
.flabel { font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.flabel small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.frange { display: flex; align-items: center; gap: 8px; }
.frange span { color: var(--muted); }
.funit { color: var(--muted); }
.filters input[type="number"], .filters select { width: 100%; font: 14px var(--sans); color: var(--ink);
  background: var(--raised); border: 1px solid var(--hairline); border-radius: 7px; padding: 8px 10px; }
.frange input[type="number"] { width: 5.5em; }
.filters input:focus, .filters select:focus { outline: 2px solid var(--water-mid); outline-offset: 1px; }
.fchecks { gap: 10px; }
.fchecks label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.fchecks input { width: 16px; height: 16px; accent-color: var(--water-mid); }
.fnear { justify-content: flex-start; }
.nearbtn { font: 600 14px var(--sans); color: var(--water-text); background: var(--raised);
  border: 1px solid var(--hairline); border-radius: 8px; padding: 9px 14px; cursor: pointer; text-align: left; }
.nearbtn:hover { border-color: var(--water-mid); }
.nearnote { font-size: 12px; color: var(--muted); margin-top: 5px; }
.freset { margin-top: 16px; font: 600 13px var(--sans); color: var(--muted); background: none;
  border: none; cursor: pointer; text-decoration: underline; padding: 0; }
.freset:hover { color: var(--ink); }
.card .meta .dist { color: var(--water-text); font-weight: 700; }
.linklike { background: none; border: none; color: var(--water-text); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

.count { color: var(--muted); font-size: 14px; padding: 8px 2px 20px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 18px; padding-bottom: 60px; }
.empty { padding: 40px 0; color: var(--muted); }

/* ---- advertise page ---- */
.adv-hero { padding: 54px 0 34px; }
.adv-hero h1 { font-size: clamp(30px, 5vw, 48px); margin-bottom: 14px; }
.adv-hero p { color: var(--ink-soft); font-size: 18px; max-width: 60ch; margin: 0 0 26px; }
.adv-band { background: var(--navy-deep); padding: 26px 0; }
.adv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.adv-stats > div { display: flex; flex-direction: column; gap: 4px; }
.adv-stats .v { font-family: var(--serif); font-size: 22px; font-weight: 600; color: #eaf3fb; }
.adv-stats .k { font-size: 13px; color: #9ec3dd; }
.adv-sec { padding: 44px 0; }
.adv-sec.adv-alt { background: var(--surface); border-block: 1px solid var(--hairline); }
.adv-sec h2 { font-size: 26px; margin-bottom: 20px; }
.adv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.adv-cols h3, .adv-tier h3 { font-family: var(--sans); font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.adv-cols p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0; }
.adv-steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 14px; max-width: 70ch; }
.adv-steps li { counter-increment: s; position: relative; padding-left: 44px; color: var(--ink-soft); line-height: 1.6; }
.adv-steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 50%; background: var(--water-mid); color: #fff;
  font: 700 14px var(--sans); }
.adv-steps strong { color: var(--ink); }
.adv-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.adv-tier { padding: 22px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); }
.adv-tier.feat { border-color: var(--water-mid); box-shadow: var(--shadow); }
.adv-tier p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.adv-rate { font: 700 13px var(--sans); color: var(--accent); }
.adv-cta { padding: 50px 0 64px; text-align: center; }
.adv-cta h2 { font-size: 28px; margin-bottom: 10px; }
.adv-cta p { color: var(--ink-soft); max-width: 54ch; margin: 0 auto 24px; }
.cta-btn { display: inline-block; font: 700 15px var(--sans); color: #fff; background: var(--accent);
  border: none; border-radius: 26px; padding: 13px 26px; text-decoration: none; }
.cta-btn:hover { filter: brightness(1.06); }
.cta-todo { background: var(--raised); color: var(--muted); border: 1px dashed var(--hairline);
  font-weight: 600; font-family: var(--mono); font-size: 13px; }

/* ---- legal pages ---- */
.legal { padding: 46px 0 60px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 10px; }
.legal h2 { font-size: 19px; font-family: var(--sans); font-weight: 700; margin: 30px 0 8px; }
.legal p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 12px; max-width: 68ch; }
.legal p strong { color: var(--ink); }
.legal-meta { font-size: 13px; color: var(--muted); }
.legal-meta strong { color: var(--ink-soft); }
.legal-note { margin: 18px 0 26px; padding: 12px 16px; background: var(--raised);
  border: 1px solid var(--hairline); border-left: 3px solid var(--gold); border-radius: var(--r);
  font-size: 13.5px; color: var(--ink-soft); }

/* ---- footer ---- */
.site-foot { border-top: 1px solid var(--hairline); background: var(--surface); padding: 34px 0 46px; }
.site-foot .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.site-foot p, .site-foot li { font-size: 13px; color: var(--muted); }
.site-foot h3 { font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }   /* ♿ was h4 under an h2: heading level skipped */
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-foot a { color: var(--ink-soft); text-decoration: none; }
/* the homepage's all-counties list (Jay 2026-09-18: 81 counties made one column
   thousands of px tall). Own full-width row after the other columns, then CSS
   columns so it still reads A-Z DOWN each column; grid auto-fill would read
   across. break-inside keeps a name from splitting over a column edge. */
.site-foot .places { order: 9; flex: 1 1 100%; }
.site-foot .places ul { display: block; columns: 140px 6; column-gap: 20px; }
.site-foot .places li { break-inside: avoid; padding: 3px 0; }
/* ♿ 1.4.1: a link INSIDE a sentence must not rely on colour alone (link vs text
   measured 1.6-1.8:1). Lists of links stay plain -- there is no surrounding text. */
.site-foot .disclaim a, .site-foot .sister a { text-decoration: underline; text-underline-offset: 2px; }
/* ♿ 2.4.1 skip link: off-screen until a keyboard user tabs to it. */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; padding: 8px 12px; border-radius: 6px;
  background: var(--ink); color: var(--ground); font: 600 14px var(--sans); text-decoration: none; }
.skip:focus { left: 8px; outline: 2px solid var(--accent); outline-offset: 2px; }
.site-foot a:hover { color: var(--ink); }
.disclaim { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline);
  font-size: 12px; color: var(--muted); max-width: 78ch; }

/* SHIPPED 2026-08-25 (Jay: "keep it, ship both sites").
   Hero stacking moves from 760px to 900px. This is the SAME fix that already
   shipped for phones ("the sounding card was covering the map on small screens"),
   widened to cover the band where it is actually worst.

   Measured across 120 posters, card area vs lake pixels (B > R+25, the rule the
   texture-flip regression test already uses):

       1440px  13.0% of frame   14.3% of the LAKE hidden    0% of lakes >25%
       1024px  20.6%            21.0%                       2%
        820px  27.2%            27.7%                      71%
        768px  29.1%            29.2%                      79%   <-- worst
       <=760px  0%   (already stacks -- the existing fix)

   The card is a fixed 360px overlay, so as the map shrinks its share grows; the
   old 760px cutoff stopped ~8px short of the peak. Lake occlusion tracks frame
   occlusion almost exactly (14.3 vs 13.0, 29.2 vs 29.1), so the card is not
   sitting on lakes preferentially -- no shape-aware placement would help.

   Above 900px the card still hides 13-21%; there it is handled by the
   fade-while-the-camera-moves behaviour in LAKE_JS, not by stacking, because
   stacking would waste the available width. */
@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; }
  .hero-model { height: 52vh; order: 1; border-bottom: 1px solid var(--hairline); }
  .sounding { position: static; order: 2; left: auto; right: auto; bottom: auto;
    width: auto; max-width: none; margin: 0; border: none; border-radius: 0;
    box-shadow: none; backdrop-filter: none; background: var(--surface);
    padding: 16px 16px 18px; }
}

/* SHIPPED 2026-08-25 -- the card yields while the camera is moving.
   Only where it still overlays (>=901px). Fading on drag beats a button the user
   has to find, and it needs no persisted state: the card is only ever in the way
   while you are actively exploring the map, and JS restores it when the camera
   settles. pointer-events:none so the drag passes straight through. */
@media (min-width: 901px) {
  /* Goes fully invisible, not dimmed. A ghosted card read as screen burn-in
     (Jay, 2026-08-25) -- a faint copy of the readout sitting over the lake looks
     like a rendering fault, which is worse than either state.

     visibility (not just opacity) so the hidden card is out of the a11y tree and
     cannot take keyboard focus -- "Get directions" and "Full details" are links,
     and focusing an invisible link is a trap. It flips on a delay equal to the
     fade so it stays visible THROUGH the fade-out, and back instantly on the way
     in so the return animation is actually seen. */
  .sounding { transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s; }
  .hero.mv-active .sounding {
    opacity: 0; visibility: hidden; transform: translateX(-8px); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* No fade: vanish and return outright. */
  .sounding, .hero.mv-active .sounding { transition: none; }
  .hero.mv-active .sounding { opacity: 0; visibility: hidden; transform: none; }
}

@media (max-width: 760px) {
  .facts .grid { grid-template-columns: 1fr; gap: 30px; }
  .wrap { padding: 0 16px; }
  .sounding h1 { font-size: 26px; }
  .depthbig .n { font-size: 44px; }

  /* compact the on-map tools so they don't crowd the smaller map */
  #compass { width: 50px; height: 50px; left: 10px; right: auto; top: 10px; }
  .viewseg button { padding: 5px 12px; font-size: 12px; }
  #mtools { right: 10px; bottom: 10px; padding: 4px 6px; gap: 5px; }
  #mout { min-width: 60px; font-size: 10.5px; }
  /* RESET VIEW: kept on phones, moved out of the collision instead of hidden.
     It used to be display:none here, on the reasoning that the 2D/3D toggle
     already re-centres the camera -- which is true (apply() fires even on the
     already-active button) but completely undiscoverable: nobody taps the mode
     they are already in to reset. Jay noticed it missing on his phone.
     Bottom-CENTRE collided with the measure bar at bottom-right, so it moves to
     bottom-LEFT, which is empty on phones (the compass is top-left). */
  #resetView { left: 10px; bottom: 10px; transform: none;
               padding: 5px 11px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

/* ---- Great Lake hub map (/lake-michigan/) ---- */
.glhub-intro { padding: 26px 0 6px; }
.glmap-sec { padding: 8px 0 28px; }
.glmap { position: relative; max-width: 560px; margin: 0 auto; }
.glmap img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 2px 10px rgba(8,30,50,.18)); }
.glpin { position: absolute; width: 0; height: 0; text-decoration: none; }
.glpin .dot { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%);
  width: 15px; height: 15px; border-radius: 50%; background: var(--gold);
  border: 2.5px solid var(--navy-deep); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.glpin.soon .dot { background: #9aa7b1; }
.glpin .lab { position: absolute; left: 13px; top: 0; transform: translateY(-50%);
  white-space: nowrap; font: 600 12.5px var(--sans); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--gold); border-radius: 7px;
  padding: 3px 9px; box-shadow: var(--shadow); }
.glpin.soon .lab { color: var(--muted); border-color: var(--hairline); }
.glpin .lab small { font-weight: 400; color: var(--muted); }
.glpin.left .lab { left: auto; right: 13px; }
.glpin.up .lab { top: -17px; }
.glpin.down .lab { top: 17px; }
a.glpin:hover .dot, a.glpin:focus-visible .dot {
  box-shadow: 0 0 0 5px rgba(217,154,28,.30), 0 1px 4px rgba(0,0,0,.35); }
a.glpin:hover .lab { border-color: var(--accent); }
.gllegend { display: flex; gap: 22px; justify-content: center; margin-top: 14px;
  font: 500 12.5px var(--sans); color: var(--muted); }
.gllegend .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  vertical-align: -1px; margin-right: 6px; border: 2px solid var(--navy-deep); }
.gllegend .live { background: var(--gold); }
.gllegend .soon { background: #9aa7b1; }
@media (max-width: 620px) {
  .glpin .lab { font-size: 11px; padding: 2px 6px; }
}

/* 3D disabled on lakes too shallow for their size to show relief */
.viewseg button[disabled] { opacity: .38; cursor: not-allowed; }
.viewseg button[disabled]:hover { background: transparent; }

/* other waters with a launch inside this lake's frame */
.section-note.nearby { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }
.section-note.nearby a { color: var(--water-text); text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .section-note.nearby a { color: var(--shoal); }

/* ---- homepage hero: Michigan sitting in its lakes ---- */
/* The bathymetry is the ground now, so counties need to read as LAND on top of
   water rather than as shapes on the page background. Opaque land fills, and a
   wider max-width because the map carries four whole lakes, not one state. */
.mi-map.hero { max-width: 880px; filter: drop-shadow(0 2px 10px rgba(8,30,50,.20)); }
.mi-map.hero image { image-rendering: auto; }
.mi-map.hero .mc-off { fill: var(--hero-land-off); stroke: var(--co-line); stroke-width: .5; }
.mi-map.hero .mc-on  { fill: var(--hero-land-on);  stroke: var(--co-on-line); stroke-width: .8; }
.mi-map.hero a:hover .mc-on, .mi-map.hero a:focus-visible .mc-on { fill: var(--accent); }
:root { --hero-land-off: #e7ece9; --hero-land-on: #cfe0cf; }
:root[data-theme="light"] { --hero-land-off: #e7ece9; --hero-land-on: #cfe0cf; }
:root[data-theme="dark"]  { --hero-land-off: #2c3a33; --hero-land-on: #415a48; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hero-land-off: #2c3a33; --hero-land-on: #415a48; }
}

/* ---- Great Lakes bay pins on the homepage hero ---- */
/* Labels are hover/focus-only: ten always-on labels at whole-system scale is
   clutter, and the per-lake hub pages are where the labelled view lives. */
.mi-map.hero .baypin { cursor: pointer; }
.mi-map.hero .baypin .bp { fill: var(--gold); stroke: var(--navy-deep); stroke-width: 1.4; }
.mi-map.hero .baypin.soon .bp { fill: #9aa7b1; stroke-width: 1.1; }
.mi-map.hero .baypin .bl {
  font: 700 9px var(--sans); fill: var(--ink); paint-order: stroke;
  stroke: var(--surface); stroke-width: 3.2; stroke-linejoin: round;
  opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.mi-map.hero .baypin:hover .bl, .mi-map.hero .baypin:focus-visible .bl { opacity: 1; }
.mi-map.hero a.baypin:hover .bp { fill: var(--accent); r: 5.4; }
.mi-map.hero .baypin.soon .bl { fill: var(--muted); }
.mi-map.hero .baypin.soon:hover .bl { opacity: 1; }
.bay-list { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.bay-list a { color: var(--water-text); text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .bay-list a { color: var(--shoal); }
:root[data-theme="dark"] .mi-map.hero .baypin .bl { stroke: #0d2a42; }

/* ---- quick-answer FAQ (visible twin of the FAQPage schema) ---------------
   The schema shipped on 2,149 pages while no reader ever saw the answers.
   Rendered from the same lake_faq_pairs() list so the two cannot drift. */
.faq .faqgrid { display: grid; gap: 8px; margin-top: 14px; }
.faqitem { border: 1px solid var(--hairline); border-radius: 8px; background: var(--panel); }
.faqitem > summary { cursor: pointer; padding: 11px 14px; font: 600 15px var(--sans);
  color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faqitem > summary::-webkit-details-marker { display: none; }
.faqitem > summary::after { content: "+"; font-weight: 400; opacity: .55; }
.faqitem[open] > summary::after { content: "\2212"; }
.faqitem > summary:hover { color: var(--sound-red); }
.faqitem > p { margin: 0; padding: 0 14px 12px; font: 400 15px/1.55 var(--sans); color: var(--ink-soft); }
.faqitem:focus-within { outline: 2px solid var(--sound-red); outline-offset: 2px; }

/* ---- statewide discovery pages ------------------------------------------
   A ranked COMPARISON, not a list of strings. Length encodes magnitude in one
   hue (the site's own Blues map ramp); the value keeps a text token so it is
   never read as part of the series colour. Constrained width because the first
   build let the name column run 885px wide -- name and number were 900px apart
   and nothing connected them. */
.disc-hero { padding: 34px 0 4px; }
.disc-hero h1 { margin: 6px 0 10px; }
.disc-hero .answer { max-width: 62ch; }
.disc-list { padding: 6px 0 26px; }
.dlist { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.drow + .drow { border-top: 1px solid var(--hairline); }
.drow a { display: grid;
  grid-template-columns: 2.1rem minmax(9rem, 1fr) minmax(0, 12rem) 5.6rem;
  gap: 14px; align-items: center; padding: 9px 8px; border-radius: 8px;
  text-decoration: none; color: inherit; }
.drow a:hover { background: var(--raised); }
.drow a:hover .dn { color: var(--accent); }
.drank { font: 600 12px var(--mono); color: var(--muted); text-align: right; }
.dmain { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dn { font: 600 15.5px var(--sans); line-height: 1.25; }
.dc { font: 400 12.5px var(--sans); color: var(--muted); }
/* track + fill: 4px rounded data-end, anchored to the left baseline */
.dbar { height: 9px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--muted) 14%, transparent); }
.dbar > i { display: block; height: 100%; border-radius: 999px;
  background: var(--water-mid); }
.ds { font: 600 13.5px var(--mono); text-align: right; color: var(--ink-soft);
  white-space: nowrap; }
/* the top three read first without inventing a second colour meaning */
.drow:nth-child(-n+3) .dn { font-size: 16.5px; }
.drow:nth-child(-n+3) .drank { color: var(--ink-soft); }
@media (prefers-color-scheme: dark) {
  .dbar > i { background: var(--shoal); }
}
:root[data-theme="dark"] .dbar > i { background: var(--shoal); }
:root[data-theme="light"] .dbar > i { background: var(--water-mid); }
@media (max-width: 640px) {
  .drow a { grid-template-columns: 1.8rem minmax(0,1fr) 5.2rem;
            gap: 10px; row-gap: 6px; }
  .dbar { grid-column: 2 / 4; height: 7px; }
}

/* ---- watercraft rules (DNR Watercraft Control Areas, controls.py) --------
   Rules panel, not a warning panel: neutral water-blue chips, official text
   quoted verbatim beside the plain-language label so the reader never has to
   trust our paraphrase. Renders only where a control polygon matched. */
.wctrl { padding: 8px 0 40px; }
.wctrl .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.wctrl h2 { font-size: 22px; }
.wctrl h2::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--water-mid); margin-right: 9px; vertical-align: middle; }
.wctrl .survey { color: var(--muted); font-size: 13px; }
.wrow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 8px 0;
  border-top: 1px solid var(--hairline); }
.wrow:first-of-type { border-top: 0; }
.wchip { font: 700 12px var(--sans); letter-spacing: .02em; padding: 3px 10px;
  border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--water-mid) 16%, transparent); color: var(--ink); }
.wchip.w-motors_prohibited, .wchip.w-vessels_prohibited, .wchip.w-electric_only {
  background: color-mix(in srgb, var(--buoy-gold) 26%, transparent); }
.wext { font: 600 12.5px var(--sans); color: var(--ink-soft); white-space: nowrap; }
.wraw { font: 400 13px var(--sans); color: var(--muted); font-style: italic; }
.wctrl .foot { margin-top: 14px; font-size: 12.5px; color: var(--muted); }
/* --water-mid is theme-invariant and fails contrast on dark surfaces; use the
   body ink colour + underline so the link reads in both themes. */
.wctrl .foot a { color: var(--ink); text-decoration: underline;
  text-underline-offset: 2px; }

/* ---- Paddling Index (methodology v1.0) ----------------------------------
   Two surfaces: a compact row inside the sounding card (approved viewer
   treatment -- no new floating widget) and the full section lower down.
   BAND COLOURS ARE RESTRAINED AND NEVER PUNITIVE: lower bands are quieter,
   not red. A band is never conveyed by colour alone -- the word is always
   present as text. Tokens resolve in both themes. */
.pdrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px;
  margin-top: 12px; padding: 9px 8px 8px; border-top: 1px solid var(--hairline);
  text-decoration: none; color: inherit; border-radius: 0 0 8px 8px;
  min-height: 44px; box-sizing: border-box; }
.pdrow:hover { background: var(--raised); }
.pdrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pd-ico { font-size: 14px; line-height: 1; }
.pd-lbl { font: 600 13.5px var(--sans); }
.pd-num { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1; }
.pd-band { font: 700 13px var(--sans); padding: 2px 9px; border-radius: 999px;
  white-space: nowrap; }
.pd-band.big { font-size: 15px; padding: 3px 12px; }
.pd-conf { font: 600 11.5px var(--sans); color: var(--muted); }
.pd-why { flex-basis: 100%; font: 400 12px var(--sans); color: var(--muted); }
/* NOT var(--water-mid): that token is theme-invariant (#1c5a80) and measures
   only 1.1:1 against the dark sounding card. --ink is 15.1:1 light / 5.8:1
   dark, so the affordance stays legible in both themes; the underline (not
   colour) is what marks it as interactive. */
.pd-more { margin-left: auto; font: 600 12px var(--sans); color: var(--ink);
  align-self: center; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; }
.pdrow:hover .pd-more { text-decoration-thickness: 2px; }
/* phones: the card is already stacked BELOW the viewer, so the row simply
   inherits that -- no bottom sheet, no modal. Reasons line is hidden here
   (compact one-liner only) but the same score/band/suppression state ships. */
@media (max-width: 720px) {
  .pd-why { display: none; }
  .pdrow { padding: 11px 4px; gap: 3px 8px; }
  .pd-lbl { font-size: 14px; }
  .pd-band { font-size: 13px; }
  .pd-more { flex-basis: 100%; margin-left: 0; text-align: left; font-size: 12.5px; }
}
/* band chips -- light theme */
.b-exc  { background: #DCEBE0; color: #1C4F32; }
.b-vg   { background: #DEE9F1; color: #1B4C69; }
.b-good { background: #E4EAEE; color: #2B4351; }
.b-mix  { background: #ECECEA; color: #4A4A46; }
.b-mod  { background: #EDEDED; color: #55585A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .b-exc  { background: #1B3B29; color: #A9DCBB; }
  :root:not([data-theme="light"]) .b-vg   { background: #16354A; color: #9CCBE6; }
  :root:not([data-theme="light"]) .b-good { background: #1B303C; color: #A8C2D2; }
  :root:not([data-theme="light"]) .b-mix  { background: #2A2C2E; color: #C2C4C6; }
  :root:not([data-theme="light"]) .b-mod  { background: #26292B; color: #B6BABD; }
}
:root[data-theme="dark"] .b-exc  { background: #1B3B29; color: #A9DCBB; }
:root[data-theme="dark"] .b-vg   { background: #16354A; color: #9CCBE6; }
:root[data-theme="dark"] .b-good { background: #1B303C; color: #A8C2D2; }
:root[data-theme="dark"] .b-mix  { background: #2A2C2E; color: #C2C4C6; }
:root[data-theme="dark"] .b-mod  { background: #26292B; color: #B6BABD; }
:root[data-theme="light"] .b-exc  { background: #DCEBE0; color: #1C4F32; }
:root[data-theme="light"] .b-vg   { background: #DEE9F1; color: #1B4C69; }
:root[data-theme="light"] .b-good { background: #E4EAEE; color: #2B4351; }
:root[data-theme="light"] .b-mix  { background: #ECECEA; color: #4A4A46; }
:root[data-theme="light"] .b-mod  { background: #EDEDED; color: #55585A; }
/* ---- Phase 6: current wind x directional fetch (live conditions only) ----
   Deliberately quiet: this is context, not an alert, and never a safety call.
   All four states use the same neutral treatment; the WORD carries the meaning
   so nothing depends on colour. */
.wx-exp { margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  background: var(--raised); border-left: 3px solid var(--shoal);
  display: grid; gap: 2px; }
.wx-exp b { font: 700 12.5px var(--sans); color: var(--ink); }
.wx-exp span { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.wx-exp.exp { border-left-color: var(--buoy-gold); }
.wx-exp.calm, .wx-exp.shl { border-left-color: var(--water-mid); }

/* ---- paddling discovery page (/best-paddling-lakes/) ---- */
.pd-method, .pd-elig, .pd-primary, .pd-sections, .pd-regions, .pd-limits { padding: 10px 0 26px; }
.pd-method h2, .pd-elig h2, .pd-primary h2, .pd-sections h2, .pd-regions h2,
.pd-limits h2 { font-size: 21px; margin-bottom: 8px; }
.pd-sections h3, .pdreg h3 { font-size: 15px; margin: 20px 0 4px; }
.pd-method p, .pd-elig p, .pd-limits p { max-width: 68ch; }
.pd-secnote { font-size: 13.5px; color: var(--muted); max-width: 68ch; }
.pd-secnote b { color: var(--ink); }
.pd-weights { list-style: none; padding: 0; margin: 10px 0; max-width: 68ch; }
.pd-weights li { padding: 6px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.pd-weights span { color: var(--muted); font-weight: 600; }
.pd-stats { list-style: none; padding: 0; margin: 12px 0; display: grid;
  gap: 6px; max-width: 48rem; }
.pd-stats li { font-size: 14px; }
.pd-stats b { font-family: var(--serif); font-size: 19px; margin-right: 8px; }
.pdcards { list-style: none; padding: 0; margin: 14px 0 0; display: grid;
  gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.pdc a { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--hairline);
  border-radius: 10px; text-decoration: none; color: inherit; background: var(--surface);
  height: 100%; box-sizing: border-box; }
.pdc a:hover { border-color: var(--shoal); background: var(--raised); }
.pdc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pdc-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pdc-n { font: 600 16px var(--sans); }
.pdc-c { font-size: 12px; color: var(--muted); }
.pdc-s { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 4px; }
.pdc-s b { font-family: var(--serif); font-size: 22px; }
.pdc-p { font: 600 11.5px var(--sans); color: var(--muted); }
.pdc-r { font-size: 13px; color: var(--ink-soft); }
.pdc-a, .pdc-w { font-size: 12.5px; color: var(--muted); }
.pdc-cf { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pdmini { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px;
  max-width: 44rem; }
.pdmini li { display: flex; align-items: baseline; gap: 9px; padding: 5px 0;
  border-bottom: 1px solid var(--hairline); font-size: 14px; }
.pdmini li a { text-decoration: none; color: inherit; font-weight: 600; }
.pdmini li a:hover { text-decoration: underline; }
.pdmini li small { color: var(--muted); font-weight: 400; }
.pdmini li b { margin-left: auto; font-family: var(--serif); font-size: 16px; }
.pdreggrid { display: grid; gap: 8px 26px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.pd-disclink { margin-top: 12px; font-size: 13.5px; }

/* full section */
.paddling { padding: 8px 0 44px; }
.paddling .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px; }
.paddling h2 { font-size: 22px; scroll-margin-top: 18px; }
.paddling h2::before { content: ""; display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; background: var(--shoal); margin-right: 9px; vertical-align: middle; }
.paddling .survey { color: var(--muted); font-size: 13px; }
.pd-hero { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-big { font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1; }
.pd-of { font-size: 17px; color: var(--muted); font-family: var(--sans); font-weight: 600; }
.pd-cf { font: 600 12.5px var(--sans); color: var(--muted); }
.pd-lead { max-width: 62ch; margin: 6px 0 4px; }
.pd-sub { font: 700 12px var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 22px 0 6px; }
.pd-cav { font-size: 13px; color: var(--muted); margin: 0 0 8px; max-width: 62ch; }
.pd-tablewrap { overflow-x: auto; max-width: 100%; min-width: 0; }
.pd-table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 520px; }
.pd-table th { text-align: left; font: 700 11px var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hairline);
  padding: 6px 12px 5px 0; }
.pd-table td { border-bottom: 1px solid var(--hairline); padding: 9px 12px 9px 0;
  vertical-align: top; }
.pd-table th[scope="row"] { font: 600 14px var(--sans); color: var(--ink);
  text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--hairline); }
.pd-table .pd-d { color: var(--muted); font-size: 13px; }
.pd-notes { margin: 4px 0 0; }
.pd-nrow { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 4px 16px;
  padding: 8px 0; border-top: 1px solid var(--hairline); }
.pd-nrow dt { font: 600 14px var(--sans); }
.pd-nrow dd { margin: 0; font-size: 13.5px; color: var(--muted); }
.pd-nrow dd b { color: var(--ink); }
.pd-limited { background: var(--panel); border-radius: 8px; padding: 12px 14px;
  font-size: 14px; max-width: 62ch; }
.paddling .foot { margin-top: 18px; font-size: 12.5px; color: var(--muted);
  max-width: 78ch; line-height: 1.6; }
@media (max-width: 720px) {
  .pd-nrow { grid-template-columns: 1fr; gap: 2px; }
  .pd-big { font-size: 38px; }
  /* STACK the component table rather than scrolling it sideways: a 520px
     min-width table escaped its overflow wrapper and pushed the whole page
     into horizontal scroll at 320-360px. Stacked rows read better on a phone
     and remove the overflow entirely. */
  .pd-table { min-width: 0; display: block; }
  .pd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
  .pd-table tbody, .pd-table tr, .pd-table td, .pd-table th[scope="row"] { display: block; }
  .pd-table tr { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
  .pd-table tr:last-child { border-bottom: 0; }
  .pd-table th[scope="row"] { border-bottom: 0; padding: 0 0 2px; font-size: 15px; }
  .pd-table td { border-bottom: 0; padding: 0 0 2px; }
  .pd-table td.tnum::after { content: " pts"; font-size: 11px; color: var(--muted); }
}
.disc-more { padding: 4px 0 40px; }
.dlinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dlink { display: inline-block; padding: 8px 13px; border: 1px solid var(--hairline);
  border-radius: 999px; text-decoration: none; color: var(--ink);
  font: 600 14px var(--sans); background: var(--raised); }
.dlink:hover { border-color: var(--accent); color: var(--accent); }

/* ---- homepage "explore by the numbers" ----------------------------------
   Sits BELOW the county grid, not above it -- these are a footnote to the
   map, not a feature. Quiet inline links with real separator characters, so
   the row still reads as a list if the stylesheet is stale or missing (the
   pill version ran the six titles into one unreadable string in exactly that
   case). Short labels here; the full titles live on the pages. */
.explore { padding: 8px 0 34px; }
.explore h3 { font: 600 13px var(--sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.explore .dlinks { display: block; margin: 0; line-height: 1.9; }
.explore .dlink { display: inline; padding: 0; border: 0; background: none;
  border-radius: 0; font: 400 15px var(--sans); color: var(--ink-soft);
  text-decoration: none; border-bottom: 1px solid var(--hairline); }
.explore .dlink:hover { color: var(--accent); border-bottom-color: var(--accent); }
.explore .dsep { color: var(--hairline); }

/* --- Non-native species records (USGS NAS via MGLP) ---------------------
   Deliberately quieter than the fishery/stocking panels: this is a record of
   what has been documented, not a warning and not a recommendation. No alarm
   colours -- the site does not editorialise NAS records into "invasive". */
.nonnative { padding: 4px 0 46px; margin-top: 8px; border-top: 1px solid var(--hairline); }
.nonnative .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
                   margin: 0 0 6px; }
.nonnative h2 { font-size: 22px; }
.nn-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
             gap: 18px 26px; margin-top: 4px; }
.nn-group h3 { font: 600 11px var(--sans); letter-spacing: .09em; text-transform: uppercase;
               color: var(--muted); margin: 0 0 7px; padding-bottom: 5px;
               border-bottom: 1px solid var(--hairline); }
.nn-list { list-style: none; margin: 0; padding: 0; }
.nn-list li { padding: 5px 0; border-bottom: 1px solid var(--hairline); }
.nn-list li:last-child { border-bottom: 0; }
.nn-list .nm { display: block; font-size: 14.5px; }
.nn-note { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px;
           line-height: 1.45; }
.nn-none { color: var(--ink-soft, var(--muted)); font-size: 14px; margin: 0 0 12px;
           max-width: 62ch; }
.nn-src { color: var(--muted); font-size: 12px; margin: 16px 0 0; max-width: 74ch;
          line-height: 1.5; }
@media (max-width: 560px) { .nn-groups { grid-template-columns: 1fr; gap: 14px; } }

/* --- Paddling: "Why this score?" disclosure -----------------------------
   The evidence for the score was 21.4% of the whole lake page -- the single
   largest block -- for a number the reader can already see. Collapsing it
   takes the section from 1077px to 238px.

   NOTE the class is .pd-evidence, not .pd-why: .pd-why was already taken by
   the inline rating explanation on the score line, and reusing it would have
   restyled that element. */
/* ---- disclosure controls: option C (Jay, 2026-08-26) ----------------------
   WAS 13.5px semibold blue text under a hairline. It read as an inline link,
   and Jay's report was that readers were not recognising a whole panel of data
   sat behind it: "a little easier for the user to recognize that we have more
   data than what is on the page."
   NOW a bordered row with a left accent bar, so it reads as a CONTROL because
   it has edges -- plus, where the panel holds something countable, a pill
   saying HOW MUCH. The count is the part that actually answers the complaint;
   weight and colour alone cannot say "17 species".
   ⛔ The BODY is deliberately left outside the box. These eight panels contain
   a definition list, three different grids, a scroll-wrapped table and a set of
   blockquotes; boxing them would mean eight separate padding fixes and eight
   new ways to break. The control carries the affordance, the body just flows. */
.pd-evidence, .factdetail, .mapdetail, .fish-all, .ang-all, .nn-about,
.stk-all, .w-raw { margin-top: 14px; }
.pd-evidence > summary,
.factdetail > summary,
.mapdetail > summary,
.fish-all > summary,
.ang-all > summary,
.nn-about > summary,
.stk-all > summary,
.w-raw > summary { cursor: pointer; list-style: none; display: flex;
  flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 11px 13px;
  font: 700 15.5px var(--sans); color: var(--control);
  background: var(--raised); border: 1px solid var(--hairline);
  border-left: 3px solid var(--control); border-radius: 6px;
  /* ⚠️ CAP IT AT THE READING MEASURE (Jay, 2026-08-26). In a full-width
     section -- Notable catches, the Paddling Index, watercraft rules -- the
     control stretched to 1072px and left roughly 900px of empty row between
     the count pill and the caret. It was invisible at phone width and obvious
     at 1280px. 62ch is this file's own house measure, already its most-used
     max-width, so the control now lines up with the prose beside it instead of
     with the container. Inert below the cap, so phones are untouched. */
  max-width: 62ch; }
.pd-evidence > summary::-webkit-details-marker, .factdetail > summary::-webkit-details-marker, .mapdetail > summary::-webkit-details-marker, .fish-all > summary::-webkit-details-marker, .ang-all > summary::-webkit-details-marker, .nn-about > summary::-webkit-details-marker, .stk-all > summary::-webkit-details-marker, .w-raw > summary::-webkit-details-marker { display: none; }
.pd-evidence > summary::marker, .factdetail > summary::marker, .mapdetail > summary::marker, .fish-all > summary::marker, .ang-all > summary::marker, .nn-about > summary::marker, .stk-all > summary::marker, .w-raw > summary::marker { content: ""; }
/* SWAP THE GLYPH, don't rotate it: transforms are ignored on non-replaced
   inline boxes, and ::after is inline here, so rotate(180deg) resolved to the
   identity matrix and the arrow never moved. A content swap needs no
   transition, so it also needs no prefers-reduced-motion escape hatch. */
.pd-evidence > summary::after, .factdetail > summary::after, .mapdetail > summary::after, .fish-all > summary::after, .ang-all > summary::after, .nn-about > summary::after, .stk-all > summary::after, .w-raw > summary::after { content: "▾"; font-size: 12px; color: var(--muted); margin-left: auto; }
.pd-evidence[open] > summary::after, .factdetail[open] > summary::after, .mapdetail[open] > summary::after, .fish-all[open] > summary::after, .ang-all[open] > summary::after, .nn-about[open] > summary::after, .stk-all[open] > summary::after, .w-raw[open] > summary::after { content: "▴"; }
.pd-evidence > summary:hover, .factdetail > summary:hover, .mapdetail > summary:hover, .fish-all > summary:hover, .ang-all > summary:hover, .nn-about > summary:hover, .stk-all > summary:hover, .w-raw > summary:hover { color: var(--ink); }
.pd-evidence > summary:focus-visible, .factdetail > summary:focus-visible, .mapdetail > summary:focus-visible, .fish-all > summary:focus-visible, .ang-all > summary:focus-visible, .nn-about > summary:focus-visible, .stk-all > summary:focus-visible, .w-raw > summary:focus-visible { outline: 2px solid var(--water-mid);
  outline-offset: 3px; border-radius: 4px; }
.pd-evidence[open] > summary,
.factdetail[open] > summary,
.mapdetail[open] > summary,
.fish-all[open] > summary,
.ang-all[open] > summary,
.nn-about[open] > summary,
.stk-all[open] > summary,
.w-raw[open] > summary { margin-bottom: 11px; border-radius: 6px 6px 0 0; }
.pd-evidence > summary:hover, .factdetail > summary:hover,
.mapdetail > summary:hover, .fish-all > summary:hover,
.ang-all > summary:hover, .nn-about > summary:hover,
.stk-all > summary:hover, .w-raw > summary:hover { background: var(--surface); }

/* How much is behind the control. Mono + tabular so a column of these lines up,
   and OPTIONAL -- .nn-about is an explainer, not data, so it carries no count
   rather than a made-up one. */
/* ⚠️ ON ITS OWN LINE, NOT BESIDE THE LABEL (Jay, 2026-08-28). The Option C
   mock read "Additional depth details        16 contours", which implies the
   count sits out to the right. What shipped put the pill immediately after the
   label -- 10px of flex gap and then ~340px of empty row before the caret -- so
   it read as crammed against the text rather than aligned to anything.
   order:1 + flex-basis:100% wraps it to a second row; the caret keeps order 0
   and stays on the first with the label. `order` cannot be set on the label
   itself -- it is an anonymous flex item -- which is why the pill moves and
   everything else holds still. */
.dcount { font: 600 12px var(--mono); color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 20px; padding: 2px 9px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  order: 1; flex-basis: 100%; align-self: flex-start; margin-top: 7px; }

/* ITEM 2 -- what the VE multiplier actually applies to. */
.vnote { font: 400 12px var(--sans); color: var(--muted); white-space: normal; }

/* Highlights line above the collapsed fishery breakdown (rec 2). */
.fish-lead { margin: 6px 0 0; font: 400 13.5px/1.55 var(--sans); }
.fish-lead .cat { display: inline-block; min-width: 74px; font-weight: 700;
  color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; }
.fish-lead b { font-weight: 700; }

/* ---- fishing rules: the preview panel (Jay, 2026-08-26) -------------------
   WAS a bare pill button under 17 fish silhouettes -- the same visual weight as
   a filter control, for what Jay calls "a big part of it".
   NOW the module leads with its own heading, a line of counts, and TWO REAL
   RULES before any click, so the value is visible rather than promised. Jay
   offered more real estate for this one; two rows is what that buys.
   ⛔ NOT open by default. The full list is 17 rows on Houghton Lake, which on a
   phone pushes the fish grid, the bait shops and the weather below a second
   screen -- the hero-card occlusion problem moved further down the page. */
.rules-lead{margin:14px 0 2px;padding:15px 17px;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--control) 30%,transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--control) 12%,transparent),
    color-mix(in srgb,var(--control) 5%,transparent))}
.rules-lead h3{font:700 18px var(--sans);margin:0 0 3px;display:flex;
  align-items:center;gap:9px;flex-wrap:wrap}
.rules-sub{font-size:13.5px;color:var(--ink-soft);margin:0 0 11px;line-height:1.5}
.rules-peek{background:var(--surface);border:1px solid var(--hairline);
  border-radius:6px;overflow:hidden;margin:0 0 12px}
.rules-peek .rline{padding:8px 12px}
.rules-peek .rline:last-child{border-bottom:0}
/* the toggle already flips .rules-on on the wrap, so no new JS is needed:
   once the full list is open the two preview rows would just be duplicates. */
.rules-on .rules-peek{display:none}
/* ---- fishing-rules toggle (strategy doc: enrich the fish panel) ---- */
.rules-bar{display:flex;align-items:center;gap:12px;margin:10px 0 2px;flex-wrap:wrap}
/* ⚠️ REPLACED, not overridden. The first attempt added a new .rules-toggle
   block earlier in the file; this one sat AFTER it and won on source order, so
   the button kept its old outline look and nothing appeared to change. */
.rules-toggle{font:600 14.5px var(--sans);padding:8px 16px;border-radius:20px;
  border:0;background:var(--control);color:var(--surface);cursor:pointer}
.rules-toggle:hover{filter:brightness(1.08)}
.rules-toggle:focus-visible{outline:2px solid var(--control);outline-offset:3px}
.rules-toggle[aria-pressed="true"]{background:transparent;color:var(--control);
  border:1px solid var(--control)}
.rules-date{font-size:13px;opacity:.75}
/* Beta badge (2026-08-25). Sits in the BAR so it shows while the panel is still
   collapsed. Uses --warn, the same hue as the "Special rules" status pill, so it
   reads as "pay attention" in the vocabulary the module already established --
   not as an error (--accent would say "informational", red would overstate it). */
.rules-beta{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:11px;border:1px solid currentColor;color:var(--warn,#a05a00)}
.rules-beta-note{border-left-color:var(--warn,#a05a00);background:rgba(160,90,0,.07)}
.rules-body{display:none;margin-top:8px}
.rules-on .rules-body{display:block}
.rules-note{font-size:14px;margin:6px 0;padding:8px 12px;border-left:3px solid var(--accent,#1b5f8a);background:rgba(27,95,138,.06)}
/* ⚠️ WRAP. .rname reserves 11em -- 176px -- which is 47% of a 375px screen and
   more than half of a 360px one, so the limits themselves were squeezed into an
   82px column and below ~370px the row overflowed outright: measured 16 of 17
   rows past their container, and the whole PAGE scrolling sideways. Below 520px
   the values now drop to their own full-width line under the species and its
   status, which is also simply easier to read on a phone. */
.rline{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:7px 2px;border-bottom:1px dashed var(--line,#ccd5)}
.rline:last-child{border-bottom:0}
.rname{min-width:11em;font-weight:600}
.rstat{font-size:12.5px;letter-spacing:.02em;padding:2px 9px;border-radius:11px;border:1px solid currentColor}
.rstat.open{color:var(--ok,#1e7d46)}
.rstat.special{color:var(--warn,#a05a00)}
.rstat.cir{color:var(--accent,#1b5f8a)}
.rstat.closed{color:var(--bad,#a03030)}
.rstat.unresolved{color:inherit;opacity:.75}
.rvals{font-size:14px;opacity:.9}
@media (max-width:520px){
  .rname{min-width:0}
  .rvals{flex:1 0 100%;margin-top:1px}
}
.rvals .tnum{font-variant-numeric:tabular-nums}
.rules-verbatim{margin:10px 0 4px}
.rules-verbatim summary{cursor:pointer;font-size:14px}
.rules-verbatim blockquote{margin:8px 0 4px;padding:8px 14px;border-left:3px solid var(--line,#9ab);
  font-style:italic;font-size:14px}
.rules-src{font-size:12.5px;opacity:.7;margin-top:10px}

/* Homepage entry to /lighthouses/. Sits with the bay list under the hero map --
   one line of indexable text rather than 130 markers, because at the hero's
   scale the median gap between lighthouses is 9.5px against the bay pins' 56px
   and a third sit within 4px of a neighbour. See build_site.lighthouse_row(). */
.lh-row{font-size:13.5px;color:var(--ink-soft);margin:6px 0 0;max-width:78ch}
.lh-row b{color:var(--ink)}

/* ---- the lighthouse feature on the homepage --------------------------
   Jay: "I feel it could easily get looked over with all of the maps
   underneath." It was a <p> at the end of the hero, right after the bay
   LINK LIST and right before 83 county cards -- so it read as one more
   line of that list. The fix is not mainly size: it has to look like a
   DIFFERENT KIND OF THING. Border, glyph, heading-weight type. */
.lh-feat{display:flex;align-items:center;gap:14px;margin:18px 0 0;padding:14px 16px;border:1px solid var(--hairline);border-radius:10px;border-left:4px solid var(--control);background:var(--raised);text-decoration:none;color:inherit;transition:background .15s ease}
.lh-feat:hover{background:var(--surface)}
.lh-feat:focus-visible{outline:2px solid var(--control);outline-offset:3px}
.lh-feat-i{width:30px;height:30px;flex:none;color:var(--control)}
.lh-feat-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.lh-feat-t b{font:700 17px var(--sans);color:var(--ink)}
.lh-feat-s{font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.lh-feat-go{margin-left:auto;font-size:18px;color:var(--control);flex:none}
@media (max-width:520px){.lh-feat{gap:11px;padding:12px 13px}.lh-feat-i{width:24px;height:24px}.lh-feat-t b{font-size:15.5px}}

/* Desktop note for the offline-navigation feature (2026-09-03). The Navigate
   button is handheld-only (pointer:coarse) and was simply removed on a mouse
   device, leaving no trace the feature existed. One quiet line under the model
   instead, inserted by the entry-point script in build_site.py. */
.nav-desk{margin:.5rem 0 0;font-size:13px;line-height:1.45;color:var(--muted)}

/* County-page lake map (2026-09-04): every built lake on the county outline,
   dot size + Blues shade by max depth. The land fill is a dedicated token, NOT
   --raised: in dark theme --raised sat too close to the ground and the county
   read as a faint smudge (Jay's note on the sketch). */
/* Dark mode (Jay, 2026-09-05): the land was navy and the two deepest dot bands
   are near-navy, so they blended; and the dot outline used --surface, which is
   dark in dark mode. Land is now a neutral slate -- land is not water -- and the
   dot halo is its own light token. The depth ramp direction is unchanged. */
:root { --cm-land: #e3ebf0; --cm-edge: #8fa6b6; --cm-halo: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cm-land: #33424a; --cm-edge: #7d919c; --cm-halo: #dbe8f2; } }
:root[data-theme="dark"] { --cm-land: #33424a; --cm-edge: #7d919c; --cm-halo: #dbe8f2; }
.cmap { margin: 22px 0 6px; max-width: 640px; }
.cmap figcaption .eyebrow { margin-bottom: 4px; }
.cm-sub { margin: 0 0 8px; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.cmap-svg { width: 100%; height: auto; display: block; overflow: visible; }
.cm-land { fill: var(--cm-land); stroke: var(--cm-edge); stroke-width: 1; stroke-linejoin: round; }
.cm-dot { cursor: pointer; }
.cm-hit { fill: transparent; }
.cm-pt, .cm-bay { stroke: var(--cm-halo); stroke-width: 1; transform-box: fill-box; transform-origin: center;
  transition: transform .1s ease, stroke .1s ease; }
.cm-dot:hover .cm-pt, .cm-dot:focus-visible .cm-pt,
.cm-dot:hover .cm-bay, .cm-dot:focus-visible .cm-bay { transform: scale(1.7); stroke: var(--accent); stroke-width: 1.4; }
.cm-dot:focus { outline: none; }
.cm-lbl { font: 600 11.5px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--ground);
  stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.cm-lg { font: 11px var(--sans); fill: var(--ink-soft); }


/* ---- shipwreck reconstructions: hotspots, preview panel, pages (pilot) ---- */
.hs.wk-hs { width: 15px; height: 15px; background: var(--ink); box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--ink); }
.hs.wk-hs.a { background: rgba(10,39,64,.25); border: 2px dashed var(--ink); box-shadow: 0 0 0 2px #fff; }
.hs.wk-hs .lab { left: 18px; background: var(--navy-deep); color: #fff; }
.hs.wk-hs.a .lab { background: rgba(10,39,64,.78); }
.hs.wk-hs.q .lab { opacity: 0; transition: opacity .12s; }
.hs.wk-hs.q:hover .lab, .hs.wk-hs.q:focus-visible .lab { opacity: 1; }
.hs.wk-hs:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
model-viewer.wk-off .wk-hs { display: none; }
/* cluster markers + dense bays (2026-09-07: Thunder Bay stacked six pins inside one marker's width) */
.hs.wk-hs.wk-cl { width: 24px; height: 24px; background: var(--navy-deep); border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--ink), 0 1px 4px rgba(0,0,0,.5); }
.hs.wk-hs.wk-cl .num { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 var(--sans); color: #fff; }
.hs.wk-hs.wk-cl .lab { left: 28px; top: 1px; }
model-viewer.wk-dense .wk-hs .lab { opacity: 0; transition: opacity .12s; }
model-viewer.wk-dense .wk-hs:hover .lab, model-viewer.wk-dense .wk-hs:focus-visible .lab { opacity: 1; }
model-viewer.wk-dense .wk-hs:hover, model-viewer.wk-dense .wk-hs:focus-visible { z-index: 3; }
.wkp-list { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 6px; }
.wkp [hidden] { display: none !important; }   /* site.css has no global [hidden] rule; flex/grid children of the panel need this */
.wkp-pick { width: 100%; text-align: left; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--hairline);
  border-radius: 8px; background: var(--raised); color: var(--ink); cursor: pointer; font: inherit; }
.wkp-pick:hover, .wkp-pick:focus-visible { border-color: var(--sound-red); }
.wkp-pick strong { font-size: 15px; }
.wkp-pick span { font-size: 12.5px; color: var(--ink-soft); }
#wkToggle { position: absolute; left: 16px; top: 16px; }   /* top-left: bottom-left overlapped 'Get directions' on a laptop (Jay, 2026-09-06) */
.wklinks { display: inline-flex; gap: 10px; margin-left: 8px; }
.wklinks .wkopen { font: 600 12.5px var(--sans); border: 1px solid var(--ink-soft); background: transparent; color: var(--ink);
  border-radius: 12px; padding: 1px 9px; cursor: pointer; }
.wklinks .wkopen:hover { background: var(--control); border-color: var(--control); color: #fff; }
.wklinks a { font-size: 12.5px; }

.wkp { position: fixed; z-index: 60; right: 18px; top: 78px; width: min(420px, calc(100vw - 36px)); max-height: calc(100vh - 96px);
  overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 18px 60px rgba(7,28,46,.35); padding: 16px 18px 14px; }
.wkp[hidden] { display: none; }
.wkp-close { position: absolute; right: 8px; top: 6px; font-size: 26px; line-height: 1; border: none; background: transparent;
  color: var(--muted); cursor: pointer; padding: 6px 10px; }
.wkp-close:hover { color: var(--ink); }
.wkp-title { font-size: 24px; margin: 2px 0 4px; line-height: 1.15; }
.wkp-title .era, .wkpage h1 .era, .wkcard .era { font: italic 15px var(--serif, Georgia, serif); color: var(--muted); margin-left: 6px; font-weight: 400; }
.wkhero .wkera { font: italic 17px/1.35 var(--serif, Georgia, serif); color: var(--muted); margin: 2px 0 12px; max-width: 60ch; }
.wkcard .wkera { font: italic 14px/1.3 var(--serif, Georgia, serif); color: var(--muted); margin: 0 0 6px; }
.wkp-meta { margin: 0 0 4px; color: var(--ink-soft); font-size: 14px; }
.wkp-where { margin: 0 0 10px; font-size: 14px; color: var(--ink); }
.wkp-scene { position: relative; aspect-ratio: 3 / 2; background: var(--raised); border-radius: 6px; overflow: hidden; }
.wkp-scene[hidden] { display: none; }
.wkp-scene img, .wkp-scene canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.wkp-scene img[hidden] { display: none; }
.wkp-status { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; font: 600 12px var(--sans);
  background: rgba(7,28,46,.72); color: #eaf3fb; }
.wkp-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 6px; flex-wrap: wrap; }
.wkp-sails { font-size: 14px; display: flex; gap: 6px; align-items: center; }
.wkp-link, .wkp-link:hover { background: var(--sound-red); border-color: var(--sound-red); color: #fff; text-decoration: none; }
.wkp-hist, .wkp-note { font-size: 13.5px; color: var(--ink-soft); margin: 6px 0; }
.wkp-legal { font-size: 12px; color: var(--muted); margin: 10px 0 0; border-top: 1px solid var(--hairline); padding-top: 8px; }
@media (max-width: 900px) {
  .wkp { right: 0; left: 0; top: auto; bottom: 0; width: auto; max-height: 82vh; border-radius: 14px 14px 0 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  #wkToggle { left: 12px; top: 12px; }
}

/* /shipwrecks/ pages */
.wkpage .wkhero { padding: 34px 0 10px; }
.wkpage h1 { font-size: clamp(30px, 4.5vw, 46px); margin: 6px 0 12px; }
.wkpage .lede { max-width: 70ch; font-size: 17px; color: var(--ink-soft); }
.wkfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 22px; margin: 18px 0 4px;
  padding: 14px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.wkfact .k { display: block; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wkfact .v { font-size: 15px; }
.wkstage { padding: 10px 0 20px; }
.wkviewer { border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: var(--raised); }
.wkscene { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #f3f6f8; }
/* ⛔ NEVER pair aspect-ratio with min-height here. On a 375 px phone 16:9 of the 343 px box is 193 px, so
   min-height: 280px clamped the height and the browser TRANSFERRED the ratio back into the width:
   280 x 16/9 = 498 px, clipped by .wkviewer's overflow:hidden. The ship was centred in a canvas whose
   right third was off-page -- Jay's 'off-centre in portrait' (2026-09-08). Landscape and desktop never
   hit the clamp. Narrow screens get an explicit height instead; the viewer refits to any box. */
@media (max-width: 640px) { .wkscene { aspect-ratio: auto; height: 280px; } }
:root[data-theme="dark"] .wkscene { background: #0b1f30; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wkscene { background: #0b1f30; } }
.wkscene img, .wkscene canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
.wkscene img[hidden] { display: none; }
.wkstatus { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 14px;
  font: 600 12px var(--sans); background: rgba(7,28,46,.72); color: #eaf3fb; }
.wkstatus[hidden] { display: none; }
.wkstatus.err { background: var(--bad); }
.wktools { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--hairline); background: var(--surface); }
.wkviews { display: inline-flex; border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.wkviews button { font: 700 12.5px var(--sans); border: none; background: transparent; color: var(--ink-soft); padding: 7px 14px; cursor: pointer; }
.wkviews button[aria-pressed="true"] { background: var(--sound-red); color: #fff; }
.wktoggle { font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; color: var(--ink); }
.wktoggle input, .wkp-sails input { accent-color: var(--sound-red); width: 16px; height: 16px; }
.wksave { margin-left: auto; font: 600 12.5px var(--sans); border: 1px solid var(--hairline); background: transparent; color: var(--ink);
  border-radius: 14px; padding: 6px 12px; cursor: pointer; }
.wksave:hover { border-color: var(--control); color: var(--control); }
.wkhint { font-size: 12.5px; color: var(--muted); margin: 0; padding: 8px 14px 10px; background: var(--surface); }
.wkbody, .wkhistory, .wksources, .wkhub { padding: 22px 0; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
@media (max-width: 800px) { .cols2 { grid-template-columns: 1fr; } }
.wkpage h2 { font-size: 24px; margin: 0 0 6px; }
.wkpage h3 { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
.wkpage ul { padding-left: 20px; color: var(--ink-soft); font-size: 15px; }
.wkpage li { margin: 5px 0; }
.wkassume { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--ink-soft); background: var(--raised); border-radius: 0 4px 4px 0; font-size: 14px; }
.wkgallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wkgallery figure, .illus { margin: 0; }
.wkgallery img, .illus img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--hairline); display: block; }
.wkgallery figcaption, .illus figcaption { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.illus { margin-top: 14px; }
.illus-weather { color: var(--ink-soft); }
.wkp-caveat { font-size: 13px; color: var(--ink-soft); margin: 6px 0; padding-left: 8px; border-left: 3px solid var(--buoy-gold); }
.wknotes { max-width: 78ch; font-size: 15.5px; }
.wknotes h3, .wknotes h4 { font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 22px 0 6px; }
.tblwrap { overflow-x: auto; margin: 10px 0 14px; }
.tblwrap table { border-collapse: collapse; font-size: 14px; min-width: 520px; }
.tblwrap th, .tblwrap td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.tblwrap th { font: 600 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wksrc li { margin: 8px 0; }
.wkcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-bottom: 18px; }
.wkcard { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center; text-decoration: none; color: inherit;
  border: 1px solid var(--hairline); border-radius: 10px; padding: 12px; background: var(--surface); }
.wkcard:hover { border-color: var(--ink-soft); }
.wkcard img { width: 100%; border-radius: 6px; }
.wkcard h2 { font-size: 20px; margin: 4px 0; }
.wkcard p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.muted { color: var(--muted); }

/* "new" pill for the shipwreck pilot notices */
.wknew { display: inline-block; vertical-align: middle; font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--sound-red); border-radius: 9px; padding: 2px 7px; margin-left: 6px; }
.wkroster { border-left: 3px solid var(--sound-red); padding-left: 12px; }
.wk-feat { border-left-color: var(--sound-red); }
.wk-feat .lh-feat-i, .wk-feat .lh-feat-go { color: var(--sound-red); }
.wkbay { font-size: 22px; margin: 26px 0 10px; }
.wkbay .wkcount { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.wkbay a { color: inherit; text-decoration: none; }
.wkbay a:hover { text-decoration: underline; }

/* ---- Invasive species: homepage row, lake-panel pictures, /invasive-species/ (2026-09-17) ---- */
.is-feat { border-left-color: var(--ok); }
.is-feat .lh-feat-go { color: var(--ok); }
.is-feat-strip { display: flex; flex: none; }
.is-feat-strip img { width: 44px; height: 44px; margin-left: -10px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--hairline); padding: 3px; }
.is-feat-strip img:first-child { margin-left: 0; }
@media (max-width:520px) { .is-feat-strip img { width: 34px; height: 34px; margin-left: -9px; padding: 2px; }
  .is-feat-strip img:nth-child(n+4) { display: none; } }

.nn-list li.nn-pic > a { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.nn-list li.nn-pic img { width: 44px; height: 44px; flex: none; border-radius: 8px;
  background: var(--raised); border: 1px solid var(--hairline); }
.nn-list li.nn-pic .nm { color: var(--water-text); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; }
.nn-list li.nn-pic > a:hover .nm { color: var(--ink); }
.nn-list li.nn-pic .nn-note { margin-left: 54px; }
.nn-idlink { margin: 14px 0 0; font-size: 14px; }
.nn-idlink a { color: var(--water-text); font-weight: 600; }

.is-main { padding: 18px 0 56px; }
.is-main section { margin: 30px 0 0; }
.is-main h2 { font-size: 22px; margin: 0 0 10px; }
.is-main p, .is-main li { font-size: 15.5px; line-height: 1.6; max-width: 72ch; }
.is-main a { color: var(--water-text); }
.is-crumbs { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.is-crumbs a { color: var(--muted); }
.is-head .is-eyebrow { font: 600 11.5px var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px; }
.is-head h1 { font-size: clamp(28px, 4.2vw, 40px); }
.is-sci { margin: 8px 0 0; color: var(--ink-soft); font-size: 15px; }
.is-lead { font-size: 16.5px !important; color: var(--ink-soft); margin: 12px 0 0; }
.is-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.is-badge { display: inline-block; font: 600 12.5px var(--sans); padding: 4px 10px; border-radius: 999px;
  border: 1px solid transparent; line-height: 1.35; }
.is-b-pro { background: color-mix(in srgb, var(--sound-red) 12%, var(--surface)); color: #8e0d17;
  border-color: color-mix(in srgb, var(--sound-red) 35%, var(--surface)); }
.is-b-res { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--gold-text);
  border-color: color-mix(in srgb, var(--gold) 40%, var(--surface)); }
.is-b-none { background: var(--raised); color: var(--ink-soft); border-color: var(--hairline); }
.is-b-fed { background: color-mix(in srgb, var(--water-mid) 12%, var(--surface)); color: var(--water-text);
  border-color: color-mix(in srgb, var(--water-mid) 35%, var(--surface)); }
.is-b-count { background: transparent; color: var(--ink-soft); border-color: var(--hairline); font-weight: 500; }

.is-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0 0; }
.is-figs figure { margin: 0; background: var(--raised); border: 1px solid var(--hairline);
  border-radius: var(--r); padding: 14px 14px 10px; }
.is-figs img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.is-figs figcaption { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; text-align: center; }
.is-art { font-size: 12.5px !important; color: var(--muted); margin: 10px 0 0; }
/* look-alike comparison cards: the SAME vocabulary as the fish guide's .fg-cf,
   because they answer the same question. Full-width section, so they can never be
   mistaken for a second view of the invasive itself (Jay, 2026-09-19). */
.is-la { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
  gap: 16px; margin: 14px 0 0; }
.is-la figure { margin: 0; border: 1px solid var(--hairline); border-radius: 10px;
  padding: 10px; background: var(--raised); }
.is-la img { width: 100%; height: auto; display: block; border-radius: 6px; }
.is-la figcaption { font-size: 14px; line-height: 1.4; margin-top: 6px; }
.is-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px 36px; }
.is-size { margin: 0 0 8px; }
.is-id { margin: 0; padding-left: 20px; }
.is-id li { margin: 0 0 6px; }
.is-season, .is-note { background: var(--raised); border-left: 3px solid var(--gold); padding: 9px 12px;
  border-radius: 0 8px 8px 0; font-size: 14.5px !important; }
.is-first { font-size: 14.5px !important; }
.is-first span { color: var(--muted); }
.is-do { background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 16px 20px 6px; }
.is-do ul { margin: 0; padding-left: 20px; }
.is-do li { margin: 0 0 10px; }
.is-lakes { columns: 3 240px; column-gap: 28px; margin: 10px 0 0; }
.is-lk { break-inside: avoid; margin: 0 0 12px; }
.is-lk h3 { font: 600 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 3px; }
.is-lk p { font-size: 14px !important; margin: 0; line-height: 1.55; }
.is-caveat { font-size: 13px !important; color: var(--muted); margin: 10px 0 0; }
.is-sources ul { padding-left: 20px; margin: 0; }
.is-sources li { font-size: 14px; margin: 0 0 4px; }
.is-back { margin: 34px 0 0; font-size: 14.5px; }

.is-group h2 { font-size: 21px; }
.is-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.is-card { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--hairline);
  border-radius: var(--r); background: var(--surface); color: inherit; text-decoration: none;
  transition: background .15s ease, border-color .15s ease; }
.is-card:hover { background: var(--raised); border-color: var(--co-line); }
.is-card:focus-visible { outline: 2px solid var(--control); outline-offset: 2px; }
.is-card img { width: 76px; height: 76px; flex: none; border-radius: 8px; background: var(--raised); }
.is-card-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.is-card-t b { font: 700 16px var(--sans); color: var(--ink); }
.is-card-t i { font-size: 13px; color: var(--ink-soft); }
.is-card-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
.is-card-m .is-badge { font-size: 11.5px; padding: 2px 8px; }
.is-card-n { font-size: 12.5px; color: var(--muted); }
.is-about p { color: var(--ink-soft); font-size: 14.5px !important; }

@media (max-width: 720px) {
  .is-figs { grid-template-columns: 1fr; }
  .is-la { grid-template-columns: 1fr; }
  .is-cols { grid-template-columns: 1fr; }
  .is-do { padding: 14px 16px 4px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .is-b-pro { color: #ffb3b8; }
  :root:not([data-theme="light"]) .is-b-res { color: #f2cf7d; }
  :root:not([data-theme="light"]) .is-b-fed, :root:not([data-theme="light"]) .nn-idlink a,
  :root:not([data-theme="light"]) .is-main a, :root:not([data-theme="light"]) .nn-list li.nn-pic .nm { color: var(--shoal); } }
:root[data-theme="dark"] .is-b-pro { color: #ffb3b8; }
:root[data-theme="dark"] .is-b-res { color: #f2cf7d; }
:root[data-theme="dark"] .is-b-fed, :root[data-theme="dark"] .nn-idlink a,
:root[data-theme="dark"] .is-main a, :root[data-theme="dark"] .nn-list li.nn-pic .nm { color: var(--shoal); }
/* feature rows under the homepage map share one width, so two stacked rows read as a set
   rather than two boxes sized to their own text (2026-09-17, when the invasive row joined) */
.state-map .lh-feat { width: min(100%, 880px); box-sizing: border-box; }

/* ---- /fish/ "Fish of Michigan" guide (fish_guide.py, 2026-09-18) ---------------------------
   Layout from the accepted bluegill mock-up (docs/FishGuide/mockup). Map dots reuse .cm-* from
   the county map; text colours use the ♿ text tokens only. */
.fg-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: center; margin: 8px 0 6px; }
.fg-fig { margin: 0; }
.fg-fig img { width: 100%; height: auto; display: block; }
.fg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.fg-facts div { background: var(--raised); border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; }
.fg-facts .fg-rec { grid-column: 1 / -1; }
.fg-facts dt { font: 600 11.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.fg-facts dd { margin: 0; font-size: 15px; line-height: 1.35; }
.fg-sec { margin: 34px 0 0; }
.fg-sec > h2 { margin-bottom: 6px; }
.fg-sec h3 { margin: 18px 0 6px; }
.fg-grid2 > div > h3:first-child { margin-top: 0; }
.fg-lead { color: var(--ink-soft); margin: 0 0 14px; max-width: 70ch; }
.fg-grid2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.fg-mapfig { margin: 0; }
.fg-b { fill: #2f7fb8; }
.fg-o { fill: none; stroke: var(--cm-edge); stroke-width: .8; opacity: .8; }
.fg-legend { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; }
.fg-k { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.fg-kb { background: #2f7fb8; box-shadow: 0 0 0 1px var(--cm-halo); }
.fg-ko { border: 1px solid var(--cm-edge); width: 6px; height: 6px; }
.fg-ev { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.fg-ev li { display: grid; grid-template-columns: 4.2em 1fr; gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.4; }
.fg-ev b { font: 700 20px var(--mono, monospace); color: var(--water-text); text-align: right; }
.fg-src { font-size: 13.5px; color: var(--muted); }
.fg-bar { display: grid; grid-template-columns: minmax(9em, 13em) 1fr 3em; gap: 10px; align-items: center; font-size: 14px; margin: 5px 0; }
.fg-bt { background: var(--raised); border-radius: 4px; height: 12px; overflow: hidden; border: 1px solid var(--hairline); }
.fg-bt span { display: block; height: 100%; background: #2f7fb8; }
.fg-bv { text-align: right; color: var(--ink-soft); }
.fg-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 140px; align-items: end; margin: 8px 0 4px; }
.fg-mc { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.fg-mb { display: block; background: #2f7fb8; border-radius: 3px 3px 0 0; min-height: 2px; }
.fg-mb.ice { background: #7fb3d5; }
.fg-ml { font: 600 12px var(--sans); color: var(--muted); text-align: center; margin-top: 4px; }
.fg-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 8px 0 0; }
.fg-chips li { border: 1px solid var(--hairline); background: var(--raised); border-radius: 999px; padding: 5px 12px; font-size: 14px; }
.fg-chips a { text-decoration: none; }
.fg-chips b { color: var(--water-text); }
.fg-cf, .fg-idset { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.fg-idset { grid-template-columns: repeat(auto-fit, minmax(220px, 340px)); }   /* pairs sit side by side; one per row on a phone */
.fg-cf figure, .fg-idset figure { margin: 0; border: 1px solid var(--hairline); border-radius: 10px; padding: 10px; background: var(--raised); }
.fg-cf img, .fg-idset img { width: 100%; height: auto; display: block; }
.fg-cf figcaption, .fg-idset figcaption { font-size: 14px; line-height: 1.4; margin-top: 6px; }
.fg-top { list-style: none; padding: 0; margin: 8px 0 0; columns: 2; column-gap: 24px; }
.fg-top li { break-inside: avoid; font-size: 14.5px; margin: 0 0 5px; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--hairline); }
.fg-top .tnum { color: var(--muted); }
.fg-n { font: 600 12px var(--sans); color: var(--muted); }
details.fg-all summary { cursor: pointer; font-weight: 600; color: var(--water-text); }
.fg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 18px 0 8px; }
.fg-card { display: grid; gap: 6px; border: 1px solid var(--hairline); background: var(--raised); border-radius: 12px; padding: 12px; text-decoration: none; color: var(--ink); }
.fg-card:hover, .fg-card:focus-visible { border-color: var(--accent); }
.fg-cimg { display: flex; align-items: center; justify-content: center; height: 96px; }
.fg-cimg img { max-width: 100%; max-height: 96px; width: auto; height: auto; }
.fg-ct { display: grid; gap: 2px; }
.fg-ct b { font-size: 16px; }
.fg-ct i { font-size: 13px; color: var(--ink-soft); }
.fg-cn { font-size: 13px; color: var(--water-text); font-weight: 600; }
.fname a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 2px; }
.fname a:hover, .fname a:focus-visible { text-decoration-color: currentColor; }
@media (max-width: 760px) {
  .fg-hero, .fg-grid2 { grid-template-columns: 1fr; }
  .fg-cf { grid-template-columns: 1fr; }
  .fg-top { columns: 1; }
  .fg-bar { grid-template-columns: 8.5em 1fr 2.6em; }
}
/* homepage: one row for both field guides (Michigan, 2026-09-18). A <div>, not an <a>: it holds two links */
.fg-feat { border-left-color: var(--ok); }
.fg-feat:hover { background: var(--raised); }
.fg-feat .lh-feat-go { color: var(--ok); text-decoration: none; }
.fg-feat-a { text-decoration: none; color: inherit; }
.fg-feat-a:hover b, .fg-feat-a:focus-visible b { text-decoration: underline; }
.fg-feat-strip { display: flex; flex: none; align-items: center; }
.fg-feat-strip img { height: 30px; width: auto; margin-left: -8px; }
.fg-feat-strip img:first-child { margin-left: 0; }
.fg-feat-2 { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.fg-feat-2 a { font-weight: 600; }
.fg-panel-link { margin: 10px 0 0; font-size: 14px; }
@media (max-width:520px) { .fg-feat-strip img { height: 22px; } .fg-feat-strip img:nth-child(n+3) { display: none; } }

/* ---- homepage split layout (Indiana, 2026-09-18; build_site.home_featured) ----------------
   Codex's design brief: Michigan's homepage is rich because its blue IS water (NOAA's lake
   floor). Indiana's blue was a coverage flag on a tall, narrow county map. So three real depth
   maps lead, and the state map shrinks into a rail beside them: counties painted as LAND and
   every mapped lake a depth-shaded dot (the county map's .cm-* vocabulary and halo token).
   Previews are first in the source, so one order serves desktop, phone and keyboard alike. */
.home-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px 48px;
  align-items: start; width: 100%; }
.home-split h2.eyebrow { margin: 0 0 12px; }
.hf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hf-card { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .16s ease, border-color .16s ease; }
.hf-card:hover { transform: translateY(-3px); border-color: var(--water-mid); }
.hf-card:focus-visible { outline: 2px solid var(--control); outline-offset: 3px; }
.hf-lead { grid-column: 1 / -1; }
/* Every poster spends its top fifth on sky. Measured on all 137 Indiana posters: the terrain
   never starts above 17.3% of the height, so a bottom-anchored 16:10 crop (drops the top 16.7%)
   tightens the card and clips none of them. 16:9 would clip 121. */
.hf-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  object-position: center bottom; background: var(--navy-deep); }
.hf-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; flex: 1; }
.hf-why { font: 700 11px/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--water-text); }
.hf-name { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.2; }
.hf-lead .hf-name { font-size: 25px; }
.hf-meta { color: var(--muted); font-size: 13px; line-height: 1.45; }
.hf-meta b { color: var(--accent-text); font-weight: 700; }
.hf-meta span { white-space: nowrap; }
.hf-go { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--water-text); }
.hf-card:hover .hf-go, .hf-card:focus-visible .hf-go { text-decoration: underline; }
.hf-more { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.hf-more b { color: var(--ink); }
.hf-more a { font-weight: 600; color: var(--water-text); }

.hm { display: flex; flex-direction: column; min-width: 0; }
.hm .mi-map.lakes { max-width: 450px; align-self: center; }
/* Land, not water. Own tokens (seeded from the Michigan hero's, so the two homepages rhyme)
   because here 52 of 92 counties are "off": on the light ground the hero's off-tone is within
   a shade of the page and the state's outline dissolved into it.
   --home-dot-ring: the county map rings its dots with --cm-halo, which is WHITE on the light
   theme. At this map's smaller dots the two palest depth bands then vanished into the pale
   land (first render, light theme). Navy on light, the halo on dark: every band keeps an edge. */
:root { --home-land-off: #dde5df; --home-land-on: #c2d8c3; --home-dot-ring: #0a2740; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --home-land-off: #26332d; --home-land-on: #415a48; --home-dot-ring: #dbe8f2; } }
:root[data-theme="light"] { --home-land-off: #dde5df; --home-land-on: #c2d8c3; --home-dot-ring: #0a2740; }
:root[data-theme="dark"] { --home-land-off: #26332d; --home-land-on: #415a48; --home-dot-ring: #dbe8f2; }
.mi-map.lakes .mc-off { fill: var(--home-land-off); stroke: var(--co-line); stroke-width: .5; }
.mi-map.lakes .mc-on  { fill: var(--home-land-on);  stroke: var(--co-on-line); stroke-width: .8; }
.mi-map.lakes a:hover .mc-on, .mi-map.lakes a:focus-visible .mc-on { fill: var(--accent); }
/* the dots are a picture of where the lakes are, never targets: a third sit within 4 px of a
   neighbour, so the county underneath keeps the tap (see michigan_map) */
.mi-map.lakes .lk { pointer-events: none; }
.mi-map.lakes .lk circle { stroke: var(--home-dot-ring); stroke-width: .9; }
.hm-key { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.hm-key p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px; }
.hm-key p + p { margin-top: 6px; }
.hm-ramp { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.hm-ramp svg { flex: none; }
.hm-ramp circle { stroke: var(--home-dot-ring); stroke-width: .7; }
.hm-cov span { display: inline-flex; align-items: center; gap: 6px; }
.hm-sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex: none;
  border: 1px solid var(--co-line); }
.hm-sw.on { background: var(--home-land-on); border-color: var(--co-on-line); }
.hm-sw.off { background: var(--home-land-off); }
.hm .map-hint { margin-top: 8px; text-align: center; }
/* the feature rows that follow share the split block's width, not the hero map's 880px */
.home-split ~ .lh-feat { width: 100%; }
.home-split + .lh-feat { margin-top: 30px; }
/* Two columns hold down to a small tablet: collapsing at 880px made the lead card 770px wide
   and put ~1,000px of previews above the map. Below 720px it is one column, previews first. */
@media (max-width: 960px) { .home-split { gap: 20px 30px; } }
@media (max-width: 720px) {
  .home-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hm .mi-map.lakes { max-width: 380px; }
}
@media (max-width: 460px) {
  .hf-grid { gap: 12px; }
  .hf-body { padding: 10px 11px 12px; }
  .hf-name { font-size: 17px; }
  .hf-lead .hf-name { font-size: 22px; }
  .hf-why { font-size: 10.5px; letter-spacing: .09em; }
}

/* ---- county page split layout (2026-09-19; build_site.county_featured / county_rail_map) ----
   The homepage's composition on the county pages: lakes left, map rail right. It reuses
   .home-split / .hf-* / .hm* from the block above. Two layouts, because Indiana's median
   county has TWO lakes: .cs-feat is a featured trio over the usual toolbar + grid (6+ lakes);
   .cs-few moves the county's own cards up beside the map, with nothing "featured" and nothing
   shown twice. .cs-few is pure CSS on purpose -- landing.js rewrites #cards on every search,
   sort and filter, so whatever it writes has to lay itself out. */
.county-hero .home-split { margin-top: 28px; }
.cs-feat { margin-bottom: 6px; }
.cs-main { min-width: 0; }
.cs-main .tools { margin-top: 0; }
.cs-few .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 24px; }
/* An odd count lets the first card take the full row: 1 lake is one large card, 3 lakes are the
   homepage's lead-plus-two, 5 are a lead over a 2x2. It follows whatever landing.js renders,
   so a filter that leaves three lakes lays out as three. Same bottom-anchored 16:10 crop as
   .hf-card img, and safe for the same measured reason (0 of 137 Indiana posters clipped). */
.cs-few .grid-cards .card:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.cs-few .grid-cards .card:first-child:nth-last-child(odd) .thumb { aspect-ratio: 16 / 10; height: auto;
  object-position: center bottom; }
.cs-few .grid-cards .card:first-child:nth-last-child(odd) .cname { font-size: 24px; }
.cs-few .grid-cards .card:first-child:nth-last-child(odd) .meta { font-size: 14px; }
/* the rail map: county_map_svg() redrawn at 420, not scaled -- its dots are the links, and at
   the wide map's scale a phone got 7 px labels and 10 px tap targets */
.cmap-rail { width: 100%; max-width: 420px; height: auto; display: block; align-self: center; }
.cmap-rail .cm-land { fill: var(--home-land-on); stroke: var(--co-on-line); stroke-width: 1.2; }
.cmap-rail .cm-pt, .cmap-rail .cm-bay { stroke: var(--home-dot-ring); stroke-width: .9; }
.cmap-rail .cm-lbl { font: 600 13px var(--sans); }
.hm .hm-key svg { flex: none; }
.hm-cov svg { margin-right: -1px; }
@media (max-width: 720px) {
  .county-hero .home-split { margin-top: 24px; }
  .cmap-rail { max-width: 400px; }
}
@media (max-width: 460px) {
  .cs-few .grid-cards { gap: 12px; }
  .cs-few .grid-cards .card:first-child:nth-last-child(odd) .cname { font-size: 21px; }
}