/* ============================================================
   Better Aid — advocacy publication
   Palette: dusty sage / powder blue / blush on cool off-white
   Type: Newsreader (display serif) · Source Serif 4 (reading)
         Hanken Grotesk (UI / meta)
   ============================================================ */



:root{
  --paper:#eef2ee;
  --paper-2:#f8faf7;
  --card:#ffffff;
  --ink:#1e2b27;
  --ink-soft:#4c5a54;
  --ink-faint:#7c8880;
  --sage:#6f9e83;
  --sage-deep:#3d6650;
  --sage-wash:#dde9e0;
  --blue:#8fb4c7;
  --blue-deep:#446f85;
  --blue-wash:#dde8ee;
  --blush:#e4b0a8;
  --blush-deep:#c17d74;
  --blush-wash:#f3ddd8;
  --line:rgba(30,43,39,.14);
  --line-soft:rgba(30,43,39,.08);
  --shadow:0 1px 2px rgba(30,43,39,.05), 0 18px 40px -28px rgba(30,43,39,.4);
  --shadow-lg:0 30px 70px -40px rgba(30,43,39,.55);
  --serif:"Newsreader",Georgia,serif;
  --read:"Source Serif 4",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --wrap:1200px;
  --read-col:820px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
::selection{background:var(--sage-deep);color:#fff}
:focus-visible{outline:2.5px solid var(--sage-deep);outline-offset:3px;border-radius:4px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--read);
  font-size:23px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--sage-deep);text-decoration:none}
a:hover{color:var(--blush-deep)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0 0 1.1em;text-wrap:pretty}
ul,ol{margin:0 0 1.1em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700;color:var(--sage-deep)}
.eyebrow.blue{color:var(--blue-deep)}
.eyebrow.blush{color:var(--blush-deep)}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--sans);font-weight:700;font-size:1rem;
  display:inline-flex;align-items:center;gap:.5em;
  padding:.72em 1.4em;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--ink);color:var(--ink);background:transparent;
  transition:.2s;line-height:1;
}
.btn:hover{background:var(--ink);color:var(--paper-2)}
.btn-primary{background:var(--sage-deep);border-color:var(--sage-deep);color:#fff}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-sm{font-size:.86rem;padding:.55em 1.1em}
.arrow{display:inline-flex;align-items:center;gap:.4em;font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--sage-deep)}
.arrow svg{width:1em;height:1em;transition:transform .2s}
.arrow:hover svg{transform:translateX(4px)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(238,242,238,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px clamp(20px,5vw,48px);max-width:1320px;margin:0 auto}
.brand{font-family:var(--serif);font-size:1.7rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);display:inline-flex;align-items:baseline;gap:.12em;white-space:nowrap}
.brand b{font-weight:600}
.brand .a2{color:var(--sage-deep);font-style:italic}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--blush-deep);display:inline-block;margin-left:.15em}
.nav{display:flex;align-items:center;gap:6px;font-family:var(--sans)}
.nav a{color:var(--ink-soft);font-weight:600;font-size:.98rem;padding:.5em .8em;border-radius:8px;transition:.15s}
.nav a:hover{color:var(--ink);background:var(--sage-wash)}
.nav a.active{color:var(--sage-deep)}
.header-cta{margin-left:6px}
.nav-toggle,.nav-toggle-label{display:none}

@media(max-width:900px){
  .header-cta{display:none}
  .nav-toggle-label{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:60}
  .nav-toggle-label span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:.25s}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,320px);
    background:var(--paper-2);flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:2px;padding:88px 22px 40px;
    transform:translateX(100%);transition:transform .3s ease;
    box-shadow:var(--shadow-lg);
  }
  .nav a{font-size:1.15rem;padding:.7em .6em;border-bottom:1px solid var(--line-soft);border-radius:0}
  .nav-toggle:checked ~ .nav{transform:translateX(0)}
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* ============================================================
   HERO (homepage)
   ============================================================ */
