/* ==========================================================================
   Re-Elect Jen Lunsford — Campaign Site
   assets/css/styles.css

   SECTION MAP (append later page-specific styles under "9. PAGE MODULES")
   0. Fonts
   1. Design tokens
   2. Reset & base
   3. Layout primitives (container, section, split, media)
   4. Typography helpers (headings, bars, eyebrows, chevrons)
   5. Buttons & chips
   6. Header + primary nav + mobile nav
   7. Footer
   8. Page hero band (privacy/terms + future page heroes)
   9. PAGE MODULES
      9a. Home — hero + signup panel
      9b. Home — meet jen
      9c. Home — issue cards
      9d. Home — chip in
      9e. Home — volunteer teaser
      9f. Home — social cards
   10. Utilities (visually-hidden, reveal, skip link)
   11. Media queries / responsive overrides
   ========================================================================== */

/* ==========================================================================
   0. FONTS
   ========================================================================== */
@font-face {
  font-family: "Gotham Black";
  src: url("../fonts/Gotham-Black.woff2") format("woff2"),
       url("../fonts/Gotham-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Self-hosted Google fonts (variable, latin subset) — no third-party requests.
   Files fetched from fonts.gstatic.com; re-fetch there if weights are added. */
@font-face {
  font-family: "Oswald";
  src: url("../fonts/Oswald-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand palette */
  --navy: #1D2A59;
  --navy-mid: #293A7E;
  --navy-bright: #33499D;
  --cyan: #07AED1;
  --cyan-dark: #0793b0;
  --orange: #F15F42;
  --orange-dark: #d94d31;
  --off-white: #FAFAFA;
  --white: #FFFFFF;
  /* Near-black navy for small text on orange fills (WCAG AA 4.5:1 — plain
     navy and white both fall short at small sizes against #F15F42) */
  --navy-deep: #0D1630;

  /* Functional */
  --ink: var(--navy);
  --muted: #6b7280;
  --line: #e4e7ef;
  --error-on-navy: #ffd166;
  --error-on-light: #c22f14;

  /* Type */
  --font-display: "Gotham Black", "Arial Black", "Helvetica Neue", sans-serif;
  --font-condensed: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale — re-landed at professional web scale (judged at 1440),
     keeping the comp's hierarchy RATIOS; caps hold from ~1520px up. */
  --fs-display: clamp(38px, 4.2vw, 64px);      /* Gotham Black display headings */
  --fs-hero-title: clamp(24px, 2.4vw, 34px);   /* hero signup panel heading */
  --fs-page-title: clamp(38px, 4.2vw, 64px);
  --fs-section: clamp(28px, 2.6vw, 40px);
  --fs-card: clamp(21px, 2.1vw, 30px);
  --fs-lead: clamp(16px, 1.2vw, 18px);

  /* Rhythm */
  --container-w: min(90%, 1360px);
  --section-pad: clamp(56px, 7vw, 96px);
  --radius: 2px;
  --radius-card: 3px;
  --logo-h: clamp(52px, 7vw, 104px);
  --logo-h-compact: clamp(44px, 4.5vw, 68px);

  --shadow-card: 0 10px 26px rgba(29, 42, 89, 0.14);
  --shadow-lift: 0 18px 34px rgba(29, 42, 89, 0.26);
  --shadow-header: 0 4px 18px rgba(29, 42, 89, 0.12);

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

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* offset sticky header for in-page anchors (compact header ~88px) */
  scroll-padding-top: 100px;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; }

button { font: inherit; color: inherit; cursor: pointer; }

input,
button,
textarea { font-family: inherit; }

ul[class] { list-style: none; padding: 0; }

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

/* Orange is invisible against cyan (1.24:1) — use navy there (5.2:1) */
.section--cyan :focus-visible { outline-color: var(--navy); }

/* Skip-link / anchor targets take programmatic focus; they're not
   interactive, so no ring */
#main:focus,
.iss-issue:focus { outline: none; }

/* Prevent body scroll while the mobile overlay is open */
body.nav-open { overflow: hidden; }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.container { width: var(--container-w); margin-inline: auto; }

.section { padding-block: var(--section-pad); }
.section--navy   { background: var(--navy);      color: var(--white); }
.section--light  { background: var(--off-white); color: var(--navy); }
.section--cyan   { background: var(--cyan);       color: var(--navy); }

/* Two-column text / media split */
.split {
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

.split__body { max-width: 100%; }
/* Cap the paragraph measure only (heading fills the column so it stays on one line) */
.split__body p { font-size: var(--fs-lead); line-height: 1.6; max-width: 66ch; }

.media-frame img { width: 100%; height: auto; border-radius: 2px; }
.media-frame--cyan img { border: clamp(3px, 0.26vw, 5px) solid var(--cyan); border-radius: 0; }

/* ==========================================================================
   4. TYPOGRAPHY HELPERS
   ========================================================================== */
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.01em;
  font-weight: 900;
}

.section-title { font-size: var(--fs-section); }
.section-title.display { font-size: var(--fs-display); line-height: 0.95; }

/* Signature underline bar */
.bar-heading { position: relative; }
.bar-heading::after {
  content: "";
  display: block;
  width: clamp(72px, 6.5vw, 100px);
  height: clamp(6px, 0.6vw, 8px);
  margin-top: clamp(10px, 0.9vw, 12px);
  background: var(--cyan);
  border-radius: 1px;
}
.bar-heading--orange::after { background: var(--orange); }
.bar-heading--center { text-align: center; }
.bar-heading--center::after { margin-inline: auto; }

/* Standalone bar element (cards, etc.) */
.bar {
  display: block;
  width: 72px;
  height: 6px;
  background: var(--cyan);
  border-radius: 1px;
}
.bar--white  { background: var(--white); }
.bar--orange { background: var(--orange); }

/* Small condensed eyebrow */
.eyebrow {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  line-height: 1;
}

/* CSS chevron (no glyph fonts) */
.chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.34em 0 0.34em 0.5em;
  border-color: transparent transparent transparent currentColor;
  margin-left: 0.5em;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* ==========================================================================
   5. BUTTONS & CHIPS
   ========================================================================== */
/* Buttons/chips with white-on-orange text stay >=19px at weight 700: WCAG
   large text needs only 3:1, which #F15F42 provides (3.25:1). Shrinking or
   lightening this text drops it below AA — don't. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(19px, 1.35vw, 20px);
  color: var(--white);
  background: var(--orange);
  min-height: clamp(46px, 3.3vw, 52px);
  padding: 0 clamp(1.1rem, 1.6vw, 1.8rem);
  border: 0;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
.btn:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(241, 95, 66, 0.32); }
.btn:active { transform: translateY(0); }
.btn--orange { background: var(--orange); color: var(--white); }
.btn--orange:hover { background: var(--orange-dark); }
.btn--cyan { background: var(--cyan); color: var(--navy); }
.btn--cyan:hover { background: var(--cyan-dark); box-shadow: 0 8px 18px rgba(7, 174, 209, 0.32); }

/* Small nav chips (header) */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 19px;
  line-height: 1;
  min-height: clamp(38px, 2.9vw, 42px);
  padding: 0 clamp(0.85rem, 1.15vw, 1.25rem);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.chip--cyan { background: var(--cyan); color: var(--navy); }
.chip--cyan:hover { background: var(--cyan-dark); }
.chip--orange { background: var(--orange); color: var(--white); }
.chip--orange:hover { background: var(--orange-dark); }

/* Donate amount chips (chip-in strip) */
.donate-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: clamp(18px, 1.5vw, 20px);
  color: var(--navy);
  background: var(--cyan);
  border: 2px solid var(--cyan);
  border-radius: var(--radius);
  min-width: clamp(96px, 9.5vw, 140px);
  min-height: clamp(50px, 3.9vw, 56px);
  padding: 0 clamp(0.6rem, 1vw, 1.2rem);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.donate-chip:hover { background: var(--cyan-dark); border-color: var(--cyan-dark); transform: translateY(-3px); }
.donate-chip--other {
  background: transparent;
  color: var(--white);
  border-color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.donate-chip--other:hover { background: var(--cyan); color: var(--navy); }

/* ==========================================================================
   6. HEADER + NAV
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--off-white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-header); border-bottom-color: transparent; }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: clamp(10px, 1.3vw, 20px);
}
.site-header.is-scrolled .site-header__bar { padding-block: clamp(8px, 0.8vw, 12px); }

.site-header__logo { display: inline-flex; flex: 0 0 auto; }
.site-header__logo img {
  height: var(--logo-h);
  width: auto;
  transition: height 0.25s var(--ease);
}
.site-header.is-scrolled .site-header__logo img { height: var(--logo-h-compact); }

/* Desktop primary nav (shown ≥1024 when JS present; wraps as fallback) */
.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2.4rem);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.primary-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.5vw, 1.9rem);
  margin: 0;
}
.primary-nav__links a {
  position: relative;
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--navy);
  text-decoration: none;
  padding-block: 0.5rem;
}
.primary-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.primary-nav__links a:hover::after,
.primary-nav__links a:focus-visible::after { transform: scaleX(1); }

