/* Barlow Semi Condensed, self-hosted. Google's latin subset (U+0000-00FF),
   which covers every accented character the Spanish pages use.
   Licensed under the SIL OFL; the licence ships alongside at
   /assets/fonts/OFL.txt and must stay there.

   These filenames are stable and /assets/* is cached immutable for a year, so
   a replacement font file must be given a NEW filename or returning visitors
   keep the old one. */
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-semi-condensed-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-semi-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-semi-condensed-700.woff2") format("woff2");
}

/* Design tokens from the approved handoff (content/design/README.md).
   Palette names are the brand guide's own. Do not invent values here:
   anything not listed was deliberately excluded from this design. */
:root {
  /* Colour */
  --deep-anchor: #0F1E33;      /* header, footer, hero, dark CTA bands, pillar cards */
  --industrial-blue: #1E3A5F;  /* interior headers, input borders, label text */
  --deep-patina: #0F766E;      /* primary button fill, links, accent bullets */
  --soft-patina: #A7D3D3;      /* secondary buttons, accent type on dark, section bg */
  --light-air: #DCEEFF;        /* body text on dark, light sections, list cards */
  --soft-copper: #EAD8CC;      /* warm light sections, editorial panels */
  --deep-copper: #8C4A2F;      /* rules, stat highlights, primary hover */
  --white: #FFFFFF;
  --soft-charcoal: #1E293B;    /* body copy default */

  /* Hairlines and washes on dark grounds */
  --rule-chrome: rgba(167, 211, 211, 0.28);   /* header/footer borders */
  --rule-hero: rgba(167, 211, 211, 0.3);
  --rule-pill: rgba(167, 211, 211, 0.45);
  --rule-menu: rgba(167, 211, 211, 0.18);
  --ghost-hover: rgba(167, 211, 211, 0.16);
  --dot-glow: rgba(140, 74, 47, 0.32);

  /* Type. Citrus Gothic Solid replaces the handoff's Anton stand-in: the
     README says to swap when the campaign licenses Citrus, and it is licensed
     through the Adobe kit. Sizes and tracking are kept exactly as specified. */
  --font-display: "citrus-gothic-solid", "citrus-gothic", Anton, Impact, sans-serif;
  --font-sans: "Barlow Semi Condensed", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-body: 19px;
  --lh-body: 1.55;

  /* Spacing is fluid clamp() throughout - there is no fixed scale. */
  --section-y: clamp(3rem, 7vw, 5.5rem);
  --section-x: clamp(1rem, 4vw, 3rem);
  --section-y-lg: clamp(3.5rem, 8vw, 7rem);
  --band-cta-y: clamp(4rem, 9vw, 8rem);
  --band-narrow-y: clamp(2.5rem, 5vw, 4rem);
  --gap-cards: clamp(1rem, 2vw, 1.75rem);
  --gap-columns: clamp(2rem, 5vw, 4rem);
  --gap-hairline: 2px;          /* deliberate hairline, never round this up */
  --pad-card: clamp(1.5rem, 2.6vw, 2rem);
  --pad-card-lg: clamp(1.75rem, 3vw, 2.5rem);

  --max-page: 1280px;
  --max-longform: 1100px;
  --max-faq: 960px;
  --max-factsheet: 1000px;
  --max-form: 880px;

  /* The design has no radii, shadows or gradients. The two exceptions are
     named here so nothing else reaches for them. */
  --radius-circle: 50%;
  --shadow-election-dot: 0 0 0 4px var(--dot-glow);

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

body {
  margin: 0;
  background: var(--white);
  color: var(--soft-charcoal);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

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

/* The display face is uppercase by design and used only for short impact
   language. Longer headings stay in Barlow Semi Condensed. */
h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  text-wrap: balance;
  margin-block: 0 0.5em;
}
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.04;
  text-transform: uppercase;
  margin-block: 1.5em 0.5em;
}
h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-block: 1.5em 0.4em;
}
p { text-wrap: pretty; max-width: 68ch; }
a { color: var(--deep-patina); }

/* Every page is a stack of full-bleed bands, so main carries no gutter and
   no measure. Each band sets its own padding and inner max-width. */
main > * { max-width: none; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--section-x); top: var(--section-x); z-index: 60;
  background: var(--deep-patina); color: var(--white); padding: 0.5rem 1rem;
}
/* The design specifies this focus ring explicitly. */
:focus-visible { outline: 3px solid var(--soft-patina); outline-offset: 3px; }

/* ---------- Buttons ---------- */

.cta-row { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 2vw, 1rem); margin-block: 1.5rem; }
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 36px;
  border: 0;
  cursor: pointer;
  background: var(--deep-patina);
  color: var(--white);
}
.btn:hover { background: var(--deep-copper); color: var(--white); }
.btn--donate { padding: 12px 22px; font-size: 16px; }
.btn--secondary { background: var(--soft-patina); color: var(--deep-anchor); }
.btn--secondary:hover { background: var(--white); color: var(--deep-anchor); }
.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--soft-patina);
  padding: 16px 34px;
}
.btn--ghost:hover { background: var(--ghost-hover); color: var(--white); }

/* ---------- Forms ---------- */

