/* East Glenville Fire District — public site
   Values are taken exactly from the approved design (see README.md).
   Flat by design: borders, not shadows. Minimal motion. */

:root {
  --red:         #9e1b25;
  --red-hover:   #85161e;
  --red-tint:    #e6cdcf;
  --red-wash:    #f7ecec;

  --ink:         #1f1d1a;
  --ink-2:       #3a3833;
  --body:        #54514a;
  /* Corrected 2026-09-07, first full accessibility audit (see DESIGN.md and
     ACCESSIBILITY-AUDIT.md): the README's original --muted (#7a766e) and
     --faint (#9a958c) both failed WCAG AA's 4.5:1 for normal text — faint as
     low as 2.66:1 on the page background. Both are used only as small text
     color, never as a border or background, so both were safe to correct
     directly. There isn't room under AA for two distinct legible gray tiers
     at these sizes, so both now resolve to the same corrected value — kept
     as two tokens rather than merged into one, since they're still used in
     semantically different places and a future change to either shouldn't
     have to touch both call sites.  4.74:1 on the page background, 5.30:1 on
     white cards — both comfortably clear 4.5:1, not just barely. */
  --muted:       #6f6b64;
  --faint:       #6f6b64;

  --ground:      #f4f2ee;
  --surface:     #fff;
  --banner:      #e9e6df;
  --row-hover:   #faf8f4;
  --ghost:       #f0efea;

  --rule:        #e6e3dc;
  --rule-strong: #d8d6d0;
  --rule-light:  #f0eee8;
  --rule-lighter:#f3f1eb;
  --divider:     #ececec;

  --gold:        #ffd166;
  --gold-text:   #3a2a00;

  /* Warning brown from README's palette — used only for the public "Draft,
     not yet approved" badge. Same value the admin console already uses. */
  --warning:      #b5651d;
  --warning-tint: #e8d3ba;
  --warning-wash: #fbeee0;

  /* Success green from README's palette, for the contact form's confirmation
     message — first public use of it. Same value the admin console uses. */
  --good:      #2e8b57;
  --good-wash: #e5f3ea;

  --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --container: 1160px;
  --gutter: 32px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--red); color: #fff; }

img { max-width: 100%; height: auto; }

a { color: var(--red); }

button { font: inherit; cursor: pointer; }

/* Every interactive thing gets a visible focus ring. The footer claims
   WCAG 2.1 AA, so this is not optional.
   Corrected 2026-09-07: gold alone measures 1.29:1 against the page
   background and 1.44:1 against white cards — nowhere near the 3:1 WCAG
   1.4.11 needs for a non-text UI indicator, on the two most common
   backgrounds on the whole site. Gold stays (it reads at 5.5-11.7:1 against
   the red nav and the dark footer/sidebar, and it's the design's named focus
   colour), but it now sits inside a thin dark ring that does the actual
   contrast work on light backgrounds. On dark backgrounds the dark ring is
   simply invisible against its own background, which is fine — gold was
   already carrying the job there. See ACCESSIBILITY-AUDIT.md.

   ⚠ Keep this selector list complete. It was written as a list of the
   elements that existed in 2026-09, and the FAQ page's <summary> controls
   (built 2026-09-18) silently fell outside it and shipped with a 1.44:1
   ring — see ADVERSARIAL-AUDIT.md A1. `summary`, `textarea` and anything
   given an explicit tabindex are focusable too; if a new focusable element
   type appears, add it here rather than styling it separately. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--ink);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Available to screen readers, invisible on screen. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ skip link -- */
.skip {
  position: absolute; left: 16px; top: 8px; z-index: 50;
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 4px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transform: translateY(-140%);
  transition: transform .15s;
}
.skip:focus { transform: translateY(0); }

