/*
 * theme.css — New Hampshire Water Infrastructure Funding (NHDES)
 * Owns the visual world: NHDES blue and green on cool white, the night-map band,
 * Roboto Serif set wide for display, Atkinson Hyperlegible Next for reading.
 * Generated pages share it; the generator is scripts/nhdes/build-site.mjs.
 */

@font-face {
  font-family: "Roboto Serif";
  src: url("fonts/roboto-serif-var.subset.woff2") format("woff2");
  font-weight: 500 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Serif";
  src: url("fonts/roboto-serif-italic-var.subset.woff2") format("woff2");
  font-weight: 400 650;
  font-stretch: 100% 118%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-next-var.subset.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-next-italic-var.subset.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* NHDES standard colors (Vendor Public Information Guidelines) */
  --nhdes-blue: #353895;
  --nhdes-green: #316735;
  --accent: var(--nhdes-blue);
  --accent-50: oklch(97.2% 0.013 276);
  --accent-100: oklch(94% 0.028 276);
  --accent-200: oklch(88% 0.055 276);
  --accent-300: oklch(78% 0.095 276);
  --accent-400: oklch(64% 0.135 276);
  --accent-500: oklch(50% 0.155 276);
  --accent-600: oklch(39.8% 0.149 276);
  --accent-700: oklch(33% 0.13 276);
  --accent-800: oklch(27.9% 0.107 276);
  --accent-900: oklch(20% 0.075 276);

  /* Water and ground */
  --night: #1b1f5c;
  --night-2: #252b78;
  --night-line: rgba(255, 255, 255, 0.16);
  --night-ink: #f3f5ff;
  --night-muted: #c3caf2;
  --river: #2462a0;
  --river-glow: #8fd0ff;
  --lake: #bcd9ef;
  --pin: #ffc94d;
  --pin-ring: rgba(255, 201, 77, 0.55);
  --ground: #f7f9fb;
  --paper: #ffffff;
  --mist: #e9eff6;
  --line: #d6dee8;
  --line-strong: #aeb9c9;
  --ink: #14183a;
  --ink-2: #2b3152;
  --muted: #4f5866;
  --focus: #1c5fd6;

  /* Funding sources: data encodings only */
  --src-arpa: #353895;
  --src-dwsrf: #3b86cf;
  --src-cwsrf: #316735;
  --src-pfas: #b9531c;
  --src-trust: #0d7682;
  --src-local: #7d8799;

  --font-display: "Roboto Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.18rem + 0.3vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.65vw, 1.95rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.3vw, 2.75rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.4vw, 4.1rem);
  --step-5: clamp(2.7rem, 2rem + 3.4vw, 5.1rem);

  --wrap: 1240px;
  --gutter: clamp(16px, 3.2vw, 32px);
  --radius: 12px;
  --radius-sm: 7px;
  --shadow-1: 0 1px 2px rgba(20, 24, 58, 0.07), 0 3px 10px rgba(20, 24, 58, 0.06);
  --shadow-2: 0 2px 4px rgba(20, 24, 58, 0.08), 0 12px 32px rgba(20, 24, 58, 0.12);
  --header-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
main { display: block; }
p, ul, ol, dl, figure, blockquote { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: 118%;
  font-weight: 700;
  font-optical-sizing: auto;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 0.45em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -0.012em; }
h2 { font-size: var(--step-3); letter-spacing: -0.008em; }
h3 { font-size: var(--step-1); font-stretch: 112%; }
h4 { font-size: var(--step-0); font-stretch: 108%; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
em { font-style: italic; }

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-800); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.water-name { font-family: var(--font-display); font-style: italic; font-weight: 500; font-stretch: 108%; color: var(--river); }

/* ---------------------------------------------------------------- chrome */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm);
  font-weight: 700;
}
.skip-link:focus { top: 12px; color: #fff; }

.proto-banner {
  background: var(--ink);
  color: #e7eaf7;
  font-size: var(--step--1);
  line-height: 1.35;
  padding: 8px var(--gutter);
  text-align: center;
}
.proto-banner a { color: #fff; }
.proto-banner a:hover { color: #fff; }
.proto-banner a:focus-visible { outline-color: #fff; }

.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.header-bar {
  max-width: var(--wrap); margin: 0 auto;
  padding: 12px var(--gutter) 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand search search" "nav nav nav";
  align-items: center;
  gap: 8px 28px;
}
.brand { grid-area: brand; }
.header-search { grid-area: search; }
.site-nav { grid-area: nav; }
.menu-toggle { grid-area: toggle; }
@media (min-width: 1200px) {
  .header-bar { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav search"; padding-top: 0; }
  .header-bar .brand { padding: 12px 0; }
  .header-bar .site-nav { align-self: stretch; justify-content: center; }
  .header-bar .site-nav a { min-height: 100%; }
  .header-search { width: 300px; }
  .header-bar .site-nav { flex-wrap: nowrap; }
  .header-bar .site-nav a { padding: 0 11px; font-size: 1.02rem; }
  .header-bar .brand-name { font-size: 1.14rem; }
}
.brand {
  display: inline-flex; align-items: center; gap: 20px;
  text-decoration: none; color: var(--ink);
  padding: 6px 0;
}
.brand:hover { color: var(--ink); }
.brand-logo { width: 132px; height: auto; }
.brand-name {
  display: block;
  border-left: 1px solid var(--line-strong);
  padding-left: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 118%;
  font-size: 1.28rem;
  line-height: 1.08;
  color: var(--accent);
  max-width: 13ch;
}
.header-search { position: relative; justify-self: end; width: min(430px, 100%); display: flex; }
.header-search input {
  flex: 1; min-width: 0; min-height: 48px;
  font: inherit; font-size: 1rem; color: var(--ink);
  border: 2px solid var(--line-strong); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 10px 14px; background: var(--paper);
}
.header-search input::placeholder { color: #5d6677; opacity: 1; }
.header-search input:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-color: var(--accent); }
.header-search button {
  min-height: 48px; min-width: 48px; padding: 0 18px;
  font: inherit; font-weight: 700; font-size: 1rem;
  color: #fff; background: var(--accent); border: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; cursor: pointer;
}
.header-search button:hover { background: var(--accent-800); border-color: var(--accent-800); }
.header-search button:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.omni-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  margin: 0; padding: 6px; list-style: none;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-2); max-height: min(70vh, 520px); overflow-y: auto;
}
.omni-list[hidden] { display: none; }
.omni-list .omni-group { padding: 10px 10px 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.omni-list [role="option"] { display: block; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; line-height: 1.3; min-height: 44px; }
.omni-list [role="option"] small { display: block; color: var(--muted); font-size: 0.85rem; }
.omni-list [role="option"][aria-selected="true"], .omni-list [role="option"]:hover { background: var(--accent-50); outline: 2px solid var(--accent-300); }
.omni-list .omni-ask { font-weight: 700; color: var(--accent); }
.omni-list .omni-empty { padding: 10px; color: var(--muted); }

.menu-toggle {
  display: none; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 14px;
  font: inherit; font-weight: 700; color: var(--accent);
  background: var(--paper); border: 2px solid var(--accent); border-radius: var(--radius-sm); cursor: pointer;
}
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; position: relative; content: "";
}
.menu-toggle-bars::before { position: absolute; top: -6px; }
.menu-toggle-bars::after { position: absolute; top: 6px; }

.site-nav {
  display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 -2px;
}
.site-nav a {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 14px; margin-bottom: -1px;
  color: var(--ink-2); font-weight: 700; text-decoration: none;
  border-bottom: 4px solid transparent;
}
.site-nav a:first-child { padding-left: 0; }
.site-nav a:hover { color: var(--accent); border-bottom-color: var(--accent-200); }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--nhdes-green); }
.site-nav a:focus-visible { outline-offset: -3px; }

.breadcrumbs { max-width: var(--wrap); margin: 0 auto; padding: 16px var(--gutter) 0; font-size: var(--step--1); color: var(--muted); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin: 0 10px; color: var(--line-strong); }
.breadcrumbs a { color: var(--muted); }

.site-footer { margin-top: 80px; background: var(--ink); color: #d9ddf0; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: #fff; }
.site-footer a:focus-visible { outline-color: #fff; }
.footer-top {
  max-width: var(--wrap); margin: 0 auto; padding: 48px var(--gutter) 32px;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo { background: #fff; border-radius: var(--radius-sm); padding: 14px 18px; width: 190px; }
.footer-brand p { margin: 0; font-size: var(--step--1); max-width: 40ch; }
.site-footer h2 { color: #fff; font-size: 1.05rem; font-stretch: 112%; margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 6px; }
.site-footer li a { display: inline-block; padding: 4px 0; }
.footer-base {
  max-width: var(--wrap); margin: 0 auto; padding: 18px var(--gutter) 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: var(--step--1); color: #b9c0dc;
}
.footer-base p { margin: 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px;
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none;
  border-radius: 999px; border: 2px solid var(--accent); cursor: pointer;
  background: var(--accent); color: #fff;
}
.btn:hover { background: var(--accent-800); border-color: var(--accent-800); color: #fff; }
.btn-quiet { background: transparent; color: var(--accent); }
.btn-quiet:hover { background: var(--accent-50); color: var(--accent-800); }
.btn-green { background: var(--nhdes-green); border-color: var(--nhdes-green); }
.btn-green:hover { background: #244f27; border-color: #244f27; }
.arrow-link { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.arrow-link::after { content: "\2192"; transition: transform 0.2s ease; }
.arrow-link:hover { text-decoration: underline; }
.arrow-link:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- night band (home hero) */
.night {
  background: var(--night);
  color: var(--night-ink);
  position: relative;
  overflow: hidden;
}
.night h1, .night h2, .night h3 { color: #fff; font-variation-settings: "GRAD" -30; }
.night a { color: #fff; }
.night a:hover { color: #fff; }
.night :focus-visible { outline-color: #fff; }
.hero {
  max-width: var(--wrap); margin: 0 auto;
  padding: 44px var(--gutter) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  grid-template-areas: "title map" "copy map" "instrument map";
  grid-template-rows: auto auto 1fr;
  gap: 0 56px;
  align-items: start;
}
.hero-title { grid-area: title; padding-top: 12px; }
.hero-copy { grid-area: copy; }
.hero > .instrument { grid-area: instrument; }
.hero-map { grid-area: map; }
.hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.7rem); font-weight: 760; font-stretch: 120%; line-height: 1.08; margin-bottom: 0.34em; }
.hero-lede { font-size: var(--step-1); line-height: 1.45; color: var(--night-muted); max-width: 40ch; margin-bottom: 26px; }

.finder { display: grid; gap: 10px; margin: 0 0 30px; max-width: 480px; }
.finder label { font-weight: 700; color: #fff; }
.finder-row { display: flex; gap: 0; }
.finder select {
  flex: 1; min-width: 0; min-height: 52px;
  font: inherit; font-size: 1.05rem; color: var(--ink);
  background: #fff; border: 2px solid #fff; border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding: 0 12px;
}
.finder select:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.finder button {
  min-height: 52px; padding: 0 22px;
  font: inherit; font-weight: 700; color: var(--night);
  background: var(--pin); border: 2px solid var(--pin);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; cursor: pointer;
}
.finder button:hover { background: #ffd978; }
.finder button:focus-visible { outline: 3px solid var(--night); outline-offset: -6px; }
.finder-alt { font-size: var(--step--1); color: var(--night-muted); margin: 0; }

.instrument {
  border-top: 1px solid var(--night-line);
  padding-top: 22px;
  display: grid;
  gap: 18px;
}
.readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin: 0; }
.readout div { display: flex; flex-direction: column-reverse; gap: 2px; margin: 0; }
.readout dt { font-size: var(--step--1); color: var(--night-muted); }
.readout dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-stretch: 116%; font-variant-numeric: tabular-nums lining-nums; color: #fff; line-height: 1; }
.readout .readout-total dd { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); color: var(--pin); }
.readout .readout-small dd { font-size: var(--step-2); }
.readout-when { font-size: var(--step--1); color: var(--night-muted); margin: 0; min-height: 1.5em; }

.replay { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.replay[hidden] { display: none; }
.replay-play {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px 0 16px;
  font: inherit; font-weight: 700; color: var(--night);
  background: #fff; border: 2px solid #fff; border-radius: 999px; cursor: pointer;
}
.replay-play:hover { background: var(--accent-100); }
.replay-play:focus-visible { outline: 3px solid var(--pin); outline-offset: 3px; }
.replay-play .glyph { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.replay-play[aria-pressed="true"] .glyph { width: 12px; height: 14px; border: 0; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.replay-step {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 1.1rem; font-weight: 700; color: #fff;
  background: transparent; border: 2px solid var(--night-line); border-radius: 50%; cursor: pointer;
}
.replay-step:hover { border-color: #fff; }
.replay-track { flex: 1 1 220px; display: grid; gap: 4px; min-width: 200px; }
.replay-track input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--pin); margin: 0; }
.replay-years { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--night-muted); font-variant-numeric: tabular-nums; }

.lenses { display: grid; gap: 12px; }
.lenses-label { font-size: var(--step--1); color: var(--night-muted); margin: 0; }
.lens-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lens {
  min-height: 40px; padding: 6px 14px;
  font: inherit; font-size: 0.95rem; font-weight: 700; color: #fff;
  background: transparent; border: 1.5px solid var(--night-line); border-radius: 999px; cursor: pointer;
}
.lens:hover { border-color: rgba(255, 255, 255, 0.6); }
.lens[aria-pressed="true"] { background: #fff; color: var(--night); border-color: #fff; }
.lens-note { font-size: 0.98rem; color: var(--night-muted); margin: 0; min-height: 3em; max-width: 52ch; }
.lens-note a { font-weight: 700; }

.hero-map { position: relative; justify-self: center; width: 100%; max-width: min(470px, calc((100vh - 236px) * 0.546)); min-width: 300px; margin: 0; }
.statemap { position: relative; width: 100%; aspect-ratio: 546 / 1000; }
.statemap > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.pin {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--pin);
  box-shadow: 0 0 0 1.5px rgba(27, 31, 92, 0.9), 0 0 10px 2px var(--pin-ring);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.pin.is-dim { opacity: 0.12; box-shadow: none; transform: scale(0.8); }
.pin.is-hidden { opacity: 0; transform: scale(0.2); }
.pin.is-new { animation: pin-light 0.9s ease-out; }
@keyframes pin-light {
  0% { transform: scale(0.2); box-shadow: 0 0 0 0 rgba(255, 201, 77, 0.9); }
  45% { transform: scale(1.9); box-shadow: 0 0 22px 8px rgba(255, 201, 77, 0.75); }
  100% { transform: scale(1); }
}
.map-legend { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: var(--step--1); color: var(--night-muted); justify-content: center; }
.map-legend .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pin); box-shadow: 0 0 8px 2px var(--pin-ring); }
.river-labels { position: absolute; inset: 0; pointer-events: none; }
.river-label {
  position: absolute; transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-stretch: 106%;
  font-size: 0.78rem; color: var(--river-glow); white-space: nowrap; letter-spacing: 0.01em;
  text-shadow: 0 0 4px var(--night), 0 0 8px var(--night);
}

/* ---------------------------------------------------------------- sections */
.section { padding: 72px 0; }
.section-tight { padding: 48px 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 32px; margin-bottom: 32px; }
.section-head h2 { margin: 0; max-width: 22ch; }
.section-head p { margin: 10px 0 0; color: var(--muted); max-width: 60ch; }
.kicker { display: block; font-size: 0.9rem; font-weight: 700; color: var(--nhdes-green); margin-bottom: 10px; }
.band-mist { background: var(--mist); }
.band-paper { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Chapters: an editorial grid, not a card row */
.chapters { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
.chapter {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-1);
}
.chapter:nth-child(1) { grid-column: span 7; grid-row: span 2; }
.chapter:nth-child(2) { grid-column: span 5; }
.chapter:nth-child(3) { grid-column: span 5; }
.chapter:nth-child(4) { grid-column: span 4; }
.chapter:nth-child(5) { grid-column: span 4; }
.chapter:nth-child(6) { grid-column: span 4; }
.chapter-media { margin: 0; position: relative; background: var(--mist); }
.chapter-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.chapter:nth-child(1) .chapter-media { flex: 1 1 auto; min-height: 340px; }
.chapter:nth-child(1) .chapter-media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
@media (max-width: 1080px) {
  .chapter:nth-child(1) .chapter-media { min-height: 0; }
  .chapter:nth-child(1) .chapter-media img { position: static; height: auto; aspect-ratio: 16 / 9; }
}
.chapter-media figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; font-size: 0.82rem; line-height: 1.3; color: #fff; background: rgba(20, 24, 58, 0.78); padding: 5px 9px; border-radius: 5px; width: fit-content; max-width: calc(100% - 20px); }
.chapter-map { margin: 0; background: var(--night); display: grid; place-items: center; padding: 16px 0 10px; position: relative; }
.chapter-map .statemap { width: 38%; max-width: 150px; }
.chapter-map .pin { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.chapter-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.chapter-body h3 { margin: 0; font-size: var(--step-2); }
.chapter:not(:first-child) .chapter-body h3 { font-size: var(--step-1); }
.chapter-body p { margin: 0; color: var(--ink-2); }
.chapter-stat { font-family: var(--font-display); font-weight: 700; font-stretch: 114%; font-variant-numeric: tabular-nums lining-nums; color: var(--accent); font-size: 1.05rem; }
.chapter-links { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 0 18px; }
.chapter-links a { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

/* Ledger: dated rows of approvals */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ledger li { border-bottom: 1px solid var(--line); }
.ledger-row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 9rem; gap: 6px 22px;
  align-items: baseline; padding: 16px 0; text-decoration: none; color: inherit;
}
.ledger-row:hover .ledger-title { text-decoration: underline; }
.ledger-date { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--step--1); }
.ledger-title { display: block; font-weight: 700; color: var(--accent); }
.ledger-sub { display: block; color: var(--muted); font-size: var(--step--1); margin-top: 2px; }
.ledger-amount { text-align: right; font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-variant-numeric: tabular-nums lining-nums; }

/* Funding stack bar + legend */
.stack { display: flex; width: 100%; height: 22px; border-radius: 5px; overflow: hidden; background: var(--mist); margin: 0; }
.stack span { display: block; height: 100%; min-width: 3px; }
.stack span + span { box-shadow: inset 2px 0 0 var(--paper); }
.stack-lg { height: 44px; border-radius: 8px; }
.src-arpa { background: var(--src-arpa); }
.src-dwsrf { background: var(--src-dwsrf); }
.src-cwsrf { background: var(--src-cwsrf); }
.src-pfas { background: var(--src-pfas); }
.src-trust { background: var(--src-trust); }
.src-local { background: var(--src-local); }
.key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 8px; flex: none; }
.sources { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.sources li { border-top: 4px solid var(--c, var(--accent)); padding-top: 12px; }
.sources .src-amount { display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 114%; font-size: var(--step-2); font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; }
.sources .src-name { display: block; font-weight: 700; margin: 6px 0 4px; }
.sources .src-def { display: block; font-size: var(--step--1); color: var(--muted); }

/* Data table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
table.data caption { text-align: left; padding: 14px 16px; font-weight: 700; font-size: var(--step-0); }
table.data th, table.data td { padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th { background: var(--ground); font-weight: 700; color: var(--ink-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tfoot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }

/* Photos */
.photo { margin: 0; }
.photo img { width: 100%; border-radius: var(--radius); background: var(--mist); }
.photo figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 8px; }
.photo-credit { display: block; font-size: 0.86em; margin-top: 2px; }

/* Get the data band */
.data-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.data-links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.data-links a {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); text-decoration: none; color: var(--ink);
}
.data-links a:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.data-links .fmt { grid-row: span 2; font-family: var(--font-display); font-weight: 800; font-stretch: 120%; color: var(--accent); font-size: 0.95rem; border: 2px solid currentColor; border-radius: 6px; padding: 6px 8px; }
.data-links strong { color: var(--accent); }
.data-links small { color: var(--muted); font-size: var(--step--1); }

/* ---------------------------------------------------------------- interior pages */
.h3 { font-size: var(--step-1); font-stretch: 112%; }
.h4 { font-size: var(--step-0); font-stretch: 108%; }
.page-head { padding-top: 28px; padding-bottom: 12px; }
.page-head h1 { margin-bottom: 0.3em; }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
.page-head-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px 48px; align-items: start; padding-bottom: 40px; }
.section-sub { color: var(--muted); max-width: 70ch; }
.prose { max-width: 760px; }
.prose h2 { font-size: var(--step-2); margin-top: 1.4em; }
.btn-small { min-height: 44px; padding: 0 14px; font-size: 0.95rem; }
.chip { display: inline-flex; align-items: center; gap: 0; font-size: 0.85rem; font-weight: 700; padding: 3px 10px 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); margin: 0 6px 6px 0; }
.mini-list { list-style: none; margin: 0 0 12px; padding: 0; }
.mini-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.mini-list li span { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.mini-list a { font-weight: 700; }

/* The motif's rule: the Merrimack's course from USGS hydrography, drawn between
   sections at one scale, so a phone sees the middle stretch of the river. */
.river-rule { display: block; height: 60px; margin: 12px auto -28px; border: 0; background: url(art/river-rule.png) center / auto 100% no-repeat; }
.river-rule-empty { margin: 4px auto 12px; }
@media (max-width: 640px) {
  .river-rule { height: 48px; background-position: left center; -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }
}

.record-head { padding-top: 26px; padding-bottom: 8px; }
/* NHDES's own project names, at a scale that suits their length: the long ones
   step down so a phone never stacks one word per line. */
.record-head h1 { font-size: var(--step-3); max-width: 30ch; text-wrap: balance; }
.record-head h1.title-m { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.4rem); max-width: 40ch; }
.record-head h1.title-l { font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem); max-width: 46ch; }
.record-head h1.title-xl { font-size: clamp(1.3rem, 0.95rem + 1.2vw, 1.9rem); max-width: 52ch; }
.record-head .kicker a { color: var(--nhdes-green); }
.record-facts { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.record-facts div { display: flex; flex-direction: column; gap: 2px; }
.record-facts dt { font-size: var(--step--1); color: var(--muted); }
.record-facts dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.record-facts-lg dd { font-family: var(--font-display); font-stretch: 116%; font-size: var(--step-2); color: var(--accent); }
.record-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px 56px; padding-top: 30px; }
.record-main > section { margin-bottom: 40px; }
.record-main h2 { margin-bottom: 14px; }
.record-narrative { font-size: var(--step-1); line-height: 1.5; max-width: 62ch; }
.record-main .stack-lg { margin-bottom: 14px; }
/* Photo rows: every photo keeps its whole frame. Each figure grows in proportion
   to its aspect ratio (--ar), so a row of mixed portrait and landscape photos
   shares one height without cropping any of them. */
.record-photos, .story-photos:not(.is-essay) { display: flex; gap: 16px; align-items: flex-start; }
.record-photos { margin: 0 0 40px; }
.record-photos .photo, .story-photos:not(.is-essay) .photo { flex: var(--ar, 1.5) 1 0; min-width: 0; margin: 0; }
.record-photos .photo img, .story-photos:not(.is-essay) .photo img { width: 100%; height: auto; }
.record-photos.is-single .photo, .story-photos.is-single .photo { flex: none; width: 100%; max-width: calc(var(--ar, 1.5) * 34rem); }
.record-side { display: flex; flex-direction: column; gap: 14px; }
.record-side h2 { margin: 12px 0 4px; }
.locator { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; place-items: center; }
.locator .statemap { width: 62%; max-width: 190px; }
.statemap-day canvas.town-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.loc-pin {
  position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--nhdes-green); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(20, 24, 58, 0.25);
}
.communities-map .loc-pin, .explorer-fallback .loc-pin { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
/* Projects index: where the projects on the current page are. */
.projects-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding-bottom: 24px; }
.projects-head .record-facts { margin-top: 22px; }
.results-map { margin: 0; width: 200px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 12px; }
.results-map .loc-pin { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; box-shadow: 0 0 0 1.5px #fff; }
.results-map figcaption { font-size: var(--step--1); line-height: 1.3; color: var(--muted); text-align: center; margin-top: 8px; }
.loc-note, .source-line { font-size: var(--step--1); color: var(--muted); margin: 0; }
.source-line { padding-top: 12px; border-top: 1px solid var(--line); }

.communities-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 40px 56px; align-items: start; padding-top: 12px; }
.communities-map { margin: 0; position: sticky; top: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.county { margin-bottom: 32px; }
.county h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 4px; }
.county h2 span { font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; color: var(--muted); }
.town-list { list-style: none; margin: 0; padding: 0; columns: 3 200px; column-gap: 32px; }
.town-list li { break-inside: avoid; display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.town-list a { font-weight: 700; }
.town-list span { font-size: var(--step--1); color: var(--muted); }

/* Explorer (Project Map) */
.main-explorer { background: var(--ground); }
.main-explorer + .site-footer { margin-top: 0; }
.explorer { display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: max(640px, calc(100vh - 118px)); max-width: 1680px; margin: 0 auto; border-top: 1px solid var(--line); }
.explorer-head { grid-column: 1; grid-row: 1; padding: 22px 24px 0; border-right: 1px solid var(--line); background: var(--paper); }
.explorer-panel { grid-column: 1; grid-row: 2; padding: 14px 24px 28px; border-right: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; }
.explorer-head h1 { font-size: var(--step-3); margin-bottom: 8px; }
.explorer-head p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-wide, .filter-actions { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--ink-2); }
.field input, .field select, .index-selects select, [data-stoa-index-controls] input {
  font: inherit; font-size: 0.98rem; min-height: 44px; padding: 8px 10px; color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); min-width: 0; width: 100%;
}
.filter-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.explorer-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.explorer-summary p { margin: 0; font-size: var(--step--1); }
.explorer-list { list-style: none; margin: 0; padding: 0; }
.explorer-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.explorer-list a:hover .el-title, .explorer-list a:focus-visible .el-title { text-decoration: underline; }
.el-title { font-weight: 700; color: var(--accent); }
.el-sub { grid-column: 1; font-size: 0.88rem; color: var(--muted); }
.el-amt { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-variant-numeric: tabular-nums; }
.explorer-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--step--1); }
.pager-label { color: var(--muted); }
.explorer-empty { color: var(--muted); }
.explorer-stage { grid-column: 2; grid-row: 1 / span 2; position: relative; min-height: 0; background: #eaf0f6; }
.explorer-canvas { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
.explorer-canvas.is-live { cursor: grab; }
.explorer-canvas.is-dragging { cursor: grabbing; }
.explorer-fallback { width: min(520px, 90%); margin: 24px auto; }
.explorer-map { position: absolute; inset: 0; }
.map-pins { position: absolute; inset: 0; pointer-events: none; }
.map-pin {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0;
  border: 0; background: transparent; cursor: pointer; pointer-events: auto; border-radius: 50%;
}
.map-pin::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: var(--nhdes-green); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(20, 24, 58, 0.45);
  transition: transform 0.15s ease;
}
.map-pin.sys-drinking::before, .map-pin.sys-combined::before { background: var(--accent); }
.map-pin.sys-stormwater::before, .map-pin.sys-flood::before, .map-pin.sys-watershed::before, .map-pin.sys-dams::before { background: var(--src-trust); }
.map-pin:hover::before, .map-pin.is-hot::before, .map-pin.is-open::before { transform: scale(1.6); }
.map-pin:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.map-pin[hidden] { display: none; }
.explorer-tools { position: absolute; top: 14px; right: 14px; z-index: 5; display: flex; gap: 8px; align-items: center; background: var(--paper); padding: 6px; border-radius: var(--radius); box-shadow: var(--shadow-1); }
.explorer-tools[hidden] { display: none; }
.explorer-tools select { font: inherit; font-size: 0.95rem; min-height: 44px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 8px; background: var(--paper); color: var(--ink); }
.tool { min-width: 44px; min-height: 44px; font: inherit; font-size: 1.3rem; font-weight: 700; color: var(--accent); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.tool:hover { border-color: var(--accent); }
.legend-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(20,24,58,.2); background: var(--nhdes-green); }
.legend-dot.sys-drinking { background: var(--accent); }
.legend-dot.sys-stormwater { background: var(--src-trust); }
.map-legend-day span { display: inline-flex; align-items: center; }
.map-legend-day { position: absolute; left: 14px; bottom: 14px; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px 14px; background: rgba(255, 255, 255, 0.94); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.85rem; box-shadow: var(--shadow-1); }
.map-card {
  position: absolute; z-index: 8; width: 300px; max-width: calc(100% - 16px);
  max-height: calc(100% - 16px); overflow: auto; overscroll-behavior: contain;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-2);
  padding: 16px 18px 12px;
}
.map-card[hidden] { display: none; }
.card-close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; font-size: 1.5rem; line-height: 1; color: var(--muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.card-close:hover { color: var(--ink); background: var(--mist); }
.card-title { font-size: 1.12rem; margin: 0 36px 4px 0; line-height: 1.2; }
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; }
.card-sub, .card-sources { font-size: 0.88rem; color: var(--muted); margin: 0 0 8px; }
.card-story { font-size: 0.92rem; line-height: 1.45; margin: 12px 0; overflow-wrap: break-word; }
.card-amount { font-family: var(--font-display); font-weight: 700; font-stretch: 114%; margin: 0 0 8px; font-size: 1.15rem; }
.map-card .stack { height: 12px; margin-bottom: 8px; }

/* Long index: projects. The sticky bones follow scripts/lib/prototype-index-navigation/index-navigation.css. */
.index-shell { padding-top: 8px; }
[data-stoa-index] { --stoa-index-sticky-top: 0px; --stoa-index-controls-max: 25vh; }
[data-stoa-index-controls] { position: sticky; inset-block-start: var(--stoa-index-sticky-top); z-index: 20; max-block-size: var(--stoa-index-controls-max); overflow-y: auto; scrollbar-gutter: stable; background: var(--ground); padding: 12px 0; border-bottom: 1px solid var(--line); }
[data-stoa-index-results] { scroll-margin-block-start: calc(var(--stoa-index-sticky-top) + var(--stoa-index-controls-max) + 1rem); }
[data-stoa-index-pagination] ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0; list-style: none; }
[data-stoa-index-pagination] a, [data-stoa-index-pagination] [aria-current="page"] { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; }
[data-stoa-index-controls] form { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; gap: 8px 12px; align-items: center; }
[data-stoa-index-controls] form > label { font-weight: 700; }
[data-stoa-index-controls] button { font: inherit; font-weight: 700; min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm); border: 2px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
[data-stoa-index-controls] form > button { order: 1; }
/* Secondary filters: open beside the search on wide screens, behind a native
   disclosure on narrow ones so the sticky panel keeps to the share of the
   viewport the index standard allows. */
.index-filters { order: 2; grid-column: 1 / -1; }
.index-filters > summary { display: none; }
.index-selects { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; gap: 6px 10px; align-items: center; font-size: 0.9rem; font-weight: 700; }
[data-stoa-index-summary] { margin: 8px 0 0; font-size: var(--step--1); color: var(--muted); }
[data-stoa-index-results] { outline: none; padding-top: 8px; }
[data-stoa-index-pagination] { margin: 24px 0; }
[data-stoa-index-pagination] a, [data-stoa-index-pagination] [aria-current="page"] { padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; background: var(--paper); }
[data-stoa-index-pagination] [aria-current="page"] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Stories */
.story-index ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; }
.story-index a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; font-weight: 700; text-decoration: none; background: var(--paper); }
.story-index a:hover { border-color: var(--accent); }
.stories-layout { display: grid; grid-template-columns: 1fr; gap: 48px; padding-top: 24px; }
.stories-layout.has-stage { grid-template-columns: 380px minmax(0, 1fr); }
.stories-stage { position: sticky; top: 16px; align-self: start; border-radius: var(--radius); padding: 22px 26px 16px; }
.stories-stage .statemap { max-width: 320px; margin: 0 auto; }
.stage-caption { color: #fff; font-family: var(--font-display); font-weight: 700; font-stretch: 114%; text-align: center; margin: 12px 0 0; min-height: 2.6em; }
.story { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.story:first-child { border-top: 0; padding-top: 8px; }
.has-stage .story { grid-template-columns: 1fr; }
.has-stage .story-map-inline { display: none; }
.story-map-inline { margin: 0; background: var(--night); border-radius: var(--radius); padding: 14px; align-self: start; }
.story-map-inline .pin { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.story-body h2 { font-size: var(--step-3); margin-bottom: 6px; }
.chapter-lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
.story-photos { margin: 22px 0; }
/* The photo essay: a full-width lead, then the rest in balanced columns, each
   photo at its own aspect ratio. */
.story-photos.is-essay { columns: 3 220px; column-gap: 14px; }
.story-photos.is-essay .photo { break-inside: avoid; margin: 0 0 16px; }
.story-photos.is-essay .photo img { width: 100%; height: auto; }
.story-photos.is-essay .photo-lead { column-span: all; margin-bottom: 18px; }
.story-photos.is-essay .photo-lead img { aspect-ratio: 16 / 9; object-fit: cover; }
.story-photos.is-essay .photo figcaption { font-size: var(--step--1); }
@media (max-width: 860px) {
  .record-photos, .story-photos:not(.is-essay) { flex-direction: column; }
  .record-photos .photo, .story-photos:not(.is-essay) .photo { flex: none; width: 100%; max-width: calc(var(--ar, 1.5) * 70svh); }
}
.guide-photo { margin: 6px 0 16px; }
.guide-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.record-quote { margin: 24px 0; padding: 18px 22px; background: var(--paper); border-left: 5px solid var(--nhdes-green); border-radius: 0 var(--radius) var(--radius) 0; }
.record-quote p { font-size: 1.05rem; margin-bottom: 10px; }
.record-quote footer { font-size: var(--step--1); color: var(--muted); }
.ledger-compact .ledger-row { padding: 11px 0; grid-template-columns: 7rem minmax(0, 1fr) 6rem; }

/* Bars (charts twinned with tables) */
.bars { display: grid; gap: 8px; margin: 18px 0 20px; }
.bar-row { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 5.5rem; gap: 12px; align-items: center; font-size: var(--step--1); }
.bar-label { font-weight: 700; }
.bar-track { display: block; height: 18px; background: var(--mist); border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 4px; }
.bar-neutral { background: var(--accent); }
.bar-value { text-align: right; font-weight: 700; }
.unusual-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 20px; }
.unusual h3 { margin-bottom: 4px; }
.more-reading { margin-top: 18px; font-size: var(--step--1); color: var(--muted); }
.photo-tall img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Funding programs */
.programs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; margin: 28px 0 20px; }
.program { border-top: 5px solid var(--c); padding-top: 14px; }
.program h2 { display: flex; align-items: center; }
.program-amount { font-family: var(--font-display); font-weight: 700; font-stretch: 116%; font-size: var(--step-2); color: var(--ink); margin-bottom: 6px; }
.program-amount span { font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; color: var(--muted); }

/* Data, guide, search */
.data-page { display: grid; gap: 36px; }
.data-page > .data-links { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
.notes dt { font-weight: 700; margin-top: 14px; }
.notes dd { margin: 4px 0 0; max-width: 70ch; }
code { font-size: 0.92em; background: var(--mist); padding: 1px 5px; border-radius: 4px; }
.guide { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.guide-toc { position: sticky; top: 16px; }
.guide-toc ul { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--line); }
.guide-toc a { display: flex; align-items: center; min-height: 44px; padding-left: 14px; font-weight: 700; text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }
.guide-body section { max-width: 720px; margin-bottom: 30px; scroll-margin-top: 16px; }
.guide-body h2 { font-size: var(--step-2); }
.search-page { max-width: 900px; }
.search-suggest { margin-top: 8px; }
.suggest-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.suggest-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-weight: 700; }
.answer { background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 28px; }
.answer-kicker { font-size: 0.85rem; font-weight: 700; color: var(--nhdes-green); margin: 0 0 6px; }
.answer-text { font-size: var(--step-1); line-height: 1.45; margin-bottom: 10px; }
.answer-sub { font-weight: 700; margin: 0 0 4px; }
.answer-sources { list-style: none; padding: 0; margin: 0 0 8px; }
.answer-sources li { padding: 5px 0; }
.answer-sources span { color: var(--muted); font-variant-numeric: tabular-nums; }
.result-group { margin-bottom: 26px; }
.result-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.result-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.result-list a { font-weight: 700; }
.result-meta { color: var(--muted); font-size: var(--step--1); }
.not-found { padding-bottom: 40px; }
.not-found-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px 64px; align-items: start; }
.not-found-map { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.not-found-map .loc-pin { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; box-shadow: 0 0 0 1.5px #fff; }
.not-found-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
/* The community finder on a light page (404): same bones as the night-band finder, daylight skin. */
.finder-light { margin-bottom: 22px; }
.finder-light label { color: var(--ink); }
.finder-light select { border-color: var(--line-strong); }
.finder-light select:focus-visible { border-color: var(--accent); }
.finder-light button { color: #fff; background: var(--accent); border-color: var(--accent); }
.finder-light button:hover { background: var(--accent-800); border-color: var(--accent-800); }
.finder-light button:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 24px 32px; }
  .chapter:nth-child(1) { grid-column: span 12; grid-row: auto; }
  .chapter:nth-child(2), .chapter:nth-child(3) { grid-column: span 6; }
  .sources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .header-bar { grid-template-columns: 1fr auto; grid-template-areas: "brand toggle" "search search" "nav nav"; padding-bottom: 10px; }
  .header-search { justify-self: stretch; width: 100%; }
  .menu-toggle { display: inline-flex; }
  .site-nav { display: none; flex-direction: column; padding-bottom: 10px; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding-left: 0; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); border-left-color: var(--nhdes-green); padding-left: 10px; }
  .hero { grid-template-columns: 1fr; grid-template-areas: "title" "map" "copy" "instrument"; grid-template-rows: auto; padding-top: 28px; }
  .hero-map { max-width: 360px; min-width: 0; margin: 0 auto 26px; }
  .finder { margin-bottom: 26px; }
  .readout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  .readout .readout-total { grid-column: 1 / -1; }
  .replay { gap: 12px 10px; }
  .replay-play { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 14px; }
  .replay-track { flex-basis: 100%; }
  .chapters { grid-template-columns: 1fr; }
  .chapter:nth-child(n) { grid-column: auto; }
  .ledger-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ledger-date { grid-column: 1 / -1; }
  .data-band { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; }
  .record-grid, .communities-layout, .page-head-split, .guide, .not-found-grid { grid-template-columns: 1fr; }
  .not-found-map { max-width: 300px; }
  .communities-map { position: static; max-width: 360px; }
  .explorer { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .explorer-head, .explorer-panel, .explorer-stage { grid-column: 1; grid-row: auto; }
  .explorer-head { border-right: 0; padding-bottom: 16px; }
  .explorer-panel { border-right: 0; order: 2; overflow: visible; }
  .explorer-stage { order: 1; height: 72vh; min-height: 420px; }
  .map-card { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; }
  .unusual-grid { grid-template-columns: 1fr 1fr; }
  .bar-row { grid-template-columns: 9rem minmax(0, 1fr) 4.5rem; }
  .story { grid-template-columns: 1fr; }
  .story-map-inline { max-width: 260px; }
  .index-selects { grid-template-columns: auto 1fr; }
  .guide-toc { position: static; }
  .index-filters > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; font-weight: 700; color: var(--accent); cursor: pointer; list-style: none; }
  .index-filters > summary::-webkit-details-marker { display: none; }
  .index-filters > summary::before { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); }
  .index-filters[open] > summary::before { margin-top: 4px; transform: rotate(-135deg); }
  .index-filters[open] > .index-selects { margin-top: 6px; }
  /* An open disclosure is taller than the share a sticky panel may take, so
     the panel sits in the flow until it closes. */
  [data-stoa-index-controls].is-expanded { position: static; max-block-size: none; overflow: visible; }
  [data-stoa-index-controls]:has(.index-filters[open]) { position: static; max-block-size: none; overflow: visible; }
}
@media (max-width: 640px) {
  [data-stoa-index] { --stoa-index-controls-max: 30svh; }
  [data-stoa-index-controls] form { grid-template-columns: minmax(0, 1fr) auto; }
  [data-stoa-index-controls] form > label { grid-column: 1 / -1; }
  .index-selects { grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .data-page > .data-links, .unusual-grid { grid-template-columns: 1fr; }
  .brand-logo { width: 92px; }
  .brand { gap: 12px; }
  .brand-name { font-size: 0.95rem; padding-left: 12px; max-width: 10ch; }
  .menu-toggle { padding: 0 12px; gap: 8px; }
  .sources { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

@media print {
  .proto-banner, .site-header, .site-footer, .skip-link, .replay, .lenses, .finder { display: none !important; }
  body { background: #fff; }
  .night { background: #fff; color: var(--ink); }
  .night h1, .night h2 { color: var(--ink); }
}