/* Language views retain the portal's visual identity with readable CJK type. */
.language-bar { border-bottom: 1px solid var(--color-divider); background: var(--color-surface); }
.language-bar > .wrap { padding-block: 10px; }
.language-bar nav { display: flex; flex-wrap: wrap; gap: 6px; }
.language-bar nav a { display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 15px; border-radius: 4px; font: 700 14px/1.4 Arial, sans-serif; text-decoration: none; }
.language-bar nav a:hover { text-decoration: underline; }
.language-bar nav a[aria-current="page"] { background: var(--brand-gold); color: #141310; }
.language-note { max-width: 90ch; margin-top: 6px; font-size: 13px; color: var(--color-text-muted); line-height: 1.7; }
html[lang="ko"] { --font-body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", Arial, sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
html[lang="zh-Hans"] { --font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif; overflow-wrap: anywhere; }
html[lang="ko"], html[lang="zh-Hans"] { --font-display: var(--font-body); --font-label: var(--font-body); }
body[data-locale] :is(h1,h2,h3,h4,h5,h6) { line-height: 1.3; font-weight: 800; letter-spacing: 0; }
body[data-locale] .brand__name { font-family: 'Anton', 'Arial Narrow', sans-serif; }
body[data-locale] .hero__title { font-size: clamp(2.5rem, 1rem + 5vw, 5.6rem); }
body[data-locale] :is(.kicker,.eyebrow,.section-label) { letter-spacing: .03em; }
body[data-locale="es-US"] .btn { white-space: normal; max-width: 100%; text-align: center; }
@media (max-width: 380px) {
  body[data-locale="es-US"] .site-header__inner { gap: 8px; }
  body[data-locale="es-US"] .brand__sub { letter-spacing: .08em; }
  body[data-locale="es-US"] .header-tools { margin-left: auto; flex-shrink: 0; }
}
/* Public voter shortcuts: visible both outside and inside the partner gate. */
body[data-state-key] { padding-bottom: var(--voter-tools-space, 210px); }
html:has([data-voter-tools]) { scroll-padding-bottom: var(--voter-tools-space, 210px); }
.voter-tools {
  position: fixed;
  inset: auto 0 0;
  z-index: 50;
  padding: 10px 16px max(10px, env(safe-area-inset-bottom));
  background: var(--color-surface);
  color: var(--color-text);
  border-top: 3px solid var(--brand-gold);
  box-shadow: 0 -4px 24px rgb(0 0 0 / 12%);
}
.voter-tools__inner { max-width: 800px; margin-inline: auto; }
.voter-tools .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.voter-tools__heading {
  display: flex; align-items: center; gap: 8px;
  max-width: none; margin: 0 0 8px;
  font: 700 12px/1.3 var(--font-body);
  letter-spacing: .04em; text-transform: uppercase;
}
.voter-tools__heading > span:first-child { color: var(--color-section); }
.voter-tools__external { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; }
.voter-tools__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.voter-tools__link {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 58px; min-width: 0; padding: 9px 14px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--brand-gold); color: #141310; text-decoration: none;
}
.voter-tools__link--ballot { background: var(--brand-purple-deep); color: #fff; }
.voter-tools__link:hover { color: #141310; background: #f0a91f; text-decoration: none; }
.voter-tools__link--ballot:hover { color: #fff; background: #3a2277; }
.voter-tools__link:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
.voter-tools__label { font: 700 15px/1.3 var(--font-body); }
.voter-tools__hint { margin-top: 3px; font: 400 12px/1.3 var(--font-body); }
.voter-tools__note { max-width: none; margin: 7px 0 0; font: 400 12px/1.4 var(--font-body); color: var(--color-text-muted); }
@media (max-width: 480px) {
  .voter-tools { padding-inline: 12px; }
  .voter-tools__links { gap: 8px; }
  .voter-tools__link { padding: 8px 10px; }
  .voter-tools__label { font-size: 14px; }
  .voter-tools__external { font-size: 11px; }
}
@media print {
  .voter-tools { display: none; }
  body[data-state-key] { padding-bottom: 0; }
}

/* ==========================================================================
   style.css: Election Defenders design system
   Brand: gold #FFBC3A · black · white · purple #5E3CC3 (sparing)
   Type:  Anton display · Bebas Neue labels · Arial body
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Type scale (fluid, 12px floor) */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6.5vw, 7rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.625rem;
  --radius-xl: 1rem;    --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 660px;
  --content-default: 1000px;
  --content-wide: 1240px;

  /* Typography stacks */
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-label: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: Arial, 'Helvetica Neue', Helvetica, sans-serif;

  /* Brand constants (identical in both themes) */
  --brand-gold: #ffbc3a;
  --brand-purple: #5e3cc3;
  --brand-purple-deep: #4a2d95;
}

/* LIGHT THEME */
:root,
[data-theme='light'] {
  --color-bg: #faf8f4;
  --color-surface: #ffffff;
  --color-surface-2: #f3efe7;
  --color-surface-offset: #ebe6dc;
  --color-inverse-bg: #0f0e0c;

  --color-border: #ddd6c8;
  --color-divider: #e8e2d6;

  --color-text: #141310;
  --color-text-muted: #5e594f;
  --color-text-faint: #8d877b;
  --color-text-inverse: #faf8f4;

  --color-primary: #8a5c00;          /* accessible gold for text/links on light */
  --color-primary-hover: #6b4700;
  --color-accent: #ffbc3a;           /* the gold itself, for fills */
  --color-accent-ink: #141310;       /* text placed on gold */
  --color-section: #4a2d95;          /* purple; Bebas section labels, AA on light */
  --color-purple-soft: #ece6fb;      /* purple wash for chips/rows */
  --color-purple-line: #5e3cc3;
  --color-lock: #8a5c00;

  /* Calendar event categories. Purple and gold are the brand; the rust, ink
     and sage are held to bubbles only so the palette stays where it was. */
  --kind-program: #5e3cc3;
  --kind-deadline: #b4432a;
  --kind-mail: #2f5d8a;
  --kind-advance: #d99000;
  --kind-election: #141310;
  --kind-cert: #3f6b4d;
  --map-ink: #5e3cc3;
  --map-opacity: 0.07;

  /* Section-jump pills. Gold, black and purple cycle in that order so the
     jump links read as buttons rather than as quiet text links. */
  --pill-gold-bg: #ffbc3a;
  --pill-gold-ink: #141310;
  --pill-gold-hover: #f0a91f;
  --pill-ink-bg: #141310;
  --pill-ink-ink: #faf8f4;
  --pill-ink-hover: #2f2b25;
  --pill-purple-bg: #4a2d95;
  --pill-purple-ink: #ffffff;
  --pill-purple-hover: #3a2277;

  --shadow-sm: 0 1px 2px rgba(20, 19, 16, 0.07);
  --shadow-md: 0 6px 18px rgba(20, 19, 16, 0.09);
  --shadow-lg: 0 18px 44px rgba(20, 19, 16, 0.14);

  --grain-opacity: 0.035;
}

/* DARK THEME */
[data-theme='dark'] {
  --color-bg: #0f0e0c;
  --color-surface: #171614;
  --color-surface-2: #1e1c19;
  --color-surface-offset: #262320;
  --color-inverse-bg: #faf8f4;

  --color-border: #35312b;
  --color-divider: #26231f;

  --color-text: #f2efe8;
  --color-text-muted: #a49d90;
  --color-text-faint: #776f63;
  --color-text-inverse: #0f0e0c;

  --color-primary: #ffbc3a;
  --color-primary-hover: #ffd07a;
  --color-accent: #ffbc3a;
  --color-accent-ink: #141310;
  --color-section: #b49cf5;          /* lifted purple for AA on near-black */
  --color-purple-soft: #211a3a;
  --color-purple-line: #8b6ce0;
  --color-lock: #ffbc3a;

  /* Lifted for contrast on near-black; Election Day flips to warm white */
  --kind-program: #9f85ee;
  --kind-deadline: #e8795c;
  --kind-mail: #86b4e0;
  --kind-advance: #ffbc3a;
  --kind-election: #f2efe8;
  --kind-cert: #7fb08f;
  --map-ink: #b49cf5;
  --map-opacity: 0.1;

  /* On near-black the black pill would disappear, so it inverts to warm white
     and the purple lifts to the same tone the section labels use. */
  --pill-gold-bg: #ffbc3a;
  --pill-gold-ink: #141310;
  --pill-gold-hover: #ffd07a;
  --pill-ink-bg: #f2efe8;
  --pill-ink-ink: #0f0e0c;
  --pill-ink-hover: #ffffff;
  --pill-purple-bg: #9f85ee;
  --pill-purple-ink: #141310;
  --pill-purple-hover: #b49cf5;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.65);

  --grain-opacity: 0.05;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0f0e0c; --color-surface: #171614; --color-surface-2: #1e1c19;
    --color-surface-offset: #262320; --color-inverse-bg: #faf8f4;
    --color-border: #35312b; --color-divider: #26231f;
    --color-text: #f2efe8; --color-text-muted: #a49d90; --color-text-faint: #776f63;
    --color-text-inverse: #0f0e0c;
    --color-primary: #ffbc3a; --color-primary-hover: #ffd07a;
    --color-accent: #ffbc3a; --color-accent-ink: #141310;
    --color-section: #b49cf5; --color-purple-soft: #211a3a;
    --color-purple-line: #8b6ce0; --color-lock: #ffbc3a;
    --kind-program: #9f85ee; --kind-deadline: #e8795c; --kind-mail: #86b4e0;
    --kind-advance: #ffbc3a;
    --kind-election: #f2efe8; --kind-cert: #7fb08f;
    --map-ink: #b49cf5; --map-opacity: 0.1;
    --pill-gold-bg: #ffbc3a; --pill-gold-ink: #141310; --pill-gold-hover: #ffd07a;
    --pill-ink-bg: #f2efe8; --pill-ink-ink: #0f0e0c; --pill-ink-hover: #ffffff;
    --pill-purple-bg: #9f85ee; --pill-purple-ink: #141310; --pill-purple-hover: #b49cf5;
  }
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.92;
}

.eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-section);
  margin-bottom: var(--space-4);
}

