/* ============================================================================
   Skiza Laikipia — campaign site stylesheet
   ============================================================================
   Implements the approved Claude Design artboard "index v2" as real CSS.
   The artboard held every rule as an inline style attribute (that is how the
   design canvas works); here they become classes so the page is cacheable,
   overridable, and readable by the next person.

   ── PER-CAMPAIGN THEMING ───────────────────────────────────────────────────
   Everything a DIFFERENT candidate would need to change visually lives in the
   one block marked "CAMPAIGN IDENTITY" below. Swap those values and the whole
   site re-skins: seal, buttons, section grounds, focus rings, everything.
   Nothing outside that block hardcodes a campaign colour — if you find
   yourself typing a hex value further down, add a token instead.
   ========================================================================= */

/* ---------------------------------------------------------- typefaces -- */
/* SELF-HOSTED, deliberately. These used to load from fonts.googleapis.com,
   which sent every visitor's IP address and user-agent to Google on every page
   view — while the privacy policy told those same visitors that the campaign
   collects personal information only when they choose to give it. Serving the
   files ourselves makes that sentence true, and drops two DNS lookups and two
   TLS handshakes from the critical path on a weak connection.

   Both faces are open licence (SIL OFL 1.1): Public Sans, US Web Design
   System; Source Serif 4, Adobe. Variable files — one file covers the whole
   weight range, which is why each block declares a range rather than a single
   weight. Only the latin and latin-ext cuts are kept: English and Kiswahili
   need nothing else, and the vietnamese/cyrillic/greek cuts would be dead
   weight on a phone. 262 KB in total, cached after the first visit. */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ══ CAMPAIGN IDENTITY — the only block a new campaign edits ══ */
  --brand:          #1B6B3A;   /* campaign green — links, seals, primary   */
  --brand-dark:     #14522C;   /* hovers, gradients                        */
  --brand-deep:     #10331E;   /* dark section grounds, footer             */
  --brand-deeper:   #0C2718;   /* countdown digit wells                    */
  --accent:         #C9A227;   /* gold — eyebrows, rules, focus ring       */
  --accent-bright:  #E0B92E;   /* gold on dark grounds                     */
  --action:         #C1272D;   /* donate red — the one "spend money" colour*/
  --action-dark:    #9E1F24;
  --on-brand-1:     #9FC4A8;   /* muted text on the dark green grounds     */
  --on-brand-2:     #C9DCCB;
  --on-brand-3:     #DCE8DD;

  /* ══ Neutrals — shared by every campaign ══ */
  --paper:    #FBFBF9;
  --panel:    #F2F4F0;
  --panel-2:  #EFF3EE;
  --ink:      #17201A;
  --ink-2:    #3A443E;
  --ink-3:    #55605A;
  --line:     #E3E6E0;
  --line-2:   #C6D2C8;
  --line-3:   #DCE5DC;
  --line-4:   #EEF1EC;
  --chip-br:  #D5E1D6;
  --img-bg:   #E3E6E0;

  /* ══ Type ══ */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Public Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  'Courier New', ui-monospace, SFMono-Regular, Courier, monospace;

  /* ══ Rhythm ══ */
  --wrap: 1200px;
  --sec-y: clamp(64px, 9vw, 120px);
  --sec-y-sm: clamp(44px, 6vw, 76px);
}

/* ---------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* the page itself never scrolls sideways */
}
img { max-width: 100%; display: block; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 700; }
p { margin: 0; }