.hero{position:relative;padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,90px);overflow:hidden}
.hero:before{content:"";position:absolute;top:-20%;right:-10%;width:60vw;height:120%;background:radial-gradient(closest-side,var(--blue-wash),transparent 70%);opacity:.7;z-index:0}
.hero:after{content:"";position:absolute;bottom:-30%;left:-15%;width:55vw;height:110%;background:radial-gradient(closest-side,var(--blush-wash),transparent 70%);opacity:.55;z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero-kicker{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-deep);background:var(--card);border:1px solid var(--line);padding:.55em 1em;border-radius:999px;box-shadow:var(--shadow)}
.hero h1{font-size:clamp(3rem,8.5vw,6.6rem);font-weight:500;margin:.35em 0 .3em;max-width:14ch;letter-spacing:-.025em}
.hero h1 em{font-style:italic;color:var(--sage-deep)}
.hero-lead{font-size:clamp(1.15rem,2.4vw,1.5rem);max-width:40ch;color:var(--ink-soft);margin-bottom:1.6em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ============================================================
   STAT BAND
   ============================================================ */
.stat-band{background:var(--ink);color:var(--paper-2);padding:clamp(48px,7vw,84px) 0}
.stat-band .eyebrow{color:var(--blush)}
.stat-band h2{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);margin:.3em 0 1.4em;max-width:20ch}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden}
.stat-cell{background:var(--ink);padding:32px 28px}
.stat-cell:nth-child(4n+1){background:#243330}
.stat-num{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.6rem);font-weight:500;line-height:1;color:var(--blush);letter-spacing:-.02em}
.stat-cell:nth-child(2n) .stat-num{color:var(--blue)}
.stat-cell:nth-child(3n) .stat-num{color:var(--sage)}
.stat-label{font-family:var(--sans);font-size:.98rem;line-height:1.45;color:rgba(255,255,255,.78);margin-top:.6em}

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.section{padding:clamp(56px,8vw,108px) 0}
.section.tint{background:var(--paper-2)}
.section.sage{background:var(--sage-wash)}
.section-head{max-width:640px;margin-bottom:clamp(32px,5vw,56px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(2rem,4.6vw,3.1rem);margin:.25em 0 .35em}
.section-head p{color:var(--ink-soft);font-size:1.1rem}
.split-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,52px)}
.split-head h2{font-size:clamp(2rem,4.6vw,3.1rem);max-width:16ch;margin:.2em 0 0}

/* ---------- mission strip ---------- */
.mission{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.mission-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
.mission-block h3{font-size:1.5rem;color:var(--sage-deep);margin-bottom:.35em}
.mission-block p{font-size:1.02rem;color:var(--ink-soft)}
.mission-figure{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5;background:var(--sage-wash)}
.mission-figure img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.mission{grid-template-columns:1fr}.mission-cols{grid-template-columns:1fr}}

/* ============================================================
   CAMPAIGN FEATURE CARDS
   ============================================================ */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.feature-card{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.feature-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--blue-wash)}