.eyebrow--muted { color: var(--color-text-muted); }

.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 54ch;
}

.muted { color: var(--color-text-muted); }
.tiny { font-size: var(--text-xs); color: var(--color-text-faint); }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-12));
}

.wrap--default { max-width: var(--content-default); }
.wrap--narrow { max-width: var(--content-narrow); }

.section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }
.section--tight { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.section--rule { border-top: 1px solid var(--color-divider); }
.section--offset { background: var(--color-surface-2); }

.section-head { margin-bottom: clamp(var(--space-8), 4vw, var(--space-16)); }
.section-head h2 { font-size: var(--text-xl); }
.section-head .lede { margin-top: var(--space-4); }

.grid { display: grid; gap: clamp(var(--space-5), 2.5vw, var(--space-8)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.split {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-20));
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 0.85fr 1.15fr; }
  .split--even { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   4. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.site-header[data-scrolled='true'] {
  border-bottom-color: var(--color-divider);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}
.brand__mark { color: var(--color-primary); flex-shrink: 0; }
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
  color: var(--color-text);
}
.brand__sub {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 3px;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nav a {
  font-family: var(--font-label);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.nav a:hover { color: var(--color-text); background: var(--color-surface-2); }
.nav a[aria-current='page'] { color: var(--color-text); }
.nav a[aria-current='page']::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 3px;
  background: var(--color-accent);
}

.header-tools { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-2); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-surface);
}
.icon-btn:hover { color: var(--color-text); border-color: var(--color-text-faint); }