.primary-nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.85rem);
}

/* Header social icons */
.social-icons { display: flex; align-items: center; gap: 0.65rem; margin: 0; }
.social-icons a {
  display: inline-flex;
  color: var(--navy);
  /* pad the 22px icons to a >=24px hit target (WCAG 2.5.8) without
     shifting the visual rhythm */
  padding: 4px;
  margin: -4px;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.social-icons a:hover { color: var(--cyan); transform: translateY(-2px); }
.social-icons svg { width: 22px; height: 22px; }
.site-header .social-icons svg { width: clamp(20px, 1.5vw, 22px); height: clamp(20px, 1.5vw, 22px); }

/* Mobile group (donate + hamburger) */
.site-header__mobile { display: none; align-items: center; gap: 0.75rem; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 42px;
  padding: 0 9px;
  background: var(--navy);
  border: 0;
  border-radius: var(--radius);
}
.nav-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

/* Active-page underline (header markup identical on every page) */
body[data-page="meet-jen"]     .primary-nav__links [data-nav="meet-jen"]::after,
body[data-page="issues"]       .primary-nav__links [data-nav="issues"]::after,
body[data-page="endorsements"] .primary-nav__links [data-nav="endorsements"]::after,
body[data-page="news"]         .primary-nav__links [data-nav="news"]::after { transform: scaleX(1); }

/* --- Mobile nav overlay --- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--navy);
  color: var(--white);
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { opacity: 1; transform: none; }

.mobile-nav__top { display: flex; justify-content: flex-end; }
.mobile-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  color: var(--white);
}
.mobile-nav__close svg { width: 22px; height: 22px; }

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: clamp(1rem, 4vh, 2.5rem) 0 auto;
}
.mobile-nav__links a {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  color: var(--white);
  text-decoration: none;
  padding: 0.25em 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* Active-page state (markup identical everywhere; driven by body[data-page]) */
body[data-page="meet-jen"]     .mobile-nav__links [data-nav="meet-jen"],
body[data-page="issues"]       .mobile-nav__links [data-nav="issues"],
body[data-page="endorsements"] .mobile-nav__links [data-nav="endorsements"],
body[data-page="news"]         .mobile-nav__links [data-nav="news"],
body[data-page="volunteer"]    .mobile-nav__links [data-nav="volunteer"] { color: var(--cyan); }

.mobile-nav__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.mobile-nav__actions .chip { padding: 0.8em 1.5em; }

.mobile-nav__social {
  display: flex;
  gap: 1.1rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.mobile-nav__social a { display: inline-flex; color: var(--white); }
.mobile-nav__social svg { width: 26px; height: 26px; }

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
.site-footer { background: var(--navy); color: #dfe4f2; }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2.75rem, 5vw, 4.75rem);
}
.site-footer__logo img { width: clamp(190px, 16vw, 240px); height: auto; }

.footer-col a { color: #dfe4f2; text-decoration: none; }
.footer-col a:hover { color: var(--white); text-decoration: underline; }

.footer-heading {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(14px, 1.15vw, 16px);
  color: var(--white);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.6rem;
}
.footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 4px;
  background: var(--cyan);
  border-radius: 1px;
}

.footer-links { display: flex; flex-direction: column; gap: 0.5rem; font-size: clamp(14px, 1vw, 15px); }

.footer-contact { font-size: clamp(14px, 1vw, 15px); line-height: 1.7; }
.footer-contact p { margin-bottom: 0.9rem; }
.footer-contact .label { color: var(--white); font-weight: 500; }

.paid-for {
  border: 2px solid var(--white);
  padding: clamp(0.8rem, 1vw, 1.4rem) clamp(1rem, 1.4vw, 2rem);
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(13px, 1vw, 14px);
  color: var(--white);
  text-align: center;
  line-height: 1.3;
}

.footer-social { margin-top: 1.75rem; }
.footer-social .social-icons a { color: var(--white); }
.footer-social .social-icons a:hover { color: var(--cyan); }

.footer-legal { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.5rem; font-size: clamp(14px, 1vw, 15px); }

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.25rem;
  font-size: 0.8rem;
  color: #aeb7d0;
}

/* ==========================================================================
   8. PAGE HERO BAND (privacy / terms + future page heroes)
   ========================================================================== */
.page-hero {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.page-hero h1 { font-size: var(--fs-page-title); }

.prose { max-width: 68ch; margin-inline: auto; }
.prose p { margin-bottom: 1.1rem; font-size: var(--fs-lead); }

/* ==========================================================================
   9. PAGE MODULES
   ========================================================================== */

/* --- 9a. Home hero + signup panel ------------------------------------- */
.hero { position: relative; background: var(--navy); }
.hero__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: 50% 28%;
}
.hero__inner { position: relative; }
.hero__panel {
  background: var(--navy);
  color: var(--white);
  padding: clamp(20px, 2.6vw, 36px);
}
.hero__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-hero-title);
  line-height: 1.2;
  text-wrap: balance;
  margin-bottom: clamp(1rem, 1.6vw, 22px);
}