.feature-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.feature-card:hover .thumb img{transform:scale(1.05)}
.feature-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.tag{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.feature-card h3{font-size:1.5rem;margin:.5em 0 .4em;letter-spacing:-.015em}
.feature-card h3 a{color:var(--ink)}
.feature-card h3 a:hover{color:var(--sage-deep)}
.feature-card p{font-size:1.02rem;color:var(--ink-soft);margin-bottom:1.1em}
.feature-card .arrow{margin-top:auto}

/* big lead feature */
.lead-feature{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:26px}
.lead-feature .thumb{background:var(--blush-wash);min-height:340px}
.lead-feature .thumb img{width:100%;height:100%;object-fit:cover}
.lead-feature .feature-body{padding:clamp(32px,4vw,56px)}
.lead-feature h3{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.lead-feature p{font-size:1.12rem}
@media(max-width:760px){.lead-feature{grid-template-columns:1fr}.lead-feature .thumb{min-height:240px}}

/* ============================================================
   DISPATCHES (aid talk) — editorial list
   ============================================================ */
.dispatch-list{display:flex;flex-direction:column;gap:0}
.dispatch{display:grid;grid-template-columns:110px 1fr auto;gap:clamp(20px,4vw,48px);align-items:center;padding:30px 0;border-top:1px solid var(--line)}
.dispatch:last-child{border-bottom:1px solid var(--line)}
.dispatch-index{font-family:var(--serif);font-size:2.2rem;color:var(--blush-deep);font-style:italic}
.dispatch-main h3{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:.25em}
.dispatch-main h3 a{color:var(--ink)}
.dispatch-main h3 a:hover{color:var(--sage-deep)}
.dispatch-main p{font-size:1.02rem;color:var(--ink-soft);margin:0;max-width:60ch}
.dispatch-cta{white-space:nowrap}
@media(max-width:720px){
  .dispatch{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .dispatch-index{font-size:1.6rem}
  .dispatch-cta .btn{margin-top:6px}
}

/* ============================================================
   FEATURED STATISTICS CALLOUT
   ============================================================ */
.spotlight{position:relative;border-radius:26px;overflow:hidden;background:linear-gradient(120deg,var(--blue-deep),var(--sage-deep));color:#fff;padding:clamp(40px,6vw,80px);box-shadow:var(--shadow-lg)}
.spotlight .eyebrow{color:rgba(255,255,255,.75)}
.spotlight h2{color:#fff;font-size:clamp(2rem,4.4vw,3.2rem);margin:.3em 0 .5em;max-width:20ch}
.spotlight p{color:rgba(255,255,255,.9);max-width:52ch;font-size:1.1rem}
.spotlight .highlight{font-family:var(--serif);font-size:clamp(3rem,7vw,5rem);font-weight:500;line-height:1;display:block;margin-bottom:.15em}

/* ============================================================
   SPONSOR / PARTNER CARDS
   ============================================================ */
.partner-section{padding:clamp(52px,7vw,96px) 0}
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.partner-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.partner-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.partner-card[data-partner]{padding-top:30px}
.partner-card[data-partner]:before{content:attr(data-partner);position:absolute;top:-14px;left:24px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper-2);font-family:var(--sans);font-weight:700;font-size:.82rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(30,43,39,.25)}
.partner-card[data-partner]:nth-child(3n+1):before{background:var(--sage-deep)}
.partner-card[data-partner]:nth-child(3n+2):before{background:var(--blue-deep)}
.partner-card[data-partner]:nth-child(3n+3):before{background:var(--blush-deep)}
.partner-logo{width:100%;height:64px;border-radius:10px;background:var(--paper);border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px;overflow:hidden}
.partner-logo img{max-width:82%;max-height:70%;object-fit:contain}
.partner-name{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin-bottom:.3em}
.partner-name a{color:var(--ink)}
.partner-name a:hover{color:var(--sage-deep)}
.partner-card p{font-family:var(--read);font-size:1rem;color:var(--ink-soft);margin:0 0 1em}
/* read-more toggle (CSS only) */
.partner-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pt-toggle{position:absolute;opacity:0;pointer-events:none}
.pt-label{font-family:var(--sans);font-weight:700;font-size:.86rem;color:var(--sage-deep);cursor:pointer;user-select:none;margin:-.4em 0 1em;display:inline-block}
.pt-label:hover{color:var(--blush-deep)}
.pt-label .less{display:none}
.pt-toggle:checked + .partner-desc{-webkit-line-clamp:unset;overflow:visible}
.pt-toggle:checked ~ .pt-label .more{display:none}
.pt-toggle:checked ~ .pt-label .less{display:inline}
.partner-card .btn{margin-top:auto;align-self:flex-start}

/* powder-blue variant band for the second sponsor section */
.partner-section.friends{background:var(--blue-wash)}
.partner-section.friends .partner-card{border-color:rgba(68,111,133,.2)}

/* ---------- ranked directory card (campaign directory) ---------- */
.rank-card{display:grid;grid-template-columns:96px 1fr;gap:0}
.rank-num{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;padding:24px;font-family:var(--serif);font-size:2.6rem;font-style:italic}
@media(max-width:600px){
  .rank-card{grid-template-columns:1fr}
  .rank-num{padding:14px;font-size:1.6rem;justify-content:flex-start;padding-left:26px}
}

/* ============================================================
   ARTICLE / POST LAYOUT
   ============================================================ */
.post-hero{padding:clamp(40px,6vw,72px) 0 0}
.crumb{font-family:var(--sans);font-size:.9rem;color:var(--ink-faint);margin-bottom:1.4em;display:flex;flex-wrap:wrap;gap:.5em;align-items:center}
.crumb a{color:var(--ink-soft);font-weight:600}
.crumb span{opacity:.5}
.post-tagline{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:1em}
.pill{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-deep);background:var(--sage-wash);padding:.5em .9em;border-radius:999px}
.post-title{font-size:clamp(2.3rem,5.5vw,4.2rem);max-width:20ch;letter-spacing:-.025em;margin-bottom:.5em}
.post-figure-hero{margin:clamp(28px,4vw,44px) 0 0;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:21/9;background:var(--sage-wash)}
.post-figure-hero img{width:100%;height:100%;object-fit:cover}

.article{max-width:var(--read-col);margin:clamp(40px,6vw,64px) auto;padding:0 clamp(20px,5vw,24px)}
.article > p{margin-bottom:1.2em}
.article .lead{font-size:1.35rem;line-height:1.55;color:var(--ink);font-weight:500}
.article .lead:first-letter,.dropcap:first-letter{
  font-family:var(--serif);float:left;font-size:4.3rem;line-height:.82;font-weight:600;
  padding:.06em .12em 0 0;color:var(--sage-deep);font-style:italic;
}
.article h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:1.6em 0 .5em;letter-spacing:-.015em}
.article h2 .num{font-style:italic;color:var(--blush-deep);margin-right:.35em}
.article h3{font-size:1.5rem;margin:1.3em 0 .4em}
.article a{text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:3px}
.article strong{font-weight:600;color:var(--ink)}

/* in-body figure */
.fig{margin:2.4em 0}
.fig img{width:100%;border-radius:16px;box-shadow:var(--shadow);background:var(--blue-wash);aspect-ratio:16/9;object-fit:cover}
.fig figcaption{font-family:var(--sans);font-size:.92rem;color:var(--ink-faint);margin-top:.7em;padding-left:1em;border-left:2px solid var(--blush)}
.fig.wide{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}
.fig.wide img{border-radius:0;aspect-ratio:21/9}
.fig.wide figcaption{max-width:var(--read-col);margin-left:auto;margin-right:auto;padding-left:0;border:0;text-align:center;margin-top:.9em}
.fig.right{float:right;width:44%;margin:.4em 0 1.4em 2em}
@media(max-width:640px){.fig.right{float:none;width:100%;margin:2em 0}}

/* pull quote */
.pullquote{margin:1.8em 0;padding:.2em 0 .2em 1.2em;border-left:4px solid var(--blush-deep);font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3vw,2rem);line-height:1.32;color:var(--sage-deep)}

/* callout / takeaways / quick facts drawn from article content */
.callout{background:var(--sage-wash);border-radius:18px;padding:28px 32px;margin:2.2em 0;border:1px solid rgba(61,102,80,.18)}
.callout .eyebrow{margin-bottom:.6em;display:block}
.callout p:last-child{margin-bottom:0}
.callout.blue{background:var(--blue-wash);border-color:rgba(68,111,133,.18)}
.callout.blue .eyebrow{color:var(--blue-deep)}

.takeaways{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 34px;margin:2.2em 0;box-shadow:var(--shadow)}
.takeaways .eyebrow{color:var(--blush-deep);display:block;margin-bottom:.7em}
.takeaways h3{font-size:1.5rem;margin-bottom:.6em}
.takeaways ul{list-style:none;padding:0;margin:0}
.takeaways li{font-family:var(--read);font-size:1.08rem;padding:.55em 0 .55em 1.9em;position:relative;border-bottom:1px solid var(--line-soft)}
.takeaways li:last-child{border-bottom:0}
.takeaways li:before{content:"";position:absolute;left:0;top:1.05em;width:11px;height:11px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 4px var(--sage-wash)}

/* styled article lists */
.article ul.styled{list-style:none;padding:0}
.article ul.styled li{position:relative;padding:.35em 0 .35em 1.8em;font-size:1.08rem}
.article ul.styled li:before{content:"→";position:absolute;left:0;color:var(--blush-deep);font-family:var(--sans);font-weight:700}

/* quick facts row */
.quickfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:2.2em 0}
.quickfacts div{background:var(--paper-2);padding:22px}
.quickfacts .qf-num{font-family:var(--serif);font-size:2rem;color:var(--sage-deep);line-height:1}
.quickfacts .qf-lab{font-family:var(--sans);font-size:.9rem;color:var(--ink-soft);margin-top:.4em}

