/* ============================================================================
   VOTERTHANKS — ART DIRECTION
   The civic mailer: official, high-contrast, plainly legible. No persuasion styling.

   Every sub-brand ships the SAME markup (.vhero / .vhero__overlay / h1.display /
   .gal-grid). This file therefore differentiates through art direction only: a
   different display face, eyebrow ornament, hero composition, surface treatment
   and section rhythm -- not a recoloured copy of the others.
   ========================================================================= */
:root{
  /* The shipped CSS REFERENCES --color-primary / --color-primary-dark (the
     mission hero and the sub-brand location hero both build their gradient from
     them) but nothing ever DEFINES them, so every brand fell back to a generic
     navy. Defining them here is what makes those heroes brand-coloured. */
  --color-primary:#B91C1C; --color-primary-dark:#1A1A2E; --color-primary-mid:#8B1414;
  --bx-ink:#1A1A2E; --bx-accent:#B91C1C; --bx-accent-d:#8B1414;
  --bx-paper:#FAF9F7; --bx-paper-2:#EFEDE9; --bx-rule:#D8D4CE; --bx-ash:#4A4A57;
  --focus-ring:#8B1414;
}

/* The sub-brand hero paints its own scrim in .vhero__scrim, so --grad-hero (the
   HIP hook) does nothing here. The shipped gradient was too light for white
   type over a pale photograph; this deepens it and anchors it where the text
   actually sits, without hiding the photograph. */
.vhero__scrim{
  background:linear-gradient(168deg, rgba(8,10,26,.58), rgba(8,10,26,.66) 46%, rgba(8,10,26,.86)) !important;
}

body{ background:var(--bx-paper); }
main section:not(.section--dark){ background:var(--bx-paper); }
main section.section:not(.section--dark):nth-of-type(even){ background:var(--bx-paper-2); }
main section.section--dark{ background:var(--bx-ink); }

/* --- rhythm: three densities, never one repeated value ------------------- */
/* Headings read --heading-ink (foundation.css). Setting the TOKEN rather than
   the colour keeps brand identity intact without a specificity fight. */
:root{ --heading-ink:#1A1A2E; --body-ink:#4A4A57; }
.vhero, .vhero .vhero__overlay{ --heading-ink:#ffffff; }

main section{ padding-block:var(--rhythm-base); }
main section.gallery{ padding-block:var(--rhythm-open); }
main section.section--dark:last-of-type{ padding-block:var(--rhythm-open); }

/* --- type --------------------------------------------------------------- */
h1,h2,h3,.display{ font-family:var(--display), "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing:-.022em; line-height:1.08; }
h2{ font-size:clamp(1.65rem,2.4vw,2.35rem); }
p,li{ font-family:var(--display), "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif; line-height:1.62; color:var(--body-ink, var(--bx-ash)); }
/* dark grounds come from --body-ink (foundation.css) */

.eyebrow{ font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:#B91C1C; display:inline-block; border-top:3px solid #B91C1C; padding-top:7px; }

/* --- hero --------------------------------------------------------------- */
.vhero__media{ border-radius:0 !important; }
.vhero .vhero__overlay{ text-align:left; max-width:41rem; margin-inline:0 auto 0 0; }
.vhero .vhero__overlay::before{ content:""; display:block; width:64px; height:5px;
  background:#B91C1C; margin-bottom:18px; }
.vhero .display, .vhero h1.display{
  /* foundation.css has already disabled the background-clip:text trick, so a
     plain colour is now the thing that actually paints the headline. */
  color:#fff !important;
  font-size:clamp(2.1rem,4.9vw,3.7rem) !important;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
}
.vhero .lead{ color:rgba(255,255,255,.93) !important; text-shadow:0 1px 14px rgba(0,0,0,.5); }
.vhero .eyebrow{ color:#fff; }

/* --- surfaces and controls --------------------------------------------- */
.card,[class*="__card"],.gal-grid > *,.uc{ background:#fff; border:1px solid #D8D4CE;
  border-radius:2px; box-shadow:none; }
.btn,a.btn,button.btn{ border-radius:2px; font-weight:700; letter-spacing:-.01em; }
.btn-primary,a.btn.btn-primary{ background:var(--bx-accent); border:1px solid var(--bx-accent-d); color:#fff; }
.btn-primary:hover,a.btn.btn-primary:hover{ background:var(--bx-accent-d); }
.vhero__ghost{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.55); color:#fff; }
.vhero__ghost:hover{ background:rgba(255,255,255,.2); }
hr,.divider{ border:0; border-top:1px solid var(--bx-rule); }
.gal-meta{ font-family:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size:.72rem; letter-spacing:.02em; color:var(--bx-ash); }

/* --- signature: the civic bar --------------------------------------------
   A flat two-tone rule under each heading. Deliberately plain: this brand gets
   clarity and accessibility only -- no persuasion styling of any kind. */
main section h2{ padding-bottom:12px; border-bottom:4px solid var(--bx-accent); display:inline-block; }
main section.section--dark h2{ border-bottom-color:#fff; }

/* --- mission page ----------------------------------------------------------
   The shipped CSS pins the mission hero to a hardcoded navy:
       .mission-hero{ background:linear-gradient(180deg,#141a3a,#0d1024)!important }
   so all ten brands' mission pages read as HIP regardless of identity. Matching
   its !important is the only way to reach it; the gradient is built from this
   brand's own ink and accent. Text stays white -- the shipped rule already
   sets that, and the ground is still dark. */
.mission-hero{
  background:linear-gradient(150deg, var(--bx-accent-d) 0%, var(--bx-ink) 68%) !important;
}
.mission-badge{ background:rgba(255,255,255,.14); color:#fff; }


/* --- house mark ------------------------------------------------------------
   The papers mark is shared across all ten brands by design. It is kept, and
   only its rendering is regularised: a consistent optical size, real spacing
   from the wordmark, and no filter stack fighting the brand's own colour. */
.text-logo__icon{
  height: 1.28em;
  width: auto;
  margin-left: 10px;
  opacity: 1;
  flex: none;
}
.text-logo{ display: inline-flex; align-items: center; }

.vhero__scrim{
  background:linear-gradient(168deg, rgba(0,0,0,.18), rgba(0,0,0,.26) 48%%, rgba(0,0,0,.44)) !important;
}