/* ==========================================================================
   Electbase block library — shared styles
   --------------------------------------------------------------------------
   One class per Puck block. Every rule reads --brand-* (see tokens.css) so a
   site re-skins entirely from the .site scope. WCAG 2.2 AA is preserved by
   construction: default pairings meet 4.5:1 body / 3:1 large.
   ========================================================================== */

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

.site {
  margin: 0;
  font-family: var(--brand-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--brand-ink);
  background: var(--brand-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.site h1, .site h2, .site h3, .site h4 {
  font-family: var(--brand-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
}
.site p { margin: 0; }
.site a { color: inherit; }
.site img { max-width: 100%; display: block; }
/* WCAG: double focus ring — ink outline + paper halo — so focus is visible on
   any surface (light sections, ink sections, accent bands) and never aliases
   the accent color of the very button it sits on. */
.site :focus-visible {
  outline: 3px solid var(--brand-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--brand-focus-halo);
  border-radius: 3px;
}
/* WCAG 2.4.1: skip-to-content link, visually hidden until focused */
.eb-skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--brand-ink); color: var(--brand-paper); padding: .8rem 1.4rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; text-decoration: none; }
.eb-skip:focus { left: 0; }

/* ---- layout primitives ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--ink { background: var(--brand-ink); color: var(--brand-paper); }
.section--warm { background: var(--brand-paper-warm); }

.eyebrow {
  font-family: var(--brand-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brand-accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.section--ink .eyebrow { color: var(--brand-accent-2); }
/* the "baseline" motif — a short underline under headings */
.baseline::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 4px;
  border-radius: 4px;
  background: var(--baseline-color, var(--brand-accent));
  margin-top: 1.1rem;
}
.section-head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head h2 { font-size: var(--step-3); margin-top: .8rem; }
.section-head p { color: var(--brand-slate); font-size: var(--step-1); margin-top: 1rem; }
.section--ink .section-head p { color: #c3cbdf; }

/* ---- buttons ---- */
.btn {
  --_bg: var(--brand-accent); --_fg: var(--brand-on-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--brand-body); font-weight: 600; font-size: var(--step-0);
  padding: .85rem 1.5rem; border-radius: 100px; border: 2px solid transparent;
  background: var(--_bg); color: var(--_fg); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--amber { --_bg: var(--brand-accent-2); --_fg: var(--brand-on-accent-2, var(--brand-ink)); }
.btn--ghost { --_bg: transparent; --_fg: var(--brand-ink); border-color: var(--brand-line); }
.section--ink .btn--ghost { --_fg: var(--brand-paper); border-color: var(--brand-line-dark); }
.btn--lg { padding: 1.05rem 2rem; font-size: var(--step-1); }

.site { position: relative; }

/* ==== campaign logo / wordmark =========================================== */
.eb-logo { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; color: inherit; }
.eb-logo .l1 { font-family: var(--brand-display); font-weight: 700; letter-spacing: -.01em; }
.eb-logo .l2 { font-family: var(--brand-mono); font-size: .62em; text-transform: uppercase; letter-spacing: .18em; margin-top: .45em; opacity: .85; }
.eb-logo .l2 .accent { color: var(--brand-accent-2); }
.eb-logo--serif     .l1 { font-family: var(--brand-display); font-weight: 700; }
.eb-logo--condensed .l1 { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.eb-logo--block     .l1 { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .015em; }
.eb-logo--stack     .l1 { font-family: 'Archivo', sans-serif; font-weight: 900; text-transform: uppercase; line-height: .86; }
.eb-logo--script    .l1 { font-family: 'Yellowtail', cursive; font-weight: 400; letter-spacing: 0; }
.eb-logo--script    .l2 { margin-top: .1em; }
.eb-logo--franklin  .l1 { font-family: var(--brand-display); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; }

/* ==== social icon row ==================================================== */
.eb-social { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.eb-social a { width: 34px; height: 34px; border-radius: 100px; border: 1.5px solid currentColor; display: grid; place-items: center; color: inherit; opacity: .8; transition: all .14s ease; }
.eb-social a:hover { opacity: 1; background: var(--brand-accent-2); border-color: var(--brand-accent-2); color: var(--brand-on-accent-2, var(--brand-ink)); }
.eb-social svg { width: 15px; height: 15px; fill: currentColor; }

/* ==== BLOCK: header (overlays the hero) ================================== */
.eb-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; color: #fff; }
.eb-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: 92px; }
.eb-header .eb-logo { color: #fff; }
.eb-header .eb-logo .l1 { font-size: 1.5rem; }
.eb-header .eb-logo .l2 { font-size: .58rem; }
.eb-header .eb-logo--block .l1, .eb-header .eb-logo--stack .l1 { font-size: 1.7rem; }
.eb-header .eb-logo--script .l1 { font-size: 2rem; }
.eb-nav { display: flex; align-items: center; gap: 1.4rem; }
.eb-nav a { font-family: var(--brand-body); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; color: #eef1f8; padding-bottom: 3px; border-bottom: 2px solid transparent; white-space: nowrap; }
.eb-nav a:hover { border-color: var(--brand-accent); }
.eb-header .right { display: flex; align-items: center; gap: 1.1rem; }
.eb-header .eb-social a { border-color: rgba(255,255,255,.5); }
.btn--donate { background: var(--brand-accent-2); color: var(--brand-on-accent-2, var(--brand-ink)); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: .7rem 1.5rem; }
.eb-header .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: .65rem 1.3rem; }
.eb-header .btn--ghost:hover { background: rgba(255,255,255,.12); }
/* ---- mobile nav (WCAG: nav used to display:none below 1080px with no
   replacement — primary navigation was unreachable on phones) ---- */
.eb-nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; }
.eb-nav-toggle span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.eb-header--open .eb-nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.eb-header--open .eb-nav-toggle span:nth-child(2) { opacity: 0; }
.eb-header--open .eb-nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (max-width: 1080px) {
  .eb-header .eb-social { display: none; }
  .eb-header .btn--ghost { display: none; }
  .eb-nav-toggle { display: flex; }
  .eb-nav { display: none; }
  .eb-header--open .eb-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--brand-ink); border-top: 1px solid var(--brand-line-dark);
    padding: .6rem 0 1rem; box-shadow: var(--shadow-md);
  }
  .eb-header--open .eb-nav a { padding: .8rem var(--gutter); border-bottom: 0; color: #eef1f8; }
  /* light sticky header variant gets a light panel */
  .eb-header--solid.eb-header--open .eb-nav { background: var(--brand-paper); border-top-color: var(--brand-line); }
  .eb-header--solid.eb-header--open .eb-nav a { color: var(--brand-ink); }
}
/* solid sticky header (light templates) */
.eb-header--solid { position: sticky; background: color-mix(in srgb, var(--brand-paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--brand-line); color: var(--brand-ink); }
.eb-header--solid .eb-logo { color: var(--brand-ink); }
.eb-header--solid .eb-nav a { color: var(--brand-slate); }
.eb-header--solid .eb-nav a:hover { color: var(--brand-ink); border-color: var(--brand-accent-2); }
.eb-header--solid .eb-logo .l2 .accent { color: var(--brand-accent-2-text, var(--brand-accent-2)); } /* light header: dark twin for the accent word */
.eb-header--solid .eb-social a { border-color: var(--brand-line); color: var(--brand-slate); }
.eb-header--solid .btn--ghost { color: var(--brand-ink); border-color: var(--brand-line); }
.eb-header--solid .btn--ghost:hover { background: var(--brand-paper-warm); }
/* solid navy banner header (traditional templates) — overlays the hero, white text */
.eb-header--navy { background: var(--brand-ink); border-bottom: 3px solid var(--brand-accent-2); }

/* ==== BLOCK: hero (full-bleed split) ==================================== */
.eb-hero {
  position: relative; overflow: hidden; color: #fff;
  min-height: 100vh; display: flex; align-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(255,255,255,.022) 7px 8px),
    radial-gradient(120% 120% at 15% 0%, var(--brand-ink-soft), var(--brand-ink) 60%);
}
/* full-bleed candidate photo on one side */
.eb-hero__media { position: absolute; top: 0; bottom: 0; width: 52%; }
.eb-hero[data-side="right"] .eb-hero__media { right: 0; }
.eb-hero[data-side="left"]  .eb-hero__media { left: 0; }
.eb-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* scrim blends the photo into the text panel */
.eb-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to left, transparent 40%, var(--brand-ink) 96%);
}
.eb-hero[data-side="left"] .eb-hero__media::after { background: linear-gradient(to right, transparent 40%, var(--brand-ink) 96%); }
/* text panel */
.eb-hero__panel { position: relative; z-index: 2; width: min(56%, 640px); padding-block: 120px 3rem; }
.eb-hero[data-side="left"] .eb-hero__panel { margin-left: auto; }
.eb-hero__kicker { font-family: var(--brand-mono); font-size: var(--step-0); text-transform: uppercase; letter-spacing: .1em; color: var(--brand-accent-2); font-weight: 600; }
.eb-hero__h1 { margin: 0; } /* the h1 wraps the wordmark; the wordmark spans carry their own type */
.eb-hero__wordmark { display: flex; flex-direction: column; align-items: flex-start; margin: .7rem 0 .2rem; color: #fff; max-width: 100%; }
.eb-hero__wordmark .l1 { font-size: clamp(2.4rem, 5vw, 4.6rem); word-break: break-word; }
.eb-hero__wordmark.eb-logo--script .l1 { font-size: clamp(2.8rem, 6vw, 5.4rem); }
.eb-hero__wordmark .l2 { font-size: clamp(.72rem, 1.2vw, .95rem); letter-spacing: .2em; opacity: .95; margin-top: .55em; }
.eb-hero__slogan { font-family: var(--brand-display); font-size: var(--step-2); font-weight: 600; color: #fff; margin-top: 1rem; max-width: 22ch; }
.eb-hero__slogan .dot { color: var(--brand-accent-2); }
/* inline hero signup */
.eb-hero__form { margin-top: 1.8rem; max-width: 460px; }
.eb-hero__form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .6rem; }
.eb-hero__form input:not([type="checkbox"]) {
  width: 100%; font-family: var(--brand-body); font-size: var(--step-0); font-weight: 600;
  padding: .85rem 1rem; border-radius: var(--radius-sm); border: 2px solid transparent;
  background: var(--brand-paper); color: var(--brand-ink);
}
.eb-hero__form input::placeholder { color: var(--brand-muted); font-weight: 600; }
.eb-hero__form input:not([type="checkbox"]):focus { outline: none; border-color: var(--brand-accent-2); }
.eb-hero__form .submit { background: var(--brand-accent-2); color: var(--brand-on-accent-2, var(--brand-ink)); border: none; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; cursor: pointer; }
.eb-hero__consent { display: flex; gap: .6rem; margin-top: .9rem; font-family: var(--brand-body); font-size: .72rem; line-height: 1.4; color: #aab3c9; max-width: 460px; }
.eb-hero__consent input { margin-top: .15rem; accent-color: var(--brand-accent-2); flex: 0 0 auto; }
.eb-hero__consent a { color: #cdd4e6; }
.eb-hero__panel .eb-social { margin-top: 1.6rem; color: #fff; }
/* optional flag/star background image behind the whole hero */
.eb-hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.eb-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--brand-ink) 42%, color-mix(in srgb, var(--brand-ink) 38%, transparent)); }
.eb-hero[data-side="left"] .eb-hero__bg::after { background: linear-gradient(to left, var(--brand-ink) 42%, color-mix(in srgb, var(--brand-ink) 38%, transparent)); }
.eb-hero__sub { font-family: var(--brand-body); font-size: var(--step-1); color: #c9d3e6; margin-top: .9rem; max-width: 40ch; }
.eb-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.eb-hero .btn--ghost { --_fg: #fff; border-color: rgba(255,255,255,.55); }
.eb-hero .btn--ghost:hover { background: rgba(255,255,255,.12); }
/* light hero theme (warm/local templates) */
.eb-hero[data-theme="light"] { color: var(--brand-ink); background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(23,59,115,.025) 7px 8px), radial-gradient(130% 130% at 85% 0%, var(--brand-paper-warm), var(--brand-paper) 62%); }
.eb-hero[data-theme="light"] .eb-hero__media::after { background: linear-gradient(to left, transparent 42%, var(--brand-paper) 97%); }
.eb-hero[data-theme="light"][data-side="left"] .eb-hero__media::after { background: linear-gradient(to right, transparent 42%, var(--brand-paper) 97%); }
.eb-hero[data-theme="light"] .eb-hero__bg::after { background: linear-gradient(to right, var(--brand-paper) 42%, color-mix(in srgb, var(--brand-paper) 55%, transparent)); }
.eb-hero[data-theme="light"][data-side="left"] .eb-hero__bg::after { background: linear-gradient(to left, var(--brand-paper) 42%, color-mix(in srgb, var(--brand-paper) 55%, transparent)); }
.eb-hero[data-theme="light"] .eb-hero__wordmark, .eb-hero[data-theme="light"] .eb-hero__wordmark .l1, .eb-hero[data-theme="light"] .eb-hero__slogan { color: var(--brand-ink); }
.eb-hero[data-theme="light"] .eb-hero__sub { color: var(--brand-slate); }
.eb-hero[data-theme="light"] .eb-hero__kicker { color: var(--brand-accent-2-text, var(--brand-accent-2)); } /* bright accent-2 is sub-AA on the light hero */
.eb-hero[data-theme="light"] .eb-hero__consent { color: var(--brand-slate); }
.eb-hero[data-theme="light"] .eb-hero__consent a { color: var(--brand-ink); }
.eb-hero[data-theme="light"] .eb-hero__panel { padding-block: 2.5rem 3rem; }
.eb-hero[data-theme="light"] .btn--ghost { --_fg: var(--brand-ink); border-color: var(--brand-line-dark); }
.eb-hero[data-theme="light"] .btn--ghost:hover { background: var(--brand-paper-warm); }
.eb-hero[data-theme="light"] .eb-social { color: var(--brand-slate); }
@media (max-width: 900px) { .eb-hero[data-theme="light"] .eb-hero__media { height: 40vh; } .eb-hero[data-theme="light"] .eb-hero__media::after, .eb-hero[data-theme="light"][data-side="left"] .eb-hero__media::after { background: linear-gradient(to top, var(--brand-paper) 5%, transparent 55%); } }

@media (max-width: 900px) {
  .eb-hero { min-height: auto; display: block; }
  .eb-hero__bg::after, .eb-hero[data-side="left"] .eb-hero__bg::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--brand-ink) 30%, transparent) 25%, var(--brand-ink) 72%); }
  .eb-hero__media { position: relative; width: 100%; height: 42vh; }
  .eb-hero__media::after, .eb-hero[data-side="left"] .eb-hero__media::after { background: linear-gradient(to top, var(--brand-ink) 4%, transparent 55%); }
  .eb-hero__panel { width: 100%; padding: 1.5rem var(--gutter) 3rem; margin-top: -8vh; }
  .eb-hero__form, .eb-hero__consent { max-width: none; }
}