/* info card (real-world enrichment) */
.infocard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 30px;margin:2.2em 0;box-shadow:var(--shadow)}
.infocard .eyebrow{color:var(--blue-deep);display:block;margin-bottom:.5em}
.infocard h3{font-size:1.4rem;margin-bottom:.4em}
.infocard dl{display:grid;grid-template-columns:auto 1fr;gap:.4em 1.4em;font-family:var(--sans);font-size:.98rem;margin:1em 0 0}
.infocard dt{color:var(--ink-faint);font-weight:600}
.infocard dd{margin:0;color:var(--ink)}
.map-embed{margin:1.2em 0 0;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.map-embed iframe{display:block;width:100%;height:280px;border:0;filter:saturate(.9)}

/* conclusion block */
.conclusion{background:var(--ink);color:var(--paper-2);border-radius:20px;padding:clamp(30px,5vw,48px);margin:2.6em 0 0;font-family:var(--serif)}
.conclusion .eyebrow{color:var(--blush);display:block;margin-bottom:.6em}
.conclusion p{font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.4;margin:0;color:#fff}

/* post footer nav */
.post-nav{max-width:var(--read-col);margin:0 auto;padding:2em clamp(20px,5vw,24px) 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line)}
.post-nav a{font-family:var(--sans);font-weight:600;max-width:46%}
.post-nav .lab{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
@media(max-width:600px){.post-nav a{max-width:100%}}

/* related */
.related{background:var(--paper-2);border-top:1px solid var(--line)}

/* ============================================================
   GENERIC PAGE (about, statistics, etc.)
   ============================================================ */
.page-hero{padding:clamp(48px,7vw,96px) 0 clamp(24px,4vw,40px);position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;top:-30%;right:-8%;width:45vw;height:120%;background:radial-gradient(closest-side,var(--sage-wash),transparent 70%);opacity:.8;z-index:0}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);max-width:18ch;letter-spacing:-.025em;margin:.3em 0 .35em}
.page-hero .page-intro{font-size:clamp(1.15rem,2.2vw,1.4rem);color:var(--ink-soft);max-width:44ch}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:820px){.contact-split{grid-template-columns:1fr}}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:clamp(28px,4vw,44px);box-shadow:var(--shadow)}
.contact-row{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line-soft)}
.contact-row:last-child{border-bottom:0}
.contact-ic{width:46px;height:46px;flex:none;border-radius:12px;background:var(--sage-wash);display:flex;align-items:center;justify-content:center;color:var(--sage-deep)}
.contact-ic svg{width:22px;height:22px}
.contact-row h4{font-family:var(--sans);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin:0 0 .2em}
.contact-row .big{font-family:var(--serif);font-size:1.35rem;color:var(--ink)}
.contact-row a.big:hover{color:var(--sage-deep)}
.hours-list{list-style:none;padding:0;margin:0;font-family:var(--sans)}
.hours-list li{display:flex;justify-content:space-between;padding:.5em 0;border-bottom:1px solid var(--line-soft);font-size:1rem}
.hours-list li span:last-child{color:var(--ink-soft)}