.kform { max-width: var(--max-form); }
.kform__row { display: flex; flex-direction: column; gap: 6px; margin-block: 18px; }
.kform__row label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--industrial-blue);
}
.kform__row input, .kform__row select, .kform__row textarea {
  font: inherit;
  padding: 13px 14px;
  border: 2px solid var(--industrial-blue);
  border-radius: 0;
  background: var(--white);
  color: var(--soft-charcoal);
}
.kform__row [aria-invalid="true"] { border-color: var(--deep-copper); }
.kform__error { color: var(--deep-copper); font-size: 15px; }
.kform__consent { font-size: 15px; max-width: 80ch; }
.kform__status:empty { display: none; }
.kform__status { margin-block-start: 1rem; font-weight: 700; color: var(--deep-patina); }
.kform__status.is-error { color: var(--deep-copper); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--deep-anchor);
  border-block-end: 1px solid var(--rule-chrome);
}
.site-header__inner {
  max-width: var(--max-page);
  margin-inline: auto;
  padding: 12px var(--section-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* Donate is a header-level item now, so it sits on this gap rather than the
     nav's. The design's 2.5rem maximum pushed the row past its fit width. */
  gap: clamp(0.65rem, 1.4vw, 1.5rem);
}
.site-header__brand { display: block; line-height: 0; }
.site-header__brand img { width: 200px; height: auto; }

/* Donate is a sibling of the nav, not a member of it, so it survives the
   mobile collapse. On desktop the nav takes the free space and the button
   stays rightmost, which is where the design puts it. */
.site-nav { margin-inline-start: auto; }
.site-header__donate { flex: none; }

/* Six links plus a language switch and the Donate button. The design carried
   four links at 0.1em tracking and a 1.75rem gap; at six that wrapped to a
   second row on every screen narrower than 1240px in English and at every
   width at all in Spanish, which also silently broke --header-h below. The
   gap and tracking are tightened just enough to hold one row. */
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.5rem, 0.95vw, 1rem);
}
.site-nav__link {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--light-air);
  padding-block: 8px;
  border-block-end: 2px solid transparent;
  /* A nav label must never break mid-phrase into a taller header. */
  white-space: nowrap;
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--soft-patina);
  border-block-end-color: var(--soft-patina);
}
.site-nav__link--lang { color: var(--soft-patina); }
.site-nav__link--lang:hover { color: var(--white); border-block-end-color: var(--white); }

.site-header__toggle {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid var(--soft-patina);
  color: var(--soft-patina);
  cursor: pointer;
}
.site-header__toggle:hover { background: var(--ghost-hover); }
/* Specificity matters here: a bare .site-header__toggle-close (0,1,0) loses to
   .site-header__toggle > span (0,1,1) and both glyphs render at once. */
.site-header__toggle > span { display: inline-flex; }
.site-header__toggle > .site-header__toggle-close { display: none; }
.site-header.is-menu-open .site-header__toggle-open { display: none; }
.site-header.is-menu-open .site-header__toggle-close { display: inline-flex; }

/* The header collapses at 1040px, not at the layout's 940px. Six links fit one
   row in English down to about 1010, but Spanish runs longer and wrapped
   below about 1030 - and a wrapped header is 225px tall while --header-h
   still claims 141px, so every in-page anchor would land underneath it.
   Collapsing the header 100px earlier closes that window in both languages and
   leaves the rest of the layout on the design's single 940px breakpoint.
   menu.js carries the same number; change both together. */
@media (max-width: 1039px) {
  .site-header__toggle { display: inline-flex; }
  .site-nav { display: none; flex-basis: 100%; margin-inline-start: 0; }
  .site-header.is-menu-open .site-nav { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list > li + li { border-block-start: 1px solid var(--rule-menu); }
  .site-nav__link { font-size: 17px; padding-block: 15px; border-block-end: 0; white-space: normal; }

  /* Row becomes logo, Donate, hamburger. Only the button and the hamburger
     swap against DOM order, and they sit side by side, so nothing moves far
     from where a keyboard lands on it. */
  .site-header__brand { order: 1; }
  .site-header__donate { order: 2; margin-inline-start: auto; }
  .site-header__toggle { order: 3; }
  .site-nav { order: 4; }
}

/* On a phone the 200px logo, the button and the 46px hamburger do not fit one
   row, and a wrapped header is 200px tall. The logo is sized by height here so
   the header height stays predictable and --header-h can follow it. */
@media (max-width: 519px) {
  .site-header__brand img { width: auto; height: 64px; }
  .site-header__donate { padding: 10px 16px; font-size: 14px; letter-spacing: 0.06em; }
}
@media (max-width: 359px) {
  .site-header__brand img { height: 52px; }
  .site-header__donate { padding: 9px 12px; font-size: 13px; }
}

.site-footer {
  background: var(--deep-anchor);
  color: var(--light-air);
  padding: var(--section-y-lg) var(--section-x) 0;
}
.site-footer__inner {
  max-width: var(--max-page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li + li { margin-block-start: 10px; }
.site-footer__col a {
  color: var(--light-air);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-footer__col a:hover { color: var(--soft-patina); text-decoration: underline; }
.site-footer__heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft-patina);
  margin: 0 0 14px;
}
.site-footer__col--brand img { width: min(260px, 100%); height: auto; }
.site-footer__committee { font-weight: 600; margin-block: 14px 6px; }
.site-footer__tagline { color: var(--soft-patina); margin: 0; }
.site-footer__blurb { color: var(--soft-patina); margin: 0 0 14px; font-size: 15px; }
/* .kform is a two-column grid for full page forms. In the narrow footer column
   that stretches the submit button to the height of the label+input cell, so
   this instance opts out of the grid and stacks.

   Note the doubled class: the .kform grid rule is defined later in this file at
   equal specificity, so a lone .site-footer__signup would lose on source order. */
.kform.site-footer__signup {
  display: block;
  max-width: 100%;
  margin-block-start: 0;
}
.site-footer__signup .kform__row { margin-block: 0 12px; }
.site-footer__signup label {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--soft-patina);
}
.site-footer__signup input {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  color: var(--deep-anchor);
  background: var(--white);
  border: 1px solid var(--rule-chrome);
}
.site-footer__signup .kform__consent {
  font-size: 13px;
  color: var(--soft-patina);
  margin-block-start: 10px;
}
.site-footer__signup .kform__status { font-size: 14px; }
.btn--compact {
  /* width:auto keeps the button at its text width if it ever lands in a
     stretching flex or grid context again. */
  display: inline-block;
  width: auto;
  padding: 12px 26px;
  font-size: 15px;
}

.site-footer__legal {
  max-width: var(--max-page);
  margin-inline: auto;
  margin-block-start: var(--section-y);
  padding-block: 24px;
  border-block-start: 1px solid var(--rule-chrome);
}
.site-footer__legal p { font-size: 15px; max-width: 80ch; margin: 0; }

.icon { flex: none; vertical-align: middle; }

/* ---------- Shared page components ---------- */

.page-header {
  position: relative;
  overflow: hidden;
  background: var(--industrial-blue);
  color: var(--white);
  padding: clamp(3rem, 6vw, 5rem) var(--section-x);
}
.page-header--dark { background: var(--deep-anchor); }
/* One decorative circle, per the design. Never interactive. */
.page-header::after {
  content: "";
  position: absolute;
  top: -45%;
  right: -4%;
  width: clamp(260px, 26vw, 440px);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--soft-patina);
  opacity: 0.22;
  pointer-events: none;
}
.page-header__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-page);
  margin-inline: auto;
}
.page-header__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  text-transform: uppercase;
  color: var(--soft-copper);
  margin: 0 0 0.6em;
}
.page-header__bar { flex: none; width: 34px; height: 3px; background: var(--deep-copper); }
.page-header h1 { color: var(--white); margin-block-end: 0; }
.page-header__lead { font-size: 20px; max-width: 58ch; color: var(--light-air); margin-block-start: 0.8em; }

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--deep-anchor);
  color: var(--light-air);
  padding: var(--band-cta-y) var(--section-x);
}
.cta-band::after {
  content: "";
  position: absolute;
  bottom: -30%;
  right: -6%;
  width: clamp(240px, 28vw, 460px);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--deep-patina);
  opacity: 0.45;
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; max-width: var(--max-page); margin-inline: auto; }
.cta-band h2 {
  color: var(--white);
  font-size: clamp(2rem, 4.8vw, 3.8rem);
  line-height: 0.98;
  max-width: 16ch;
  margin-block-start: 0;
}
.cta-band__lead { color: var(--light-air); max-width: 52ch; }

