/* Miami-Dade Commission Watch: shared stylesheet
   Palette is inspired by (but not copied from) Miami-Dade County's official
   site, which is blue-and-white with a small orange accent. This site leads
   with green instead (the county's own 1978 color resolution names blue,
   green, and white), uses a different blue shade, and a warmer neutral. */

:root {
  --green-900: #0e4a3c;
  --green-700: #146652;
  --green-600: #1a7d64;
  --green-100: #e3efe9;

  --navy-800: #1d3557;
  --navy-600: #2c4d7a;

  --gold-600: #c08a2e;
  --gold-100: #f7ecd8;

  --red-600: #b3452c;

  --ink-900: #1e2430;
  --ink-600: #4b5563;
  /* Darkened from the original #7a8391 -- that shade sat at ~3.5:1 on paper,
     failing WCAG AA (4.5:1) at the small mono sizes it's used at (labels,
     bylines, captions). This tone holds ~5.5:1 while staying visibly lighter
     than ink-600. */
  --ink-400: #5c6472;

  /* Gold-600 stays the brand accent for borders/backgrounds/focus rings,
     where the 3:1 non-text threshold applies. For gold text on gold-100
     (badges, "why it matters" labels) that pairing was ~2.6:1, so those
     spots use this darker variant instead. */
  --gold-700: #7a5419;

  --paper: #f7f4ec;
  --paper-raised: #ffffff;
  --line: #e2ddcd;

  /* Spacing scale (4px base) -- used at the primary layout rhythm points
     (sections, cards, grids). Existing one-off pixel values elsewhere are
     left alone rather than churned for no visual change. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Commission district colors, named so the get-involved/speak-out-september
     legends don't repeat raw hex. Some districts reuse the core palette. */
  --district-1: var(--green-700);
  --district-2: var(--navy-800);
  --district-3: var(--gold-600);
  --district-4: #7a2d5e;
  --district-5: var(--navy-600);
  --district-6: var(--red-600);
  --district-7: var(--green-600);
  --district-8: #8a5a1e;
  --district-9: var(--ink-600);
  --district-10: var(--green-900);
  --district-11: #a5673f;
  --district-12: #3d6b8a;
  --district-13: #6b4226;

  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', ui-monospace, monospace;

  --radius: 10px;
  --radius-sm: 4px;
  --max-width: 1080px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 20px 44px -20px rgba(14,74,60,.30), 0 4px 10px -6px rgba(14,74,60,.16);
  --shadow-sm: 0 8px 20px -10px rgba(14,74,60,.24), 0 2px 6px -2px rgba(14,74,60,.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  animation: pageIn .5s var(--ease);
}
@keyframes pageIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: var(--green-700); }
a:hover { color: var(--navy-800); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold-600);
  outline-offset: 2px;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink-900);
}

h1 { font-size: clamp(30px, 4.5vw, 44px); }
h2 { font-size: clamp(22px, 3vw, 28px); }
h3 { font-size: 20px; }