/* --------------------------------------------------------------- banner -- */
.gov-banner {
  background: var(--banner);
  border-bottom: 1px solid #ddd9d0;
  padding: 8px 0;
}
.gov-banner .container { display: flex; align-items: center; gap: 9px; }
.gov-banner .mark {
  width: 13px; height: 13px; flex-shrink: 0;
  border: 2px solid #6a665e; border-radius: 2px;
}
.gov-banner p { margin: 0; font-size: 12.5px; color: #54514a; }

/* ------------------------------------------------------------- masthead -- */
.masthead { background: var(--surface); border-bottom: 1px solid var(--rule); }
.masthead .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 20px; padding-bottom: 20px;
}
.masthead-id {
  display: flex; align-items: center; gap: 18px;
  text-decoration: none; color: inherit;
}
/* Shared by the real patch image and the "nothing uploaded yet" placeholder.
   Every use is either <img class="patch"> or <span class="patch"> — masthead,
   admin sidebar, sign-in, set-password and the Site Settings preview — so the
   two rules below can safely split on the element. */
.patch {
  width: 58px; height: 58px; flex-shrink: 0;
  border-radius: 8px;
  /* Uncropped by request — show the whole patch rather than filling and
     clipping a circle. A square image (matching the upload guidance) fills
     this edge to edge either way; a non-square one would letterbox instead
     of losing content. */
  object-fit: contain;
}
/* The real patch is a transparent PNG, so it sits directly on whatever is
   behind it — the white masthead, the dark admin sidebar. Ross's call
   2026-09-06, after seeing it against a white tile. Nothing may be painted
   here: any background or border shows through the transparent corners
   around the shield, which is exactly the bug this replaced — the img was
   inheriting the placeholder's grey stripes and wearing them as a box. */
img.patch { background: none; border: 0; }
/* Only the empty state gets the grey "no image here yet" box. It is supposed
   to look unfinished — that is how an editor knows the patch is missing. */
span.patch {
  border: 1px solid #e0e0e0;
  background: repeating-linear-gradient(45deg,#ededed,#ededed 6px,#f6f6f6 6px,#f6f6f6 12px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 8px; color: #9a9a9a;
  text-align: center; line-height: 1.15;
}
.masthead-title {
  display: block;
  font-size: 23px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1; color: var(--ink); margin: 0;
}
.masthead-tagline {
  display: block;
  font-size: 13px; color: #6b675f; margin: 5px 0 0;
}
.masthead-contact {
  text-align: right; font-size: 12.5px; color: #54514a;
  line-height: 1.6; white-space: nowrap;
}
.masthead-contact .tel { font-weight: 700; color: var(--ink); text-decoration: none; }

/* ------------------------------------------------------------------ nav -- */
.primary-nav { background: var(--red); }
.primary-nav .nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: stretch;
}
/* Donate sits after the links on desktop; on mobile it moves ahead of the
   collapsed menu so it stays reachable without opening it. */
.nav-links { display: flex; align-items: stretch; order: 1; }
.nav-spacer { order: 2; }
.nav-donate { order: 3; }
.primary-nav a {
  position: relative;
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 600;
  padding: 14px 17px;
  display: flex; align-items: center;
}
.primary-nav a:hover { background: var(--red-hover); }
.primary-nav a:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.primary-nav a.nav-current::after {
  content: ""; position: absolute;
  left: 14px; right: 14px; bottom: 0; height: 3px;
  background: var(--gold); border-radius: 2px 2px 0 0;
}
.nav-spacer { flex: 1; }
.nav-donate {
  background: var(--gold); color: var(--gold-text) !important;
  font-weight: 800; border-radius: 3px;
  margin: 7px 0 7px 8px; padding: 0 20px !important;
}
.nav-donate:hover { filter: brightness(.94); background: var(--gold) !important; }

.nav-toggle { display: none; }

/* "About" drop-down — a button, not a link, so it isn't both a navigation
   target and a disclosure toggle at once. /about itself is the first item
   inside the menu. Opens on :hover and :focus-within (works with JS off);
   footer.php's script only adds click-to-toggle and Escape-to-close. */
