/* =========================================================================
   Brookline Fire Protection District
   =========================================================================

   Contents
     1.  Design tokens
     2.  Reset and base
     3.  Typography
     4.  Layout primitives
     5.  Accessibility helpers
     6.  Header and navigation
     7.  Hero
     8.  Bands (hazard, emergency, stats)
     9.  Page header
     10. Sections and prose
     11. Cards
     12. Feature and CTA bands
     13. Content components
     14. Tables, FAQ, notices
     15. Footer
     16. Privacy banner
     17. Motion
     18. Responsive
     20. Event announcement

   Two constraints govern everything here:

   * The site runs under a strict Content-Security-Policy with no
     'unsafe-inline'. Every style lives in this file — never a <style> block
     or a style="" attribute.
   * Nothing may depend on JavaScript to become visible. Reveal animations
     are CSS-only and always finish at the visible state.
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */

:root {
  /* Brand red, extended into a usable scale. --red is the original #c00. */
  --red-900: #4a0000;
  --red-800: #6e0000;
  --red-700: #8a0000;
  --red-600: #a80000;
  --red: #c00000;
  --red-400: #d92626;

  /* Brand cream. --cream is the original #ffeeba. */
  --cream: #ffeeba;
  --cream-600: #f2d98a;


  /* Neutrals */
  --ink: #14141a;
  --ink-2: #1e1e26;
  --ink-3: #2c2c37;
  --slate: #5a5a66;
  --line: #e3e3ea;
  --paper: #ffffff;
  --paper-2: #f7f7fa;
  --paper-3: #eeeef4;

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --wrap: 1180px;
  --measure: 68ch;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* Layered shadows read as depth; a single flat shadow reads as a border. */
  --shadow-1: 0 1px 2px rgba(20, 20, 26, 0.06), 0 2px 8px rgba(20, 20, 26, 0.06);
  --shadow-2: 0 2px 4px rgba(20, 20, 26, 0.06), 0 8px 24px rgba(20, 20, 26, 0.10);
  --shadow-3: 0 8px 16px rgba(20, 20, 26, 0.10), 0 24px 56px rgba(20, 20, 26, 0.16);
  --shadow-red: 0 10px 30px rgba(192, 0, 0, 0.28);

  --nav-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================================
   2. RESET AND BASE
   ========================================================================= */

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

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the fixed header. */
  scroll-padding-top: calc(var(--nav-h) + var(--s-4));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper-2);
  /* Belt and braces against horizontal scroll on small screens. */
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

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


/* =========================================================================
   3. TYPOGRAPHY
   ========================================================================= */

h1, h2, h3, h4 {
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); font-weight: 900; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }
h4 { font-size: 1.05rem; }

p { margin-bottom: var(--s-4); }

strong { font-weight: 700; }

/* Small uppercase label that sits above a heading. */
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-700);
  margin-bottom: var(--s-3);
}

.eyebrow--light { color: var(--cream); }

/* Red rule under a section heading. */
.rule::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-top: var(--s-4);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--red), var(--red-400));
}

.rule--center::after { margin-left: auto; margin-right: auto; }

.lead {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--slate);
}


/* =========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================= */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.band {
  padding-block: clamp(var(--s-7), 6vw, var(--s-9));
}

.band--tight { padding-block: var(--s-7); }
.band--paper { background: var(--paper); }
.band--alt { background: var(--paper-3); }

.band--dark {
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(192, 0, 0, 0.35), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, #241014 55%, var(--red-900) 100%);
  color: #fff;
}

.band--dark h1,
.band--dark h2,
.band--dark h3 { color: #fff; }

.band--dark p { color: rgba(255, 255, 255, 0.86); }

/* Content pages keep .container as their main wrapper. */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin: var(--s-7) auto var(--s-8);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

.grid { display: grid; gap: var(--s-5); }

.section {
  margin-bottom: var(--s-7);
  scroll-margin-top: calc(var(--nav-h) + var(--s-4));
}

.section:last-child { margin-bottom: 0; }


/* =========================================================================
   5. ACCESSIBILITY HELPERS
   ========================================================================= */

.skip-link {
  position: absolute;
  top: -60px;
  left: var(--s-4);
  z-index: 300;
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top 0.15s var(--ease);
}

.skip-link:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
  border-radius: 2px;
}