.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-grid; }
  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) clamp(var(--space-5), 5vw, var(--space-12)) var(--space-6);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .nav[data-open='true'] { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider); border-radius: 0; font-size: 1.125rem; }
  .nav a[aria-current='page']::after { display: none; }
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}
.btn--primary:hover { background: #ffcb63; transform: translateY(-1px); }
.btn--ghost {
  border-color: var(--color-border);
  color: var(--color-text);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-primary); }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  padding-block: clamp(var(--space-20), 11vw, var(--space-32));
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, var(--color-divider) 0 1px, transparent 1px 88px);
  opacity: 0.75;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -12%;
  width: min(760px, 70vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 188, 58, 0.2), transparent 66%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }

.hero h1 {
  font-size: var(--text-hero);
  max-width: 17ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--color-primary);
}
.hero__lede { margin-top: var(--space-6); font-size: var(--text-lg); }
.hero__actions {
  margin-top: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__stats {
  margin-top: clamp(var(--space-12), 7vw, var(--space-20));
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-8);
}
.stat__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  line-height: 1;
}
.stat__label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 2.5vw, var(--space-8));
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.card h3 {
  font-family: var(--font-label);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: none; }

.card__num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-accent);
  line-height: 1;
}

/* Teaser cards */
.teaser {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  overflow: hidden;
}
.teaser::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--color-accent);
}
.teaser__tag {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  background: var(--color-inverse-bg);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.teaser h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-lg);
  letter-spacing: 0.005em;
  margin-bottom: var(--space-3);
}
.teaser p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: none; }
.teaser ul {
  list-style: none;
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.teaser li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-left: var(--space-5);
  position: relative;
  max-width: none;
}
.teaser li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 2px;
  background: var(--color-accent);
}

/* --------------------------------------------------------------------------
   8. STATE GRID
   -------------------------------------------------------------------------- */
.state-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

.state-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
}
.state-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.state-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.state-card__abbr {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-primary);
}
.state-card__lock { color: var(--color-text-faint); flex-shrink: 0; }
.state-card__name {
  font-family: var(--font-label);
  font-size: var(--text-lg);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
}
.state-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-family: var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. PASSPHRASE GATE
   -------------------------------------------------------------------------- */
.gate {
  min-height: calc(100dvh - 68px);
  display: grid;
  place-items: center;
  padding: var(--space-12) 0;
}
.gate__card {
  width: 100%;
  max-width: 440px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.gate__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  margin-bottom: var(--space-6);
}
.gate__card h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}
.gate__card p { font-size: var(--text-sm); color: var(--color-text-muted); }

.field { margin-top: var(--space-6); }
.field label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.field input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-base);
}
.field input:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(255, 188, 58, 0.25); }