/* ============================================================
   STATEMENT FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:var(--paper-2);padding:clamp(60px,9vw,120px) 0 34px;position:relative;overflow:hidden}
.site-footer:before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:80vw;height:90%;background:radial-gradient(closest-side,rgba(111,158,131,.28),transparent 70%);z-index:0}
.site-footer .wrap{position:relative;z-index:1}
.footer-statement{font-family:var(--serif);font-size:clamp(2.1rem,6vw,4.4rem);font-weight:500;line-height:1.08;letter-spacing:-.02em;max-width:18ch;color:#fff}
.footer-statement em{font-style:italic;color:var(--blush)}
.footer-cta{margin:clamp(24px,4vw,40px) 0 clamp(40px,6vw,64px)}
.footer-cta .btn{background:var(--blush);border-color:var(--blush);color:var(--ink)}
.footer-cta .btn:hover{background:#fff;border-color:#fff}
.footer-bar{border-top:1px solid rgba(255,255,255,.16);padding-top:26px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;font-family:var(--sans);font-size:.92rem}
.footer-brand{font-family:var(--serif);font-size:1.35rem;color:#fff}
.footer-brand .a2{color:var(--blush);font-style:italic}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.footer-links a{color:rgba(255,255,255,.78);font-weight:600}
.footer-links a:hover{color:#fff}
.footer-copy{color:rgba(255,255,255,.55);width:100%;font-size:.86rem;margin-top:6px}
@media(max-width:600px){
  .footer-bar{gap:16px}
  .footer-links{gap:6px 16px;font-size:.88rem}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.partner-card > .sponsor{flex:0 0 auto!important}
.partner-card[data-partner]:before{flex-wrap:wrap!important}
.partner-card[data-partner]:before > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.partner-logo{flex-wrap:wrap!important}
.partner-logo > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.partner-grid .partner-card .partner-logo.partner-logo{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important;height:43px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.partner-grid .partner-card .partner-logo.partner-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}
.partner-grid .partner-card .partner-logo.partner-logo{display:block!important;width:100%!important}

/* op-drawer-clip: the mobile nav is position:fixed and parked off-canvas to the RIGHT, so its box
   added its full width to the document's scroll width — the page was hundreds of px wider than the
   phone. overflow-x:clip on the root stops a parked panel contributing to scroll width; `clip`
   rather than `hidden` because hidden creates a scroll container and breaks position:sticky
   elsewhere. Verified per build: the drawer still opens and lands fully on screen. */