body > header nav a:focus-visible,
body > header nav button:focus-visible {
  outline-color: var(--cream);
}


/* =========================================================================
   6. HEADER AND NAVIGATION
   ========================================================================= */

/* Direct child of body only. `.page-head` on interior pages is also a
   <header>, and a bare selector would fix-position it over the content. */
body > header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
}

/* Scoped to the header. A bare `nav` selector also catches the footer's
   <nav> landmark, which then inherits the red bar and flex layout. */
body > header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: var(--nav-h);
  padding-inline: clamp(var(--s-4), 3vw, var(--s-6));
  background: linear-gradient(180deg, var(--red-800) 0%, var(--red-900) 100%);
  border-bottom: 3px solid var(--red);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.42);
}

.logo a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.nav-logo-img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.logo-main {
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fff;
}

.logo-sub {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  /* Solid white: at 0.8 alpha this measured 4.32:1, under the 4.5:1 minimum. */
  color: #fff;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links > li { position: relative; }

.nav-links > li > a,
.dropdown-toggle {
  display: block;
  padding: var(--s-2) var(--s-3);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Without this the labels break mid-phrase and the bar grows to two rows. */
  white-space: nowrap;
  color: #fff;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.nav-links > li > a:hover,
.dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--cream);
}

/* Marks the page you are on. sync-nav.ps1 sets aria-current. */
.nav-links a[aria-current="page"] {
  color: var(--cream);
  background: rgba(0, 0, 0, 0.28);
}

.dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  margin-left: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s var(--ease);
}

.dropdown.active .dropdown-toggle::after {
  transform: translateY(1px) rotate(-135deg);
}

.dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 250px;
  padding: var(--s-2);
  list-style: none;
  background: var(--paper);
  border-radius: var(--r-md);
  border-top: 4px solid var(--red);
  box-shadow: var(--shadow-3);
  z-index: 101;
}

/* Keeps the pointer from falling through the gap above the panel. */
.dropdown-content::before {
  content: "";
  position: absolute;
  inset: -14px 0 100% 0;
}

/* WCAG 1.4.13 requires content revealed on hover to be dismissable without
   moving the pointer. Pressing Escape sets .hover-off on the header, which
   suppresses the hover rule until the pointer next moves — a submenu can then
   be dismissed over a link the user is trying to read past. */
body > header:not(.hover-off) .dropdown:hover .dropdown-content,
.dropdown.active .dropdown-content { display: block; }

/* With no JavaScript the toggle button cannot fire, so focus alone opens the
   panel. With JS, script.js drives .active instead. */
html:not(.js) .dropdown:focus-within .dropdown-content { display: block; }

.dropdown-content a {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.dropdown-content a:hover {
  background: var(--red);
  color: #fff;
}

.members-nav-btn > a {
  margin-left: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--cream);
  color: var(--red-800);
  border-radius: 999px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
}

.members-nav-btn > a:hover {
  background: #fff;
  color: var(--red-800);
  transform: translateY(-1px);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  /* 44px minimum touch target. */
  padding: 11px 9px;
  background: none;
  border: 0;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}


/* =========================================================================
   7. HERO
   ========================================================================= */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(92vh, 820px);
  padding: calc(var(--nav-h) + var(--s-7)) 0 var(--s-8);
  background: url('images/firefighter-hero.jpg') center 30% / cover no-repeat var(--ink);
  color: #fff;
  isolation: isolate;
}

/* Two overlays: a vertical scrim for text contrast, and a red wash for warmth.
   The bottom stop is 0.9 so headline contrast holds over any photo. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(102deg, rgba(74, 0, 0, 0.55) 0%, transparent 62%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.58) 46%, rgba(10, 0, 0, 0.90) 100%);
}

.hero h1 {
  max-width: 16ch;
  margin-bottom: var(--s-4);
  color: #fff;
  font-size: clamp(2.6rem, 1.2rem + 6.2vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-shadow: 0 4px 34px rgba(0, 0, 0, 0.75);
}

.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--cream);
}

.hero-sub {
  max-width: 54ch;
  margin-bottom: var(--s-6);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

.hero .eyebrow {
  color: var(--cream);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
}

/* Stops after four passes rather than looping forever. WCAG 2.2.2 requires a
   way to pause, stop or hide motion that starts on its own and runs beyond
   five seconds; a hint that ends on its own needs no control, and it has done
   its job by then anyway. */
