/* =============================================================
   LONOKE COUNTY, ARKANSAS — Unified County Platform
   Nature design system: "Where the prairie meets the timber"
   -------------------------------------------------------------
   Contents
   01. Design tokens
   02. Reset & base
   03. Typography & prose
   04. Layout primitives
   05. Buttons, links, chips, badges
   06. Top bar, alert bar, header & navigation
   07. Home hero (landscape scene)
   08. Page hero (interior pages)
   09. Quick-action strip
   10. Cards (services, departments, news, events, people…)
   11. Stats band
   12. Accordion, tabs, tables
   13. Forms & payment wizard
   14. Callouts, notices, status chips
   15. Timeline
   16. Footer
   17. Search overlay & back-to-top
   18. Motion & reveal animations
   19. Utilities
   20. Responsive
   21. Reduced motion & print
   ============================================================= */

/* ----------------------------------------------
   00. SELF-HOSTED WEB FONTS
   Fraunces and Public Sans, served from this origin instead
   of fonts.googleapis.com. Face descriptors and unicode-range
   subsets are copied from the Google Fonts css2 response, and
   the .woff2 files are the ones it serves, so rendering is
   unchanged. Both families are SIL OFL 1.1 - assets/fonts/README.md.
---------------------------------------------- */

/* Fraunces normal - latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/fraunces-latin-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces normal - latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/fraunces-latin-ext-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces normal - vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/fraunces-vietnamese-normal.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Fraunces italic - latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/fraunces-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces italic - latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/fraunces-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces italic - vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/fraunces-vietnamese-italic.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Public Sans normal - latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/public-sans-latin-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Public Sans normal - latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/public-sans-latin-ext-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Public Sans normal - vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/public-sans-vietnamese-normal.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Public Sans italic - latin */
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/public-sans-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Public Sans italic - latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/public-sans-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Public Sans italic - vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/public-sans-vietnamese-italic.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ----------------------------------------------
   01. DESIGN TOKENS
---------------------------------------------- */
:root {
  /* Paper & creams (prairie light) */
  --cream-50:  #fbf8f1;
  --cream-100: #f6f0e1;
  --cream-200: #efe5cd;

  /* Semantic surfaces (flip in the Prairie Dusk theme) */
  --bg: var(--cream-50);
  --bg-alt: var(--cream-100);
  --bg-raised: var(--cream-200);

  /* Pine & moss (the timber) */
  --pine-950: #0a2018;
  --pine-900: #113424;
  --pine-800: #1a4a33;
  --pine-700: #235f40;
  --moss-600: #3e7a50;
  --moss-500: #51925f;
  --sage-400: #94b48c;
  --sage-200: #cfdcc1;

  /* Harvest golds (rice & wheat) */
  /* gold-700 is the text-safe gold: small gold type on the cream backgrounds
     needs 4.5:1 for WCAG 2.1 AA, and gold-600 only reaches 3.4:1 */
  --gold-700: #8a6318;
  --gold-600: #a87a1f;
  --gold-500: #c2973a;
  --gold-400: #d9b257;
  --wheat-200: #eedfae;

  /* Focus ring — its own token, not a reuse of decorative gold.
     WCAG 2.2 SC 2.4.11 wants 3:1 on the indicator itself, and gold-500 only
     reaches 2.54:1 on cream-50. gold-700 measures 5.1:1 on cream-50 and
     4.32:1 on cream-200, the darkest light surface a ring lands on.
     Dark surfaces re-point this token at gold-400 — see section 02. */
  --focus-ring: var(--gold-700);

  /* Bark & soil */
  --bark-800: #46341f;
  --bark-600: #6d543a;

  /* Bayou blues */
  /* river-600 is the text-safe river: it was being applied as a hard-coded
     fallback by .wx-card__rain without ever being declared */
  --river-700: #1e4d5c;
  --river-600: #2e6f77;
  --river-500: #3a7d8c;

  /* Ink (text) */
  --ink-900: #1d291e;
  --ink-700: #3b483b;
  --ink-500: #5e6c5d;

  /* Lines & surfaces */
  --line: #ded2b8;
  --line-soft: #e9e0ca;

  /* Outline for the three header controls, and only those. WCAG 2.1 SC 1.4.11
     Non-text Contrast (Level AA) wants 3:1 on the visual information that
     identifies a control; --line measures 1.41:1 against the light header and
     1.85:1 against Prairie Dusk. --line cannot be restated to fix that - it
     draws bordered surfaces on all 18 pages - so the header controls get their
     own token, the same way DREAM-42 gave the focus ring one.
     gold-600 is the non-text gold: too weak for 4.5:1 body copy, which is why
     DREAM-2 added gold-700 and moved the type off it, but clear of 3:1 on every
     surface these controls sit on. Measured in Chrome on the rendered header -
     light 3.84:1 on the button fill and 3.62:1 on the header behind it, Prairie
     Dusk 3.99:1 and 4.62:1. One value serves both themes; section 22 does not
     re-point it. */
  --control-line: var(--gold-600);
  --surface: #ffffff;

  /* Semantic */
  --danger-600: #a23b2e;
  --danger-100: #f6e2dd;
  --ok-600: #2f7a46;
  /* pull-quote ink: --pine-900 is a palette green, not a text token, and never
     flips, so quotes set to it went unreadable in the evening theme */
  --quote-ink: var(--pine-900);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* Shape */
  --radius-sm: .45rem;
  --radius-md: .9rem;
  --radius-lg: 1.35rem;
  --radius-pill: 99rem;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(20, 36, 24, .07), 0 2px 8px rgba(20, 36, 24, .05);
  --shadow-md: 0 2px 6px rgba(20, 36, 24, .08), 0 12px 28px -10px rgba(20, 36, 24, .18);
  --shadow-lg: 0 4px 10px rgba(15, 30, 20, .1), 0 28px 60px -18px rgba(15, 30, 20, .3);

  /* Motion */
  --ease-out: cubic-bezier(.22, .8, .35, 1);
  --speed: .25s;

  /* Header height (used for anchor offset) */
  --header-h: 4.75rem;
}

/* ----------------------------------------------
   02. RESET & BASE
---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-900);
  background-color: var(--bg);
  /* faint paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
svg { height: auto; }

h1, h2, h3, h4, h5 { margin: 0 0 .5em; font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--pine-900); letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
strong { color: var(--pine-900); }

a { color: var(--pine-700); text-decoration-color: color-mix(in srgb, var(--pine-700) 35%, transparent); text-underline-offset: 3px; transition: color var(--speed) var(--ease-out); }
a:hover { color: var(--moss-600); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The ring flips light wherever it lands on a dark surface — gold-700 clears
   3:1 on the creams but only reaches 2.5:1 on pine-900. Measured against each
   surface below: gold-400 is 6.79:1 on pine-900, 9.11:1 on the footer,
   8.48:1 on the topbar, 6.68:1 on the darkest Prairie Dusk surface. */
.topbar,
.page-hero,
.section--dark,
.site-footer,
.photo__caption,
:root[data-theme="dark"] {
  --focus-ring: var(--gold-400);
}
/* ...but a light card sitting on a dark section is a light surface again.
   --surface is white in daylight (gold-700 measures 5.41:1 there) and deep
   pine in Prairie Dusk, so this one has to follow the theme. */
.section--dark .card { --focus-ring: var(--gold-700); }
[data-theme="dark"] .section--dark .card { --focus-ring: var(--gold-400); }
/* The hero sky follows the real clock, not the theme, so its ring follows the
   sky rather than inheriting the theme's value: gold-700 is 4.39:1 on the
   darkest stop of the golden/day gradients, gold-400 is 4.0:1 or better on
   the dawn/dusk/night ones. */
.hero { --focus-ring: var(--gold-700); }
[data-sky="dawn"] .hero,
[data-sky="dusk"] .hero,
[data-sky="night"] .hero { --focus-ring: var(--gold-400); }
/* The notice bar is itself gold — any gold ring disappears into it (gold-500
   on gold-500 is 1:1). Pine measures 6.31:1 there; the red danger variant
   takes cream instead, whose worst case is 6.23:1 at the light end of the
   #7c2d22 -> --danger-600 gradient. The 8.78:1 previously quoted here was the
   favourable dark end of that same gradient, not the worst case. */
.alert-bar { --focus-ring: var(--pine-950); }
/* Red surfaces take cream — no gold clears 3:1 across the danger gradient. */
.alert-bar--danger,
.emergency-banner { --focus-ring: var(--cream-50); }

::selection { background: var(--wheat-200); color: var(--pine-950); }

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--pine-900);
  color: var(--cream-50);
  padding: .65rem 1.2rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 1rem; color: var(--cream-50); }
/* The skip link moves focus onto <main tabindex="-1"> so the context change is
   announced. <main> is not an interactive control, so it takes no focus ring;
   tabindex="-1" keeps it out of the sequential Tab order. */
main[tabindex="-1"]:focus { outline: none; }

/* ----------------------------------------------
   03. TYPOGRAPHY & PROSE
---------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .9rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.eyebrow::before {
  content: "";
  width: 2rem; height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 2rem; height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
}
.eyebrow--light { color: var(--gold-400); }

.display-1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); font-weight: 600; }
.display-2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.h3 { font-size: 1.45rem; }

.lead { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.7; color: var(--ink-700); }

.section-head { max-width: 46rem; margin-bottom: var(--space-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__title { margin-bottom: .45em; }
.section-head__lead { color: var(--ink-700); margin-bottom: 0; }

.prose h2 { font-size: 1.75rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.4em; }
.prose li { margin-bottom: .35em; }
.prose li::marker { color: var(--gold-600); }

/* ----------------------------------------------
   04. LAYOUT PRIMITIVES
---------------------------------------------- */
.container {
  width: min(100% - 2.5rem, 73rem);
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2.5rem, 52rem); }
.container--wide { width: min(100% - 2.5rem, 84rem); }

.section { padding-block: var(--space-8); position: relative; }
.section--tight { padding-block: var(--space-7); }
.section--alt { background: var(--bg-alt); }
.section--dark {
  background:
    radial-gradient(70rem 30rem at 85% -10%, rgba(194, 151, 58, .12), transparent 60%),
    linear-gradient(170deg, var(--pine-900), var(--pine-950));
  color: var(--sage-200);
}
.section--dark h2, .section--dark h3 { color: var(--cream-50); }
/* ...but not inside a light card sitting on the dark section */
.section--dark .person-card h3 { color: var(--pine-900); }
[data-theme="dark"] .section--dark .person-card h3 { color: #eef4e0; }
.section--dark .section-head__lead { color: var(--sage-200); }

/* faint topo-line texture for select sections */
.section--topo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%231a4a33' stroke-opacity='.05' stroke-width='1.4'%3E%3Cpath d='M0 84c60-26 96-60 168-48s96 56 168 44 84-40 84-40'/%3E%3Cpath d='M0 168c70-20 110-64 190-50s86 60 160 46 70-34 70-34'/%3E%3Cpath d='M0 252c60-30 104-54 180-44s100 52 170 42 70-30 70-30'/%3E%3Cpath d='M0 336c66-24 100-58 176-46s96 54 172 42 72-36 72-36'/%3E%3C/g%3E%3C/svg%3E");
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse { grid-template-columns: .95fr 1.05fr; }
.split > * { min-width: 0; }

/* Leaf divider between sections */
.leaf-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding-block: var(--space-2);
  color: var(--gold-500);
}
.leaf-divider::before, .leaf-divider::after {
  content: "";
  height: 1px;
  width: min(11rem, 26vw);
  background: linear-gradient(to var(--dir, right), transparent, var(--line));
}
.leaf-divider::before { --dir: right; }
.leaf-divider::after { --dir: left; }
.leaf-divider svg { width: 1.35rem; height: 1.35rem; }

/* Curved ridge dividers (SVG wrappers) */
.ridge { line-height: 0; }
.ridge svg { width: 100%; height: clamp(2.5rem, 6vw, 5rem); }