p { margin: 0 0 1em; }
.lede { font-size: 19px; color: var(--ink-600); max-width: 56ch; }

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-700);
  margin-bottom: 12px;
  display: block;
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  font-size: 15px;
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s, box-shadow .3s;
}
.btn-primary { background: var(--green-700); color: #fff; }
.btn-primary:hover { background: var(--green-900); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-secondary { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.btn-secondary:hover { background: var(--ink-900); color: #fff; transform: translateY(-2px); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn-large { padding: 18px 34px; font-size: 18px; }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-900);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Anchor-jump targets (#find-district, #commission, etc.) need clearance so
   they land below the sticky header instead of tucked behind it. */
section[id] { scroll-margin-top: 140px; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--green-900);
  color: #fff;
  border-bottom: 4px solid var(--gold-600);
  transition: box-shadow .4s, background-color .4s;
  /* The newsletter bar inside this sticky header animates its height on
     scroll. Without this, the browser's scroll anchoring "corrects" the
     scroll position to compensate for that height change, which the scroll
     handler below reads as a direction change, hiding/showing the bar
     again and again in a feedback loop (visible as jitter). */
  overflow-anchor: none;
}
.site-header.scrolled {
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 16px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lang-toggle {
  display: flex;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang-btn {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
  padding: 11px 12px;
  min-width: 40px;
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  line-height: 1;
}
.lang-btn:first-child { border-left: none; }
.lang-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.lang-btn.active { background: var(--gold-600); color: var(--ink-900); font-weight: 700; }

/* Trim Google's default translate UI down to just what our buttons need.
   Google injects the banner iframe under obfuscated class names that change
   between widget releases, so match the stable `skiptranslate` marker on any
   iframe it drops into the page rather than one release's class name. */
body { top: 0 !important; position: static !important; }
.goog-te-banner-frame.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
iframe.skiptranslate { display: none !important; }
#google_translate_element {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
.wordmark {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: #fff;
}
.wordmark .mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.wordmark .mark .accent { color: var(--gold-600); }
.wordmark .tagline {
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (min-width: 640px) {
  .wordmark .tagline { display: inline; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.5);
  color: #fff;
  border-radius: var(--radius);
  padding: 8px 14px;
  min-height: 44px;
  font-size: 15px;
  cursor: pointer;
}
@media (min-width: 860px) {
  .nav-toggle { display: none; }
}

/* Header icon is redundant with the footer's Connect column and (on the
   homepage) the follow section, so drop it first when space is tight. */
.site-header .social-icons { display: none; }
@media (min-width: 480px) {
  .site-header .social-icons { display: flex; }
}

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  background: var(--green-900);
  border-top: 1px solid rgba(255,255,255,0.18);
  padding: 10px 20px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 16px 32px rgba(0,0,0,0.28);
  z-index: 50;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.site-nav.open { display: flex; }
.site-nav a {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  padding: 13px 12px;
  min-height: 44px;
  border-radius: var(--radius);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
}
.site-nav a:last-child { border-bottom: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

@media (min-width: 860px) {
  .site-nav {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
    min-width: 0;
    gap: 4px;
  }
  .site-nav a {
    font-size: 15px;
    font-weight: 400;
    padding: 10px 8px;
    min-height: 0;
    border-bottom: none;
    position: relative;
  }
  .site-nav a::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 4px;
    height: 2px;
    background: var(--gold-600);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--ease);
  }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
  }
}

/* ---------- header newsletter bar ---------- */
.header-newsletter {
  background: rgba(0,0,0,0.18);
  border-top: 1px solid rgba(255,255,255,0.14);
  opacity: 1;
  overflow: hidden;
  transition: max-height .35s var(--ease), opacity .3s var(--ease), border-color .35s var(--ease);
}
.header-newsletter.header-newsletter-hidden {
  opacity: 0;
  border-top-color: transparent;
}
.header-newsletter .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 24px;
}
.newsletter-label {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
@media (min-width: 480px) {
  .newsletter-label { display: inline; }
}
.newsletter-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}
.newsletter-input-row {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 220px;
  max-width: 420px;
}
.newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
  min-height: 40px;
}
.newsletter-input::placeholder { color: rgba(255,255,255,0.55); }
.newsletter-input:focus { outline: 2px solid var(--gold-600); outline-offset: 1px; background: rgba(255,255,255,0.14); }
.newsletter-form .btn-small { padding: 9px 16px; min-height: 40px; white-space: nowrap; }
.newsletter-status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}
.newsletter-status.error { color: #ffb199; }
.newsletter-status.success { color: #a9e0c9; }

/* ---------- hero ---------- */
.hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--line);
}
.hero h1 { max-width: 16ch; }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 40px;
  align-items: start;
}

.next-meeting {
  margin-top: 28px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold-600);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.next-meeting .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-400);
}
.next-meeting .date { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-top: 4px; }