/* Signup form */
.signup-form { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 16px); }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1vw, 16px);
}
.field { display: flex; flex-direction: column; }
.field input {
  width: 100%;
  height: clamp(48px, 3.6vw, 54px);
  padding: 0 clamp(12px, 1vw, 16px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(16px, 1.15vw, 17px);
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 0;
}
.field input::placeholder { color: var(--navy); font-weight: 700; opacity: 1; }
.field input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px; }
.field--error input { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.field__error {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--error-on-navy);
  font-weight: 500;
}
.field__error:empty { display: none; }

.signup-form__submit-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.3vw, 20px);
  margin-top: 0.25rem;
}
.signup-form__submit-row .btn {
  flex: 0 0 auto;
  width: clamp(150px, 12vw, 180px);
  min-height: clamp(48px, 3.6vw, 54px);
  font-size: clamp(19px, 1.3vw, 20px);
}

.consent {
  font-size: clamp(12px, 0.9vw, 13px);
  line-height: 1.45;
  color: #c6cee3;
}
.consent a { color: var(--white); }

.form-status[role="alert"]:empty { display: none; }
.form-error-summary {
  background: rgba(241, 95, 66, 0.18);
  border-left: 4px solid var(--orange);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  color: var(--white);
  border-radius: 2px;
}
.form-success {
  background: rgba(7, 174, 209, 0.16);
  border-left: 4px solid var(--cyan);
  padding: 1.1rem 1.15rem;
  color: var(--white);
}
.form-success strong { display: block; font-size: 1.1rem; margin-bottom: 0.3rem; }