.nav-item { position: relative; display: flex; }
.nav-trigger {
  position: relative;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  color: #fff; font-size: 14px; font-weight: 600;
  padding: 14px 17px; display: flex; align-items: center; gap: 6px;
}
.nav-trigger:hover { background: var(--red-hover); }
.nav-trigger:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.nav-trigger .chev { font-size: 10px; line-height: 1; transform: translateY(1px); }
.nav-trigger[data-section-active="true"]::after {
  content: ""; position: absolute;
  left: 14px; right: 14px; bottom: 0; height: 3px;
  background: var(--gold); border-radius: 2px 2px 0 0;
}
.nav-menu {
  position: absolute; top: 100%; left: 0; min-width: 264px; z-index: 20;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--rule-strong); border-top: 3px solid var(--gold);
  border-radius: 0 0 5px 5px;
  display: none;
}
.nav-item:hover .nav-menu,
.nav-item.open .nav-menu { display: block; }
/* :focus-within is the no-JS fallback only — footer.php marks <html> as soon
   as it runs, so once JS is active, Escape can actually close the menu.
   Without that gate, returning focus to the button after Escape (required
   below) would immediately re-satisfy :focus-within and the menu would stay
   visibly open with aria-expanded="false" — a real mismatch, found by testing
   the live build, not a hypothetical. */
html:not(.js-nav) .nav-item:focus-within .nav-menu { display: block; }
.nav-menu a {
  display: block; padding: 9px 12px; border-radius: 3px;
  color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.nav-menu a:hover { background: var(--rule-lighter); color: var(--red); }
.nav-menu a:focus-visible {
  outline: 3px solid var(--gold); outline-offset: -3px;
  /* The dropdown itself sits on a white background, unlike the two red-bar
     rules above — needs the same dark ring the general fix uses. */
  box-shadow: 0 0 0 2px var(--ink);
}
.nav-menu li + li { margin-top: 1px; }
.nav-menu .divider { height: 1px; background: var(--rule); margin: 5px 8px; }

/* ----------------------------------------------------------------- main -- */
main { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--red);
  margin: 0 0 16px;
}

h1 {
  font-size: 36px; font-weight: 800; letter-spacing: -0.025em;
  color: var(--ink); margin: 0 0 18px; text-wrap: balance;
}
h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 0; }

.page-intro {
  font-size: 16px; color: var(--body); line-height: 1.55;
  max-width: 62ch; margin: 0 0 28px;
}

.page-head { padding: 44px 0 0; }

/* ----------------------------------------------------------------- hero -- */
.hero {
  padding: 48px 0 40px;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px;
  align-items: start;
  border-bottom: 1px solid var(--rule);
}
.hero h1 {
  font-size: 42px; line-height: 1.04; margin-bottom: 18px;
}
.hero-body {
  font-size: 16.5px; color: var(--body); line-height: 1.55;
  max-width: 48ch; margin: 0;
}
.hero-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 14px 24px; border-radius: 3px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  border: none;
}
.btn:hover { filter: brightness(.94); }
.btn-primary { background: var(--red); color: #fff; }
.btn-secondary {
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--rule-strong);
}

.next-meeting {
  border: 1.5px solid #e0ded8; border-radius: 5px;
  overflow: hidden; background: var(--surface);
}
.next-meeting .head {
  background: var(--ink); color: #fff; padding: 12px 20px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.next-meeting .body { padding: 24px 22px; }
.next-meeting .when {
  font-size: 31px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1; color: var(--ink);
}
.next-meeting hr {
  border: 0; height: 1px; background: var(--divider); margin: 18px 0;
}
.next-meeting .note { font-size: 14px; color: var(--body); line-height: 1.55; margin: 0; }
.next-meeting .type {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin: 0 0 8px;
}
.next-meeting .agenda-link {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 14px;
  border: 1px solid var(--rule); border-radius: 5px; background: var(--surface);
  color: var(--red); font-weight: 700; font-size: 14px; text-decoration: underline; min-height: 44px;
}
.next-meeting .agenda-link:hover { color: var(--red-hover); }
.next-meeting .agenda-link .meta { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 12px; text-decoration: none; white-space: nowrap; }
.next-meeting .also { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--divider); }
.next-meeting .also h3 {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--body); margin: 0 0 10px;
}
.next-meeting .also p { font-size: 14px; color: var(--body); line-height: 1.5; margin: 0 0 10px; }
.next-meeting .also strong { color: var(--ink); }

