/* ==========================================================================
   Marin County Fire Chiefs' Association
   Design foundations — every value here is deliberate:
   8-pt spatial rhythm, size-specific tracking, one accent, system type only.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --bg:            #FAFAF9;
  --bg-elev:       #FFFFFF;
  --surface:       #F2F2F0;
  --logo-tile:     #FFFFFF;

  --ink:           #17181A;
  --ink-2:         #4A4C51;
  --ink-3:         #686B71;

  --line:          rgba(0, 0, 0, .11);
  --line-2:        rgba(0, 0, 0, .07);

  --accent:        #96271F;   /* button / marker fill */
  --accent-ink:    #FFFFFF;   /* text on accent fill   */
  --accent-text:   #8C241D;   /* accent as text on bg  */
  --accent-soft:   rgba(150, 39, 31, .09);

  --chrome:        rgba(250, 250, 249, .72);
  --chrome-edge:   rgba(255, 255, 255, .70);
  --shadow-1:      0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .05);
  --shadow-2:      0 2px 6px rgba(0, 0, 0, .07), 0 18px 44px rgba(0, 0, 0, .10);

  /* 8-pt rhythm */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2rem;
  --s5: 2.5rem; --s6: 3rem;   --s7: 4rem;   --s8: 5rem;
  --s9: 6.5rem; --s10: 8rem;

  --wrap: 71.25rem;            /* 1140px */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;

  --ease: cubic-bezier(.32, .72, .3, 1);   /* critically damped, no overshoot */
  --dur: 420ms;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
          "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0D0E10;
    --bg-elev:     #16181B;
    --surface:     #191C20;
    --logo-tile:   rgba(255, 255, 255, .93);

    --ink:         #F3F4F6;
    --ink-2:       #B4B8BF;
    --ink-3:       #878C94;

    --line:        rgba(255, 255, 255, .13);
    --line-2:      rgba(255, 255, 255, .08);

    --accent:      #B23A2C;
    --accent-ink:  #FFFFFF;
    --accent-text: #F09384;
    --accent-soft: rgba(224, 122, 105, .13);

    --chrome:      rgba(13, 14, 16, .66);
    --chrome-edge: rgba(255, 255, 255, .12);
    --shadow-1:    0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .38);
    --shadow-2:    0 2px 8px rgba(0, 0, 0, .55), 0 20px 48px rgba(0, 0, 0, .48);
  }
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* ease the light↔dark change rather than jumping brightness */
  transition: background-color 400ms var(--ease), color 400ms var(--ease);
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 650; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* --- Type scale (tracking is size-specific, never one value) ------------- */
.display {
  font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.026em;
  font-weight: 680;
}
.h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.h3 {
  font-size: clamp(1.1875rem, 1.08rem + .42vw, 1.375rem);
  line-height: 1.24;
  letter-spacing: -.011em;
}
.lede {
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.3125rem);
  line-height: 1.55;
  letter-spacing: -.006em;
  color: var(--ink-2);
}
.body   { font-size: 1.0625rem; line-height: 1.62; color: var(--ink-2); }
.small  { font-size: .9375rem;  line-height: 1.6;  color: var(--ink-3); letter-spacing: .002em; }
.eyebrow {
  font-size: .75rem; font-weight: 650; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
  display: flex; align-items: center; gap: .625rem;
}
.eyebrow::before {
  content: ""; width: 1.375rem; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .55; flex: none;
}
.balance { text-wrap: balance; }

/* --- Layout ------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (max-width: 30rem) { .wrap { width: calc(100% - 2rem); } }

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
.section + .section { border-top: 1px solid var(--line-2); }
.section--tint { background: var(--surface); border-top-color: transparent; }
.section + .section--tint { border-top: 0; }

.section__head { max-width: 46rem; margin-bottom: var(--s6); }
.section__head .h2 { margin-top: var(--s3); }
.section__head .body { margin-top: var(--s3); }

/* --- Skip link ---------------------------------------------------------- */
.skip {
  position: absolute; left: var(--s2); top: var(--s2);
  transform: translateY(-160%);
  z-index: 100; padding: .75rem 1.125rem; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; text-decoration: none;
  transition: transform 180ms var(--ease);
}
.skip:focus-visible { transform: translateY(0); }

