/* ============================================================
   Oleg Lisitsyn — North Port City Commission, District 5
   Alirko concept · Premium single-page · EN/RU
   Direction: WARM EDITORIAL LIGHT (ivory canvas, one deep-navy
   accent, one cinematic dark band). Derived from the Halo Air
   light system — restraint + type + whitespace + soft depth.
   Deliberately NOT the red/white/blue yard-sign palette.
   Hand-written, zero dependencies.
   ============================================================ */
:root {
  --bg: #FBFAF6;            /* warm ivory canvas */
  --bg-2: #F2EFE7;          /* alt wash */
  --surface: #FFFFFF;
  --ink: #141A21;           /* near-black */
  --ink-2: #55606D;         /* muted body */
  --ink-3: #8D9299;         /* faint labels */
  --line: rgba(20,26,33,.12);
  --line-2: rgba(20,26,33,.07);
  --accent: #1D3A54;        /* THE one accent — deep civic navy */
  --accent-deep: #142839;
  --accent-soft: rgba(29,58,84,.09);
  --dark: #131C25;          /* the single cinematic band */
  --shadow-sm: 0 1px 2px rgba(20,26,33,.04), 0 2px 8px rgba(20,26,33,.05);
  --shadow: 0 6px 16px rgba(20,26,33,.06), 0 18px 40px rgba(20,26,33,.07);

  /* type — all three carry full Cyrillic (verified for the RU locale) */
  --display: "Cormorant Garamond", Georgia, serif;   /* cyrillic + cyrillic-ext */
  --mono: "IBM Plex Mono", ui-monospace, monospace;  /* cyrillic */
  --sans: "Golos Text", -apple-system, BlinkMacSystemFont, sans-serif; /* Russian-designed */
  --sig: "Instrument Serif", Georgia, serif;         /* the attribution only */

  /* One shared photo grade — "warm + crisp", chosen 2026-07-31 from a six-way
     comparison. Adds real warmth (+7.7 on mean R−B) and enough contrast to give
     the dark suits some snap, without tipping into filter-preset territory.
     The previous value shifted pixels by 0.49 — imperceptible, a grade in name
     only. ⚠️ Keep this in sync with GRADE in make_og.py, or the social cards
     drift away from the page. */
  --grade: sepia(.07) saturate(1.18) contrast(1.10) brightness(1.02);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1160px;
  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans);
  font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
::selection { background: var(--accent); color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(70px, 11vw, 140px); position: relative; }
.section.wash { background: var(--bg-2); }
.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- type ---------- */
.display { font-family: var(--display); font-weight: 300; letter-spacing: -0.015em; line-height: 1.06; }
.display em { font-style: italic; font-weight: 400; color: var(--accent); }
h1, h2, h3 { font-weight: 400; color: var(--ink); }

/* mono eyebrow with the short rule — the editorial signature */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono);
  font-size: 10.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: .55; flex: none; }
.eyebrow.center { justify-content: center; }
.eyebrow.on-dark { color: rgba(255,255,255,.62); }
.eyebrow.on-dark::before { background: rgba(255,255,255,.4); }

.head { max-width: 680px; }
.head.center { max-width: 760px; margin-inline: auto; text-align: center; }
.head h2 { font-family: var(--display); font-weight: 300; letter-spacing: -0.015em; line-height: 1.08;
  font-size: clamp(31px, 4.7vw, 52px); margin-top: 20px; }
.head p { margin-top: 20px; color: var(--ink-2); font-size: clamp(15.5px, 1.8vw, 17.5px); max-width: 56ch; }
.head.center p { margin-inline: auto; }
p { text-wrap: pretty; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 500;
  font-size: 15px; padding: 14px 24px; border-radius: 4px; cursor: pointer; border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, border-color .25s, color .25s; }
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 5px 16px rgba(29,58,84,.22); }
.btn-primary:hover { transform: translateY(-2px); background: var(--accent-deep); box-shadow: 0 10px 26px rgba(29,58,84,.28); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
.btn-on-dark { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.22); }
.btn-on-dark:hover { background: #fff; color: var(--dark); border-color: #fff; }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-lg { padding: 16px 30px; font-size: 15.5px; }

/* ---------- header ---------- */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .35s, box-shadow .35s, border-color .35s;
  border-bottom: 1px solid transparent; }
