/*
Theme Name: Brian Nathan for State Senate
Theme URI: https://brianforfl.com
Author: Resonance Campaigns
Description: Campaign theme for Brian Nathan, Florida State Senate District 14. Converted from the approved static design. No plugin dependencies.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: brian-nathan
*/

/* ==========================================================================
   Brian Nathan for State Senate — Campaign Stylesheet
   Built from "Nathan for State Senate" brand guide (Pantone 282 / 2187 / 1505 / 2013)
   Type: Gotham (display) + Poppins (body). See handoff notes re: Gotham licensing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Gotham — sourced from the viewer's locally installed copy.

   These @font-face rules use src: local() ONLY. No font file is bundled,
   uploaded, or served by this site, so no webfont licence is engaged: the
   browser simply uses Gotham if the machine already has it, and silently
   falls through to Montserrat if it does not.

   That means Juliana, the developer, and anyone else with Gotham installed
   sees real Gotham. Ordinary site visitors see Montserrat. For real Gotham
   for ALL visitors the campaign needs a webfont licence — see the handoff.

   Weight mapping: 400 Book · 500 Medium · 700 Bold · 800/900 Black.
   Multiple local() aliases are listed per weight because Gotham is named
   differently depending on how it was installed (H&Co OTF, HTF, Adobe).
   Open font-check.html to see which resolve on a given machine.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Gotham";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("Gotham Book"), local("Gotham-Book"), local("GothamHTF-Book"),
       local("Gotham Regular"), local("Gotham-Regular"), local("Gotham");
}
@font-face {
  font-family: "Gotham";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: local("Gotham Medium"), local("Gotham-Medium"), local("GothamHTF-Medium");
}
@font-face {
  font-family: "Gotham";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local("Gotham Bold"), local("Gotham-Bold"), local("GothamHTF-Bold");
}
@font-face {
  font-family: "Gotham";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: local("Gotham Black"), local("Gotham-Black"), local("GothamHTF-Black"),
       local("Gotham Bold"), local("Gotham-Bold");
}
@font-face {
  font-family: "Gotham";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: local("Gotham Ultra"), local("Gotham-Ultra"), local("Gotham Black"), local("Gotham-Black");
}

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand palette — straight from the logo guide */
  --navy-900: #041B37;   /* PANTONE 282 C  */
  --navy-700: #00446A;   /* PANTONE 2187 C */
  --orange:   #F27428;   /* PANTONE 1505 C */
  --gold:     #F29829;   /* PANTONE 2013 C */

  /* Extended neutrals derived for UI needs */
  --navy-950: #02101F;
  --navy-800: #052A4B;
  --navy-600: #0A5A87;
  --orange-dark: #D65C13;   /* hover / active state */
  --orange-ink:  #B2561E;   /* AA-safe orange for small text on white/cream */
  --orange-lg:   #DE6A1E;   /* AA-safe orange for LARGE text only (3.39:1) */
  --gold-light:  #FBC66B;

  --white:  #FFFFFF;
  --cream:  #FBF7F2;
  --sand:   #F1EBE3;
  --grey-300: #D8DEE5;
  --grey-500: #556270;
  --ink:    #14263A;

  /* Typography */
  --font-display: "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale */
  --fs-hero:    clamp(2.1rem, 1.4rem + 2.4vw, 3.5rem);
  --fs-h1:      clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem);
  --fs-h2:      clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-h3:      clamp(1.3rem, 1.08rem + 0.9vw, 1.75rem);
  --fs-lead:    clamp(1.14rem, 1.02rem + 0.6vw, 1.42rem);
  --fs-body:    1.05rem;
  --fs-small:   clamp(.9rem, .87rem + .15vw, .95rem);
  --fs-eyebrow: clamp(1rem, .88rem + .45vw, 1.3rem);

  /* Spacing */
  --gutter: clamp(1.25rem, 3.2vw, 4.5rem);
  --section-y: clamp(3.5rem, 7vw, 7rem);
  /* Content width tracks the viewport instead of parking at a fixed cap, so
     large monitors get proportionally wider content rather than more margin. */
  --max-w: min(2040px, 93vw);
  --max-w-narrow: min(1180px, 78vw);
  --max-w-text: 72ch;

  --radius: 4px;
  --radius-lg: 8px;
  --shadow-md: 0 12px 28px -12px rgba(4, 27, 55, 0.35);
  --shadow-lg: 0 28px 60px -24px rgba(4, 27, 55, 0.45);
  --transition: 180ms cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange-ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