/* ----------------------------------------------
   05. BUTTONS, LINKS, CHIPS, BADGES
---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.55rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out),
              background-color var(--speed) var(--ease-out), color var(--speed) var(--ease-out),
              border-color var(--speed) var(--ease-out);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--pine-800); color: var(--cream-50); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--pine-700); color: var(--cream-50); box-shadow: var(--shadow-md); }

.btn--gold { background: var(--gold-500); color: var(--pine-950); box-shadow: var(--shadow-sm); }
.btn--gold:hover { background: var(--gold-400); color: var(--pine-950); box-shadow: var(--shadow-md); }

.btn--outline { border-color: var(--pine-800); color: var(--pine-800); background: transparent; }
.btn--outline:hover { background: var(--pine-800); color: var(--cream-50); }

.btn--ghost-light { border-color: rgba(251, 248, 241, .45); color: var(--cream-50); background: rgba(251, 248, 241, .06); }
.btn--ghost-light:hover { border-color: var(--cream-50); background: rgba(251, 248, 241, .14); color: var(--cream-50); }

.btn--sm { padding: .55rem 1.1rem; font-size: .9rem; }
.btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--pine-700);
}
.text-link svg { width: 1em; height: 1em; transition: transform var(--speed) var(--ease-out); }
.text-link:hover svg { transform: translateX(4px); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .95rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .88rem;
  font-weight: 600;
  color: var(--pine-800);
  text-decoration: none;
  transition: border-color var(--speed) var(--ease-out), background var(--speed) var(--ease-out), transform var(--speed) var(--ease-out);
}
.chip svg { width: 1em; height: 1em; color: var(--gold-600); }
.chip:hover { border-color: var(--moss-500); background: var(--bg-alt); transform: translateY(-2px); color: var(--pine-900); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .7rem;
  border-radius: var(--radius-pill);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.badge--gold { background: var(--wheat-200); color: var(--gold-600); }
.badge--green { background: #ddebdd; color: var(--pine-700); }
.badge--red { background: var(--danger-100); color: var(--danger-600); }
.badge--outline-light { border: 1px solid rgba(251,248,241,.4); color: var(--cream-100); }

/* ----------------------------------------------
   06. TOP BAR, ALERT BAR, HEADER & NAV
---------------------------------------------- */
.topbar {
  background: var(--pine-950);
  color: var(--sage-200);
  font-size: .84rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .45rem;
}
.topbar__note { margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.topbar strong { color: var(--cream-50); }
.topbar__note svg { width: .95rem; height: .95rem; color: var(--gold-400); flex: none; }
.topbar__links { display: flex; align-items: center; gap: 1.1rem; }
.topbar__links a { color: var(--sage-200); text-decoration: none; }
.topbar__links a:hover { color: var(--cream-50); }
.topbar__phone { display: inline-flex; align-items: center; gap: .4rem; color: var(--cream-100); font-weight: 600; }
.topbar__phone svg { width: .9rem; height: .9rem; color: var(--gold-400); }

.alert-bar {
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  color: var(--pine-950);
}
.alert-bar[hidden] { display: none; }
.alert-bar__inner {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-block: .55rem;
  font-size: .92rem;
}
.alert-bar__badge {
  flex: none;
  background: var(--pine-950);
  color: var(--wheat-200);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .28rem .65rem;
  border-radius: var(--radius-pill);
}
.alert-bar__text { margin: 0; flex: 1; min-width: 0; }
.alert-bar__text a { color: var(--pine-950); font-weight: 700; }
.alert-bar__close {
  flex: none;
  border: 0;
  background: rgba(10, 32, 24, .12);
  color: var(--pine-950);
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background var(--speed) var(--ease-out);
}
.alert-bar__close:hover { background: rgba(10, 32, 24, .25); }

/* live severe-weather warnings turn the bar red */
.alert-bar--danger { background: linear-gradient(90deg, #7c2d22, var(--danger-600)); color: #fdf1ee; }
.alert-bar--danger .alert-bar__badge { background: #fdf1ee; color: #7c2d22; }
.alert-bar--danger .alert-bar__text strong,
[data-theme="dark"] .alert-bar--danger .alert-bar__text strong { color: #fff; }
.alert-bar--danger .alert-bar__text a { color: #fff; }
/* The x is a text glyph, so 1.4.3 applies at 4.5:1. A light overlay on the light
   end of the red gradient left it at 4.24:1 resting, and hover raised the overlay
   to .32, moving it the wrong way. Lower the resting fill and darken on hover the
   way the gold variant above already does, so hover improves contrast. */
.alert-bar--danger .alert-bar__close { background: rgba(253, 241, 238, .10); color: #fdf1ee; }
.alert-bar--danger .alert-bar__close:hover { background: rgba(10, 32, 24, .18); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 241, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--speed) var(--ease-out);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  margin-right: auto;
}
.brand__seal { width: 3rem; height: 3rem; flex: none; filter: drop-shadow(0 2px 4px rgba(17, 52, 36, .25)); }
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.brand__name {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--pine-900);
  letter-spacing: -.01em;
}
.brand__tag {
  white-space: nowrap;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* not --gold-700: the header is translucent, so this type sits on whatever is
     scrolled underneath rather than on flat cream, and gold-700 drops to 4.37:1
     there. This clears 4.5:1 against the darkest backdrop the header can composite. */
  color: #815b16;
}
/* the same tag sits on the dark footer, where the light-background gold is too dark */
.footer-brand .brand__tag { color: var(--gold-400); }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; align-items: center; gap: .25rem; }
.nav-list > li { position: relative; }
.nav-list > li > a,
.nav-list > li > button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .85rem;
  border: 0;
  background: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: .96rem;
  font-weight: 600;
  color: var(--ink-700);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--speed) var(--ease-out), color var(--speed) var(--ease-out);
}
.nav-list > li > a:hover,
.nav-list > li > button:hover { background: var(--bg-raised); color: var(--pine-900); }
.nav-list > li > a[aria-current="page"] { color: var(--pine-900); background: var(--bg-raised); }
.nav-list > li > a[aria-current="page"]::after { content: none; }
/* a dropdown whose child page is the current one gets the same pill */
.nav-list > li.has-dropdown > button[data-current] { color: var(--pine-900); background: var(--bg-raised); }
.dropdown a[aria-current="page"] { background: var(--bg-alt); color: var(--pine-900); font-weight: 700; }

.nav-list .chev { width: .8rem; height: .8rem; transition: transform var(--speed) var(--ease-out); }
.has-dropdown.open > button .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + .6rem);
  left: 50%;
  translate: -50% 0;
  min-width: 15.5rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: .5rem !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--speed) var(--ease-out), transform var(--speed) var(--ease-out), visibility var(--speed);
}
.dropdown::before {
  content: "";
  position: absolute;
  top: -.45rem; left: 50%;
  width: .9rem; height: .9rem;
  background: var(--surface);
  border-left: 1px solid var(--line-soft);
  border-top: 1px solid var(--line-soft);
  transform: translateX(-50%) rotate(45deg);
}
.has-dropdown.open .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (hover: hover) {
  .has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
  .has-dropdown:hover > button .chev { transform: rotate(180deg); }
}
.dropdown a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  border-radius: var(--radius-sm);
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
}
.dropdown a:hover { background: var(--bg-alt); color: var(--pine-900); }
.dropdown a svg { width: 1.05rem; height: 1.05rem; color: var(--moss-600); flex: none; }

.site-header__actions { display: flex; align-items: center; gap: .65rem; }
.site-header__actions .btn { white-space: nowrap; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--pine-800);
  cursor: pointer;
  transition: border-color var(--speed) var(--ease-out), background var(--speed) var(--ease-out), transform var(--speed) var(--ease-out);
}
.icon-btn svg { width: 1.15rem; height: 1.15rem; }
/* Ahead of :hover on purpose: same specificity, so the hover border-color still
   takes the tie on source order. Ahead of .nav-toggle for a different reason -
   two classes beat that rule's one whatever the order. */
.site-header__actions .icon-btn,
.site-header__actions .nav-toggle { border-color: var(--control-line); }
.icon-btn:hover { border-color: var(--moss-500); background: var(--bg-alt); transform: translateY(-1px); }

/* The modal drawer's own close control. The panel paints over the header at
   z-index 150, so #navToggle - the control that opened it - renders 0 of its
   3600 pixels while the drawer is open and cannot be the advised way out that
   SC 2.1.2 requires. Injected by script, so display:none here is the shape
   .nav-toggle already uses: absent above the breakpoint, present below it. */
.nav-close-row {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}
.nav-close {
  display: grid;
  place-items: center;
  width: 2.7rem; height: 2.7rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--pine-800);
  cursor: pointer;
  transition: border-color var(--speed) var(--ease-out), background var(--speed) var(--ease-out);
}
.nav-close svg { width: 1.15rem; height: 1.15rem; }
.nav-close:hover { border-color: var(--moss-500); background: var(--bg-alt); }
/* --pine-800 disappears into the dusk surface; .icon-btn already takes
   --sage-200 there and this control is the same shape. */
[data-theme="dark"] .nav-close { color: var(--sage-200); }

.nav-toggle {
  display: none;
  position: relative;
  width: 2.7rem; height: 2.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  left: .65rem; right: .65rem;
  height: 2px;
  border-radius: 2px;
  background: var(--pine-900);
  transition: transform var(--speed) var(--ease-out), opacity var(--speed) var(--ease-out), top var(--speed) var(--ease-out);
}
.nav-toggle::before { top: .85rem; }
.nav-toggle span { top: calc(50% - 1px); }
.nav-toggle::after { top: calc(100% - .95rem); }
.nav-toggle[aria-expanded="true"]::before { top: calc(50% - 1px); transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span { opacity: 0; }
.nav-toggle[aria-expanded="true"]::after { top: calc(50% - 1px); transform: rotate(-45deg); }

/* ----------------------------------------------
   07. HOME HERO — layered prairie & timber scene
---------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  /* golden-hour sky: pale morning cream warming to a peach horizon */
  background: linear-gradient(180deg, #f9f3de 0%, #f8eecb 42%, #f7e7b4 68%, #f4dda4 100%);
}
.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  padding-block: clamp(2rem, 2.25vw, 2.5rem) clamp(9rem, 11.05vw, 14rem);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .9rem;
  padding: .45rem 1.05rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(194, 151, 58, .35);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pine-800);
  backdrop-filter: blur(4px);
}
.hero__eyebrow svg { width: 1rem; height: 1rem; color: var(--gold-600); }
.hero__title { margin-bottom: .35em; max-width: 13ch; font-size: clamp(2.5rem, 4.2vw, 4rem); }
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--pine-700);
}
.hero__lead { max-width: 42rem; margin-bottom: 1.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.2rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 1.4rem; color: var(--ink-700); font-size: .9rem; }
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__meta svg { width: 1rem; height: 1rem; color: var(--moss-600); }

.hero__scene {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  pointer-events: none;
}
.hero__scene svg { width: 100%; height: auto; display: block; margin-inline: auto; overflow: visible; }
.hero__scene svg.hero__scene-svg--wide { min-width: 64rem; }
.hero__scene svg.hero__scene-svg--narrow { display: none; }
@media (max-width: 64rem) and (min-width: 44.0625rem) {
  .hero__scene { left: 50%; transform: translateX(-50%); width: 64rem; }
}
/* Phones: swap to the lone-oak composition sized to the viewport */
@media (max-width: 44rem) {
  .hero__scene { left: 0; right: 0; transform: none; width: 100%; }
  .hero__scene svg.hero__scene-svg--wide { display: none; }
  .hero__scene svg.hero__scene-svg--narrow { display: block; min-width: 0; }
  /* reserve room equal to the scene height (~56vw) so the oak sits below the
     text, then let the quick cards overlap only the prairie/water base
     (the margin override lives in section 20 — it must come after the base
     .quick-strip rule in section 09 to win the cascade) */
  .hero__inner { padding-bottom: clamp(12rem, 58vw, 16rem); }
}

/* scene animations */
.scene-cloud { animation: cloud-drift 95s linear infinite; }
.scene-cloud--two { animation-duration: 130s; animation-delay: -55s; }
.scene-flock { animation: flock-fly 36s linear infinite; }
.scene-flock--late { animation-delay: -18s; }
.scene-sun { animation: sun-breathe 9s ease-in-out infinite; }
.scene-reed {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: reed-sway 6.5s ease-in-out infinite;
}
.scene-reed--off { animation-delay: -3s; }
.scene-mist { animation: mist-drift 48s ease-in-out infinite alternate; }
.scene-mist--two { animation-duration: 64s; animation-delay: -22s; }
.scene-glint { animation: glint-shimmer 5.5s ease-in-out infinite; }

