/* ==========================================================================
   Eric Crutchlow · Santa Clara City Council, District 3 — VERSION 2
   Structure follows the Politician-04 pattern: full-bleed alternating
   light/dark bands, a letterspaced flag-red eyebrow, oversized statement
   headline, numbered priority columns.
   The type is deliberately inverted from that template — heavy grotesk
   display against a serif body — so it doesn't read as a stock layout.
   ========================================================================== */

:root {
  /* --- ground: graphite, not navy. Deliberately off the campaign default,
         and off the opponent's navy/crimson. ------------------------------ */
  --graphite:      #1C1E22;   /* primary dark ground */
  --graphite-2:    #26292F;   /* raised surfaces on dark */
  --graphite-deep: #121417;   /* anchor bar + footer */

  /* --- text on light ------------------------------------------------------ */
  --slate:     #1F2126;
  --slate-70:  rgba(31, 33, 38, 0.74);
  --slate-45:  rgba(31, 33, 38, 0.50);
  --slate-12:  rgba(31, 33, 38, 0.14);

  /* --- accent: red / gold / green triad ----------------------------------- */
  /* Two colors only: gold carries the tagline, icons, and every dark-ground
     eyebrow; red carries everything else — buttons, ring, tag, rules, and
     link/heading red on light grounds. */
  --gold:     #FFCC00;                     /* tagline + icons + dark-ground eyebrows (11.0:1 on graphite) */
  --red:      #CC0000;                     /* buttons/fills, white text (5.6:1); also passes as text on bone (5.0:1) */
  --red-ink:  #CC0000;                     /* red accent on LIGHT grounds — same hex, kept as a role */
  --bear:     #8B5E3C;                     /* brown — hairlines, divider frames */
  --bear-dim: rgba(139, 94, 60, 0.40);

  /* --- ground: light ------------------------------------------------------ */
  --bone:    #F4F3F0;
  --bone-2:  #E7E5E0;
  --white:   #FFFFFF;

  /* on-dark */
  --on-dark:    #F4F2ED;
  /* Brightened for legibility — this audience skews older. "70" and "45" are
     historical role names; the values now run much whiter. */
  --on-dark-70: rgba(244, 242, 237, 0.92);   /* body copy on dark */
  --on-dark-45: rgba(244, 242, 237, 0.70);   /* labels/captions on dark */
  --on-dark-15: rgba(244, 242, 237, 0.16);   /* hairlines only */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif:   "Source Serif 4", Georgia, "Times New Roman", serif;

  --pad:  clamp(20px, 3vw, 56px);      /* full-width gutter (Greg's nav rule) */
  --maxw: 1360px;
  --sect: clamp(4.5rem, 8vw, 7rem);    /* equal vertical padding, every section */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------- reset --- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--slate);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

/* No widows, ever. */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.032em;
  margin: 0;
}

a { color: var(--red-ink); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; background: var(--graphite); color: var(--on-dark); padding: 0.9rem 1.2rem; z-index: 200; }
.skip:focus { left: 1rem; top: 1rem; }

.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; }

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

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.section { padding-block: var(--sect); }

.band-light { background: var(--bone); }
.band-white { background: var(--white); }
.band-dark  { background: var(--graphite); color: var(--on-dark); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--on-dark); }

/* --------------------------------------------------- the section formula --- */

/* flag-red letterspaced eyebrow -> oversized statement -> small support line */
.eyebrow {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin: 0 0 1.5rem;
}
.band-dark .eyebrow, .hero .eyebrow, .pagehead .eyebrow { color: var(--gold); }
.eyebrow i { margin-right: 0.45rem; }
/* campaign red, matching the buttons and ring (decorative icon; the
   adjacent gold text carries the information) */
.hero .eyebrow i { color: var(--red); }

.statement {
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  font-weight: 800;
  margin: 0;
}
.support {
  font-size: 1.0625rem;
  color: var(--slate-70);
  max-width: 62ch;
  margin: 1.75rem 0 0;
}
.band-dark .support { color: var(--on-dark-70); }

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 1.05rem 2rem;
  border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--red   { background: var(--red); color: var(--white); }