/* ---------- Home ---------- */

/* Home lays out full-bleed bands, so main's gutter and measure lift here.
   The shared bands cancel that gutter with negative inline margins, so those
   must be zeroed too or they pull past the viewport edge. */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--deep-anchor);
  color: var(--white);
  padding: clamp(3rem, 7vw, 6.5rem) var(--section-x) 0;
}
.hero__circle {
  position: absolute;
  border-radius: var(--radius-circle);
  aspect-ratio: 1;
  pointer-events: none;
}
.hero__circle--tr {
  top: -14%; right: -6%;
  width: clamp(320px, 38vw, 620px);
  background: var(--deep-patina);
  opacity: 0.55;
}
.hero__circle--bl {
  bottom: -22%; left: -8%;
  width: clamp(200px, 20vw, 340px);
  background: var(--soft-patina);
  opacity: 0.18;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-page);
  margin-inline: auto;
  display: grid;
  /* Fixed two-track count. auto-fit resolved to three equal tracks at ~1265px
     and pushed the photo out of its column - the same failure the handoff
     warned about on the photo strip. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--gap-columns);
}
.hero__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 0.3em;
  max-width: none;
}
.hero__eyebrow span { display: block; }
.hero__eyebrow-accent { color: var(--soft-patina); }
.hero h1 { color: var(--white); max-width: 22ch; }
.hero__para { color: var(--light-air); max-width: 46ch; }
.hero__para--accent { color: var(--soft-patina); font-weight: 600; }
.hero__media { min-height: clamp(340px, 42vw, 560px); position: relative; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hero__strip {
  position: relative;
  z-index: 1;
  max-width: var(--max-page);
  margin-inline: auto;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  margin-block-start: clamp(2rem, 4vw, 3rem);
  border-block-start: 1px solid var(--rule-hero);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.hero__election {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--light-air);
  margin: 0;
  max-width: none;
}
.hero__dot {
  flex: none;
  width: 11px; height: 11px;
  border-radius: var(--radius-circle);
  background: var(--deep-copper);
  box-shadow: var(--shadow-election-dot);
}
.hero__pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hero__pills li {
  border: 1px solid var(--rule-pill);
  /* Fully rounded: the radius only needs to exceed half the pill's height,
     so a large fixed value stays oval at any font size or zoom level. */
  border-radius: 999px;
  color: var(--soft-patina);
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 7px 18px;
  white-space: nowrap;
}

.neighbor { background: var(--white); padding: var(--section-y) var(--section-x); }
.neighbor__inner {
  max-width: var(--max-page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.neighbor__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.neighbor__panel {
  position: relative;
  z-index: 2;
  background: var(--light-air);
  padding: var(--pad-card-lg);
  /* Deliberate overlap; collapses to zero on narrow. */
  margin-left: clamp(-4rem, calc(-4vw + 1.5rem), 0rem);
  margin-top: clamp(-2.5rem, calc(-2vw + 0.75rem), 0rem);
}
.neighbor__panel h2 { margin-block-start: 0; }

.pillars { background: var(--industrial-blue); color: var(--light-air); padding: var(--section-y-lg) var(--section-x); }
.pillars__inner { max-width: var(--max-page); margin-inline: auto; }
.pillars h2 { display: flex; align-items: center; gap: 20px; color: var(--white); margin-block-start: 0; }
.pillars__bar { flex: none; width: 44px; height: 4px; background: var(--deep-copper); }
.pillars__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-cards);
}
.pillar { background: var(--deep-anchor); padding: var(--pad-card-lg); }
.pillar__icon { color: var(--soft-patina); display: block; }
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: 0;
  color: var(--soft-patina);
  margin-block: 0.4em 0.3em;
}
.pillar p { color: var(--light-air); max-width: none; }