/* --------------------------------------------------------- quick links -- */
.section { padding: 38px 0; border-bottom: 1px solid var(--rule); }
.section-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 18px;
}

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.quick-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 5px;
  padding: 18px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color .12s ease, transform .12s ease;
}
.quick-card:hover { border-color: var(--red); transform: translateY(-1px); }
.quick-card .row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.quick-card .label { font-size: 16px; font-weight: 700; color: var(--ink); }
.quick-card .arrow { color: var(--red); font-weight: 700; }
.quick-card .meta { font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------ two lists -- */
.two-col {
  padding: 38px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
  border-bottom: 1px solid var(--rule);
}
.col-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px; gap: 16px;
}
.view-all { font-size: 13px; font-weight: 700; color: var(--red); text-decoration: none; }

.mini-row {
  display: flex; gap: 16px; align-items: baseline;
  padding: 13px 6px; border-top: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.mini-row:hover { background: var(--row-hover); }
.mini-row .date {
  font-family: var(--mono); font-size: 12.5px; color: var(--faint);
  min-width: 80px; white-space: nowrap;
}
.mini-row .title { font-size: 15px; font-weight: 500; color: var(--ink); }

/* ---------------------------------------------------------------- pills -- */
.year-filter {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px;
}
.pill {
  font-size: 13.5px; font-weight: 700;
  padding: 8px 16px; border-radius: 20px;
  border: 1.5px solid var(--rule-strong); background: var(--surface);
  color: var(--ink); text-decoration: none;
}
.pill:hover { border-color: var(--red); }
.pill[aria-current="true"] {
  background: var(--red); border-color: var(--red); color: #fff;
}
.year-select {
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  padding: 8px 14px; border-radius: 20px;
  border: 1.5px solid var(--rule-strong); background: var(--surface);
}
.minutes-search {
  margin-left: auto; display: flex; gap: 8px;
}
.minutes-search input {
  font-family: var(--sans); font-size: 13.5px;
  padding: 8px 14px; border-radius: 20px;
  border: 1.5px solid var(--rule-strong); background: var(--surface);
  color: var(--ink); min-width: 200px;
}

/* -------------------------------------------------------- records lists -- */
.record-list {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 6px; overflow: hidden; margin-top: 14px;
}
.record-row {
  display: flex; gap: 20px; align-items: baseline;
  padding: 16px 22px; border-top: 1px solid var(--rule-light);
  text-decoration: none; color: inherit;
}
.record-row:first-child { border-top: none; }
.record-row:hover { background: var(--row-hover); }
.record-row .date {
  font-family: var(--mono); font-size: 13px; color: var(--body);
  min-width: 120px; white-space: nowrap;
}
.record-row .title { flex: 1; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.record-row .get {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--red); white-space: nowrap;
}
.chip {
  font-family: var(--mono); font-size: 11px;
  border: 1px solid var(--red-tint); border-radius: 3px;
  padding: 2px 6px; color: var(--red);
}
.record-row .size { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

.empty {
  background: var(--surface); border: 1px dashed var(--rule-strong);
  border-radius: 6px; padding: 34px 24px; text-align: center;
  color: var(--muted); font-size: 15px; margin-top: 14px;
}
.empty strong { color: var(--ink); display: block; margin-bottom: 6px; font-size: 16px; }

/* ---------------------------------------------------------- draft badge -- */
/* Draft records are public (see content.php) — this is what tells a resident
   the document isn't the Board-approved final version yet. Warning brown,
   not red: it's a status, not an error, and red is the brand colour here. */
.draft-badge {
  display: inline-block; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--warning); border: 1px solid var(--warning-tint);
  background: var(--warning-wash);
  border-radius: 3px; padding: 2px 7px;
}
.draft-note {
  border-left: 3px solid var(--warning); background: var(--warning-wash);
  padding: 12px 16px; border-radius: 0 4px 4px 0;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
  max-width: 66ch; margin: 0 0 24px;
}
.draft-note strong { color: var(--ink); }

/* -------------------------------------------------------- board / members -- */
/* Scoped to .page-head, not a bare `h2` rule — home.php's two-column heads
   put an h2 in a flex row with "View all" and depend on the zero margin
   the base h2 rule sets. */
.page-head h2 { margin: 0 0 14px; }
.section-sub { font-size: 14px; color: var(--muted); margin: 0 0 14px; }

.people-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-bottom: 34px;
}
.person-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 20px 22px; display: flex; align-items: center; gap: 18px;
}
.person-card .name { font-size: 17px; font-weight: 700; color: var(--ink); }
.person-card .role { font-size: 13.5px; color: var(--red); font-weight: 600; margin-top: 2px; }
.person-card .term { font-size: 12.5px; color: var(--faint); margin-top: 2px; }

.avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.avatar.ph {
  background: repeating-linear-gradient(45deg,#efefef,#efefef 5px,#f7f7f7 5px,#f7f7f7 10px);
  border: 1px solid #e4e4e4; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 7px; color: #b0aca3; text-align: center; line-height: 1.15;
}

.officer-list {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  overflow: hidden; margin-bottom: 36px;
}
.officer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 22px; border-top: 1px solid var(--rule-light);
}
.officer-row:first-child { border-top: none; }
.officer-row .name { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.officer-row .role { font-size: 14px; color: var(--body); }

.officer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 36px; }
.officer-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 18px 20px;
}
.officer-card .role {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--red);
}
.officer-card .name { font-size: 17px; font-weight: 700; margin-top: 5px; color: var(--ink); }

.roster-grid {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 6px 8px; margin-bottom: 36px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px;
}
.roster-grid .entry {
  padding: 10px 14px; border-bottom: 1px solid var(--rule-lighter);
  display: flex; flex-direction: column; gap: 2px;
}
.roster-grid .entry .name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.roster-grid .entry .note { font-size: 11.5px; color: var(--faint); }

.name-grid {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 8px 8px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 8px;
}
.name-grid .entry {
  font-size: 14px; padding: 9px 14px; border-bottom: 1px solid var(--rule-lighter);
  color: var(--ink-2);
}

.footnote { font-size: 12.5px; color: var(--faint); margin-top: 12px; font-family: var(--mono); }

/* ------------------------------------------------------------- notices -- */
.notice-list { display: flex; flex-direction: column; gap: 14px; }
.notice-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 22px 24px; display: flex; gap: 22px; align-items: flex-start;
  text-decoration: none; color: inherit; transition: border-color .12s ease;
}
.notice-card:hover { border-color: var(--red); }
.notice-card .meta { text-align: center; flex-shrink: 0; min-width: 62px; }
.notice-card .title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.notice-card .desc { font-size: 14.5px; color: var(--body); line-height: 1.55; }
.notice-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--red); border: 1px solid var(--red-tint);
  border-radius: 3px; padding: 4px 8px; margin-bottom: 8px;
}
.notice-date { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.read-more { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--red); }

/* ----------------------------------------------------------------- about -- */
/* Direction B from about-mockup.html: map first in a dark-headed callout
   (the same treatment as the homepage's Next Meeting card, so the two read
   as one system), then running sections, then history in a box. */
.section { padding: 0 0 36px; }
.section p {
  font-size: 15.5px; color: var(--body); line-height: 1.65;
  max-width: 68ch; margin: 0 0 14px;
}
.section p:last-child { margin-bottom: 0; }

