/* ==========================================================================
   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; }
.site :focus-visible {
  outline: 3px solid var(--brand-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- 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-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-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-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); }
@media (max-width: 1080px) { .eb-nav, .eb-header .eb-social { display: none; } .eb-header .btn--ghost { display: none; } }
/* 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-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: 50%; }
.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; }
/* subject sits toward the outer edge, clear of the panel-side scrim */
.eb-hero[data-side="right"] .eb-hero__media img { object-position: 40% top; }
.eb-hero[data-side="left"]  .eb-hero__media img { object-position: 60% top; }
/* the photo dissolves at its inner edge (alpha mask, not an ink overlay) —
   blends into translucent panels and background images alike, any theme */
.eb-hero__media { -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 99%); mask-image: linear-gradient(to left, #000 62%, transparent 99%); }
.eb-hero[data-side="left"] .eb-hero__media { -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 99%); mask-image: linear-gradient(to right, #000 62%, transparent 99%); }

/* ==== cutout hero — the candidate floats directly on the background scene.
   No rectangle: transparent-alpha photo, no mask, no panel block. The only
   overlay is one continuous fade (no plateau = no seam) for text legibility. */
.eb-hero[data-cutout] .eb-hero__media { -webkit-mask-image: none; mask-image: none; width: 54%; }
.eb-hero[data-cutout] .eb-hero__media img { object-fit: contain; }
.eb-hero[data-cutout][data-side="right"] .eb-hero__media img { object-position: 100% bottom; }
.eb-hero[data-cutout][data-side="left"]  .eb-hero__media img { object-position: 0% bottom; }
.eb-hero[data-cutout] .eb-hero__bg::after { background: linear-gradient(to right, color-mix(in srgb, var(--brand-ink) 62%, transparent) 0%, transparent 74%); }
.eb-hero[data-cutout][data-side="left"] .eb-hero__bg::after { background: linear-gradient(to left, color-mix(in srgb, var(--brand-ink) 62%, transparent) 0%, transparent 74%); }
.eb-hero[data-cutout][data-theme="light"] .eb-hero__bg::after { background: linear-gradient(to right, color-mix(in srgb, var(--brand-paper) 72%, transparent) 0%, transparent 74%); }
.eb-hero[data-cutout][data-theme="light"][data-side="left"] .eb-hero__bg::after { background: linear-gradient(to left, color-mix(in srgb, var(--brand-paper) 72%, transparent) 0%, transparent 74%); }
.eb-hero[data-cutout]:not([data-theme="light"]) .eb-hero__panel { text-shadow: 0 1px 22px rgba(4,8,18,.45); }
/* 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__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-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; }
/* translucent wash, not a slab — the bg image ghosts through behind the copy (same pattern as .eb-dark) */
.eb-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in srgb, var(--brand-ink) 78%, transparent) 56%, color-mix(in srgb, var(--brand-ink) 28%, transparent) 90%); }
.eb-hero[data-side="left"] .eb-hero__bg::after { background: linear-gradient(to left, color-mix(in srgb, var(--brand-ink) 78%, transparent) 56%, color-mix(in srgb, var(--brand-ink) 28%, transparent) 90%); }
.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__bg::after { background: linear-gradient(to right, color-mix(in srgb, var(--brand-paper) 84%, transparent) 56%, color-mix(in srgb, var(--brand-paper) 46%, transparent) 90%); }
.eb-hero[data-theme="light"][data-side="left"] .eb-hero__bg::after { background: linear-gradient(to left, color-mix(in srgb, var(--brand-paper) 84%, transparent) 56%, color-mix(in srgb, var(--brand-paper) 46%, transparent) 90%); }
.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__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; } }