/* Explicit sizes. Without these, a bare <h2> inherits the UA default of 1.5em
   (~25px at our body size) instead of the display scale. */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); text-transform: uppercase; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--orange); color: var(--navy-900); padding: .8rem 1.4rem;
  font-weight: 700; font-family: var(--font-display);
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--max-w-narrow); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.section--navy { background: var(--navy-900); color: #E8EEF5; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--navy a { color: var(--gold-light); }
.section--blue { background: var(--navy-700); color: #E8EEF5; }
.section--blue h2, .section--blue h3 { color: #fff; }
.section--cream { background: var(--cream); }
.section--sand { background: var(--sand); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 860px) {
  .grid--split { grid-template-columns: 1fr 1fr; align-items: center; }
  .grid--split-wide { grid-template-columns: .92fr 1.38fr; align-items: start; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 620px) and (max-width: 859px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 4. Brand motifs ---------- */
/* The orange "speed stripes" from the logo, reused as a section rule. */
.stripes {
  display: block;
  width: 92px;
  height: 18px;
  /* 4px bar, 3px gap, repeated — all integers, so the three bars sit on whole
     pixels and the gaps read as identical. The old rule offset the middle bar
     by 6.5px, which rounded differently at different zoom levels. */
  background: repeating-linear-gradient(
    to bottom,
    var(--orange) 0 4px,
    transparent 4px 7px
  );
  margin-bottom: 1.15rem;
}
.stripes--light {
  background: repeating-linear-gradient(
    to bottom,
    var(--gold) 0 4px,
    transparent 4px 7px
  );
}
.stripes--center { margin-inline: auto; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-ink);     /* light grounds: 4.6:1 */
  margin: 0 0 .75rem;
  display: block;
  line-height: 1.25;
}
/* On dark grounds the eyebrow uses gold (7.64:1); orange-ink is for light grounds only. */
.section--navy .eyebrow,
.section--blue .eyebrow,
.hero .eyebrow,
.page-banner .eyebrow,
.donate-box .eyebrow,
.page-hero .eyebrow,
.hero--full .eyebrow,
.photo-band .eyebrow { color: var(--gold-light); }

/* Emphasised intro copy. Colour + weight carry the emphasis so it reads as a
   deliberate highlight rather than a slightly-too-big paragraph. */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-weight: 600;
  color: var(--navy-700);
  letter-spacing: -0.005em;
}
.section--navy .lead, .section--blue .lead, .page-banner .lead, .page-hero .lead,
.hero .lead, .photo-band .lead, .vote-card--election .lead, .donate-box .lead { color: var(--gold-light); }
.lead--bold { font-weight: 700; color: var(--navy-900); }

/* Section headings pick up the all-caps voice of the logo lockup */
.section h2, .media-block__body h2, .coming-soon h2 {
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--navy-900);
}
.section--navy h2, .section--blue h2 { color: #fff; }
.media-block__body p, .coming-soon p { max-width: 54ch; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  line-height: 1.1;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--orange); color: var(--navy-900); border-color: var(--orange-dark); }
.btn--primary:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

.btn--navy { background: var(--navy-700); color: #fff; }
.btn--navy:hover { background: var(--navy-900); color: #fff; }

.btn--outline { background: transparent; color: var(--navy-700); border-color: var(--navy-700); }
.btn--outline:hover { background: var(--navy-700); color: #fff; }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--outline-light:hover { background: #fff; color: var(--navy-900); border-color: #fff; }

.btn--lg { padding: 1.2rem 2.4rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }

/* ---------- 6. Site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-900);
  border-bottom: 3px solid var(--orange);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
  padding-block: .75rem;
}
.site-logo { display: block; flex-shrink: 0; }
.site-logo img, .site-logo svg { width: clamp(150px, 17vw, 205px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.35rem); }
.nav__list { display: flex; align-items: center; gap: clamp(.3rem, 1.1vw, 1.05rem); list-style: none; margin: 0; padding: 0; }
.nav__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #DCE6F0;
  text-decoration: none;
  padding: .55rem .3rem;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.nav__link:hover { color: #fff; border-bottom-color: var(--orange); }
.nav__link[aria-current="page"] { color: #fff; border-bottom-color: var(--orange); }

.nav-toggle {
  display: none;
  background: transparent; border: 2px solid rgba(255,255,255,.35);
  border-radius: var(--radius);
  padding: .6rem .8rem; cursor: pointer; color: #fff;
  min-width: 46px; min-height: 46px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; transition: var(--transition); }

/* Seven nav labels + logo + donate button need ~1250px laid out horizontally,
   so the collapsed menu has to take over below that, not at a tablet width. */
@media (max-width: 1279px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--navy-900);
    border-bottom: 3px solid var(--orange);
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 1rem var(--gutter) 1.5rem;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; width: 100%; padding: .95rem 0;
    border-bottom: 1px solid rgba(255,255,255,.12); font-size: 1rem; }
  .nav__link:hover, .nav__link[aria-current="page"] { border-bottom-color: var(--orange); }
  .nav .btn { margin-top: 1rem; }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
}
/* Banner overlay texture removed at the client's request. */
.hero::after { content: none; }
.hero__inner {
  position: relative; z-index: 2;
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.15fr .85fr; }
}
.hero__title {
  font-size: var(--fs-hero);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  margin-bottom: .55em;
}
.hero__title em { font-style: normal; color: var(--gold); }
.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 16%;
}
.hero__badge {
  position: absolute; left: -12px; bottom: 26px;
  background: var(--orange); color: var(--navy-900);
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; font-size: .8rem;
  padding: .8rem 1.3rem;
  box-shadow: var(--shadow-md);
}
@media (max-width: 899px) {
  .hero__media img { aspect-ratio: 3 / 2; object-position: 50% 20%; }
}

/* Signup form in hero */
.signup { margin-top: 1.9rem; max-width: 520px; }
.signup__fields { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .signup__fields { grid-template-columns: 1.6fr 1fr; } }
.field label {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.85rem, .8rem + .2vw, .92rem);
  letter-spacing: .1em; text-transform: uppercase;
  color: #CFDDEA; margin-bottom: .4rem;
}
.field input {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem;
  padding: .9rem 1rem;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.field input::placeholder { color: rgba(255,255,255,.55); }
.field input:focus { border-color: var(--gold); background: rgba(255,255,255,.14); }
.signup .btn { margin-top: .95rem; }
.signup__note { font-size: clamp(.86rem, .83rem + .15vw, .93rem); color: #B7C9DA;
  margin-top: .9rem; line-height: 1.55; }

/* ---------- 8. Page banner (interior pages) ---------- */
.page-banner {
  background: var(--navy-900);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-banner::after { content: none; }
.page-banner__inner { position: relative; z-index: 2; padding-block: clamp(2.75rem, 5.5vw, 4.75rem); }
.page-banner h1 {
  font-size: clamp(2.15rem, 1.3rem + 2.9vw, 3.85rem);
  color: #fff; text-transform: none;
  font-weight: 700; letter-spacing: -0.022em; line-height: 1.08; max-width: 24ch;
}
.page-banner h1.h1--long {
  font-size: clamp(1.55rem, 1.05rem + 1.7vw, 2.5rem);
  max-width: 30ch;
  letter-spacing: -0.012em;
  line-height: 1.14;
}
.page-banner .lead { color: #CBDAE8; max-width: 60ch; }

/* Eyebrows introducing a section carry more weight than inline ones */
.media-block__body .eyebrow,
.page-hero .eyebrow,
.hero--full .eyebrow {
  font-size: clamp(1.05rem, .92rem + .5vw, 1.42rem);
  letter-spacing: .12em;
  margin-bottom: .55rem;
}

/* ---------- 9. Media / text blocks ---------- */
.media-block__img img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow-md);
}
.media-block--portrait .media-block__img img { aspect-ratio: 3 / 4; }
@media (min-width: 860px) {
  .media-block--reverse .media-block__img { order: 2; }
  .media-block--reverse .media-block__body { order: 1; }
}

.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.photo-pair img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.photo-pair .img-placeholder { aspect-ratio: 3 / 4; height: auto; width: 100%; }
@media (min-width: 860px) { .photo-pair > :nth-child(2) { margin-top: 2.5rem; } }

/* Placeholder for an asset we don't have yet */
.img-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .5rem;
  background: repeating-linear-gradient(45deg, var(--sand) 0 12px, #E7DFD4 12px 24px);
  border: 2px dashed var(--navy-700);
  border-radius: var(--radius-lg);
  color: var(--navy-700);
  padding: 1.5rem;
  aspect-ratio: 1 / 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.img-placeholder small { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .75rem; line-height: 1.4; opacity: .85; }

/* ---------- 10. Agenda cards ---------- */
.agenda-grid { display: grid; gap: 1.25rem; }
@media (min-width: 660px) { .agenda-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .agenda-grid { grid-template-columns: repeat(4, 1fr); } }

.agenda-card {
  background: #fff;
  border-top: 6px solid var(--orange);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: .6rem;
}
.agenda-card__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 2.1rem; line-height: 1;
  color: var(--orange-ink);
}
.agenda-card h3 { font-size: 1.13rem; margin: 0; letter-spacing: -.01em; line-height: 1.25; color: var(--navy-900); }

/* ---------- 11. Contribution bar ---------- */
.chip-in {
  background: var(--navy-700);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}
.chip-in__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.25rem; margin-bottom: 1.5rem; }
.chip-in__head h2 { margin: 0; color: #fff; font-size: var(--fs-h2); text-transform: uppercase; }
.chip-in__head p { margin: 0; color: #C9DCEA; font-size: .95rem; }
.chip-in__amounts {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  margin-bottom: 1.25rem;
}
.amount {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  padding: 1.05rem .5rem;
  text-align: center;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: var(--radius);
  background: transparent; color: #fff;
  cursor: pointer; text-decoration: none;
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.amount:hover, .amount[aria-pressed="true"] {
  background: var(--orange); border-color: var(--orange); color: var(--navy-900); transform: translateY(-2px);
}
.chip-in__note { font-size: clamp(.86rem, .83rem + .15vw, .93rem); color: #BBD2E3;
  margin-top: 1.1rem; line-height: 1.55; }

/* ---------- 12. Big donate box (every page, per brief) ---------- */
.donate-box {
  background: linear-gradient(115deg, var(--orange) 0%, var(--gold) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.donate-box::after { content: none; }
.donate-box__inner {
  position: relative; z-index: 2;
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
  display: grid; gap: 1.75rem; align-items: center;
}
@media (min-width: 860px) { .donate-box__inner { grid-template-columns: 1.35fr auto; } }
.donate-box { color: var(--navy-900); }
.donate-box h2 { color: var(--navy-900); margin: 0 0 .45em; font-size: var(--fs-h2); text-transform: uppercase; }
.donate-box p { color: var(--navy-900); margin: 0; max-width: 56ch; font-weight: 500; }
.donate-box .stripes--light {
  /* Navy bars for contrast on the orange ground — same 4/3/18 geometry as the
     base rule. This override was missed when the base rule was corrected and
     was still using the old fractional offsets. */
  background: repeating-linear-gradient(
    to bottom,
    var(--navy-900) 0 4px,
    transparent 4px 7px
  );
}
.donate-box .btn { background: var(--navy-900); color: #fff; }
.donate-box .btn:hover { background: #fff; color: var(--navy-900); }

/* ---------- 13. Vote page ---------- */
.page-banner h1.vote-hero-date { color: var(--orange); }
.vote-hero-date {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.02em; text-wrap: balance; max-width: none;
  font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5rem);
  line-height: .95; color: var(--orange); text-transform: uppercase;
  margin: 0 0 .3em;
}
.vote-card {
  background: #fff;
  border-left: 6px solid var(--navy-700);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-md);
}
.vote-card + .vote-card { margin-top: 1.25rem; }
.vote-card h3 { color: var(--navy-900); font-size: var(--fs-h3); }
.vote-card__meta {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
  font-size: clamp(.9rem, .85rem + .22vw, 1rem);
  color: var(--orange-ink); margin-bottom: .55rem;
}
.key-dates { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 720px) { .key-dates { grid-template-columns: repeat(4, 1fr); } }
.key-date {
  background: rgba(2,16,31,.72);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.key-date dt {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.86rem, .8rem + .28vw, 1.02rem);
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); margin-bottom: .4rem;
}
.key-date dd {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.45rem, 1.2rem + .9vw, 2rem);
  color: #fff; line-height: 1.1;
}

/* ---------- 14. Forms / embeds ---------- */
.embed-slot {
  background: var(--white);
  border: 2px dashed var(--navy-700);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--navy-700);
}
.embed-slot h3 { color: var(--navy-900); margin-bottom: .4rem; }
.embed-slot code {
  display: inline-block; margin-top: .8rem;
  background: var(--navy-900); color: var(--gold-light);
  padding: .45rem .8rem; border-radius: var(--radius);
  font-size: .92rem; word-break: break-all;
}

/* ---------- 15. Coming soon (Media, Endorsements) ---------- */
.coming-soon {
  text-align: center;
  padding-block: clamp(3rem, 7vw, 6rem);
  max-width: 62ch; margin-inline: auto;
}
.coming-soon .stripes { margin-inline: auto; }

/* ---------- 16. Footer ---------- */
.site-footer { background: var(--navy-950); color: #B8C9DA; font-size: var(--fs-small); }
.site-footer__main {
  display: grid; gap: 2.5rem;
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
@media (min-width: 860px) { .site-footer__main { grid-template-columns: 1.25fr 1fr 1fr; } }
.site-footer h2 {
  font-size: clamp(.9rem, .86rem + .2vw, 1rem);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.15rem;
}
.site-footer a { color: #D6E3EF; text-decoration: none; }
/* `.site-footer a` outranks `.btn--primary`, so restate the button colours here. */
.site-footer a.btn--primary { color: var(--navy-900); }
.site-footer a.btn--primary:hover { color: var(--navy-900); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-logo img, .footer-logo svg { width: 210px; margin-bottom: 1.35rem; }
.social-row { display: flex; gap: .7rem; margin-top: 1.1rem; flex-wrap: wrap; }
.social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  transition: var(--transition);
}
.social-row a:hover { background: var(--orange); border-color: var(--orange); color: var(--navy-900); }
.social-row svg { width: 18px; height: 18px; fill: currentColor; }

.disclaimers {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: 1.75rem 2.5rem;
  display: grid; gap: .9rem;
  font-size: clamp(.87rem, .84rem + .15vw, .93rem); line-height: 1.7; color: #A3B8CC;
}
.disclaimers strong { color: #B8C9DA; font-weight: 600; }

/* ---------- 17. Print ---------- */
@media print {
  .site-header, .donate-box, .signup, .nav-toggle { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   18. Full-bleed hero (home) — photo carries the width, copy sits to the right
   ========================================================================== */
.hero--full {
  position: relative;
  min-height: clamp(560px, 78vh, 860px);
  display: flex;
  align-items: center;
  background: var(--navy-900);
  overflow: hidden;
}
.hero--full .hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 29% 28%;
  z-index: 0;
}
/* Scrim: transparent over Brian on the left, solid navy under the copy on the right. */
.hero--full .hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(4,27,55,.04)  0%,
      rgba(4,27,55,.08) 38%,
      rgba(4,27,55,.70) 50%,
      rgba(4,27,55,.93) 62%,
      rgba(4,27,55,.98) 100%);
}
/* The diagonal stripe texture that used to sit over the hero photo has been
   removed at the client's request. Class kept as a no-op so existing markup
   and the WordPress template don't need surgery. */
.hero--full .hero__stripes { display: none; }
.hero--full .wrap { position: relative; z-index: 3; width: 100%; }
.hero--full .hero__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .hero--full .hero__grid { grid-template-columns: 0.85fr 1.15fr; }
  .hero--full .hero__copy { grid-column: 2; }
}
.hero--full .hero__copy { padding-block: clamp(3rem, 6vw, 4.5rem); max-width: 760px; }
.hero--full .hero__title {
  font-size: var(--fs-hero); color: #fff;
  text-transform: none;          /* sentence case reads better at this length */
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin-bottom: .55em;
}
.hero--full .hero__title em { font-style: normal; color: var(--gold); }

@media (max-width: 899px) {
  .hero--full { min-height: 0; display: block; }
  .hero--full .hero__photo { position: relative; height: 58vw; min-height: 260px; object-position: 30% 25%; }
  .hero--full .hero__scrim {
    background: linear-gradient(to bottom, rgba(4,27,55,.15) 0%, rgba(4,27,55,.55) 62%, var(--navy-900) 100%);
    bottom: auto; height: 58vw; min-height: 260px;
  }
  .hero--full .hero__stripes { display: none; }
  .hero--full .hero__copy { padding-block: 2.25rem 3rem; }
}

/* ==========================================================================
   19. Page hero with photo behind the title (About / Agenda / Vote / Get Involved)
   ========================================================================== */
.page-hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: clamp(400px, 56vh, 620px);
  background: var(--navy-900);
  overflow: hidden;
}
.page-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  /* People stand in the upper third of these frames. Anchoring the crop there
     keeps faces in shot as the banner widens on large displays. */
  object-position: 50% 30%;
}
.page-hero__img--faces { object-position: 50% 26%; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(4,27,55,.55) 0%, rgba(4,27,55,.38) 38%, rgba(4,27,55,.88) 80%, rgba(4,27,55,.97) 100%),
    linear-gradient(to right,
      rgba(4,27,55,.62) 0%, rgba(4,27,55,.28) 55%, rgba(4,27,55,.10) 100%);
}
.page-hero__stripes { display: none; }
.page-hero .wrap { position: relative; z-index: 3; width: 100%; }
.page-hero__copy { padding-block: clamp(2.25rem, 4.2vw, 3.5rem); max-width: 700px; }
.page-hero__copy--wide { max-width: 940px; }
/* One banner treatment for every page: sentence case, weight 700, one scale.
   Long headlines are hard work in all-caps, and mixing weights across pages
   made the banners look inconsistent. `.is-sentence` is kept as a no-op alias
   so existing markup keeps working. */
.page-hero h1,
.page-hero h1.is-sentence {
  color: #fff;
  font-size: clamp(2.15rem, 1.3rem + 2.9vw, 3.85rem);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin-bottom: .38em;
}
/* About Brian's headline is a full sentence — at the standard banner size it
   fills the frame and sits over the faces in the photograph. Smaller type on a
   wider column keeps it to two lines and clears the people behind it. */
.page-hero h1.is-long {
  font-size: clamp(1.5rem, 1.02rem + 1.7vw, 2.45rem);
  line-height: 1.12;
  max-width: 22ch;
}
@media (min-width: 900px) {
  .page-hero__copy--long { max-width: 1180px; }
  .page-hero h1.is-long { max-width: none; }
}
.page-hero .lead { color: var(--gold-light); max-width: 52ch; }
.page-hero--short { min-height: clamp(320px, 40vh, 460px); }

/* ==========================================================================
   20. Polaroid photo treatment
   ========================================================================== */
.polaroids {
  display: flex; gap: clamp(.9rem, 2vw, 1.75rem);
  align-items: flex-start; justify-content: center;
  padding-block: 1rem;
}
@media (max-width: 640px) {
  /* flex-basis:0 makes the frames shrink rather than wrap — stack explicitly. */
  .polaroids { flex-direction: column; align-items: center; }
  .polaroid { width: 100%; max-width: 420px; flex: 0 0 auto; }
}
.polaroid {
  margin: 0;                 /* <figure> ships with a UA margin of 1em 40px */
  background: #fff;
  padding: 12px 12px 62px;
  border-radius: 3px;
  box-shadow: 0 18px 40px -14px rgba(4,27,55,.42), 0 2px 6px rgba(4,27,55,.14);
  flex: 1 1 0;
  min-width: 0;
  max-width: 560px;
  transition: transform 380ms cubic-bezier(.2,.7,.3,1), box-shadow 380ms ease;
  will-change: transform;
}
.polaroid:nth-child(odd)  { transform: rotate(-2.2deg); }
.polaroid:nth-child(even) { transform: rotate(1.9deg); }
.polaroid:hover { transform: rotate(0deg) translateY(-8px) scale(1.02); box-shadow: 0 30px 60px -18px rgba(4,27,55,.5); z-index: 2; }
.polaroid img {
  width: 100%; height: auto;      /* no crop — the whole frame is visible */
  display: block; background: var(--sand);
}
.polaroid figcaption {
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(.95rem, .88rem + .3vw, 1.12rem);
  letter-spacing: .03em;
  color: var(--navy-800); text-align: center;
  margin-top: 18px; line-height: 1.3;
}
.polaroid__note { display: block; font-family: var(--font-body); font-weight: 400;
  font-size: clamp(.88rem, .84rem + .18vw, .98rem); color: var(--grey-500);
  letter-spacing: 0; margin-top: 5px; }
@media (max-width: 820px) {
  .polaroid { padding: 10px 10px 44px; }
  .polaroid:nth-child(odd), .polaroid:nth-child(even) { transform: none; }
  .polaroid:hover { transform: translateY(-6px); }
}

/* ==========================================================================
   21. Vote page — icons, chronological order, prominent Election Day
   ========================================================================== */
.vote-card {
  display: grid;
  /* Fixed first column so every step number sits on the same vertical line,
     rather than floating off each card's corner at a different offset. */
  grid-template-columns: clamp(56px, 5vw, 76px) auto 1fr;
  gap: 1.1rem 1.35rem;
  /* Top-aligned so the number reads as a label on the heading rather than
     floating at the vertical centre of a tall card. */
  align-items: start;
}
.vote-card__icon {
  width: 60px; height: 60px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--navy-700);
  display: flex; align-items: center; justify-content: center;
}
.vote-card__icon svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vote-card__body { grid-column: 3; }
.vote-card__step {
  grid-column: 1; grid-row: 1;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
  line-height: 1;
  color: var(--orange-lg);   /* brand orange itself is 2.88:1 — just under AA */
  text-align: center;
  justify-self: center;
  font-variant-numeric: tabular-nums;
  margin-top: -.12em;          /* optical: cap-height to meta baseline */
}
.vote-card__icon { grid-column: 2; grid-row: 1; margin-top: .15rem; }
.vote-card { position: relative; }
@media (max-width: 700px) {
  .vote-card { grid-template-columns: auto auto 1fr; gap: .8rem .9rem; }
  .vote-card__icon { width: 46px; height: 46px; }
  .vote-card__icon svg { width: 23px; height: 23px; }
  .vote-card__step { font-size: 2.1rem; }
  .vote-card__body { grid-column: 1 / -1; grid-row: 2; }
}