/* --- Header (translucent chrome; content scrolls under) ------------------ */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--chrome);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--chrome-edge);   /* light catching the material */
  transition: box-shadow 300ms var(--ease), background-color 400ms var(--ease);
}
.header[data-scrolled="true"] { box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(0, 0, 0, .06); }
@media (prefers-color-scheme: dark) {
  .header[data-scrolled="true"] { box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0, 0, 0, .5); }
}

.header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 4rem;
}
.brand {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: inherit;
  padding: .5rem .25rem; border-radius: var(--r-sm);
  min-height: 2.75rem;
}
.brand__seal { width: 2rem; height: 2rem; flex: none; }
.brand__name {
  display: grid; line-height: 1.06;
  font-size: .9375rem; font-weight: 640; letter-spacing: -.012em;
}
.brand__name span:last-child {
  font-size: .75rem; font-weight: 500; letter-spacing: .012em; color: var(--ink-3);
}

.nav { display: flex; align-items: center; gap: .25rem; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 2.75rem; align-self: stretch;
  padding: 0 .875rem; border-radius: var(--r-sm);
  font-size: .9375rem; font-weight: 550; letter-spacing: -.004em;
  color: var(--ink-2); text-decoration: none;
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--accent-soft); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 620; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: .875rem; right: .875rem; bottom: .4375rem;
  height: 2px; border-radius: 2px; background: var(--accent-text);
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.875rem; padding: .75rem 1.375rem;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: .9688rem; font-weight: 600; letter-spacing: -.006em;
  text-decoration: none; cursor: pointer;
  transition: transform 100ms ease-out, background-color 180ms var(--ease),
              border-color 180ms var(--ease), color 180ms var(--ease);
}
.btn:active { transform: scale(.97); }          /* instant press feedback */
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--accent-soft); border-color: transparent; }
.btn__icon { width: 1rem; height: 1rem; flex: none; vertical-align: -.15em; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* --- Hero --------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 1.5rem + 6vw, 5.5rem) clamp(3.5rem, 2rem + 6vw, 6rem); }
.hero__grid {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 3.75rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 60rem) { .hero__grid { grid-template-columns: 1.12fr .88fr; } }

.hero .display { margin-top: var(--s3); }
.hero .lede { margin-top: var(--s3); max-width: 34ch; }
.hero .actions { margin-top: var(--s5); }

.hero__figure { margin: 0; }
.hero__figure img {
  width: 100%; border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  background: var(--surface);
}
.hero__credit { margin-top: .75rem; font-size: .8125rem; color: var(--ink-3); }

/* --- Statement / mission ------------------------------------------------ */
.statement {
  font-size: clamp(1.25rem, 1.05rem + .95vw, 1.75rem);
  line-height: 1.42; letter-spacing: -.014em; font-weight: 450;
  color: var(--ink); max-width: 52rem;
}
.statement strong { font-weight: 640; }

/* --- Agency grid -------------------------------------------------------- */
.agencies {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 30rem) { .agencies { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 48rem) { .agencies { grid-template-columns: repeat(4, 1fr); } }
/* 15 agencies / 5 columns = three complete rows */
@media (min-width: 64rem) { .agencies { grid-template-columns: repeat(5, 1fr); } }
.agency {
  display: grid; gap: .875rem; justify-items: center;
  padding: var(--s3) var(--s2) 1.375rem;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--bg-elev);
  text-decoration: none; color: inherit;
  min-height: 2.75rem;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease),
              border-color 220ms var(--ease);
}
.agency:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: var(--line); }
.agency:active { transform: scale(.97); transition-duration: 100ms; }
.agency__mark {
  width: 5.5rem; height: 5.5rem; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--logo-tile);
  padding: .375rem;
}
.agency__mark img { width: 100%; height: 100%; object-fit: contain; }
.agency__name {
  font-size: .875rem; font-weight: 570; line-height: 1.3;
  letter-spacing: -.003em; text-align: center; color: var(--ink);
  min-height: 2.275em;   /* two lines, so every tile in a row ends level */
  display: flex; align-items: flex-start; justify-content: center;
}