/* ---------- section / cards ---------- */
.section { padding: 48px 0; }
.section-alt { background: var(--green-100); }
.section-head { margin-bottom: 32px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover { border-color: var(--green-700); transform: translateY(-6px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-600); font-size: 15px; margin-bottom: 0; }

/* ---------- meeting cards ---------- */
.meeting-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.meeting-card:hover { border-color: var(--green-700); transform: translateY(-4px); box-shadow: var(--shadow); }
.meeting-card-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--green-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.meeting-card h3 { margin-bottom: 8px; }
.meeting-card-summary { color: var(--ink-600); margin-bottom: 14px; }

/* ---------- student editorial cards ----------
   Rendered by js/editorials-feed.js. Each card starts collapsed: byline stays
   visible, the body is clamped to two lines. Clicking the card (or the toggle)
   expands it in place. No JS: the .editorial-body clamp still applies, so the
   fallback is a tidy excerpt rather than a wall of text. */
.editorial-card { cursor: pointer; scroll-margin-top: 140px; }
.editorial-byline {
  color: var(--ink-600);
  font-size: 14px;
  margin-bottom: 12px;
}
.editorial-body {
  color: var(--ink-600);
  white-space: pre-wrap;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.editorial-card.open { cursor: default; }
.editorial-card.open .editorial-body {
  display: block;
  overflow: visible;
  cursor: auto;
}
.editorial-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-700);
  cursor: pointer;
}
.editorial-toggle:hover { color: var(--navy-800); }
.editorial-chevron { transition: transform .25s var(--ease); }
.editorial-card.open .editorial-chevron { transform: rotate(180deg); }

.item-block {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 16px;
}
.item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.item-code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--green-100);
  color: var(--green-900);
  padding: 2px 8px;
  border-radius: 3px;
}
.outcome {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
}
.outcome.passed { background: rgba(26,125,100,0.14); color: var(--green-700); }
.outcome.failed { background: rgba(179,69,44,0.12); color: var(--red-600); }
.outcome.deferred { background: var(--gold-100); color: var(--gold-700); }

.why-matters {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--gold-100);
  border-left: 3px solid var(--gold-600);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
}
.why-matters .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-700);
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}

.sample-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--ink-900);
  color: #fff;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 12px;
}

/* ---------- commissioner roster ---------- */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.roster-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.roster-card:hover { border-color: var(--green-700); transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.roster-card .district {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.roster-card .name { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin: 6px 0 4px; }
.roster-card .role {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  background: var(--gold-100);
  color: var(--gold-700);
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.roster-card a { font-size: 14px; }

/* ---------- article ---------- */
.article-body {
  max-width: 700px;
}
.byline {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-400);
  margin-bottom: 20px;
}
.article-body h2 {
  margin-top: 2em;
  font-size: 23px;
}
.article-body p {
  font-size: 17px;
}
.sources-list {
  margin: 0;
  padding-left: 20px;
}
.sources-list li { margin-bottom: 8px; font-size: 15px; }

/* ---------- district finder ---------- */
.district-search-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.district-search-form input {
  flex: 1 1 280px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: inherit;
  background: var(--paper-raised);
}
.district-search-form input:focus { border-color: var(--green-700); }

.district-status {
  min-height: 24px;
  margin-bottom: 16px;
  font-size: 15px;
  color: var(--ink-600);
}
.district-status.success {
  padding: 12px 16px;
  background: var(--green-100);
  border-left: 4px solid var(--green-700);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-900);
}
.district-status.error {
  padding: 12px 16px;
  background: var(--gold-100);
  border-left: 4px solid var(--red-600);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-900);
}

#district-map {
  position: relative;
  z-index: 1;
  height: 480px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--green-100);
}

.district-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 20px;
  font-size: 13px;
}
.district-legend-item { display: flex; align-items: center; gap: 8px; }
.district-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ---------- founders ---------- */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 28px;
}
.founder-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.founder-card:hover { border-color: transparent; transform: translateY(-6px); box-shadow: var(--shadow); }
.founder-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: var(--green-100);
}
.founder-photo-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-100);
  color: var(--green-700);
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 20px;
}
.founder-body { padding: 22px; }
.founder-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.founder-role {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green-700);
  margin: 4px 0 14px;
  display: block;
}
.founder-body p { font-size: 15px; color: var(--ink-600); margin-bottom: 12px; }
.founder-connect {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.founder-connect .founder-connect-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
}
.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--green-700);
  text-decoration: none;
  background: var(--paper);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.founder-link svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.founder-link:hover,