.voice { position: relative; overflow: hidden; background: var(--white); padding: var(--section-y-lg) var(--section-x); }
.voice__circle {
  position: absolute; top: -20%; right: -8%;
  width: clamp(240px, 26vw, 420px); aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--soft-patina); opacity: 0.3; pointer-events: none;
}
.voice__inner {
  position: relative; z-index: 1;
  max-width: var(--max-page); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns);
}
.voice__inner > div > h2 { margin-block-start: 0; }
.voice__stat { border-block-start: 4px solid var(--deep-copper); padding-block-start: 1rem; max-width: none; }
.voice__date {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 0.94;
  text-transform: uppercase;
  color: var(--deep-copper);
}
.voice__label {
  display: block;
  font-weight: 700; font-size: 15px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--deep-patina);
}

.strip { background: var(--deep-anchor); }
.strip__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* Fixed track count: an auto-fit version resolved to 3 at mid widths and
     orphaned the fourth tile. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-hairline);
}
.strip__item { position: relative; }
.strip__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.strip__caption {
  position: absolute; bottom: 0; left: 0;
  background: var(--deep-copper); color: var(--white);
  font-weight: 700; font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 9px 16px;
}

.loop { background: var(--soft-copper); padding: var(--band-narrow-y) var(--section-x); }
.loop__inner {
  max-width: var(--max-page); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--gap-cards);
}
.loop h2 { margin-block-start: 0; }
.loop .cta-row { margin: 0; }
.loop .btn { background: var(--deep-copper); }
.loop .btn:hover { background: var(--deep-patina); }

@media (max-width: 939px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .neighbor__inner, .voice__inner { grid-template-columns: minmax(0, 1fr); }
  .pillars__grid { grid-template-columns: minmax(0, 1fr); }
  /* The strip goes 2x2, never 1-up. */
  .strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .neighbor__panel { margin-left: 0; margin-top: 0; }
}

/* ---------- Priorities ---------- */


.pillar-section { padding: var(--section-y-lg) var(--section-x); }
.pillar-section__inner { max-width: var(--max-longform); margin-inline: auto; }
.pillar-section h2 {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  line-height: 1.02;
  color: var(--deep-anchor);
  margin-block-start: 0;
}
.pillar-section__icon { flex: none; line-height: 0; }
.pillar-section__block { color: var(--deep-anchor); max-width: 68ch; }
/* Label sits on its own line above the sentence it introduces. */
.pillar-section__block strong {
  display: block;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-block-end: 6px;
}
.pillar-section__list {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap-hairline);
  max-width: 72ch;
}
.pillar-section__list li {
  background: var(--white);
  color: var(--deep-anchor);
  font-size: 17.5px;
  padding: var(--pad-card);
  border-inline-start: 5px solid currentColor;
}

/* Each pillar takes its own flat field, icon colour and list accent. */
.pillar-section--0 { background: var(--light-air); }
.pillar-section--0 .pillar-section__icon { color: var(--deep-patina); }
.pillar-section--0 .pillar-section__block strong { color: var(--deep-patina); }
.pillar-section--0 .pillar-section__list li { border-inline-start-color: var(--deep-patina); }

.pillar-section--1 { background: var(--soft-patina); }
.pillar-section--1 .pillar-section__icon { color: var(--deep-anchor); }
.pillar-section--1 .pillar-section__block strong { color: var(--industrial-blue); }
.pillar-section--1 .pillar-section__list li { border-inline-start-color: var(--industrial-blue); }

.pillar-section--2 { background: var(--soft-copper); }
.pillar-section--2 .pillar-section__icon { color: var(--deep-copper); }
.pillar-section--2 .pillar-section__block strong { color: var(--deep-copper); }
.pillar-section--2 .pillar-section__list li { border-inline-start-color: var(--deep-copper); }

/* Home pillar headings are links into these sections; they must not look
   like body links against the dark card. */
.pillar h3 a { color: inherit; text-decoration: none; }
.pillar h3 a:hover { text-decoration: underline; }

/* The header is sticky and ~141px tall, so an anchor jump lands the target
   underneath it. Every in-page target reserves that much room above itself. */
:root { --header-h: 141px; }
main [id],
.pillar-section { scroll-margin-block-start: calc(var(--header-h) + 1rem); }

/* --header-h tracks the logo, which is the tallest thing in the bar: the
   header is the logo's height plus 12px padding top and bottom plus the 1px
   bottom border. 116 + 24 + 1 = 141 at full size, 64 + 24 + 1 = 89 once the
   logo shrinks to make room for the Donate button on a phone, 52 + 24 + 1 = 77
   at the narrowest step. All three are measured, not derived on trust.
   These must stay below the :root rule above, or it wins on source order and
   the overrides silently do nothing. That happened. */
@media (max-width: 519px) { :root { --header-h: 89px; } }
@media (max-width: 359px) { :root { --header-h: 77px; } }

/* ---------- FAQ accordion ---------- */

.faq {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) auto;
  padding: 0;
  max-width: var(--max-faq);
  border-block-start: 3px solid var(--deep-anchor);
}
.faq__item { border-block-end: 3px solid var(--deep-anchor); }
.faq__q { margin: 0; font-size: inherit; letter-spacing: 0; text-transform: none; }
.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 24px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--deep-anchor);
}
.faq__trigger:hover { color: var(--deep-patina); }
.faq__sign { flex: none; color: var(--deep-patina); line-height: 0; }
/* The sign follows the expanded state, so it needs no JS of its own. */
.faq__trigger[aria-expanded="true"] .faq__plus { display: none; }
.faq__trigger[aria-expanded="false"] .faq__minus { display: none; }
.faq__a { padding-block-end: 26px; }
.faq__a p { font-size: 18px; color: var(--soft-charcoal); max-width: 72ch; }
.faq__checked { max-width: var(--max-faq); margin-inline: auto; font-size: 15px; }