/* ⚠️ scoped to phone widths on the operator's instruction: "We basically want to
     desktop grid design to stay as-is ... We are strictly re-working how mobile is
     displaying." the parked off-canvas drawer only exists at phone widths, so the clip has no business at desktop. */
@media (max-width:900px){html,body{overflow-x:clip}}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   3572px at 390, 29% of the whole page. Two columns bring it to
   1943px (46% shorter). Checked before writing: no new overflow, smallest mark still
   91px wide, longest blurb 3 lines, tile heights 293-317px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.partner-grid), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .partner-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px!important}
    .partner-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .partner-grid > * *{min-width:0!important;max-width:100%}
    .partner-grid img,.partner-grid svg{max-width:100%;height:auto}
}

/* op-name-fit: a single long brand word ("Swap.Family" 141px, "TransAngels" 137px at 21.6px) ran past its 99px name box and the tile's border at 360. The name is set a little smaller on narrow phones — min(21.6px, 4.74vw): 17px at 360, Design's 21.6px again from ~456px — so every brand stays WHOLE inside its tile (no mid-word breaks). Money tiles only. */
@media (max-width:640px){
  [data-partner] .partner-name{font-size:min(21.6px,4.74vw)!important}
}
/* op-name-fit:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0px; letter-spacing: -0.01em; text-wrap: balance;}
.feature-card h2:where(.rt-h3){font-size: 1.5rem; margin: 0.5em 0px 0.4em; letter-spacing: -0.015em;}
.feature-card h2:where(.rt-h3) a{color: var(--ink);}
.feature-card h2:where(.rt-h3) a:hover{color: var(--sage-deep);}
.article h2:where(.rt-h3){font-size: 1.5rem; margin: 1.3em 0px 0.4em;}
.infocard h2:where(.rt-h3){font-size: 1.4rem; margin-bottom: 0.4em;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.article > figure.fig > img,
  article.article > figure.fig.right > img,
  article.feature-card > div.thumb > img,
  div.lead-feature > div.thumb > img,
  div.mission > figure.mission-figure > img,
  div.wrap > figure.post-figure-hero > img){height:auto}
/* op-img-dims:end */