.founder-link:focus-visible {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
  text-decoration: none;
}
.disclosure-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--gold-100);
  border-left: 3px solid var(--gold-600);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  color: var(--ink-900);
}

/* ---------- stat strip ---------- */
.stat-strip { padding: 8px 0 40px; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  text-align: center;
}
.stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--green-700);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-400);
}

/* ---------- pull quote ---------- */
.pull-quote {
  border-left: 4px solid var(--gold-600);
  padding: 4px 0 4px 28px;
  margin: 28px 0;
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-900);
  margin-bottom: 12px;
  max-width: 42ch;
}
.pull-quote cite {
  font-family: var(--font-mono);
  font-size: 13px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
}

/* ---------- social icons ---------- */
.social-icons { display: flex; align-items: center; gap: 8px; }
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  flex-shrink: 0;
}
.social-icon svg { width: 16px; height: 16px; fill: currentColor; }
.social-icon:hover { background: rgba(255,255,255,0.15); border-color: #fff; }
.site-footer .social-icon { border-color: rgba(255,255,255,0.3); }
.site-footer .social-icon:hover { background: rgba(255,255,255,0.12); border-color: var(--gold-600); color: var(--gold-600); }

/* ---------- follow section ---------- */
.follow-section { padding: 40px 0; text-align: center; }
.follow-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.follow-section .social-icon {
  border-color: var(--green-700);
  color: var(--green-700);
  width: 44px;
  height: 44px;
}
.follow-section .social-icon svg { width: 20px; height: 20px; }
.follow-section .social-icon:hover { background: var(--green-700); color: #fff; }

/* ---------- founder bio disclosure ----------
   The founder bios run five paragraphs each, which pushed the roster and
   everything under it far down the page. The opening two paragraphs stay
   visible and the rest sits behind a native <details>: no JS to fail, the
   text is still in the markup for crawlers, and Conrad's disclosure stays
   outside the fold-away on purpose. */
.founder-more {
  margin-bottom: 12px;
}
.founder-more summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green-700);
  list-style: none;
  transition: color .3s var(--ease);
}
.founder-more summary::-webkit-details-marker { display: none; }
.founder-more summary:hover { color: var(--ink-900); }
.founder-more summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s var(--ease);
}
.founder-more[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.founder-more:not([open]) .founder-more-close { display: none; }
.founder-more[open] .founder-more-open { display: none; }
.founder-more p:first-of-type { margin-top: 14px; }
.founder-more p:last-child { margin-bottom: 0; }

/* ---------- team roster ----------
   Deliberately lighter than .founder-card: a monogram-sized avatar, a name and
   a role. Twenty founder-sized cards would bury the two actual founders, and a
   round avatar crops forgivingly enough that a phone snapshot still works. */
.team-group + .team-group { margin-top: 36px; }
.team-group-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.team-group-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green-700);
}
.team-group-blurb {
  color: var(--ink-600);
  font-size: 15px;
  max-width: 60ch;
  margin-bottom: 18px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 16px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.team-member:hover { border-color: transparent; transform: translateY(-3px); box-shadow: var(--shadow); }
.team-avatar {
  width: 140px;
  height: 140px;
  flex: 0 0 140px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--green-100);
}
.team-avatar-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 38px;
  letter-spacing: 0.03em;
  color: var(--green-700);
}
.team-member-text { min-width: 0; }
.team-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
}
.team-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green-700);
  margin-top: 3px;
}
.team-bio {
  font-size: 14px;
  color: var(--ink-600);
  margin: 8px 0 0;
}
/* A full-width card each is a lot of scrolling once the roster grows, so
   narrow screens keep two across on a smaller avatar. */
@media (max-width: 560px) {
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .team-avatar { width: 104px; height: 104px; flex: 0 0 104px; }
  .team-avatar-monogram { font-size: 28px; }
  .team-name { font-size: 17px; }
}