@keyframes cloud-drift {
  from { transform: translateX(-340px); }
  to   { transform: translateX(1640px); }
}
@keyframes flock-fly {
  0%   { transform: translate(1540px, 0); }
  45%  { transform: translate(640px, -30px); }
  100% { transform: translate(-320px, 10px); }
}
@keyframes sun-breathe {
  0%, 100% { opacity: .95; }
  50% { opacity: .6; }
}
@keyframes reed-sway {
  0%, 100% { transform: rotate(-2.6deg); }
  50% { transform: rotate(2.6deg); }
}
@keyframes mist-drift {
  from { transform: translateX(-46px); }
  to   { transform: translateX(52px); }
}
@keyframes glint-shimmer {
  0%, 100% { opacity: .28; }
  50% { opacity: .65; }
}

/* ----------------------------------------------
   08. PAGE HERO — interior pages
---------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  color: var(--sage-200);
  background:
    radial-gradient(60rem 26rem at 110% -20%, rgba(194, 151, 58, .2), transparent 55%),
    radial-gradient(40rem 22rem at -10% 110%, rgba(58, 125, 140, .25), transparent 60%),
    linear-gradient(160deg, var(--pine-800) 0%, var(--pine-900) 55%, var(--pine-950) 100%);
  padding-block: clamp(3rem, 6.5vw, 5rem) clamp(4.5rem, 9vw, 7rem);
}
.page-hero__branch {
  position: absolute;
  top: -1.5rem; right: -2rem;
  width: clamp(16rem, 30vw, 26rem);
  opacity: .16;
  pointer-events: none;
  color: var(--wheat-200);
}
.page-hero__inner { position: relative; z-index: 2; max-width: 50rem; }
.page-hero__title { color: var(--cream-50); font-size: clamp(2.3rem, 4.6vw, 3.6rem); margin-bottom: .3em; }
.page-hero__lead { color: var(--sage-200); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 42rem; margin-bottom: 1.5rem; }
/* the global strong colour is pine-900 — unreadable on the dark hero */
.page-hero__lead strong { color: var(--cream-50); }
.page-hero__lead a { color: var(--cream-50); text-decoration-color: rgba(251, 248, 241, .55); }
.page-hero__chips { display: flex; flex-wrap: wrap; gap: .7rem; }
.page-hero__chips .chip { background: rgba(251, 248, 241, .08); border-color: rgba(251, 248, 241, .25); color: var(--cream-100); }
.page-hero__chips .chip svg { color: var(--gold-400); }
.page-hero__chips .chip:hover { background: rgba(251, 248, 241, .16); border-color: rgba(251, 248, 241, .5); }

.page-hero .ridge--bottom {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 1;
}
.page-hero .ridge--bottom svg { display: block; width: 100%; height: clamp(2.2rem, 5vw, 4rem); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.breadcrumb a { color: var(--sage-200); text-decoration: none; }
.breadcrumb a:hover { color: var(--cream-50); }
.breadcrumb li { display: inline-flex; align-items: center; gap: .55rem; }
.breadcrumb li + li::before { content: "›"; color: var(--gold-400); }
.breadcrumb [aria-current] { color: var(--gold-400); }

/* ----------------------------------------------
   09. QUICK-ACTION STRIP (overlaps home hero)
---------------------------------------------- */
.quick-strip { position: relative; z-index: 5; margin-top: clamp(-2.75rem, -3.5vw, -2rem); }
.quick-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.quick-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.35rem 1.3rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--ink-700);
  transition: transform var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out), border-color var(--speed) var(--ease-out);
}
.quick-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--sage-400); color: var(--ink-700); }
.quick-card__icon {
  width: 2.9rem; height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: .85rem;
  background: linear-gradient(150deg, var(--bg-alt), var(--bg-raised));
  color: var(--pine-700);
  border: 1px solid var(--line-soft);
}
.quick-card__icon svg { width: 1.4rem; height: 1.4rem; }
.quick-card h3 { margin: 0; font-size: 1.08rem; font-family: var(--font-body); font-weight: 700; color: var(--pine-900); }
.quick-card p { margin: 0; font-size: .89rem; line-height: 1.5; }
.quick-card__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding-top: .5rem;
  font-size: .86rem;
  font-weight: 700;
  color: var(--gold-700);
}
.quick-card__go svg { width: .9rem; height: .9rem; transition: transform var(--speed) var(--ease-out); }
.quick-card:hover .quick-card__go svg { transform: translateX(4px); }

/* ----------------------------------------------
   10. CARDS
---------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out), border-color var(--speed) var(--ease-out);
}
a.card { text-decoration: none; color: inherit; display: block; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--sage-400); }

/* Department cards */
.dept-card { overflow: hidden; display: flex; flex-direction: column; }
.dept-card__banner {
  position: relative;
  height: 7.5rem;
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.4rem;
  color: var(--cream-50);
}
.dept-card__banner svg.banner-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.dept-card__icon {
  position: relative;
  z-index: 2;
  width: 3.4rem; height: 3.4rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  background: rgba(251, 248, 241, .14);
  border: 1px solid rgba(251, 248, 241, .35);
  backdrop-filter: blur(3px);
  color: var(--cream-50);
}
.dept-card__icon svg { width: 1.7rem; height: 1.7rem; }
.dept-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.dept-card__body h3 { margin: 0; font-size: 1.32rem; }
.dept-card__body p { margin: 0; font-size: .95rem; color: var(--ink-700); }
.dept-card__links { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.dept-card__links span {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-500);
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  padding: .25rem .65rem;
  border-radius: var(--radius-pill);
}
.dept-card__body .text-link { margin-top: auto; padding-top: 1rem; }

/* Service cards (icon + copy) */
.svc-card { padding: 1.7rem 1.6rem; display: flex; flex-direction: column; gap: .65rem; }
.svc-card__icon {
  width: 3.2rem; height: 3.2rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--pine-800), var(--pine-700));
  color: var(--wheat-200);
  box-shadow: var(--shadow-sm);
}
.svc-card__icon svg { width: 1.5rem; height: 1.5rem; }
.svc-card__icon--gold { background: linear-gradient(150deg, var(--gold-500), var(--gold-600)); color: var(--pine-950); }
.svc-card__icon--river { background: linear-gradient(150deg, var(--river-500), var(--river-700)); color: var(--cream-50); }
.svc-card h3 { margin: 0; font-size: 1.22rem; }
.svc-card p { margin: 0; font-size: .94rem; color: var(--ink-700); flex: 1; }
.svc-card .text-link { font-size: .92rem; }

/* News cards */
.news-card { overflow: hidden; display: flex; flex-direction: column; }
.news-card__media { position: relative; height: 10.5rem; overflow: hidden; }
.news-card__media svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .6s var(--ease-out); }
.news-card:hover .news-card__media svg { transform: scale(1.05); }
.news-card__date {
  position: absolute;
  top: .9rem; left: .9rem;
  z-index: 2;
  background: rgba(251, 248, 241, .92);
  border-radius: var(--radius-sm);
  padding: .35rem .7rem;
  text-align: center;
  font-weight: 800;
  color: var(--pine-900);
  font-size: .8rem;
  line-height: 1.15;
  box-shadow: var(--shadow-sm);
}
.news-card__date b { display: block; font-size: 1.15rem; }
.news-card__body { padding: 1.25rem 1.35rem 1.45rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.news-card__tag { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); }
.news-card__body h3 { margin: 0; font-size: 1.18rem; line-height: 1.3; }
.news-card__body p { margin: 0; font-size: .92rem; color: var(--ink-700); flex: 1; }

/* Event rows */
.event-list { display: flex; flex-direction: column; gap: .9rem; }
.event-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) var(--ease-out), border-color var(--speed) var(--ease-out);
}
.event-row:hover { transform: translateX(6px); border-color: var(--sage-400); }
.event-row__date {
  flex: none;
  width: 4rem; height: 4rem;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--pine-800), var(--pine-700));
  color: var(--cream-50);
  font-weight: 800;
  line-height: 1.05;
}
.event-row__date b { font-size: 1.35rem; }
.event-row__date span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wheat-200); }
.event-row__body h3 { margin: 0 0 .15rem; font-size: 1.06rem; font-family: var(--font-body); font-weight: 700; }
.event-row__body p { margin: 0; font-size: .87rem; color: var(--ink-500); display: flex; flex-wrap: wrap; gap: .9rem; }
.event-row__body p span { display: inline-flex; align-items: center; gap: .35rem; }
.event-row__body svg { width: .92rem; height: .92rem; color: var(--moss-600); }

/* People / officials */
.person-card { padding: 1.6rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.person-card__avatar {
  width: 4.6rem; height: 4.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: .65rem;
  background: linear-gradient(150deg, var(--pine-700), var(--pine-900));
  color: var(--wheat-200);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  border: 3px solid var(--wheat-200);
  box-shadow: var(--shadow-sm);
}
.person-card h3 { margin: 0; font-size: 1.14rem; }
.person-card__role { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700); }
.person-card__contact { margin-top: .55rem; font-size: .88rem; color: var(--ink-700); display: flex; flex-direction: column; gap: .15rem; }
.person-card__contact a { text-decoration: none; }

/* Community + parks tiles */
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  padding: 1.15rem 1.2rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out), border-color var(--speed) var(--ease-out);
}
.tile:hover { transform: translateY(-4px); border-color: var(--sage-400); box-shadow: var(--shadow-md); }
.tile h3 { margin: 0 0 .15rem; font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; }
.tile p { margin: 0; font-size: .86rem; color: var(--ink-500); }
.tile__leaf { position: absolute; right: .8rem; top: .9rem; width: 1.1rem; height: 1.1rem; color: var(--sage-400); }

/* Doc / form list */
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.doc-list a {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink-700);
  font-weight: 600;
  font-size: .95rem;
  transition: border-color var(--speed) var(--ease-out), transform var(--speed) var(--ease-out);
}
.doc-list a:hover { border-color: var(--moss-500); transform: translateX(5px); color: var(--pine-900); }
.doc-list svg { width: 1.25rem; height: 1.25rem; color: var(--gold-600); flex: none; }
.doc-list small { margin-left: auto; color: var(--ink-500); font-weight: 600; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }

/* ----------------------------------------------
   11. STATS BAND
---------------------------------------------- */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat {
  text-align: center;
  padding: 1.9rem 1rem 1.7rem;
  background: rgba(251, 248, 241, .05);
  border: 1px solid rgba(251, 248, 241, .14);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(2px);
}
.stat__icon { width: 2.1rem; height: 2.1rem; margin: 0 auto .65rem; color: var(--gold-400); }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 700;
  color: var(--cream-50);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat__num sup { font-size: .55em; color: var(--gold-400); }
.stat__label { margin-top: .35rem; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a5c29d; }

/* ----------------------------------------------
   12. ACCORDION, TABS, TABLES
---------------------------------------------- */
.accordion { display: flex; flex-direction: column; gap: .75rem; }
.acc-item {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out);
}
.acc-item.open { border-color: var(--sage-400); box-shadow: var(--shadow-sm); }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--pine-900);
  text-align: left;
  cursor: pointer;
}
/* The button fills .acc-item edge to edge, and .acc-item clips to its radius,
   so the global +2px ring paints entirely outside the clip box and is thrown
   away — a collapsed header showed no focus indicator at all (WCAG 2.2
   SC 2.4.7, Level AA). Turn the ring inward instead of dropping the clip: -5px
   puts the 3px ring 2px inside the item's edge, mirroring the outward ring's
   2px gap, and lands it on --surface rather than on the page background.
   Measured there: gold-700 on #ffffff is 5.41:1, gold-400 on the Prairie Dusk
   --surface #16291f is 7.63:1 — both clear the 3:1 of SC 1.4.11. */