.gate__error {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-section);
  min-height: 1.4em;
}
.gate__foot {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.gate__foot a { color: var(--color-primary); }

[data-gated] { display: none; }
[data-gated][data-unlocked='true'] { display: revert; }

/* --------------------------------------------------------------------------
   10. CALENDAR / TABLES
   -------------------------------------------------------------------------- */
.cal { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.cal table { font-size: var(--text-sm); }
.cal th {
  text-align: left;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.cal td { padding: var(--space-4); border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.cal tr:last-child td { border-bottom: none; }
.cal td:first-child { font-family: var(--font-label); letter-spacing: 0.06em; white-space: nowrap; color: var(--color-text); }

.badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.badge--gold { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }

/* Placeholder blocks for not-yet-built content */
.placeholder {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in oklab, var(--color-surface-2) 70%, transparent) 10px 20px);
  text-align: center;
}
.placeholder h3 {
  font-family: var(--font-label);
  font-size: var(--text-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.placeholder p { margin-inline: auto; font-size: var(--text-sm); color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   11. CONTACT
   -------------------------------------------------------------------------- */
.contact-panel {
  background: var(--color-inverse-bg);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  position: relative;
  overflow: hidden;
}
.contact-panel::after {
  content: '';
  position: absolute;
  bottom: -45%;
  left: -10%;
  width: min(560px, 60vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 188, 58, 0.16), transparent 65%);
  pointer-events: none;
}
.contact-panel > * { position: relative; }
.contact-panel h2 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-xl); }
.contact-panel .lede { color: color-mix(in oklab, var(--color-text-inverse) 72%, transparent); }
.contact-panel .eyebrow { color: var(--color-accent); }

.contact-list { list-style: none; display: grid; gap: var(--space-5); margin-top: var(--space-8); }
.contact-list dt {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-text-inverse) 60%, transparent);
  margin-bottom: var(--space-1);
}
.contact-list dd a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid transparent; }
.contact-list dd a:hover { border-bottom-color: var(--color-accent); }

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-12);
  margin-top: var(--space-8);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer p { font-size: var(--text-xs); color: var(--color-text-faint); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-links a {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
}
.footer-links a:hover { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   13. UTILITIES / MOTION
   -------------------------------------------------------------------------- */
.rule { height: 1px; background: var(--color-divider); border: 0; }
.gold-rule { height: 4px; width: 56px; background: var(--color-accent); border: 0; border-radius: 2px; }

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14. PURPLE ACCENT COMPONENTS (used sparingly, carried from the North Star sheet)
   -------------------------------------------------------------------------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  margin-top: var(--space-6);
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.legend__swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.legend__swatch--purple { background: var(--brand-purple); }
.legend__swatch--gold { background: var(--color-accent); }
.legend__swatch--ink { background: var(--color-inverse-bg); }

/* Track labels (which workstream a date belongs to) */
.track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.track--hiring {
  background: var(--color-purple-soft);
  color: var(--color-section);
  border: 1px solid color-mix(in oklab, var(--color-purple-line) 40%, transparent);
}
.track--ttt {
  background: color-mix(in oklab, var(--color-accent) 22%, transparent);
  color: var(--color-primary);
  border: 1px solid color-mix(in oklab, var(--color-accent) 55%, transparent);
}
.track--voting {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Vertical timeline, purple spine */
.timeline { list-style: none; position: relative; padding-left: var(--space-8); }
.timeline::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-purple-line), color-mix(in oklab, var(--color-purple-line) 15%, transparent));
}
.timeline li { position: relative; padding-bottom: var(--space-6); max-width: none; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-8) + 1px);
  top: 7px;
  width: 10px; height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: 2px solid var(--color-purple-line);
}
.timeline__date {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-section);
}
.timeline__title {
  font-family: var(--font-label);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-top: 2px;
}
.timeline__note { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); max-width: 58ch; }

/* Key-date strip on the landing page */
.datestrip {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.datestrip__cell {
  background: var(--color-surface);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.datestrip__cell--hero { background: var(--color-inverse-bg); color: var(--color-text-inverse); }
.datestrip__cell--hero .datestrip__day { color: var(--color-accent); }
.datestrip__cell--hero .datestrip__label { color: color-mix(in oklab, var(--color-text-inverse) 70%, transparent); }
.datestrip__day {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-text);
}
.datestrip__label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Purple quote / callout */
.callout {
  border-left: 3px solid var(--color-purple-line);
  background: var(--color-purple-soft);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.callout p { font-size: var(--text-sm); color: var(--color-text); max-width: 62ch; }
.callout strong { color: var(--color-section); }

/* Data table for state dates */
.datatable {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  background: var(--color-surface);
}
.datatable table { font-size: var(--text-sm); min-width: 520px; }
.datatable th {
  text-align: left;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.datatable td { padding: var(--space-4); border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.datatable tr:last-child td { border-bottom: none; }
.datatable th:first-child, .datatable td:first-child { position: sticky; left: 0; background: var(--color-surface-2); }
.datatable td:first-child {
  background: var(--color-surface);
  font-family: var(--font-label);
  letter-spacing: 0.06em;
  color: var(--color-text);
  white-space: nowrap;
}

/* Gated page sub-navigation */
/* Section jump links. Filled pills, cycling gold / black / purple, so it is
   obvious at a glance that they are controls and not decorative labels. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: var(--space-4);
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-12));
}
.subnav__label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-right: var(--space-2);
}
.subnav a {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.subnav a:nth-of-type(3n + 1) {
  background: var(--pill-gold-bg);
  color: var(--pill-gold-ink);
}
.subnav a:nth-of-type(3n + 1):hover { background: var(--pill-gold-hover); }
.subnav a:nth-of-type(3n + 2) {
  background: var(--pill-ink-bg);
  color: var(--pill-ink-ink);
}
.subnav a:nth-of-type(3n + 2):hover { background: var(--pill-ink-hover); }
.subnav a:nth-of-type(3n + 3) {
  background: var(--pill-purple-bg);
  color: var(--pill-purple-ink);
}
.subnav a:nth-of-type(3n + 3):hover { background: var(--pill-purple-hover); }
.subnav a:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.subnav a:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

@media (prefers-reduced-motion: reduce) {
  .subnav a { transition: none; }
  .subnav a:hover { transform: none; }
}

.page-head { padding-block: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-8); }
.page-head h1 { font-size: var(--text-2xl); }
.page-head .lede { margin-top: var(--space-5); }

.breadcrumb {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); }

/* Grouped date clusters (the detailed per-state calendar) */
.datecluster + .datecluster { margin-top: var(--space-10); }
.datecluster__title {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-section);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-section);
  display: inline-block;
}

/* Key/value fact list, used for the T4T snapshot and resource meta */
.factlist {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-section);
}
.factlist dt {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* muted, not faint: faint drops to ~3.4:1 on the dark surface */
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.factlist dd { font-size: var(--text-sm); color: var(--color-text); }

/* Linked material cards (curriculum decks, research, official sources) */
.linkgrid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--space-6);
}
.linkcard {
  display: block;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.linkcard:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.linkcard__kind {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-section);
}
.linkcard__title {
  font-family: var(--font-label);
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-top: var(--space-2);
  line-height: 1.25;
}
.linkcard__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