.btn--red:hover { background: #E51616; color: var(--white); }

.btn--dark  { background: var(--graphite); color: var(--on-dark); }
.btn--dark:hover { background: var(--graphite-2); color: var(--on-dark); }

.btn--outline { border-color: currentColor; color: var(--slate); background: transparent; }
.btn--outline:hover { background: var(--slate); color: var(--bone); border-color: var(--slate); }

/* Any dark ground — .hero and .pagehead are graphite without carrying .band-dark. */
.band-dark .btn--outline, .hero .btn--outline, .pagehead .btn--outline { color: var(--on-dark); }
.band-dark .btn--outline:hover, .hero .btn--outline:hover, .pagehead .btn--outline:hover {
  background: var(--on-dark); color: var(--graphite); border-color: var(--on-dark);
}

.btn--block { width: 100%; justify-content: center; }

/* ================================================================ header === */
/* Full width — wordmark hugs the left edge, nav right. Sticky on scroll. */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--graphite);
  padding: 14px var(--pad);
  display: flex; align-items: center; gap: 2rem;
  border-bottom: 1px solid rgba(244, 242, 237, 0.09);
}

.wordmark { text-decoration: none; color: var(--on-dark); margin-right: auto; display: block; }
.wordmark__rule { width: 74px; height: 4px; background: var(--gold); margin-bottom: 9px; }
.wordmark__name {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 2.1vw, 1.9375rem);
  letter-spacing: -0.028em; line-height: 1; display: block;
}
.wordmark__sub {
  font-family: var(--display); font-weight: 600;
  font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-top: 6px; display: block;
}

.nav { display: flex; align-items: center; gap: 2.25rem; }

/* :not(.btn) so button padding + colors always win over link styling */
.nav a:not(.btn) {
  font-family: var(--display); font-weight: 600; font-size: 0.875rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--on-dark); text-decoration: none; padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav a:not(.btn):hover,
.nav a:not(.btn)[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--on-dark-15);
  color: var(--on-dark); padding: 0.6rem 0.85rem; cursor: pointer;
  font-family: var(--display); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* ================================================================== hero === */
/* VERSION 3: full-bleed California flag photograph under a graphite scrim,
   content left, circular framed portrait right. Height is still set by JS to
   exactly fill the screen minus header + anchor bar. */

.hero {
  position: relative;
  background:
    linear-gradient(100deg,
      rgba(18, 20, 23, 0.96) 0%,
      rgba(18, 20, 23, 0.88) 34%,
      rgba(18, 20, 23, 0.62) 58%,
      rgba(18, 20, 23, 0.45) 100%),
    url("../assets/ca-flag.jpg") center 26% / cover no-repeat var(--graphite);
  color: var(--on-dark);
  min-height: var(--hero-h, 62vh);
  overflow: hidden;
  display: grid;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  width: 100%;
  min-height: 0;
  padding-right: var(--pad);
}

/* Content hugs the left gutter. */
.hero__content {
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2rem, 4vw, 3.5rem) var(--pad);
  min-width: 0;
}

/* One line, always: sized against viewport width so "Eric Crutchlow" never
   wraps, white + gold split carrying the two-tone identity. */
.hero__name {
  font-size: clamp(2.5rem, 5.6vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.96;
  margin: 0 0 1.5rem;
  white-space: nowrap;
}
.hero__name span { color: var(--gold); }

.hero__quote {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--on-dark-70);
  max-width: 52ch;
  margin: 0 0 2rem;
  padding-left: 1.5rem;
  border-left: 3px solid var(--red);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* --- circular framed portrait ------------------------------------------- */

.hero__portrait {
  position: relative;
  justify-self: center;
  min-width: 0;
}
.hero__portrait img {
  width: min(38vh, 26vw, 420px);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 50%;
  border: 5px solid var(--red);
  box-shadow:
    0 0 0 10px rgba(18, 20, 23, 0.65),      /* dark gap ring */
    0 0 0 11px var(--bear-dim),              /* hairline echo */
    0 30px 60px -18px rgba(0, 0, 0, 0.7);
}
/* eyebrow-style tag under the portrait */
.hero__portrait::after {
  content: "District 3";
  position: absolute;
  left: 50%; bottom: -0.9rem;
  transform: translateX(-50%);
  background: var(--red);
  color: var(--white);
  font-family: var(--display); font-weight: 800;
  font-size: 0.6875rem; letter-spacing: 0.19em; text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  white-space: nowrap;
}

/* ========================================================== anchor bar ==== */
/* Flat, full width, sits at the base of the hero and above the fold. */

.anchorbar {
  background: var(--graphite-deep);
  color: var(--on-dark);
  padding-inline: var(--pad);
  display: flex; align-items: stretch; flex-wrap: wrap;
  border-top: 1px solid rgba(244, 242, 237, 0.09);
}

.anchorbar__item {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.05rem 2rem 1.05rem 0;
  margin-right: 2rem;
  border-right: 1px solid var(--on-dark-15);
}
.anchorbar__item:first-child { }
.anchorbar__item i { color: var(--gold); font-size: 1.0625rem; width: 1.2rem; text-align: center; }

.anchorbar__label {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: 0.625rem; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--on-dark-45); line-height: 1;
}
.anchorbar__value {
  display: block;
  font-family: var(--display); font-weight: 600; font-size: 0.9375rem;
  letter-spacing: -0.01em; margin-top: 5px; line-height: 1.2;
}
.anchorbar__value a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--gold); }
.anchorbar__value a:hover { color: var(--gold); }