/* One visible focus ring for the whole site — keyboard users must never be
   guessing where they are. Gold reads against both the light paper and the
   dark green grounds. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 20px; padding-right: 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-deep); color: #FFF;
  padding: 14px 20px; border-radius: 0 0 8px 0;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; color: #FFF; }

/* ------------------------------------------------------------- motion -- */
@keyframes kenburns  { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes fadeup    { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroCross { 0% { opacity: 0; } 6% { opacity: 1; } 44% { opacity: 1; } 52% { opacity: 0; } 100% { opacity: 0; } }
@keyframes cdPulse   { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.7; } }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-slide, .hero-kb, .cd-dot, .hero-inner { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { transition-duration: .01ms !important; }
}

/* -------------------------------------------------------------- header -- */
#site-top { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--paper); }
.hdr { background: var(--paper); border-bottom: 1px solid var(--line); }
.hdr-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 20px; min-height: 70px;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); padding: 10px 0; }
.logo-mark {
  width: 42px; height: 42px; flex: 0 0 42px;
  background: linear-gradient(150deg, var(--brand), var(--brand-dark));
  color: var(--accent-bright); display: grid; place-items: center;
  font-family: var(--serif); font-size: 15px; font-weight: 700; border-radius: 8px;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.logo-sub  { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.nav-desktop { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link {
  text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 500;
  padding: 12px; border-radius: 6px;
}
.nav-link:hover { background: var(--panel-2); color: var(--brand); }
.nav-donate {
  text-decoration: none; background: var(--action); color: #FFF;
  font-size: 15px; font-weight: 700; padding: 12px 18px; border-radius: 6px;
  margin-left: 8px; box-shadow: 0 2px 8px rgba(193, 39, 45, .35);
}
.nav-donate:hover { background: var(--action-dark); color: #FFF; }
.nav-team {
  text-decoration: none; color: var(--brand); font-size: 14px; font-weight: 500;
  padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 6px;
  margin-left: 6px; white-space: nowrap;
}
.nav-team:hover { border-color: var(--brand); background: var(--panel-2); }

.nav-hamburger {
  display: none; margin-left: auto; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: none; border: 1px solid var(--line-2);
  border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 22px; line-height: 1;
  font-family: inherit;
}
.nav-mobile { display: none; border-top: 1px solid var(--line); background: var(--paper); }
.nav-mobile-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 6px 16px 18px;
  display: flex; flex-direction: column;
}
.m-link {
  text-decoration: none; color: var(--ink); font-size: 17px; font-weight: 600;
  padding: 15px 6px; border-bottom: 1px solid var(--line-4);
}
.m-donate {
  text-decoration: none; text-align: center; background: var(--action); color: #FFF;
  font-size: 16px; font-weight: 700; padding: 15px; border-radius: 8px; margin-top: 12px;
}
.m-team {
  text-decoration: none; text-align: center; color: var(--brand); font-size: 15px;
  font-weight: 600; padding: 13px; border: 1px solid var(--line-2);
  border-radius: 8px; margin-top: 8px;
}

.mobile-cta, .mobile-cta-spacer { display: none; }

/* The header is fixed, so a spacer of its height keeps the page from starting
   underneath it. campaign.js measures the real height and sets it exactly —
   but the script may never arrive on a bad connection, and then the hero would
   sit under the header. This floor is the 70px header plus its 1px rule; the
   script overrides it the moment it runs. Defined ONCE here: the review found
   three page stylesheets had each copied it, and two of the copies had already
   drifted to a different number. */
#site-top-spacer { min-height: 71px; }

/* The page the reader is on, marked for eyes as well as for screen readers. */
.nav-link[aria-current="page"],
.m-link[aria-current="page"] { color: var(--brand); background: var(--panel-2); }

@media (max-width: 1040px) {
  .nav-desktop { display: none; }
  .nav-hamburger { display: inline-flex; }
  .nav-mobile.open { display: block; }
  .mobile-cta { display: flex; }
  .mobile-cta-spacer { display: block; height: 76px; }

  /* NAVIGATION WITHOUT JAVASCRIPT. Below this width the links live only in the
     panel, which opens by a class campaign.js adds — so if the script fails to
     load (a real outcome on rural 3G, and the reason the review flagged this)
     the visitor had NO navigation at all. Every page marks itself .no-js and
     clears that class in the first line of its <head>; if the class survived,
     the script never ran, so show the panel outright and hide the button that
     would do nothing. */
  .no-js .nav-mobile { display: block; }
  .no-js .nav-hamburger { display: none; }
}

/* ------------------------------------------------- the provisional band -- */
/* Every page carrying sample content shows this, in the reader's own view.
   The review's sharpest finding was that all our warnings lived in HTML
   comments: the pages "marked" their invented captions, costings and event
   times in a layer no visitor can see, while the visible text stated them as
   fact. A warning nobody can read is not a warning. Delete a page's band the
   day its last unverified item is replaced — and delete this rule when the
   last band goes. */
.preview-band {
  background: #FDF6E3;
  border-bottom: 1px solid #E8D9A8;
  color: #6B551A;
}
.preview-band .wrap { padding-top: 14px; padding-bottom: 14px; }
.preview-band p { font-size: 14px; line-height: 1.55; max-width: 90ch; }
.preview-band strong { color: #4A3A05; }

/* ------------------------------------------------- empty content states -- */
/* A section whose content is posted from the campaign's admin screen and has
   nothing in it yet. It says so plainly rather than hiding the section, so the
   campaign can see what is missing and a visitor is not shown a heading with a
   void under it. */
.voices-empty {
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  padding: clamp(28px, 5vw, 44px);
  background: var(--paper);
  max-width: 68ch;
}
.voices-empty p { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.voices-empty p + p { margin-top: 10px; font-size: 15px; color: var(--ink-3); font-style: italic; }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative; overflow: hidden;
  background: var(--brand-deep); color: #FFF;
  min-height: min(88vh, 780px);
  display: flex; align-items: flex-end;
}
/* svh keeps the hero from jumping as a phone's address bar hides/shows */
@supports (height: 100svh) { .hero { min-height: min(88svh, 780px); } }

.hero-imgs { position: absolute; inset: 0; }
.hero-imgs img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.hero-kb    { object-position: center 40%; animation: kenburns 26s ease-in-out infinite alternate; opacity: .9; }
.hero-slide { opacity: 0; animation: heroCross 24s ease-in-out infinite, kenburns 26s ease-in-out infinite alternate; }
.hero-slide-1 { object-position: center 42%; animation-delay: 0s, 0s; }
.hero-slide-2 { object-position: center 32%; animation-delay: 12s, 0s; }
.hero-imgs.paused img { animation-play-state: paused !important; }

.hero-pause {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(16, 51, 30, .55); color: #FFF;
  cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit;
}
.hero-pause:hover { background: rgba(16, 51, 30, .85); }

.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,51,30,.35) 0%, rgba(16,51,30,.55) 45%, rgba(16,51,30,.92) 100%);
}
.hero-inner {
  position: relative; width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(120px, 18vw, 200px) 20px clamp(36px, 5vw, 64px);
  animation: fadeup .9s ease-out both;
}
.eyebrow {
  margin: 0 0 14px; font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 700; color: var(--accent);
}
.eyebrow-bright { color: var(--accent-bright); }
.hero h1 {
  margin: 0 0 14px; font-size: clamp(38px, 6vw, 72px); line-height: 1.05;
  max-width: 16ch; text-wrap: pretty; text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero-sw {
  margin: 0 0 30px; font-size: clamp(16px, 2vw, 20px);
  color: var(--on-brand-3); font-style: italic;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(36px, 6vw, 64px); }
.btn-gold {
  text-decoration: none; background: var(--accent); color: var(--ink);
  font-weight: 700; font-size: 16px; padding: 16px 30px; border-radius: 6px;
  box-shadow: 0 4px 18px rgba(201, 162, 39, .4);
}
.btn-gold:hover { background: var(--accent-bright); color: var(--ink); }
.btn-ghost {
  text-decoration: none; color: #FFF; font-weight: 600; font-size: 16px;
  padding: 15px 30px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 6px;
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #FFF; }

.hero-stats {
  display: flex; gap: clamp(24px, 5vw, 64px); flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 24px;
}
.stat-v {
  font-family: var(--serif); font-size: clamp(26px, 3vw, 36px);
  font-weight: 700; color: var(--accent-bright);
}
.stat-l { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-brand-2); }

/* ----------------------------------------------------------- countdown -- */
.countdown { background: linear-gradient(160deg, var(--brand-dark), var(--brand-deep)); color: #FFF; }
.countdown .wrap { max-width: 1160px; padding-top: clamp(32px, 4.5vw, 52px); padding-bottom: clamp(32px, 4.5vw, 52px); }
.cd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.cd-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--accent-bright); animation: cdPulse 1.4s ease-in-out infinite; }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2.5vw, 28px); }
.cd-card {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(201, 162, 39, .35);
  border-radius: 12px; padding: 16px 20px;
}
.cd-label { flex: 1 1 130px; }
.cd-label h3 { margin: 0 0 2px; font-size: 17px; }
.cd-date { margin: 0; font-size: 11.5px; color: var(--on-brand-1); }
.cd-parts { display: flex; gap: 8px; }
.cd-part {
  min-width: 46px; background: var(--brand-deeper);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px;
  padding: 8px 4px; text-align: center;
}
.cd-n { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--accent-bright); line-height: 1; font-variant-numeric: tabular-nums; }
.cd-u { margin-top: 4px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-brand-1); }