/* --- 9b. Meet Jen ------------------------------------------------------ */
.meet-jen .split__body p { color: rgba(255, 255, 255, 0.9); }

/* --- 9c. Issue cards --------------------------------------------------- */
.issue-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1.6vw, 1.75rem);
}
.issue-card {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 0.9vw, 1rem);
  padding: clamp(20px, 2.2vw, 32px);
  min-height: clamp(200px, 16.7vw, 240px);
  background: var(--navy);
  color: var(--white);
  border-top: clamp(5px, 0.5vw, 8px) solid var(--cyan);
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.issue-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.issue-card__eyebrow { color: var(--cyan); font-size: clamp(12px, 1vw, 14px); }
.issue-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-card);
  text-transform: none;
  line-height: 1.1;
  letter-spacing: 0;
  width: fit-content;
  max-width: 100%;
  padding-bottom: clamp(5px, 0.5vw, 8px);
  border-bottom: clamp(6px, 0.6vw, 8px) solid var(--cyan);
}
.issue-card--orange .issue-card__title { border-bottom-color: var(--white); }
/* Title's own underline replaces the standalone bar in these cards */
.issue-card .bar { display: none; }
.issue-card__more {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 19px;
  color: var(--white);
}
.issue-card--orange { background: var(--orange); border-top-color: var(--navy); }
.issue-card--orange .issue-card__eyebrow { color: var(--navy-deep); }
.issue-card--platform { justify-content: center; }
/* Platform card: title has no single block-level bar; instead an inner inline
   element carries a cyan underline that clones onto EACH wrapped line (comp). */
.issue-card--platform .issue-card__title {
  width: auto;
  border-bottom: 0;
  padding-bottom: 0;
  line-height: 1.72;
}
.issue-card--platform .issue-card__ul {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: clamp(5px, 0.5vw, 8px);
  border-bottom: clamp(6px, 0.6vw, 8px) solid var(--cyan);
}
.issue-card--platform .chevron { margin-left: 0.35em; }

/* --- 9d. Chip in ------------------------------------------------------- */
.chip-in { text-align: center; }
.chip-in__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 2rem);
}
.chip-in__heading .rule { height: 2px; background: var(--cyan); flex: 1 1 auto; max-width: 24%; }
.chip-in__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(20px, 1.95vw, 28px);
  line-height: 1.1;
  color: var(--white);
  white-space: normal;
}
.chip-in__title .accent { color: var(--cyan); }
.donate-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* --- 9e. Volunteer teaser --------------------------------------------- */
.volunteer-teaser .split__body p { color: var(--navy); }

/* --- 9f. Social embeds (real Facebook posts) --------------------------- */
/* Fixed-size FB post plugin iframes (width=500; heights generated by FB for
   that width — regenerate the height if the width param ever changes).
   loading="lazy" is load-bearing: it keeps FB's JS out of the initial load
   (Lighthouse perf + third-party-cookie audits). On screens narrower than
   500px the plugin clips on the right — FB's embed does not reflow. */