/* ---------- Meet Pete ---------- */


.bio { background: var(--white); padding: var(--section-y-lg) var(--section-x); }
.bio__inner {
  max-width: var(--max-page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-columns);
  align-items: start;
}
.bio__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio__copy > h2:first-child { margin-block-start: 0; }

.running { background: var(--light-air); padding: var(--section-y-lg) var(--section-x); }
.running__inner {
  max-width: var(--max-page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-columns);
  align-items: center;
}
.running__inner h2 { margin-block-start: 0; }
.running__pair {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-hairline);
}
.running__pair img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.expect { background: var(--white); padding: var(--section-y-lg) var(--section-x); }
.expect__inner { max-width: var(--max-page); margin-inline: auto; }
.expect__inner > h2 { margin-block-start: 0; }
.expect__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-cards);
}
.expect__card {
  background: var(--white);
  padding: var(--pad-card-lg);
  /* The cards are told apart only by this top rule and the heading colour. */
  border-block-start: 5px solid currentColor;
}
.expect__card h3 { color: inherit; margin-block-start: 0; }
.expect__card p { color: var(--soft-charcoal); max-width: none; }
.expect__card--deep-patina { color: var(--deep-patina); }
.expect__card--industrial-blue { color: var(--industrial-blue); }
.expect__card--deep-copper { color: var(--deep-copper); }

@media (max-width: 939px) {
  .bio__inner, .running__inner { grid-template-columns: minmax(0, 1fr); }
  .expect__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Shared band and label patterns ---------- */

/* Small all-caps section label used where the design sets a heading in Barlow
   rather than the display face: Endorsements and the fact sheet. */
.label-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--industrial-blue);
  margin-block: 0 0.6em;
}
.label-heading--copper { color: var(--deep-copper); }

/* Text links that sit beside or below buttons. */
.text-link {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--deep-patina);
}
.text-link:hover { text-decoration: underline; }
.cta-row--links { gap: 22px; align-items: center; }

.btn--blue { background: var(--industrial-blue); }
.btn--blue:hover { background: var(--deep-patina); }

/* In a row of actions the design fills the first and lightens the rest. */
.cta-row .btn ~ .btn { background: var(--soft-patina); color: var(--deep-anchor); }
.cta-row .btn ~ .btn:hover { background: var(--white); color: var(--deep-anchor); }

/* Dated-claim line. Every page that states an election fact carries one. */
.facts-checked {
  font-size: 15px;
  color: var(--industrial-blue);
  margin-block-start: 1.4rem;
}

/* ---------- Forms (layout) ---------- */

/* Two-column field grid, per the design. Fields marked wide span both tracks;
   consent blocks, the consent line and the submit button always do. */
.kform {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-block-start: clamp(1.5rem, 2.5vw, 2rem);
}
.kform__row { margin-block: 0; }
.kform__row--wide,
.kform__consents,
.kform__consent,
.kform__submit,
.kform__status,
.kform noscript { grid-column: 1 / -1; }
.kform__intro { max-width: 60ch; margin-block-start: 16px; }

.kform__consents {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--light-air);
  padding: 18px 20px;
}
/* Checkbox and its label read as one line, so the box aligns to the first
   line of text rather than centring against a wrapped paragraph. */
.kform__check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0;
  font-size: 16.5px;
  color: var(--deep-anchor);
}
.kform__check input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--deep-patina); }
.kform__check label {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  max-width: 68ch;
}
.kform__check .kform__error { grid-column: 2; }
.kform__submit { margin: 0; }
.kform__status.is-success {
  background: var(--deep-patina);
  color: var(--white);
  padding: 16px 20px;
  font-weight: 600;
}
.kform__status.is-error {
  background: var(--deep-copper);
  color: var(--white);
  padding: 16px 20px;
  font-weight: 600;
}
.kform__noscript { color: var(--deep-copper); }

/* ---------- FAQ page shell ---------- */

.faq-section { padding: var(--section-y) var(--section-x); }

/* ---------- Why This Vote Matters ---------- */

.transition { background: var(--white); padding: var(--section-y) var(--section-x); }
.transition__inner { max-width: var(--max-page); margin-inline: auto; }
.transition h2 { color: var(--deep-anchor); margin-block-start: 0; }

/* Three explanatory steps. An ordered list because the order is the meaning. */
.timeline {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-hairline);
}
.timeline__step { padding: var(--pad-card); border-block-start: 6px solid currentColor; }
.timeline__year {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  color: inherit;
  margin: 0;
  max-width: none;
}
.timeline__body {
  font-size: 17.5px;
  color: var(--deep-anchor);
  margin-block: 14px 0;
  max-width: none;
}
.timeline__step--industrial-blue { background: var(--light-air); color: var(--industrial-blue); }
.timeline__step--deep-copper { background: var(--soft-copper); color: var(--deep-copper); }
/* The third step's rule is Deep Patina but its year sets in Deep Anchor. */
.timeline__step--deep-patina { background: var(--soft-patina); color: var(--deep-patina); }
.timeline__step--deep-patina .timeline__year { color: var(--deep-anchor); }

.decides { background: var(--light-air); padding: var(--section-y) var(--section-x); }
.decides__inner { max-width: var(--max-longform); margin-inline: auto; }
.decides__inner h2 { color: var(--deep-anchor); margin-block-start: 0; }
.decides__inner > p { color: var(--deep-anchor); max-width: 66ch; }
.decides__grid {
  list-style: none;
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-hairline);
}
.decides__row {
  background: var(--white);
  padding: 20px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 17.5px;
}
.decides__icon { flex: none; line-height: 0; color: var(--industrial-blue); }