/* ---------- partner card ---------- */
.partner-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-top: 24px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.partner-card:hover { border-color: transparent; transform: translateY(-4px); box-shadow: var(--shadow); }
.partner-card img {
  max-width: 100%;
  max-height: 100px;
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
}
.partner-card h3 { margin-bottom: 6px; }
.partner-card p { color: var(--ink-600); font-size: 15px; }
.partner-card p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .partner-card { grid-template-columns: 1fr; text-align: center; }
  .partner-card img { max-width: 180px; margin: 0 auto; }
}

/* ---------- scroll reveal ----------
   Only engages once js/main.js adds .animate-on to <body> (IntersectionObserver
   supported). No JS, or JS fails: everything just stays visible, nothing hides
   by default. */
.animate-on .card,
.animate-on .meeting-card,
.animate-on .roster-card,
.animate-on .founder-card,
.animate-on .partner-card,
.animate-on .team-member,
.animate-on .stat-item,
.animate-on .faq-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.animate-on .card.in,
.animate-on .meeting-card.in,
.animate-on .roster-card.in,
.animate-on .founder-card.in,
.animate-on .partner-card.in,
.animate-on .team-member.in,
.animate-on .stat-item.in,
.animate-on .faq-item.in {
  opacity: 1;
  transform: none;
}
.card-grid .card:nth-child(2), .roster-grid .roster-card:nth-child(2), .founders-grid .founder-card:nth-child(2), .stat-grid .stat-item:nth-child(2) { transition-delay: .08s; }
.card-grid .card:nth-child(3), .roster-grid .roster-card:nth-child(3), .founders-grid .founder-card:nth-child(3), .stat-grid .stat-item:nth-child(3) { transition-delay: .16s; }
.card-grid .card:nth-child(4), .roster-grid .roster-card:nth-child(4), .stat-grid .stat-item:nth-child(4) { transition-delay: .24s; }
.card-grid .card:nth-child(5), .roster-grid .roster-card:nth-child(5) { transition-delay: .32s; }
.card-grid .card:nth-child(6), .roster-grid .roster-card:nth-child(6) { transition-delay: .4s; }

/* ---------- seal ---------- */
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 12px;
}
.seal {
  position: relative;
  width: min(240px, 60vw);
}
.seal-ring {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
  box-shadow: var(--shadow);
  animation: seal-spin 50s linear infinite;
}
.seal-gator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}
@keyframes seal-spin { 100% { transform: rotate(360deg); } }
.seal-float {
  position: absolute;
  z-index: 6;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  text-align: center;
  animation: seal-float 6s ease-in-out infinite;
}
.seal-float .n { font-weight: 700; color: var(--green-700); font-size: 16px; line-height: 1; }
.seal-float .l { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-400); margin-top: 2px; }
.sf-1 { top: -10px; left: -28px; animation-delay: 0s; }
.sf-2 { bottom: -10px; right: -28px; animation-delay: .8s; animation-duration: 7s; }
@keyframes seal-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 480px) {
  .seal-float { display: none; }
}

/* ---------- X panel under the seal ---------- */
/* Capped to the seal's own width rather than the hero column's: a card wider
   than the thing it hangs under stops reading as a caption and starts reading
   as a second column. */
.x-feed {
  width: 100%;
  max-width: 260px;
  margin-top: 26px;
  padding: 12px 14px 4px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.x-feed-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-400);
}
.x-feed-mark { width: 12px; height: 12px; flex: none; }
.x-feed-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}
.x-feed-title a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.x-feed-title a:hover { color: var(--green-700); }
.x-feed-empty {
  margin: 10px 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-600);
}
.x-feed-empty a { color: var(--green-700); text-decoration: none; border-bottom: 1px solid var(--line); }
.x-feed-empty a:hover { border-bottom-color: var(--green-700); }
/* Each post is one link, so the whole card is the tap target. Two lines is
   the cut-off: enough for a meeting alert to make sense, short enough that
   three posts still sit under the seal instead of pushing the hero taller. */