.acc-btn:focus-visible { outline-offset: -5px; }
.acc-btn .acc-ico {
  flex: none;
  width: 1.8rem; height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  color: var(--pine-800);
  transition: transform var(--speed) var(--ease-out), background var(--speed) var(--ease-out), color var(--speed) var(--ease-out);
}
.acc-btn .acc-ico svg { width: .85rem; height: .85rem; }
.acc-item.open .acc-ico { transform: rotate(45deg); background: var(--pine-800); color: var(--cream-50); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
/* A collapsed panel is clipped to zero height, but clipped is not hidden: without
   visibility the links inside stay in the tab order and in the accessibility tree,
   which contradicts aria-expanded="false" and puts focus somewhere invisible.
   Transitioning visibility keeps it shown for the length of the collapse. */
.acc-panel__inner { overflow: hidden; visibility: hidden; transition: visibility .35s linear; }
.acc-item.open .acc-panel__inner { visibility: visible; }
.acc-panel__content { padding: 0 1.3rem 1.25rem; color: var(--ink-700); font-size: .96rem; }
.acc-panel__content :last-child { margin-bottom: 0; }

.tabs { }
.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .45rem;
  background: var(--bg-raised);
  border-radius: var(--radius-pill);
  width: fit-content;
  max-width: 100%;
  margin-bottom: var(--space-5);
}
.tab-btn {
  border: 0;
  background: none;
  padding: .6rem 1.25rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  transition: background var(--speed) var(--ease-out), color var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out);
}
.tab-btn[aria-selected="true"] { background: var(--pine-800); color: var(--cream-50); box-shadow: var(--shadow-sm); }
.tab-panel[hidden] { display: none; }

/* .card is a grid item on several pages. Without min-width: 0 the 34rem
   min-width of a table.data inside it becomes the card's automatic minimum
   size, so the grid track — not the .table-wrap scrollport — absorbs the
   table and the page overflows horizontally. */
.card { min-width: 0; }

.table-wrap { overflow-x: auto; min-width: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 34rem;
}
table.data th, table.data td { padding: .85rem 1.2rem; text-align: left; }
table.data thead th {
  background: var(--pine-900);
  color: var(--wheat-200);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
table.data tbody tr { border-top: 1px solid var(--line-soft); }
table.data tbody tr:nth-child(even) { background: var(--bg); }
table.data tbody tr:hover { background: var(--bg-alt); }
table.data td.num { font-weight: 700; color: var(--pine-900); font-variant-numeric: tabular-nums; }
/* Long email addresses and URLs break rather than force a scrollport. */
table.data a { overflow-wrap: anywhere; }

/* ----------------------------------------------
   13. FORMS & PAYMENT WIZARD
---------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-size: .88rem; font-weight: 700; color: var(--pine-900); }
.field label small { font-weight: 500; color: var(--ink-500); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .78rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: .98rem;
  color: var(--ink-900);
  transition: border-color var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--moss-600);
  box-shadow: 0 0 0 4px rgba(81, 146, 95, .18);
}
.field input.is-invalid, .field select.is-invalid { border-color: var(--danger-600); box-shadow: 0 0 0 4px rgba(162, 59, 46, .12); }
.field .hint { font-size: .8rem; color: var(--ink-500); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.form-grid .field--full { grid-column: 1 / -1; }

.wizard {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.wizard__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--pine-900);
  padding: 1.1rem 1.3rem;
  gap: .8rem;
}
.wstep { display: flex; align-items: center; gap: .65rem; color: var(--sage-400); font-size: .85rem; font-weight: 700; }
.wstep__dot {
  flex: none;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  font-size: .82rem;
}
.wstep.is-active { color: var(--wheat-200); }
.wstep.is-active .wstep__dot { background: var(--gold-500); border-color: var(--gold-500); color: var(--pine-950); }
.wstep.is-done { color: var(--sage-200); }
.wstep.is-done .wstep__dot { background: var(--moss-600); border-color: var(--moss-600); color: var(--cream-50); }
.wizard__body { padding: clamp(1.4rem, 3vw, 2.2rem); }
.wizard__pane[hidden] { display: none; }
.wizard__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }

.pay-summary {
  background: var(--bg-alt);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
}
.pay-summary dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1.5rem; margin: 0; font-size: .95rem; }
.pay-summary dt { color: var(--ink-500); }
.pay-summary dd { margin: 0; font-weight: 700; color: var(--pine-900); text-align: right; }
.pay-summary .total { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .6rem; font-size: 1.05rem; }

.pay-success { text-align: center; padding: 1.5rem 1rem 1rem; }
.pay-success__check {
  width: 4.6rem; height: 4.6rem;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--moss-500), var(--pine-700));
  color: var(--cream-50);
  box-shadow: var(--shadow-md);
  animation: pop-in .45s var(--ease-out) both;
}
.pay-success__check svg { width: 2.1rem; height: 2.1rem; }
@keyframes pop-in {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.confirm-no {
  display: inline-block;
  margin: .4rem 0 1rem;
  padding: .5rem 1.1rem;
  background: var(--bg-alt);
  border: 1px dashed var(--gold-500);
  border-radius: var(--radius-sm);
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--pine-900);
}

.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.1rem; }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-card label {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-weight: 600;
  font-size: .93rem;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease-out), background var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out);
}
.radio-card svg { width: 1.35rem; height: 1.35rem; color: var(--moss-600); flex: none; }
.radio-card input:checked + label {
  border-color: var(--pine-700);
  background: #f0f5ee;
  box-shadow: 0 0 0 3px rgba(35, 95, 64, .15);
}
.radio-card input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ----------------------------------------------
   14. CALLOUTS, NOTICES, STATUS
---------------------------------------------- */
.callout {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  border-left: 5px solid var(--moss-600);
  box-shadow: var(--shadow-sm);
}
.callout__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--moss-600); margin-top: .15rem; }
.callout p { margin: 0; font-size: .96rem; color: var(--ink-700); }
.callout h3, .callout h4 { margin: 0 0 .25rem; font-size: 1.05rem; }
.callout--gold { border-left-color: var(--gold-500); }
.callout--gold .callout__icon { color: var(--gold-600); }
.callout--red { border-left-color: var(--danger-600); background: #fdf7f5; }
.callout--red .callout__icon { color: var(--danger-600); }
.callout--river { border-left-color: var(--river-500); }
.callout--river .callout__icon { color: var(--river-500); }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1.15rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .92rem;
  border: 1px solid;
}
.status-chip .dot { width: .6rem; height: .6rem; border-radius: 50%; }
.status-chip--ok { background: #e9f3e9; border-color: #bcd8bd; color: var(--ok-600); }
.status-chip--ok .dot { background: var(--ok-600); box-shadow: 0 0 0 4px rgba(47, 122, 70, .18); }

.emergency-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(120deg, #7c2d22, var(--danger-600));
  color: #fdf1ee;
  border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem;
  box-shadow: var(--shadow-md);
}
.emergency-banner svg { width: 1.7rem; height: 1.7rem; flex: none; }
.emergency-banner p { margin: 0; font-size: .98rem; flex: 1; min-width: 16rem; }
.emergency-banner strong { color: #fff; }
.emergency-banner a.btn { background: #fff; color: var(--danger-600); border-color: transparent; }
.emergency-banner a.btn:hover { background: #fdf1ee; }

/* ----------------------------------------------
   15. TIMELINE
---------------------------------------------- */
.timeline { position: relative; margin: 0; padding: 0 0 0 2rem; list-style: none; }
.timeline::before {
  content: "";
  position: absolute;
  left: .45rem; top: .4rem; bottom: .4rem;
  width: 2px;
  background: linear-gradient(var(--sage-400), var(--gold-500));
  border-radius: 2px;
}
.tl-item { position: relative; padding-bottom: 1.6rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -2rem; top: .42rem;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--moss-600);
  box-shadow: 0 0 0 4px rgba(81, 146, 95, .15);
}
.tl-year { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--gold-600); }
.tl-item h3 { margin: .1rem 0 .25rem; font-size: 1.08rem; }
.tl-item p { margin: 0; font-size: .93rem; color: var(--ink-700); }

/* ----------------------------------------------
   16. FOOTER
---------------------------------------------- */
.footer-ridge { line-height: 0; background: var(--bg); }
.section--alt + footer .footer-ridge,
.footer-ridge--alt { background: var(--bg-alt); }
.footer-ridge svg { width: 100%; height: clamp(3rem, 7vw, 5.5rem); display: block; }
/* dusk ridge — for pages whose last section is dark: the gap above the
   hills goes deep pine (matching the CTA gradient's end AND the hills,
   so the landscape runs unbroken into the footer), and the hilltops stay
   visible as an inked, moonlit crest line traced by drop-shadow */
.footer-ridge--dusk { background: var(--pine-950); }
.footer-ridge--dusk svg {
  filter: drop-shadow(0 -2.5px 0 #35684a) drop-shadow(0 -8px 12px rgba(81, 146, 95, .28));
}

.site-footer {
  background: linear-gradient(180deg, var(--pine-950), #071811);
  color: var(--sage-200);
  font-size: .93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 2.5rem;
  padding-block: var(--space-7) var(--space-6);
}
.footer-brand .brand { margin: 0 0 1rem; }
.footer-brand .brand__name { color: var(--cream-50); }
.footer-brand p { color: var(--sage-400); max-width: 26rem; }
.footer-contact { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer-contact li { display: flex; gap: .65rem; align-items: flex-start; }
/* the text column is a flex item, so its automatic minimum size is the widest
   unbreakable token in it — a long email address would otherwise widen the row
   past a 320px viewport instead of wrapping */
.footer-contact li > span { min-width: 0; overflow-wrap: break-word; }
.footer-contact svg { width: 1.05rem; height: 1.05rem; color: var(--gold-400); flex: none; margin-top: .2rem; }
.footer-contact a { color: var(--sage-200); text-decoration: none; }
.footer-contact a:hover { color: var(--cream-50); }

.footer-col h3, .footer-col h2 {
  color: var(--cream-50);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer-col a {
  color: var(--sage-400);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: color var(--speed) var(--ease-out), transform var(--speed) var(--ease-out);
}
.footer-col a::before { content: "›"; color: var(--gold-500); }
.footer-col a:hover { color: var(--cream-50); transform: translateX(3px); }

.footer-bottom { border-top: 1px solid rgba(148, 180, 140, .18); }
.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-block: 1.2rem;
  font-size: .82rem;
  color: var(--ink-500);
  color: #8aa08c;   /* was #6e8472 — 4.2:1 on the dark footer, under the 4.5:1 AA minimum */
}
.footer-bottom__inner ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.3rem; margin: 0; padding: 0; }
.footer-bottom__inner a { color: #8aa08c; text-decoration: none; }
.footer-bottom__inner a:hover { color: var(--cream-50); }

/* ----------------------------------------------
   17. SEARCH OVERLAY & BACK-TO-TOP
---------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  background: rgba(10, 32, 24, .55);
  backdrop-filter: blur(6px);
  padding: clamp(1rem, 8vh, 6rem) 1.25rem;
}
.search-overlay.open { display: block; }
.search-panel {
  width: min(100%, 38rem);
  margin-inline: auto;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: search-in .25s var(--ease-out) both;
}
@keyframes search-in {
  from { transform: translateY(14px) scale(.985); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.search-bar {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.05rem 1.3rem;
  border-bottom: 1px solid var(--line-soft);
}
.search-bar svg { width: 1.2rem; height: 1.2rem; color: var(--moss-600); flex: none; }
.search-bar input {
  flex: 1;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 1.08rem;
  color: var(--ink-900);
}
.search-bar input:focus { outline: none; }
/* the mobile drawer teaches the same convention with the same pixels */
.search-bar kbd,
.nav-close-row kbd {
  flex: none;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink-500);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: .35rem;
  padding: .15rem .45rem;
  background: var(--surface);
}
.search-results { max-height: min(22rem, 50vh); overflow-y: auto; padding: .6rem; }
.search-result {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem .9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-700);
}
.search-result:hover, .search-result.is-active { background: var(--bg-alt); color: var(--ink-700); }
.search-result svg { width: 1.1rem; height: 1.1rem; color: var(--gold-600); flex: none; }
.search-result b { color: var(--pine-900); font-size: .97rem; display: block; }
.search-result small { font-size: .8rem; color: var(--ink-500); }
.search-empty { padding: 1.6rem; text-align: center; color: var(--ink-500); font-size: .94rem; }

.to-top {
  position: fixed;
  right: 1.3rem; bottom: 1.3rem;
  z-index: 90;
  width: 2.9rem; height: 2.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--pine-800);
  color: var(--cream-50);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--speed) var(--ease-out), transform var(--speed) var(--ease-out), visibility var(--speed), background var(--speed);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--pine-700); }