/* --- Cards -------------------------------------------------------------- */
.cards {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.card {
  padding: var(--s4);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--bg-elev);
}
.card .h3 { margin-bottom: .75rem; }
.card .body { font-size: 1rem; }

/* Section org structure */
.sections-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  align-items: stretch;
}
.branch {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--bg-elev); overflow: hidden;
}
.branch__head { flex: 1 1 auto; padding: var(--s4) var(--s4) var(--s3); }
.branch__num {
  display: inline-grid; place-items: center;
  width: 1.75rem; height: 1.75rem; margin-bottom: .875rem;
  border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-text); font-size: .8125rem; font-weight: 680;
  font-variant-numeric: tabular-nums;
}
.branch__head .body { margin-top: .75rem; font-size: .9688rem; }
.branch__sub {
  margin-top: auto;
  padding: 1.125rem var(--s4) 1.375rem;
  border-top: 1px dashed var(--line);
  background: var(--surface);
}
.branch__sub-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 640; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: .5rem;
}
.branch__sub-label::before {
  content: ""; width: .375rem; height: .375rem; border-radius: 999px;
  background: var(--accent-text); flex: none;
}
.branch__sub .h3 { font-size: 1.0625rem; margin-bottom: .375rem; }
.branch__sub .small { color: var(--ink-2); }

/* --- Feature panel (mutual aid) ----------------------------------------- */
.panel {
  display: grid; gap: var(--s4);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background: var(--bg-elev); box-shadow: var(--shadow-1);
}
@media (min-width: 54rem) {
  .panel { grid-template-columns: 1.15fr .85fr; align-items: center; gap: var(--s6); }
}
.panel .h2 { margin-top: var(--s3); }
.panel .body { margin-top: var(--s3); }
.panel .actions { margin-top: var(--s4); }

.linklist { display: grid; gap: .25rem; }
.linklist a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: 3.25rem; padding: .875rem 1.125rem;
  border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: var(--surface); text-decoration: none;
  transition: transform 100ms ease-out, border-color 180ms var(--ease),
              background-color 180ms var(--ease);
}
.linklist a:hover { border-color: var(--line); background: var(--accent-soft); }
.linklist a:active { transform: scale(.985); }
.linklist strong { display: block; font-size: .9688rem; font-weight: 600; letter-spacing: -.004em; }
.linklist span { display: block; font-size: .8125rem; color: var(--ink-3); margin-top: .0625rem; }
.linklist svg { width: 1rem; height: 1rem; flex: none; color: var(--ink-3); }

/* --- History strip: the banner is 1280x237, so give it the full width ---- */
.history { display: grid; gap: var(--s5); }
.history img {
  width: 100%; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-1);
}
.history__text { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 54rem) {
  .history__text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
  .history__text .actions { justify-content: flex-end; align-self: center; }
}

/* --- Officers ----------------------------------------------------------- */
.officers {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 17rem));
  justify-content: start;
}
@media (max-width: 40em) {
  .officers { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
.officer {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--bg-elev); overflow: hidden;
}
.officer__photo { position: relative; aspect-ratio: 3 / 4; background: var(--surface); }
.officer__photo img { width: 100%; height: 100%; object-fit: cover; }
.officer__agency-mark {
  position: absolute; right: .875rem; bottom: .875rem;
  width: 3rem; height: 3rem; padding: .3125rem;
  border-radius: var(--r-md); background: var(--logo-tile);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 6px 16px rgba(0, 0, 0, .2);
}
.officer__agency-mark img { width: 100%; height: 100%; object-fit: contain; }
.officer__body { padding: 1.25rem var(--s3) var(--s3); }
.officer__role {
  font-size: .75rem; font-weight: 650; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-text);
}
.officer__name { margin-top: .5rem; font-size: 1.1875rem; font-weight: 640; letter-spacing: -.014em; }
.officer__agency { margin-top: .25rem; font-size: .9375rem; color: var(--ink-3); }