.x-post {
  display: block;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.x-feed-body .x-post:first-child { border-top: 0; padding-top: 6px; }
.x-post-text {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.x-post:hover .x-post-text { color: var(--green-700); }
.x-post-age {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-400);
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq-item h3 { margin-bottom: 8px; }
.faq-item p { color: var(--ink-600); margin-bottom: 0; }

/* ---------- forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 15px; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  background: var(--paper-raised);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--green-700); }

.notice {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 5px solid var(--navy-600);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 15px;
  color: var(--ink-600);
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink-900);
  color: rgba(255,255,255,0.75);
  padding: 40px 0 32px;
  margin-top: 40px;
  font-size: 14px;
}
.site-footer a { color: rgba(255,255,255,0.9); }
.site-footer a:hover { color: var(--gold-600); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
.footer-grid h4 {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-disclaimer {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* ---------- utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---------- cities ---------- */
/* Status badges follow the .outcome idiom above: mono, uppercase, tinted by
   meaning. 'active' borrows the passed-green, 'team-needed' the deferred-gold
   (an invitation, not an error), 'forming' the navy of in-progress notices. */
.city-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
  margin-bottom: 10px;
}
.city-status-active { background: rgba(26,125,100,0.14); color: var(--green-700); }
.city-status-forming { background: rgba(44,77,122,0.12); color: var(--navy-600); }
.city-status-needed { background: var(--gold-100); color: var(--gold-700); }

/* City cards reuse .card wholesale; these rules only handle the parts .card
   doesn't have: keeping link-cards readable and pinning the CTA line to the
   bottom so a short blurb doesn't leave it floating mid-card. */
.city-card {
  display: flex;
  flex-direction: column;
}
.city-card .city-card-cta {
  margin-top: auto;
  padding-top: 12px;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 15px;
}
a.city-card .city-card-cta { color: var(--green-700); }

.city-section-empty {
  font-size: 14px;
  color: var(--ink-400);
  font-style: italic;
  margin-bottom: 0;
}
/* .city-card is a column flex container, which would stretch the inline-block
   badge to full card width; pin it to its content size instead. */
.city-card .city-status { align-self: flex-start; }

/* =========================================================================
   Last-verified badge
   -------------------------------------------------------------------------
   Every data-heavy page already recorded when its facts were last checked,
   but buried in a paragraph of prose at the bottom. Surfacing it as a badge
   near the heading is the cheapest credibility win on the site: the reader
   sees the freshness of the data before they read the data.
   ========================================================================= */
.page-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--green-900);
  background: var(--green-100);
  border: 1px solid rgba(20, 102, 82, 0.28);
  padding: 5px 12px;
  border-radius: 999px;
}
.verified-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-600);
  flex: 0 0 auto;
}
.verified-badge .vb-date { font-weight: 400; letter-spacing: 0.03em; }
/* For a page whose data has a known review cadence that has lapsed. Set by
   hand in the markup -- nothing here computes staleness. */
.verified-badge.stale {
  background: var(--gold-100);
  color: var(--gold-700);
  border-color: rgba(192, 138, 46, 0.4);
}
.verified-badge.stale::before { background: var(--gold-600); }
/* There is deliberately no .hero override here. One used to paint the badge
   white-on-translucent-white "for a dark hero", but .hero has never had a
   background of its own -- it is padding and a bottom rule, so it sits on the
   paper. That put white at 92% on #f7f4ec, about 1.06:1, on all nine pages
   that pair a hero with this badge. The default green pill above is readable
   on paper; if a genuinely dark hero ever ships, give it its own class and
   scope the light treatment to that, not to .hero. */

/* =========================================================================
   Structured agenda-item record
   -------------------------------------------------------------------------
   The one-line fingerprint above every item:
     8A1 · Ordinance · $31M · Sponsored by Higgins · Passed 12-1 · Transit
   Fields are individually optional -- an item with none of them renders the
   same prose card it always did.
   ========================================================================= */
.item-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-600);
  margin-bottom: 10px;
}
.item-record .sep {
  opacity: 0.4;
  user-select: none;
}
.item-record .rec-amount {
  color: var(--gold-700);
  font-weight: 700;
}
.item-record .rec-leg {
  color: var(--ink-900);
  font-weight: 700;
}
.rec-topic {
  display: inline-block;
  background: var(--navy-800);
  color: #fff;
  padding: 2px 9px;
  border-radius: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.rec-district {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-600);
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
}