header.scrolled { background: rgba(251,250,246,.86); backdrop-filter: saturate(170%) blur(14px);
  border-bottom-color: var(--line-2); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark { width: 30px; height: 30px; flex: none; }
.brand .mark polygon { fill: var(--accent); }
.brand .bn { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; }
.brand .bn small { display: block; font-size: 9.5px; letter-spacing: .16em; color: var(--ink-3); }
.nav-links { display: flex; gap: 30px; font-size: 14.5px; color: var(--ink-2); }
.nav-links a { position: relative; padding-bottom: 3px; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 16px; }

/* language toggle */
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.lang button { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; padding: 7px 10px;
  background: transparent; border: 0; cursor: pointer; color: var(--ink-3); transition: background .25s, color .25s; }
.lang button.active { background: var(--accent); color: #fff; }
.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 4px;
  background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.burger i { display: block; width: 16px; height: 1px; background: var(--ink); position: relative; }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: var(--ink); }
.burger i::before { top: -5px; } .burger i::after { top: 5px; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 70; background: var(--dark); color: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: var(--pad);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.drawer.open { opacity: 1; visibility: visible; }
.drawer a { font-family: var(--display); font-size: 34px; font-weight: 300; padding-block: 12px;
  border-bottom: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; }
.drawer .dclose { position: absolute; top: 24px; right: var(--pad); background: none; border: 0; color: #fff;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; cursor: pointer; }
.drawer .dcta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- hero (typographic — zero photo dependency) ---------- */
/* padding-top clears the taller header (nav 78px + authority strip 38px).
   Bottom padding is 0 — the photo band closes the hero. */
.hero { padding-top: clamp(128px, 17vh, 164px); padding-bottom: 0; position: relative; overflow: hidden; }
/* two columns so the type block stays short enough for the photo to be
   visible at scroll 0: name left, tagline + CTAs bottom-right */
.hero-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 56px);
  align-items: end; padding-bottom: clamp(30px, 4vw, 46px); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 50% at 84% 4%, rgba(29,58,84,.07), transparent 62%),
              radial-gradient(58% 46% at 0% 96%, rgba(29,58,84,.045), transparent 58%); }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { font-family: var(--display); font-weight: 300; line-height: .94;
  font-size: clamp(48px, 8.6vw, 104px); letter-spacing: -0.035em; margin-top: 22px; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.hero h1 .ln > span { display: inline-block; }
.hero .tagline { font-family: var(--display); font-weight: 300; font-size: clamp(21px, 3.2vw, 34px);
  line-height: 1.28; letter-spacing: -0.01em; margin-top: 30px; max-width: 24ch; }
.hero .tagline em { font-style: italic; color: var(--accent); }
.hero .cta-row { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 13px; }
/* ---------- hero photo — contained editorial plate ----------
   Two hard constraints drove this, and both rule out a full-bleed band:
   (1) it's a seven-person group shot with no negative space, so type over
   it would cover a face; (2) heads sit anywhere from ~18% (tallest boy) to
   ~45% (youngest) of the image height, so ANY letterbox crop decapitates
   somebody. So: no vertical crop at all — natural 4:3, contained, framed.
   Nobody is ever cut, at any viewport. */
.hero-photo { position: relative; max-width: 1000px; margin: 0 auto;
  padding-inline: var(--pad); }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 1616 / 1030;
  border-radius: 6px; filter: var(--grade); box-shadow: var(--shadow); }
/* the pre-settle scale is JS-only, or a no-JS visitor is stuck at 98.8% forever */
.js .hero-photo img { transform: scale(.988); transition: transform 2.2s var(--ease); }
.js .hero.in .hero-photo img { transform: scale(1); }   /* slow settle on arrival */
.hero-photo figcaption { margin-top: 14px; text-align: right;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); }