.anchorbar__cta { margin-left: auto; display: flex; align-items: center; padding-block: 0.7rem; }

/* ====================================================== section divider === */
/* Thin bear-brown hairline with a circular medallion straddling the seam.
   Used only between light sections — never against a full-bleed dark band. */

.divider {
  position: relative; height: 0;
  /* constrained to the same content box as the text, not the viewport */
  max-width: var(--maxw);
  margin-inline: auto;
}
.divider::before {
  content: "";
  position: absolute; left: var(--pad); right: var(--pad); top: 0; height: 2px;
  background: var(--red);
}
.divider__medallion {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--red);
  display: grid; place-items: center;
  color: var(--red); font-size: 1.125rem;
}

/* ============================================================== overview === */

/* Stacked head: eyebrow, then statement with portrait right, then
   full-width text underneath. */
.overview__grid { display: block; }
.overview__grid .support { max-width: 90ch; }

.overview__flex {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.overview__photo { margin: 0; }
.overview__photo img {
  width: clamp(220px, 22vw, 320px);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 20%;
  border: 4px solid var(--red);
}
@media (max-width: 720px) {
  .overview__flex { grid-template-columns: 1fr; }
  .overview__photo { order: -1; }
  .overview__photo img { width: min(60vw, 260px); }
}

/* =============================================================== issues === */

.issues__head { display: block; }
.issues__head .support { max-width: 90ch; }

.issues__cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.issue { border-top: 2px solid var(--slate-45); padding-top: 1.5rem; }
.issue__num {
  font-family: var(--display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.12em; color: var(--slate-70); display: block; margin-bottom: 1rem;
}
.issue h3 { font-size: 1.25rem; color: var(--red); margin-bottom: 0.85rem; letter-spacing: -0.02em; }
.issue p { margin: 0; font-size: 0.9688rem; color: var(--slate); }

/* ============================================================ split band === */
/* dark band: photo left, statement + chevron list right */

.split { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); align-items: stretch; min-height: 560px; }
.split__media { position: relative; overflow: hidden; background: var(--graphite-2); }
/* Vertical Santa Clara photo. Left as full colour — the gradient alone carries
   it into the graphite, and the evening light is the point. */
.split__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
}

.split__body { display: flex; flex-direction: column; justify-content: center; padding: var(--sect) var(--pad) var(--sect) clamp(2rem, 5vw, 4.5rem); }

.tenets { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.tenets li {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--on-dark-15);
  font-size: 1.0625rem;
}
.tenets li:first-child { border-top: 1px solid var(--on-dark-15); }
.tenets i { color: var(--gold); margin-top: 0.42rem; font-size: 0.8125rem; }
.tenets b { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; display: block; margin-bottom: 0.2rem; }
.tenets span { color: var(--on-dark-70); font-size: 0.9688rem; }

/* ============================================================== collage === */
/* Asymmetric grid of the city. Tile 1 is the wide establishing shot; the rest
   are places in the district. Empty tiles render as captioned graphite plates so
   the section still reads as intentional before the photography lands. */

.collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 12px;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.tile { position: relative; overflow: hidden; background: var(--graphite-2); display: block; margin: 0; }
.tile--wide { grid-column: span 2; grid-row: span 2; }

.tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.tile:hover img { transform: scale(1.04); }