/* =========================================================================
   Sourcing: official record above, additional reporting below
   -------------------------------------------------------------------------
   The policy is that every item is anchored to the county's own record.
   Journalism sits underneath it, attributed to its outlet, never in place of
   it -- and an item missing its official record says so out loud rather than
   quietly showing a news link as though it were the primary source.
   ========================================================================= */
.sources {
  margin-top: 12px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  font-size: 14px;
}
.source-group + .source-group { margin-top: 10px; }
.source-group > .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
}
.source-group.official > .label { color: var(--green-700); }
.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.source-list li { margin: 0; }
.source-list .outlet {
  color: var(--ink-400);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 5px;
}
.source-missing {
  color: var(--red-600);
  font-style: italic;
  font-size: 13px;
}

/* =========================================================================
   Meeting Tracker filters
   -------------------------------------------------------------------------
   Not sticky on purpose: .site-header is sticky and animates its own height
   as the newsletter bar collapses, so any fixed top offset here would drift.
   ========================================================================= */
.filter-bar {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 28px;
}
.filter-search {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-search input[type="search"] {
  flex: 1 1 280px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: inherit;
  background: var(--paper);
}
.filter-search input[type="search"]:focus { border-color: var(--green-700); }
.filter-group { margin-top: 16px; }
.filter-group > .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-600);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--green-700); color: var(--green-900); }
.chip[aria-pressed="true"] {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}
.filter-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.filter-selects label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  font-weight: 700;
}
.filter-selects select,
.filter-selects input[type="date"] {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: inherit;
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--ink-900);
}
.filter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-600);
}
.filter-count strong { color: var(--ink-900); }
.filter-clear {
  background: none;
  border: none;
  padding: 0;
  color: var(--green-700);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.filter-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-600);
  background: var(--paper-raised);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* =========================================================================
   Roll call
   -------------------------------------------------------------------------
   Collapsed by default: thirteen names is a lot of vertical space to spend
   on every item, and most readers want the tally, not the names.
   ========================================================================= */
.rollcall-toggle {
  margin-top: 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-600);
  cursor: pointer;
}
.rollcall-toggle:hover { border-color: var(--green-700); color: var(--green-900); }
.rollcall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 5px;
  margin-top: 12px;
}
.rollcall[hidden] { display: none; }
.rollcall-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
}
.rollcall-row .rc-name { color: var(--ink-900); }
.rollcall-row .rc-name .rc-district {
  color: var(--ink-400);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-right: 6px;
}
.rc-vote {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.rc-vote.yes { background: rgba(26,125,100,0.14); color: var(--green-700); }
.rc-vote.no { background: rgba(179,69,44,0.12); color: var(--red-600); }
.rc-vote.abstain,
.rc-vote.recused { background: var(--gold-100); color: var(--gold-700); }
.rc-vote.absent { background: var(--paper); color: var(--ink-400); border: 1px solid var(--line); }

/* =========================================================================
   Homepage briefing
   -------------------------------------------------------------------------
   Replaces the "what this project is" block above the fold. The mission
   statement moves further down the page; what a returning visitor wants at
   the top is what changed since they last looked.
   ========================================================================= */
.briefing {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold-600);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.briefing .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-700);
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}
.briefing-line {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.45;
  color: var(--ink-900);
  margin: 0;
}
.briefing-line .sep { color: var(--gold-600); margin: 0 6px; }
.briefing-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-600);
}
.briefing-next {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--green-100);
  color: var(--green-900);
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
}
.briefing-empty { color: var(--ink-600); font-size: 15px; margin: 0; }

/* =========================================================================
   Homepage district finder
   -------------------------------------------------------------------------
   Same geocode + point-in-polygon core as the Get Involved map, without
   Leaflet: an address in, a personal briefing out.
   ========================================================================= */