.budget {
  position: relative;
  overflow: hidden;
  background: var(--deep-anchor);
  color: var(--light-air);
  padding: var(--section-y-lg) var(--section-x);
}
.budget__circle {
  position: absolute;
  top: -35%;
  left: -8%;
  width: clamp(260px, 28vw, 460px);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--deep-patina);
  opacity: 0.4;
  pointer-events: none;
}
.budget__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-columns);
  align-items: center;
}
.budget h2 { color: var(--white); margin-block-start: 0; }
/* The largest element in the design. Kept as one block so the figure, its
   caption and the update date can never be separated. */
.budget__stat {
  display: inline-block;
  border-block-start: 4px solid var(--deep-copper);
  padding-block-start: 20px;
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  max-width: none;
}
.budget__figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 0.94;
  text-transform: uppercase;
  color: var(--soft-copper);
}
.budget__label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft-patina);
  margin-block-start: 10px;
}
.budget__updated { display: block; font-size: 15px; color: var(--soft-patina); margin-block-start: 6px; }
.budget__copy { display: flex; flex-direction: column; gap: 18px; }
.budget__copy p { color: var(--light-air); margin: 0; }

.answers { background: var(--white); padding: var(--section-y) var(--section-x); }
.answers__inner { max-width: var(--max-longform); margin-inline: auto; }
.answers h2 { color: var(--deep-anchor); margin-block-start: 0; }
.page-why-vote .answers .cta-row .btn:first-child { background: var(--industrial-blue); }
.page-why-vote .answers .cta-row .btn:first-child:hover { background: var(--deep-patina); }

/* ---------- Volunteer ---------- */

.band-photo { background: var(--deep-anchor); padding: 0; }
.band-photo img {
  display: block;
  width: 100%;
  height: clamp(240px, 34vw, 460px);
  object-fit: cover;
}

.ways { background: var(--white); padding: var(--section-y) var(--section-x); }
.ways__inner { max-width: var(--max-page); margin-inline: auto; }
.ways__inner h2 { color: var(--deep-anchor); margin-block-start: 0; }
.ways__grid {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.ways__card {
  background: var(--light-air);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ways__icon { line-height: 0; color: var(--industrial-blue); }
.ways__card h3 { color: var(--deep-anchor); margin: 0; }
.ways__card p { font-size: 17.5px; color: var(--deep-anchor); margin: 0; max-width: none; }

/* The form sits in a white panel on Soft Patina. */
.form-band { background: var(--soft-patina); padding: var(--section-y) var(--section-x); }
.form-band__panel {
  max-width: var(--max-form);
  margin-inline: auto;
  background: var(--white);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.form-band__panel h2 { color: var(--deep-anchor); margin-block-start: 0; }

.yard-sign { background: var(--soft-copper); padding: var(--band-narrow-y) var(--section-x); }
.yard-sign__inner {
  max-width: var(--max-page);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.yard-sign__inner > div { min-width: min(100%, 280px); }
.yard-sign h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  letter-spacing: 0.03em;
  color: var(--deep-anchor);
  margin-block-start: 0;
}
.yard-sign p { color: var(--deep-anchor); font-size: 17.5px; max-width: 52ch; }
.yard-sign .cta-row { margin: 0; }
.yard-sign .btn { background: var(--deep-copper); }
.yard-sign .btn:hover { background: var(--deep-anchor); }

/* ---------- Join ---------- */

.signup { background: var(--white); padding: var(--section-y) var(--section-x); }
.signup__inner {
  max-width: var(--max-page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-columns);
  align-items: start;
}
.signup__media { position: relative; min-height: clamp(300px, 36vw, 520px); }
.signup__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.signup__form h2 { color: var(--deep-anchor); margin-block-start: 0; }
/* Secondary actions live below the form, never beside submit. */
.signup__links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-block-start: clamp(2rem, 3.5vw, 2.75rem);
  padding-block-start: 22px;
  border-block-start: 2px solid var(--light-air);
}
.signup__links a {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.signup__links a:hover { text-decoration: underline; }

/* ---------- Donate ---------- */

.support { background: var(--white); padding: var(--section-y) var(--section-x); }
.support__inner {
  max-width: var(--max-page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-columns);
  align-items: start;
}
.support__media { position: relative; min-height: clamp(280px, 32vw, 440px); }
.support__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.support__inner h2 { color: var(--deep-anchor); margin-block-start: 0; }
.support__list {
  list-style: none;
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-hairline);
}
.support__list li {
  background: var(--light-air);
  padding: 18px 22px;
  border-inline-start: 5px solid var(--deep-patina);
  font-size: 17.5px;
  color: var(--deep-anchor);
}

.amounts { background: var(--soft-copper); padding: var(--section-y) var(--section-x); }
.amounts__inner { max-width: var(--max-longform); margin-inline: auto; }
.amounts h2 { color: var(--deep-copper); margin-block-start: 0; }
.amounts p { color: var(--deep-anchor); max-width: 64ch; }

.other-ways { background: var(--white); padding: var(--section-y) var(--section-x); }
.other-ways__inner { max-width: var(--max-longform); margin-inline: auto; }
.other-ways h2 { color: var(--deep-anchor); margin-block-start: 0; }
.page-donate .other-ways .cta-row .btn:first-child { background: var(--industrial-blue); }
.page-donate .other-ways .cta-row .btn:first-child:hover { background: var(--deep-patina); }

/* ---------- Contact ---------- */

.contact { background: var(--white); padding: var(--section-y) var(--section-x); }
.contact__inner {
  max-width: var(--max-page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--gap-columns);
  align-items: start;
}
.contact__form h2 { color: var(--deep-anchor); margin-block-start: 0; }
.contact__form .kform { max-width: none; }
.contact__cards { display: flex; flex-direction: column; gap: var(--gap-hairline); }
.contact__card { padding: var(--pad-card); }
.contact__card h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.04em;
  color: var(--deep-anchor);
  margin-block: 12px 0;
}
.contact__card p { font-size: 17.5px; color: var(--deep-anchor); margin-block: 12px 0; max-width: none; }
.contact__icon { line-height: 0; display: block; }
.contact__card--light-air { background: var(--light-air); }
.contact__card--light-air .contact__icon { color: var(--industrial-blue); }
.contact__card--soft-patina { background: var(--soft-patina); }
.contact__card--soft-patina .contact__icon { color: var(--deep-anchor); }
.contact__card--soft-patina .text-link { color: var(--deep-anchor); }
.contact__card--soft-copper { background: var(--soft-copper); }
.contact__card--soft-copper .contact__icon { color: var(--deep-copper); }

/* ---------- Media and Press ---------- */

.press-video { background: var(--white); padding: var(--section-y) var(--section-x); }
.press-video__inner { max-width: var(--max-page); margin-inline: auto; }
.press-video h2 { color: var(--deep-anchor); margin-block-start: 0; }

.videos {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
.videos__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--deep-anchor);
}
.videos__tag { margin-block: 14px 0; }
.videos__tag span {
  display: inline-block;
  background: var(--soft-patina);
  color: var(--deep-anchor);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
}
.videos__title {
  font-size: 21px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--deep-anchor);
  margin-block: 12px 0;
}
.videos__meta { font-size: 15px; margin-block: 8px 0; }