/* Election Day — the one that has to shout */
.vote-card--election {
  background: var(--navy-900);
  border-left: 6px solid var(--orange);
  border-radius: var(--radius-lg);
  color: #E8EEF5;
  position: relative;
  overflow: hidden;
  /* Left padding matches the standard card so the step number stays on the
     same vertical rail; the extra room goes on the other three sides. */
  padding: clamp(2.25rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3.25rem)
           clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-lg);
  margin-top: 2rem;
}
.vote-card--election::after { content: none; }
.vote-card--election > * { position: relative; z-index: 2; }
.vote-card--election h3 {
  color: #fff;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  text-transform: uppercase; line-height: .98; margin-bottom: .25em;
}
.vote-card--election .vote-card__meta { color: var(--gold); font-size: .95rem; }
.vote-card--election .vote-card__icon { background: var(--orange); width: 68px; height: 68px; }
.vote-card--election .vote-card__icon svg { stroke: var(--navy-900); }
.vote-card--election .vote-card__icon svg { width: 34px; height: 34px; }
.vote-card--election .vote-card__step { color: var(--gold); }
.election-countdown {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  font-size: clamp(.9rem, .85rem + .22vw, 1rem);
  color: var(--gold); margin-top: 1.35rem;
}

/* Key-date strip: the final one is the emphasis */
.key-date--election {
  background: var(--orange);
  border-color: var(--orange);
}
.key-date--election dt { color: var(--navy-900); }
.key-date--election dd { color: var(--navy-900); }
.key-date__step {
  display: inline-block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(.88rem, .82rem + .26vw, 1.02rem);
  letter-spacing: .12em; color: var(--gold); margin-bottom: .45rem;
}
.key-date--election .key-date__step { color: var(--navy-900); opacity: 1; }

