/* ============================================================
   Humans First — National Day of Protest (July 18)
   Editorial Americana. Sibling to humansfirst.com:
   warm cream ground, dark ink, vintage imagery, BIG serif,
   sharp corners, flat (no drop shadows), keywords emphasized.
   Type: Instrument Serif (display) · Newsreader (text).
   ============================================================ */

:root {
  --cream:    #f9f6f0;  /* matches humansfirst.com body bg */
  --cream-2:  #f3eee4;  /* slightly deeper panel */
  --ink:      #1c2b31;  /* matches humansfirst.com text */
  --ink-soft: #4a5560;
  --red:      #cf2230;  /* logo H red */
  --red-deep: #a81a26;
  --flame:    #f0523d;  /* hf accent red-orange */
  --navy:     #1e3a5f;  /* logo F navy */
  --line:     #ddd5c6;  /* warm hairline */
  --line-ink: rgba(28, 43, 49, .14);
  --paper:    #fffdf8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Embedded in an iframe (Squarespace): drop our chrome; the host page supplies
   it (Gideon: shared HF banner). Standalone (direct URL / own domain pointed at
   Netlify) always shows our own header — this only applies inside an iframe. */
.embedded .site-header,
.embedded .site-footer,
.embedded .skip-link { display: none !important; }
/* Partial embed (?only=hero…): a slice of the page, so no chrome either. */
.only-mode .site-header,
.only-mode .site-footer,
.only-mode .skip-link { display: none !important; }
.only-mode .hero { min-height: 0; }
/* Hero embedded as ONE element on the Squarespace home page (?only=hero):
   there's no header above it and other host sections sit right below, so trim
   the vertical padding to a compact banner rhythm. Scoped to only-mode, so the
   standalone site and the full-page embed are untouched. */
.only-mode.only-hero .hero-inner { padding-top: 3.25rem; padding-bottom: 3.25rem; }
@media (max-width: 760px) {
  .only-mode.only-hero .hero-inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle paper grain — print-like warmth, sits above bg, below content */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.015em;
  margin: 0 0 .35em;
  color: var(--ink);
}

p { margin: 0 0 1rem; }
a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .6rem 1rem; text-decoration: none;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }

/* Emphasized keywords — borrowed from humansfirst.com: the word stays in the
   body color with a bold brand-colored underline (not italic/recolored). */
.mark {
  color: inherit; font-style: normal;
  text-decoration: underline; text-decoration-color: var(--red);
  text-decoration-thickness: 2px; text-underline-offset: 0.16em;
  text-decoration-skip-ink: none;
}

