/* ============================================================
   DJAGBLETEY — Frank Quarshie for Ada
   Design system v4: refined palette + modern type pairing.
   White ground, green content, red action stays the structure (v3,
   matching johnmahama.org) — this pass swaps the exact colours and
   fonts for a calmer, more premium set:
     deep green #006B3F · warm red #D62828 · off-white #F7F7F7 · charcoal #1E1E1E
   ============================================================ */

:root{
  --black:      #0a0b0b;   /* party black — logo/footer/ticker bands, not text */
  --black-2:    #111314;
  --white:      #ffffff;

  --ink:        #f7f7f7;   /* off-white body ground, not stark white (name kept for existing refs) */
  --ink-2:      #eeeeee;
  --green-deep: #006b3f;   /* deep party green — headings, 6.2:1 on off-white */
  --green:      #006b3f;   /* base party green — the site's primary content colour */
  --green-lit:  #087846;   /* a touch brighter for small accents, 5.2:1 on off-white */
  --red:        #d62828;   /* warm NDC red — reserved for CTAs and accent bands */
  /* --red-lit is the eyebrow/label/stat-number colour used everywhere, so its
     default must be legible on off-white — the bright #e05e5e only comes back
     inside .ticker/.footer, which re-declare it for their dark ground. */
  --red-lit:    #a01e1e;
  --red-deep:   #a01e1e;   /* red as it reads on off-white — darkened off the base for contrast */

  /* Ghana flag — kept accurate to the flag itself, independent of party colour */
  --gh-red:     #ce1126;
  --gh-gold:    #fcd116;
  --gh-green:   #006b3f;

  /* Neutrals — charcoal text on off-white */
  --charcoal:   #1e1e1e;
  --paper:      #fbf9f6;
  --paper-dim:  #eef0ee;
  --muted:      rgba(30,30,30,.72);      /* 6.3:1 on off-white */
  --muted-2:    rgba(30,30,30,.68);      /* 5.6:1 on off-white */

  /* Cards — solid white, lifted with shadow rather than translucent glass.
     Backdrop-blur "frosted glass" is a dark-theme trick: it reads as depth
     against a busy dark field. On flat white there is nothing to blur, so
     cards are real white surfaces with a border and a soft shadow instead. */
  --glass:        #ffffff;
  --glass-strong: #ffffff;
  --glass-line:   rgba(10,11,11,.10);
  --glass-line-2: rgba(10,11,11,.16);
  --blur:         none;

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  /* Type — modern political-grade pairing:
     serif (accent) = the slogan and pull quotes only, not section headings
     display (headings/UI) = Montserrat, everywhere a heading or label sits
     body = Lato, all reading copy */
  --ff-serif:   "Merriweather", Georgia, "Times New Roman", serif;
  --ff-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shell: min(1180px, 92vw);
  --nav-h: 72px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* scroll-padding-top keeps anchored targets clear of the fixed nav. Without
   it every in-page link — the nav itself, the new About Ada -> Charter card
   links, "See where each one stands" — drops the target underneath the nav
   pill. Nav is --nav-h tall sitting 14px from the top, plus breathing room. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 34px); }

body{
  margin:0;
  background:#f7f7f7;
  color:#1e1e1e;
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.78;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

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

/* ---------- Layout ---------- */
.shell{ width:var(--shell); margin-inline:auto; position:relative; z-index:2; }
section{ position:relative; z-index:2; padding:clamp(72px,7vw,108px) 0; }

/* ============================================================
   "LIGHT" SECTIONS — now just a faint tint band
   White is the page default now (see :root), so .sec-light no longer means
   "the white section" — every section is white. It survives as a very faint
   off-white band on two sections ("The Candidate", "Be ready") purely for
   rhythm, the way the reference site occasionally runs a light-grey band
   between white ones. The old arc-cut border-radius trick is gone: that
   only read as "a cut between two colours" when there WAS a colour
   difference either side of it. Against white on white it would just be
   a floating capsule shape with no reason to exist.
   ============================================================ */
.sec-light{
  background:var(--ink-2);   /* #eeeeee — a hair off the page's own off-white */
}
/* Cards still lift off the tint with a real shadow. */
.sec-light .glass{
  box-shadow:0 1px 0 rgba(255,255,255,1) inset, 0 18px 44px -26px rgba(10,11,11,.16);
}
.sec-light .check li.done .box{ background:linear-gradient(160deg,var(--red),var(--red-deep)); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-display); font-size:11.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red-lit);
  margin:0 0 20px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--red)); }

h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:800; letter-spacing:-.035em; line-height:1.03; margin:0; }

/* Serif is the accent voice now — the slogan (h1) and pull quotes only.
   Section headings (h2) moved to the sans display face: modern political
   sites lead with a confident sans headline and save serif for the one or
   two moments meant to sound spoken rather than announced. */
h1,.cand blockquote{
  font-family:var(--ff-serif);
  font-weight:900;
  letter-spacing:-.02em;   /* serif needs far less negative tracking than the sans */
}
/* Section headings are green by default — the site's primary content
   colour, same role green plays on the reference site. Card titles (h3)
   stay near-black: they're information you scan, not a section statement,
   and an all-green page stops reading as a deliberate choice. */
h2{ font-size:clamp(34px,5vw,60px); line-height:1.14; letter-spacing:-.03em; color:var(--green-deep); }
/* Sans stays on card titles — they're information, not statement */
h3{ font-size:clamp(21px,2.4vw,27px); letter-spacing:-.028em; line-height:1.26; }
.lede{ font-size:clamp(17px,1.7vw,20px); color:var(--muted); max-width:62ch; line-height:1.82; }

/* Inline text link — underlined, because a colour change alone is not an
   affordance for anyone who can't distinguish it from the body copy. */
.inline-link{
  color:var(--green-deep); font-weight:700; white-space:nowrap;
  border-bottom:1px solid rgba(0,107,63,.4); transition:color .3s, border-color .3s;
}
.inline-link:hover{ color:var(--red-lit); border-color:var(--red-lit); }

/* ---------- Glass primitives ---------- */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:24px;
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:
    0 1px 0 rgba(255,255,255,.09) inset,
    0 22px 60px -28px rgba(0,0,0,.85);
  position:relative;
  overflow:hidden;
}
/* Specular top edge — a dark-glass trick (a highlight catching light on a
   frosted panel over a busy dark field). Every section is white now,
   including the hero, so it's off everywhere — nothing re-enables it. */
.glass::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  opacity:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px; border:1px solid transparent;
  font-family:var(--ff-display); font-weight:700; font-size:15px; letter-spacing:-.01em;
  cursor:pointer; transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .35s;
  white-space:nowrap;
  position:relative; overflow:hidden; isolation:isolate;
}
/* Light sweeps across on hover */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:translateX(-101%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transition:transform .85s var(--ease);
}
.btn:hover::after{ transform:translateX(101%); }
.btn-outline::after{ background:linear-gradient(100deg,transparent,rgba(224,94,94,.28),transparent); }
.btn:active{ transform:scale(.97); }
.btn-red{
  background:linear-gradient(160deg,var(--red) 0%,var(--red-deep) 100%);
  color:#fff;
  box-shadow:0 10px 34px -10px rgba(214,40,40,.75), 0 1px 0 rgba(255,255,255,.5) inset;
}
.btn-red:hover{ transform:translateY(-2px); box-shadow:0 18px 46px -12px rgba(214,40,40,.9), 0 1px 0 rgba(255,255,255,.6) inset; }
.btn-glass{
  background:var(--glass-strong); border-color:var(--glass-line-2); color:#fff;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.btn-glass:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

/* Secondary: true outline, so the red primary clearly leads. This button
   appears on both the dark hero and, now, white sections — the old hover
   state was a translucent red tint with hardcoded white text, which read
   fine on a dark backdrop but goes white-text-on-pale-pink on white. Fill
   solid on hover instead: that's white-on-red, correct on any ground. */
.btn-outline{
  background:transparent;
  border-color:var(--red-lit);
  color:var(--red-lit);
}
.btn-outline:hover{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
  transform:translateY(-2px);
}
.btn-block{ width:100%; }

/* Supporting line beneath a CTA pair */
.cta-note{
  display:flex; align-items:center; gap:10px;
  margin:18px 0 0; font-size:13.5px; letter-spacing:.03em;
  color:rgba(255,255,255,.58);   /* ~6:1 on the field — it's copy, not decoration */
  font-style:italic;
}
.cta-note::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--red); box-shadow:0 0 12px rgba(214,40,40,.9);
}