.hero-finder {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.hero-finder h2 {
  font-size: 21px;
  margin: 0 0 6px;
}
.hero-finder .finder-sub {
  color: var(--ink-600);
  font-size: 15px;
  margin: 0 0 16px;
}
.district-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.district-panel[hidden] { display: none; }
.district-panel-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.district-panel-head .dp-district {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  background: var(--green-700);
  color: #fff;
  padding: 4px 11px;
  border-radius: 999px;
}
.district-panel-head .dp-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-900);
}
.district-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .district-panel-grid { grid-template-columns: 1fr 1fr; }
}
.dp-block > .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}
.dp-block p { margin: 0; font-size: 15px; color: var(--ink-600); }
.dp-votes { list-style: none; margin: 0; padding: 0; }
.dp-votes li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.dp-votes li:last-child { border-bottom: none; }
.dp-votes .dp-vote-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
  display: block;
  margin-top: 2px;
}
.dp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* =========================================================================
   Subscription preferences
   ========================================================================= */
.pref-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 18px;
}
.pref-fieldset legend {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  font-weight: 700;
  padding: 0;
  margin-bottom: 8px;
}
.pref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.pref-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-900);
}
.pref-check:hover { border-color: var(--green-700); }
.pref-check input { accent-color: var(--green-700); margin: 0; }
.pref-check:has(input:checked) {
  border-color: var(--green-700);
  background: var(--green-100);
}
.pref-check:has(input:focus-visible) { outline: 2px solid var(--gold-600); outline-offset: 2px; }
.pref-note {
  font-size: 14px;
  color: var(--ink-600);
  margin: 12px 0 0;
}

/* =========================================================================
   Commissioner profile
   ========================================================================= */
.profile-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
@media (min-width: 720px) {
  .profile-head { grid-template-columns: 180px 1fr; }
}
.profile-photo {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--green-100);
}
.profile-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 24px;
  margin: 0;
}
.profile-facts dt {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  font-weight: 700;
  margin-bottom: 3px;
}
.profile-facts dd {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--ink-900);
}
.vote-history { list-style: none; margin: 0; padding: 0; }
.vote-history li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.vote-history li:last-child { border-bottom: none; }
.vote-history .vh-item { flex: 1 1 auto; }
.vote-history .vh-title { color: var(--ink-900); font-size: 15px; display: block; }
.vote-history .vh-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
  display: block;
  margin-top: 3px;
}
.vote-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}
.vote-summary .vs-stat {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-width: 96px;
}
.vote-summary .vs-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--green-900);
  display: block;
  line-height: 1.1;
}
.vote-summary .vs-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  font-weight: 700;
}

/* A data section that has nothing in it yet says so plainly, rather than
   rendering an empty container that reads as a broken page. */
.data-pending {
  padding: 20px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-600);
  font-size: 15px;
}

/* ---------- per-meeting pages ----------
   Every meeting in the tracker also has its own page at /meetings/<date>.html,
   generated by scripts/build.mjs. These rules cover the parts that only exist
   there (breadcrumb, prev/next) plus the two links the tracker list grew so it
   can point at them. */

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-400);
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.breadcrumb a { color: var(--green-700); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--line); }

/* The card heading links to the meeting's own page. It has to stay looking
   like a heading rather than a link, or every card in the tracker reads as a
   wall of green. */
.meeting-card h3 .meeting-card-link {
  color: inherit;
  text-decoration: none;
}
.meeting-card h3 .meeting-card-link:hover { color: var(--green-700); }

.meeting-card-more {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.meeting-card-more a { color: var(--green-700); text-decoration: none; }
.meeting-card-more a:hover { text-decoration: underline; }

.meeting-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.meeting-nav-link {
  display: block;
  padding: 16px 18px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .35s, transform .35s var(--ease);
}
.meeting-nav-link:hover { border-color: var(--green-700); transform: translateY(-2px); }
.meeting-nav-dir {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green-700);
  margin-bottom: 6px;
}
.meeting-nav-title { display: block; color: var(--ink-900); font-size: 15px; }

.meeting-back {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.meeting-back a { color: var(--green-700); text-decoration: none; }
.meeting-back a:hover { text-decoration: underline; }