/* -------------------------------------------------------- shared parts -- */
.sec { scroll-margin-top: 90px; }
.sec-pad { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.sec-pad-sm { padding-top: var(--sec-y-sm); padding-bottom: var(--sec-y-sm); }
.h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; }
.lead { color: var(--ink-3); font-size: 17px; line-height: 1.6; }
.body-copy { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.band-tinted { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.cards-3 { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 32px); }
@media (min-width: 760px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.cards-4 { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 640px)  { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards-4 { grid-template-columns: repeat(4, 1fr); } }

/* A photo that fails to load hides itself, leaving the neutral frame behind
   rather than a broken-image icon. See campaign.js. */
.img-frame { background: var(--img-bg); overflow: hidden; }
img.is-missing { display: none; }

/* --------------------------------------------------------------- about -- */
.about-inner { display: flex; gap: clamp(32px, 5vw, 72px); flex-wrap: wrap; align-items: center; }
.portrait-wrap { flex: 1 1 320px; max-width: 440px; position: relative; }
.portrait {
  aspect-ratio: 4 / 5; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 51, 30, .18);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.portrait-tag {
  position: absolute; left: 14px; bottom: 14px;
  font-family: var(--mono); font-size: 11px; color: #FFF;
  background: rgba(0, 0, 0, .6); padding: 6px 10px; border-radius: 4px;
}
.about-copy { flex: 1.3 1 420px; }
.about-sw { margin: 0 0 20px; font-size: 15px; color: var(--brand); font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-size: 14px; font-weight: 600; color: var(--brand-dark);
  background: var(--panel-2); border: 1px solid var(--chip-br);
  padding: 9px 15px; border-radius: 999px;
}

/* -------------------------------------------------------------- record -- */
.rec { border-left: 2px solid var(--accent); padding-left: 16px; }
.rec-stat { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); font-weight: 700; color: var(--brand-dark); line-height: 1; }
.rec-title { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.rec-body { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); }

/* -------------------------------------------------------------- agenda -- */
.sec-head { max-width: 640px; margin-bottom: 48px; }
.pillar { display: flex; flex-direction: column; }
.pillar-img { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; margin-bottom: 18px; }
.pillar-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pillar-img:hover img { transform: scale(1.05); }
.pillar-num {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: rgba(16, 51, 30, .85); color: var(--accent-bright);
  font-family: var(--serif); font-size: 15px; font-weight: 700;
  padding: 6px 12px; border-radius: 6px;
}
.pillar h3 { margin: 0 0 4px; font-size: 23px; }
.pillar-sw { margin: 0 0 10px; font-size: 13.5px; color: var(--brand); font-style: italic; }
.pillar-body { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--ink-3); }
.pillar-points {
  margin: auto 0 0; padding: 14px 0 0; list-style: none;
  display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--line-4);
}
.pillar-points li { font-size: 14px; color: var(--ink-2); padding-left: 18px; position: relative; line-height: 1.5; }
.pillar-points li::before { content: "\2022"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }

/* --------------------------------------------------------------- quote -- */
.quote { position: relative; overflow: hidden; background: var(--brand-deep); color: #FFF; }
.quote-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; }
.quote-inner { position: relative; max-width: 940px; margin: 0 auto; padding: var(--sec-y) 24px; text-align: center; }
.quote-mark { font-family: var(--serif); font-size: 90px; line-height: .4; color: var(--accent); }
.quote blockquote {
  margin: 22px 0 26px; font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.3; font-weight: 600; text-wrap: pretty;
}
.quote-by { margin: 0; font-size: 15px; color: var(--on-brand-1); }
.quote-by strong { color: var(--accent-bright); }

/* ---------------------------------------------------------------- news -- */
.news-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.all-news { font-size: 15px; font-weight: 600; padding: 12px 0; white-space: nowrap; }
.post { display: flex; flex-direction: column; }
.post-img { display: block; aspect-ratio: 16 / 10; border-radius: 10px; margin-bottom: 16px; }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-img:hover img { transform: scale(1.05); }
.post time { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.post h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.3; }
.post h3 a { text-decoration: none; color: var(--ink); }
.post h3 a:hover { color: var(--brand); }
.post-body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-3); }

/* -------------------------------------------------------------- events -- */
.events-inner { display: flex; gap: clamp(32px, 5vw, 72px); flex-wrap: wrap; }
.events-left { flex: 1 1 300px; max-width: 420px; }
.events-photo { border-radius: 10px; aspect-ratio: 4 / 3; }
.events-photo img { width: 100%; height: 100%; object-fit: cover; }
.events-list { flex: 1.3 1 400px; display: flex; flex-direction: column; align-self: center; }
.ev {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  padding: 22px 4px; border-bottom: 1px solid var(--line);
  border-radius: 8px; transition: background .2s;
}
.ev:hover { background: var(--panel); }
.ev-date {
  flex: 0 0 66px; height: 66px;
  background: linear-gradient(160deg, var(--brand), var(--brand-dark)); color: #FFF;
  border-radius: 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.1;
}
.ev-day { font-family: var(--serif); font-size: 25px; font-weight: 700; }
.ev-month { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-bright); }
.ev-body { flex: 1 1 240px; }
.ev-body h3 { margin: 0 0 3px; font-size: 20px; }
.ev-venue { margin: 0; font-size: 14px; color: var(--ink-3); }
.ev-btn {
  text-decoration: none; color: var(--brand); font-weight: 600; font-size: 15px;
  padding: 12px 20px; border: 1px solid var(--line-2); border-radius: 6px;
}
.ev-btn:hover { background: var(--brand); color: #FFF; border-color: var(--brand); }

/* -------------------------------------------------------------- voices -- */
.voice {
  margin: 0; background: #FFF; border: 1px solid var(--line);
  border-radius: 14px; padding: 28px; display: flex; flex-direction: column;
}
.voice blockquote { margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: #2A332D; text-wrap: pretty; }
.voice figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.voice-av {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 999px;
  background: linear-gradient(150deg, var(--brand), var(--brand-dark));
  color: var(--accent-bright); display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700;
}
.voice-who { line-height: 1.35; display: flex; flex-direction: column; gap: 2px; }
.voice-who strong { font-size: 15px; }
.voice-role { font-size: 13px; color: var(--ink-3); }

/* ----------------------------------------------------------- volunteer -- */
.vol-band { background: var(--panel-2); border-top: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); }
.vol-inner { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.vol-copy { flex: 1 1 420px; }
.vol-copy h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; }
.btn-brand {
  text-decoration: none; background: var(--brand); color: #FFF;
  font-weight: 700; font-size: 17px; padding: 18px 30px; border-radius: 10px; white-space: nowrap;
}
.btn-brand:hover { background: var(--brand-dark); color: #FFF; }

/* ---------------------------------------------------------- contribute -- */
.contribute { position: relative; overflow: hidden; background: var(--brand-dark); color: #FFF; }
.contribute-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; opacity: .16; }
.contribute-inner {
  position: relative; display: flex; gap: clamp(32px, 5vw, 80px);
  flex-wrap: wrap; align-items: center;
}
.contribute-copy { flex: 1 1 380px; }
.contribute-copy h2 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 48px); line-height: 1.12; text-wrap: pretty; }
.contribute-copy p { font-size: 16.5px; line-height: 1.7; color: var(--on-brand-2); max-width: 56ch; }
.paybill {
  flex: 1 1 300px; max-width: 440px;
  background: rgba(16, 51, 30, .75); backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 162, 39, .55); border-radius: 14px;
  padding: 32px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.pb-label { margin: 0 0 4px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-bright); font-weight: 700; }