.social-embeds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.social-embed {
  border: 0;
  width: 350px;
  max-width: 100%;
  /* the plugin paints no background behind its text — without this the cyan
     band bleeds through the post copy */
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

/* Small phones: the 90% container (<350px here) would clip the fixed-width
   plugin — break the row out to the viewport edge minus a slim gutter. */
@media (max-width: 430px) {
  .social-embeds { margin-inline: calc(50% - 50vw + 8px); }
}

/* --- 9f-legacy. Social cards (markup replaced by FB embeds 2026-07; styles
   kept in case the designed-card treatment returns) --------------------- */
.social-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.social-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--navy);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.social-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2); }
.social-card__head {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 0.75vw, 1rem);
  padding: clamp(0.9rem, 1vw, 1.4rem) clamp(1rem, 1.15vw, 1.6rem) clamp(0.35rem, 0.45vw, 0.6rem);
}
.social-card__avatar { width: clamp(40px, 3vw, 44px); height: clamp(40px, 3vw, 44px); border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.social-card__handle { font-weight: 700; color: var(--navy-bright); font-size: clamp(15px, 1.15vw, 17px); }
.social-card__fb { margin-left: auto; color: #1877F2; display: inline-flex; }
.social-card__fb svg { width: clamp(18px, 1.15vw, 20px); height: clamp(18px, 1.15vw, 20px); }
.social-card__date { padding: 0 clamp(1rem, 1.15vw, 1.6rem); font-size: clamp(11px, 0.75vw, 13px); color: var(--muted); }
.social-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 0.6rem; }
.social-card__caption { padding: clamp(1rem, 1.15vw, 1.6rem); font-size: clamp(13px, 0.95vw, 14px); color: var(--navy); line-height: 1.55; }

/* ==========================================================================
   10. UTILITIES
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.75rem; }

/* Reveal-on-scroll. JS adds .reveal-anim + .reveal-pending ONLY to elements
   below the initial viewport — above-the-fold content is never hidden (hiding
   it delays LCP). .reveal-pending is removed as elements scroll into view.
   Safe without JS: nothing is hidden until JS opts an element in. */
.reveal-anim {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-anim.reveal-pending { opacity: 0; transform: translateY(20px); }

/* ==========================================================================
   11. RESPONSIVE OVERRIDES
   ========================================================================== */

/* --- Show desktop nav / hide mobile group only when JS is available --- */
.js .primary-nav { display: none; }
.js .site-header__mobile { display: flex; }

@media (min-width: 640px) {
  .issue-grid { grid-template-columns: repeat(2, 1fr); }
  .social-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 639px) {
  /* Stack SIGN UP full-width with the consent legal text beneath it */
  .signup-form__submit-row { flex-direction: column; align-items: stretch; }
  .signup-form__submit-row .btn { width: 100%; }
  /* Donation chips as a balanced 3 x 2 grid */
  .donate-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .donate-chip { width: 100%; min-width: 0; }
}

@media (min-width: 900px) {
  /* text column ~46%, photo ~37%, generous gap between (per mockup) */
  .split { grid-template-columns: 46% 37%; column-gap: 16%; }
  .signup-form__submit-row { align-items: center; }
}

@media (min-width: 1024px) {
  .js .primary-nav { display: flex; }
  .js .site-header__mobile { display: none; }

  .issue-grid { grid-template-columns: repeat(3, 1fr); }

  .site-footer__inner {
    grid-template-columns: minmax(200px, 1.2fr) 0.9fr 1.4fr 1.25fr;
    align-items: start;
  }

  /* Hero: photo pinned left at full height — zero vertical crop, so the
     photo's own head-to-hip framing survives every viewport. Its right edge
     feathers into a warm haze and the navy panel floats over the seam
     (per mockup). The haze color echoes the photo's blown-out sunlight. */
  .hero {
    overflow: hidden;
    background: #f4f0e6;
  }
  .hero__img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    aspect-ratio: auto;
    z-index: 0;
  }
  /* Feather overlay: same height + intrinsic ratio as the photo, so its
     right-edge gradient always lands on the photo's right edge. */
  .hero::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    aspect-ratio: 1966 / 1391;
    background: linear-gradient(to right, rgba(244, 240, 230, 0) 72%, #f4f0e6 98%);
    z-index: 1;
    pointer-events: none;
  }
  .hero__inner {
    z-index: 2;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    display: flex;
    justify-content: flex-end;
    /* panel rides high so the photo runs past it below (per mockup) */
    align-items: flex-start;
    /* band height follows the viewport (82vh leaves a sliver of the next
       section visible as a scroll cue), capped for laptop screens; the
       photo's display width is band-height x 1.41, so 56vw keeps it from
       overrunning narrow desktop widths */
    min-height: min(82vh, 56vw, 820px);
    padding: clamp(24px, 3.5vw, 56px) clamp(20px, 3vw, 56px);
  }
  .hero__panel {
    width: min(44vw, 560px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
  }
}

@media (min-width: 1280px) {
  /* volunteer teaser: text ~46%, landscape photo ~38% (not dominant) */
  .split--wide-media { grid-template-columns: 46% 38%; column-gap: 15%; }
}

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

/* ==========================================================================
   12. PAGE MODULES — PHASE 2 (merged from per-page staging fragments)
   Appended in order: meet-jen, issues, endorsements, news, volunteer.
   Each block is self-contained (own media queries) and uses only NEW,
   page-prefixed class names (.mj- / .iss- / .end- / .news- / .vol-).
   No shared class is redefined; the only rules touching a shared class are
   scoped descendant rules (.mj-row .media-frame img, .vol-form .consent).
   ========================================================================== */


/* --------------------------------------------------------------------------
   9g. Meet Jen — bio + pull-quote band
   -------------------------------------------------------------------------- */
/* ===== PAGE: meet-jen ===== */
/* Page-specific styles for meet-jen.html. All classes are prefixed .mj- to
   avoid collisions with styles.css. Shared components (.page-hero, .split,
   .split__body, .media-frame, .section--*, .reveal, .bar-heading, .display)
   are reused as-is; this file only adds the alternating rows and the signature
   cyan pull-quote band with the overflowing photo cutout. Mobile-first. */

/* --------------------------------------------------------------------------
   A. INTRO — the navy hero band flows straight into the two-column intro.
   Zeroing the intro's top padding removes the seam so hero + intro read as
   one continuous navy region (per mockup); the hero's own bottom padding
   supplies the gap between the "MEET JEN" title and the columns.
   -------------------------------------------------------------------------- */
.mj-hero { padding-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.mj-intro { padding-top: 0; }

/* Vertical rhythm between stacked paragraphs (reset zeroes <p> margins) */
.mj-copy p + p { margin-top: clamp(0.95rem, 1.5vw, 1.35rem); }

/* --------------------------------------------------------------------------
   B & D. ALTERNATING ROWS — photo left, copy right (mockup Sections B & D).
   A distinct grid from .split (which is tuned text-left/media-right); tops
   align so a tall portrait photo and a multi-paragraph column start level.
   -------------------------------------------------------------------------- */
.mj-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
.mj-row .media-frame img { border-radius: 2px; }

/* --------------------------------------------------------------------------
   C. PULL-QUOTE BAND — the signature moment.
   Left: blocky white opening-quote (inline SVG, no glyph font) + navy Oswald
   quote + attribution. Right: transparent cutout, bottom-aligned to the band
   and tall enough that Jen's head overflows ABOVE the band's top edge into the
   white section above. Nothing clips it (no overflow:hidden on the band).
   -------------------------------------------------------------------------- */
.mj-quote { position: relative; overflow: visible; }

.mj-quote__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 4vw, 2rem);
  align-items: start;
}

.mj-quote__body { position: relative; z-index: 1; }

.mj-quote__mark {
  display: block;
  width: clamp(64px, 8vw, 112px);
  height: auto;
  fill: var(--white);
  margin-bottom: clamp(0.75rem, 1.6vw, 1.35rem);
}

.mj-quote__text {
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.3;
  color: var(--navy);
  max-width: 26ch;
  text-wrap: pretty;
}

.mj-quote__cite {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--navy);
}