.hero-scroll::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: scroll-hint 1.8s var(--ease) 4;
}

@keyframes scroll-hint {
  0%   { opacity: 0; transform: translateY(0); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}


/* =========================================================================
   BUTTONS
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background 0.2s var(--ease), color 0.2s var(--ease);
}

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: var(--shadow-red);
}

.btn--primary:hover {
  background: var(--red-600);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(192, 0, 0, 0.42);
}

.btn--cream {
  background: var(--cream);
  color: var(--red-800);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
}

.btn--cream:hover {
  background: #fff;
  transform: translateY(-3px);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.btn--ghost:hover {
  background: #fff;
  color: var(--red-800);
  border-color: #fff;
  transform: translateY(-3px);
}

.btn--outline {
  background: transparent;
  color: var(--red-700);
  border-color: currentColor;
}

.btn--outline:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  transform: translateY(-3px);
}


/* =========================================================================
   8. BANDS
   ========================================================================= */

/* Diagonal chevrons, the reflective striping used on fire apparatus. Kept to
   a thin accent — at any real height it overwhelms the page. */
.hazard {
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--red) 0 22px,
    var(--cream) 22px 44px
  );
}

/* Emergency notice. A fire district's single most important message. */
.emergency {
  background: var(--ink);
  color: #fff;
  padding-block: var(--s-4);
}

.emergency .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  text-align: center;
}

.emergency p { margin: 0; font-size: 0.98rem; }

.emergency strong {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
}

.emergency svg { width: 20px; height: 20px; }

.emergency a {
  font-weight: 800;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Statistics */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--s-5);
  padding: var(--s-7) var(--s-5);
  background:
    radial-gradient(700px 200px at 50% 0%, var(--red-600), transparent 70%),
    linear-gradient(180deg, var(--red) 0%, var(--red-700) 100%);
  color: #fff;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: var(--s-4);
}

.stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.22); }

.stat-number {
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cream);
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.3);
}

.stat-label {
  margin-top: var(--s-2);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Full white, not 0.88 alpha, which measured 4.71:1 at this size. */
  color: #fff;
}


/* =========================================================================
   9. PAGE HEADER
   ========================================================================= */

.page-head {
  position: relative;
  padding: calc(var(--nav-h) + var(--s-7)) 0 var(--s-7);
  background:
    radial-gradient(900px 340px at 12% 0%, rgba(192, 0, 0, 0.45), transparent 62%),
    linear-gradient(150deg, var(--ink) 0%, #26121a 60%, var(--red-900) 100%);
  color: #fff;
  overflow: hidden;
}

/* Faint chevron texture, low enough not to fight the text. */
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background: repeating-linear-gradient(
    -45deg,
    #fff 0 2px,
    transparent 2px 16px
  );
  pointer-events: none;
}

.page-head .wrap { position: relative; }

.page-head h1 {
  color: #fff;
  margin-bottom: var(--s-4);
}

.page-head-sub {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  color: rgba(255, 255, 255, 0.88);
}

.page-head + .container {
  margin-top: calc(var(--s-6) * -1);
  position: relative;
  z-index: 2;
}


/* =========================================================================
   10. SECTIONS AND PROSE
   ========================================================================= */

/* Body copy is left-aligned and measure-limited. Centred paragraphs at this
   width are markedly harder to read, especially for dyslexic readers. */
.container p,
.container li {
  max-width: var(--measure);
}

.section > p,
.section > ul,
.section > ol {
  margin-inline: 0;
}

.section h2 {
  margin-bottom: var(--s-5);
}

ul, ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.35em;
}