/* Plain annotated link list, used for official/government sources */
.linklist { list-style: none; display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.linklist li { border-left: 2px solid var(--color-divider); padding-left: var(--space-5); }
.linklist a {
  font-family: var(--font-label);
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.linklist a:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.linklist p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); max-width: 62ch; }

/* Warning variant of .callout, for unresolved-placeholder notices */
.callout--warn { border-left-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 10%, transparent); }
.callout--warn strong { color: var(--color-text); }
.callout--warn ul { margin-top: var(--space-3); padding-left: var(--space-5); }
.callout--warn li { font-size: var(--text-sm); color: var(--color-text); }

/* Module list for the curriculum outline */
.modules { list-style: none; counter-reset: mod; display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.modules li {
  counter-increment: mod;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  max-width: none;
}
.modules li::before {
  content: counter(mod, decimal-leading-zero);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--color-section);
}
.modules li:last-child { border-bottom: none; }
/* Both text nodes sit in column 2; without this the description wraps into the
   2.5rem counter column on a second row. */
.modules strong, .modules span { grid-column: 2; }
.modules strong {
  font-family: var(--font-label);
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 400;
}
.modules span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* --------------------------------------------------------------------------
   14b. EVENT BUBBLES
   -------------------------------------------------------------------------- */
.bubble {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--kind-deadline);
  flex: 0 0 auto;
}
.bubble--program { background: var(--kind-program); }
.bubble--deadline { background: var(--kind-deadline); }
.bubble--mail { background: var(--kind-mail); }
.bubble--advance { background: var(--kind-advance); }
.bubble--election { background: var(--kind-election); }
.bubble--cert { background: var(--kind-cert); }

/* Hollow: the date exists, but a county may not actually offer it */
.bubble--outline { background: transparent; box-shadow: inset 0 0 0 2px var(--kind-advance); }
.bubble--program.bubble--outline { box-shadow: inset 0 0 0 2px var(--kind-program); }

/* Multi-day runs read as a bar rather than a row of separate dots */
.bubble--span { border-radius: 1px; width: 100%; min-width: 0.6rem; height: 0.4rem; }
.bubble--span.bubble--first { border-radius: 1px 0 0 1px; }
.bubble--span.bubble--last { border-radius: 0 1px 1px 0; }
.bubble--span.bubble--mid { border-radius: 0; }

/* In the dates table the bubble sits just before the date */
.datecluster th .bubble { margin-right: 0.5rem; }

/* --------------------------------------------------------------------------
   14c. MONTH CALENDAR WIDGET
   -------------------------------------------------------------------------- */
.monthcal {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.monthcal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.monthcal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-text);
}
.monthcal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.monthcal__nav:hover:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.monthcal__nav:disabled { opacity: 0.3; cursor: default; }