/* Cutout — mobile default: sits below the quote, centered, reduced size,
   feet flush to the band's bottom edge, only a subtle overlap upward. */
.mj-quote__figure { justify-self: center; }
.mj-quote__cutout {
  display: block;
  width: clamp(210px, 62vw, 320px);
  height: auto;
  margin-inline: auto;
  margin-top: calc(-1 * clamp(0.5rem, 3vw, 1.25rem));
  margin-bottom: calc(-1 * var(--section-pad)); /* reach the band's true bottom edge */
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Alternating rows: narrower photo, wider copy, generous gutter (mockup) */
  .mj-row--media-left { grid-template-columns: 37% 48%; column-gap: 15%; }
}

@media (min-width: 1024px) {
  /* Pull-quote goes two-column: quote top-left, cutout in a generously sized
     right column. The column is wide enough that the cutout is always TALLER
     than the quote block, so with the shared negative margins its feet land
     exactly on the band's bottom edge while the head lifts above the top edge
     into the white section — independent of how the quote copy wraps. */
  .mj-quote__grid {
    grid-template-columns: minmax(0, 1fr) clamp(440px, 38vw, 520px);
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  .mj-quote__figure { justify-self: end; }
  .mj-quote__cutout {
    width: 100%;
    margin-top: calc(-1 * clamp(104px, 10vw, 150px));
    /* margin-bottom (-section-pad) inherited from base rule pins the feet to
       the band's true bottom edge (past the section's bottom padding). */
  }
}

/* --------------------------------------------------------------------------
   9h. Issues — card index + detail sections
   -------------------------------------------------------------------------- */
/* ===== PAGE: issues ===== */

/* The .page-hero navy band sits directly above .iss-cards; both are navy so
   they read as one continuous band that carries the ISSUES title + the full
   card index (per mockup page-3). Small top padding here keeps the first card
   row close under the hero underline; page-hero supplies the top rhythm. */
.iss-cards {
  padding-top: clamp(0.25rem, 1.6vw, 1.5rem);
  padding-bottom: var(--section-pad);
}

/* --- Card index grid: mobile-first 1 -> 2 -> 3 cols (mirrors home issue grid) --- */
.iss-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1.6vw, 1.75rem);
}

/* White anchor cards floating on the navy band. Reuse the shared .bar element
   for the short cyan underline; hover-lift echoes home's .issue-card. */
.iss-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.7rem, 0.9vw, 1rem);
  min-height: clamp(140px, 12vw, 180px);
  padding: clamp(20px, 2.2vw, 32px);
  background: var(--white);
  color: var(--navy);
  border-top: clamp(5px, 0.5vw, 8px) solid var(--cyan);
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.iss-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.30);
}

.iss-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-card);
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
}

/* Taxes — the single orange card. Home gives its orange card a navy top edge;
   on this navy band a seamless orange edge reads correctly against the comp. */
.iss-card--orange {
  background: var(--orange);
  color: var(--white);
  border-top-color: var(--orange);
}