/* Structural lists carry layout, not prose. `list-style: none` removes list
   semantics in Safari/VoiceOver, so it is scoped to these only. */
nav ul,
.board-members,
.popular-pages,
.footer-links,
.check-list {
  list-style: none;
  padding-left: 0;
}

li { margin-bottom: var(--s-2); }

li::marker { color: var(--red); }

/* Bulleted list with a check glyph, for requirements and benefits. */
.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--s-3);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--red);
  /* Check mark drawn with two borders on a rotated box. */
  box-shadow: inset 0 0 0 2px var(--red);
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.72em;
  width: 0.32rem;
  height: 0.6rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* WCAG 2.5.8 exempts links sized by the line-height of surrounding text, but a
   link that is the entire paragraph is a standalone control, not an inline
   one, so the exception does not cover it. */
p > a:only-child:not(.btn) {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
}

.container a:not(.btn):not(.faq-toggle) {
  color: var(--red-700);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s var(--ease);
}

.container a:not(.btn):not(.faq-toggle):hover {
  color: var(--red-400);
}

/* Two-column intro: prose beside a highlighted panel. */
.split {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: start;
}

.panel {
  padding: var(--s-6);
  background: var(--paper);
  border-radius: var(--r-lg);
  border-top: 5px solid var(--red);
  box-shadow: var(--shadow-2);
}

.panel h3 { margin-bottom: var(--s-4); }

.panel--dark {
  background: linear-gradient(160deg, var(--ink-2), var(--red-900));
  color: #fff;
  border-top-color: var(--cream);
}

.panel--dark h3 { color: var(--cream); }
.panel--dark p { color: rgba(255, 255, 255, 0.88); }


/* =========================================================================
   11. CARDS
   ========================================================================= */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--s-5);
}

/* Four cards under auto-fit land as 3 + 1 orphan at midrange widths.
   Stepping 1 -> 2 -> 4 keeps the last row full at every size. */
.cards--quad { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 1000px) {
  .cards--quad { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 620px) {
  .cards--quad { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 1px solid #d9d9e3;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
              border-color 0.28s var(--ease);
}

/* Accent bar that widens on hover. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--red), var(--red-700));
  transition: width 0.28s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow-3);
}

.card:hover::before { width: 7px; }

.card h3 { margin: 0; }

.card p {
  margin: 0;
  color: var(--slate);
  font-size: 0.98rem;
}

.card > a:last-child {
  margin-top: auto;
  padding-top: var(--s-2);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-700);
  text-decoration: none;
}

.card > a:last-child::after {
  content: " →";
  display: inline-block;
  transition: transform 0.2s var(--ease);
}

.card:hover > a:last-child::after { transform: translateX(5px); }

.card-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--s-2);
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--red), var(--red-700));
  color: #fff;
  box-shadow: var(--shadow-red);
}

.card-icon svg { width: 27px; height: 27px; }


/* =========================================================================
   12. FEATURE AND CTA BANDS
   ========================================================================= */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
}

.feature-figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}

.feature-figure img { width: 100%; }

.feature-stat {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.feature-stat b {
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cream);
}

.feature-stat span {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* Two-up call to action, e.g. career beside volunteer. */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--s-5);
}

.duo-item {
  position: relative;
  padding: clamp(var(--s-6), 4vw, var(--s-7));
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.duo-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-3);
}

.duo-item h3 { margin-bottom: var(--s-3); }

.duo-item p {
  color: var(--slate);
  margin-bottom: var(--s-5);
}

/* Legacy hook, still used by interior pages. */
.cta-section {
  padding: clamp(var(--s-6), 5vw, var(--s-8));
  border-radius: var(--r-lg);
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(192, 0, 0, 0.4), transparent 65%),
    linear-gradient(150deg, var(--ink) 0%, var(--red-900) 100%);
  color: #fff;
  text-align: center;
}

.cta-section h2 { color: var(--cream); margin-bottom: var(--s-4); }

.cta-section p {
  max-width: 58ch;
  margin-inline: auto;
  margin-bottom: var(--s-6);
  color: rgba(255, 255, 255, 0.9);
}