/* ==== BLOCK: bio / about ================================================== */
.eb-bio .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.eb-bio__portrait { aspect-ratio: 3/4; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow-sm); background: var(--brand-paper-warm); }
.eb-bio__body h2 { font-size: var(--step-3); }
.eb-bio__prose { margin-top: 1.4rem; color: var(--brand-slate); font-size: var(--step-1); display: grid; gap: 1rem; max-width: 60ch; }
.eb-bio__sign { margin-top: 1.8rem; font-family: var(--brand-display); font-size: var(--step-2); color: var(--brand-ink); }
@media (max-width: 760px) { .eb-bio .wrap { grid-template-columns: 1fr; } .eb-bio__portrait { max-width: 320px; } }

/* ==== BLOCK: issues / priorities ========================================= */
.eb-issues__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.eb-issue {
  background: var(--brand-paper); border: 1px solid var(--brand-line);
  border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease;
}
.eb-issue:hover { transform: translateY(-3px); border-color: var(--brand-accent); }
.eb-issue .num { font-family: var(--brand-mono); font-size: var(--step--1); font-weight: 600; color: var(--brand-accent); }
.eb-issue h3 { font-size: var(--step-1); margin-top: .7rem; }
.eb-issue p { margin-top: .7rem; color: var(--brand-slate); }
.section--warm .eb-issue { background: #fff; }
.eb-issue__icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: .5rem; color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-paper)); }
.eb-issue__icon svg { width: 28px; height: 28px; }