/* ==========================================================================
   22. Tampa photo band
   ========================================================================== */
.photo-band { position: relative; overflow: hidden; background: var(--navy-900); }
.photo-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.photo-band__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(4,27,55,.95) 0%, rgba(4,27,55,.78) 45%, rgba(4,27,55,.45) 100%);
}
.photo-band .wrap { position: relative; z-index: 2; }
.photo-band h2, .photo-band h3 { color: #fff; }
.photo-band .lead { color: var(--gold-light); }

/* ==========================================================================
   23. Motion — scroll reveal + micro-interactions
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 720ms cubic-bezier(.16,.8,.3,1), transform 720ms cubic-bezier(.16,.8,.3,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (min-width: 860px) {
  [data-reveal][data-reveal="left"]  { transform: translateX(-32px); }
  [data-reveal][data-reveal="right"] { transform: translateX(32px); }
}
@media (max-width: 859px) {
  [data-reveal][data-reveal="left"],
  [data-reveal][data-reveal="right"] { transform: translateY(22px); }
}
[data-reveal][data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-visible { transform: none; }
[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }
[data-reveal-delay="4"] { transition-delay: 360ms; }

/* Hero copy lifts in on load */
.hero__copy > * { animation: heroIn 900ms cubic-bezier(.16,.8,.3,1) both; }
.hero__copy > *:nth-child(1) { animation-delay: 80ms; }
.hero__copy > *:nth-child(2) { animation-delay: 160ms; }
.hero__copy > *:nth-child(3) { animation-delay: 240ms; }
.hero__copy > *:nth-child(4) { animation-delay: 340ms; }
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Slow drift on full-bleed hero photo — subtle, not a slideshow */
.hero--full .hero__photo { animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Cards and buttons */
.agenda-card { transition: transform 300ms cubic-bezier(.2,.7,.3,1), box-shadow 300ms ease, border-color 300ms ease; }
.agenda-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.vote-card { transition: transform 300ms cubic-bezier(.2,.7,.3,1), box-shadow 300ms ease; }
.vote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.media-block__img img, .page-hero__img { transition: transform 700ms cubic-bezier(.2,.7,.3,1); }
.media-block__img { overflow: hidden; border-radius: var(--radius-lg); }
.media-block__img:hover img { transform: scale(1.045); }
.stripes { transition: width 500ms cubic-bezier(.2,.7,.3,1); }
[data-reveal].is-visible .stripes, .is-visible > .stripes { width: 92px; }

/* Everything above is motion-only; kill it wholesale when asked. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__copy > * { animation: none !important; }
  .hero--full .hero__photo { animation: none !important; }
  .polaroid:hover, .agenda-card:hover, .vote-card:hover { transform: none !important; }
  .media-block__img:hover img { transform: none !important; }
}

/* Header gains depth once scrolled (set by main.js) */
.site-header { transition: box-shadow 260ms ease, background 260ms ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(0,0,0,.55); }

/* Companion card — sits under its numbered parent step, visually subordinate */
.vote-card--sub {
  border-left-color: var(--grey-300);
  background: #FCFCFD;
  margin-left: clamp(0px, 3vw, 40px);
}
.vote-card--sub .vote-card__icon { background: var(--grey-500); width: 50px; height: 50px;
  grid-column: 2; }
.vote-card--sub .vote-card__body { grid-column: 3; }
.vote-card--sub .vote-card__icon svg { width: 24px; height: 24px; }
.vote-card--sub h3 { font-size: 1.2rem; }


/* ==========================================================================
   24. Small-screen refinements
   ========================================================================== */
@media (max-width: 560px) {
  .hero--full .hero__photo,
  .hero--full .hero__scrim { height: 66vw; min-height: 300px; }
  .hero--full .hero__photo { object-position: 30% 22%; }
  .signup__fields { gap: .85rem; }
  .field input { padding: 1rem; font-size: 1rem; }   /* 16px: stops iOS zooming on focus */
  .btn { padding: 1.05rem 1.5rem; }
  .btn--lg { padding: 1.15rem 1.6rem; font-size: 1rem; }
  .chip-in__amounts { grid-template-columns: repeat(2, 1fr); }
  .amount { padding: 1.1rem .5rem; }
  .polaroids { gap: 1.5rem; }
  .agenda-card { padding: 1.5rem 1.25rem; }
  .vote-card, .vote-card--election { padding: 1.5rem 1.25rem; }
  .vote-card--sub { margin-left: 0; }
  .page-hero, .page-hero--short { min-height: 340px; }
}

@media (min-width: 561px) and (max-width: 900px) {
  .chip-in__amounts { grid-template-columns: repeat(3, 1fr); }
}

/* Small print set inline on a few pages — keep it above 13.5px everywhere */
.embed-slot p[style], main p[style*="font-size"] { font-size: .92rem !important; }

/* ==========================================================================
   25. Embedded Jotform — the frame around it
   --------------------------------------------------------------------------
   The form itself renders in a cross-origin iframe on form.jotform.com, so
   nothing in this stylesheet can reach inside it. What we control is the
   surround: heading, card, spacing, and the fallback link. To restyle the
   form's own fields, paste jotform-custom-css.css into Jotform's
   Form Designer → Styles → Inject Custom CSS.
   ========================================================================== */
.form-frame {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border-top: 6px solid var(--orange);
}
.form-frame__head {
  background: var(--navy-900);
  color: #E8EEF5;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.75rem);
  position: relative;
  overflow: hidden;
}
.form-frame__head::after { content: none; }
.form-frame__head > * { position: relative; z-index: 2; }
.form-frame__head h2 { color: #fff; margin-bottom: .3em; }
.form-frame__head p { color: #C3D5E4; margin: 0; max-width: 54ch; }
.form-frame__body { padding: clamp(.5rem, 1.5vw, 1.25rem); background: #fff; position: relative; }
.form-frame__body iframe { display: block; width: 100%; }
/* Workaround: the embedded Jotform shows its own branding at the bottom of
   the iframe, which theme CSS cannot reach inside. This overlay paints a
   white block over that strip instead. */
.form-frame__body::after {
  content: "";
  position: absolute;
  height: 100px;
  width: 100%;
  background: #fff;
  bottom: 0;
  left: 0;
}
@media (max-width: 640px) {
  .form-frame__body::after { height: 68px; }
}
.form-frame__fallback {
  margin: 0;
  padding: 1rem clamp(1.5rem, 3vw, 2.75rem) 1.5rem;
  font-size: .92rem;
  color: var(--grey-500);
  background: #fff;
  border-top: 1px solid var(--grey-300);
}
.form-frame__fallback a { color: var(--navy-700); font-weight: 600; }

/* ==========================================================================
   26. Election countdown
   --------------------------------------------------------------------------
   Target: 7:00 PM Eastern on Tuesday 3 November 2026, when polls close.
   Note that US daylight saving ends on Sunday 1 November 2026, so 3 November
   is EST (UTC-5), not EDT. The brief said "7pm EDT"; building to EDT would
   have ended the clock an hour early. Fixed UTC instant in main.js.
   ========================================================================== */
.countdown-bar {
  background: var(--navy-800);
  border-bottom: 3px solid var(--orange);
  color: #fff;
}
.countdown-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .6rem clamp(.85rem, 2vw, 1.75rem);
  padding-block: .7rem;
  text-align: center;
}
.countdown-bar__label {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(.86rem, .8rem + .25vw, .98rem);
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.countdown-bar__link {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.86rem, .8rem + .2vw, .94rem);
  letter-spacing: .07em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  border-bottom: 2px solid var(--orange); padding-bottom: 2px;
}
.countdown-bar__link:hover { color: var(--gold); }

.countdown { display: flex; gap: clamp(.4rem, 1.2vw, .9rem); align-items: flex-start; }
.countdown__unit {
  display: flex; flex-direction: column; align-items: center;
  min-width: clamp(44px, 6vw, 62px);
}
.countdown__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
  line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.countdown__word {
  font-family: var(--font-display); font-weight: 700;
  /* Unit labels sit directly under a much larger numeral, so they read as a
     pair rather than as standalone body text. Still lifted well clear of the
     9.6px they were. */
  font-size: clamp(.72rem, .68rem + .18vw, .8rem);
  letter-spacing: .1em; text-transform: uppercase;
  color: #B4C7D8; margin-top: .32rem;
}
.countdown__sep {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
  line-height: 1; color: var(--orange); align-self: flex-start;
}
.countdown-bar__closed {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(.95rem, .88rem + .3vw, 1.15rem);
  letter-spacing: .04em; color: #fff;
}

/* Large variant inside the Election Day card */
.countdown--lg { justify-content: flex-start; margin: 1.5rem 0 .25rem; }
.countdown--lg .countdown__unit { min-width: clamp(58px, 8vw, 86px); }
.countdown--lg .countdown__num { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); color: var(--gold); }
.countdown--lg .countdown__sep { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); }
.countdown--lg .countdown__word { color: #A9C4D8; font-size: clamp(.66rem, .62rem + .14vw, .76rem); }

@media (max-width: 640px) {
  .countdown-bar__inner { gap: .45rem .7rem; padding-block: .6rem; }
  .countdown__sep { display: none; }
  /* Drop the seconds on phones: it is the least useful unit and buys the
     others enough room to stay legible. */
  .countdown-bar .countdown__unit:last-child { display: none; }
  .countdown__unit { min-width: 52px; }
}

/* ==========================================================================
   27. Email + ZIP sign-up, used site-wide
   ========================================================================== */
.join-band { background: var(--navy-700); color: #E8EEF5; }
.join-band__inner {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
  align-items: center;
}
@media (min-width: 900px) { .join-band__inner { grid-template-columns: 1fr 1.05fr; } }
.join-band h2 { color: #fff; margin-bottom: .35em; }
.join-band .lead { color: var(--gold-light); }
.join-band__points { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.join-band__points li {
  position: relative; padding-left: 1.75rem;
  font-size: .98rem; color: #D3E2EE;
}
.join-band__points li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 12px; height: 3px; background: var(--orange);
}
.signup--band .field label { color: #CFE0EE; }
.signup--band { max-width: none; margin-top: 0; }
.signup--band .field input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
.signup--band .signup__note { color: #B7CDDE; }

/* Hero sign-up gets an explicit heading so it reads as an invitation */
.signup__head {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem);
  color: #fff; margin: 0 0 .2rem;
  text-transform: uppercase; letter-spacing: .02em;
}
.signup__sub {
  font-size: clamp(.9rem, .87rem + .15vw, .98rem);
  color: #C3D5E4; margin: 0 0 1rem;
}

/* ==========================================================================
   28. Vote-by-mail emphasis
   ========================================================================== */
.vote-card--featured {
  border-left-color: var(--orange);
  border: 2px solid var(--orange);
  border-left-width: 6px;
  background: #FFFDFA;
  box-shadow: 0 20px 44px -18px rgba(242,116,40,.45);
}
.vote-card__flag {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(.88rem, .84rem + .2vw, 1rem);
  letter-spacing: .1em; text-transform: uppercase;
  /* Plain coloured text — the pill treatment read as a button. */
  background: none; color: var(--orange-ink);
  padding: 0; border-radius: 0;
  margin-bottom: .45rem;
}
.vote-card--featured .vote-card__icon { background: var(--orange); }
.vote-card--featured .vote-card__icon svg { stroke: var(--navy-900); }
.vote-card__why {
  margin-top: 1rem; padding: 1rem 1.1rem;
  background: #FFF3E9; border-radius: var(--radius);
  font-size: .95rem; color: #5A3016;
}
.vote-card__why strong { color: #7A3F14; }

/* ==========================================================================
   29. Privacy policy / long-form legal copy
   ========================================================================== */
.legal { max-width: 78ch; }
.legal h2 {
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem);
  color: var(--navy-900);
  margin-top: 2.5rem; margin-bottom: .6rem;
  padding-top: 1.5rem; border-top: 3px solid var(--orange);
}
.legal h2:first-of-type { margin-top: .5rem; }
.legal h3 {
  font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem);
  color: var(--navy-700); text-transform: none;
  margin-top: 1.75rem; margin-bottom: .4rem;
}
.legal p { margin-bottom: 1rem; }
.legal ul { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.legal li { margin-bottom: .45rem; }
.legal__updated {
  font-size: .92rem; color: var(--grey-500);
  padding: 1rem 1.2rem; background: var(--cream);
  border-left: 4px solid var(--grey-300); border-radius: var(--radius);
  margin-bottom: 2rem;
}

/* Vote-by-mail tile in the key-date strip — the recommended route */
.key-date--featured {
  border-color: var(--orange);
  background: rgba(242,116,40,.16);
}
.key-date--featured .key-date__step { color: var(--gold-light); }

/* Home placement: sits directly beneath the hero, so it needs its own colour
   to read as a distinct band rather than a continuation of the navy hero. */
.join-band--primary {
  background: var(--cream);
  color: var(--ink);
  border-top: 5px solid var(--orange);
}
.join-band--primary h2 { color: var(--navy-900); }
.join-band--primary .lead { color: var(--navy-700); }
.join-band--primary .join-band__points li { color: var(--ink); }
.join-band--primary .field label { color: var(--navy-800); }
.join-band--primary .field input {
  background: #fff;
  border-color: var(--grey-300);
  color: var(--ink);
}
.join-band--primary .field input::placeholder { color: #8A98A6; }
.join-band--primary .field input:focus { border-color: var(--navy-700); }
.join-band--primary .signup__note { color: var(--grey-500); }
.join-band--primary .stripes--light {
  background: repeating-linear-gradient(to bottom, var(--orange) 0 4px, transparent 4px 7px);
}
.hero__actions { margin-top: 2rem; }