.photo-library { background: var(--light-air); padding: var(--section-y) var(--section-x); }
.photo-library__inner {
  max-width: var(--max-page);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.photo-library__inner > div { min-width: min(100%, 280px); }
.photo-library h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--deep-anchor); margin-block-start: 0; }
.photo-library p { color: var(--deep-anchor); font-size: 17.5px; max-width: 52ch; }
.photo-library .cta-row { margin: 0; }

.downloads { background: var(--white); padding: var(--section-y) var(--section-x); }
.downloads__inner {
  max-width: var(--max-page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-columns);
  align-items: start;
}
.downloads h2 { color: var(--deep-anchor); margin-block-start: 0; }
.downloads__list {
  list-style: none;
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-hairline);
}
.downloads__list li {
  background: var(--light-air);
  padding: 18px 22px;
  border-inline-start: 5px solid var(--industrial-blue);
  font-size: 17.5px;
  color: var(--deep-anchor);
}
/* A status tag marks a download that does not exist yet, so the page never
   implies a file a reporter could click for. */
.downloads__status {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep-copper);
  margin-inline-start: 6px;
}
.downloads__headshot { margin: 0; }
.downloads__headshot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.downloads__headshot figcaption { font-size: 15px; color: var(--industrial-blue); margin-block-start: 12px; }

/* ---------- Endorsements ---------- */

/* The featured newspaper endorsement. Soft Copper, the token the design
   reserves for editorial panels, which is exactly what this is. It cannot take
   a dark ground: it sits directly under the Industrial Blue page header, and
   two dark bands in a row read as one. The quote sets in the sans rather than
   the display face, which is condensed caps and unreadable at this length. */
.tribune {
  background: var(--soft-copper);
  padding: var(--section-y-lg) var(--section-x);
}
.tribune__inner { max-width: var(--max-longform); margin-inline: auto; }
.tribune__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--deep-anchor);
  margin-block: 0;
  max-width: none;
}
.tribune__quote {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  border-block-start: 4px solid var(--deep-copper);
  padding-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
}
.tribune__quote blockquote { margin: 0; }
.tribune__quote blockquote p {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--deep-anchor);
  margin: 0;
  max-width: 44ch;
}
.tribune__quote figcaption {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--industrial-blue);
  margin-block-start: clamp(1.25rem, 2vw, 1.5rem);
}
/* The Spanish translation note. Sentence case and unspaced, so it reads as a
   footnote to the attribution rather than part of it. */
.tribune__note {
  display: block;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--industrial-blue);
  margin-block-start: 6px;
}

/* One repeating group; categories differ only by ground and accent colour, so
   the campaign can add a category without new CSS. */
.endorse { padding: var(--section-y) var(--section-x); }
.endorse--white { background: var(--white); }
.endorse--light-air { background: var(--light-air); }
.endorse__inner { max-width: var(--max-longform); margin-inline: auto; }
.endorse__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-hairline);
}
/* A category holding one person keeps the full-width column; the template adds
   this class from the count. */
.endorse__list--single { grid-template-columns: minmax(0, 1fr); }
.endorse__card {
  background: var(--white);
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
  border-inline-start: 6px solid currentColor;
}
/* The ground already supplies the contrast on light-air sections, so the card
   stays white and only the rule carries the accent. */
.endorse__card--deep-patina { color: var(--deep-patina); }
.endorse__card--deep-copper { color: var(--deep-copper); }
.endorse__card--industrial-blue { color: var(--industrial-blue); }
.endorse__name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.2;
  color: var(--deep-anchor);
  margin: 0;
  max-width: none;
}
.endorse__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  margin: 6px 0 0;
  max-width: none;
}
.endorse__card figure { margin: 0; }
.endorse__card blockquote { margin: 0; }
.endorse__card blockquote p {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  color: var(--deep-anchor);
  margin: 0;
  max-width: none;
}
.endorse__card figcaption {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--industrial-blue);
  margin-block-start: 16px;
}

/* ---------- Candidate fact sheet ---------- */

.fact-header {
  background: var(--deep-anchor);
  color: var(--light-air);
  padding: clamp(2.5rem, 5vw, 4rem) var(--section-x);
}
.fact-header__inner { max-width: var(--max-factsheet); margin-inline: auto; }
.fact-header__eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft-patina);
  margin: 0 0 14px;
}
.fact-header h1 { color: var(--white); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.06; margin: 0; }

