/* ---- 1. Design tokens (edit per campaign) ---- */
:root {
  /* Brand palette (replace per project). Keep an accessible variant >= 4.5:1 on bg. */
  --color-primary:            #ad1428;   /* decorative / fills */
  --color-primary-accessible: #a91528;   /* text + buttons on light */
  --a11y-accent: #111b3c;                /* a11y menu accent; override per site */
  --color-secondary:          #111b3c;
  --color-accent:             #85621d;
  --color-dark:               #111b3c;
  --color-light:              #f6f3eb;
  --color-bg:                 #ffffff;
  --color-text:               #111b3c;
  --color-muted:              #4d576a;
  --color-border:             #e2e6ea;

  /* Typography (load the webfont in header.php) */
  --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Open Sans", Arial, sans-serif;
  --fs-base: 16px;
  --lh-base: 1.6;

  /* Layout */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 6px;
  --page-frame: 0px;            /* set e.g. 10px for a colored body frame */
  --page-frame-color: transparent;

  /* Focus + motion */
  --focus-ring: 3px solid #b9830b;

  /* Footer theming; override per project. MDW bug is intentionally not themeable. */
  --footer-bg:         var(--color-secondary);   /* footer background (usually the brand navy/dark) */
  --footer-text:       #f4fbf8;                   /* primary text on the footer (keep >= 4.5:1 on --footer-bg) */
  --footer-text-soft:  rgba(255,255,255,0.82);    /* secondary text (address, social idle) */
  --footer-link-hover: var(--color-accent);       /* link + contact hover color */
  --footer-org-accent: var(--color-accent);       /* committee-name accent above the address */
  --footer-rule:       rgba(255,255,255,0.20);    /* hairline above the footer-bottom row */
  --footer-donate-bg:  var(--color-primary-accessible); /* Donate button bg — MUST keep >= 4.5:1 with --footer-donate-text */
  --footer-donate-text:#ffffff;                   /* Donate button label color */
}


/* ---- 2. Minimal reset ---- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; color-scheme: light only; }

/* Browser force-dark (e.g. Samsung Internet): ship a dark-pref theme so it uses our light styles instead of inverting */
@media (prefers-color-scheme: dark) {
  html { color-scheme: only light; }

  input, textarea, select { background-color: #fff; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: var(--page-frame) solid var(--page-frame-color);
}

h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; }

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

a { color: var(--color-primary-accessible); }

/* Button labels are always centered */
button, .btn, input[type="submit"], input[type="button"], input[type="reset"] { text-align: center; justify-content: center; }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }


/* ---- 3. Structural utilities (not visual design) ---- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; }   /* gutters live on the parent — see the last rule in this file */


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}


/* ---- SCROLL PERFORMANCE (kit standard) ----
   Keep scroll smooth: no un-throttled scroll handlers (site.js rAF-throttles
   is-scrolled — style off that class); transition only transform/opacity/
   background-color/box-shadow on the header (never `all`, size, or filter);
   no background-attachment:fixed; use backdrop-filter sparingly. */
.site-header {
  /* cheap-only transitions for the scrolled state */
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Baseline scrolled treatment (sites override the look) */
html.is-scrolled .site-header { box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }


/* ---- STANDARD MDW FOOTER (global/footer.php) ----
   Fixed structure; rebrand via --footer-* vars. MDW bug (.footer-mdw*) — do not restyle. */
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding-block: clamp(3.25rem, 6vw, 5rem) 2rem; }

.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }

.footer-brand { display: inline-flex; }

.footer-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; }

.footer-logo { height: clamp(104px, 12vw, 136px); width: auto; }

.footer-menus { display: flex; align-items: flex-start; gap: clamp(1.75rem, 4vw, 3.5rem); flex-wrap: wrap; }

.footer-links { list-style: none; padding: 0; margin: 0; text-align: left; }

.footer-links li { margin-bottom: 0.65rem; }

.footer-links a { color: var(--footer-text); text-decoration: none; font-weight: 600; font-size: 1.1rem; }

.footer-links a:hover { color: var(--footer-link-hover); text-decoration: none; }

.footer-social { display: flex; gap: 0.85rem; }

.footer-social a { color: var(--footer-text-soft); display: inline-flex; transition: color .15s ease; }