/* placeholder state — no <img> inside */
.tile--empty {
  display: grid; place-content: center; text-align: center;
  padding: 1.25rem;
  border: 1px solid rgba(244, 242, 237, 0.12);
}
.tile--empty i { color: var(--gold); font-size: 1.5rem; margin-bottom: 0.75rem; }

.tile__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.5rem 1.15rem 1rem;
  background: linear-gradient(to top, rgba(18, 20, 23, 0.92), rgba(18, 20, 23, 0));
  font-family: var(--display); font-weight: 700;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-dark);
}
.tile--empty .tile__caption {
  position: static; background: none; padding: 0;
  color: var(--on-dark-45); letter-spacing: 0.14em;
}

/* photo credits live at the very bottom of the footer, deliberately quiet.
   Same full-bleed breakout as .disclaimer so their left edges align. */
.credits {
  margin: 1rem 0 0;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--pad);
  font-size: 0.6875rem; line-height: 1.8;
  color: var(--on-dark-45);
}
/* outrank .foot a:not(.btn), which was blowing the links up to 15px Archivo */
.foot p.credits a {
  font-family: inherit; font-size: inherit; font-weight: inherit;
  color: var(--on-dark-45); text-decoration: underline;
}
.foot p.credits a:hover { color: var(--on-dark-70); }

@media (max-width: 900px) {
  .collage { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .tile--wide { grid-column: span 2; grid-row: span 1; }
}

/* ================================================================ goals === */

.goals { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4.5rem); margin-top: clamp(3rem, 6vw, 5rem); }
.goal { padding: 2rem 0; border-top: 1px solid var(--slate-12); }
.goal h3 { font-size: 1.1875rem; color: var(--red-ink); margin-bottom: 0.7rem; }
.goal p { margin: 0; font-size: 0.9688rem; color: var(--slate); max-width: 52ch; }

/* =============================================================== donate === */

.give { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.amounts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 1.75rem; }
.amount {
  font-family: var(--display); font-weight: 700; font-size: 0.9375rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--on-dark-15);
  color: var(--on-dark); text-decoration: none;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.amount:hover { background: var(--gold); border-color: var(--gold); color: var(--graphite); }

.fineprint { font-size: 0.8125rem; line-height: 1.8; color: var(--slate-45); }
.band-dark .fineprint { color: var(--on-dark-45); }

.limitcard { background: var(--graphite-2); border-left: 4px solid var(--gold); padding: clamp(1.75rem, 3vw, 2.5rem); }
.limitcard__num { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 6vw, 4.5rem); letter-spacing: -0.045em; line-height: 1; margin: 0; }
.limitcard__lab { font-family: var(--display); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--on-dark-45); margin: 0.85rem 0 0; }
.limitcard p:last-child { margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--on-dark-70); }

/* ============================================================= involved === */

.involve { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* The form is a card: white plate on the bone ground, same sharp language
   as the sidecards beside it. */
.form {
  display: grid; gap: 1.5rem;
  background: var(--white);
  border: 1px solid var(--slate-12);
  border-top: 4px solid var(--red);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.55rem; }
.field label, .form legend {
  font-family: var(--display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate);
}
.field label small {
  font-weight: 600; font-size: 0.6875rem; color: var(--slate-45);
  letter-spacing: 0.06em; text-transform: none;
}
.field .req { color: var(--red); }
.field input, .field textarea {
  font-family: var(--serif); font-size: 1.0625rem; color: var(--slate);
  padding: 0.95rem 1.05rem; border: 2px solid var(--slate-12);
  background: var(--bone); width: 100%;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.field input:hover, .field textarea:hover { border-color: var(--slate-45); }
.field input:focus, .field textarea:focus {
  border-color: var(--red); background: var(--white); outline: none;
}

/* checkboxes as tappable rows, two-up */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 640px) { .checks { grid-template-columns: 1fr; } }
.check {
  display: flex; gap: 0.75rem; align-items: center;
  font-family: var(--display); font-weight: 600; font-size: 0.9375rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--slate-12);
  cursor: pointer; user-select: none;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.check:hover { border-color: var(--slate-45); background: var(--bone); }
.check:has(input:checked) { border-color: var(--red); background: var(--bone); }
.check input {
  accent-color: var(--red);
  width: 1.25rem; height: 1.25rem; flex: none; margin: 0;
}

.reqnote { font-size: 0.875rem; color: var(--slate-70); margin: 0; }

.card { background: var(--white); border: 1px solid var(--slate-12); border-top: 4px solid var(--red); padding: clamp(1.75rem, 3vw, 2.25rem); }
.card + .card { margin-top: 1.25rem; }
.card h3 { font-size: 1.1875rem; margin-bottom: 0.7rem; }
.card h3 i { color: var(--red); margin-right: 0.5rem; font-size: 0.9em; }
.card p { margin: 0 0 1.35rem; color: var(--slate-70); font-size: 0.9688rem; }
.card p:last-child { margin-bottom: 0; }
/* Button row inside a card. Buttons are inline-flex and taller than their
   line box, so two of them on one line overlap once they wrap. Flex + gap
   keeps them aligned and evenly spaced at any card width. */
.card__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ============================================================== contact === */

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
.deflist { margin: 0; }
.deflist div { padding: 1.15rem 0; border-bottom: 1px solid var(--on-dark-15); display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: baseline; }
.deflist div:first-child { border-top: 1px solid var(--on-dark-15); }
.deflist dt { font-family: var(--display); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--on-dark-45); }
.deflist dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.0625rem; }
.deflist dd a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--gold); }
.deflist dd a:hover { color: var(--gold); }