.facts { background: var(--white); padding: clamp(3rem, 6vw, 4.5rem) var(--section-x); }
.facts__inner {
  max-width: var(--max-factsheet);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.facts__blocks { display: flex; flex-direction: column; gap: clamp(1.75rem, 3vw, 2.5rem); }
.facts__block p { max-width: 66ch; margin-block: 0; }
.facts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-hairline);
  max-width: 72ch;
}
.facts__list li { background: var(--light-air); padding: 16px 20px; font-size: 17.5px; color: var(--deep-anchor); }
.facts__source { font-size: 15px; color: var(--industrial-blue); margin-block: 0; }
.facts .facts-checked { border-block-start: 2px solid var(--light-air); padding-block-start: 14px; margin: 0; }
.facts__portrait { margin: 0; }
.facts__portrait img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.facts__portrait figcaption { font-size: 15px; color: var(--industrial-blue); margin-block-start: 12px; }

/* ---------- Ad landing page ---------- */

.ad-hero {
  position: relative;
  overflow: hidden;
  background: var(--deep-anchor);
  color: var(--light-air);
}
.ad-hero__circle {
  position: absolute;
  top: -14%;
  right: -6%;
  width: clamp(320px, 38vw, 620px);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--deep-patina);
  opacity: 0.55;
  pointer-events: none;
}
.ad-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-page);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem) var(--section-x) 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-columns);
  align-items: end;
}
.ad-hero__copy { padding-block-end: clamp(2.5rem, 5vw, 4.5rem); }
.ad-hero__logo { display: block; width: 200px; height: auto; }
.ad-hero__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin-block: clamp(1.5rem, 3vw, 2.25rem) 0;
  max-width: none;
}
.ad-hero__eyebrow span { display: block; }
.ad-hero__eyebrow-accent { color: var(--soft-patina); }
.ad-hero h1 {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.15;
  color: var(--light-air);
  margin-block: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  max-width: 22ch;
}
.ad-hero__para { color: var(--light-air); max-width: 46ch; margin-block-start: 18px; }
.ad-hero__media { position: relative; align-self: end; min-height: clamp(320px, 40vw, 540px); }
.ad-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ad-why { background: var(--white); padding: clamp(3rem, 6vw, 4.5rem) var(--section-x); }
.ad-why__inner { max-width: var(--max-longform); margin-inline: auto; }
.ad-why h2 { color: var(--deep-anchor); margin-block-start: 0; }
.ad-why p { max-width: 66ch; }

.ad-pillars {
  background: var(--industrial-blue);
  color: var(--white);
  padding: clamp(3rem, 6vw, 4.5rem) var(--section-x);
}
.ad-pillars__inner { max-width: var(--max-page); margin-inline: auto; }
.ad-pillars h2 { color: var(--white); margin-block-start: 0; }
.ad-pillars__grid {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-cards);
}
.ad-pillar {
  background: var(--deep-anchor);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ad-pillar__icon { line-height: 0; color: var(--soft-patina); }
.ad-pillar h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.04;
  letter-spacing: normal;
  color: var(--soft-patina);
  margin: 0;
}
.ad-pillar p { color: var(--light-air); font-size: 17.5px; margin: 0; max-width: none; }

.ad-vote { background: var(--soft-copper); padding: clamp(3rem, 6vw, 4.5rem) var(--section-x); }
.ad-vote__inner { max-width: var(--max-longform); margin-inline: auto; }
.ad-vote h2 { color: var(--deep-copper); margin-block-start: 0; }
.ad-vote p { color: var(--deep-anchor); font-size: 20px; max-width: 60ch; }
.ad-vote__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.ad-vote__actions .cta-row { margin-block: clamp(1.75rem, 3vw, 2.5rem) 0; }
.ad-vote .btn:hover { background: var(--deep-anchor); }
.ad-vote .text-link { color: var(--industrial-blue); }

.ad-legal { background: var(--deep-anchor); padding: clamp(2rem, 4vw, 3rem) var(--section-x); }
.ad-legal__inner { max-width: var(--max-longform); margin-inline: auto; }
.ad-legal p { font-size: 15px; color: var(--soft-patina); max-width: 80ch; margin: 0; }

/* ---------- Narrow layout ---------- */

/* Single breakpoint, matching the design. Track counts stay fixed. */
@media (max-width: 939px) {
  .kform { grid-template-columns: minmax(0, 1fr); }
  .timeline,
  .decides__grid,
  .budget__inner,
  .ways__grid,
  .signup__inner,
  .support__inner,
  .contact__inner,
  .videos,
  .downloads__inner,
  .additional__grid,
  .endorse__list,
  .facts__inner,
  .ad-hero__inner,
  .ad-pillars__grid { grid-template-columns: minmax(0, 1fr); }
  .signup__media, .support__media, .ad-hero__media { min-height: clamp(240px, 60vw, 420px); }
}

/* ---------- Print ---------- */

/* The fact sheet is linked from the press kit as a download, so it has to
   print as a usable one-piece reference. Site chrome, the photo and every
   interactive affordance come off; the layout goes single column. */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .cta-band,
  .facts__portrait { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.4; }
  main > * { padding: 0; }

  .fact-header { background: none; color: #000; padding: 0 0 12pt; }
  .fact-header h1 { color: #000; font-size: 20pt; }
  .fact-header__eyebrow { color: #000; }

  .facts { padding: 0; }
  .facts__inner { display: block; max-width: none; }
  .facts__blocks { display: block; }
  .facts__block { margin-block-end: 12pt; break-inside: avoid; }
  .facts__block p { max-width: none; }
  .label-heading, .label-heading--copper { color: #000; }
  .facts__list li { background: none; border-inline-start: 2pt solid #000; padding: 4pt 8pt; }

  /* A printed page has no hrefs, so spell out the ones that matter. */
  .facts a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}