/* =========================================================================
   13. CONTENT COMPONENTS
   ========================================================================= */

/* --- Apparatus, stations, leadership: image beside text --- */
.apparatus,
.station,
.leadership-item {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.leadership-item { grid-template-columns: 170px 1fr; }

.apparatus:hover,
.station:hover,
.leadership-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.apparatus img,
.station img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--r-md);
}

.leadership-item img {
  width: 170px;
  height: 170px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--r-md);
}

.apparatus-info h3,
.station-info h3,
.leadership-info h3 {
  color: var(--red-700);
  margin-bottom: var(--s-3);
}

.apparatus-info p,
.station-info p,
.leadership-info p { margin-bottom: var(--s-2); }

/* An email address has nowhere to wrap, and on a phone the centred card
   grows to fit it: at 320px one pushed the page past the edge. anywhere
   lets it break so the card can shrink; break-word would not shrink it.
   Kept to these cards - the board members' cards size the same way, and
   there it wrapped addresses that already fit on desktop. */
.leadership-info a[href^="mailto:"] { overflow-wrap: anywhere; }

.leadership { display: block; }

/* --- Board members --- */
.board-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}

.board-members li {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.board-members li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.board-members img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  border: 4px solid var(--paper-3);
  margin-bottom: var(--s-4);
}

.board-member-info h3 { color: var(--red-700); margin-bottom: var(--s-2); }
.board-member-info p { margin: 0; max-width: none; font-size: 0.92rem; }

/* --- Divisions --- */
.divisions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--s-5);
}

.division-item { display: flex; }

.division-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--red);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.division-info:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-2);
}

.division-info h3 { color: var(--red-700); margin-bottom: var(--s-3); }
.division-info p { max-width: none; }

/* --- Timeline --- */
.timeline {
  position: relative;
  max-width: 900px;
  margin: var(--s-6) auto 0;
  padding: var(--s-5) 0;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, transparent, var(--red) 8%, var(--red) 92%, transparent);
}

/* Entries render immediately. These previously started at opacity 0 and were
   revealed by a scroll observer, so the whole page was blank without JS. */
.timeline-item {
  position: relative;
  width: calc(50% - 40px);
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.timeline-item:nth-child(even) { margin-left: calc(50% + 40px); }

.timeline-item::before {
  content: "";
  position: absolute;
  top: 26px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 3px var(--red);
}

.timeline-item:nth-child(odd)::before { right: -48px; }
.timeline-item:nth-child(even)::before { left: -48px; }

.timeline-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.timeline-item h3 {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--red);
  margin-bottom: var(--s-2);
}

.timeline-item p {
  margin: 0;
  max-width: none;
  font-size: 0.95rem;
  color: var(--slate);
}

/* --- Gallery --- */
.gallery { margin-top: var(--s-6); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--s-4);
}