.to-top svg:not(.to-top__ring) { width: 1.1rem; height: 1.1rem; }

/* ----------------------------------------------
   18. MOTION & REVEAL
---------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* ----------------------------------------------
   19. UTILITIES
---------------------------------------------- */
.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;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0 !important; }
.flow > * + * { margin-top: var(--space-5); }

/* ----------------------------------------------
   19b. PHOTOS & FIGURES (real photography)
---------------------------------------------- */
.photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-raised);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line-soft);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo--tall { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 3 / 2; }
.photo--banner { aspect-ratio: 16 / 7; }
.photo__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1.2rem .9rem;
  /* the scrim has to hold across the whole caption text band, not just at the very
     bottom edge — over a bright photo a fading scrim leaves the text under 4.5:1 */
  background: linear-gradient(to top, rgba(10, 32, 24, .92) 0%, rgba(10, 32, 24, .88) 72%, rgba(10, 32, 24, 0) 100%);
  color: var(--cream-50);
  font-size: .9rem;
  line-height: 1.45;
}
.photo__caption strong { color: #fff; }
.photo__credit {
  display: block;
  margin-top: .15rem;
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--sage-200);
}
.photo__credit a { color: var(--wheat-200); text-decoration: underline; text-underline-offset: 2px; }

/* Photographic hero band (interior pages can opt in) */
.photo-figure-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  min-height: 26rem;
}
.photo-figure-grid .photo:first-child { grid-row: 1 / 3; }
@media (max-width: 44rem) {
  .photo-figure-grid { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .photo-figure-grid .photo:first-child { grid-row: auto; aspect-ratio: 3 / 2; }
}

/* Simple credit line under a plain inline image */
.fig-credit { margin-top: .55rem; font-size: .78rem; color: var(--ink-500); }
.fig-credit a { color: var(--pine-700); }

/* Centered, wrapping photo row (handles odd counts gracefully, e.g. 5 towns) */
.photo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}
.photo-row > .photo {
  flex: 1 1 19rem;
  max-width: 23rem;
}
@media (max-width: 44rem) {
  .photo-row > .photo { flex-basis: 100%; max-width: none; }
}

/* Town cards — every community gets a visual (real photo or character art) */
.town-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--space-4);
}
/* Nine communities: cap the grid at three columns so it fills as 3 x 3
   instead of leaving one card alone on a last row. */
@media (min-width: 64rem) { .town-grid { grid-template-columns: repeat(3, 1fr); } }
.town-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out), border-color var(--speed) var(--ease-out);
}
.town-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sage-400); }
.town-card__media {
  position: relative;
  height: 8.5rem;
  overflow: hidden;
  background: var(--bg-raised);
}
.town-card__media img,
.town-card__media svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
}
.town-card:hover .town-card__media img,
.town-card:hover .town-card__media svg { transform: scale(1.05); }
.town-card__name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.6rem .9rem .55rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--cream-50);
  /* same reason as .photo__caption: the scrim has to hold across the town name and
     the credit line under it, or a pale photo drops them below 4.5:1 */
  background: linear-gradient(to top, rgba(10, 32, 24, .92) 0%, rgba(10, 32, 24, .86) 60%, rgba(10, 32, 24, 0) 100%);
  text-shadow: 0 1px 4px rgba(10, 32, 24, .5);
}
.town-card__tag {
  position: absolute;
  top: .6rem; left: .6rem;
  z-index: 2;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: var(--radius-pill);
  background: rgba(251, 248, 241, .85);
  color: var(--pine-800);
}
.town-card__credit {
  position: absolute;
  bottom: .35rem; right: .55rem;
  z-index: 3;
  font-size: .62rem;
  color: var(--sage-200);
}
.town-card__credit a { color: var(--wheat-200); }
.town-card__body { padding: .85rem 1rem 1.1rem; }
.town-card__body p { margin: 0; font-size: .86rem; color: var(--ink-700); }

/* ----------------------------------------------
   20. RESPONSIVE
---------------------------------------------- */
@media (max-width: 72rem) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .quick-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 64rem) {
  :root { --header-h: 4.25rem; }

  .topbar__note span.hide-sm { display: none; }

  .nav-toggle { display: block; }
  /* 44 CSS px at every width where .nav-toggle IS the navigation. It is shown
     at <= 64rem and hidden above, where the desktop nav takes over, so 64rem is
     the boundary. SC 2.5.5 Target Size, WCAG 2.1, Level AAA - above Lonoke's
     binding AA bar, taken only because it costs nothing here: this rule sets
     no size above 64rem, so the desktop control sizes are untouched. SC 2.5.8
     Target Size
     (Minimum), WCAG 2.2, Level AA, asks 24x24 and was already met at 2.6rem /
     2.7rem. */
  .site-header__actions .icon-btn,
  .site-header__actions .nav-toggle { width: 2.75rem; height: 2.75rem; }
  /* backdrop-filter makes the header a containing block for fixed children,
     which would trap the off-canvas drawer inside the header. Drop it here so
     the fixed drawer is positioned against the viewport (full height). */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  /* The closed drawer has to be genuinely non-focusable, not just parked
     off-screen: transform alone leaves its links in the tab order and in the
     accessibility tree. visibility:hidden removes both, still transitions (so
     the slide survives) and needs no JS. display:none would kill the slide. */
  .site-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 150;
    width: min(22rem, 88vw);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    padding: 5.5rem 1.5rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(105%);
    transition: transform .35s var(--ease-out), visibility .35s var(--ease-out);
  }
  body.nav-open .site-nav { transform: none; visibility: visible; }
  /* The row occupies the panel's 5.5rem top padding exactly and pulls itself
     up by exactly the same length, so its contribution to the flow is zero by
     construction rather than by arithmetic: the five entries below must not
     move, and matching height to margin makes that true at any root font size
     instead of only at 16px. The way out then sits where the menu button would
     be if the panel were not painting over it. */
  .nav-close-row { display: flex; height: 5.5rem; margin-top: -5.5rem; }
  .nav-list { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav-list > li > a, .nav-list > li > button { width: 100%; justify-content: space-between; font-size: 1.05rem; padding: .8rem .9rem; border-radius: var(--radius-sm); }
  .dropdown {
    position: static;
    translate: none;
    min-width: 0;
    opacity: 1;
    /* inherit, not visible: a dropdown left open when the drawer closes must go
       with it instead of keeping its links focusable behind the screen */
    visibility: inherit;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: .15rem 0 .4rem .9rem;
    padding: 0 0 0 .35rem !important;
    display: none;
  }
  .dropdown::before { display: none; }
  .has-dropdown.open .dropdown { display: block; visibility: inherit; }
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 95; /* below header (100) so the in-header drawer paints above the scrim */
    background: rgba(10, 32, 24, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease-out), visibility .3s;
  }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }

  .hero__inner { grid-template-columns: 1fr; padding-bottom: clamp(13rem, 34vw, 17rem); }
  .split, .split--reverse { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 44rem) {
  body { font-size: 1rem; }
  .topbar__links { display: none; }
  .topbar__inner { justify-content: center; text-align: center; }
  .brand__tag { display: none; }
  .brand__name { font-size: 1.22rem; }
  .site-header__actions .btn { display: none; }

  /* Phone header. The brand and the three controls share ~280-320px, and the
     row has no wrap, so at 360px the brand's nowrap name used to push the menu
     button past the right edge where overflow-x: clip made it unreachable.
     Pin the controls at their natural size, give the brand what is left, and
     let the county name wrap onto two lines rather than overflow. */
  .site-header__inner { gap: .6rem; }
  .brand { min-width: 0; gap: .55rem; }
  .brand__seal { width: 2.5rem; height: 2.5rem; }
  .brand__name { white-space: normal; }
  .site-header__actions { flex: none; gap: .45rem; }
  .site-header__actions > * { flex: none; }
  /* The 44px control sizing that used to live here now runs from 320px up to
     64rem - see the .nav-toggle rule in the 64rem block above. */

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .quick-strip { margin-top: -1.75rem; }
  .quick-strip__grid { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .form-grid { grid-template-columns: 1fr; }
  .radio-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .wizard__steps { grid-template-columns: 1fr; gap: .55rem; }
  .event-row { flex-direction: row; }
  .alert-bar__inner { flex-wrap: wrap; }

  /* Stacked directory: on a phone each table row becomes a small card so the
     phone number and "good for" column are read, not scrolled to. Cells carry
     their column name in data-label; the first cell is the row's title. */
  .table-wrap--stack { overflow: visible; border: 0; background: none; box-shadow: none; }
  table.data--stack { min-width: 0; display: block; }
  table.data--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.data--stack tbody { display: flex; flex-direction: column; gap: .75rem; }
  table.data--stack tr, table.data--stack td { display: block; }
  table.data--stack tbody tr,
  table.data--stack tbody tr:nth-child(even),
  table.data--stack tbody tr:hover { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: .95rem 1.1rem 1.05rem; }
  table.data--stack td { padding: 0; }
  table.data--stack td:first-child { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: var(--pine-900); line-height: 1.25; }
  table.data--stack td:first-child strong { font-weight: 700; }
  table.data--stack td[data-label]::before { content: attr(data-label); display: block; margin-top: .6rem; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); }
  table.data--stack td.num { font-size: 1.05rem; }
}