.hero .meta { margin-top: clamp(26px, 3vw, 34px); padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 40px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.hero .meta b { color: var(--ink); font-weight: 400; }

/* ---------- proof band (seam grid — reveals as ONE unit) ---------- */
.proof { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-2);
  border-block: 1px solid var(--line-2); }
.pf { background: var(--bg); padding: 34px 20px; text-align: center; }
/* Cormorant Garamond defaults to OLDSTYLE figures — "10+" renders as "IO+"
   and 3/9 drop below the baseline. Force lining figures on anything numeric. */
.pf .n { font-family: var(--display); font-weight: 300; font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "onum" 0, "tnum" 1; }
.pf .n span { color: var(--accent); }
.pf .l { margin-top: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.7; }

/* ---------- story (split, framed) ---------- */
/* slightly text-weighted so the 4:5 portrait column stays shorter than the prose */
.split { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(34px, 6vw, 84px); align-items: start; }
.prose p { color: var(--ink-2); font-size: clamp(15.5px, 1.8vw, 17.5px); margin-top: 20px; max-width: 54ch; }
.prose p:first-child { margin-top: 0; }
.head + .prose { margin-top: clamp(26px, 3vw, 38px); }
.prose strong { color: var(--ink); font-weight: 500; }
/* story aside: the pull quote sits at the top (aligned to the section head),
   the portrait fills the space beneath it that was reading as empty */
.story-aside { display: grid; gap: clamp(30px, 4vw, 44px); align-content: start; }
.story-portrait img { width: 100%; height: auto; aspect-ratio: 1152 / 1440;
  border-radius: 6px; filter: var(--grade); box-shadow: var(--shadow); }

.pull { border-left: 1px solid var(--accent); padding: 4px 0 4px 30px; }
.pull q { quotes: none; font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: clamp(23px, 3.1vw, 33px); line-height: 1.3; letter-spacing: -0.015em; display: block; text-wrap: balance; }
.pull .att { margin-top: 22px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3); }

/* ---------- campaign video ----------
   A plain lazy iframe, not a click-to-play facade. A facade must inject the
   player with autoplay=1, which browsers block for unmuted video, so the
   visitor has to press play twice. loading="lazy" defers the request until
   the section nears the viewport, which is most of the benefit anyway. */
.video-frame { position: relative; margin-top: clamp(38px, 5vw, 58px);
  aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: var(--dark); box-shadow: var(--shadow); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- positions / experience — editorial rows ---------- */
.rows { margin-top: 60px; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 76px 1fr 1.15fr; gap: clamp(20px, 4vw, 56px);
  padding-block: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); align-items: start; }
.row .no { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--accent); padding-top: .55em; }
.row h3 { font-family: var(--display); font-weight: 300; font-size: clamp(23px, 2.9vw, 32px);
  line-height: 1.14; letter-spacing: -0.015em; }
.row p { color: var(--ink-2); font-size: clamp(15px, 1.7vw, 16.5px); max-width: 52ch; }
.row .tag { margin-top: 16px; display: inline-flex; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 3px; padding: 5px 10px; }

/* ---------- the single cinematic dark band + statement highlighter ---------- */
.band { background: var(--dark); color: #fff; position: relative; overflow: hidden;
  padding-block: clamp(90px, 14vw, 170px); }
.band::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(62% 90% at 82% 0%, rgba(70,120,170,.20), transparent 62%); }
.band .wrap { position: relative; z-index: 1; }
.big-line { font-family: var(--display); font-weight: 300; font-size: clamp(33px, 6.4vw, 82px);
  line-height: 1.14; letter-spacing: -0.025em; max-width: 21ch; margin-top: 30px; }
.big-line .w { display: inline-block; color: rgba(255,255,255,.17); transition: color .55s var(--ease); }
.big-line .w.on { color: rgba(255,255,255,.94); }
/* the payoff phrase arrives in gradient ink, rises, blooms, then settles */
.big-line .w.key { font-style: italic;
  transition: color .55s var(--ease), transform .7s cubic-bezier(.22,1.35,.36,1), filter .8s var(--ease); }
