/* GameChanger Charity — shared brand system (staging replica). Matches gamechangercharity.org:
   Space Mono, #00B073 green, #1C1C1C ink. LIGHT/AIRY type system (display headings weight 400). */
:root{
  --green:#00B073; --green-cta:#009462; --green-deep:#007a50; --green-soft:#e6f7f0; --green-bright:#1fd790;
  --gold:#F5C518;
  --ink:#1C1C1C; --ink-2:#262626; --slate:#333740; --muted:#6b7280; --muted-2:#9aa1aa;
  --paper:#ffffff; --paper-2:#f6f8f7; --line:#e7e9ec; --line-2:#d7dbe0;
  --r:14px; --r-lg:20px; --pill:50px;
  --shadow:0 1px 2px rgba(28,28,28,.06), 0 12px 30px -14px rgba(28,28,28,.18);
  --wrap:1340px;   /* match live's ~1340px content container (was 1100 — read too narrow on wide screens) */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--slate);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.66;font-size:18px}  /* A6: live body is 18px */
::selection{background:#bdf0db}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* A1: live display headings are WEIGHT 400 (light/airy), letter-spacing -.03em. Small UI labels stay bold. */
h1,h2,h3{font-weight:400;letter-spacing:-.03em;color:var(--ink);line-height:1.05;margin:0}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--green-deep);font-weight:700}
.eyebrow.on-dark{color:var(--green)}

/* buttons — A3 #00B073, A4 pill radius + no glow, A5 dark text on green (matches live + ~6:1 contrast) */
.btn{display:inline-block;font-family:inherit;font-weight:800;font-size:15px;border-radius:var(--pill);padding:13px 26px;cursor:pointer;border:0;transition:transform .08s,background .15s,opacity .15s}
.btn:active{transform:translateY(1px)}
.btn-green{background:var(--green);color:var(--ink)}                /* A3 + A5 */
.btn-green:hover{background:var(--green-cta)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}

/* header */
.site-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:14px;height:68px}
.logo{height:38px;width:38px;border-radius:10px;background:var(--green);display:grid;place-items:center;color:var(--ink);font-weight:700;font-size:20px;flex:0 0 auto}
.logo-img{height:34px;width:auto;display:block}
.brand-name{font-weight:700;color:var(--ink);font-size:15px;line-height:1.1;letter-spacing:.02em}
.brand-tag{font-size:10.5px;color:var(--green-deep);letter-spacing:.18em;text-transform:uppercase;margin-top:2px}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav a{font-size:16px;font-weight:500;color:var(--slate);transition:color .15s}   /* C12: 16px/500 */
.nav a:hover,.nav a.active{color:var(--green-deep)}
.nav .btn{padding:9px 20px;font-size:14px}
/* a11y(1.4.3): .nav a{color:slate} was beating .btn-green{color:ink} via specificity,
   rendering the Donate pill's text #333740 on #00B073 = 4.23:1 (fail). Force ink = 6.6:1.
   (White text on green would be 2.56:1 — a worse fail — so dark ink is the accessible choice.) */
.nav a.btn-green,.nav .btn-green{color:var(--ink)}
.navtoggle{display:none}
@media(max-width:900px){
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 22px 16px}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:10px;text-align:center}
  .navtoggle{display:inline-grid;margin-left:auto;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:18px}
}