::selection { background: var(--red); color: #fff; }

/* ---------- Buttons: sharp, flat, editorial ---------- */
.btn {
  display: inline-block;
  font-family: "Newsreader", serif;
  font-size: 1.02rem; font-weight: 500;
  padding: .72em 1.6em;
  border: 1.5px solid transparent;
  border-radius: 0;
  cursor: pointer; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { background: var(--cream-2); color: var(--ink); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(249, 246, 240, .94);
  backdrop-filter: saturate(1.3) blur(6px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1.5rem;
}
.brand-logo { height: 38px; width: auto; display: block; }

/* ---------- Hero: full-bleed vintage image ---------- */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: 66vh;
  color: var(--cream);
  background: var(--ink);
  overflow: hidden;
  border-bottom: 5px solid var(--red);
}
/* In the iframe embed, let content set the height (no vh — avoids resize loops) */
.embedded .hero { min-height: 0; display: block; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('../img/hero.jpg');
  background-size: cover; background-position: center 28%;
  filter: saturate(.9) contrast(1.02);
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(20,28,35,.62) 0%, rgba(20,28,35,.42) 38%, rgba(20,28,35,.82) 100%),
    radial-gradient(120% 90% at 20% 30%, rgba(20,28,35,.15), rgba(20,28,35,.7));
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto; width: 100%;
  padding: 5.5rem 1.5rem 5rem;
}
.hero-title {
  font-size: clamp(2.7rem, 6vw, 5rem);
  line-height: 1.02; color: #fff; margin: 0 0 .3em;
  max-width: 18ch; text-wrap: balance;
  border-top: 3px solid var(--red); padding-top: 1.1rem; display: inline-block;
}
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero .btn-secondary { color: #fff; border-color: rgba(255,255,255,.7); }
.hero .btn-secondary:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Rally block: big date + countdown share a row, using the hero's width */
.hero-rally { display: flex; align-items: flex-end; gap: 1.75rem 3.25rem; flex-wrap: wrap; margin: 0 0 2.4rem; }
.hero-when { margin: 0; }
.date-emph {
  display: inline-block; font-family: "Instrument Serif", serif; line-height: 1;
  font-size: clamp(3.4rem, 6.5vw, 5.4rem); color: #fff;
}

/* Countdown */
.countdown { display: flex; gap: 1.7rem; margin: 0; }
.cd-unit { display: flex; flex-direction: column; }
.cd-num {
  font-family: "Instrument Serif", serif; font-size: 2.7rem; line-height: .9;
  color: #fff; font-variant-numeric: tabular-nums;
}
.cd-label {
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .7rem; color: #f2c9c2; margin-top: .45rem;
}

/* ---------- Impacts ---------- */
.impacts-section { padding: 4.5rem 0; border-bottom: 1px solid var(--line); }
.impacts-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 2.5rem;
}
.impact { border-top: 2px solid var(--red); padding-top: .9rem; }
.impact h3 {
  font-family: "Instrument Serif", serif; font-weight: 400;
  font-size: 1.6rem; color: var(--ink); margin: 0 0 .35rem; letter-spacing: -.01em;
}
.impact p { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.impact em { font-style: italic; color: var(--red); }
@media (max-width: 860px) { .impacts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .impacts-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* "What dangers does AI pose?" — same grid as the impacts section, but on the
   brand dark band (like the old manifesto) so it reads as its own block and
   breaks up the run of light sections. */
#dangers {
  background: var(--ink); color: var(--cream);
  border-top: 4px solid var(--red); border-bottom: 1px solid #2a3a42;
}
#dangers .kicker { color: #fff; border-color: var(--flame); }
#dangers .section-head h2 { color: #fff; }
#dangers .impact h3 { color: #fff; }
#dangers .impact p { color: #c5cfd4; }

/* ---------- Our demands ---------- */
.demands-section { padding: 4.5rem 0; background: var(--cream-2); border-bottom: 1px solid var(--line); }
.demands-lead {
  font-family: "Instrument Serif", serif; font-weight: 400; letter-spacing: -.01em;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; color: var(--ink);
  margin: 0 0 2rem; max-width: 22ch;
}
.demands-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; max-width: 72ch; }
.demands-list li {
  display: flex; align-items: baseline; gap: 1.1rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.demands-list li:first-child { padding-top: 0; border-top: none; }
.demand-num {
  font-family: "Instrument Serif", serif; font-size: 2.5rem; line-height: 1;
  color: var(--red); flex: 0 0 auto; min-width: 1.3ch; text-align: right;
}
.demand-text {
  font-family: "Newsreader", serif; font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.4; color: var(--ink);
}

/* ---------- Section scaffolding ---------- */
main { width: 100%; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.map-section, .register-section, .toolkit-section { padding: 4.5rem 0; }
.map-section, .register-section { border-bottom: 1px solid var(--line); }

.section-head { margin: 0 0 2.25rem; max-width: 60ch; }
.kicker {
  display: inline-block; text-transform: uppercase; letter-spacing: .2em;
  font-size: .76rem; font-weight: 600; color: var(--red);
  border-bottom: 2px solid var(--red); padding-bottom: .35rem; margin-bottom: 1rem;
}
.section-head h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0 0 .25em; }
.section-head p { color: var(--ink-soft); margin: 0; font-size: 1.15rem; }
.protest-count {
  margin-top: .85rem !important; font-size: .8rem !important;
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
  color: var(--red) !important;
}
.protest-count:empty { display: none; }

/* ---------- Address search ---------- */
.address-search { display: flex; gap: .55rem; flex-wrap: wrap; max-width: 580px; margin: 0 0 .75rem; align-items: flex-start; }
.search-field { position: relative; flex: 1 1 240px; }
.address-search input {
  width: 100%; font-family: "Newsreader", serif; font-size: 1.05rem;
  padding: .72rem .9rem; border: 1.5px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
}
.address-search input::placeholder { color: #8a8478; }
.address-search input:focus { outline: none; box-shadow: inset 0 -3px 0 var(--flame); }
.search-status { min-height: 1.4em; margin: 0; font-size: .98rem; color: var(--ink-soft); }

/* Address autocomplete dropdown */
.suggestions {
  position: absolute; top: calc(100% - 1.5px); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 0; list-style: none;
  background: var(--paper); border: 1.5px solid var(--ink); border-top: 0;
  max-height: 280px; overflow-y: auto; box-shadow: 0 10px 24px rgba(28,43,49,.18);
}
.suggestions li {
  padding: .6rem .9rem; font-size: 1rem; cursor: pointer;
  border-top: 1px solid var(--line); color: var(--ink);
}
.suggestions li:first-child { border-top: 0; }
.suggestions li.active, .suggestions li:hover { background: var(--cream); }
.suggestions li .s-main { font-weight: 600; }
.suggestions li .s-sub { color: var(--ink-soft); font-size: .9rem; }

/* ---------- Map + list ---------- */
.map-wrap { display: grid; grid-template-columns: 1fr 330px; gap: 0; height: 560px; margin-top: 1.5rem; border: 1.5px solid var(--ink); }
#map-canvas { height: 100%; }
.protest-list { height: 100%; overflow-y: auto; background: var(--paper); border-left: 1.5px solid var(--ink); }
.protest-list .empty { padding: 1.75rem; color: var(--ink-soft); text-align: left; }
.protest-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  appearance: none; -webkit-appearance: none; background: transparent; color: inherit; font: inherit;
  padding: 1.05rem 1.15rem; border: none; border-bottom: 1px solid var(--line);
}
.protest-card:hover, .protest-card.active { background: var(--cream); }
.protest-card:last-child { border-bottom: none; }
.protest-card h3 { font-family: "Newsreader", serif; font-weight: 700; font-size: 1.15rem; margin: 0 0 .15rem; letter-spacing: 0; }
.protest-card .meta { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.protest-card .distance {
  font-size: .72rem; font-weight: 700; color: var(--red);
  text-transform: uppercase; letter-spacing: .12em; margin: 0 0 .35rem;
}

/* Warm the basemap tiles a touch, but keep enough value contrast that the
   map reads as a distinct panel against the cream page (not washed out).
   Targets the <canvas> only, so markers/popups/controls stay crisp. */
#map-canvas { background: #dfe3e4; } /* water tone behind tiles */
#map-canvas .maplibregl-canvas {
  filter: sepia(.10) saturate(.92) brightness(.95) contrast(1.07);
}

/* Map marker */
.hf-marker {
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  background: var(--red); border: 2.5px solid var(--cream);
  box-shadow: 0 0 0 1px rgba(28,43,49,.4); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: transform .12s ease;
}
.hf-marker:hover, .hf-marker:focus-visible { transform: scale(1.25); z-index: 2; }
/* Pulsing ring on the protest nearest a searched address */
.hf-marker.is-nearest { box-shadow: 0 0 0 1px rgba(28,43,49,.4), 0 0 0 6px rgba(207,34,48,.28); }
/* The pin whose detail view is open */
.hf-marker.is-selected { transform: scale(1.3); z-index: 3; box-shadow: 0 0 0 1px rgba(28,43,49,.5), 0 0 0 7px rgba(207,34,48,.35); }
/* "Coming soon" pin — details not yet announced. Hollow/amber so it reads as
   provisional next to the solid red confirmed pins, but still clearly a protest. */
.hf-marker.is-tba { background: var(--cream); border-color: var(--flame); box-shadow: 0 0 0 1px rgba(28,43,49,.4), inset 0 0 0 3px var(--flame); }

/* "Details coming soon" flag — list card badge + detail-view notice */
.tba-badge {
  display: inline-block; margin-top: .4rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--red-deep); background: rgba(240,82,61,.12);
  border: 1px solid rgba(240,82,61,.4); border-radius: 999px; padding: .18rem .55rem;
}
.detail-tba {
  font-size: .95rem; line-height: 1.45; color: var(--ink); margin: 0 0 1rem;
  background: rgba(240,82,61,.08); border-left: 3px solid var(--flame);
  border-radius: 0 4px 4px 0; padding: .7rem .85rem;
}

/* Detail modal — opens over the dimmed map, ✕ / Esc / click-outside to close */
.protest-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(28, 43, 49, .55);
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.protest-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.protest-modal {
  position: relative; width: 100%; max-width: 30rem; max-height: 88vh; overflow-y: auto;
  background: var(--cream); border-top: 4px solid var(--red);
  padding: 2rem 2.1rem 2.25rem; box-shadow: 0 18px 50px rgba(28, 43, 49, .32);
  transform: translateY(8px); transition: transform .15s ease;
}
.protest-modal-backdrop.is-open .protest-modal { transform: none; }
.protest-modal-close {
  position: absolute; top: .5rem; right: .7rem; appearance: none; -webkit-appearance: none;
  background: none; border: none; cursor: pointer; line-height: 1;
  font-size: 1.7rem; color: var(--ink-soft); padding: .1rem .35rem;
}
.protest-modal-close:hover { color: var(--red); }
.protest-modal h3 {
  font-family: "Instrument Serif", serif; font-weight: 400; font-size: 2.1rem;
  line-height: 1.04; margin: 0 0 .4rem; letter-spacing: 0; outline: none;
}
.detail-kicker {
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700;
  color: var(--red); margin: 0 0 .5rem;
}
body.modal-open { overflow: hidden; }

/* Embedded in the Squarespace iframe: the frame is full-height and the PARENT
   page scrolls, so a position:fixed modal centers in the tall frame — far from
   the click, forcing a scroll. Inline mode anchors the card to the clicked pin/row
   (JS sets .protest-modal top) and dims the whole document behind it instead. */
.protest-modal-backdrop.is-inline {
  position: absolute; top: 0; left: 0; right: auto; bottom: auto;
  width: 100%; display: block; padding: 0;
}
.protest-modal-backdrop.is-inline .protest-modal {
  position: absolute; left: 50%; width: min(30rem, calc(100% - 2rem)); max-height: none;
  transform: translateX(-50%) translateY(8px);
}
.protest-modal-backdrop.is-inline.is-open .protest-modal { transform: translateX(-50%); }
/* Don't lock body scroll when embedded — the parent scrolls, and overflow:hidden
   would mis-report the iframe's content height. */
body.embedded.modal-open { overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .protest-modal-backdrop, .protest-modal { transition: none; }
  .protest-modal { transform: none; }
}
.detail-when { font-family: "Newsreader", serif; font-size: 1.05rem; color: var(--ink); margin: 0 0 .9rem; }
.detail-meta { font-size: .95rem; color: var(--ink-soft); margin: 0 0 .55rem; line-height: 1.4; }
.detail-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink); margin-bottom: .08rem; }
.detail-notes { font-size: .95rem; color: var(--ink-soft); margin: .9rem 0; line-height: 1.5; }
.detail-rsvp { display: inline-block; margin: .5rem 0 1.1rem; }
.detail-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .85rem; }
.detail-actions .detail-card { flex: 1 1 auto; text-align: center; }
.detail-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.detail-head-row #pm-title { margin: 0; }
.detail-head-row .detail-share { flex: none; margin-top: .3rem; font-size: .78rem; padding: .38rem .72rem; white-space: nowrap; }
.detail-share, .detail-card {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  font-family: "Newsreader", serif; font-size: .85rem; padding: .45rem .8rem;
}
.detail-share:hover, .detail-card:hover { border-color: var(--ink); color: var(--ink); }
.detail-card[disabled] { opacity: .6; cursor: default; }
.detail-card-preview { margin: 1.4rem 0 0; }
.detail-card-preview:empty { display: none; }   /* hidden until the canvas renders in */
.detail-card-preview canvas {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(28, 43, 49, .18);
}