@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, .eb-hero[data-side="left"] .eb-hero__media { -webkit-mask-image: linear-gradient(to top, transparent 2%, #000 52%); mask-image: linear-gradient(to top, transparent 2%, #000 52%); }
  .eb-hero__panel { width: 100%; padding: 1.5rem var(--gutter) 3rem; margin-top: -8vh; }
  .eb-hero__form, .eb-hero__consent { max-width: none; }
  /* cutout heroes on mobile: full transparent photo, centered on the scene */
  .eb-hero[data-cutout] .eb-hero__media, .eb-hero[data-cutout][data-side="left"] .eb-hero__media { -webkit-mask-image: none; mask-image: none; width: 100%; }
  .eb-hero[data-cutout] .eb-hero__media img, .eb-hero[data-cutout][data-side="left"] .eb-hero__media img { object-fit: contain; object-position: center bottom; }
}

/* ==== 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-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); }
.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); }
.eb-donate--red .btn--amber { background: #fff; color: 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 { font-family: var(--brand-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: #fff; font-weight: 500; margin-bottom: .9rem; }
.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-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); }
.eb-splitcta__panel--donate .btn { background: #fff; color: 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); line-height: 1; }
.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: #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); } .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); }
.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: #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: #fff; }
/* 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; }

/* ==== optional panel box (Hero.box) — a soft frosted card under just the
   text and buttons, for cutout heroes whose scene fights the copy ==== */
.eb-hero[data-box] .eb-hero__panel {
  background: rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 2.2rem 2.4rem 2.4rem;
  margin-block: 132px 3.5rem;
  width: min(58%, 680px);
}
.eb-hero[data-box]:not([data-theme="light"]) .eb-hero__panel { background: color-mix(in srgb, var(--brand-ink) 42%, transparent); }
@media (max-width: 900px) { .eb-hero[data-box] .eb-hero__panel { width: auto; margin: -8vh var(--gutter) 3rem; padding: 1.6rem 1.5rem; } }

/* ==== hero sizing fixes ====
   1) Solid (non-overlay) headers: the hero needs no overlay clearance and
      shouldn't stack a full 100vh below the header's own height. */
.eb-header--solid + .eb-hero { min-height: calc(100vh - 92px); }
.eb-header--solid + .eb-hero .eb-hero__panel { padding-block: 3rem; }
.eb-header--solid + .eb-hero[data-box] .eb-hero__panel { margin-block: clamp(2rem, 5vh, 3.25rem) 3.5rem; }
/* 2) Site-kit subpages: a banner, not a billboard. Overlay headers still
      need top clearance; solid headers don't. */
.eb-hero[data-compact] { min-height: 0; }
.eb-hero[data-compact][data-layout="center"] .eb-hero__panel { padding-block: 128px 3rem; }
.eb-hero[data-compact][data-layout="center"] .eb-hero__slogan { font-size: var(--step-3); }
.eb-header--solid + .eb-hero[data-compact][data-layout="center"] .eb-hero__panel { padding-block: 2.6rem 2.8rem; }

/* --- marked logo (SVG icon + text lockup, PAC collection) --- */
.eb-logo--marked { flex-direction: row; align-items: center; gap: .6rem; }
.eb-logo .txt { display: flex; flex-direction: column; }
.eb-logo .mark { display: inline-flex; flex: 0 0 auto; }
.eb-logo .mark svg { height: 2.2rem; width: auto; display: block; }
.eb-hero__wordmark.eb-logo--marked { align-items: center; }
.eb-hero__wordmark.eb-logo--marked .mark svg { height: clamp(2.8rem, 4.5vw, 4rem); }
.eb-footer .eb-logo .mark svg { height: 1.7rem; }

/* --- mission band --- */
.eb-mission { background: var(--paper-warm, #f6f4ef); }
.eb-mission--ink { background: var(--brand-ink); color: #fff; }
.eb-mission--ink h2, .eb-mission--ink p { color: #fff; }
.eb-mission--ink .eyebrow { color: rgba(255,255,255,.75); }
.eb-mission--accent { background: var(--brand-accent); color: #fff; }
.eb-mission--accent h2, .eb-mission--accent p { color: #fff; }
.eb-mission--accent .eyebrow { color: rgba(255,255,255,.8); }
.eb-mission__inner { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.eb-mission__mark { flex: 0 0 auto; display: inline-flex; }
.eb-mission__mark svg { width: clamp(88px, 12vw, 148px); height: auto; display: block; }
.eb-mission__inner h2 { font-size: var(--step-3); max-width: 26ch; }
.eb-mission__inner p { margin-top: .8rem; max-width: 58ch; font-size: 1.05rem; line-height: 1.65; }
@media (max-width: 640px) { .eb-mission__inner { flex-direction: column; align-items: flex-start; } }

/* --- PAC centered heroes: light theme gets a paper wash (not the ink scrim), logo lockup stacks --- */
.eb-hero[data-theme="light"][data-layout="center"] .eb-hero__bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-paper) 45%, transparent) 0%, color-mix(in srgb, var(--brand-paper) 82%, transparent) 94%); }
.eb-hero[data-layout="center"] .eb-hero__wordmark.eb-logo--marked { flex-direction: column; gap: 1rem; }
.eb-hero[data-layout="center"] .eb-hero__wordmark.eb-logo--marked .txt { align-items: center; }

/* light-mode anchor CTAs: same opt-in on-accent-2 mechanism (fallbacks = shipped inherited ink) */
.eb-hero[data-theme="light"] .btn--amber { color: var(--brand-on-accent-2, var(--brand-ink)); }
.eb-header--solid .btn--donate { color: var(--brand-on-accent-2, var(--brand-ink)); }
.eb-momentum .btn--amber { color: var(--brand-on-accent-2, var(--brand-ink)); }

/* --- per-template button foreground hooks (Blank collection: arbitrary accent colors).
   `.site a { color: inherit }` outranks `.btn`'s color, so buttons inherit their text
   color; these rules let a theme opt in to an explicit on-accent color. Every fallback
   reproduces the shipped inherited value, so templates without --brand-on-accent-2 are
   pixel-identical. --- */
.eb-dark .btn--amber, .eb-dark .btn--donate { color: var(--brand-on-accent-2, #fff); }
.eb-ctaband .btn--amber { color: var(--brand-on-accent-2, #fff); }
.eb-donate:not(.eb-donate--red) .btn--amber { color: var(--brand-on-accent-2, #fff); }

/* --- dark-mode warm bands: opt-in text color for themes whose warm surface is light.
   Templates without --brand-warm-ink keep the shipped white/gray exactly. --- */
.eb-dark .section--warm { color: var(--brand-warm-ink, #dce1e8); }
.eb-dark .section--warm .section-head > h2,
.eb-dark .eb-testimonial.section--warm blockquote { color: var(--brand-warm-ink, #fff); }

/* --- momentum cards: dark mode restores the intended dark card surface (inline light
   paper otherwise outranks the .eb-dark token override), and action buttons get
   readable on-accent text everywhere (fallback = white, correct on every shipped
   accent; opted-in themes substitute their own on-accent color). --- */
.eb-dark .eb-momentum__card { background: var(--brand-ink-soft); border-color: var(--brand-line-dark); }
.eb-momentum .btn:not(.btn--ghost):not(.btn--amber) { color: var(--brand-on-accent, #fff); }
.eb-dark .eb-momentum__card p { color: #aab2be; }

/* 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); }
.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 h1 { 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; }

/* ==== research unlocks (2026-08): opt-in hero/wordmark treatments ========
   Three per-block opt-ins from the template design research, appended after
   the ported drift block so they win equal-specificity conflicts:
   (a) data-poster    — hero slogan at the platform's --step-5 poster size
   (b) data-scrim="panel" — portrait framed on a flat color field instead of
       the blend scrim (set --brand-photo-panel to tint the field)
   (c) .eb-logo--shadow   — flat offset wordmark shadow in accent-2 */
.eb-hero[data-poster] .eb-hero__slogan { font-size: var(--step-5); line-height: 1.02; font-weight: 700; max-width: 13ch; text-wrap: balance; }
.eb-hero[data-scrim="panel"] .eb-hero__media { background: var(--brand-photo-panel, var(--brand-paper-warm)); }
.eb-hero[data-scrim="panel"] .eb-hero__media::after { background: none; }
.eb-hero[data-scrim="panel"] .eb-hero__media img { position: absolute; left: 10%; top: 12%; width: 80%; height: 88%; object-fit: cover; object-position: center top; border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-md); }
@media (max-width: 900px) { .eb-hero[data-scrim="panel"] .eb-hero__media img { top: 8%; height: 92%; } }
.eb-logo--shadow .l1 { text-shadow: .05em .05em 0 var(--brand-accent-2); }

/* ==== BLOCK: voter-info civic panels (WhereToVote / BallotLookup / ElectionInfo)
   — ported from the editor stylesheet for gallery parity ==== */
.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; } }