/* hero / sections — A7 airier rhythm, A2 big light-weight white titles */
.section{padding:104px 0}            /* A7: toward live's airy rhythm */
.section.tight{padding:64px 0}
.dark{background:var(--ink);color:#fff}
.dark h1,.dark h2,.dark h3{color:#fff}
.soft{background:var(--paper-2)}
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;min-height:540px;display:flex;align-items:center;padding:72px 0}
.hero:before{content:"";position:absolute;inset:0;background:
  radial-gradient(640px 320px at 86% -10%,rgba(0,176,115,.30),transparent 60%),
  radial-gradient(520px 320px at -8% 120%,rgba(0,176,115,.16),transparent 60%);pointer-events:none}
.hero-inner{position:relative;max-width:920px}
.hero h1{font-size:clamp(48px,9vw,100px);font-weight:400;color:#fff;letter-spacing:-.03em;line-height:1.04}  /* A2 */
.hero h1 em{font-style:normal;color:var(--green)}
.hero p{margin-top:20px;font-size:clamp(16px,2vw,19px);color:#e8eae9;max-width:56ch}
.hero .cta-row{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}

/* stats band — thin vertical dividers between figures (the live "instrument panel" treatment) */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.stats .stat{padding:6px 44px}
.stats .stat + .stat{border-left:1px solid rgba(255,255,255,.30)}   /* bands are dark site-wide */
.stats .stat:first-child{padding-left:0}
.stats .stat:last-child{padding-right:0}
@media(max-width:620px){
  .stats{grid-template-columns:1fr;text-align:center}
  .stats .stat{padding:20px 0}
  .stats .stat + .stat{border-left:0;border-top:1px solid rgba(255,255,255,.30)}
  .stats .stat:first-child{padding-top:0}
}
/* Stat numerals live on a DARK band site-wide (homepage + all inner pages, matching the live
   brand SoT) → pure --green-bright #1fd790 on #1C1C1C = ~9.7:1, the vivid "Power of Play" look.
   The light-background color below is only a fallback: brand green #00B073 on white is 2.82:1
   (fails even the 3:1 large-text bar), so the fallback is #008556 (Claude Design panel pick:
   4.39:1 on soft / 4.68:1 on white — for LARGE display numerals only, never sub-24px body text). */
/* OUTLINE numerals (transparent fill + green stroke) — matches production's hollow figures.
   currentColor drives the stroke, so the per-context color rules below set the outline color. */
.stat .n{font-size:clamp(32px,4.4vw,48px);font-weight:700;letter-spacing:-.03em;color:#008556;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:2px currentColor;text-stroke:2px currentColor}
.dark .stat .n{color:var(--green-bright)}
.stat .l{font-size:13px;color:var(--muted);letter-spacing:.04em;margin-top:6px}
.dark .stat .l{color:#9aa19c}

/* section heading — A1 light display weight */
.sec-head{max-width:760px;margin-bottom:40px}
.sec-head h2{font-size:clamp(30px,4vw,50px);font-weight:400;margin-top:10px}
.sec-head p{margin-top:14px;color:var(--muted);font-size:16px}
.dark .sec-head p{color:#b9bdba}

/* card grid */
.grid{display:grid;gap:20px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:0 1px 2px rgba(28,28,28,.04);transition:transform .12s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .ico{font-size:26px}
.card h3{font-size:17px;margin-top:12px;font-weight:700}      /* keep small UI labels bold (A1) */
.card p{margin-top:8px;font-size:14px;color:var(--muted)}
.pillar{border-left:4px solid var(--green);padding:6px 0 6px 18px}
.pillar h3{font-size:19px;font-weight:700}
.pillar p{margin-top:8px;color:var(--muted);font-size:14.5px}
/* a11y(1.4.3): on dark bands the muted #6b7280 pillar text was 3.28:1 (needs 4.5). Lighten. */
.dark .pillar p{color:#b9bdba}

/* quote */
.quote{background:#eef9f3;border-radius:var(--r-lg);padding:30px 28px}
.quote p{font-size:18px;color:var(--ink);line-height:1.55}
.quote .who{margin-top:14px;font-size:12.5px;color:var(--green-deep);font-weight:700;letter-spacing:.04em}

/* footer */
.site-foot{background:var(--ink);color:#cdd2ce;padding:54px 0 34px;margin-top:0}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:30px}
/* go 2-up below 900 (matches the nav mobile breakpoint) — the 4-up footer was
   cramped from ~761-900 (Explore col collapsed to ~67px). */
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:480px){.foot-top{grid-template-columns:1fr}}
/* footer column titles (.foot-h, rendered as <h2> for valid heading order — see a11y 1.3.1) */
.site-foot h4,.site-foot .foot-h{color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px;font-weight:700}
/* a11y(2.5.8): padding 7px 0 lifts each footer link target to ≥24px tall */
.site-foot a{display:block;color:#cdd2ce;font-size:14px;padding:7px 0}
.site-foot a:hover{color:var(--green-bright)}
.foot-brand .brand-name{color:#fff}
.foot-note{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#aeb4af;display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between}
/* footer newsletter + social (A9) */
.foot-social{display:flex;gap:12px;margin-top:6px}
.foot-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;font-size:14px;padding:0}
.foot-social a:hover{background:var(--green);color:var(--ink)}
/* Newsletter form: must SHRINK inside its grid track. The 320px max-width + the
   input's default min-width:auto previously forced a rigid 320px footer column,
   which blew the footer past the viewport (horizontal scrollbar site-wide at
   every width <=1280, up to +83px at the 480/768 breakpoints). flex-wrap + the
   input's min-width:0 let it collapse to fit any column. */
.foot-news{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;max-width:min(320px,100%)}
.foot-news input{flex:1 1 150px;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:var(--pill);padding:10px 16px;color:#fff;font-family:inherit;font-size:13px;outline:none}
.foot-news .btn{flex:0 0 auto}
.foot-news input::placeholder{color:#9aa19c}

/* B1 — 8-bit pixel border strip */
.pixel-border{height:14px;background:repeating-linear-gradient(90deg,var(--green) 0 14px,transparent 14px 28px),repeating-linear-gradient(90deg,var(--ink) 14px 28px,transparent 0 14px);background-size:28px 14px;background-repeat:repeat-x}
.pixel-border.on-dark{background:repeating-linear-gradient(90deg,var(--green) 0 14px,transparent 14px 28px),repeating-linear-gradient(90deg,#0f0f0f 14px 28px,transparent 0 14px);background-size:28px 14px;background-repeat:repeat-x}

/* B2 — full-bleed horizontal scrolling marquee bands.
   (Was rotate(-2.2deg) on a viewport-width band — the tilt exposed triangular
   background wedges + visible vertical end-caps at the left/right edges, and the
   gap worsened with viewport width. Horizontal bands are robust at every width.) */
.marquee{overflow:hidden;white-space:nowrap;margin:0;padding:9px 0;border-block:2px solid var(--ink)}
.marquee.green{background:var(--green);color:var(--ink)}
.marquee.gold{background:var(--gold);color:var(--ink)}
.marquee__track{display:inline-block;will-change:transform;animation:marq 26s linear infinite}
.marquee.gold .marquee__track{animation-direction:reverse}
.marquee b{font-weight:700;font-size:clamp(20px,2.6vw,30px);letter-spacing:.02em;padding:0 8px}
.marquee .sep{color:rgba(28,28,28,.5);padding:0 4px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* B4 — soft green gradient "blob" backgrounds */
.has-blobs{position:relative;overflow:hidden}
.has-blobs>.wrap{position:relative;z-index:1}
.blob{position:absolute;border-radius:50%;filter:blur(70px);background:radial-gradient(circle,rgba(0,176,115,.20),transparent 70%);pointer-events:none;z-index:0}

/* B3 — giant pixel-font display words (image-based, from live assets) */
.pixel-word{display:block;margin:0 auto;max-width:min(720px,90%);height:auto}

/* reveal */
.reveal{opacity:0;transform:translateY(12px);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}
.muted{color:var(--muted)}
.center{text-align:center}
.mt8{margin-top:32px}.mt5{margin-top:20px}

/* ===== MIRROR components (production parity) ===== */

/* nav dropdown — "About ▾" (top label itself links to About Us, matching production) */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-top::after{content:"\25BE";font-size:11px;margin-left:5px;color:var(--muted-2)}
.nav-drop-menu{position:absolute;top:100%;left:-12px;min-width:212px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column;z-index:50}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:flex}
.nav-drop-menu a{font-size:15px;font-weight:500;padding:9px 12px;border-radius:8px;white-space:nowrap;border:0}
.nav-drop-menu a:hover,.nav-drop-menu a.active{background:var(--green-soft);color:var(--green-deep)}
@media(max-width:900px){
  .nav-drop{display:block}
  .nav-drop-top::after{display:none}
  .nav-drop-menu{position:static;display:flex;border:0;box-shadow:none;padding:0;min-width:0;background:transparent}
  .nav-drop-menu a{padding:12px 0 12px 18px;border-bottom:1px solid var(--line);border-radius:0}
}

/* footer "Coming soon" newsletter (production shows this in place of a submit button) */
.foot-soon{align-self:center;font-size:13px;color:#9aa19c;font-style:italic;padding:0 4px}

/* logo walls (Partners & Sponsors) — uniform grayscale tiles that lift to color on hover */
.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:center}
@media(max-width:900px){.logo-wall{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.logo-wall{grid-template-columns:repeat(3,1fr)}}
.logo-wall .logo-tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;place-items:center;aspect-ratio:3/2;box-shadow:0 1px 2px rgba(28,28,28,.04)}
.logo-wall .logo-tile img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .15s,opacity .15s}
.logo-wall .logo-tile:hover img{filter:none;opacity:1}

/* "ways to help" cards with CTA (Get-Involved) */
.way{display:flex;flex-direction:column;height:100%}
.way h3{font-size:18px;font-weight:700;margin-top:10px}
.way p{margin-top:8px;font-size:14.5px;color:var(--muted);flex:1}
.way .way-cta{margin-top:14px;font-size:13px;font-weight:700;color:var(--green-deep);letter-spacing:.02em}
.way .way-cta::after{content:" \2192"}

/* advisor bio rows (Board of Advisors) */
.advisor{display:grid;grid-template-columns:160px 1fr;gap:26px;align-items:start;padding:26px 0;border-top:1px solid var(--line)}
.advisor:first-of-type{border-top:0}
.advisor .shot{width:160px;height:160px;border-radius:18px;object-fit:cover;object-position:center top;background:#e7eae8;box-shadow:inset 0 0 0 1px rgba(28,28,28,.05)}
.advisor .shot.initials{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#1fd790 0%,#00B073 55%,#009462 100%);color:#fff;font-weight:700;font-size:50px;letter-spacing:1px;text-shadow:0 1px 2px rgba(6,40,28,.25)}
.advisor .role{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);font-weight:700}
.advisor h3{font-size:22px;font-weight:700;margin-top:6px}
.advisor p{margin-top:10px;font-size:15px;color:var(--slate);line-height:1.6}
@media(max-width:680px){
  .advisor{grid-template-columns:1fr;gap:16px}
  .advisor .shot{width:120px;height:120px}
}

/* blog grid (Media & News) */
.post-card{display:flex;flex-direction:column;height:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 1px 2px rgba(28,28,28,.04);transition:transform .12s,box-shadow .15s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post-card .pc-media{aspect-ratio:16/9;background:var(--paper-2);overflow:hidden}
.post-card .pc-media img{width:100%;height:100%;object-fit:cover}
.post-card .pc-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.post-card .pc-meta{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);font-weight:700}
.post-card h3{font-size:17px;font-weight:700;margin-top:10px;line-height:1.3}
.post-card p{margin-top:10px;font-size:14px;color:var(--muted);flex:1}
.post-card .pc-more{margin-top:14px;font-size:13px;font-weight:700;color:var(--green-deep)}
.pagination{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:40px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:700;color:var(--slate)}
.pagination a:hover{border-color:var(--green);color:var(--green-deep)}
.pagination .cur{background:var(--green);color:var(--ink);border-color:var(--green)}
.pagination .dots{border:0}

/* simple progress meter (General Fundraising) */
.meter{height:14px;border-radius:50px;background:var(--green-soft);overflow:hidden;border:1px solid #bdf0db}
.meter>span{display:block;height:100%;background:linear-gradient(90deg,#1fd790,#00B073);border-radius:50px}
.donation-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.donation-row:last-child{border-bottom:0}
.donation-row .amt{font-weight:700;color:var(--ink)}
.donation-row .when{font-size:12.5px;color:var(--muted)}