/* ---------- NDC four-band ----------
   Black · red · white · green, in the order they run down the party flag.
   Used as a section rule and accent so all four colours have a job on the
   page rather than only red and green. Ghana's own stripe (below) stays
   separate and accurate — the two are not interchangeable. */
.ndc-band{
  display:flex; height:4px; width:88px; border-radius:4px; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset;
}
.ndc-band i{ flex:1; }
.ndc-band i:nth-child(1){ background:#0a0b0b; }
.ndc-band i:nth-child(2){ background:var(--red); }
.ndc-band i:nth-child(3){ background:var(--white); }
.ndc-band i:nth-child(4){ background:var(--green); }
/* On black the first band would vanish — lift it to a visible graphite. */
.ndc-band i:nth-child(1){ background:#2a2d2e; }
.sec-light .ndc-band i:nth-child(1){ background:#0a0b0b; }
.sec-light .ndc-band i:nth-child(3){ box-shadow:0 0 0 1px rgba(10,11,11,.16) inset; }
.ndc-band.wide{ width:132px; height:5px; }
.ndc-band.center{ margin-inline:auto; }

/* ---------- Ghana stripe ---------- */
.gh-stripe{ display:flex; height:3px; border-radius:3px; overflow:hidden; width:64px; }
.gh-stripe i{ flex:1; }
.gh-stripe i:nth-child(1){ background:var(--gh-red); }
.gh-stripe i:nth-child(2){ background:var(--gh-gold); }
.gh-stripe i:nth-child(3){ background:var(--gh-green); }

/* ---------- NDC party emblem ----------
   Source graphic (images/ndc-emblem.png) is a tall crop, not square —
   aspect-ratio matches its real dimensions (122×149) so it's never
   stretched, and object-fit:cover handles any minor variance. */
.ndc-flag{
  width:24px; aspect-ratio:122/149; object-fit:cover;
  flex:none; display:block; border-radius:6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 2px 7px rgba(0,0,0,.5);
}
.party-badge{ display:inline-flex; align-items:center; }
.party-badge-lg{ margin-top:18px; }
.party-badge-lg .ndc-flag{ width:36px; border-radius:9px; }
.sec-light .ndc-flag,
.hero .ndc-flag{ box-shadow:0 0 0 1px rgba(10,11,11,.18), 0 2px 7px rgba(10,11,11,.28); }

/* ============================================================
   NAV
   ============================================================ */
/* White pill nav, floating over both the dark hero and the white page below
   it — matching the reference's white nav bar and green link colour, while
   keeping this site's floating-pill shape rather than a full-width bar. */
.nav{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  width:var(--shell); z-index:100; border-radius:100px;
  display:flex; align-items:center; gap:18px;
  padding:9px 9px 9px 20px;
  background:rgba(255,255,255,.88); border:1px solid rgba(10,11,11,.08);
  box-shadow:0 10px 34px -18px rgba(10,11,11,.35);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), top .5s var(--ease);
}
.nav.stuck{
  background:rgba(255,255,255,.97); border-color:rgba(10,11,11,.10);
  box-shadow:0 18px 50px -22px rgba(10,11,11,.28), 0 1px 0 rgba(255,255,255,.6) inset;
}
.nav-brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.nav-brand img{ width:34px; height:34px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(214,40,40,.6), 0 4px 14px rgba(10,11,11,.25); }
.nav-brand b{ font-family:var(--ff-display); font-weight:800; font-size:15.5px; letter-spacing:.01em; color:var(--green-deep); }
.nav-brand span{ display:block; font-size:10px; letter-spacing:.19em; text-transform:uppercase; color:var(--red-lit); font-weight:600; }
.nav-links{ display:flex; gap:6px; }
.nav-links a{
  padding:11px 16px; border-radius:100px; font-size:14px; font-weight:700;
  letter-spacing:.01em; color:var(--green-deep);
  transition:color .3s, background .3s, box-shadow .3s, transform .2s var(--ease);
}
/* Hover: a small lift plus a firmer tint reads as "this is pressable",
   not just a colour swap. */
.nav-links a:hover{
  color:var(--green); background:rgba(0,107,63,.09);
  transform:translateY(-1px);
}
/* Active: the current section gets real weight — a solid-tinted pill with
   an inset edge (not a drop shadow) so it reads as pressed-in rather than
   floating, plus the red underline mark carried over from before. */
.nav-links a.active{
  color:var(--green-deep); background:rgba(0,107,63,.13);
  box-shadow:inset 0 0 0 1px rgba(0,107,63,.22), inset 0 1px 3px rgba(0,107,63,.10);
  transform:none;
}
.nav-links a.active::after{
  content:""; display:block; margin:5px auto 0; width:14px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--red-lit));
}
.nav-links .m-cta{ display:none; }   /* mobile-menu CTA — revealed under 900px */
.nav-cta{ padding:11px 22px; font-size:14px; }
/* Secondary to the red "Join the Movement" CTA — outline, smaller, so the
   red button still clearly leads. Hidden under 900px along with nav-cta;
   the mobile dropdown's own CTA and the footer's "Donate" link cover it. */
.nav-donate{ padding:11px 20px; font-size:14px; }
.nav-burger{ display:none; width:42px; height:42px; border-radius:50%; background:rgba(10,11,11,.06); border:1px solid rgba(10,11,11,.14); cursor:pointer; align-items:center; justify-content:center; }
.nav-burger i{ display:block; width:16px; height:1.5px; background:var(--green-deep); position:relative; transition:.4s var(--ease); }
.nav-burger i::before,.nav-burger i::after{ content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--green-deep); transition:.4s var(--ease); }
.nav-burger i::before{ top:-5px; } .nav-burger i::after{ top:5px; }
.nav.open .nav-burger i{ background:transparent; }
.nav.open .nav-burger i::before{ top:0; transform:rotate(45deg); }
.nav.open .nav-burger i::after{ top:0; transform:rotate(-45deg); }

/* ============================================================
   HERO — now white, like every other section. No scoped dark-theme
   token overrides needed any more: white IS the root default, so the
   hero just inherits --muted/--red-lit/--glass etc. same as everywhere
   else.
   ============================================================ */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 24px) 0 44px;
}
/* Same faint corner wash as .sec-light, so the hero doesn't feel like a
   flatter, more clinical white than the rest of the page. */
.hero::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:
    radial-gradient(120% 70% at 8% 0%, rgba(0,107,63,.06), transparent 62%),
    radial-gradient(100% 65% at 100% 100%, rgba(214,40,40,.05), transparent 62%);
}
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:40px; align-items:center; }

.hero-seal{
  width:112px; height:112px; border-radius:50%; object-fit:cover; margin-bottom:18px;
  box-shadow:0 0 0 1px rgba(214,40,40,.55), 0 0 60px -10px rgba(214,40,40,.5), 0 20px 50px -18px rgba(0,0,0,.9);
  animation:sealIn 1.4s var(--ease) both;
}
@keyframes sealIn{ from{ opacity:0; transform:scale(.82) rotate(-14deg); } }