/* ==== BLOCK: intro ("Why I'm Running") ================================== */
.eb-intro { max-width: 64ch; margin-inline: auto; text-align: center; }
.eb-intro h2 { font-size: var(--step-3); }
.eb-intro .baseline::after { margin-inline: auto; }
.eb-intro p { margin-top: 1.1rem; color: var(--brand-slate); font-size: var(--step-1); }
.eb-intro .eyebrow { margin-top: 0; color: var(--brand-accent); font-size: var(--step--1); }

/* ==== BLOCK: newsletter ================================================= */
.eb-newsletter__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.eb-newsletter h2 { font-size: var(--step-2); }
.eb-newsletter p { margin-top: .6rem; color: var(--brand-slate); }
.eb-nl-form { display: flex; gap: .6rem; }
.eb-nl-form input { flex: 1; min-width: 0; font-family: var(--brand-body); font-size: var(--step-0); padding: .9rem 1.1rem; border-radius: var(--radius-sm); border: 1.5px solid var(--brand-line); background: #fff; color: var(--brand-ink); }
.eb-nl-form input:focus { outline: none; border-color: var(--brand-accent); }
@media (max-width: 720px) { .eb-newsletter__grid { grid-template-columns: 1fr; } }

/* ==== BLOCK: endorsements ================================================= */
.eb-endorse__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.eb-quote { background: var(--brand-paper-warm); border-radius: var(--radius); padding: 2rem; border-left: 4px solid var(--brand-accent); }
.section--ink .eb-quote { background: var(--brand-ink-soft); border-left-color: var(--brand-accent-2); }
.eb-quote blockquote { margin: 0; font-family: var(--brand-display); font-size: var(--step-1); font-style: italic; color: var(--brand-ink); line-height: 1.3; }
.section--ink .eb-quote blockquote { color: #fff; }
.eb-quote .cite { margin-top: 1.1rem; font-family: var(--brand-mono); font-size: var(--step--1); color: var(--brand-muted); }
.section--ink .eb-quote .cite { color: #93a0c0; }
/* logo wall variant */
.eb-endorse__logos { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; align-items: center; margin-top: 2rem; }
.eb-endorse__logos span { font-family: var(--brand-display); font-weight: 600; font-size: var(--step-1); color: var(--brand-muted); }

/* ==== BLOCK: events ====================================================== */
.eb-events__list { display: grid; gap: .8rem; }
.eb-event { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; padding: 1.3rem 1.6rem; background: var(--brand-paper); border: 1px solid var(--brand-line); border-radius: var(--radius); }
.section--warm .eb-event { background: #fff; }
.eb-event__date { display: grid; place-items: center; width: 62px; height: 62px; border-radius: var(--radius-sm); background: var(--brand-ink); color: #fff; line-height: 1; }
.eb-event__date .m { font-family: var(--brand-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-accent-2); }
.eb-event__date .d { font-family: var(--brand-display); font-size: 1.6rem; font-weight: 600; margin-top: .15rem; }
.eb-event__body h3 { font-size: var(--step-1); }
.eb-event__body p { color: var(--brand-slate); font-size: var(--step--1); margin-top: .25rem; font-family: var(--brand-mono); }
@media (max-width: 640px) { .eb-event { grid-template-columns: auto 1fr; } .eb-event .btn { grid-column: 1 / -1; } }

/* ==== BLOCK: gallery ===================================================== */
.eb-gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; }
.eb-gallery__grid img, .eb-gallery__grid .ph { aspect-ratio: 1; border-radius: var(--radius-sm); object-fit: cover; background: linear-gradient(135deg, var(--brand-paper-warm), var(--brand-line)); }
.eb-gallery__grid .ph:nth-child(3n) { aspect-ratio: 1/1.3; }

/* ==== BLOCK: video ======================================================= */
.eb-video__frame { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--brand-ink); box-shadow: var(--shadow-md); display: grid; place-items: center; }
.eb-video__play { width: 76px; height: 76px; border-radius: 100px; background: var(--brand-accent-2); color: var(--brand-on-accent-2, var(--brand-ink)); display: grid; place-items: center; font-size: 1.8rem; }

/* ==== BLOCK: news / updates ============================================== */
.eb-news__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.eb-post { border-top: 3px solid var(--brand-ink); padding-top: 1.2rem; }
.eb-post .tag { font-family: var(--brand-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-accent); font-weight: 600; }
.eb-post h3 { font-size: var(--step-1); margin-top: .8rem; }
.eb-post .meta { font-family: var(--brand-mono); font-size: var(--step--1); color: var(--brand-muted); margin-top: .9rem; }

/* ==== BLOCK: volunteer / signup + contact ================================ */
.eb-signup .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.eb-signup__copy h2 { font-size: var(--step-3); }
.eb-signup__copy p { margin-top: 1rem; font-size: var(--step-1); }
.eb-form { display: grid; gap: .9rem; }
.eb-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.eb-field { display: grid; gap: .4rem; }
.eb-field label { font-family: var(--brand-mono); font-size: var(--step--1); font-weight: 600; letter-spacing: .04em; }
.eb-field input, .eb-field textarea, .eb-field select {
  font-family: var(--brand-body); font-size: var(--step-0);
  padding: .85rem 1.1rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--brand-line); background: var(--brand-paper); color: var(--brand-ink);
}
.section--ink .eb-field input, .section--ink .eb-field textarea, .section--ink .eb-field select {
  background: var(--brand-ink-soft); border-color: var(--brand-line-dark); color: #fff;
}
.eb-field input:focus, .eb-field textarea:focus { outline: none; border-color: var(--brand-accent); }
.eb-field textarea { resize: vertical; font-family: var(--brand-body); }
.eb-checks { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.eb-check { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--brand-body); font-size: var(--step--1); font-weight: 600; }
.eb-check input { accent-color: var(--brand-accent); }
/* EPIC 21 U6.1 (S21.10) — texting-consent unit adjacent to the Signup submit */
.eb-sms-consent { display: flex; align-items: flex-start; gap: .6rem; font-family: var(--brand-body); font-size: var(--step--1); line-height: 1.45; color: var(--brand-slate); }
.eb-sms-consent input { margin-top: .25rem; accent-color: var(--brand-accent); flex: 0 0 auto; }
.eb-sms-consent a { color: var(--brand-ink); }
.section--ink .eb-sms-consent { color: rgba(255, 255, 255, .85); }
.section--ink .eb-sms-consent a { color: #fff; }
.eb-contact__info { margin-top: 1rem; font-family: var(--brand-mono); font-size: var(--step--1); color: var(--brand-slate); }
.eb-contact__info p { margin: 0; }
@media (max-width: 720px) { .eb-signup .wrap, .eb-form .row { grid-template-columns: 1fr; } }

/* ==== BLOCK: donate CTA band ============================================= */
.eb-donate { background: var(--brand-accent); color: var(--brand-on-accent); }
.eb-donate .wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: 2rem; align-items: center; }
.eb-donate h2 { font-size: var(--step-4); color: #fff; }
.eb-donate p { margin-top: .8rem; font-size: var(--step-1); color: rgba(255,255,255,.9); max-width: 40ch; }
.eb-donate__amounts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.eb-donate__amounts a { font-family: var(--brand-mono); font-weight: 600; padding: .7rem 1.3rem; border-radius: 100px; border: 2px solid rgba(255,255,255,.55); color: #fff; text-decoration: none; }
.eb-donate__amounts a:hover, .eb-donate__amounts a.is-featured { background: #fff; color: var(--brand-accent); border-color: #fff; }
.eb-donate--red { background: var(--brand-accent-2); color: var(--brand-on-accent-2); }
.eb-donate--red h2, .eb-donate--red .eb-donate__deadline { color: var(--brand-on-accent-2); }
.eb-donate--red p { color: var(--brand-on-accent-2); opacity: .92; }
.eb-donate--red .eb-donate__amounts a { color: var(--brand-on-accent-2); border-color: color-mix(in srgb, var(--brand-on-accent-2) 55%, transparent); }
.eb-donate--red .eb-donate__amounts a:hover, .eb-donate--red .eb-donate__amounts a.is-featured { background: #fff; color: var(--brand-accent-2-text, var(--brand-accent-2)); border-color: #fff; }
.eb-donate--red .btn--amber { background: #fff; color: var(--brand-accent-2-text, var(--brand-accent-2)); }
@media (max-width: 760px) { .eb-donate .wrap { grid-template-columns: 1fr; } }

/* ==== BLOCK: compliance footer =========================================== */
.eb-footer { background: var(--brand-ink); color: #aeb7ce; padding-block: clamp(2.5rem,5vw,4rem) 2rem; }
.eb-footer .top { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 2rem; }
.eb-footer .eb-brand { color: #fff; }
.eb-footer h4, .eb-footer .eb-footer__h { font-family: var(--brand-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: #fff; font-weight: 500; margin-bottom: .9rem; } /* h2 semantically (no heading-level jump), styled as the small column label it is */
.eb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.eb-footer a { color: #aeb7ce; text-decoration: none; font-size: var(--step--1); }
.eb-footer a:hover { color: #fff; }
.eb-footer .social { display: flex; gap: .7rem; margin-top: 1rem; }
.eb-footer .social a { width: 38px; height: 38px; border: 1px solid var(--brand-line-dark); border-radius: 100px; display: grid; place-items: center; }
/* The FEC / state "Paid for by" disclaimer — always present, conspicuous. */
.eb-disclaimer {
  margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--brand-line-dark);
  font-family: var(--brand-mono); font-size: var(--step--1); color: #8b93ab;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.eb-disclaimer strong { color: #cdd4e6; font-weight: 600; }
.eb-legal-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.eb-legal-links a, .eb-legal-links button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: #8b93ab; text-decoration: none; }
.eb-legal-links a:hover, .eb-legal-links button:hover { color: #fff; }
.eb-wordmark { display: inline-flex; align-items: baseline; gap: .08rem; font-family: var(--eb-display); font-weight: 700; letter-spacing: -.03em; color: #fff; }
.eb-wordmark .dot { color: var(--eb-accent); }
.eb-poweredby { display: inline-flex; align-items: baseline; gap: .35rem; }

@media (max-width: 720px) { .eb-footer .top { grid-template-columns: 1fr 1fr; } }

/* ==== BLOCK: bio quote (optional pull-quote in Bio) ===================== */
.eb-bio__quote { margin-top: 1.6rem; padding-left: 1.2rem; border-left: 4px solid var(--brand-accent-2); font-family: var(--brand-display); font-size: var(--step-1); font-style: italic; color: var(--brand-ink); }

/* ==== BLOCK: trust bar =================================================== */
.eb-trustbar { background: var(--brand-accent); color: #fff; }
.eb-trustbar--ink { background: var(--brand-ink); }
.eb-trustbar .wrap { padding-block: 1rem; }
.eb-trustbar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.3rem; font-family: var(--brand-display); font-weight: 700; font-size: var(--step-1); text-align: center; }
.eb-trustbar .dot { display: inline-flex; color: var(--brand-accent-2); }
.eb-trustbar .dot svg { width: 15px; height: 15px; }

/* ==== BLOCK: star divider =============================================== */
.eb-stardivider .wrap { display: flex; align-items: center; gap: 1.1rem; padding-block: clamp(2rem, 4vw, 3rem); }
.eb-stardivider .line { flex: 1; height: 1px; background: var(--brand-line); }
.eb-stardivider.on-ink .line { background: var(--brand-line-dark); }
.eb-stardivider .stars { display: inline-flex; align-items: center; gap: .55rem; color: var(--brand-gold, var(--brand-accent-2)); }
.eb-stardivider .stars svg { width: 15px; height: 15px; }
.eb-stardivider .stars svg:nth-child(2) { width: 22px; height: 22px; color: var(--brand-gold, var(--brand-accent)); }

/* ==== BLOCK: wave divider (CSS/SVG flowing transition) ================= */
.eb-wave { line-height: 0; }
.eb-wave svg { display: block; width: 100%; height: clamp(26px, 4vw, 46px); }
.eb-wave svg path { fill: var(--brand-paper-warm); }
.eb-wave--ink svg path { fill: var(--brand-ink); }

/* ==== BLOCK: feature panels ============================================= */
.eb-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.eb-feature { background: var(--brand-paper); border: 1px solid var(--brand-line); border-top: 4px solid var(--brand-accent); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm); }
.section--warm .eb-feature { background: #fff; }
.eb-feature__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-paper)); margin-bottom: .8rem; }
.eb-feature__icon svg { width: 26px; height: 26px; }
.eb-feature h3 { font-size: var(--step-1); }
.eb-feature p { margin-top: .6rem; color: var(--brand-slate); }

/* ==== BLOCK: events — bulletin-card variant ============================= */
.eb-events__list--cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.eb-events__list--cards .eb-event { grid-template-columns: auto 1fr; align-items: start; row-gap: .3rem; border-top: 3px solid var(--brand-accent-2); }
.eb-events__list--cards .eb-event .btn { grid-column: 1 / -1; justify-self: start; margin-top: .7rem; }

/* ==== BLOCK: split CTA (volunteer | donate) ============================ */
.eb-splitcta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.eb-splitcta__panel { border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 3rem); color: #fff; }
.eb-splitcta__panel h3 { font-size: var(--step-2); color: #fff; }
.eb-splitcta__panel p { margin-top: .7rem; font-size: var(--step-1); opacity: .93; max-width: 34ch; }
.eb-splitcta__panel .btn { margin-top: 1.4rem; }
.eb-splitcta__panel--volunteer { background: var(--brand-accent); }
.eb-splitcta__panel--volunteer .btn--ghost { --_fg: #fff; border-color: rgba(255,255,255,.6); }
.eb-splitcta__panel--volunteer .btn--ghost:hover { background: rgba(255,255,255,.14); }
.eb-splitcta__panel--donate { background: var(--brand-accent-2); color: var(--brand-on-accent-2); }
.eb-splitcta__panel--donate h3 { color: var(--brand-on-accent-2); }
.eb-splitcta__panel--donate .btn { background: #fff; color: var(--brand-accent-2-text, var(--brand-accent-2)); }
@media (max-width: 720px) { .eb-splitcta__grid { grid-template-columns: 1fr; } }

/* ==== Hero — centered, photo-less layout (reform/statement heroes) ====== */
.eb-hero[data-layout="center"] { text-align: center; }
.eb-hero[data-layout="center"] .eb-hero__panel { width: min(100%, 900px); margin-inline: auto; padding-block: 140px 4.5rem; }
.eb-hero[data-layout="center"] .eb-hero__kicker { display: flex; justify-content: center; }
.eb-hero[data-layout="center"] .eb-hero__wordmark { align-items: center; }
.eb-hero[data-layout="center"] .eb-hero__slogan { font-size: var(--step-4); margin: 1rem auto 0; max-width: 17ch; }
.eb-hero[data-layout="center"] .eb-hero__sub { margin: 1.1rem auto 0; max-width: 54ch; }
.eb-hero[data-layout="center"] .eb-hero__cta, .eb-hero[data-layout="center"] .eb-hero__panel .eb-social { justify-content: center; }
.eb-hero[data-layout="center"] .eb-hero__bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-ink) 72%, transparent) 0%, var(--brand-ink) 94%); }

/* ==== BLOCK: pledge strip =============================================== */
.eb-pledges__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.eb-pledge { position: relative; background: var(--brand-paper); border: 1px solid var(--brand-line); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm); overflow: hidden; }
.section--ink .eb-pledge { background: var(--brand-ink-soft); border-color: var(--brand-line-dark); }
.eb-pledge::before, .eb-momentum__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: repeating-linear-gradient(-45deg, var(--brand-accent-2) 0 10px, transparent 10px 18px); }
.eb-pledge__n { font-family: var(--brand-display); font-size: var(--step-3); font-weight: 700; color: var(--brand-accent-2-text, var(--brand-accent-2)); line-height: 1; }
.section--ink .eb-pledge__n { color: var(--brand-accent-2); } /* bright twin back on ink cards */
.eb-pledge h3 { font-size: var(--step-1); margin-top: .5rem; }
.eb-pledge p { margin-top: .6rem; color: var(--brand-slate); }
.section--ink .eb-pledge h3 { color: #fff; }
.section--ink .eb-pledge p { color: #c3cbdf; }

/* ==== BLOCK: contrast rows ("The Choice Is Clear") ===================== */
.eb-contrast__table { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.eb-contrast__head { font-family: var(--brand-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: var(--step-1); padding: .9rem 1.2rem; border-radius: var(--radius-sm); }
.eb-contrast__head--bad { background: var(--brand-paper-warm); color: var(--brand-muted); }
.section--ink .eb-contrast__head--bad { background: var(--brand-ink-soft); }
.eb-contrast__head--good { background: var(--brand-accent-2); color: var(--brand-on-accent-2, #fff); }
.eb-contrast__cell { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1.2rem; background: var(--brand-paper); border: 1px solid var(--brand-line); border-radius: var(--radius-sm); font-size: var(--step-0); }
.section--ink .eb-contrast__cell { background: var(--brand-ink-soft); border-color: var(--brand-line-dark); color: #e6ebf5; }
.eb-contrast__cell .mark { font-weight: 700; flex: 0 0 auto; }
.eb-contrast__cell--bad { color: var(--brand-muted); }
.section--ink .eb-contrast__cell--bad { color: #93a0c0; }
.eb-contrast__cell--bad .mark { color: var(--brand-muted); }
.eb-contrast__cell--good .mark { color: var(--brand-accent-2); }
@media (max-width: 620px) { .eb-contrast__head, .eb-contrast__cell { padding: .7rem .8rem; font-size: .85rem; } }

/* ==== BLOCK: momentum (3 CTA cards) ==================================== */
.eb-momentum__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.eb-momentum__card { position: relative; background: var(--brand-paper); border: 1px solid var(--brand-line); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; overflow: hidden; }
.section--ink .eb-momentum__card { background: var(--brand-ink-soft); border-color: var(--brand-line-dark); }
.eb-momentum__card h3 { font-size: var(--step-1); }
.section--ink .eb-momentum__card h3 { color: #fff; }
.eb-momentum__card p { color: var(--brand-slate); flex: 1; }
.section--ink .eb-momentum__card p { color: #c3cbdf; }
.eb-momentum__card .btn { margin-top: .5rem; }

/* ==== BLOCK: testimonial =============================================== */
.eb-testimonial__fig { max-width: 62ch; margin-inline: auto; text-align: center; }
.eb-testimonial__mark { color: var(--brand-gold, var(--brand-accent-2)); display: flex; justify-content: center; margin-bottom: 1rem; }
.eb-testimonial__mark svg { width: 34px; height: 34px; }
.eb-testimonial blockquote { margin: 0; font-family: var(--brand-display); font-weight: 600; font-size: var(--step-2); line-height: 1.3; color: var(--brand-ink); }
.section--ink .eb-testimonial blockquote { color: #fff; }
.eb-testimonial figcaption { margin-top: 1.4rem; font-family: var(--brand-mono); font-size: var(--step--1); color: var(--brand-muted); text-transform: uppercase; letter-spacing: .08em; }
.section--ink .eb-testimonial figcaption { color: #93a0c0; }

/* ==== BLOCK: service timeline ========================================== */
.eb-timeline__list { list-style: none; margin: 0; padding: 0; max-width: 780px; }
.eb-timeline__item { display: grid; grid-template-columns: 5rem 1fr; gap: 1.4rem; padding-bottom: 1.8rem; }
.eb-timeline__year { font-family: var(--brand-display); font-weight: 800; font-size: var(--step-1); color: var(--brand-accent); text-align: right; padding-top: .05rem; }
.eb-timeline__body { position: relative; padding-left: 1.4rem; border-left: 2px solid var(--brand-line); padding-bottom: .2rem; }
.eb-timeline__body::before { content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 100px; background: var(--brand-accent-2); border: 3px solid var(--brand-paper); box-shadow: 0 0 0 1px var(--brand-line); }
.eb-timeline__item:last-child { padding-bottom: 0; }
.eb-timeline__item:last-child .eb-timeline__body { border-left-color: transparent; }
.eb-timeline__body h3 { font-size: var(--step-1); }
.eb-timeline__body p { margin-top: .4rem; color: var(--brand-slate); }
@media (max-width: 560px) { .eb-timeline__item { grid-template-columns: 1fr; gap: .2rem; } .eb-timeline__year { text-align: left; color: var(--brand-accent-2-text, var(--brand-accent-2)); } .eb-timeline__body { padding-left: 1.1rem; } }

/* ==== BLOCK: gallery (community photos) ================================ */
.eb-gallery__tile { margin: 0; }
.eb-gallery__tile img, .eb-gallery__tile .ph { width: 100%; }
.eb-gallery__tile .ph { aspect-ratio: 1; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--brand-paper-warm), var(--brand-line)); }
.eb-gallery__tile figcaption { margin-top: .55rem; padding-top: .5rem; border-top: 1px dashed var(--brand-line); font-family: var(--brand-body); font-size: var(--step--1); color: var(--brand-muted); }

/* hero kicker in the primary accent instead of action color (data-accent="blue") */
.eb-hero[data-accent="blue"] .eb-hero__kicker { color: var(--brand-accent); }
/* light kicker for dark heroes where the accent colors lack contrast (data-accent="light") */
.eb-hero[data-accent="light"] .eb-hero__kicker { color: rgba(255,255,255,.85); }

/* ==== BLOCK: stat cards ================================================= */
.eb-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.2rem; }
.eb-stat { background: var(--brand-paper); border: 1px solid var(--brand-line); border-radius: var(--radius); padding: 1.8rem; text-align: center; box-shadow: var(--shadow-sm); }
.section--warm .eb-stat { background: #fff; }
.eb-stat__n { display: block; font-family: var(--brand-display); font-weight: 800; font-size: var(--step-4); color: var(--brand-accent); line-height: 1; }
.eb-stat__l { display: block; margin-top: .5rem; font-family: var(--brand-body); font-size: var(--step-0); color: var(--brand-slate); font-weight: 600; }

/* ==== BLOCK: policy tabs =============================================== */
.eb-tabs__nav { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 2px solid var(--brand-line); margin-bottom: 1.8rem; }
.eb-tabs__tab { font-family: var(--brand-body); font-weight: 700; font-size: var(--step-0); padding: .8rem 1.3rem; background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--brand-muted); cursor: pointer; }
.eb-tabs__tab:hover { color: var(--brand-ink); }
.eb-tabs__tab[aria-selected="true"] { color: var(--brand-accent); border-bottom-color: var(--brand-accent); }
.eb-tabs__tab:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 2px; border-radius: 3px; }
.section--ink .eb-tabs__tab { color: #93a0c0; }
.section--ink .eb-tabs__tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--brand-accent-2); }
.eb-tabs__panel { max-width: 64ch; }
.eb-tabs__panel h3 { font-size: var(--step-2); }
.eb-tabs__panel p { margin-top: .8rem; color: var(--brand-slate); font-size: var(--step-1); }
.section--ink .eb-tabs__panel h3 { color: #fff; }
.section--ink .eb-tabs__panel p { color: #c3cbdf; }
.eb-video__play { background: var(--brand-accent); color: #fff; border: none; cursor: pointer; }

/* ==== BLOCK: community story (alternating image/text rows) ============== */
.eb-story__rows { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.eb-story__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.eb-story__row[data-flip="1"] .eb-story__media { order: 2; }
.eb-story__media img, .eb-story__media .ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-md); }
.eb-story__media .ph { background: linear-gradient(135deg, var(--brand-paper-warm), var(--brand-line)); }
.eb-story__text h3 { font-size: var(--step-2); }
.eb-story__text p { margin-top: .8rem; color: var(--brand-slate); font-size: var(--step-1); }
@media (max-width: 720px) { .eb-story__row, .eb-story__row[data-flip="1"] .eb-story__media { grid-template-columns: 1fr; order: 0; } }

/* ==== BLOCK: process steps ============================================= */
.eb-steps__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.5rem, 4vw, 2.5rem); }
.eb-step__n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 100px; background: var(--brand-blue, var(--brand-accent)); color: #fff; font-family: var(--brand-display); font-weight: 700; font-size: var(--step-1); margin-bottom: .9rem; }
.section--ink .eb-step__n { background: var(--brand-accent-2); color: var(--brand-on-accent-2, #fff); }
.eb-step h3 { font-size: var(--step-1); }
.eb-step p { margin-top: .5rem; color: var(--brand-slate); }
.section--ink .eb-step h3 { color: #fff; }
.section--ink .eb-step p { color: #c3cbdf; }

/* ==== BLOCK: FAQ (native details accordion) =========================== */
.eb-faq__list { max-width: 780px; border-top: 1px solid var(--brand-line); }
.eb-faq__item { border-bottom: 1px solid var(--brand-line); }
.eb-faq__item summary { list-style: none; cursor: pointer; padding: 1.15rem 0; font-family: var(--brand-display); font-weight: 600; font-size: var(--step-1); color: var(--brand-ink); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.eb-faq__item summary::-webkit-details-marker { display: none; }
.eb-faq__item summary::after { content: "+"; color: var(--brand-blue, var(--brand-accent)); font-weight: 400; font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.eb-faq__item[open] summary::after { content: "\2013"; }
.eb-faq__item summary:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 2px; border-radius: 3px; }
.eb-faq__a { padding-bottom: 1.2rem; color: var(--brand-slate); max-width: 68ch; }

/* ==== Hero event-highlight pill (rally/event templates) =============== */
.eb-hero__highlight { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.5rem; padding: .6rem 1.1rem; border-radius: 100px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff; font-family: var(--brand-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var(--step--1); text-decoration: none; transition: background .15s ease; }
.eb-hero__highlight:hover { background: rgba(255,255,255,.18); }
.eb-hero__highlight .dot { width: 9px; height: 9px; border-radius: 100px; background: var(--brand-accent-2); flex: 0 0 auto; animation: eb-pulse 2s infinite; }
.eb-hero__highlight .arrow { opacity: .7; }
@keyframes eb-pulse { 0% { box-shadow: 0 0 0 0 rgba(230,57,70,.6); } 70% { box-shadow: 0 0 0 9px rgba(230,57,70,0); } 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0); } }

/* ==== Donate urgency (progress bar + deadline) ======================== */
.eb-donate__deadline { margin-top: 1.3rem; font-family: var(--brand-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var(--step--1); color: #fff; }
.eb-donate__progress { margin-top: .7rem; height: 12px; border-radius: 100px; background: rgba(255,255,255,.28); overflow: hidden; max-width: 440px; }
.eb-donate__progress .bar { display: block; height: 100%; background: #fff; border-radius: 100px; }
.eb-donate__goal { margin-top: .5rem; font-family: var(--brand-mono); font-size: var(--step--1); color: rgba(255,255,255,.92); }

/* ==== BLOCK: CTA band ================================================== */
.eb-ctaband { background: var(--brand-accent); color: #fff; }
.eb-ctaband--ink { background: var(--brand-ink); }
.eb-ctaband__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap; }
.eb-ctaband h2 { font-size: var(--step-3); color: #fff; max-width: 24ch; }
.eb-ctaband p { margin-top: .5rem; color: rgba(255,255,255,.9); font-size: var(--step-1); max-width: 48ch; }
.eb-ctaband .eyebrow { color: #fff; opacity: .85; }
.eb-ctaband .btn--amber { background: var(--brand-accent-2); color: var(--brand-on-accent-2, #fff); }
@media (max-width: 640px) { .eb-ctaband__inner { flex-direction: column; align-items: flex-start; } }

/* ==== Header: solid black menu bar (dark templates) =================== */
.eb-header--black { background: #0a0b0d; border-bottom: 1px solid rgba(255,255,255,.14); }
.eb-header--black .btn--ghost { color: #fff; border-color: rgba(255,255,255,.32); }

/* ============ DARK MODE (preset mode:"dark") ========================== */
.eb-dark {
  color: #dce1e8;
  background: var(--brand-ink);
  --brand-slate: #aab2be;
  --brand-muted: #7e8794;
  --brand-line: rgba(255,255,255,.12);
  --brand-line-dark: rgba(255,255,255,.16);
  --brand-paper: var(--brand-ink-soft);
  --brand-paper-warm: var(--brand-ink-soft);
}
/* headings + explicitly-dark text -> light */
.eb-dark h1, .eb-dark h2, .eb-dark h3, .eb-dark h4,
.eb-dark .eb-quote blockquote, .eb-dark .eb-testimonial blockquote,
.eb-dark .eb-faq__item summary, .eb-dark .eb-bio__sign { color: #fff; }
/* ink sections: a touch darker than the page for separation */
.eb-dark .section--ink { background: color-mix(in srgb, var(--brand-ink) 55%, #000); }
/* cards on warm sections were hardcoded #fff -> a lighter dark so they pop */
.eb-dark .section--warm .eb-issue, .eb-dark .section--warm .eb-feature,
.eb-dark .section--warm .eb-event, .eb-dark .section--warm .eb-stat,
.eb-dark .section--warm .eb-momentum__card, .eb-dark .section--warm .eb-pledge {
  background: color-mix(in srgb, var(--brand-ink-soft) 86%, #ffffff);
}
/* form inputs hardcoded #fff -> dark */
.eb-dark .eb-field input, .eb-dark .eb-field textarea, .eb-dark .eb-field select,
.eb-dark .eb-nl-form input {
  background: color-mix(in srgb, var(--brand-ink) 55%, #000); color: #fff; border-color: rgba(255,255,255,.18);
}
.eb-dark .eb-field input::placeholder, .eb-dark .eb-nl-form input::placeholder { color: #8a93a0; }
/* buttons: ghost -> light; amber(action) -> white text on the accent */
.eb-dark .btn--ghost { --_fg: #fff; border-color: rgba(255,255,255,.32); }
.eb-dark .btn--ghost:hover { background: rgba(255,255,255,.1); }
.eb-dark .btn--amber { --_fg: var(--brand-on-accent-2, #fff); }
.eb-dark {
  --brand-focus-halo: #ffffff; /* dark mode remaps paper to ink-soft — keep the focus halo visible */
  --brand-accent-2-text: var(--brand-accent-2); /* "light surfaces" are dark here — the bright twin is the readable one */
}
/* faint-flag hero: let the flag actually show (was buried by an opaque scrim).
   Darkest behind the text for legibility, fading to reveal the flag toward the photo. */
.eb-dark .eb-hero__bg::after {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--brand-ink) 64%, transparent) 0%,
    color-mix(in srgb, var(--brand-ink) 30%, transparent) 60%);
}
.eb-dark .eb-hero[data-side="left"] .eb-hero__bg::after {
  background: linear-gradient(to left,
    color-mix(in srgb, var(--brand-ink) 64%, transparent) 0%,
    color-mix(in srgb, var(--brand-ink) 30%, transparent) 60%);
}
/* keep the candidate's head clear of the absolute header: on desktop the
   full-bleed photo starts just below the 92px bar (the black bar hides the seam). */
@media (min-width: 901px) {
  .eb-dark .eb-hero__media { top: 92px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { transition: none !important; animation: none !important; }
}

/* brand mark inside the powered-by wordmark */
.eb-wordmark .mark { width: .74em; height: .74em; color: var(--eb-accent); flex: none; }

/* ==== BLOCK: legal / policy prose (Privacy, Terms, Cookie Policy pages) == */
.eb-legal .wrap { max-width: 74ch; padding-block: clamp(1rem,3vw,2rem) clamp(3rem,6vw,5rem); }
.eb-legal__updated { color: var(--brand-muted); font-family: var(--brand-mono); font-size: var(--step--1); margin-bottom: 2rem; }
.eb-legal h2 { font-size: var(--step-1); margin: 2.2rem 0 .8rem; }
.eb-legal h2:first-of-type { margin-top: 0; }
.eb-legal p { color: var(--brand-slate); line-height: 1.7; margin: 0 0 1rem; max-width: none; }
.eb-legal ul { color: var(--brand-slate); line-height: 1.7; padding-left: 1.3rem; margin: 0 0 1rem; display: grid; gap: .5rem; }

/* ==== BLOCK: cookie-consent banner =======================================
   Platform chrome, not campaign content — every generated site gets the
   same fixed Electbase-branded card regardless of the candidate's theme,
   the same way a browser's own permission prompts don't reskin per site. */
.eb-cookie-wrap { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 200; display: flex; justify-content: center; padding: 0 1.2rem 1.2rem; pointer-events: none; }
.eb-cookie-card { pointer-events: auto; width: 100%; max-width: 460px; background: #141c30; /* solid — axe cannot compute contrast over gradients */ border: 1px solid #20283d; border-radius: 14px; box-shadow: 0 22px 50px -20px rgba(10,16,32,.55); transform: translateY(120%); transition: transform .4s cubic-bezier(.22,1,.36,1); font-family: 'Hanken Grotesk', system-ui, sans-serif; }
.eb-cookie-card.is-open { transform: translateY(0); }
.eb-cookie-head { padding: 1.4rem 1.4rem .6rem; }
.eb-cookie-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: #fff; font-size: 1.05rem; margin-bottom: .5rem; }
.eb-cookie-head p { font-size: .85rem; color: #c8cee0; line-height: 1.55; margin: 0; }
.eb-cookie-head a { color: #6f93ff; text-decoration: underline; text-underline-offset: 2px; }
.eb-cookie-cats { padding: .2rem 1.4rem; }
.eb-cookie-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid #20283d; }
.eb-cookie-row:last-child { border-bottom: none; }
.eb-cookie-row .lbl { font-weight: 600; color: #fff; font-size: .85rem; }
.eb-cookie-row .lbl .always { font-weight: 600; color: #ffb224; font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; margin-left: .4rem; }
.eb-cookie-row .desc { font-size: .78rem; color: #9aa4bd; margin-top: .15rem; line-height: 1.4; }
.eb-toggle { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 100px; border: 0; padding: 0; position: relative; cursor: pointer; background: #39415a; transition: background .18s; }
.eb-toggle[aria-checked="true"] { background: #3a6bff; }
.eb-toggle:disabled { opacity: .55; cursor: not-allowed; }
.eb-toggle span { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .18s ease; }
.eb-toggle[aria-checked="true"] span { transform: translateX(18px); }
.eb-cookie-actions { padding: 1rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.eb-cookie-actions .row { display: flex; gap: .6rem; }
.eb-cookie-actions button { flex: 1; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .85rem; padding: .7rem 1rem; border-radius: 100px; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.eb-cookie-actions .ghost { background: #1a2134; color: #c8cee0; border-color: #20283d; }
.eb-cookie-actions .ghost:hover { background: rgba(255,255,255,.12); }
.eb-cookie-actions .save { background: #152451; color: #fff; border-color: rgba(58,107,255,.4); }
.eb-cookie-actions .save:hover { background: rgba(58,107,255,.32); }
.eb-cookie-actions .accept { background: #f59e0b; color: #0a1020; }
.eb-cookie-actions .accept:hover { background: #ffb224; transform: translateY(-1px); }
@media (max-width: 520px) { .eb-cookie-wrap { padding: 0 .7rem .7rem; } }

/* S16.12/16.16 events: recurrence badge, directions link, RSVP disclosure */
.eb-event__repeat { font-family: var(--brand-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-accent-2-text, var(--brand-accent-2)); border: 1px solid var(--brand-line); border-radius: 999px; padding: .1rem .5rem; vertical-align: middle; margin-left: .4rem; }
.eb-event__dir { display: inline-block; margin-top: .5rem; font-family: var(--brand-mono); font-size: var(--step--1); color: var(--brand-accent); text-decoration: none; }
.eb-event__dir:hover { text-decoration: underline; }
.eb-events__empty { color: var(--brand-slate); font-family: var(--brand-mono); }
.eb-rsvp { grid-column: 1 / -1; margin-top: .3rem; }
.eb-rsvp > summary { display: inline-flex; cursor: pointer; list-style: none; }
.eb-rsvp > summary::-webkit-details-marker { display: none; }
.eb-rsvp[open] > summary { margin-bottom: .9rem; }
.eb-rsvp__form { max-width: 520px; }
.eb-form__thanks { color: var(--brand-accent-2-text, var(--brand-accent-2)); font-family: var(--brand-mono); }

/* S16.26 voter-info blocks: address form, result cards, empty states */
.eb-civic__form { max-width: 640px; margin-top: 1.4rem; }
.eb-civic__form .row { grid-template-columns: 1fr auto; align-items: end; }
.eb-civic__out { margin-top: 1.6rem; display: grid; gap: 1rem; }
.eb-civic__election { font-family: var(--brand-mono); font-weight: 700; font-size: var(--step--1); letter-spacing: .04em; color: var(--brand-accent-2-text, var(--brand-accent-2)); }
.eb-civic__group { font-size: var(--step-0); margin: .4rem 0 0; }
.eb-civic__places, .eb-civic__contests { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; }
.eb-civic__place, .eb-civic__contest { border: 1px solid var(--brand-line); border-radius: 10px; padding: 1rem 1.1rem; background: var(--brand-paper); display: grid; gap: .25rem; align-content: start; }
.eb-civic__place h4, .eb-civic__contest h4 { margin: 0; font-size: var(--step-0); }
.eb-civic__place p, .eb-civic__contest p { margin: 0; font-size: var(--step--1); color: var(--brand-slate); }
.eb-civic__hours { font-family: var(--brand-mono); }
.eb-civic__dir { display: inline-block; margin-top: .3rem; font-family: var(--brand-mono); font-size: var(--step--1); color: var(--brand-accent); text-decoration: none; }
.eb-civic__dir:hover { text-decoration: underline; }
.eb-civic__links { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.eb-civic__empty { color: var(--brand-slate); font-family: var(--brand-mono); }
.eb-civic__note { margin-top: 1.2rem; font-size: var(--step--1); color: var(--brand-slate); }
.eb-civic__attr { font-size: var(--step--1); color: var(--brand-slate); opacity: .7; margin-top: .2rem; }
@media (max-width: 720px) { .eb-civic__form .row { grid-template-columns: 1fr; } }

/* S16.27 state_party/county_party blocks: officers, meeting cadence,
   bylaws long-form, precinct recruiting, down-ballot endorsement slate */
.eb-officers__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.4rem; }
.eb-officer { text-align: center; }
.eb-officer__portrait { width: 120px; height: 120px; margin: 0 auto .8rem; border-radius: 50%; object-fit: cover; background: var(--brand-paper-warm); }
.eb-officer h3 { font-size: var(--step-0); margin: 0; }
.eb-officer__title { font-family: var(--brand-mono); font-size: var(--step--1); color: var(--brand-accent); margin: .2rem 0 0; }
.eb-officer__contact { font-size: var(--step--1); color: var(--brand-slate); margin: .3rem 0 0; }

.eb-meetings__list { display: grid; gap: 1rem; }
.eb-meeting { display: grid; grid-template-columns: 160px 1fr; gap: 1.2rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--brand-line); }
.eb-meeting__cadence { font-family: var(--brand-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--brand-accent-2-text, var(--brand-accent-2)); }
.eb-meeting__body h3 { font-size: var(--step-0); margin: 0; }
.eb-meeting__body p { color: var(--brand-slate); margin: .3rem 0 0; }
.eb-meeting__loc { font-family: var(--brand-mono); font-size: var(--step--1); }
@media (max-width: 560px) { .eb-meeting { grid-template-columns: 1fr; } }

.eb-bylaws .eb-bylaws__title { font-size: var(--step-3); margin: 0 0 .6rem; }

.eb-slate__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.4rem; }
.eb-slate__card { display: block; text-align: center; text-decoration: none; color: inherit; }
.eb-slate__portrait { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-sm); object-fit: cover; background: var(--brand-paper-warm); }
.eb-slate__card h3 { font-size: var(--step-0); margin: .7rem 0 0; }
.eb-slate__office { font-family: var(--brand-mono); font-size: var(--step--1); color: var(--brand-slate); margin: .2rem 0 0; }