.pb-number { margin: 0 0 20px; font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: .06em; }
.pb-account { margin: 0 0 24px; font-family: var(--mono); font-size: 19px; }
.btn-donate {
  display: block; text-align: center; text-decoration: none;
  background: var(--action); color: #FFF; font-weight: 700; font-size: 16px;
  padding: 16px 20px; border-radius: 8px; box-shadow: 0 4px 18px rgba(193, 39, 45, .4);
}
.btn-donate:hover { background: var(--action-dark); color: #FFF; }
.pb-note { margin: 14px 0 0; font-size: 12px; color: var(--on-brand-1); line-height: 1.5; }

/* ------------------------------------------------------------- contact -- */
.contact-inner { display: flex; gap: clamp(32px, 5vw, 80px); flex-wrap: wrap; }
.contact-col { flex: 1 1 320px; }
.contact-list { display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 1.55; }
.contact-list strong { font-family: var(--serif); font-size: 17px; }
.contact-list span { color: var(--ink-3); }
.contact-mono { font-family: var(--mono); font-size: 15px; }
.socials { display: flex; flex-direction: column; gap: 10px; }
.social {
  text-decoration: none; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font-size: 15px; font-weight: 500;
}
.social:hover { border-color: var(--brand); background: var(--panel-2); color: var(--ink); }
.social-handle { font-family: var(--mono); color: var(--ink-3); font-size: 13px; }

/* -------------------------------------------------------------- footer -- */
.site-footer { background: var(--brand-deep); color: var(--on-brand-1); font-size: 13px; line-height: 1.65; }
.footer-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 40px 20px;
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
}
.footer-note { margin: 0; max-width: 78ch; }
/* 48px minimum height, not the 45px these came to at 12px padding — one thumb,
   on a cheap phone, in sunlight. */
.footer-team, .footer-legal {
  text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px;
}
.footer-team { color: var(--accent-bright); }
.footer-team:hover { color: var(--accent); }
.footer-legal { color: var(--on-brand-1); margin-right: 22px; }
.footer-legal:hover { color: #FFF; }

/* --------------------------------------------------- mobile action bar -- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  gap: 10px; padding: 10px 14px;
  background: rgba(251, 251, 249, .96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.mc-vol {
  flex: 1; text-align: center; text-decoration: none; font-weight: 700; font-size: 15px;
  color: var(--brand); border: 1px solid var(--brand); padding: 14px; border-radius: 8px;
}
.mc-donate {
  flex: 1; text-align: center; text-decoration: none; font-weight: 700; font-size: 15px;
  background: var(--action); color: #FFF; padding: 15px; border-radius: 8px;
}