/* Small-caps red kicker — lifted from the campaign seal */
.hero-kicker{
  margin:0 0 18px;
  font-family:var(--ff-serif);
  font-variant-caps:all-small-caps;
  font-weight:700;
  font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.2em;
  line-height:1.3;
  text-wrap:balance;
  background:linear-gradient(100deg,var(--red-lit),var(--red) 55%,#ffd9d2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:fadeUp 1s var(--ease) .18s both;
}
/* Fallback: if all-small-caps isn't honoured, uppercase still reads correctly */
@supports not (font-variant-caps:all-small-caps){
  .hero-kicker{ text-transform:uppercase; font-size:clamp(12px,1.15vw,14.5px); }
}

/* Headline sits in its own soft gradient bloom so it reads as the anchor */
.hero-copy{ position:relative; }
/* Tuned way down from the dark-hero version: a blurred bloom at .40/.17
   opacity read as rich colour glowing on black. The exact same gradient on
   white doesn't glow, it just sits there as a green-and-pink smudge behind
   the headline — so this is a hint of colour, not a light source. */
.hero-copy::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-14%; top:2%; width:96%; height:64%;
  background:
    radial-gradient(ellipse at 34% 44%, rgba(0,107,63,.09), transparent 66%),
    radial-gradient(ellipse at 62% 68%, rgba(214,40,40,.06), transparent 64%);
  filter:blur(56px);
}

.hero h1{
  font-size:clamp(52px,7.7vw,106px);   /* dominant — the eye starts here */
  line-height:1.0;
  letter-spacing:-.024em;
  text-wrap:balance;
}
/* padding lets the "p" descender clear the overflow:hidden mask;
   the negative margin cancels the space it would otherwise add */
.hero h1 .l{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.hero h1 .l > span{ display:block; animation:lineUp 1.15s var(--ease) both; }
.hero h1 .l:nth-child(1) > span{ animation-delay:.12s; }
.hero h1 .l:nth-child(2) > span{ animation-delay:.22s; }
.hero h1 .l:nth-child(3) > span{ animation-delay:.32s; }
@keyframes lineUp{ from{ transform:translateY(102%); } }

.grad-red{
  background:linear-gradient(105deg,var(--red-lit) 0%,var(--red) 42%,#ffd9d2 68%,var(--red) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Stepped down so it supports the headline instead of competing with it */
.hero-sub{
  margin:22px 0 0; max-width:46ch;
  font-size:clamp(15.5px,1.35vw,17.5px); line-height:1.76;
  color:var(--muted);   /* size creates the hierarchy — no need to dim it too */
  animation:fadeUp 1s var(--ease) .5s both;
}
.hero-name{
  margin:24px 0 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  animation:fadeUp 1s var(--ease) .6s both;
}
.hero-name b{ font-family:var(--ff-display); font-size:17px; font-weight:800; letter-spacing:-.02em; }
.hero-name em{ font-style:normal; font-size:13.5px; color:var(--muted-2); letter-spacing:.03em; }

/* Buttons slide in staggered, after the name line */
.hero-actions{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.hero-actions .btn{ animation:slideIn .9s var(--ease) both; }
.hero-actions .btn:nth-child(1){ animation-delay:.70s; }
.hero-actions .btn:nth-child(2){ animation-delay:.80s; }
@keyframes slideIn{ from{ opacity:0; transform:translateX(-26px); } }
.hero .cta-note{ animation:fadeUp 1s var(--ease) .8s both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px); } }

/* Portrait */
.hero-portrait{ position:relative; animation:portraitIn 1.5s var(--ease) .3s both; }
@keyframes portraitIn{ from{ opacity:0; transform:translateY(40px) scale(.96); } }
/* The flag now lives in the photograph itself (images/frank-hero-flag.jpg —
   subject cut out by edge-seeded flood fill and composited onto green/white/
   red). Everything that used to fake that effect in CSS is gone: the band
   backdrop, the outer ring, and the coloured aura. Stacking a CSS glow on
   top of real flag colours only muddied them. */

/* Soft ambient lift so the portrait sits on the page rather than floating —
   neutral, so it never tints the flag behind the subject. */
.portrait-aura{
  position:absolute; z-index:0; pointer-events:none;
  inset:-6% -4% -3%;
  background:radial-gradient(ellipse at 50% 60%, rgba(10,11,11,.16), transparent 68%);
  filter:blur(46px);
}

/* No border. The old 1px red outline sat directly against the photo's grey
   studio backdrop and read as a grey/pink frame line around the image —
   that is the "grey border" this was asked to lose. With the flag now inside
   the photo, any outline just interrupts the colour. Shadow alone lifts it. */
/* Party black frame. This is the fourth NDC colour — the photograph already
   carries green, white and red, so the border completes the set rather than
   just outlining the image.
   Deliberately a real border, not a box-shadow ring: box-sizing is border-box
   globally, so the border grows inward and the element's outer footprint is
   unchanged. A ring would push the visual edge outward into the 40px grid gap
   the hero column was tuned against.
   Note this is NOT a return of the outline removed earlier — that was a 1px
   line sitting against the photo's grey studio backdrop, which read as a grey
   frame. Against the flag colours a deliberate black band reads as intended. */
.portrait-frame{
  position:relative; z-index:1;
  border:10px solid var(--black);
  border-radius:24px;
  overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 40px 90px -34px rgba(10,11,11,.42);
}
/* 50% 6%: the composited hero is framed tighter than the original studio
   file, so it needs less top bias to keep the crown clear. */
.portrait-frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 6%; }
/* Scrim only across the very bottom, sized to the caption card that sits on
   it. It used to run 68% up the frame to lift text off a dark hero; over the
   flag that just greyed out most of the green and red. */
.portrait-frame::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(to top,rgba(10,11,11,.82) 0%,rgba(10,11,11,.35) 45%,transparent 100%);
}
/* This card always sits over a photo + dark scrim (.portrait-frame::after),
   regardless of whether the section around it is light or dark — so unlike
   most text on the page, its colour can't come from inheritance. It briefly
   inherited the page's charcoal text colour when the hero went white, which
   made it nearly unreadable against its own dark backdrop; pinned explicitly
   here instead, the way .kakepami already pins its own white. */