/* =============================================================== footer === */

.foot { background: var(--graphite-deep); color: var(--on-dark); padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); }
.foot h4 { font-size: 0.75rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--on-dark-45); margin-bottom: 1.25rem; font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.foot a:not(.btn) { color: var(--on-dark-70); text-decoration: none; font-family: var(--display); font-weight: 500; font-size: 0.9375rem; }
/* the wordmark link is not a menu link — keep it full white at its own size */
.foot a.wordmark { color: var(--on-dark); }
.foot a.wordmark .wordmark__name { font-size: 1.75rem; }
.foot a:not(.btn):hover { color: var(--on-dark); }
.foot .wordmark__name { font-size: 1.75rem; }
.foot .wordmark__rule { width: 64px; }
/* footer sub-line under the name goes gold */
.foot .wordmark__sub { color: var(--gold); }

/* Full-bleed: the divider and the text run edge to edge of the viewport,
   breaking out of the centred .wrap container. */
.disclaimer {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem;
  border-top: 1px solid var(--on-dark-15);
  font-size: 0.8125rem; line-height: 1.85; color: var(--on-dark-45);
  max-width: none;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--pad);
}
.disclaimer strong { color: var(--on-dark-70); font-weight: 600; }

/* ======================================================== donate page ==== */

.pagehead { background: var(--graphite); color: var(--on-dark); padding-block: clamp(3rem, 6vw, 5rem); }
.pagehead h1 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 800; }
.pagehead .support { color: var(--on-dark-70); margin-top: 1.5rem; }

.givepage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.embed-slot {
  border: 2px dashed var(--red-ink); background: var(--white);
  padding: clamp(1.75rem, 4vw, 2.75rem); min-height: 460px;
  display: grid; place-content: center; text-align: center; gap: 0.85rem;
}
.embed-slot p { margin: 0; color: var(--slate-70); max-width: 44ch; }
.embed-slot code { font-family: ui-monospace, "SF Mono", monospace; font-size: 0.8125rem; background: var(--bone-2); padding: 0.15rem 0.4rem; }

.rules { list-style: none; margin: 0; padding: 0; }
.rules li { padding: 1.25rem 0; border-bottom: 1px solid var(--slate-12); font-size: 0.9688rem; color: var(--slate-70); }
.rules li:first-child { border-top: 1px solid var(--slate-12); }
/* Only the leading <b> is the rule's label. Scoped to :first-child so inline
   bold inside the rule text (a dollar figure, say) stays inline body copy. */
.rules li > b:first-child { font-family: var(--display); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-ink); display: block; margin-bottom: 0.4rem; }

.limitcard--light { background: var(--graphite); color: var(--on-dark); }

/* ======================================================== scroll reveal === */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* =============================================================== mobile === */

/* Short viewports: shrink the hero type and header so the content can't
   outgrow the measured height and shove the anchor bar below the fold.
   A 1080p laptop in Chrome/Brave with a bookmarks bar lands near 960px, so
   this tier has to start well above the old 820px threshold. */