/* Standalone per-protest share page (/p/<slug>) — just this event, nothing else */
.event-page-body { background: var(--cream); min-height: 100vh; display: flex; margin: 0; }
.event-page { max-width: 38rem; width: 100%; margin: auto; padding: clamp(2.5rem, 8vh, 6rem) 1.5rem; }
.event-page-brand {
  display: inline-block; font-family: "Instrument Serif", serif; font-size: 1.35rem;
  color: var(--ink); text-decoration: none; margin-bottom: 2.2rem;
}
.event-page-brand:hover { color: var(--red); }
.event-page-kicker {
  text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 700;
  color: var(--red); margin: 0 0 .6rem;
}
.event-page h1 {
  font-family: "Instrument Serif", serif; font-weight: 400; line-height: 1.02;
  font-size: clamp(2.4rem, 6vw, 3.4rem); margin: 0 0 .6rem; letter-spacing: 0;
}
.event-page .detail-when { font-size: 1.2rem; margin-bottom: 1.2rem; }
.event-page-all {
  display: inline-block; margin-top: 1.6rem; font-family: "Newsreader", serif;
  font-size: .9rem; color: var(--ink-soft); text-decoration: none;
}
.event-page-all:hover { color: var(--red); text-decoration: underline; }

.maplibregl-popup-content { font-family: "Newsreader", serif; border-radius: 0; padding: 1rem 1.1rem 1.1rem; box-shadow: 0 8px 28px rgba(28,43,49,.25); border-top: 3px solid var(--red); }
.maplibregl-popup-content h3 { font-family: "Newsreader", serif; font-weight: 700; font-size: 1.1rem; margin: 0 0 .2rem; letter-spacing: 0; }
.maplibregl-popup-content .meta { font-size: .92rem; color: var(--ink-soft); margin: 0 0 .5rem; }
.maplibregl-popup-close-button { font-size: 1.25rem; color: var(--ink-soft); padding: 0 .35rem; }
.maplibregl-popup-close-button:hover { background: transparent; color: var(--red); }