.portrait-tag{
  position:absolute; left:18px; right:18px; bottom:18px; z-index:2;
  padding:16px 20px; border-radius:18px;
  background:rgba(10,11,11,.55); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  color:#fff;
}
.portrait-tag b{ font-family:var(--ff-display); font-size:16px; display:block; letter-spacing:-.02em; color:#fff; }
.portrait-tag span{ font-size:12.5px; color:#8fe6b4; letter-spacing:.04em; }

.kakepami{
  position:absolute; top:22px; right:-16px; z-index:4;
  padding:11px 20px; border-radius:100px;
  background:linear-gradient(160deg,var(--red),var(--red-deep));
  color:#fff; font-family:var(--ff-display); font-weight:800; font-size:14px; letter-spacing:-.01em;
  box-shadow:0 14px 34px -12px rgba(214,40,40,.85);
  animation:bob 4.5s var(--ease-io) infinite;
}
@keyframes bob{ 50%{ transform:translateY(-9px) rotate(-2deg); } }

/* ---------- Ticker ---------- */
/* Solid party black, so the band separates the hero from the page instead of
   being one more translucent layer over the field. */
/* Solid black band — a third small dark accent between the hero and the
   white page. Scoped light-on-dark tokens again: --muted-2 and --green-lit
   default to dark-on-white now, which would be invisible on black. */
.ticker{
  padding:0; border-block:1px solid rgba(255,255,255,.09); background:var(--black); overflow:hidden;
  --muted-2:   rgba(255,255,255,.54);
  --green-lit: #1ca55d;
}
.ticker-track{ display:flex; gap:40px; padding:15px 0; width:max-content; animation:slide 46s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.ticker-track span{ font-family:var(--ff-display); font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); display:flex; align-items:center; gap:40px; white-space:nowrap; }
/* Separators cycle red → white → green, the flag's colour bands, so the
   party palette runs quietly through the marquee. */
.ticker-track span::after{ content:"◆"; color:var(--red); font-size:8px; }
.ticker-track span:nth-child(3n+2)::after{ color:rgba(255,255,255,.85); }
.ticker-track span:nth-child(3n+3)::after{ color:var(--green-lit); }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sec-head{ max-width:760px; margin-bottom:clamp(40px,5vw,64px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow::before{ display:none; }
.sec-head p{ margin:20px 0 0; }

/* ============================================================
   STATS
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
/* Each card is now a link to the commitment that answers it — the section
   claims "every one of those is a policy question" and previously never
   connected to the policy. Whole card is the target, not just the label,
   so it stays a comfortable tap size on a phone. */
.stat{
  padding:28px 26px 24px; border-radius:22px;
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s;
}
.stat:hover{ transform:translateY(-4px); border-color:var(--glass-line-2); }
.stat-tag{
  display:block; margin-bottom:9px;
  font-family:var(--ff-display); font-size:11px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red-lit);
}
/* Was a numeral slot: clamp(30px,3.6vw,42px) with tabular-nums and -.045em
   tracking. But it holds place names, and at 42px "Asafotufiami" measured
   254px inside a 231px content box — a single word, so it cannot wrap, and
   .glass clips overflow. The name was being cut off on every desktop load.
   Sized to the h3 card-title scale, which is what this component actually
   is; the red accent moved up to .stat-tag so the hierarchy still reads. */
.stat b{
  display:block; font-family:var(--ff-display);
  font-size:clamp(21px,2.2vw,26px); font-weight:800; letter-spacing:-.025em;
  line-height:1.2; color:var(--charcoal);
}
.stat p{ margin:10px 0 0; font-size:14px; color:var(--muted); line-height:1.72; }
/* margin-top:auto pins this to the card bottom so the four links align
   across the row regardless of how long each description runs. */
.stat-go{
  margin-top:auto; padding-top:18px;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ff-display); font-weight:700; font-size:13px; color:var(--green-deep);
}
.stat-go i{ font-style:normal; transition:transform .4s var(--ease); }
.stat:hover .stat-go i{ transform:translateX(4px); }

/* ============================================================
   CANDIDATE
   ============================================================ */
.cand{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,4vw,64px); align-items:center; }
.cand h2{ font-size:clamp(38px,5.6vw,68px); }

.cand-media{ position:relative; }
/* Flag rule down the outer edge — green/white/red, the same three colours the
   hero photograph now carries, so the two sections rhyme. This replaces a
   solid red slab that sat offset behind the photo: at this size that read as
   a printing misregistration rather than a design choice, and it fought the
   red CTA buttons directly below it for attention. A thin rule anchors the
   photo just as firmly without competing. */
.cand-media::before{
  content:""; position:absolute; z-index:1;
  left:-14px; top:34px; bottom:34px; width:6px; border-radius:6px;
  /* All four party colours, black leading — the same order it takes on the
     NDC flag itself, where black is the top band. True black is safe here:
     the graphite substitution the .ndc-band motif uses is only needed on
     dark grounds, where real black would vanish. */
  background:linear-gradient(180deg,
    var(--black) 0% 25%, var(--green) 25% 50%, #ffffff 50% 75%, var(--red) 75% 100%);
  box-shadow:0 0 0 1px rgba(10,11,11,.07);
}
/* object-position biased to the top: these portraits have only ~6.7% headroom
   above the head in the source, so a centred cover crop decapitates the subject. */
.cand-media img{
  border-radius:20px; aspect-ratio:4/5; object-fit:cover; object-position:50% 8%;
  /* No border. The 1px light outline sat against this photo's grey studio
     backdrop and read as a second, muddier frame line just inside the real
     edge. Shadow alone separates it from the off-white band. */
  box-shadow:0 34px 70px -30px rgba(10,11,11,.40);
}
/* The linocut is a stencil, not a photograph, so it is contained on a paper-white
   ground rather than cropped to the 4/5 frame — a cover crop would cut off the
   hand the whole composition rests on. Its carved lines are transparent, which is
   why the ground has to be painted here and cannot be left to the section tint.
   height:auto is required: the width/height attributes that keep this from
   shifting layout on load would otherwise beat the frame's aspect-ratio. */
.cand-media .cand-ink{
  width:100%; height:auto; aspect-ratio:4/5;
  object-fit:contain; background:#fff;
}
.cand-badge{
  position:absolute; bottom:18px; left:18px; padding:10px 16px 10px 13px; border-radius:100px;
  display:inline-flex; align-items:center; gap:8px; max-width:calc(100% - 36px);
  z-index:2;
}
.cand-badge-pin{ display:flex; flex:none; color:var(--red-lit); }
.cand-badge span:last-child{ font-size:11.5px; font-weight:700; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- 3R bold anchor ----------
   The campaign's core framework, promoted from a small corner tag to a full
   visual strip — three numbered segments joined by a gradient thread. */
.tri-anchor{ display:flex; gap:0; margin-top:28px; }
.tri-seg{
  flex:1; position:relative; padding:14px 16px 14px 0; text-align:left;
}
.tri-seg + .tri-seg{ padding-left:20px; }
.tri-seg:not(:last-child)::after{
  content:""; position:absolute; top:22px; right:0; width:calc(100% - 4px); height:2px;
  background:linear-gradient(90deg,var(--red),transparent);
}
.tri-no{
  display:block; font-family:var(--ff-display); font-size:12px; font-weight:800;
  letter-spacing:.1em; color:var(--red-lit); margin-bottom:6px;
}
.tri-seg b{
  display:block; font-family:var(--ff-serif); font-weight:900; letter-spacing:-.03em;
  font-size:clamp(19px,2vw,25px);
}

.cand-statement{
  margin:22px 0 0; font-family:var(--ff-serif); font-weight:700; font-style:italic;
  font-size:clamp(19px,2.1vw,25px); line-height:1.42; letter-spacing:-.015em; color:var(--red-lit);
}

.cand blockquote{
  position:relative; margin:30px 0 0; padding:28px 30px 26px 34px; border-radius:20px;
  border-left:2px solid var(--red); overflow:hidden;
  background:linear-gradient(100deg,rgba(214,40,40,.10),transparent);
  font-family:var(--ff-serif); font-size:clamp(18px,2vw,23px); font-weight:700;
  line-height:1.6; letter-spacing:-.012em; font-style:italic;
}
.cand blockquote .qmark{
  position:absolute; top:-18px; left:14px; font-size:96px; line-height:1; font-style:normal;
  font-family:var(--ff-serif); font-weight:900; color:var(--red); opacity:.18;
  pointer-events:none;
}
.cand blockquote cite{ display:block; margin-top:12px; font-family:var(--ff-body); font-size:13px; font-weight:400; font-style:normal; color:var(--muted-2); letter-spacing:.04em; }

.cand-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }

/* ============================================================
   STORY — the full biography, kept deliberately separate from the tight
   .cand intro card above. That card is a hook; this is the read. Long-form
   prose in a narrower measure than .lede's 62ch — at body width it would
   run too many characters per line for a piece this long.
   ============================================================ */
/* Ghosted linocut bleeding off the right edge. The story column is centred at
   680px, so the wider the viewport the further this sits from the text; it grazes
   the column's right edge around 1180px and is dropped entirely below 1080px,
   where it would start sitting under running text rather than beside it.
   #story needs overflow:hidden so the -40px bleed cannot widen the page. */
#story{ position:relative; overflow:hidden; }
#story .shell{ position:relative; z-index:1; }
.story-mark{
  position:absolute; z-index:0; right:-40px; top:50%; transform:translateY(-50%);
  height:min(760px,88%); width:auto; opacity:.08; pointer-events:none;
}
@media (max-width:1080px){ .story-mark{ display:none; } }

.story-body{ max-width:680px; margin-inline:auto; }
.story-body p{ font-size:17px; line-height:1.82; color:var(--muted); margin:0 0 22px; }
.story-body p:last-child{ margin-bottom:0; }

/* Pull-quote for the one line built to be quoted on its own. Serif italic,
   like .cand blockquote, but centred and undecorated — no border or card,
   since it needs to read as a breath in the narrative, not another box. */
.story-quote{
  margin:26px auto 30px; max-width:520px; text-align:center;
  font-family:var(--ff-serif); font-weight:700; font-style:italic;
  font-size:clamp(20px,2.4vw,27px); line-height:1.5; color:var(--green-deep);
}

.story-vision{
  max-width:680px; margin:8px auto 0; padding:30px 36px; border-radius:24px;
  background:var(--glass-strong); border:1px solid var(--glass-line);
}
.vision-list{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:14px; }
.vision-list li{
  position:relative; padding-left:26px; font-size:15.5px; line-height:1.6; color:var(--charcoal);
}
.vision-list li::before{ content:"—"; position:absolute; left:0; color:var(--green); font-weight:700; }

/* The four-line refrain — short enough each line to read as a single
   breath, so no line-height crowding like the paragraphs above. */
.story-refrain{ max-width:560px; margin:32px auto 0; text-align:center; }
.story-refrain p{
  font-family:var(--ff-serif); font-weight:700; font-style:italic;
  font-size:clamp(17px,1.9vw,21px); line-height:1.6; color:var(--charcoal); margin:0;
}

.story-close{
  max-width:560px; margin:26px auto 0; text-align:center;
  font-family:var(--ff-display); font-weight:800; font-size:17px;
  line-height:1.65; color:var(--green-deep);
}

/* Frank speaking in his own voice inside the third-person story. Same
   red-edged treatment as the Candidate quotes so the two read as one
   device, but centred and constrained to the story column. */
.story-quote-signed{
  position:relative; max-width:620px; margin:28px auto; padding:26px 30px 22px 34px;
  border-radius:20px; border-left:2px solid var(--red); overflow:hidden;
  background:linear-gradient(100deg,rgba(214,40,40,.10),transparent);
  font-family:var(--ff-serif); font-size:clamp(17px,1.8vw,21px); font-weight:700;
  font-style:italic; line-height:1.62; letter-spacing:-.012em; color:#1e1e1e;
}
.story-quote-signed .qmark{
  position:absolute; top:-18px; left:14px; font-size:96px; line-height:1; font-style:normal;
  font-family:var(--ff-serif); font-weight:900; color:var(--red); opacity:.18;
}
.story-quote-signed cite{
  display:block; margin-top:16px; font-family:var(--ff-display); font-style:normal;
  font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--muted-2);
}

/* The closing question — the last thing on the page before the Charter. */
.story-ask{
  margin:22px auto 0; text-align:center;
  font-family:var(--ff-serif); font-weight:900; font-style:italic;
  font-size:clamp(26px,3.4vw,40px); line-height:1.2; color:var(--red-deep);
}
.story-ask-cta{ margin-top:18px; display:flex; justify-content:center; }
@media (max-width:560px){
  .story-ask-cta .btn{ width:100%; }
  .story-quote-signed{ padding:26px 24px 22px 28px; }
}

/* ============================================================
   PILLARS
   ============================================================ */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pillar{
  padding:32px 28px 30px; border-radius:24px;
  transition:transform .65s var(--ease), border-color .5s, background .5s;
}
.pillar:hover{ transform:translateY(-6px); border-color:var(--glass-line-2); background:var(--glass-strong); }
.pillar-no{
  font-family:var(--ff-display); font-size:12px; font-weight:800; letter-spacing:.14em;
  color:var(--red); display:block; margin-bottom:18px;
}
.pillar h3{ margin-bottom:12px; }
.pillar p{ margin:0; font-size:14.5px; color:var(--muted); line-height:1.76; }
.pillar ul{ margin:18px 0 0; padding:0; list-style:none; }
.pillar li{ font-size:13.5px; color:var(--muted-2); padding:9px 0 9px 20px; position:relative; line-height:1.66; border-top:1px solid rgba(10,11,11,.09); }
.pillar li::before{ content:""; position:absolute; left:2px; top:17px; width:5px; height:5px; border-radius:50%; background:var(--red); }

/* The four bullets are wrapped in <details> purely so the ≤560px
   breakpoint below can collapse them — that's where 8 full-height cards
   stacked to one column make Charter the single longest section on the
   page. Everywhere else the summary toggle is hidden and the list is
   forced open via the UA stylesheet override below, so desktop and
   tablet render exactly as before — nothing here changes above 560px. */
.pillar-more summary{ display:none; }
.pillar-more:not([open]) > ul{ display:block; }

/* ============================================================
   ACCOUNTABILITY TRACKER ("Hold me to it")
   The Charter claims to be "written to be checked" — this is the
   checking. Deliberately plain: a ledger, not a dashboard. Anything
   that looked like a progress bar or a percentage would imply
   precision the campaign cannot honestly claim.
   ============================================================ */
.pledge-card{
  padding:26px 30px; border-radius:22px; position:relative;
  margin-bottom:28px; max-width:760px;
  display:flex; align-items:center; gap:28px;
}
/* Portrait stamped beside the promise, the way a signature sits on a document.
   .pledge-card-rule is absolutely positioned, so it stays out of this flex row. */
.pledge-mark{ height:200px; width:auto; flex:none; }
.pledge-card-rule{
  position:absolute; left:0; top:22px; bottom:22px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--green),var(--red));
}
.pledge-card p{ margin:0; font-size:15.5px; line-height:1.7; color:var(--muted); }
.pledge-card b{ color:var(--green-deep); font-family:var(--ff-display); font-weight:700; }