.big-line .w.key.on { color: transparent;
  background: linear-gradient(180deg, #cfe2f3 0%, #79a9d4 62%, #4d86b8 100%);
  -webkit-background-clip: text; background-clip: text;
  transform: translateY(-0.05em);
  filter: drop-shadow(0 0 18px rgba(122,170,212,.42)); }
.band .band-foot { margin-top: 46px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 34px; }
.band .band-foot p { color: rgba(255,255,255,.62); font-size: 15.5px; max-width: 46ch; }

/* ---------- get involved ---------- */
.ways { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); margin-top: 58px; }
.way { background: var(--surface); padding: 32px 26px; transition: background .35s var(--ease); }
.way:hover { background: #fff; }
.way .wn { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.way h3 { font-family: var(--display); font-weight: 300; font-size: 25px; margin-top: 16px; line-height: 1.16; }
.way p { margin-top: 12px; color: var(--ink-2); font-size: 14.5px; }

/* the donate line closes "Get Involved" — it belongs to the four ways,
   not to the sign-up section */
.give-row { margin-top: clamp(34px, 4.5vw, 52px); padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: center; justify-content: space-between; }
.give-row h3 { font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.7vw, 28px); line-height: 1.18; }
.give-row p { margin-top: 10px; color: var(--ink-2); font-size: 15px; max-width: 52ch; }
.give-row .btn { flex: none; }

/* ---------- Join the team — a framed band with one job ---------- */
.join-band { border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  box-shadow: var(--shadow); padding: clamp(28px, 4.4vw, 56px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.join-why h2 { font-size: clamp(28px, 3.7vw, 42px); line-height: 1.1; margin-top: 18px; }
.join-why > p { margin-top: 18px; color: var(--ink-2); font-size: clamp(15.5px, 1.8vw, 17px); max-width: 46ch; }
/* the three steps make the reason for signing up unmistakable */
.steps3 { margin-top: clamp(28px, 3.4vw, 38px); display: grid; gap: 20px; }
.s3 { display: grid; grid-template-columns: 30px 1fr; gap: 4px 14px; align-items: baseline; }
.s3 .s3n { grid-row: span 2; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--accent); padding-top: .35em; }
.s3 b { font-weight: 500; font-size: 15.5px; }
.s3 > span:last-child { grid-column: 2; color: var(--ink-2); font-size: 14.5px; }
.join-band .cform { box-shadow: none; border-color: var(--line); background: var(--bg); }
.cform { background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  border-radius: 6px; padding: clamp(26px, 3.6vw, 40px); }
.cform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 17px; }
.field label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; transition: color .25s; }
.field:focus-within label { color: var(--accent); }
.field input, .field textarea { width: 100%; font-family: var(--sans); font-size: 15px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink);
  transition: border-color .25s, box-shadow .25s; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft); }