.callout {
  border: 1.5px solid #e0ded8; border-radius: 5px; overflow: hidden;
  background: var(--surface); margin-bottom: 34px; max-width: 620px;
}
.callout .head {
  background: var(--ink); color: #fff; padding: 12px 20px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.callout .body { padding: 20px 22px; }
.callout .body img {
  width: 100%; height: auto; display: block;
  border-radius: 3px; border: 1px solid var(--rule-light); margin-bottom: 12px;
}
.callout .body .cap {
  font-size: 12.5px; color: var(--faint);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.callout .body .cap a { font-weight: 700; }
.map-callout .map-open { display: block; }
.map-callout .map-button { display: none; }


.brief-history {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 22px 24px; max-width: 68ch;
}
.brief-history h2 { margin-bottom: 10px; }
.brief-history p { font-size: 14.5px; color: var(--body); line-height: 1.65; margin: 0; }

/* --------------------------------------------------------- get involved -- */
.involve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.involve-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 26px 24px; display: flex; flex-direction: column;
}
.involve-card h2 { font-size: 21px; margin-bottom: 8px; }
.involve-card p { font-size: 14.5px; color: var(--body); line-height: 1.55; flex: 1; margin: 0; }
.involve-card .btn { margin-top: 18px; align-self: flex-start; }

/* ------------------------------------------------------------------ faq -- */
/* Native <details>/<summary> — the open/close behaviour needs no JavaScript
   and comes with keyboard and screen-reader support built in. See
   faq-mockup.html (Option A, approved 2026-09-18) for why this was chosen
   over an always-visible flat list. */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.faq-item { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 22px; font-size: 16px; font-weight: 700;
  color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { color: var(--red); font-size: 13px; transition: transform .15s; flex-shrink: 0; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item summary:hover { background: var(--ground); }
/* Gold alone measures 1.44:1 against the white card these sit on — nowhere
   near the 3:1 WCAG 1.4.11 requires of a focus indicator, and <summary> is
   not covered by the global focus rule above (that rule lists a/button/
   input/select). Found 2026-09-18, the day this page was built, by
   ADVERSARIAL-AUDIT.md.
   The halo has to be *inset* here, unlike everywhere else on the site: the
   .faq-item card sets overflow:hidden, which would clip an outside
   box-shadow away to nothing. So the ink ring sits at the outer 3px and the
   gold ring just inside it — the ink does the contrast work against the
   card (16.81:1), the gold stays the design's named focus colour. */
.faq-item summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 3px var(--ink);
}
.faq-item .answer-wrap:has(.answer) { padding-top: 14px; border-top: 1px solid var(--rule); margin: 0 22px; }
.faq-item .answer { font-size: 14.5px; color: var(--body); line-height: 1.6; margin: 0 0 20px; }
.faq-item .faq-link { display: inline-block; margin: 0 22px 20px; font-size: 13.5px; font-weight: 700; color: var(--red); text-decoration: none; }
.faq-item .faq-link:hover { text-decoration: underline; }

/* -------------------------------------------------------- text pages -- */
.prose { max-width: 70ch; }
.prose h2 { font-size: 20px; margin: 32px 0 12px; }
.prose p { font-size: 15.5px; color: var(--body); line-height: 1.6; margin: 0 0 14px; }
.prose ul { padding-left: 22px; margin: 0 0 16px; }
.prose li { font-size: 15.5px; color: var(--body); line-height: 1.6; margin-bottom: 8px; }

/* --------------------------------------------------------------- footer -- */
footer {
  background: var(--ink); color: #cfcabf; margin-top: 8px;
}
.footer-top {
  max-width: var(--container); margin: 0 auto;
  padding: 40px var(--gutter) 28px;
  display: flex; justify-content: space-between; gap: 40px;
  flex-wrap: wrap; align-items: flex-start;
}
.footer-name { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.footer-contact { font-size: 13.5px; line-height: 1.8; margin: 0; }
.footer-contact a { color: #cfcabf; }
.footer-links { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
/* h2, not h3: these are the first headings after the <h1> on any page
   whose body has no <h2> of its own (/faq, /minutes, /notices,
   /scholarship), and an h1 -> h3 jump breaks the document outline
   screen-reader users navigate by. ADVERSARIAL-AUDIT.md A3. Visual
   size is set here, so nothing about the design changes. */
.footer-col h2 { color: #fff; font-weight: 700; font-size: 13.5px; margin: 0; letter-spacing: normal; }
.footer-col a { color: #cfcabf; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-bar {
  border-top: 1px solid #38342e;
  max-width: var(--container); margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; color: #8d887e;
}
.footer-bar a { color: #cfcabf; }

/* --------------------------------------------------------- contact form -- */
/* District red, not the warning-brown used elsewhere for Draft badges — a
   fire department's contact form will eventually be used by somebody having
   a bad day, per CONTACT-FORM-PLAN.md, and red reads as more urgent. */
.emergency {
  border: 1px solid var(--red-tint); border-left: 5px solid var(--red);
  background: var(--red-wash); border-radius: 5px;
  padding: 16px 18px; margin: 0 0 28px; max-width: 78ch;
}
.emergency strong { display: block; color: var(--red); font-size: 15.5px; font-weight: 800; margin-bottom: 4px; }
.emergency p { margin: 0; font-size: 14px; color: var(--body); line-height: 1.55; }

.flash-good {
  background: var(--good-wash); border: 1px solid #bfe0cc; border-left: 5px solid var(--good);
  border-radius: 5px; padding: 16px 18px; margin: 0 0 22px; max-width: 78ch;
}
.flash-good strong { display: block; color: var(--good); font-size: 15.5px; font-weight: 800; margin-bottom: 3px; }
.flash-good p { margin: 0; font-size: 14px; color: var(--body); }

.banner-warn {
  background: var(--warning-wash); border: 1px solid var(--warning-tint);
  color: var(--warning); border-radius: 5px; padding: 14px 18px;
  font-size: 14.5px; font-weight: 600; margin: 0 0 22px; max-width: 78ch;
}

.contact-grid { display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start; }

/* Public records / FOIL block on the Contact page. Flat like everything else
   — borders, no shadows. Four short panels rather than one wall of legal
   text, because a resident looking for "how long will this take" should find
   it without reading the whole thing. ADVERSARIAL-AUDIT.md N1. */
.records-body { max-width: 70ch; font-size: 15px; color: var(--body); margin: 0 0 22px; }
.records-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 6px;
  overflow: hidden;
}
.records-panel { background: var(--surface); padding: 18px 20px; }
.records-panel h3 {
  margin: 0 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.records-panel p { margin: 0; font-size: 14.5px; color: var(--ink); line-height: 1.55; }
.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 24px 26px;
}
.card h2 { margin: 0 0 4px; }
.card-lede { margin: 0 0 20px; font-size: 13.5px; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 17px; }
.field label {
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.req { color: var(--red); text-transform: none; }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--surface);
  padding: 10px 12px; border: 1.5px solid var(--rule-strong); border-radius: 4px; width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--muted);
  box-shadow: 0 0 0 5px var(--ink);
}
.field .help { font-size: 12.5px; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.field .err { font-size: 12.5px; color: var(--red); font-weight: 600; }

.form-foot { display: flex; align-items: center; gap: 16px; margin-top: 4px; flex-wrap: wrap; }
.form-foot .note { font-size: 12.5px; color: var(--muted); }

/* Off-screen, not display:none — some bots skip fields hidden that way. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aside h3 {
  margin: 0 0 10px; font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.aside .line { font-size: 14.5px; color: var(--ink); margin: 0 0 3px; }
.aside .line a { color: var(--red); text-decoration: none; font-weight: 600; }
.aside .line.small { font-size: 14px; }
.aside .sub { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.aside .divider { height: 1px; background: var(--rule); margin: 18px 0; }

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .involve-grid { grid-template-columns: repeat(2, 1fr); }
  .officer-grid { grid-template-columns: repeat(2, 1fr); }
  .roster-grid { grid-template-columns: repeat(2, 1fr); }
  .name-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Nav collapses to a disclosure just above the general phone breakpoint.
   Re-measured 2026-09-06 when About/Contact took the nav from nine top-level
   items to six: measuring real bounding boxes on the live site (not font
   metrics, which were wrong by over 100px last time — see FIXES.md/ROADMAP
   #52) found six items plus Donate actually collide with each other at
   722px, almost the same width as the general 720px phone breakpoint below —
   nowhere near the 820-900px this file's own plan guessed. 780px keeps a
   real ~58px safety margin above that measured collision point rather than
   cutting it at the exact edge. Donate stays reachable without opening the
   menu. */
@media (max-width: 780px) {
  .primary-nav .nav-inner { flex-wrap: wrap; padding: 0 20px; }
  .nav-toggle {
    display: flex; align-items: center; gap: 9px;
    background: none; border: 0; color: #fff;
    font-size: 14px; font-weight: 700; padding: 13px 0;
  }
  .nav-links {
    display: none; width: 100%; flex-direction: column;
    border-top: 1px solid rgba(255,255,255,.15);
  }
  .primary-nav.open .nav-links { display: flex; }
  .primary-nav a { padding: 12px 0; }
  .primary-nav a.nav-current::after { left: 0; right: auto; width: 26px; }
  .nav-spacer { display: none; }
  .nav-donate {
    order: -1; margin: 7px 0 7px auto; padding: 9px 18px !important;
  }

  /* The drop-down becomes a plain indented list under "About" rather than a
     second pop-up to find — see CONTACT-FORM-PLAN.md's Mobile section. */
  .nav-item { flex-direction: column; }
  .nav-trigger { width: 100%; justify-content: space-between; padding: 12px 0; }
  .nav-trigger[data-section-active="true"]::after { left: 0; right: auto; width: 26px; }
  .nav-menu {
    display: block; position: static; width: 100%; min-width: 0;
    background: none; border: 0; border-radius: 0; margin: 0; padding: 0 0 8px 18px;
  }
  .nav-menu a { color: rgba(255,255,255,.85); padding: 8px 0; }
  .nav-menu a:hover, .nav-menu a:focus-visible { background: none; color: #fff; }
  .nav-menu a.nav-current { color: #fff; font-weight: 800; }
  .nav-menu .divider { background: rgba(255,255,255,.15); margin: 6px 0; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  /* Phone map: a thumb-sized button replaces the small "View full size" link. */
  .map-callout .map-button {
    display: block; text-align: center; background: var(--red); color: #fff;
    font-weight: 700; font-size: 15px; text-decoration: none;
    padding: 13px 16px; min-height: 44px; border-radius: 5px; margin-bottom: 12px;
  }
  .map-callout .map-button:hover { background: var(--red-hover); }
  .map-callout .cap a { display: none; }

  .masthead .container { flex-direction: column; align-items: flex-start; gap: 14px; }
  .masthead-contact { text-align: left; white-space: normal; }
  .masthead-title { font-size: 20px; }

  .hero h1 { font-size: 30px; }
  h1 { font-size: 27px; }
  .card-grid { grid-template-columns: 1fr; }

  .record-row { flex-wrap: wrap; gap: 6px 14px; padding: 14px 16px; }
  .record-row .date { min-width: 0; }
  .record-row .title { flex-basis: 100%; order: 3; }
  .record-row .get { margin-left: auto; }

  .minutes-search { margin-left: 0; width: 100%; }
  .minutes-search input { min-width: 0; flex: 1; }

  .footer-links { gap: 28px; }

  /* Every multi-column grid collapses to one at phone width — except
     Inactive Life Members, which stays two-up so a 21-name list doesn't
     turn into a very long single column. */
  .people-grid { grid-template-columns: 1fr; }
  .officer-grid { grid-template-columns: 1fr; }
  .roster-grid { grid-template-columns: 1fr; }
  .involve-grid { grid-template-columns: 1fr; }

  .notice-card { flex-direction: column; gap: 10px; }
  .notice-card .meta { text-align: left; display: flex; align-items: center; gap: 10px; }

  .contact-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}