.track{ display:flex; flex-direction:column; }
.track-row{
  display:flex; align-items:center; gap:18px;
  padding:20px 4px;
  border-top:1px solid rgba(10,11,11,.12);
}
.track-row:last-child{ border-bottom:1px solid rgba(10,11,11,.12); }
.track-no{
  flex:none; font-family:var(--ff-display); font-weight:800; font-size:13px;
  letter-spacing:.1em; color:var(--red-lit); min-width:26px;
}
.track-main{ flex:1; min-width:0; }
.track-main b{
  display:block; font-family:var(--ff-display); font-weight:700;
  font-size:16.5px; letter-spacing:-.015em; color:var(--charcoal);
}
.track-main small{ display:block; margin-top:3px; font-size:13px; color:var(--muted-2); }

/* Status chip. Colour is earned, not decorative: only a delivered
   commitment gets green. "Not yet begun" stays neutral grey so an
   untouched manifesto can never read as progress at a glance. */
.track-state{
  flex:none; font-family:var(--ff-display); font-weight:700; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:7px 14px; border-radius:100px; white-space:nowrap;
  background:rgba(10,11,11,.06); color:var(--muted-2);
  border:1px solid rgba(10,11,11,.10);
}
[data-state="active"]  .track-state{ background:rgba(214,40,40,.10); color:var(--red-lit);   border-color:rgba(214,40,40,.28); }
[data-state="done"]    .track-state{ background:rgba(0,107,63,.12);  color:var(--green-deep);border-color:rgba(0,107,63,.30); }
[data-state="blocked"] .track-state{ background:rgba(10,11,11,.10);  color:var(--charcoal);  border-color:rgba(10,11,11,.24); }

.track-ask{
  flex:none; font-family:var(--ff-display); font-weight:700; font-size:13px;
  color:var(--green-deep); padding:8px 4px;
  border-bottom:1px solid rgba(0,107,63,.35);
  transition:color .3s, border-color .3s;
}
.track-ask:hover{ color:var(--red-lit); border-color:var(--red-lit); }