.footer-social a:hover { color: #fff; }

.footer-social svg { width: 26px; height: 26px; }


.footer-mid { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.25rem; }

.footer-mid-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }

.footer-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.footer-addr { font-style: normal; font-family: var(--font-heading); font-weight: 400; line-height: 1.7; color: var(--footer-text); font-size: 1.05rem; }

.footer-org { display: block; color: var(--footer-org-accent); font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; margin-bottom: 0.2rem; }

.disclaimer { color: #fff; font-weight: 700; font-size: 1rem; border: 1.5px solid rgba(255,255,255,0.4); border-radius: var(--radius); padding: 0.9rem 1.2rem; max-width: 30rem; }


/* Footer action buttons (scoped to footer) */
.footer-actions .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem;
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: 0.95rem 1.5rem; min-height: 48px;
  border-radius: var(--radius); border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.footer-actions .btn:active { transform: translateY(1px); }

.footer-actions .btn--w140 { width: 140px; padding-inline: 0.5rem; line-height: 1.2; }

.footer-actions .btn--ghost-on-dark { background: transparent; color: var(--footer-text); border-color: rgba(255,255,255,0.55); }

.footer-actions .btn--ghost-on-dark:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: #fff; }

.footer-actions .btn--donate { background: var(--footer-donate-bg); color: var(--footer-donate-text); border-color: var(--footer-donate-bg); }

.footer-actions .btn--donate:hover { filter: brightness(0.92); color: var(--footer-donate-text); }


.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.85rem; border-top: 1px solid var(--footer-rule); }

.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

.footer-contact { color: var(--footer-text); font-weight: 600; font-size: 0.9rem; text-decoration: none; }

.footer-contact:hover { color: var(--footer-link-hover); text-decoration: none; }


@media (max-width: 820px) {
  .footer-top, .footer-mid, .footer-bottom, .footer-lead { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }

  .footer-actions { justify-content: center; margin: 0.75rem 0 1.25rem; }

  .footer-menus { flex-direction: column; align-items: center; gap: 1.75rem; }

  .footer-links { text-align: center; }

  .footer-addr { text-align: center; }

  .footer-mid-right { align-items: center; }
}

/* ============================================================
   No on 3 — campaign design. Shared UI remains in core.css.
   ============================================================ */
/* WOFF2, subset to Latin + Latin-1 + punctuation/arrows/dingbats (covers EN + ES).
   Generated 2026-09-24 from the TTFs with pyftsubset; ~95 KB total vs ~540 KB. */