/* --- Past presidents ---------------------------------------------------- */
.decades {
  display: grid; gap: var(--s5) var(--s7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 64rem) { .decades { grid-template-columns: 1fr 1fr; } }
.decade { break-inside: avoid; }
.decade__label {
  font-size: .8125rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: .625rem; margin-bottom: .25rem;
  border-bottom: 1px solid var(--line);
}
.roll { display: grid; }
.roll li {
  display: grid; gap: .125rem .875rem; align-items: baseline;
  grid-template-columns: 3.5rem 1fr;
  padding: .625rem 0; border-bottom: 1px solid var(--line-2);
}
@media (min-width: 40rem) {
  .roll li { grid-template-columns: 3.5rem minmax(9rem, .55fr) 1fr; gap: .875rem; }
}
.roll .yr {
  font-size: .875rem; font-weight: 600; color: var(--accent-text);
  font-variant-numeric: tabular-nums; letter-spacing: .004em;
}
.roll .who { font-size: .9688rem; font-weight: 560; letter-spacing: -.005em; color: var(--ink); }
.roll .where { font-size: .9063rem; color: var(--ink-3); grid-column: 2 / -1; }
@media (min-width: 40rem) { .roll .where { grid-column: auto; } }

/* --- Partners ----------------------------------------------------------- */
.partners {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.partner {
  display: grid; gap: .875rem; justify-items: center;
  padding: var(--s3) var(--s2);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--bg-elev); text-decoration: none; color: inherit;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.partner:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: var(--line); }
.partner:active { transform: scale(.97); transition-duration: 100ms; }
.partner__mark {
  width: 6rem; height: 4.5rem; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--logo-tile); padding: .5rem;
}
.partner__mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.partner__name { font-size: .875rem; font-weight: 560; line-height: 1.3; text-align: center; }

/* --- Footer ------------------------------------------------------------- */
.footer {
  padding-block: var(--s7) var(--s6);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.footer__grid {
  display: grid; gap: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s6); } }
.footer .brand { padding-left: 0; }
.footer h2 {
  font-size: .75rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .875rem;
}
.footer__links { display: grid; }
.footer__links a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: .9375rem; color: var(--ink-2); text-decoration: none;
  border-radius: 4px;
  transition: color 160ms var(--ease);
}
.footer__links a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal {
  margin-top: var(--s6); padding-top: var(--s3);
  border-top: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap; gap: .5rem var(--s3);
  font-size: .8438rem; color: var(--ink-3);
}

/* --- Inline links ------------------------------------------------------- */
.tlink {
  color: var(--accent-text); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  border-radius: 3px;
}
.tlink:hover { text-decoration-thickness: 2px; }

/* --- Focus -------------------------------------------------------------- */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --- Scroll reveal ------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; will-change: auto; }
.no-js .reveal { opacity: 1; transform: none; }

/* --- Accessibility preferences ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity 220ms linear; }
  .btn:active, .agency:active, .partner:active, .linklist a:active { transform: none; }
  .agency:hover, .partner:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  body { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .header {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--line);
  }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(0, 0, 0, .38); --line-2: rgba(0, 0, 0, .28); --ink-2: #2C2E32; --ink-3: #45484D; }
  @media (prefers-color-scheme: dark) {
    :root { --line: rgba(255, 255, 255, .44); --line-2: rgba(255, 255, 255, .3); --ink-2: #DEE1E6; --ink-3: #C3C7CE; }
  }
  .header {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--line);
  }
  .card, .agency, .partner, .officer, .branch, .panel { border-color: var(--line); }
}

@media print {
  .header, .skip { display: none; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}