/* ----------------------------------------------
   21. REDUCED MOTION & PRINT
---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* The .reveal fade-in only completes when the script adds .in-view, so with
   scripting disabled the body of a page is left at opacity 0 — on the office
   pages that is nearly the whole page. Show it instead. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .topbar, .alert-bar, .site-header, .site-footer, .to-top, .search-overlay, .hero__scene, .quick-strip { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ----------------------------------------------
   22. PRAIRIE DUSK — evening theme
   Auto via prefers-color-scheme; user override with
   the header toggle (persisted in localStorage).
---------------------------------------------- */
:root { accent-color: var(--moss-600); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1b13;
  --bg-alt: #12251a;
  --bg-raised: #1c3423;
  --surface: #16291f;
  --line: #2f4b38;
  --line-soft: #26402e;
  --ink-900: #e7eeda;
  --ink-700: #c1d0b3;
  --ink-500: #97aa90;
  --river-600: #7cc0cd;
  --quote-ink: #e7eeda;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 28px -10px rgba(0, 0, 0, .5);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .4), 0 28px 60px -18px rgba(0, 0, 0, .65);
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5,
[data-theme="dark"] strong { color: #eef4e0; }
[data-theme="dark"] .section--dark h2, [data-theme="dark"] .section--dark h3 { color: var(--cream-50); }
[data-theme="dark"] a { color: #9ccf92; text-decoration-color: color-mix(in srgb, #9ccf92 35%, transparent); }
[data-theme="dark"] a:hover { color: #bbe3b0; }
[data-theme="dark"] .eyebrow { color: var(--gold-400); }

[data-theme="dark"] .site-header { background: rgba(13, 27, 19, .88); }
[data-theme="dark"] .brand__name { color: #eef4e0; }
[data-theme="dark"] .brand__tag { color: var(--gold-400); }
[data-theme="dark"] .nav-list > li > a:hover,
[data-theme="dark"] .nav-list > li > button:hover,
[data-theme="dark"] .nav-list > li > a[aria-current="page"] { color: #eef4e0; }
[data-theme="dark"] .nav-list > li.has-dropdown > button[data-current] { color: #eef4e0; }
[data-theme="dark"] .dropdown a[aria-current="page"] { color: #eef4e0; }
[data-theme="dark"] .dropdown a:hover { color: #eef4e0; }
[data-theme="dark"] .alert-bar__text a { color: var(--pine-950); }
/* the blanket [data-theme="dark"] strong rule above repaints this near-white on
   the gold gradient; put back the daylight ink. The --danger variant keeps #fff
   through its own higher-specificity rule. */
[data-theme="dark"] .alert-bar__text strong { color: var(--pine-900); }
[data-theme="dark"] .alert-bar--danger .alert-bar__text a { color: #fff; }
[data-theme="dark"] a.btn--primary, [data-theme="dark"] a.btn--primary:hover { color: var(--cream-50); }
[data-theme="dark"] a.btn--gold, [data-theme="dark"] a.btn--gold:hover { color: var(--pine-950); }
[data-theme="dark"] a.btn--ghost-light, [data-theme="dark"] a.btn--ghost-light:hover { color: var(--cream-50); }
[data-theme="dark"] .nav-toggle span,
[data-theme="dark"] .nav-toggle::before,
[data-theme="dark"] .nav-toggle::after { background: #e7eeda; }
[data-theme="dark"] .icon-btn { color: var(--sage-200); }
[data-theme="dark"] .chip { color: var(--sage-200); }
[data-theme="dark"] .chip:hover { color: #eef4e0; }
[data-theme="dark"] .chip svg { color: var(--gold-400); }
[data-theme="dark"] .btn--outline { border-color: var(--sage-400); color: var(--sage-200); }
[data-theme="dark"] .btn--outline:hover { background: var(--pine-700); border-color: var(--pine-700); color: var(--cream-100); }
[data-theme="dark"] .text-link { color: #9ccf92; }
[data-theme="dark"] .quick-card h3 { color: #eef4e0; }
[data-theme="dark"] .quick-card__icon { color: var(--sage-200); }
[data-theme="dark"] .acc-btn { color: #eef4e0; }
[data-theme="dark"] .acc-ico { color: var(--sage-200); }
[data-theme="dark"] table.data td.num { color: #eef4e0; }
[data-theme="dark"] table.data--stack td:first-child { color: #eef4e0; }
[data-theme="dark"] table.data--stack td[data-label]::before { color: var(--gold-400); }
[data-theme="dark"] .field label { color: #e2ecd2; }

/* no placeholder colour was declared anywhere, so the search field fell back to
   the user-agent grey (#757575 in Chromium), which fails in both themes */
::placeholder { color: var(--ink-500); opacity: 1; }
[data-theme="dark"] .pay-summary dd,
[data-theme="dark"] .confirm-no { color: #eef4e0; }
[data-theme="dark"] .radio-card input:checked + label { background: #1d3a27; }
[data-theme="dark"] .search-result b { color: #eef4e0; }
[data-theme="dark"] .news-card__tag,
[data-theme="dark"] .person-card__role,
[data-theme="dark"] .tl-year,
[data-theme="dark"] .quick-card__go { color: var(--gold-400); }
[data-theme="dark"] .news-card__date { background: rgba(13, 27, 19, .92); color: #eef4e0; }
[data-theme="dark"] .event-row__body h3 { color: #eef4e0; }
[data-theme="dark"] .callout--red { background: #2c1713; }
[data-theme="dark"] .status-chip--ok { background: #14301f; border-color: #2c5237; color: #82ce92; }
[data-theme="dark"] .badge--green { background: #1c3a26; color: #9ed3a4; }
[data-theme="dark"] .badge--red { background: #3a1d17; color: #e79a8c; }
[data-theme="dark"] .section--topo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23cfe0c0' stroke-opacity='.045' stroke-width='1.4'%3E%3Cpath d='M0 84c60-26 96-60 168-48s96 56 168 44 84-40 84-40'/%3E%3Cpath d='M0 168c70-20 110-64 190-50s86 60 160 46 70-34 70-34'/%3E%3Cpath d='M0 252c60-30 104-54 180-44s100 52 170 42 70-30 70-30'/%3E%3Cpath d='M0 336c66-24 100-58 176-46s96 54 172 42 72-36 72-36'/%3E%3C/g%3E%3C/svg%3E");
}

/* NOTE: the hero sky is no longer theme-driven — it follows the real
   clock via the living-sky system (section 25 + assets/js/sky.js). */

.scene-fireflies { display: none; }
.scene-fireflies circle {
  fill: #ffe9a0;
  opacity: 0;
  transform-box: fill-box;
  animation: firefly 5s ease-in-out infinite;
}
.scene-fireflies circle:nth-child(2) { animation-delay: 1.1s; animation-duration: 6s; }
.scene-fireflies circle:nth-child(3) { animation-delay: 2.3s; animation-duration: 4.4s; }
.scene-fireflies circle:nth-child(4) { animation-delay: 3.2s; animation-duration: 5.6s; }
.scene-fireflies circle:nth-child(5) { animation-delay: .6s; animation-duration: 6.4s; }
.scene-fireflies circle:nth-child(6) { animation-delay: 1.8s; animation-duration: 4.8s; }
@keyframes firefly {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50% { opacity: .95; transform: translateY(-7px); }
}

/* the page-hero ridge inherits the page background in both themes */
.ridge svg path[fill="#fbf8f1"] { fill: var(--bg); }

/* header theme toggle */
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* ----------------------------------------------
   23. MODERN MOTION — progressive enhancements
   (view transitions, scroll-driven animation,
   cursor spotlight, staggered word reveal)
---------------------------------------------- */

/* Cross-document view transitions: page-to-page crossfade */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Typography niceties (no-ops where unsupported) */
h1, h2, h3, .display-1, .display-2 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Scroll-driven: hero landscape parallax + interior branch drift */
@supports (animation-timeline: scroll()) {
  .hero__scene svg { animation: hero-parallax linear both; animation-timeline: scroll(); animation-range: 0 90vh; }
  @keyframes hero-parallax { to { transform: translateY(2.6rem); } }

  .page-hero__branch { animation: branch-drift linear both; animation-timeline: scroll(); animation-range: 0 60vh; }
  @keyframes branch-drift { to { transform: translateY(1.6rem) rotate(3deg); } }

  /* timeline entries step in as they enter the viewport */
  .tl-item { animation: tl-in ease both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes tl-in { from { opacity: 0; transform: translateX(16px); } }

  /* reading-progress ring around back-to-top */
  .to-top__ring circle { animation: ring-progress linear both; animation-timeline: scroll(root); }
  @keyframes ring-progress { to { stroke-dashoffset: 0; } }

  @media (prefers-reduced-motion: reduce) {
    .hero__scene svg, .page-hero__branch, .tl-item { animation: none; }
  }
}

.to-top__ring {
  position: absolute;
  inset: .18rem;
  /* explicit size — SVGs with auto dimensions collapse unpredictably
     when absolutely positioned (the ring huddled in the corner on iOS) */
  width: calc(100% - .36rem);
  height: calc(100% - .36rem);
  transform: rotate(-90deg);
  pointer-events: none;
}
.to-top__ring circle {
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* Cursor spotlight on cards — a soft gold glow that follows the pointer */
@media (hover: hover) and (pointer: fine) {
  .card, .quick-card { position: relative; }
  .card::after, .quick-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(9rem circle at var(--mx, 50%) var(--my, 50%), rgba(217, 178, 87, .18), transparent 62%);
    opacity: 0;
    transition: opacity .35s var(--ease-out);
  }
  .card:hover::after, .quick-card:hover::after { opacity: 1; }
}

/* ----------------------------------------------
   24. LIVING SEASONS — the hero follows the calendar
   data-season set by JS: spring | summer | autumn | winter
   Summer is the base golden-hour art; the others tint it.
---------------------------------------------- */
/* The LAND follows the calendar (tint on the scene wrapper so it
   composes with the sky-phase filter applied to the SVG itself) */
[data-season="spring"] .hero__scene { filter: hue-rotate(9deg) saturate(1.08); }
[data-season="autumn"] .hero__scene { filter: sepia(.16) hue-rotate(-11deg) saturate(1.02); }
[data-season="winter"] .hero__scene { filter: saturate(.55) brightness(1.04); }

/* drifting particles */
.hero__season {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  display: none;
}
[data-season="autumn"] .hero__season,
[data-season="winter"] .hero__season,
[data-season="spring"] .hero__season { display: block; }
.hero__season span {
  position: absolute;
  top: -3%;
  left: calc(var(--x) * 1%);
  animation-duration: calc(10s + var(--d) * 1.4s);
  animation-delay: calc(var(--d) * -3.2s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
[data-season="autumn"] .hero__season span {
  width: .58rem; height: .58rem;
  background: var(--gold-500);
  border-radius: 68% 0 68% 0;
  opacity: .85;
  animation-name: fall-leaf;
}
[data-season="autumn"] .hero__season span:nth-child(3n) { background: #a5652e; }
[data-season="autumn"] .hero__season span:nth-child(4n) { background: #8a7a2c; }
[data-season="winter"] .hero__season span {
  width: .3rem; height: .3rem;
  background: #fff;
  border-radius: 50%;
  opacity: .9;
  box-shadow: 0 0 4px rgba(255, 255, 255, .8);
  animation-name: fall-snow;
}
[data-season="winter"] .hero__season span:nth-child(2n) { width: .2rem; height: .2rem; opacity: .7; }
[data-season="spring"] .hero__season span {
  width: .42rem; height: .3rem;
  background: #fdfaef;
  border-radius: 50%;
  opacity: .8;
  animation-name: drift-seed;
}
@keyframes fall-leaf {
  to { transform: translateY(52rem) translateX(3.5rem) rotate(560deg); }
}
@keyframes fall-snow {
  50% { transform: translateY(26rem) translateX(1.6rem); }
  to  { transform: translateY(52rem) translateX(-1rem); }
}
@keyframes drift-seed {
  to { transform: translateY(52rem) translateX(6rem) rotate(40deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__season { display: none !important; }
}

/* Interactive county map — town markers light up and link out */
.map-town { cursor: pointer; }
.map-town circle,
.map-town path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--speed) var(--ease-out), fill var(--speed) var(--ease-out), stroke var(--speed) var(--ease-out);
}
.map-town text { transition: fill var(--speed) var(--ease-out); }
.map-town:hover circle,
.map-town:focus-visible circle { transform: scale(1.55); fill: var(--gold-400); }
.map-town--seat:hover path,
.map-town--seat:focus-visible path { transform: scale(1.3); }
.map-town:hover text,
.map-town:focus-visible text { fill: #a23b2e; }
.map-town:focus-visible { outline: none; }
/* The map keeps its own light paper fill in both themes, so its ring takes
   gold-700 directly rather than the theme-aware token: 4.48:1 against the
   land it covers, up from 2.23:1. */
.map-town:focus-visible circle,
.map-town:focus-visible path { stroke: var(--gold-700); stroke-width: 3; }

/* Hero headline: word-by-word blur-in (spans added by JS; skipped for reduced motion) */
.hero__title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em);
  filter: blur(8px);
  animation: word-in .75s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 70ms + 80ms);
}
@keyframes word-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title .w { animation: none; opacity: 1; transform: none; filter: none; }
}

/* ----------------------------------------------
   25. THE LIVING SKY — the hero follows the real
   sun and moon over Lonoke County.
   assets/js/sky.js computes solar position, moon
   phase, and the county-activity heartbeat, then
   sets data-sky on <html> plus the custom props:
     --cel-x / --cel-y   sun arc position (0..1)
     --moon-x / --moon-y moon arc position (0..1)
     --glint-x           water glint tracks the light
   Phases: dawn · day · golden (default art) · dusk · night
---------------------------------------------- */

/* celestial tracks (defaults reproduce the golden-hour art without JS) */
.hero__scene-svg--wide .scene-sun-track {
  transform: translate(calc(var(--cel-x, .807) * 1340px + 50px), calc(320px - var(--cel-y, .576) * 250px)) scale(var(--sun-scale, 1));
  transition: transform 2s linear;
}
.hero__scene-svg--narrow .scene-sun-track {
  transform: translate(calc(var(--cel-x, .807) * 380px + 25px), calc(118px - var(--cel-y, .576) * 95px)) scale(var(--sun-scale, 1));
  transition: transform 2s linear;
}
.hero__scene-svg--wide .scene-moon-track {
  transform: translate(calc(var(--moon-x, .5) * 1340px + 50px), calc(320px - var(--moon-y, .9) * 250px));
  transition: transform 2s linear;
}
.hero__scene-svg--narrow .scene-moon-track {
  transform: translate(calc(var(--moon-x, .5) * 380px + 25px), calc(118px - var(--moon-y, .9) * 95px));
  transition: transform 2s linear;
}
.hero__scene-svg--wide .scene-glint-track {
  transform: translateX(calc(var(--glint-x, .807) * 1340px + 50px - 1122px));
  transition: transform 2s linear;
}
.hero__scene-svg--narrow .scene-glint-track {
  transform: translateX(calc(var(--glint-x, .807) * 380px + 25px - 374px));
  transition: transform 2s linear;
}

/* visibility per phase */
.scene-moon-track, .scene-stars { display: none; }
[data-sky="night"] .scene-sun-track { display: none; }
[data-sky="night"] .scene-moon-track,
[data-sky="night"] .scene-stars { display: block; }
[data-sky="dusk"] .scene-stars { display: block; opacity: .45; }
[data-sky="dusk"] .scene-sun-track,
[data-sky="dawn"] .scene-sun-track { display: none; }
[data-sky="night"] .scene-flock { display: none; }
[data-sky="night"] .scene-skyglow { display: none; }
[data-sky="day"] .scene-skyglow { opacity: .35; }
[data-sky="night"] .scene-glint { stroke: #dce6f0; opacity: .4; }
[data-sky="dusk"] .scene-glint,
[data-sky="dawn"] .scene-glint { opacity: .18; }
[data-sky="night"] .scene-cloud { opacity: .12; }
[data-sky="dusk"] .scene-cloud { opacity: .3; }

.scene-stars circle { animation: star-twinkle 3.6s ease-in-out infinite; }
.scene-stars circle:nth-child(2n) { animation-delay: -1.3s; animation-duration: 4.4s; }
.scene-stars circle:nth-child(3n) { animation-delay: -2.5s; animation-duration: 5.1s; }
@keyframes star-twinkle {
  0%, 100% { opacity: .9; }
  50% { opacity: .35; }
}

/* sky gradients + land light per phase ("golden" = the base art) */
[data-sky="day"] .hero {
  background: linear-gradient(180deg, #e0eef0 0%, #e9f1da 45%, #f3edc8 72%, #f3e4ae 100%);
}
[data-sky="day"] .hero__scene svg { filter: saturate(1.04) brightness(1.03); }

[data-sky="dawn"] .hero {
  background: linear-gradient(180deg, #33323f 0%, #5f4c49 40%, #b97f5e 70%, #eec389 100%);
}
[data-sky="dawn"] .hero__scene svg { filter: brightness(.82) saturate(.9) hue-rotate(6deg); }

[data-sky="dusk"] .hero {
  background: linear-gradient(180deg, #232733 0%, #4a3d3a 42%, #8c5a39 70%, #d99a4e 100%);
}
[data-sky="dusk"] .hero__scene svg { filter: brightness(.7) saturate(.92) sepia(.08); }

[data-sky="night"] .hero {
  background: linear-gradient(180deg, #0a1418 0%, #0e1c1c 45%, #14261e 75%, #1b3122 100%);
}
[data-sky="night"] .hero__scene svg { filter: brightness(.52) saturate(.62) hue-rotate(-8deg); }

/* hero text flips light when the sky is dark */
[data-sky="dawn"] .hero__title, [data-sky="dusk"] .hero__title, [data-sky="night"] .hero__title { color: #eef4e0; }
[data-sky="dawn"] .hero__title em, [data-sky="dusk"] .hero__title em, [data-sky="night"] .hero__title em { color: #a7cd8f; }
[data-sky="dawn"] .hero__lead, [data-sky="dusk"] .hero__lead, [data-sky="night"] .hero__lead,
[data-sky="dawn"] .hero__meta, [data-sky="dusk"] .hero__meta, [data-sky="night"] .hero__meta { color: #c6d3b8; }
[data-sky="dawn"] .hero__meta svg, [data-sky="dusk"] .hero__meta svg, [data-sky="night"] .hero__meta svg { color: var(--sage-400); }
[data-sky="dawn"] .hero__eyebrow, [data-sky="dusk"] .hero__eyebrow, [data-sky="night"] .hero__eyebrow {
  background: rgba(10, 20, 16, .55);
  border-color: rgba(217, 178, 87, .4);
  color: var(--sage-200);
}
[data-sky="dawn"] .hero .btn--outline, [data-sky="dusk"] .hero .btn--outline, [data-sky="night"] .hero .btn--outline {
  border-color: var(--sage-400);
  color: var(--sage-200);
}
[data-sky="dawn"] .hero .btn--outline:hover, [data-sky="dusk"] .hero .btn--outline:hover, [data-sky="night"] .hero .btn--outline:hover {
  background: var(--pine-700);
  border-color: var(--pine-700);
  color: var(--cream-100);
}

/* fireflies belong to warm nights (never a January hallucination) */
[data-sky="night"][data-season="summer"] .scene-fireflies,
[data-sky="night"][data-season="spring"] .scene-fireflies,
[data-sky="dusk"][data-season="summer"] .scene-fireflies { display: block; }

@media (prefers-reduced-motion: reduce) {
  .scene-sun-track, .scene-moon-track, .scene-glint-track { transition: none; }
}

/* ----------------------------------------------
   26. WEATHER-TRUE SKIES — real Lonoke conditions
   sky.js fetches the National Weather Service
   forecast for the county (cached ~30 min) and sets
   data-wx: clear | clouds | overcast | rain | storm | snow | fog
   data-wind: calm | breezy | windy
---------------------------------------------- */
.hero__rain, .hero__fog, .hero__flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

/* rain streaks */
.hero__rain { z-index: 2; overflow: hidden; }
[data-wx="rain"] .hero__rain,
[data-wx="storm"] .hero__rain { display: block; }
.hero__rain span {
  position: absolute;
  top: -6%;
  left: calc(var(--x) * 1%);
  width: 2px;
  height: 1.15rem;
  border-radius: 2px;
  background: linear-gradient(rgba(116, 146, 154, 0), rgba(116, 146, 154, .65));
  animation: rain-fall linear infinite;
  animation-duration: calc(.85s + var(--d) * .07s);
  animation-delay: calc(var(--d) * -.35s);
  will-change: transform;
}
[data-wx="storm"] .hero__rain span { height: 1.4rem; animation-duration: calc(.65s + var(--d) * .05s); }
@keyframes rain-fall {
  to { transform: translateY(58rem) translateX(-1.6rem); }
}

/* fog wash — doubles as the grey mood-wash for wet weather */
.hero__fog {
  z-index: 2;
  background: linear-gradient(180deg, rgba(236, 238, 230, .08), rgba(236, 238, 230, .4) 68%, rgba(236, 238, 230, .16));
}
[data-wx="fog"] .hero__fog { display: block; }
[data-wx="overcast"] .hero__fog,
[data-wx="rain"] .hero__fog,
[data-wx="storm"] .hero__fog {
  display: block;
  background: linear-gradient(180deg, rgba(74, 86, 92, .16), rgba(74, 86, 92, .24) 60%, rgba(74, 86, 92, .1));
}
[data-wx="storm"] .hero__fog {
  background: linear-gradient(180deg, rgba(52, 62, 70, .3), rgba(52, 62, 70, .34) 60%, rgba(52, 62, 70, .14));
}
[data-wx="fog"] .scene-mist { opacity: .6; }

/* distant lightning */
.hero__flash { z-index: 3; background: #e9edf4; opacity: 0; }
[data-wx="storm"] .hero__flash { display: block; animation: lightning 11s linear infinite; }
@keyframes lightning {
  0%, 96.2%, 97.6%, 100% { opacity: 0; }
  96.6% { opacity: .16; }
  97% { opacity: .05; }
  97.3% { opacity: .2; }
}

/* grey cloud banks & dimmed light */
.scene-wxclouds { display: none; }
[data-wx="clouds"] .scene-wxclouds,
[data-wx="overcast"] .scene-wxclouds,
[data-wx="rain"] .scene-wxclouds,
[data-wx="storm"] .scene-wxclouds,
[data-wx="snow"] .scene-wxclouds { display: block; }
[data-wx="clouds"] .scene-wxclouds { opacity: .45; }
[data-wx="storm"] .scene-wxclouds { opacity: .95; }

[data-wx="overcast"] .scene-sun-track,
[data-wx="rain"] .scene-sun-track,
[data-wx="storm"] .scene-sun-track,
[data-wx="snow"] .scene-sun-track { opacity: .3; }
[data-wx="clouds"] .scene-sun-track { opacity: .7; }
[data-wx="overcast"] .scene-skyglow,
[data-wx="rain"] .scene-skyglow,
[data-wx="storm"] .scene-skyglow,
[data-wx="snow"] .scene-skyglow,
[data-wx="fog"] .scene-skyglow { display: none; }
[data-wx="overcast"] .scene-glint,
[data-wx="rain"] .scene-glint,
[data-wx="storm"] .scene-glint,
[data-wx="fog"] .scene-glint { display: none; }
[data-wx="rain"] .scene-moon-track,
[data-wx="storm"] .scene-moon-track,
[data-wx="overcast"] .scene-moon-track,
[data-wx="fog"] .scene-moon-track { opacity: .25; }
[data-wx="rain"] .scene-stars,
[data-wx="storm"] .scene-stars,
[data-wx="overcast"] .scene-stars,
[data-wx="fog"] .scene-stars { display: none !important; }

/* live snow overrides the seasonal drift styling */
[data-wx="snow"] .hero__season { display: block; }
[data-wx="snow"] .hero__season span {
  width: .3rem; height: .3rem;
  background: #fff;
  border-radius: 50%;
  opacity: .9;
  box-shadow: 0 0 4px rgba(255, 255, 255, .8);
  animation-name: fall-snow;
}

/* wind: reeds, clouds, and drift respond */
[data-wind="breezy"] .scene-reed { animation-duration: 4.6s; }
[data-wind="windy"] .scene-reed { animation-duration: 3s; }
[data-wind="breezy"] .scene-cloud { animation-duration: 70s; }
[data-wind="windy"] .scene-cloud { animation-duration: 46s; }
[data-wind="breezy"] .scene-cloud--two { animation-duration: 95s; }
[data-wind="windy"] .scene-cloud--two { animation-duration: 62s; }
[data-wind="windy"] .hero__season span { animation-duration: calc(6s + var(--d) * 1s); }

/* sunrise/sunset & conditions note in the hero meta */
.hero__sky-note svg { color: var(--gold-600) !important; }
[data-sky="dawn"] .hero__sky-note svg,
[data-sky="dusk"] .hero__sky-note svg,
[data-sky="night"] .hero__sky-note svg { color: var(--gold-400) !important; }

@media (prefers-reduced-motion: reduce) {
  .hero__rain, .hero__flash { display: none !important; }
}

/* =====================================================
   22. LIVING DATA — rivers, markets & burn status
   Components for pages that read public feeds (USGS,
   NWS water, USDA via data/*.json). Everything renders
   a sensible static state with JS off.
   ===================================================== */

/* data provenance line under any live block */
.data-note {
  font-size: .8rem;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.data-note svg { width: .95em; height: .95em; flex: none; color: var(--moss-500); }
.data-note a { color: inherit; }

/* live gauge card — a big reading with context */
.gauge-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.6rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.gauge-card__name {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.gauge-card__name svg { width: 1.05rem; height: 1.05rem; color: var(--moss-500); flex: none; }
.gauge-card__value {
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--pine-900);
  font-variant-numeric: tabular-nums;
}
.gauge-card__value small {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-500);
  margin-left: .3rem;
}
.gauge-card__sub { font-size: .86rem; color: var(--ink-500); }
.gauge-card--offline .gauge-card__value { color: var(--ink-500); font-size: 1.35rem; font-family: var(--font-body); font-weight: 600; }

/* 7-day sparkline */
.spark { width: 100%; height: 54px; margin-top: .4rem; overflow: visible; }
.spark path.line { fill: none; stroke: var(--moss-500); stroke-width: 2; stroke-linecap: round; }
.spark path.fill { fill: var(--moss-500); opacity: .12; stroke: none; }
.spark circle { fill: var(--gold-600); }
.spark text { font: 600 .58rem var(--font-body); fill: var(--ink-500); }

/* regional flood-outlook strip */
.flood-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: .8rem 1.1rem;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.flood-row:first-child { border-top: 0; }
.flood-row__name { font-weight: 700; color: var(--pine-900); min-width: 0; }
.flood-row__name small { display: block; font-weight: 500; color: var(--ink-500); font-size: .78rem; }
.flood-row__reading { font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--ink-700); text-align: right; }
.flood-row__reading small { display: block; color: var(--ink-500); font-size: .76rem; }

.flood-chip {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .28rem .7rem;
  border-radius: 99px;
  border: 1px solid;
  white-space: nowrap;
}
.flood-chip--ok { background: #e9f3e9; border-color: #bcd8bd; color: var(--ok-600); }
.flood-chip--action { background: #fbf2dd; border-color: #e7d3a2; color: var(--gold-700); }
.flood-chip--flood { background: #f7e4de; border-color: #e4b3a6; color: #a23b2e; }
.flood-chip--major { background: #a23b2e; border-color: #a23b2e; color: #fdf3ec; }
.flood-chip--na { background: var(--bg-alt); border-color: var(--line-soft); color: var(--ink-500); }

/* burn-ban + unknown status chips (extends .status-chip) */
.status-chip--danger { background: #f7e4de; border-color: #e4b3a6; color: #a23b2e; }
.status-chip--danger .dot { background: #a23b2e; box-shadow: 0 0 0 4px rgba(162, 59, 46, .18); }
.status-chip--muted { background: var(--bg-alt); border-color: var(--line-soft); color: var(--ink-500); }
.status-chip--muted .dot { background: var(--ink-500); box-shadow: 0 0 0 4px rgba(90, 96, 88, .15); }

/* --attention is "we could not read the status"; --muted is "we have not
   looked yet", which is what the pages ship in their static markup. The
   two must not look alike, and each label says which is which without
   relying on colour. gold-700 is the text-safe gold: 4.86:1 on #fbf2dd. */
.status-chip--attention { background: #fbf2dd; border-color: var(--gold-600); color: var(--gold-700); }
.status-chip--attention .dot { background: var(--gold-700); box-shadow: 0 0 0 4px rgba(138, 99, 24, .2); }

/* markets: futures board rows */
.futures-board { display: grid; gap: .6rem; }
.futures-row {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .85rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.futures-row__label { font-weight: 700; color: var(--pine-900); min-width: 9.5rem; }
.futures-row__label small { color: var(--ink-500); font-weight: 600; margin-left: .35rem; }
.futures-row__months { display: flex; gap: 1rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; font-size: .88rem; }
.futures-row__months span { color: var(--ink-700); }
.futures-row__months small { display: block; color: var(--ink-500); font-size: .72rem; }

/* markets: at-a-glance price tiles */
.price-tile {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.35rem 1.5rem;
}
.price-tile__crop { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.price-tile__price {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--pine-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.price-tile__price small { font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--ink-500); }
.price-tile__delta { font-size: .84rem; font-weight: 700; }
.price-tile__delta.up { color: var(--ok-600); }
.price-tile__delta.down { color: #a23b2e; }
.price-tile__delta.flat { color: var(--ink-500); }
.price-tile__sub { font-size: .8rem; color: var(--ink-500); margin-top: .15rem; }

/* hero burn-ban notice chip (shown only when data says active) */
.hero__burn-note {
  display: none;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 700;
  color: #a23b2e;
}
[data-burnban="active"] .hero__burn-note { display: inline-flex; }

/* dark theme */
[data-theme="dark"] .gauge-card,
[data-theme="dark"] .price-tile,
[data-theme="dark"] .futures-row { background: var(--surface); border-color: var(--line-soft); }
[data-theme="dark"] .gauge-card__value,
[data-theme="dark"] .price-tile__price,
[data-theme="dark"] .futures-row__label,
[data-theme="dark"] .flood-row__name { color: #eef4e0; }
[data-theme="dark"] .flood-chip--ok { background: #14301f; border-color: #2c5237; color: #82ce92; }
[data-theme="dark"] .flood-chip--action { background: #332a10; border-color: #57451a; color: var(--gold-400); }
[data-theme="dark"] .flood-chip--flood { background: #3a1a14; border-color: #6e3327; color: #eba28f; }
[data-theme="dark"] .flood-chip--na { background: var(--bg-alt); border-color: var(--line-soft); color: var(--sage-200); }
[data-theme="dark"] .status-chip--danger { background: #3a1a14; border-color: #6e3327; color: #eba28f; }
[data-theme="dark"] .status-chip--muted { color: var(--sage-200); }
[data-theme="dark"] .status-chip--attention { background: #332a10; border-color: #57451a; color: var(--gold-400); }
[data-theme="dark"] .price-tile__delta.up { color: #82ce92; }
[data-theme="dark"] .price-tile__delta.down { color: #eba28f; }
[data-theme="dark"] .spark text { fill: var(--sage-200); }

/* burn-ban beacon in the hero — hidden unless data/burnban.json says active */
.scene-burnfire { display: none; }
[data-burnban="active"] .scene-burnfire { display: block; }
.scene-burnfire__flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: burn-flicker 1.4s ease-in-out infinite;
}
.scene-burnfire__smoke {
  animation: smoke-breathe 6s ease-in-out infinite;
}
@keyframes burn-flicker {
  0%, 100% { transform: scale(1) skewX(0deg); }
  30% { transform: scale(1.06, 1.12) skewX(-2deg); }
  55% { transform: scale(.97, .94) skewX(1.5deg); }
  75% { transform: scale(1.03, 1.06) skewX(-1deg); }
}
@keyframes smoke-breathe {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50% { opacity: .38; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-burnfire__flame, .scene-burnfire__smoke { animation: none; }
}

/* almanac forecast strip */
/* today's NWS narrative, above the strip it belongs to */
.wx-narrative {
  max-width: 46rem;
  margin: 0 0 var(--space-5);
  color: var(--ink-700);
  line-height: 1.7;
}
.wx-narrative[hidden] { display: none; }

.wx-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: .8rem;
}
.wx-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.2rem;
  min-width: 0;
}
.wx-card--night { background: var(--bg-alt); }
.wx-card__name { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); }
.wx-card__temp { margin: .15rem 0 0; font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--pine-900); line-height: 1.1; }
.wx-card__temp small { font-family: var(--font-body); font-size: .78rem; font-weight: 600; color: var(--ink-500); }
.wx-card__short { margin: .2rem 0 0; font-size: .86rem; color: var(--ink-700); }
.wx-card__wind, .wx-card__rain { margin: .15rem 0 0; font-size: .76rem; color: var(--ink-500); }
.wx-card__rain { color: var(--river-600); font-weight: 600; }
[data-theme="dark"] .wx-card__temp { color: #eef4e0; }

/* sun & moon fact tiles reuse .gauge-card; the moon disc */
.moon-disc { width: 36px; height: 36px; flex: none; }

/* =====================================================
   23. PRINT — people print the directory; make it clean
   ===================================================== */
@media print {
  .topbar, .alert-bar, .site-header, .nav-scrim, footer, .to-top,
  .search-overlay, .page-hero__branch, .page-hero__chips, .ridge,
  .footer-ridge, .breadcrumb, .hero__scene, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .page-hero { background: none; padding: 0 0 .5rem; }
  .page-hero__title { color: #000; font-size: 20pt; }
  .page-hero__lead, .eyebrow { color: #333; }
  .section { padding-block: .8rem; }
  .card, .tile, .gauge-card, .table-wrap { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; }
  table.data th, table.data td { padding: .35rem .6rem; }
  a { color: #000; text-decoration: none; }
  /* phone numbers stay visible; URLs would be noise */
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* the bayou tracks the real gauge — county-data.js sets --bayou-rise
   in scene pixels (negative = higher water) from USGS 07264000 */
.scene-water { transition: transform 2.5s ease; }
.hero__scene-svg--wide .scene-water { transform: translateY(calc(var(--bayou-rise, 0) * 1px)); }
.hero__scene-svg--narrow .scene-water { transform: translateY(calc(var(--bayou-rise, 0) * .45px)); }
@media (prefers-reduced-motion: reduce) { .scene-water { transition: none; } }

/* =====================================================
   24. SKY-TRUE HERO INK
   The hero's sky follows the real day/night cycle, so its
   text must follow the SKY — not the site theme. (Classic
   failure: Prairie Dusk theme lightens all headings while
   the real noon sky stays pale — cream on cream.) The ink
   mixes gradually toward night tones per sky phase and
   eases through each change. Binary rules above remain as
   the fallback for browsers without color-mix().
   ===================================================== */
@supports (color: color-mix(in oklab, red, blue)) {
  .hero {
    /* 0% = bright sky (dark ink) … 100% = night sky (cream ink) */
    --sky-mix: 0%;
    /* literal daylight inks, NOT tokens — the Prairie Dusk theme
       re-lightens the tokens, which is exactly the bug this fixes */
    --hero-ink: color-mix(in oklab, #113424, #eef4e0 var(--sky-mix));
    --hero-ink-em: color-mix(in oklab, #235f40, #a7cd8f var(--sky-mix));
    --hero-ink-soft: color-mix(in oklab, #3b483b, #c6d3b8 var(--sky-mix));
  }
  [data-sky="golden"] .hero { --sky-mix: 12%; }
  [data-sky="dawn"] .hero,
  [data-sky="dusk"] .hero { --sky-mix: 85%; }
  [data-sky="night"] .hero { --sky-mix: 100%; }

  .hero .hero__title { color: var(--hero-ink); transition: color 1.4s ease; }
  .hero .hero__title em { color: var(--hero-ink-em); transition: color 1.4s ease; }
  .hero .hero__lead,
  .hero .hero__meta { color: var(--hero-ink-soft); transition: color 1.4s ease; }
  .hero .hero__meta svg { color: color-mix(in oklab, #40704c, #9db383 var(--sky-mix)); }
  .hero .btn--outline {
    color: var(--hero-ink);
    border-color: color-mix(in oklab, var(--hero-ink), transparent 30%);
    transition: color 1.4s ease, border-color 1.4s ease, background var(--speed) var(--ease-out);
  }
}

/* =====================================================
   25. OFFICE CONTACT CARDS — .footer-contact reused on
       light cards (department pages) needs readable links
   ===================================================== */
.card .footer-contact a { color: var(--pine-700); font-weight: 600; }
.card .footer-contact a:hover { color: var(--pine-900); }
[data-theme="dark"] .card .footer-contact a { color: #9ccf92; }
[data-theme="dark"] .card .footer-contact a:hover { color: #bbe3b0; }

/* =====================================================
   26. WIDE MONITORS — the hero scene svg is 1440x540
       (height = 37.5vw), so past ~2000px wide it outgrows
       the padding-driven hero and climbs behind the header.
       Let the hero grow to hold the whole scene, capped so
       it still fits the viewport on ultrawide aspect ratios.
   ===================================================== */
@media (min-width: 1600px) {
  .hero { min-height: min(calc(37.5vw + 3rem), calc(100svh - 5rem)); }
}

/* =====================================================
   27. TEXT SPACING AT 320px — SC 1.4.12
       html and body are overflow-x: clip, so content
       that overflows the viewport is not scrolled to,
       it is destroyed.
   ===================================================== */

/* With the SC 1.4.12 metrics applied at 320px, the bare domain in the
   jury-duty callout on circuit-clerk.html is a single unbreakable token
   wider than the callout. overflow-wrap: normal forces the container
   past the viewport instead of wrapping, taking the heading with it.
   `anywhere` also lets the container shrink back inside the viewport,
   which `break-word` does not — that is why it is not the value used on
   .footer-contact li > span above, where the container is already
   constrained by min-width: 0. */
.callout { overflow-wrap: anywhere; }

/* =====================================================
   27. LIVE ALERTS PANEL — fire.html#preparedness
   ===================================================== */
.alerts-panel { margin-top: 1.8rem; padding: 1.4rem 1.5rem; border-radius: 1rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: var(--cream-50); }
.alerts-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.alerts-panel__head h3 { margin: 0; color: var(--cream-50); font-size: 1.15rem; }
.alerts-panel__stamp { font-size: .85rem; color: var(--sage-400); }
.alerts-panel__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.alerts-panel__list:empty { margin: 0; }
.alerts-panel__item { display: grid; gap: .3rem; padding: .9rem 1rem; border-radius: .75rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.alerts-panel__item--danger { background: rgba(170, 40, 40, .3); border-color: rgba(255, 130, 130, .45); }
.alerts-panel__event { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-weight: 700; }
.alerts-panel__badge { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 999px; background: var(--gold-400); color: var(--pine-950); }
.alerts-panel__item--danger .alerts-panel__badge { background: #ffb4b4; }
.alerts-panel__item p { margin: 0; font-size: .93rem; color: var(--sage-200); }
.alerts-panel__empty, .alerts-panel__err { margin: 1rem 0 0; color: var(--sage-200); }
.alerts-panel__foot { margin: 1rem 0 0; font-size: .8rem; color: var(--sage-400); }
.alerts-panel a { color: var(--gold-400); }