.monthcal__viewport {
  /* Contain absolutely positioned screen-reader captions within the scroller. */
  position: relative;
  display: flex;
  /* Panels keep their natural height rather than stretching to the tallest
     month; month-calendar.js sets the track height to match the active one. */
  align-items: flex-start;
  transition: height 0.3s ease;
  overflow-x: auto;
  overflow-y: hidden;
  /* Proximity, not mandatory: a mandatory track re-snaps to the first panel
     whenever the layout changes (a height sync, a fold opening above it), which
     silently throws the reader back to September. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.monthcal__viewport::-webkit-scrollbar { display: none; }
.monthcal__viewport:focus-visible { outline: 2px solid var(--color-purple-line); outline-offset: -3px; }

.monthcal__month {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  padding: var(--space-5);
}

.monthcal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.monthcal__grid thead th {
  padding: 0 0 var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  border: 0;
  background: none;
}
.monthcal__grid thead abbr { text-decoration: none; border: 0; cursor: help; }

.monthcal__day {
  height: 3.25rem;
  padding: 0.3rem 0.2rem;
  vertical-align: top;
  text-align: center;
  border: 1px solid var(--color-divider);
  background: none;
  transition: background 0.12s ease;
}
.monthcal__num {
  display: block;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  line-height: 1.25;
}
.monthcal__day.is-outside { background: var(--color-surface-2); }
.monthcal__day.is-outside .monthcal__num { color: var(--color-text-faint); }

.monthcal__day.is-today .monthcal__num {
  display: inline-block;
  min-width: 1.55rem;
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 700;
}
.monthcal__day.has-events:hover,
.monthcal__day.is-linked { background: var(--color-purple-soft); }
.monthcal__day:focus-visible { outline: 2px solid var(--color-purple-line); outline-offset: -2px; }

/* --- Named events inside the day cells -------------------------------------
   The chips are the wide-screen rendering; the dot row below is the narrow
   fallback. Exactly one of the two is visible at any width. */
.monthcal__events {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 0.3rem 0 0;
  text-align: left;
}
.monthcal__chip {
  display: block;
  min-height: 0.95rem;
  padding: 1px 0;
  border-radius: 0.2rem;
  border-left: 2px solid currentColor;
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: var(--kind-deadline);
  font-size: 0.625rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.monthcal__chiptext {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text);
  font-weight: 500;
}
.monthcal__chip--program  { color: var(--kind-program); }
.monthcal__chip--deadline { color: var(--kind-deadline); }
.monthcal__chip--mail     { color: var(--kind-mail); }
.monthcal__chip--advance  { color: var(--kind-advance); }
/* Election Day anchors the whole cycle, so it reads as a solid block rather
   than another tint */
.monthcal__chip--election {
  color: var(--kind-election);
  background: var(--kind-election);
  border-left-color: var(--kind-election);
}
.monthcal__chip--election .monthcal__chiptext { color: var(--color-bg); font-weight: 700; }
.monthcal__chip--cert     { color: var(--kind-cert); }

/* A window that is offered at county discretion reads as a hollow chip */
.monthcal__chip--outline {
  background: none;
  border: 1px dashed currentColor;
  border-left-width: 2px;
  border-left-style: solid;
}
/* Invisible lane spacer: holds a day's slot open so a band stays level */
.monthcal__chip--empty { background: none; border: 0; visibility: hidden; }
/* Continuation days carry the band but no repeated name */
.monthcal__chip--cont { min-height: 0.5rem; border-left: 0; }
/* Square off whichever edge continues into the neighbouring cell */
.monthcal__chip--span.is-openr { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.monthcal__chip--span.is-openl { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }
.monthcal__chipmore {
  display: block;
  font-size: 0.5625rem;
  line-height: 1.3;
  padding-left: 0.3rem;
  color: var(--color-text-muted);
}

/* Scoped through .monthcal__day so these beat the base .monthcal__dots and
   .monthcal__day rules further down the file regardless of source order. */
@media (min-width: 60rem) {
  .monthcal__day .monthcal__events { display: flex; }
  .monthcal__day .monthcal__dots { display: none; }
  /* height, not min-height: min-height has no effect on a table cell, where
     height already behaves as a minimum. */
  /* Side padding goes to zero so a chip fills its cell exactly: it then meets
     the next cell's chip at the border and a multi-day run reads as one band,
     without the overhang that pushed the last column past the grid edge. */
  .monthcal__grid .monthcal__day { height: 5.25rem; padding: 0.3rem 0; text-align: left; }
  .monthcal__day .monthcal__chiptext { padding: 0 0.3rem; }
  .monthcal__day .monthcal__num { text-align: center; }
}

.monthcal__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 0.3rem;
  padding: 0 1px;
}
.monthcal__more {
  font-size: 0.625rem;
  line-height: 1;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.monthcal__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-divider);
  display: grid;
  gap: 0.15rem;
}
.monthcal__list li {
  display: grid;
  grid-template-columns: 0.75rem 8.75rem 1fr;
  align-items: baseline;
  gap: var(--space-3);
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.monthcal__list li.is-linked { background: var(--color-purple-soft); }
.monthcal__listdate {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.monthcal__listbody { font-size: var(--text-sm); }
.monthcal__listbody strong { display: block; font-weight: 600; color: var(--color-text); }
.monthcal__listbody .tiny { display: block; margin-top: 0.15rem; }
.monthcal__empty {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.monthcal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.monthcal__key {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.monthcal__hint {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

@media (max-width: 34rem) {
  .monthcal__month { padding: var(--space-4) var(--space-3); }
  .monthcal__day { height: 2.9rem; padding: 0.25rem 0.1rem; }
  .monthcal__list li { grid-template-columns: 0.75rem 1fr; row-gap: 0.1rem; }
  .monthcal__listdate { grid-column: 2; }
  .monthcal__listbody { grid-column: 2; }
  .monthcal__legend { gap: var(--space-2) var(--space-4); }
}

/* --------------------------------------------------------------------------
   14d. COLLAPSIBLE SECTIONS
   -------------------------------------------------------------------------- */
.fold { border-top: 1px solid var(--color-divider); }
.fold > summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover .fold__label { color: var(--color-primary); }
.fold > summary:focus-visible { outline: 2px solid var(--color-purple-line); outline-offset: 3px; }

.fold__chev {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.15rem;
  color: var(--color-text-faint);
  transition: transform 0.18s ease, color 0.18s ease;
}
.fold[open] > summary .fold__chev { transform: rotate(90deg); color: var(--color-primary); }

.fold__label {
  flex: 1 1 auto;
  /* h2/h3 live inside <summary>, so their default margins have to go */
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: color 0.15s ease;
}
.fold__count {
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.fold__body { padding: 0 0 var(--space-6); }

/* Section-level folds: bigger label, no top rule (the section has its own) */
.fold--section { border-top: 0; }
.fold--section > summary { padding: 0 0 var(--space-5); }
.fold--section > summary .fold__label {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: 0.01em;
  line-height: 1.05;
}
.fold--section > summary .fold__chev { width: 1.1rem; height: 1.1rem; margin-top: 0.3rem; }
.fold--section > .fold__body { padding-bottom: 0; }

.foldbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.foldbar__btn {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.foldbar__btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  .fold__chev { transition: none; }
  .monthcal__viewport { transition: none; }
}

/* --------------------------------------------------------------------------
   14e. GEORGIA MAP BACKDROP
   -------------------------------------------------------------------------- */
/* The outline is sized to bleed past the section edge, so the section has to
   clip it. Without this the absolutely positioned art widens the document and
   the whole page scrolls sideways. */
.mapback { position: relative; isolation: isolate; overflow: hidden; }
/* Sized by HEIGHT, not width. A section can be 300px tall when collapsed or
   2000px when open; driving the outline off the width let it grow far taller
   than its section, so all a reader saw was a cropped fragment of coastline
   rather than a recognisable state. Bounding the height keeps the whole
   silhouette inside the section at every length. */
.mapback__art {
  position: absolute;
  z-index: -1;
  top: 50%;
  /* Fully inset: a negative offset clipped the coastline, which is the part
     that makes the silhouette read as Georgia at all. */
  right: 2.5%;
  /* min(), never clamp(): a lower bound would force the outline taller than
     a collapsed section and crop it back to an unreadable fragment. */
  height: min(84%, 32rem);
  width: auto;
  transform: translateY(-50%);
  color: var(--map-ink);
  opacity: var(--map-opacity);
  pointer-events: none;
}
.mapback__art svg { display: block; height: 100%; width: auto; }

/* Alternate the side so consecutive sections do not look stamped */
.mapback--left > .mapback__art { right: auto; left: 2.5%; }

@media (max-width: 60rem) {
  .mapback__art {
    height: min(76%, 18rem);
    right: -14%;
    opacity: calc(var(--map-opacity) * 0.75);
  }
  .mapback--left > .mapback__art { left: -14%; right: auto; }
}

/* --------------------------------------------------------------------------
   15. FIXES & OVERRIDES
   -------------------------------------------------------------------------- */

/* `.gate { display: grid }` outranks the [hidden] attribute, so restore it. */
.gate[hidden] { display: none; }

/* ---- Inverse hero -------------------------------------------------------
   The hero is always black-on-gold regardless of theme. On a light surface
   real #FFBC3A gold fails contrast as text, and dimming it to an accessible
   olive kills the brand. Keeping the hero permanently dark lets the actual
   brand gold appear at full saturation with AA contrast. */
.hero {
  background: #0f0e0c;
  color: #f2efe8;
}
.hero .eyebrow { color: #b49cf5; }             /* purple, AA on near-black */
.hero h1 { color: #f7f5f0; }
.hero h1 em { color: var(--brand-gold); }
.hero__lede { color: rgba(242, 239, 232, 0.76); }
.hero::before {
  background-image: repeating-linear-gradient(90deg, rgba(242, 239, 232, 0.09) 0 1px, transparent 1px 88px);
  opacity: 1;
}
.hero__stats { border-top-color: rgba(242, 239, 232, 0.16); }
.hero .stat__num { color: #f7f5f0; }
.hero .stat__label { color: rgba(242, 239, 232, 0.6); }
.hero .btn--ghost { border-color: rgba(242, 239, 232, 0.3); color: #f7f5f0; }
.hero .btn--ghost:hover { border-color: var(--brand-gold); color: var(--brand-gold); }

/* The hero heading is the one place display type runs at full scale. Keep the
   two highlighted words on their own visual line rather than orphaning them. */
.hero h1 { max-width: 19ch; }
@media (max-width: 640px) { .hero h1 { max-width: 100%; } }

/* Georgia KYR: scoped field-guide components; all other state layouts unchanged. */
.kyr { border-top: 3px solid var(--color-purple-line); }
.kyr [id] { scroll-margin-top: 7rem; }
.kyr__header { display: flex; justify-content: space-between; gap: var(--space-8); align-items: start; }
.kyr__header h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.kyr__review { flex-shrink: 0; font-size: var(--text-sm); border-left: 3px solid var(--color-accent); padding-left: var(--space-4); line-height: 1.65; }
.kyr__scope { max-width: 85ch; color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-5) 0 var(--space-8); }
.kyr__topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-8); }
.kyr__topics a { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-5); background: var(--color-purple-soft); color: var(--color-text); text-decoration: none; border-bottom: 3px solid var(--color-purple-line); min-height: 108px; }
.kyr__topics a:hover { background: var(--color-surface-offset); }
.kyr__topics a > span:last-child { margin-left: auto; color: var(--color-section); }
.kyr__topics strong { display: block; font-size: var(--text-base); }
.kyr__topics small { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.kyr__index { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-section); }
.kyr__scripts { background: #141310; color: #faf8f4; padding: clamp(var(--space-5), 3vw, var(--space-8)); margin-bottom: var(--space-8); }
.kyr__scripts .eyebrow { color: var(--brand-gold); }
.kyr__script-grid { display: grid; grid-template-columns: 0.8fr 1fr 1.3fr; gap: var(--space-6); margin: var(--space-5) 0; }
.kyr__script-grid p { font-size: var(--text-lg); font-weight: 700; line-height: 1.4; padding-left: var(--space-4); border-left: 2px solid var(--brand-gold); }
.kyr__script-note { color: #d3cdc3; font-size: var(--text-sm); max-width: 100ch; }
.kyr__script-note a { color: var(--brand-gold); }
.kyr h4 { font: 700 var(--text-lg)/1.3 var(--font-body); margin: var(--space-6) 0 var(--space-3); }
.kyr h5 { font: 700 var(--text-lg)/1.3 var(--font-body); margin: var(--space-2) 0 var(--space-3); }
.kyr .fold__body > p { max-width: 90ch; }
.kyr .tiny { color: var(--color-text-muted); }
.kyr .fold__body p + p { margin-top: var(--space-4); }
.kyr .fold__label { text-wrap: balance; }
.kyr__toggle { width: 16px; height: 16px; flex: 0 0 16px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); margin-right: var(--space-2); }
.kyr details[open] > summary .kyr__toggle { transform: rotate(45deg); }
.kyr__tag { display: inline-block; background: var(--color-purple-soft); color: var(--color-section); padding: var(--space-1) var(--space-2); margin: 0 var(--space-2) var(--space-2) 0; font-size: var(--text-xs); font-weight: 700; vertical-align: middle; border: 1px solid var(--color-purple-line); }
.kyr__tag--duty { background: var(--color-surface-offset); color: var(--color-text); border-color: var(--color-text-muted); }
.kyr__tag--practice { background: var(--color-surface-2); color: var(--color-primary); border-color: var(--color-primary); }
.kyr__compare, .kyr__two, .kyr__law-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-6) 0; }
.kyr__compare > div { padding: var(--space-6); background: var(--color-surface-2); border-top: 4px solid var(--color-purple-line); }
.kyr__compare > div + div { border-top-color: var(--color-accent); }
.kyr__label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-section); }
.kyr__caution { margin: var(--space-6) 0; padding: var(--space-5) var(--space-6); border-left: 4px solid var(--color-accent); background: var(--color-surface-2); }
.kyr__caution h4 { margin-top: 0; }
.kyr__roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0 var(--space-8); }
.kyr__roles article { display: flex; flex-direction: column; padding: var(--space-5); border: 1px solid var(--color-border); border-top: 4px solid var(--color-purple-line); background: var(--color-surface); }
.kyr__roles article:nth-child(2) { border-top-color: var(--color-accent); }
.kyr__roles article:nth-child(3) { border-top-color: var(--color-text-muted); }
.kyr__roles p { font-size: var(--text-sm); }
.kyr__roles p.kyr__role-foot { margin-top: auto; padding-top: var(--space-5); font-weight: 700; }
.kyr__law-grid article { padding: var(--space-6); background: var(--color-surface-2); }
.kyr__metric { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-section); }
.kyr__boundary { padding: var(--space-6); margin-top: var(--space-8); border: 2px solid var(--color-purple-line); display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--space-6); }
.kyr__boundary h4 { margin-top: var(--space-3); }
.kyr__boundary .kyr__metric { font-size: var(--text-2xl); }
.kyr__metric span { white-space: nowrap; }
.kyr__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); padding: 0; margin: var(--space-6) 0; list-style: none; counter-reset: kyr-step; }
.kyr__steps li { counter-increment: kyr-step; border-top: 2px solid var(--color-purple-line); padding-top: var(--space-4); }
.kyr__steps li::before { content: counter(kyr-step, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-section); margin-bottom: var(--space-3); }
.kyr__steps strong, .kyr__steps span { display: block; }
.kyr__steps span { font-size: var(--text-sm); margin-top: var(--space-2); }
.kyr__help { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-8); background: var(--color-purple-soft); padding: var(--space-6); margin: var(--space-8) 0 var(--space-4); }
.kyr__help h3 { font-size: var(--text-xl); margin: var(--space-2) 0 var(--space-4); }
.kyr__help h4 { margin-top: 0; font-size: var(--text-base); }
.kyr__help p { font-size: var(--text-sm); }
.kyr__help a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
.kyr__phone { font-weight: 700; font-size: var(--text-lg); }
@media (max-width: 900px) {
  .kyr__topics, .kyr__roles, .kyr__help { grid-template-columns: 1fr; }
  .kyr__topics a { min-height: 88px; }
  .kyr__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kyr__header { flex-direction: column; gap: var(--space-4); }
  .kyr__compare, .kyr__two, .kyr__law-grid, .kyr__boundary, .kyr__script-grid, .kyr__steps { grid-template-columns: 1fr; }
  .kyr .fold__count { display: none; }
  .kyr .fold__body { padding-left: var(--space-3); padding-right: var(--space-3); }
  .kyr__compare > div, .kyr__law-grid article, .kyr__boundary, .kyr__caution { padding: var(--space-4); }
}
@media print {
  .kyr__topics { display: none; }
  .kyr__scripts { background: white; color: black; border: 1px solid black; }
  .kyr__script-note, .kyr__script-note a, .kyr__scripts .eyebrow { color: black; }
  .kyr__roles article, .kyr__law-grid article { break-inside: avoid; }
}