.track-note{
  margin:22px 0 0; font-size:13px; color:var(--muted-2); font-style:italic;
}

@media (max-width:720px){
  /* Stack: the row's four parts don't survive a phone width side by side. */
  .track-row{ flex-wrap:wrap; gap:10px 14px; padding:18px 4px; }
  .track-main{ flex:1 1 100%; order:2; }
  .track-no{ order:1; }
  .track-state{ order:1; margin-left:auto; }
  .track-ask{ order:3; padding:6px 0; }
}

/* ============================================================
   PRIORITY RANKER (niche feature)
   ============================================================ */
.ranker{ display:grid; grid-template-columns:1fr .82fr; gap:20px; align-items:start; }
.ranker-pool{ padding:30px; border-radius:26px; }
.ranker-pool > p{ margin:0 0 20px; font-size:14px; color:var(--muted-2); }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  padding:12px 18px; border-radius:100px; cursor:pointer;
  background:rgba(10,11,11,.045); border:1px solid var(--glass-line);
  font-size:14px; font-weight:500; letter-spacing:-.005em;
  transition:transform .45s var(--ease), background .3s, border-color .3s, color .3s;
  display:inline-flex; align-items:center; gap:9px;
}
.chip:hover{ transform:translateY(-2px); background:rgba(10,11,11,.07); border-color:var(--glass-line-2); }
.chip.on{
  background:linear-gradient(160deg,var(--red),var(--red-deep)); color:#fff;
  border-color:transparent; font-weight:700;
  box-shadow:0 10px 26px -10px rgba(214,40,40,.75);
}
.chip .rank{
  width:19px; height:19px; border-radius:50%; display:none;
  background:rgba(42,26,0,.22); font-size:11px; font-weight:800;
  align-items:center; justify-content:center;
}
.chip.on .rank{ display:inline-flex; }

.mandate{ padding:30px; border-radius:26px; position:sticky; top:100px; }
.mandate h4{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--red-lit); margin-bottom:6px; }
.mandate-sub{ font-size:13px; color:var(--muted-2); margin:0 0 22px; }
.mandate-list{ list-style:none; margin:0 0 22px; padding:0; min-height:150px; }
.mandate-list li{
  display:flex; gap:14px; align-items:flex-start; padding:14px 0;
  border-bottom:1px solid rgba(10,11,11,.10);
  animation:fadeUp .55s var(--ease) both;
}
.mandate-list li b{ font-family:var(--ff-display); color:var(--red); font-size:15px; min-width:22px; }
.mandate-list li div{ font-size:14px; line-height:1.5; }
.mandate-list li small{ display:block; color:var(--muted-2); font-size:12.5px; margin-top:3px; }
.mandate-empty{ color:var(--muted-2); font-size:14px; padding:16px 0; line-height:1.6; }
.mandate-bar{ height:4px; border-radius:4px; background:rgba(10,11,11,.09); overflow:hidden; margin-bottom:18px; }
.mandate-bar i{ display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,var(--red),var(--red-lit)); transition:width .7s var(--ease); }

/* ============================================================
   MAP / COMMUNITIES
   ============================================================ */
.comm{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.comm-panel{ padding:30px; border-radius:26px; }
.search{
  display:flex; align-items:center; gap:12px; padding:14px 20px; border-radius:100px;
  background:rgba(10,11,11,.045); border:1px solid var(--glass-line); margin-bottom:18px;
  transition:border-color .35s, background .35s;
}
.search:focus-within{ border-color:rgba(214,40,40,.55); background:rgba(10,11,11,.07); }
.search svg{ flex:none; opacity:.5; }
.search input{ flex:1; background:none; border:0; outline:0; font-size:15px; }
.search input::placeholder{ color:var(--muted-2); }
.comm-list{ max-height:360px; overflow-y:auto; margin:0; padding:0 6px 0 0; list-style:none; }
.comm-list::-webkit-scrollbar{ width:5px; }
.comm-list::-webkit-scrollbar-thumb{ background:rgba(10,11,11,.18); border-radius:5px; }
.comm-item{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px;
  cursor:pointer; transition:background .3s, transform .45s var(--ease);
  border:1px solid transparent;
}
.comm-item:hover{ background:rgba(10,11,11,.05); transform:translateX(4px); }
.comm-item.on{ background:rgba(214,40,40,.14); border-color:rgba(214,40,40,.4); }
.comm-item b{ font-size:15px; font-weight:600; display:block; }
.comm-item small{ font-size:12.5px; color:var(--muted-2); }
.comm-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); flex:none; box-shadow:0 0 12px var(--red); }
.comm-zone{ margin-left:auto; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }

.comm-map{ padding:24px; border-radius:26px; }
.comm-map svg{ width:100%; height:auto; display:block; }
.map-pin{ cursor:pointer; transition:.4s var(--ease); transform-box:fill-box; transform-origin:center; }
.map-pin circle{ transition:.4s var(--ease); }
.map-pin:hover circle, .map-pin.on circle{ r:7; fill:var(--red-lit); }
.map-pin.on{ filter:drop-shadow(0 0 10px rgba(224,94,94,.9)); }
.map-caption{ margin:16px 0 0; font-size:12.5px; color:var(--muted-2); text-align:center; line-height:1.5; }

/* ============================================================
   READINESS CHECKLIST
   ============================================================ */
.ready{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ready-card{ padding:30px 26px; border-radius:24px; }
.ready-card h3{ margin-bottom:16px; font-size:20px; }
.check{ list-style:none; margin:0; padding:0; }
.check li{
  display:flex; gap:13px; align-items:flex-start; padding:13px 0; font-size:14px; color:var(--muted);
  border-top:1px solid rgba(10,11,11,.09); line-height:1.62; cursor:pointer;
  transition:color .3s;
}
.check li:hover{ color:#1e1e1e; }
.check li:first-child{ border-top:0; }
.check .box{
  width:20px; height:20px; border-radius:7px; flex:none; margin-top:1px;
  border:1.5px solid var(--glass-line-2); display:flex; align-items:center; justify-content:center;
  transition:.4s var(--ease);
}
.check .box svg{ opacity:0; transform:scale(.5); transition:.4s var(--ease); }
.check li.done .box{ background:linear-gradient(160deg,var(--red),var(--red-deep)); border-color:transparent; }
.check li.done .box svg{ opacity:1; transform:scale(1); }
.check li.done{ color:var(--muted-2); text-decoration:line-through; text-decoration-color:rgba(214,40,40,.5); }

/* ============================================================
   GALLERY
   ============================================================ */
/* 2/3 cells match the photographs exactly — zero crop, so no head can be clipped. */
.gallery{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.gal{ border-radius:20px; overflow:hidden; position:relative; aspect-ratio:2/3; border:1px solid var(--glass-line); }
.gal img{ width:100%; height:100%; object-fit:cover; object-position:50% 15%; transition:transform 1.1s var(--ease), filter .6s; }
/* The poster is a designed graphic, not a subject — contain it so nothing is cut off. */
.gal-poster img{ object-fit:contain; object-position:50% 50%; background:#0a0b0b; }
.gal-poster:hover img{ transform:none; }
.gal:hover img{ transform:scale(1.06); }
.gal::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,11,11,.75),transparent 55%); pointer-events:none; }
/* Same fix as .portrait-tag: this sits on a photo + dark scrim regardless of
   page theme, so it needs its own colour rather than inheriting the page's
   (now light-mode) text colour. */
.gal figcaption{
  position:absolute; left:16px; bottom:14px; z-index:2; font-size:12.5px; font-weight:600;
  letter-spacing:.02em; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.8);
}

/* ============================================================
   JOIN / PLEDGE
   ============================================================ */