@media (min-width: 901px) and (max-height: 1000px) {
  .hero__name { font-size: clamp(2.5rem, 4vw, 4rem); margin-bottom: 1rem; }
  .hero__quote { font-size: 1.0625rem; margin-bottom: 1.5rem; padding-left: 1.15rem; }
  .hero .eyebrow { margin-bottom: 1rem; }
  .hero__cta .btn { padding-block: 0.9rem; }
  .masthead { padding-block: 10px; }
  .wordmark__rule { margin-bottom: 6px; height: 3px; }
  .wordmark__sub { margin-top: 4px; }
  .anchorbar__item { padding-block: 0.85rem; }
}

@media (min-width: 901px) and (max-height: 800px) {
  .hero__name { font-size: clamp(2.25rem, 3.4vw, 3.25rem); }
  .hero__quote { font-size: 1rem; margin-bottom: 1.25rem; }
}

@media (max-width: 1080px) {
  .issues__cols { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; }
  /* Stack: circular portrait above, text below, flag still full-bleed behind
     everything. Heavier scrim — on mobile the text sits over the whole image. */
  .hero {
    background:
      linear-gradient(to bottom,
        rgba(18, 20, 23, 0.88) 0%,
        rgba(18, 20, 23, 0.80) 100%),
      url("../assets/ca-flag.jpg") center 20% / cover no-repeat var(--graphite);
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: clamp(2.5rem, 8vw, 4rem) 0;
    padding-right: 0;
  }
  .hero__portrait { order: 1; }
  .hero__portrait img { width: min(52vw, 280px); }
  .hero__content { order: 2; padding-block: 0; padding-inline: var(--pad); }
  /* nowrap can't survive a 375px screen at 14 characters — let it size down */
  .hero__name { font-size: clamp(2rem, 10.5vw, 3rem); }

  .overview__grid, .issues__head, .give, .involve, .contact, .goals, .givepage { grid-template-columns: 1fr; }
  .goals { gap: 0; }
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split__media { aspect-ratio: 4 / 3; }
  .split__body { padding: var(--sect) var(--pad); }
  .deflist div { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* The bar carries seven section links plus the donate button, which needs
   about 1250px even at the tightened size below. Under that, collapse to the
   toggle menu, where all eight items get a full-width row each. */
@media (max-width: 1250px) {
  .nav-toggle { display: block; }
  .masthead { flex-wrap: wrap; position: relative; }
  .nav {
    display: none; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding-top: 1rem;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) {
    padding: 1rem 0; border-bottom: 1px solid var(--on-dark-15);
    font-size: 1.0625rem; white-space: normal;
  }
  .nav .btn { margin-top: 1.25rem; justify-content: center; }
}

@media (max-width: 820px) {
  .anchorbar { display: block; padding-block: 0.5rem; }
  .anchorbar__item { border-right: 0; border-bottom: 1px solid var(--on-dark-15); margin-right: 0; padding: 0.9rem 0; }
  .anchorbar__cta { margin-left: 0; padding-block: 1.1rem; }
  .anchorbar__cta .btn { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
  .issues__cols { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================== priorities === */
/* Long-form issue blocks. These replace the four short cards: the client's
   copy now runs several paragraphs per priority, which a 4-up grid can't
   carry. Number + title sit in a left rail, body copy in a measured column. */

.priorities { margin-top: clamp(3rem, 6vw, 5rem); }

.priority {
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
  border-top: 2px solid var(--slate-45);
}
.priority__num {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.12em; color: var(--slate-70);
  margin-bottom: 0.9rem;
}
.priority__head h3 {
  margin: 0;
  font-size: clamp(1.3125rem, 2vw, 1.625rem);
  line-height: 1.18;
  color: var(--red-ink);
}
.priority__body p {
  margin: 0 0 1.15rem;
  color: var(--slate);
  font-size: 1rem;
  max-width: 70ch;
}
.priority__body p:last-child { margin-bottom: 0; }

/* ================================================================ prose === */
/* Multi-paragraph body copy: the bio and the district write-up. */

/* Full container width, no measure cap. */
.prose { max-width: none; }
/* Body copy that follows a headline or section head. Replaces the top margin
   the old .support class carried, so the bio doesn't butt against the photo. */
.prose--top { margin-top: clamp(2rem, 4vw, 3rem); }
.prose p { margin: 0 0 1.25rem; color: var(--slate); }
.prose p:last-child { margin-bottom: 0; }
.band-dark .prose p { color: var(--on-dark-70); }
.prose--lede p:first-child { font-size: 1.125rem; }

/* ========================================================== endorsers ===== */

.endorsers { list-style: none; margin: 0 0 1.35rem; padding: 0; display: grid; gap: 0.85rem; }
.endorsers li {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--slate); line-height: 1.3;
}
.endorsers li span {
  display: block; margin-top: 0.2rem;
  font-family: var(--serif); font-weight: 400; font-size: 0.9063rem;
  color: var(--slate-70);
}

@media (max-width: 900px) {
  .priority { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ------------------------------------------------- short phones (hero fit) */
/* On an iPhone SE class screen (375x667) the stacked hero pushed the CTA
   about 133px below the fold. That predates the longer four-sentence quote
   (the old one wrapped to the same four lines), but the buttons still have to
   be reachable without scrolling, so tighten the stack on short viewports:
   smaller portrait, tighter gaps, and a slightly smaller quote. */

@media (max-width: 900px) and (max-height: 740px) {
  .hero__inner { gap: 1.5rem; padding-block: 1.5rem; }
  .hero__portrait img { width: min(38vw, 180px); }
  .hero__portrait::after {
    bottom: -0.7rem; font-size: 0.5938rem; padding: 0.38rem 0.85rem;
  }
  .hero .eyebrow { margin-bottom: 0.6rem; }
  .hero__name { font-size: clamp(1.75rem, 8.5vw, 2.5rem); margin-bottom: 0.65rem; }
  .hero__quote {
    font-size: 0.9375rem; line-height: 1.5;
    margin-bottom: 1.1rem; padding-left: 1rem;
  }
  .hero__cta { gap: 0.6rem; }
  .hero__cta .btn { padding-block: 0.8rem; }
}

/* ------------------------------------------------------ nav bar sizing --- */
/* Labels must never break mid-phrase ("How I'd / work"), so nowrap them and
   let the bar's own rhythm absorb the extra items instead. */

.nav a:not(.btn) { white-space: nowrap; }

/* Between the toggle breakpoint and a wide desktop there is room for the full
   bar, but only at a tighter rhythm. Bounded below so it never leaks into the
   stacked toggle menu. */
@media (min-width: 1251px) and (max-width: 1459px) {
  .nav { gap: 1.25rem; }
  .nav a:not(.btn) { font-size: 0.8125rem; letter-spacing: 0.1em; }
  .nav .btn { font-size: 0.75rem; letter-spacing: 0.1em; padding: 0.95rem 1.4rem; }
  .wordmark__name { font-size: 1.6rem; }
}

/* Committee mailing address block inside a card. */
.address {
  font-family: var(--display); font-weight: 600; font-size: 0.9375rem;
  line-height: 1.65; color: var(--slate); margin: 0;
}

/* Public-facing variant of the processor slot, used while the donation system
   is being set up. Drops the dashed "build placeholder" border for a real
   card, so it reads as a deliberate notice rather than an unfinished page. */
.embed-slot--notice {
  border: 1px solid var(--slate-12);
  border-top: 4px solid var(--red);
  min-height: 340px;
}
.embed-slot__lead {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--slate);
}
.embed-slot .btn { justify-self: center; margin-top: 0.6rem; }

/* The amount chips were authored for the dark homepage band, so their resting
   state is on-dark text on a near-invisible border. On the donate page they
   sit on a light ground, where that renders as white-on-bone. Restate the
   resting colors there; the gold hover from .amount:hover still applies. */
.band-light .amount,
.band-white .amount { border-color: var(--slate-45); color: var(--slate); }

/* ---------------------------------------------------------- form plumbing --- */

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Inline result message under the submit button. */
.form__status {
  margin: 1rem 0 0; padding: 0.9rem 1.1rem;
  font-family: var(--display); font-weight: 600; font-size: 0.9375rem;
  line-height: 1.5;
}
.form__status--ok {
  background: #EAF3EA; border-left: 4px solid #2E7D32; color: #1B4B1D;
}
.form__status--error {
  background: #FBEAEA; border-left: 4px solid var(--red); color: #8A1010;
}