.gallery-item {
  height: 220px;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.gallery-item:hover img { transform: scale(1.07); }

/* --- Photo placeholder. Decorative: the heading carries the meaning. --- */
.photo-pending {
  display: grid;
  place-items: center;
  width: 100%;
  height: 210px;
  padding: var(--s-4);
  border: 2px dashed #cbb2b2;
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(-45deg, #fbf6f6 0 10px, #f6eded 10px 20px);
  color: #7a5c5c;
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
}

.photo-pending.portrait { width: 170px; height: 170px; }

/* --- Events (training calendar, community classes) --- */

.event-list {
  list-style: none;
  padding-left: 0;
  margin: var(--s-5) 0;
}

.event {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
  background: var(--paper);
  border: 1px solid #d9d9e3;
  border-left: 4px solid var(--red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 68px;
  padding: var(--s-3) 0;
  background: linear-gradient(160deg, var(--red), var(--red-700));
  color: #fff;
  border-radius: var(--r-sm);
}

.event-day { font-size: 1.7rem; font-weight: 900; line-height: 1; }

.event-mon {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-top: 2px;
}

.event-body { display: block; }

.event-title {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
}

.event-meta {
  display: block;
  margin-top: var(--s-1);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red-700);
}

.event-details {
  display: block;
  margin-top: var(--s-2);
  color: var(--slate);
}

.event a {
  display: inline-block;
  min-height: 24px;
  margin-top: var(--s-3);
  padding-block: 2px;
  font-weight: 700;
}

/* --- Job postings --- */

.postings { margin: var(--s-5) 0; }

.posting {
  padding: var(--s-6);
  margin-bottom: var(--s-5);
  background: var(--paper);
  border: 1px solid #d9d9e3;
  border-top: 5px solid var(--red);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.posting h3 { color: var(--red-700); margin-bottom: var(--s-2); }

.posting-closes {
  display: inline-block;
  padding: 3px var(--s-3);
  margin-bottom: var(--s-4);
  background: var(--cream);
  color: var(--red-800);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.card-date {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-700);
}

@media (max-width: 560px) {
  .event { flex-direction: column; gap: var(--s-4); }
  .event-date { flex-direction: row; gap: var(--s-2); width: auto; padding: var(--s-2) var(--s-4); align-self: flex-start; }
  .event-day { font-size: 1.2rem; }
}

/* --- Document list (board agendas and minutes) --- */

.doc-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--s-5);
}

.doc-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.doc-list li:hover {
  background: #fdf4f4;
  transform: translateX(3px);
}

/* Document icon, drawn in CSS so it costs no request under img-src 'self'. */
.doc-list a {
  position: relative;
  flex: 1;
  padding-left: 1.9rem;
  font-weight: 700;
}

.doc-list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.05rem;
  height: 1.3rem;
  border: 2px solid var(--red);
  border-radius: 2px;
  /* Folded corner. */
  background:
    linear-gradient(225deg, transparent 0 6px, var(--red) 6px 8px, transparent 8px) top right / 10px 10px no-repeat;
}

.doc-meta {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
}

.doc-note {
  font-size: 0.92rem;
  color: var(--slate);
}