.join{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.join-form{ padding:clamp(28px,3.4vw,40px); border-radius:28px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.f{ margin-bottom:14px; }
.f label{ display:block; font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2); margin-bottom:8px; font-weight:600; }
.f input,.f select,.f textarea{
  width:100%; padding:14px 17px; border-radius:15px;
  background:rgba(10,11,11,.04); border:1px solid var(--glass-line); outline:0;
  font-size:15px; transition:border-color .35s, background .35s;
}
.f input:focus,.f select:focus,.f textarea:focus{ border-color:rgba(214,40,40,.6); background:rgba(10,11,11,.02); }
.f textarea{ resize:vertical; min-height:88px; }
.f select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231e1e1e' stroke-opacity='.5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 17px center; padding-right:42px;
}
.f select option{ background:#fff; color:#1e1e1e; }
.form-note{ font-size:12.5px; color:var(--muted-2); margin:14px 0 0; line-height:1.55; text-align:center; }

.join-side{ display:flex; flex-direction:column; gap:20px; }
.counter{ padding:32px; border-radius:26px; text-align:center; }
.counter b{ display:block; font-family:var(--ff-display); font-size:clamp(46px,6.4vw,72px); font-weight:800; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.counter b span{ color:var(--red-lit); }
.counter p{ margin:6px 0 0; font-size:13.5px; color:var(--muted); letter-spacing:.03em; }
.counter .gh-stripe{ margin:20px auto 0; }

.ways{ padding:30px; border-radius:26px; }
.ways h4{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--red-lit); margin-bottom:18px; }
.way{ display:flex; gap:15px; align-items:center; padding:14px 0; border-top:1px solid rgba(10,11,11,.10); }
.way:first-of-type{ border-top:0; }
.way-ico{ width:40px; height:40px; border-radius:13px; flex:none; display:grid; place-items:center; background:rgba(214,40,40,.14); border:1px solid rgba(214,40,40,.28); }
.way b{ display:block; font-size:14.5px; font-weight:600; }
.way small{ font-size:12.5px; color:var(--muted-2); }

/* ---------- Share card ---------- */
.share{ padding:clamp(28px,3.4vw,40px); border-radius:28px; text-align:center; }
.share canvas{
  width:100%; max-width:400px; border-radius:20px; margin:0 auto 22px;
  border:1px solid var(--glass-line-2); box-shadow:0 30px 70px -30px rgba(0,0,0,.9); display:block;
}
.share-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   SOCIAL LINKS
   ============================================================ */
.socials{ display:flex; flex-wrap:wrap; gap:10px; }
.soc{
  width:46px; height:46px; border-radius:15px; flex:none;
  display:grid; place-items:center; color:var(--muted);
  background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  transition:transform .5s var(--ease), background .35s, color .35s, border-color .35s, box-shadow .5s var(--ease);
}
.soc svg{ width:19px; height:19px; display:block; }
.soc:hover{
  transform:translateY(-3px);
  background:linear-gradient(160deg,var(--red) 0%,var(--red-deep) 100%);
  color:#fff; border-color:transparent;
  box-shadow:0 12px 30px -10px rgba(214,40,40,.8);
}
/* Not configured yet — visible to the team, inert to visitors */
.soc.is-unset{ opacity:.34; border-style:dashed; cursor:not-allowed; }
.soc.is-unset:hover{ transform:none; background:var(--glass); color:var(--muted); border-color:var(--glass-line); box-shadow:none; }

.socials-note{ margin:16px 0 0; font-size:12.5px; color:var(--muted-2); line-height:1.6; max-width:26ch; }

/* Labelled rows */
.soc-rows{ display:flex; flex-direction:column; }
.soc-row{
  display:flex; align-items:center; gap:15px; padding:14px 0;
  border-top:1px solid rgba(10,11,11,.10); transition:transform .45s var(--ease);
}
.soc-row:first-child{ border-top:0; }
.soc-row:hover{ transform:translateX(4px); }
.soc-row-ico{
  width:40px; height:40px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:rgba(214,40,40,.14); border:1px solid rgba(214,40,40,.28); color:var(--red-lit);
}
.soc-row-ico svg{ width:17px; height:17px; display:block; }
.soc-row b{ display:block; font-size:14.5px; font-weight:600; }
.soc-row small{ font-size:12.5px; color:var(--muted-2); }
.soc-row-go{ margin-left:auto; color:var(--muted-2); font-size:15px; transition:color .3s; }
.soc-row:hover .soc-row-go{ color:var(--red-lit); }

/* ============================================================
   FOOTER
   ============================================================ */
/* The footer is the page's other dark bookend, mirroring the hero — a solid
   ground, not the translucent rgba(0,0,0,.28) it used to be over the old
   global dark field. That worked when .field sat behind it everywhere; on
   a white page it would have rendered as a washed-out grey box with the
   root's now-dark --muted text sitting on top of it, unreadable. Same
   scoped-token trick as .hero: every var(--muted)/var(--red-lit) etc.
   inside re-themes for this dark ground automatically. */
.footer{
  padding:80px 0 40px; margin-top:0;
  background:linear-gradient(175deg,#006b3f 0%,#0a1310 62%,#0a0b0b 100%);
  color:#fff;

  --muted:        rgba(255,255,255,.66);
  --muted-2:      rgba(255,255,255,.54);
  --red-lit:      #e05e5e;
  --green-lit:    #1ca55d;
  --glass:        rgba(255,255,255,.07);   /* .soc icon buttons need this to not be solid white */
  --glass-strong: rgba(255,255,255,.12);
  --glass-line:   rgba(255,255,255,.12);
  --glass-line-2: rgba(255,255,255,.20);
  --blur:         saturate(180%) blur(28px);
}
.footer-top{ display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap; margin-bottom:50px; }
.footer-brand{ max-width:340px; }
/* Direct-child combinator: scopes this to the seal photo only, so it can never
   collide with the .ndc-flag image nested one level deeper in .party-badge-lg. */
.footer-brand > img{ width:82px; height:82px; border-radius:50%; margin-bottom:18px; box-shadow:0 0 0 1px rgba(214,40,40,.5); }
.footer-brand p{ font-size:14px; color:var(--muted-2); line-height:1.65; margin:0; }
.footer-cols{ display:flex; gap:56px; margin-left:auto; flex-wrap:wrap; }
.footer-col h5{ font-family:var(--ff-display); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--red-lit); margin:0 0 16px; font-weight:700; }
.footer-col a{ display:block; font-size:14px; color:var(--muted); padding:6px 0; transition:color .3s; }
.footer-col a:hover{ color:var(--red-lit); }
.footer-bot{ display:flex; justify-content:space-between; gap:20px; align-items:center; padding-top:26px; border-top:1px solid rgba(255,255,255,.07); flex-wrap:wrap; }
.footer-bot p{ margin:0; font-size:12.5px; color:var(--muted-2); }

/* ============================================================
   REVEAL
   ============================================================ */
.rv{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s; } .rv-d2{ transition-delay:.16s; }
.rv-d3{ transition-delay:.24s; } .rv-d4{ transition-delay:.32s; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%,140%);
  padding:15px 26px; border-radius:100px; z-index:200;
  background:rgba(10,11,11,.86); border:1px solid rgba(214,40,40,.4);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  font-size:14px; font-weight:500; box-shadow:0 20px 50px -18px rgba(0,0,0,.9);
  transition:transform .7s var(--ease); max-width:88vw; text-align:center;
}
.toast.show{ transform:translate(-50%,0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .pillars{ grid-template-columns:repeat(2,1fr); }
  .ready{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  /* --- Collapsible navigation --- */
  .nav{
    left:14px; right:14px; width:auto; transform:none;
    padding:9px 9px 9px 16px;
  }
  .nav-links{
    position:absolute; top:calc(100% + 10px); left:0; right:0; flex-direction:column; gap:4px;
    padding:14px; border-radius:26px; background:rgba(255,255,255,.98);
    border:1px solid rgba(10,11,11,.10); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    box-shadow:0 26px 60px -24px rgba(10,11,11,.35);
    opacity:0; pointer-events:none; transform:translateY(-10px) scale(.98);
    transform-origin:top center; transition:.45s var(--ease);
  }
  .nav.open .nav-links{ opacity:1; pointer-events:auto; transform:none; }
  /* generous tap targets — 52px tall */
  .nav-links a{ padding:15px 18px; font-size:16px; border-radius:16px; color:var(--green-deep); }
  .nav-links .m-cta{
    display:block; margin-top:8px; text-align:center;
    background:linear-gradient(160deg,var(--red) 0%,var(--red-deep) 100%);
    color:#fff; font-family:var(--ff-display); font-weight:800;
    box-shadow:0 10px 28px -12px rgba(214,40,40,.8);
  }
  .nav-links .m-cta:hover{ color:#fff; }
  .nav-burger{ display:flex; }
  .nav-cta{ display:none; }
  .nav-donate{ display:none; }

  /* --- Portrait stacks under the slogan --- */
  .hero{ padding-top:calc(var(--nav-h) + 28px); }
  .hero-grid{ grid-template-columns:1fr; gap:52px; }
  .hero-portrait{ max-width:400px; margin-inline:auto; width:100%; }

  .cand,.ranker,.comm,.join{ grid-template-columns:1fr; }
  /* Single column: the photo now spans the full gutter-to-gutter width, so a
     rule hanging 14px off its left edge would sit in the page gutter or clip.
     Move it inside the frame. */
  /* Horizontal bar: black leads from the left, the reading-order equivalent
     of leading from the top in the vertical rule above. */
  .cand-media::before{ left:0; top:auto; bottom:0; width:100%; height:6px;
    background:linear-gradient(90deg,
      var(--black) 0% 25%, var(--green) 25% 50%, #ffffff 50% 75%, var(--red) 75% 100%); }
  .cand-badge{ bottom:26px; }
  .mandate{ position:static; }
  .gallery{ grid-template-columns:repeat(2,1fr); }

  /* --- Footer centres once the columns stack --- */
  .footer{ text-align:center; }
  .footer-top{ flex-direction:column; align-items:center; gap:44px; margin-bottom:42px; }
  .footer-brand{ max-width:42ch; }
  .footer-brand > img{ margin-inline:auto; }
  .footer-brand .gh-stripe{ margin-inline:auto; }
  .footer-cols{ margin-left:0; gap:40px 56px; justify-content:center; width:100%; }
  .footer-col{ min-width:132px; }
  .socials{ justify-content:center; }
  .socials-note{ margin-inline:auto; }
  .footer-bot{ flex-direction:column; align-items:center; gap:12px; }
}

@media (max-width:560px){
  /* Full-bleed shell with real gutters — 22px instead of 15px,
     and card padding on top of that gives text room to breathe. */
  :root{ --shell:100%; --nav-h:64px; }
  .shell{ padding-inline:22px; }
  .nav{ left:12px; right:12px; }

  body{ font-size:16px; line-height:1.7; }
  /* Mobile carries 11 full sections in one scroll, so trimmed well below
     the desktop clamp — was 68/72px, was itself already the tightened
     value from the desktop rhythm pass documented in the README. */
  section{ padding:44px 0 48px; }

  /* --- Full-width buttons --- */
  .btn{ width:100%; padding:17px 24px; font-size:15.5px; }
  .hero-actions{ flex-direction:column; gap:11px; }
  .share-actions{ flex-direction:column; }

  /* --- More padding around text --- */
  .stat,.pillar,.ready-card,.ranker-pool,.mandate,
  .comm-panel,.ways,.counter,.join-form,.share,.story-vision{ padding:24px 22px; }
  .comm-map{ padding:20px 16px; }
  .cand blockquote{ padding:22px 20px; }
  .story-body p{ font-size:16px; line-height:1.7; margin-bottom:18px; }
  .portrait-tag{ left:14px; right:14px; bottom:14px; padding:16px 18px; }
  /* 10px against a ~330px-wide frame is proportionally about 60% heavier
     than it reads on desktop — thinned so the frame stays a frame. */
  .portrait-frame{ border-width:7px; border-radius:20px; }

  .lede,.pillar p,.stat p{ line-height:1.68; }
  .sec-head{ margin-bottom:26px; }
  .sec-head p{ margin-top:12px; }
  .pillars{ gap:12px; }
  .pillar{ padding:24px 22px 22px; }
  .vision-list{ gap:11px; }

  /* Re-enable the native <details> collapse at the one width where 8
     full-height cards stacked to a column made Charter the longest
     section on the page (~4,800px). Collapsed by default; the intro
     paragraph (who/why) still always shows, only the bullet "how" list
     is behind the tap. */
  .pillar-more summary{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:16px; padding-top:14px; border-top:1px solid rgba(10,11,11,.09);
    font-size:13.5px; font-weight:700; color:var(--green-deep);
    cursor:pointer; list-style:none;
  }
  .pillar-more summary::-webkit-details-marker{ display:none; }
  .pillar-more summary i{
    font-style:normal; width:22px; height:22px; border-radius:50%; flex:none;
    background:rgba(0,107,63,.10); display:flex; align-items:center; justify-content:center;
    transition:transform .3s var(--ease);
  }
  .pillar-more[open] summary i{ transform:rotate(45deg); }
  .pillar-more:not([open]) > ul{ display:none; }
  .pillar-more ul{ margin-top:14px; }
  .story-refrain{ margin-top:24px; }
  .story-refrain p{ line-height:1.5; }
  .story-quote-signed,.story-quote{ margin:20px auto; }
  /* Drop the decorative rule so a wrapped eyebrow stays flush left */
  .eyebrow{ line-height:1.5; }
  .eyebrow::before{ display:none; }

  .stats,.pillars{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  /* Centre the whole hero intro — it read as accidentally left-aligned
     rather than a deliberate choice at this width. text-align:center on
     .hero-copy handles the seal, kicker, headline and paragraph via
     inheritance/inline content; the flex rows (name, actions, cta-note)
     need their own justify-content since text-align doesn't affect them. */
  .hero-copy{ text-align:center; }
  .hero-seal{ width:108px; height:108px; margin:0 auto 22px; }
  .hero-name{ justify-content:center; }
  .hero-actions{ justify-content:center; }
  .cta-note{ justify-content:center; }
  /* tightened so the kicker holds one line at 375px */
  .hero-kicker{ font-size:13px; letter-spacing:.13em; margin-bottom:14px; }
  .cand-badge{ left:14px; bottom:14px; }
  /* Stack the 3R anchor into a clean vertical list rather than an
     uneven 2+1 wrap — three short rows read better than a cramped row. */
  .tri-anchor{ flex-direction:column; gap:14px; }
  .tri-seg,.tri-seg + .tri-seg{ padding:0 0 14px; border-bottom:1px solid var(--glass-line-2); }
  .tri-seg:last-child{ border-bottom:0; padding-bottom:0; }
  .tri-seg:not(:last-child)::after{ display:none; }
  .tri-seg{ display:flex; align-items:baseline; gap:12px; }
  .tri-no{ margin-bottom:0; }
  .kakepami{ right:8px; top:14px; font-size:12.5px; padding:9px 16px; }
  .pledge-card{ flex-direction:column; align-items:flex-start; gap:18px; }
  .pledge-mark{ height:150px; }
  .footer{ padding:64px 0 36px; }
}

/* Very small handsets only (≤360px). 375px keeps the roomier spacing above. */
@media (max-width:360px){
  .shell{ padding-inline:18px; }
  .stat,.pillar,.ready-card,.ranker-pool,.mandate,
  .comm-panel,.ways,.counter,.join-form,.share{ padding:26px 22px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
}