@font-face { font-family: "Barlow Condensed"; src: url("/mdw/resources/fonts/Barlow-Condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/mdw/resources/fonts/Barlow-Condensed-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/mdw/resources/fonts/Open-Sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/mdw/resources/fonts/Open-Sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/mdw/resources/fonts/Open-Sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root { --gold: #ddbb69; --paper: #f6f3eb; --red: #ad1428; --mm-accent: #ddbb69; --footer-link-hover: #ddbb69; --footer-org-accent: #ddbb69; --hdr-h: 102px; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }   /* no fixed/sticky header any more */
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { text-underline-offset: .22em; }
button { font: inherit; }
/* NO HEADER BAR (2026-09-24): site/header.php is empty and the logo lives in
   the hero (.hero__logo). */
.hero { position: relative; background: var(--paper); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f6f3eb 28%, #f6f3ebd9 64%, #f6f3eb55), url("/mdw/resources/img/No-on-3-palms.webp") center / cover; opacity: .38; pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; position: relative; }
.hero__copy { padding: 3rem 0 4rem; z-index: 2; }
.hero__logo { display: block; width: 150px; height: auto; margin-bottom: 2.2rem; }
.hero h1 { font-size: clamp(3.8rem, 5.9vw, 5.6rem); line-height: .98; letter-spacing: -.015em; text-transform: uppercase; font-weight: 800; }
.hero h1 > span { color: var(--red); }
.hero__intro { margin-top: 1.7rem; max-width: 31rem; font-size: 1rem; line-height: 1.8; }
.hero__why { margin-top: 1rem; max-width: 31rem; font-size: 1rem; line-height: 1.7; font-weight: 700; color: #a91528; }   /* red on paper 6.7:1 */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 1.8rem; min-height: 52px; padding: .9rem 1.6rem; border: 2px solid transparent; font-weight: 700; font-size: .9rem; text-decoration: none; }
.btn--red { color: #fff; background: var(--red); }
.btn--red:hover { background: #871023; }
.hero .btn { margin-top: 1.65rem; }
.hero__visual { position: relative; align-self: stretch; min-width: 0; display: flex; align-items: flex-end; justify-content: center; }
.hero__wolf { position: relative; width: 100%; max-height: 720px; object-fit: contain; object-position: bottom; z-index: 1; margin-bottom: -2rem; }   /* +18% (was 91% / 610px). The negative margin drops the feet past the hero's bottom edge; .hero's overflow:hidden clips them there, so they read as tucked behind the navy band that follows. */
/* Red label (was navy). White on red 7.2:1; the kicker is a lighter gold,
   because the brand gold #ddbb69 on red is only 3.9:1 at this small size. */
.hero__label { position: absolute; z-index: 3; bottom: 2.6rem; right: -.4rem; width: 100%; max-width: 28rem; padding: 1.2rem 1.4rem; background: var(--red); color: #fff; border-left: 5px solid var(--gold); transform: rotate(-3deg); box-shadow: 0 8px 24px #111b3c18; }
.hero__label > span { display: block; color: #f3dc9e; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }   /* 5.35:1 on red */
.hero__label strong { font: 700 clamp(1.65rem, 2.5vw, 2.4rem)/1.12 var(--font-heading); text-transform: uppercase; }
.campaign-band { background: #111b3c; color: #fff; }
.campaign-band .container { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding-block: 1.4rem; }
.campaign-band p { font: 700 clamp(1.1rem, 2vw, 1.55rem)/1.1 var(--font-heading); text-transform: uppercase; letter-spacing: .045em; }
.campaign-band span { color: var(--gold); font-size: 1.5rem; }
.section { padding-block: clamp(4rem, 7.4vw, 6.5rem); }
.section-heading { max-width: 42rem; }
.section h2 { font-size: clamp(2.9rem, 4.6vw, 4.5rem); font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: -.015em; }
.facts h2 > span { color: var(--red); }
/* Five CARDS (2026-09-24): 3 on top, the bottom 2 centred. A 6-track grid
   with every card spanning 2 tracks; card 4 starts at track 2, so 4 + 5 sit
   centred under the three above. Tablet re-does the same trick on 4 tracks
   (card 5 centred alone); phones go to one column. Section sits on paper so
   the white cards read as cards. */
.facts { background: var(--paper); }
.facts-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.fact { grid-column: span 2; display: flex; flex-direction: column; padding: 1.75rem 1.6rem 2rem; background: #fff; border: 1px solid #e4dfd2; border-top: 4px solid var(--red); box-shadow: 0 10px 28px #111b3c0f; }
.fact:nth-child(4) { grid-column: 2 / span 2; }
.fact__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.fact__number { font: 700 1rem/1 var(--font-body); color: #4d576a; }
.fact__icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: #fff; flex-shrink: 0; }
.fact__icon svg { width: 24px; height: 24px; fill: currentColor; }
.fact h3 { font-size: 1.95rem; line-height: 1.02; text-transform: uppercase; margin-bottom: 1rem; }
.fact p { font-size: .875rem; line-height: 1.9; color: #4d576a; }
.community { background: #111b3c; color: #fff; }
.community__heading { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: end; }
.community__text p { line-height: 1.9; max-width: 34rem; color: #e0e4ed; }
.community__text p + p { margin-top: 1rem; }
.community__text .community__lead { font-weight: 700; color: var(--gold); }   /* the red-highlighted sentence in print; gold on navy 9.1:1 */
.community-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3rem; }
.community-card { background: #1b284c; }
.community-card img { width: 100%; aspect-ratio: 1.15; object-fit: cover; object-position: center top; }
.community-card figcaption { font: 700 1.35rem/1.2 var(--font-heading); text-transform: uppercase; padding: 1rem; border-top: 3px solid var(--gold); }
.community__closing { border-top: 1px solid #536078; margin-top: 2.5rem; padding-top: 2rem; text-align: center; font: 700 clamp(1.65rem, 2.8vw, 2.5rem)/1.2 var(--font-heading); text-transform: uppercase; }
/* Red ground with the fur texture masked in (2026-09-24) — same treatment as
   the vote section's palms: multiply so it only darkens the red (white text
   stays ≥7.2:1), low opacity, radial mask fading it toward the edges. */
.headlines { position: relative; isolation: isolate; overflow: hidden; background: var(--red); color: #fff; }
.headlines::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/mdw/resources/img/No-on-3-fur.webp") center / cover; mix-blend-mode: multiply; opacity: .4; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 35%, transparent 100%); }
html.a11y-hide-images .headlines::before { display: none; }
/* HEADLINES (redesigned 2026-09-24, after the print back / palm card):
   statement headline on the left with the print piece's red highlight bar,
   the three clippings as an overlapping, slightly rotated cascade on the
   right — torn paper laid on a table rather than three floating images.
   drop-shadow() (not box-shadow) so the shadow follows the torn edges. */
.headlines__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.headlines .section-heading { max-width: none; }
.headlines h2 { font-size: clamp(2.6rem, 4.2vw, 4.3rem); line-height: 1.14; }
.headlines h2 > span { background: #111b3c; color: #fff; padding: 0 .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }   /* navy bar on the red section (was red on paper); white on navy 16.9:1 */
.press-stack { display: flex; flex-direction: column; }
.press-quote { position: relative; min-width: 0; width: 80%; }
.press-quote:nth-child(1) { align-self: flex-start; transform: rotate(-2deg); z-index: 1; }
.press-quote:nth-child(2) { align-self: flex-end; margin-top: -2rem; transform: rotate(1.5deg); z-index: 2; }
.press-quote:nth-child(3) { align-self: center; width: 68%; margin-top: -2rem; transform: rotate(-1deg); z-index: 3; }
.press-quote img { width: 100%; height: auto; filter: drop-shadow(0 14px 20px #00000059); }   /* on the img, so the ES caption text isn't shadowed */
/* Spanish shows a translated caption under each clipping, and hiding images
   (a11y menu) shows the English one — both need the clippings un-stacked. */
html[lang="es"] .press-quote + .press-quote, html.a11y-hide-images .press-quote + .press-quote { margin-top: 1.75rem; }
html.a11y-hide-images .press-quote { transform: none; }
.press-caption { margin: 1rem .6rem 0; font-size: 1rem; line-height: 1.7; }
.press-caption strong { display: block; margin-bottom: .35rem; }
.press-caption--accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.a11y-hide-images .press-caption--accessible { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
/* VOTE (2026-09-24): ballot box removed, content centred. The palms photo is
   masked in over the red: multiply blend so it can only DARKEN the red (white
   text keeps ≥7.2:1 everywhere), low opacity, and a radial mask that fades it
   out toward the edges. -webkit-mask-image is still needed for iOS Safari.
   isolation:isolate confines the blend to this section's own red. */
.vote { position: relative; isolation: isolate; overflow: hidden; background: #ad1428; color: #fff; }
.vote::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/mdw/resources/img/No-on-3-palms.webp") center / cover; mix-blend-mode: multiply; opacity: .35; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 90% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 75% 90% at 50% 50%, #000 30%, transparent 100%); }
html.a11y-hide-images .vote::before { display: none; }
.vote__inner { text-align: center; }
.vote h2 { max-width: 60rem; margin-inline: auto; }
.vote h2 span { color: #fff; }
.vote__inner > p { max-width: 38rem; margin: 1.5rem auto 0; line-height: 1.9; }
/* One-pager download: thumbnail + white button, one link (big target). The
   thumbnail straightens on hover/focus; transform only, and off under the
   a11y "Pause Animations" setting and OS reduce-motion. White focus ring —
   the site's gold ring is only 2.2:1 on this red. */
.vote__download { display: inline-flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-top: 2.6rem; color: #fff; text-decoration: none; }
.vote__download img { width: 190px; height: auto; transform: rotate(-2.5deg); box-shadow: 0 16px 34px #00000059; transition: transform .2s ease; }
.vote__download:hover img, .vote__download:focus-visible img { transform: rotate(0) scale(1.03); }
.vote__download:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.btn--white { background: #fff; color: #a91528; }   /* red on white 7.4:1 */
.vote__download:hover .btn--white { background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .vote__download img { transition: none; } }
html.a11y-reduce-motion .vote__download img { transition: none; }
.site-footer { padding-bottom: 3rem; }
.footer-brand { background: #fff; padding: .85rem; border-radius: 3px; }
.footer-logo { width: 140px; height: auto; }
.footer-links a { font-size: .95rem; }
.footer-addr { font-family: var(--font-body); font-size: .9rem; }
.footer-org { font-family: var(--font-body); font-size: 1rem; }
.disclaimer { font-size: .77rem; font-weight: 400; max-width: 34rem; line-height: 1.8; }
.footer-mid-right { max-width: 55%; }
.legal { padding-block: 4rem; }
.legal .container { max-width: 900px; }
.legal h1 { font-size: 3.5rem; margin-bottom: 1.5rem; }
.legal h2 { font-size: 2rem; margin-block: 2rem 1rem; }
.legal p { margin-block: 1rem; }
.error { padding-block: 5rem; }
.error__code { font: 800 5rem/1 var(--font-heading); color: var(--red); }
.error h1 { font-size: 3rem; margin-block: 1rem; }
.error p + p { margin-top: 1.5rem; }
.btn--primary { background: var(--red); color: #fff; }
html[lang="es"] .hero h1 { font-size: clamp(3.2rem, 4.7vw, 4.6rem); }

@media (max-width: 1050px) {
  .hero__copy { padding-block: 3rem 3.5rem; }
  .hero__label { right: 0; }
  .community__heading { gap: 2rem; }
  .fact { padding-inline: 1.3rem; }
}
@media (max-width: 760px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { padding: 2rem 0 1.5rem; }
  .hero__logo { width: 120px; margin-bottom: 1.6rem; }
  .hero h1 { font-size: clamp(3.6rem, 10vw, 5rem); }
  html[lang="es"] .hero h1 { font-size: clamp(3rem, 8.5vw, 4.8rem); }
  .hero__intro { max-width: 35rem; font-size: .96rem; }
  .hero__visual { height: 500px; max-width: 540px; width: 100%; margin-inline: auto; }
  .hero__wolf { width: auto; height: 100%; margin-bottom: -1.25rem; }
  .hero__label { bottom: 1.8rem; width: 96%; right: 2%; padding: .9rem 1rem; }
  .hero__label strong { font-size: 2rem; }
  .campaign-band .container { flex-wrap: wrap; justify-content: center; gap: .7rem 1rem; padding-block: 1.1rem; }
  .campaign-band p { font-size: 1.05rem; }
  .campaign-band span { font-size: 1rem; }
  .facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .fact:nth-child(n) { grid-column: span 2; padding: 1.4rem 1.2rem 1.6rem; }
  .fact:nth-child(5) { grid-column: 2 / span 2; }
  .fact__top { margin-bottom: 1.2rem; }
  .fact h3 { font-size: 1.8rem; }
  .community__heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .community-grid { grid-template-columns: repeat(2, 1fr); }
  .headlines__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .press-quote { width: 90%; }
  .press-quote:nth-child(3) { width: 80%; }
  .press-quote:nth-child(n+2) { margin-top: -1.2rem; }
  html[lang="es"] .press-quote + .press-quote, html.a11y-hide-images .press-quote + .press-quote { margin-top: 1.5rem; }
  .footer-mid-right { max-width: 100%; }
  .footer-bottom { gap: 2rem; }
  .footer-legal { justify-content: center; }
}
@media (max-width: 390px) {
  .hero__visual { height: 420px; }
  .hero__label strong { font-size: 1.6rem; }
  .facts-grid { grid-template-columns: 1fr; gap: 1rem; }
  .fact:nth-child(n) { grid-column: auto; }
  .community-card figcaption { font-size: 1.1rem; padding: .7rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.a11y-reduce-motion { scroll-behavior: auto; }
html.a11y-hide-images .hero::before { background: none; }

/* Gutters live on the parent (section/header/footer + the campaign band), not on
   .container, so content gets the full --container-max. Keep LAST: it must follow
   the padding shorthands on .site-footer, .legal, .error etc. (same specificity —
   :where() is 0, the :has(.container) argument is one class). */
:where(section, header, footer, .campaign-band):has(> .container) { padding-inline: var(--container-pad); }