/* Themed zoom controls — sharp, paper, ink border (matches the site) */
.maplibregl-ctrl-group {
  border-radius: 0 !important; border: 1.5px solid var(--ink);
  box-shadow: none; background: var(--paper); overflow: hidden;
}
.maplibregl-ctrl-group button { background: var(--paper); }
.maplibregl-ctrl-group button:hover { background: var(--cream); }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.maplibregl-ctrl-attrib { font-family: "Newsreader", serif; font-size: .72rem; background: rgba(255,253,248,.85) !important; }
.maplibregl-ctrl-attrib a { color: var(--ink-soft); }

/* ---------- Register / signup form ---------- */
.register-section { background: var(--cream-2); }
/* Stacked: intro on top, form below — no awkward empty column. */
.register-grid { display: block; max-width: 760px; margin: 0 auto; }
.register-aside { text-align: center; max-width: 52ch; margin: 0 auto 2.6rem; }
.register-aside .kicker { display: inline-block; }
.register-aside .big-quote {
  font-family: "Instrument Serif", serif; font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1; margin: 0 0 1rem; color: var(--ink);
}
.register-aside .big-quote .mark { color: var(--red); }
.register-aside p { color: var(--ink-soft); font-size: 1.08rem; }

/* Integrated into the page (no hard card box) — the fields are the form. */
.register-embed { background: none; border: none; padding: 0; }
.signup-form { display: flex; flex-direction: column; gap: 1.05rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-row-3 { grid-template-columns: 7rem 1fr 5rem; }
.field-ac { position: relative; } /* anchors the address-suggestions dropdown */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field > span { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.field em { color: var(--red); font-style: normal; }
.field em.field-opt, .field-check .field-opt { color: var(--ink-soft); font-weight: 400; text-transform: none; letter-spacing: 0; font-style: normal; }
.field-check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.field-check input { width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; flex: none; accent-color: var(--red); cursor: pointer; }
.field-check > span { font-size: .92rem; color: var(--ink); line-height: 1.45; }
.field input, .field textarea {
  font-family: "Newsreader", serif; font-size: 1.02rem;
  padding: .62rem .7rem; border: 1.5px solid var(--line); border-radius: 0;
  background: var(--cream); color: var(--ink); width: 100%;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--paper); }
.field textarea { resize: vertical; }
.signup-submit { align-self: flex-start; margin-top: .35rem; }
.signup-status { min-height: 1.2em; margin: 0; font-size: .92rem; color: var(--ink-soft); }
.signup-status.error { color: var(--red); }
.hp-field { position: absolute; left: -9999px; }
.signup-success { padding: 1.5rem .25rem; }
.signup-success h3 { font-size: 2rem; }
.signup-success p { color: var(--ink-soft); margin: 0; }

/* ---------- Toolkit ---------- */
.toolkit-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.toolkit-download { margin-top: 1.75rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c2cdd3; padding: 3.5rem 0 2.25rem; border-top: 4px solid var(--red); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem 3rem; flex-wrap: wrap; }
.footer-wordmark { font-family: "Instrument Serif", serif; font-size: 2.1rem; line-height: 1; color: #fff; margin: 0 0 .3rem; letter-spacing: -.01em; }
.footer-tag { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: #8fa1a9; }
.footer-contact { display: inline-block; margin-top: .6rem; color: #dfe6ea; font-size: 1rem; text-decoration: underline; text-underline-offset: 3px; }
.footer-contact:hover { color: #fff; }
.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: flex-end; }
.footer-nav a { color: #dfe6ea; font-size: 1.02rem; text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-social { display: flex; gap: 1rem; }
.footer-social a { color: #c2cdd3; display: inline-flex; }
.footer-social a:hover { color: #fff; }
.footer-social svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.footer-fine { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid #2a3a42; font-size: .9rem; }
.footer-fine a { color: #9fb0b8; text-decoration: underline; text-underline-offset: 3px; }
.footer-fine a:hover { color: #fff; }
@media (max-width: 620px) {
  .footer-right { align-items: flex-start; }
  .footer-nav { justify-content: flex-start; }
}

/* ---------- Toolkit: PDF rendered inline by js/toolkit.mjs ---------- */
.toolkit-doc { max-width: 880px; margin: 2.5rem auto 0; }
.toolkit-doc:empty { margin: 0; }
.toolkit-page { display: block; width: 100%; height: auto; margin: 0 auto 1.25rem; }
.toolkit-soon {
  font-family: "Instrument Serif", serif; font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--red-deep); margin: 2rem 0;
  text-align: center;
}

/* ---------- Thank-you page ---------- */
.thanks-page {
  max-width: 560px; margin: 0 auto; text-align: center;
  padding: 6rem 1.5rem; display: flex; flex-direction: column;
  align-items: center; gap: 1rem; min-height: 75vh; justify-content: center;
}
.thanks-logo { height: 52px; width: auto; }
.thanks-page h1 { font-size: clamp(2.8rem, 7vw, 4.2rem); }
.thanks-page p { color: var(--ink-soft); font-size: 1.2rem; margin: 0 0 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .register-grid, .toolkit-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 760px) {
  body { font-size: 18px; }
  .map-wrap { grid-template-columns: 1fr; height: auto; }
  #map-canvas { height: 360px; }
  .protest-list { height: 300px; border-left: none; border-top: 1.5px solid var(--ink); }
  .field-row { grid-template-columns: 1fr; }
  .countdown { gap: 1.5rem; }
  .hero-inner { padding: 4.5rem 1.5rem 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}