.field textarea { min-height: 104px; resize: vertical; }
.fnote { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.give { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.give h3 { font-family: var(--display); font-weight: 300; font-size: 27px; line-height: 1.16; }
.give p { margin-top: 12px; color: var(--ink-2); font-size: 15px; max-width: 44ch; }
.give .btn { margin-top: 22px; }

/* ---------- footer ---------- */
footer { background: var(--dark); color: rgba(255,255,255,.6); padding-block: clamp(56px, 8vw, 84px) 32px; }
footer .fcols { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px;
  padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,.11); }
footer .fbrand { display: flex; align-items: center; gap: 13px; color: #fff; }
/* base fill so the mark is visible with JS off / reduced motion;
   .sign-ready overrides it to transparent+stroke for the draw */
footer .fbrand .mark { width: 40px; height: 40px; flex: none; }
footer .fbrand .mark polygon { fill: #fff; }
footer .fbrand .bn { font-family: var(--mono); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; }
footer .fbrand .bn small { display: block; font-size: 9.5px; letter-spacing: .16em; color: rgba(255,255,255,.45); }
footer .fbrand + p { margin-top: 20px; font-size: 14.5px; max-width: 34ch; color: rgba(255,255,255,.55); }
footer h5 { color: #fff; font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 400; margin-bottom: 18px; }
footer .fcol a { display: block; margin-top: 11px; font-size: 14.5px; color: rgba(255,255,255,.6); transition: color .25s; }
footer .fcol a:hover { color: #fff; }
/* the statutory disclaimer — prominent, correctly spelled, campaign-approved wording */
.disclaimer { margin-top: 30px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1.9; color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 16px 18px; }
footer .fbottom { padding-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 12px; font-size: 12.5px; color: rgba(255,255,255,.42); }
/* attribution — discreet, bottom-right, aligned to the content edge */
.credit { margin-left: auto; }
.credit em { font-family: var(--sig); font-style: italic; }
.credit a { color: rgba(255,255,255,.66); transition: color .25s; }
.credit a:hover { color: #fff; }

/* concept ribbon (spec piece only — remove for a real launch) */
.ribbon { position: fixed; right: 0; bottom: 0; z-index: 80; background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  padding: 8px 14px; border-top-left-radius: 4px; pointer-events: none; }

/* ---------- Layer 1 motion — reveal system ----------
   Every hidden-by-default state is scoped to html.js (set by an inline
   head script). With JS off nothing is ever hidden: no-JS still shows
   all content. */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal][data-d="1"] { transition-delay: .08s }
.js [data-reveal][data-d="2"] { transition-delay: .16s }
.js [data-reveal][data-d="3"] { transition-delay: .24s }
/* masked line-rise for the hero name + section headings */
.js .ln > span, .js .head h2 .hl > span { transform: translateY(112%); transition: transform 1s var(--ease); }
.head h2 .hl { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.head h2 .hl > span { display: inline-block; }
.js [data-reveal].in .ln > span, .js [data-reveal].in h2 .hl > span { transform: none; }
.js [data-reveal].in h2 .hl:nth-child(2) > span { transition-delay: .13s; }
.js .hero.in .ln > span { transform: none; }
.js .hero .ln:nth-child(2) > span { transition-delay: .1s; }
/* fade zone for the language crossfade */
#lang-zone { transition: opacity .3s var(--ease); }
#lang-zone.fading { opacity: 0; }

/* footer mark signs the page — draws its stroke, then fills */
footer.sign-ready .mark polygon { fill: rgba(255,255,255,0); stroke: #fff; stroke-width: 4;
  stroke-dasharray: 100; stroke-dashoffset: 100; }
footer.sign-ready.sign .mark polygon { animation: glyph-draw 1.4s var(--ease) .15s forwards; }
@keyframes glyph-draw { 55% { fill: rgba(255,255,255,0); } to { stroke-dashoffset: 0; fill: #fff; } }

/* ============================================================
   Patterns adapted from federal-style government pages
   (structure/behaviour only — our own type, colour and copy)
   ============================================================ */

/* ---------- authority strip (their "official website" bar) ----------
   Lives inside the fixed header and collapses once scrolled, so the
   glass nav stays slim on the way down. */
.gov-strip { background: var(--dark); color: rgba(255,255,255,.72);
  overflow: hidden; height: 38px;
  transition: height .4s var(--ease), opacity .3s var(--ease); }
header.scrolled .gov-strip { height: 0; opacity: 0; }
.gov-strip .wrap { height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gov-strip span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gov-strip .gs-right { color: #fff; }
.gov-strip .seal { width: 13px; height: 13px; flex: none; margin-right: 9px; vertical-align: -2px; }
.gov-strip .seal polygon { fill: rgba(255,255,255,.8); }
.gov-strip .gs-left { display: flex; align-items: center; }

/* ---------- How to Vote — a real tool, not a decorative widget ---------- */
.vote-card { margin-top: 54px; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
/* progressive enhancement: with JS off the tab bar is useless, so it's hidden
   and all three panels stack open instead of two being unreachable */
.vote-tabs { display: none; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-2); }
.js .vote-tabs { display: grid; }
.vote-tabs button { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  background: var(--bg-2); color: var(--ink-3); border: 0; cursor: pointer; padding: 18px 12px;
  border-bottom: 2px solid transparent; transition: background .3s var(--ease), color .3s, border-color .3s; }
.vote-tabs button:hover { color: var(--ink); }
.vote-tabs button[aria-selected="true"] { background: var(--surface); color: var(--accent);
  border-bottom-color: var(--accent); }
.vote-panel { padding: clamp(28px, 4vw, 46px); display: grid;
  grid-template-columns: auto 1fr; gap: clamp(26px, 5vw, 60px); align-items: start; }
.vote-panel + .vote-panel { border-top: 1px solid var(--line-2); }
.js .vote-panel { display: none; border-top: 0; }
.js .vote-panel.active { display: grid; }
/* the big date block — their oversized-numeral treatment, ours in the display serif */
.vote-date { text-align: center; border: 1px solid var(--line); border-radius: 6px;
  padding: 20px 26px; min-width: 148px; }
.vote-date .vd-mon { font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); }
.vote-date .vd-day { font-family: var(--display); font-weight: 300; font-size: clamp(52px, 7vw, 76px);
  line-height: 1; letter-spacing: -0.04em; margin-top: 8px;
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "onum" 0, "tnum" 1; }
.vote-date .vd-yr { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  color: var(--ink-3); margin-top: 8px; }
.vote-body h3 { font-family: var(--display); font-weight: 300; font-size: clamp(23px, 2.9vw, 31px); line-height: 1.16; }
.vote-body p { margin-top: 14px; color: var(--ink-2); font-size: clamp(15px, 1.7vw, 16.5px); max-width: 52ch; }
.vote-body .vb-meta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 30px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.vote-body .vb-meta b { color: var(--ink); font-weight: 400; }
.vote-body .btn { margin-top: 24px; }
/* small-print discipline — every date block cites its source */
.vote-note { margin-top: 20px; font-size: 12.5px; color: var(--ink-3); max-width: 74ch; }
.vote-note a { color: var(--accent); border-bottom: 1px solid var(--accent-soft); }
.vote-note a:hover { border-bottom-color: var(--accent); }

/* ---------- FAQ grouped by audience ---------- */
.faq-groups { margin-top: 56px; display: grid; gap: clamp(34px, 5vw, 54px); }
.faq-group > .fg-label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); padding-bottom: 14px; }
.qa { border-top: 1px solid var(--line); }
.faq-group .qa:last-child { border-bottom: 1px solid var(--line); }
.qa > button { width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 22px;
  font-family: var(--sans); font-size: clamp(15.5px, 1.8vw, 17.5px); color: var(--ink); }
.qa .qi { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; position: relative;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s; }
.qa .qi::before, .qa .qi::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.qa .qi::before { width: 10px; height: 1.5px; }
.qa .qi::after { width: 1.5px; height: 10px; transition: opacity .3s var(--ease); }
.qa.open .qi { transform: rotate(90deg); background: var(--accent); color: #fff; }
.qa.open .qi::after { opacity: 0; }
/* answers are open by default; only html.js collapses them (so a no-JS
   visitor reads every answer instead of none) */
.qa .qa-a { display: grid; grid-template-rows: 1fr; }
.js .qa .qa-a { grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.js .qa.open .qa-a { grid-template-rows: 1fr; }
.qa .qa-a > div { overflow: hidden; }
.qa .qa-a p { padding-bottom: 22px; color: var(--ink-2); font-size: 15.5px; max-width: 68ch; }
.js .qa .qa-a p { opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease) .1s, transform .4s var(--ease) .1s; }
.js .qa.open .qa-a p { opacity: 1; transform: none; }
/* the toggle glyph is only meaningful when JS can act on it */
.qa > button { cursor: default; }
.js .qa > button { cursor: pointer; }
.qa .qi { display: none; }
.js .qa .qi { display: grid; }
.qa .qa-a a { color: var(--accent); border-bottom: 1px solid var(--accent-soft); }
/* the accent seam draws beneath the open item — the line-draw motif */
.qa { position: relative; }
.qa::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease); }
.qa.open::after { transform: scaleX(1); }

/* ---------- In the news — source-attributed, third-party proof ---------- */
.news-list { margin-top: 50px; border-top: 1px solid var(--line); }
.news-item { border-bottom: 1px solid var(--line); display: grid;
  grid-template-columns: 200px 1fr auto; gap: clamp(18px, 3vw, 40px); align-items: center;
  padding-block: clamp(24px, 3vw, 34px); transition: background .35s var(--ease); }
.news-item:hover { background: var(--surface); }
.news-item .src { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); }
.news-item h3 { font-family: var(--display); font-weight: 300; font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.2; letter-spacing: -0.01em; }
.news-item .read { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.news-item .read svg { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.news-item:hover .read svg { transform: translate(2px, -2px); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .proof { grid-template-columns: repeat(3, 1fr); }
  .ways { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .hero-top { grid-template-columns: 1fr; align-items: start; }
  .split, .join-band { grid-template-columns: 1fr; }
  .row { grid-template-columns: 54px 1fr; }
  .row p { grid-column: 2; max-width: 60ch; }
  .pull { margin-top: 8px; }
  .news-item { grid-template-columns: 1fr auto; }
  .news-item .src { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* declutter aggressively — mobile should feel calm, not crammed.
     brand + lang + burger only: the header CTA would overflow 375px
     (it pushed the burger to x=383), and the drawer already carries it. */
  .nav-right .btn { display: none; }
  .brand .bn small { display: none; }
  .brand .bn { font-size: 11.5px; }
  .hero .meta { flex-direction: column; gap: 8px; }
  .hero .cta-row .btn { flex: 1 1 100%; justify-content: center; }
  .proof { grid-template-columns: 1fr 1fr; }
  .pf { padding: 26px 16px; }
  .ways { grid-template-columns: 1fr; }
  .cform .row2 { grid-template-columns: 1fr; }
  .give-row { flex-direction: column; align-items: flex-start; }
  .give-row .btn { width: 100%; justify-content: center; }
  /* the authority strip drops to the election date only — the left half
     would ellipsis into nonsense at 375px */
  .gov-strip .gs-left { display: none; }
  .gov-strip .wrap { justify-content: center; }
  .hero-photo { padding-inline: 0; }
  .hero-photo figcaption { font-size: 8px; text-align: left; }
  .vote-tabs { grid-template-columns: 1fr; }
  .vote-panel.active { grid-template-columns: 1fr; }
  .vote-date { min-width: 0; justify-self: start; padding: 16px 22px; }
  .news-item { grid-template-columns: 1fr; gap: 12px; }
  .news-item .read { justify-self: start; }
  footer .fcols { grid-template-columns: 1fr; gap: 30px; }
  footer .fbottom { flex-direction: column; align-items: flex-start; }
  .credit { margin-left: 0; }
  .band .band-foot .btn { width: 100%; justify-content: center; }
}

/* ---------- reduced motion — every effect above falls away ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], [data-reveal] { opacity: 1 !important; transform: none !important;
    transition: none !important; transition-delay: 0s !important; }
  .ln > span, .head h2 .hl > span, .js .ln > span, .js .head h2 .hl > span { transform: none !important; transition: none !important; }
  /* the whole commitment line is simply legible — no scrub, no gradient, no bloom */
  .big-line .w { color: rgba(255,255,255,.94) !important; transition: none !important;
    -webkit-text-fill-color: rgba(255,255,255,.94); }
  .big-line .w.key { font-style: italic; color: #9dc3e2 !important; background: none !important;
    -webkit-text-fill-color: #9dc3e2; transform: none !important; filter: none !important; }
  footer.sign-ready .mark polygon { stroke-dasharray: none; stroke-dashoffset: 0; fill: #fff; animation: none !important; }
  .btn, .nav-links a::after, .way, #lang-zone { transition: none !important; }
  .drawer { transition: none; }
  /* new components: state still changes, it just doesn't animate */
  .hero-photo img { transform: none !important; transition: none !important; }
  .gov-strip, .vote-tabs button, .vote-panel, .news-item, .news-item .read svg,
  .qa .qi, .qa .qa-a, .qa .qa-a p, .qa::after,
  .js .qa .qa-a, .js .qa .qa-a p { transition: none !important; }
  .js .qa.open .qa-a p, .qa.open .qa-a p { opacity: 1; transform: none; }
}