/* --- Issue detail sections (light bg) --- */
/* Anchor landing offset: the sticky header shrinks ~50px on scroll (.is-scrolled),
   which shifts anchored content up after the fragment-scroll target is computed.
   scroll-margin-top adds to the global scroll-padding so a card-clicked heading
   rests comfortably BELOW the compact header instead of behind it. Scoped to the
   issue targets so no other page's scroll behavior changes. */
.iss-issue { scroll-margin-top: 70px; }

/* Gotham Black (.display) heading stepped DOWN from the page-hero display size,
   with the shared orange bar (.bar-heading--orange), per mockup. */
.iss-issue__title {
  font-size: clamp(26px, 3.2vw, 38px);
  color: var(--navy);
  margin-bottom: clamp(1.2rem, 2vw, 1.75rem);
}

.iss-issue__body p {
  max-width: 68ch;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--navy);
}
.iss-issue__body p + p { margin-top: 1.1rem; }

/* Thin cyan rule between issues — spans the full container width (text is
   narrower); generous vertical rhythm matches the airy comp. */
.iss-rule {
  border: 0;
  height: 2px;
  background: var(--cyan);
  opacity: 0.5;
  margin-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .iss-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .iss-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   9i. Endorsements — logo grid + quote list
   -------------------------------------------------------------------------- */
/* ===== PAGE: endorsements ===== */
/* Page-specific styles for endorsements.html. All class names are prefixed
   `.end-` to avoid collisions with styles.css. Reuses shared tokens/components
   (.page-hero, .bar-heading--center, .section--light, .bar--orange, .reveal). */

/* --- Hero subhead ("JEN IS ENDORSED BY:") — stays on the navy hero band --- */
.end-subhead {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.15;
  color: var(--white);
  margin-top: clamp(1.15rem, 2.4vw, 1.9rem);
}

/* --- Endorsing-organization logo grid --- */
.end-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.1rem, 3vw, 2.5rem);
  align-items: center;
}
.end-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: clamp(0.4rem, 1vw, 0.9rem);
}
.end-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Wide logos (landscape lockups) span two columns. */
.end-logo--wide {
  grid-column: span 2;
  aspect-ratio: 2.4 / 1;
}

/* --- Endorsement quote list --- */
.end-quotes {
  margin: 0;
  margin-top: clamp(2.5rem, 5vw, 4.25rem);
}
.end-quote {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.4vw, 1.75rem);
  border-top: 2px solid var(--cyan);
  padding-block: clamp(1.9rem, 4vw, 3.25rem);
}