/* --- Contact info --- */
.contact-info {
  padding: var(--s-5);
  margin-top: var(--s-5);
  background: var(--paper-2);
  border-left: 5px solid var(--red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.contact-info p { margin-bottom: var(--s-2); max-width: none; }
.contact-info p:last-child { margin-bottom: 0; }


/* =========================================================================
   14. TABLES, FAQ, NOTICES
   ========================================================================= */

.table-scroll {
  overflow-x: auto;
  margin: var(--s-5) 0;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--paper);
}

caption {
  padding: var(--s-4);
  font-weight: 700;
  text-align: left;
  color: var(--slate);
}

th, td {
  padding: var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

th {
  background: linear-gradient(180deg, var(--red), var(--red-700));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

tbody tr:nth-child(even) { background: var(--paper-2); }
tbody tr:hover { background: #fdf3f3; }
tbody tr:last-child td { border-bottom: 0; }

/* --- FAQ --- */
.faq-item {
  margin-bottom: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  overflow: hidden;
}

.faq-item h3 { margin: 0; font-size: 1.05rem; }

.faq-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.faq-toggle:hover { background: var(--paper-2); color: var(--red-700); }

/* Driven by aria-expanded so the icon can never disagree with the state. */
.faq-toggle::after {
  content: "";
  flex-shrink: 0;
  width: 0.55em;
  height: 0.55em;
  border-right: 2.5px solid var(--red);
  border-bottom: 2.5px solid var(--red);
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.faq-toggle[aria-expanded="true"]::after {
  transform: translateY(25%) rotate(-135deg);
}

/* Collapsed with the `hidden` attribute, which genuinely removes the panel
   from the accessibility tree. The previous max-height approach left the text
   readable by screen readers while aria-expanded claimed it was collapsed. */
.faq-panel {
  margin: 0;
  padding: 0 var(--s-5) var(--s-5);
  max-width: none;
  color: var(--slate);
}

/* --- Notice --- */
.notice {
  padding: var(--s-5);
  margin: var(--s-5) 0;
  background: #fdf4f4;
  border-left: 5px solid var(--red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.notice p { margin-bottom: var(--s-2); max-width: none; }
.notice p:last-child { margin-bottom: 0; }

/* --- Contact form ---
   A Google Form in a frame. The frame cannot size itself to its content -
   it is cross-origin, so this page cannot read how tall the form is - so the
   height is set by hand in contact.html to fit the form as built. Past that
   height the form scrolls inside the frame, which is ugly but still usable.
   Re-check it whenever questions are added to the form. */
.contact-form {
  margin-bottom: var(--s-4);
}

.contact-form iframe {
  display: block;
  width: 100%;
  max-width: 640px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--paper-2);
}

.contact-form-fallback {
  font-size: 0.9rem;
  color: var(--slate);
}

.popular-pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-5) 0;
}

.popular-pages li { margin: 0; }

.popular-pages a {
  display: inline-block;
  padding: var(--s-3) var(--s-5);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}

.popular-pages a:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  text-decoration: none;
}


/* =========================================================================
   15. FOOTER
   ========================================================================= */

footer {
  background: linear-gradient(180deg, var(--ink) 0%, #0c0c10 100%);
  color: rgba(255, 255, 255, 0.82);
  border-top: 4px solid var(--red);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--s-7);
  padding-block: var(--s-8) var(--s-6);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.footer-brand img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.footer-brand b {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #fff;
}

.footer-brand span {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

footer h2 {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: var(--s-4);
}

.footer-links li { margin-bottom: var(--s-1); }

/* Footer links measured 19px tall, below the 24px minimum target size
   (WCAG 2.5.8). Padding rather than margin, so the tap area grows with it. */
.footer-links a,
.footer-contact a {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.15s var(--ease);
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-contact p {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  font-size: 0.95rem;
  max-width: none;
}

.footer-contact svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--red-400);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--s-5);
}

.footer-bottom .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
}

.footer-bottom p { margin: 0; max-width: none; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-legal li { margin: 0; }

.footer-legal a {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
}

.footer-legal a { color: var(--cream); }
.footer-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }


/* =========================================================================
   16. PRIVACY BANNER
   ========================================================================= */

#privacy-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  background: var(--ink);
  color: #fff;
  font-size: 0.9rem;
  border-top: 3px solid var(--red);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
}

#privacy-banner p { margin: 0; max-width: none; }
#privacy-banner a { color: var(--cream); text-decoration: underline; }

#privacy-banner button {
  flex-shrink: 0;
  padding: var(--s-2) var(--s-5);
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

#privacy-banner button:hover { background: var(--red-600); }


/* =========================================================================
   17. MOTION
   ========================================================================= */

/* Entrance animation for the hero. Ends at the visible state, and CSS runs
   regardless of JavaScript, so nothing can be left hidden. */
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.hero .eyebrow { animation: rise 0.7s var(--ease) both; }
.hero h1       { animation: rise 0.7s var(--ease) 0.08s both; }
.hero-sub      { animation: rise 0.7s var(--ease) 0.16s both; }
.hero-actions  { animation: rise 0.7s var(--ease) 0.24s both; }

/* Scroll-linked reveal, where supported. Guarded by @supports so browsers
   without it simply render the content normally — no JavaScript involved, and
   no way for content to become stuck invisible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise 0.8s linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}

/* Respects the OS "reduce motion" setting (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .card:hover,
  .btn:hover,
  .duo-item:hover,
  .timeline-item:hover,
  .apparatus:hover,
  .station:hover,
  .leadership-item:hover,
  .board-members li:hover,
  .division-info:hover,
  .gallery-item:hover img,
  .members-nav-btn > a:hover {
    transform: none !important;
  }
}


/* =========================================================================
   18. RESPONSIVE
   ========================================================================= */

@media (max-width: 1024px) {
  .split,
  .feature { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
  :root { --nav-h: 64px; }

  .hamburger { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    padding: var(--s-3);
    background: var(--red-900);
    border-bottom: 3px solid var(--red);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  }

  .nav-links.active { display: flex; }

  /* Without JavaScript the hamburger cannot toggle, so the menu is shown
     expanded rather than leaving the site with no navigation at all. */
  html:not(.js) .hamburger { display: none; }
  html:not(.js) .nav-links { display: flex; position: static; }
  html:not(.js) .dropdown-content { display: block; }

  .nav-links > li > a,
  .dropdown-toggle {
    width: 100%;
    padding: var(--s-4);
    font-size: 0.95rem;
    text-align: left;
  }

  .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dropdown-content {
    position: static;
    min-width: 0;
    margin: 0 0 var(--s-2) var(--s-4);
    background: rgba(0, 0, 0, 0.28);
    border-top: 0;
    border-left: 3px solid var(--red);
    border-radius: 0;
    box-shadow: none;
  }

  .dropdown-content::before { display: none; }
  .dropdown-content a { color: #fff; }
  .dropdown-content a:hover { background: var(--red); }

  .members-nav-btn > a {
    margin: var(--s-3) 0 0;
    text-align: center;
  }
}

/* Content layout breaks later than the navigation. The nav has to collapse at
   1080px because six labels stop fitting, but the page body is still
   comfortable in two columns well below that. */
@media (max-width: 860px) {
  .apparatus,
  .station,
  .leadership-item { grid-template-columns: 1fr; }

  .leadership-item { justify-items: center; text-align: center; }
  .leadership-item img { margin-inline: auto; }
  .photo-pending.portrait { margin-inline: auto; }

  .apparatus-info h3,
  .station-info h3,
  .leadership-info h3 { text-align: center; }

  /* Timeline moves to a single left-hand rail. Offsetting with a margin
     rather than `left` keeps the card inside the viewport at any width. */
  .timeline::before { left: 12px; }

  .timeline-item,
  .timeline-item:nth-child(even) {
    width: auto;
    margin-left: 44px;
  }

  .timeline-item::before,
  .timeline-item:nth-child(odd)::before,
  .timeline-item:nth-child(even)::before {
    left: -40px;
    right: auto;
  }

  .stat + .stat { border-left: 0; }
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer-bottom .wrap { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }

  /* width: auto, not the base rule's 100%: a full-width box plus these side
     margins overhangs the right edge of the screen by 12px. */
  .container {
    width: auto;
    margin-inline: var(--s-3);
    padding: var(--s-5);
    border-radius: var(--r-md);
  }

  .page-head + .container { margin-top: calc(var(--s-5) * -1); }

  .hero { min-height: 78vh; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .hero-scroll { display: none; }

  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-3); }
}


/* =========================================================================
   FACEBOOK POSTS

   Rendered from the Graph API at build time, never embedded. No Facebook
   script, iframe or cookie reaches the visitor, so the CSP stays closed and
   the accessibility gate can still see every element.
   ========================================================================= */

.fb-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}

.fb-post {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--paper-2);
  border: 1px solid #d9d9e3;
  border-left: 4px solid var(--red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.fb-date {
  margin-bottom: var(--s-2);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-700);
}

.fb-post p:not(.fb-date) {
  margin-bottom: var(--s-4);
  color: var(--ink);
  max-width: none;
}

.fb-post a {
  margin-top: auto;
  min-height: 24px;
  padding-block: 2px;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Board members use circular 130px portraits, so a pending placeholder in that
   context matches them rather than the square 170px one used elsewhere. */
.board-members .photo-pending {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin-bottom: var(--s-4);
}

/* --- Facebook feed ------------------------------------------------------
   The iframe sits directly in index.html: the District decided the feed
   should be open to everyone rather than hidden behind a consent button.
   loading="lazy" still holds the request back until the section is scrolled
   near, and privacy.html states plainly that Facebook receives the visit.

   Facebook caps the Page Plugin at 500px wide, so it cannot be stretched to
   fill the band. Pairing it with the text posts beside it uses the width
   properly and makes 500px read as a deliberate column rather than something
   undersized floating in white space. */

/* The second column that used to sit beside this held Meta's Page Plugin,
   which broke at Meta's end and was removed; index.html records why.

   The intro line and the follow button read as prose and want a comfortable
   measure. The post cards are a responsive grid and want the whole band, so
   the limit goes on the paragraphs rather than the container - capping the
   container costs the grid a column. */
.fb-text > p {
  max-width: 68ch;
}

.fb-text > p:last-child {
  margin-bottom: 0;
}