.end-quote__photo {
  flex: 0 0 auto;
  width: clamp(120px, 13vw, 176px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #7a7a7a;
}

.end-quote__body { max-width: 62ch; }

.end-quote__text {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.55;
}

.end-quote__attr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: clamp(1.15rem, 1.9vw, 1.6rem);
}
.end-quote__name {
  font-family: var(--font-condensed);
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.1;
  color: var(--navy);
}
.end-quote__title {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.3;
  color: var(--navy);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 640px) {
  .end-logos { grid-template-columns: repeat(4, 1fr); }

  /* Headshot left, quote body right */
  .end-quote {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

/* --------------------------------------------------------------------------
   9j. News — coverage list
   -------------------------------------------------------------------------- */
/* ===== PAGE: news ===== */
/* News coverage: single-column, left-weighted editorial list of outlet-tagged
   headlines with thin cyan rules between. Built on shared chrome + .page-hero.
   All styles namespaced .news- (no collisions with styles.css). */

/* The .news section keeps the list left-aligned inside the wide container so
   the right-hand margin breathes exactly like the comp (no centering). */

/* --- The list ------------------------------------------------------------ */
.news-list {
  display: flex;
  flex-direction: column;
  /* editorial measure: forces headlines to wrap ~2 lines and leaves the
     generous right-hand whitespace from the mockup at desktop widths. */
  max-width: 840px;
}

/* --- Each headline item --------------------------------------------------- */
.news-item {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.news-item:first-child { padding-top: 0; }
/* Thin cyan hairline between items only (11 rules for 12 items, none trailing) */
.news-item + .news-item {
  border-top: 1px solid rgba(7, 174, 209, 0.45);
}

/* --- Outlet tag (Oswald 600, navy, all-caps, short orange underline) ------ */
.news-item__outlet {
  display: inline-block;      /* underline tracks the tag's own width */
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 14px;
  line-height: 1;
  color: var(--navy);
  padding-bottom: 8px;
  border-bottom: 3px solid var(--orange);
}

/* --- Headline (Roboto 700, navy) as an outbound link ---------------------- */
.news-item__headline {
  margin-top: clamp(0.85rem, 1.4vw, 1.15rem);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, 1.85vw, 24px);
  line-height: 1.28;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.news-item__headline a {
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.news-item__headline a:hover {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.news-item__headline a:focus-visible {
  color: var(--orange);
}

/* --- Small screens: full-width column, tighter tag tracking --------------- */
@media (max-width: 560px) {
  .news-item__outlet { letter-spacing: 0.08em; }
}

/* --------------------------------------------------------------------------
   9k. Volunteer — get-involved + custom checkboxes
   -------------------------------------------------------------------------- */
/* ===== PAGE: volunteer ===== */
/* Page-specific styles for volunteer.html. All class names are prefixed
   `.vol-` to avoid collisions with styles.css. Reuses shared tokens/components
   (.page-hero, .bar-heading--center, .section--navy, .section--cyan, .signup-form,
   .field, .field-row, .btn--orange, .consent, .form-status, .social-*, .reveal). */

/* --------------------------------------------------------------------------
   "Get involved" navy band
   Full-bleed portrait on the LEFT (flush to the viewport edge) + interest
   checkboxes and the signup form on the RIGHT. The grid is intentionally NOT
   wrapped in .container so its left column can sit at the viewport's edge;
   the panel carries its own inset so the form aligns with the site gutter.
   -------------------------------------------------------------------------- */
/* Hero band and this band are both navy — one rhythm gap, not two (same
   treatment as .mj-intro). */
.vol-involve { padding-top: 0; }

.vol-involve__grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: media stacked above panel */
  align-items: stretch;
}

/* --- Media (portrait) --- */
.vol-involve__media {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 62vw, 440px);   /* mobile crop height */
}
.vol-involve__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;                /* keep Jen framed on the tall crop */
}

/* --- Panel (form column) --- */
.vol-involve__panel {
  display: flex;
  align-items: center;
  padding-block: clamp(1.9rem, 4vw, 2.75rem);
  padding-inline: max(5vw, 1.25rem);        /* mobile: match .container 90% gutter */
}
.vol-involve__panel-inner {
  width: 100%;
  max-width: 640px;
}

.vol-involve__heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  color: var(--white);
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
}

/* --------------------------------------------------------------------------
   Interest checkboxes — custom square white boxes with an orange check.
   Real <input type="checkbox"> stays in the DOM (visually hidden but
   keyboard-focusable); the adjacent .vol-option__box is the drawn control.
   -------------------------------------------------------------------------- */
.vol-options {
  border: 0;
  padding: 0;
  margin: 0 0 clamp(0.4rem, 1vw, 0.7rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.1vw, 0.85rem);
  min-width: 0;                              /* fieldset in a flex/grid column */
}
.vol-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: fit-content;
  cursor: pointer;
}
.vol-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.vol-option__box {
  flex: 0 0 auto;
  width: clamp(24px, 2vw, 28px);
  height: clamp(24px, 2vw, 28px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 2px solid var(--white);
  border-radius: 3px;
  transition: box-shadow 0.18s var(--ease);
}
.vol-option__box::after {
  content: "";
  width: 7px;
  height: 13px;
  margin-top: -3px;
  border: solid var(--orange);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 0.18s var(--ease);
}
.vol-option__input:checked + .vol-option__box::after { transform: rotate(45deg) scale(1); }
.vol-option:hover .vol-option__box { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16); }
.vol-option__input:focus-visible + .vol-option__box {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}
.vol-option__text {
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.1;
  color: var(--white);
}

/* --- Full-width submit (form reuses .signup-form flex/gap + .field markup) --- */
.vol-form__submit {
  width: 100%;
  margin-top: clamp(0.4rem, 1vw, 0.7rem);
  font-size: clamp(19px, 1.4vw, 20px);
}
.vol-form .consent { margin-top: clamp(0.4rem, 0.9vw, 0.7rem); }

/* --------------------------------------------------------------------------
   Desktop: portrait ~40% (flush left) + form panel ~60%
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .vol-involve__grid { grid-template-columns: 40% 60%; }
  .vol-involve__media { min-height: 100%; }   /* stretch to the panel's height */
  .vol-involve__panel {
    padding-block: clamp(2.5rem, 4vw, 3.5rem);
    padding-inline: clamp(2rem, 4.5vw, 4rem) clamp(2rem, 5vw, 5.5rem);
  }
}

/* Reduced motion: freeze the check transition alongside the global handling. */
@media (prefers-reduced-motion: reduce) {
  .vol-option__box,
  .vol-option__box::after { transition: none; }
}

/* ===== PAGE: 404 ===== */
/* Standalone chrome (no shared header/footer): Pages serves 404.html at any
   unknown URL depth, so the page uses absolute paths and its own minimal
   frame. Excluded from the shared header/footer hash check. */
.nf-header {
  display: flex;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2rem) 1rem;
}
.nf-header img { width: clamp(170px, 18vw, 230px); height: auto; }

.nf-code {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-align: center;
  margin-bottom: 0.6rem;
}

.nf-body { text-align: center; }
.nf-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.nf-actions .chip { padding: 0.8em 1.6em; }

.nf-footer {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem) 1rem;
}
.nf-footer img { width: clamp(150px, 15vw, 200px); height: auto; margin-bottom: 1.25rem; }
.nf-footer .paid-for { display: inline-block; margin-bottom: 1.25rem; }
.nf-footer__copy { font-size: 0.85rem; opacity: 0.75; }