/* =========================================================
   Mildheart – v5 layer (dev). Loaded after redesign.css + bold.css.
   Keeps the butterfly version's hero, type and motion; sections are flat full-width
   bands (no cards / boxes), brand colours with fewer saturated blocks stacked together,
   and no glow, glassy gradients, pill badges or generated illustrations.
   Motion = transform + opacity only; none for prefers-reduced-motion; all content visible without JS.
   ========================================================= */
:root{
  --ink:#2A1B3D; --text:#3B2E4A; --muted:#6A607C;
  --pink:#FE80C0; --pink-dark:#CF1F76; --pink-deep:#C0186F; --sky:#5EC1E0; --button-blue:#1A7EFB;
  --cream:#FFF8F1; --blush:#FDEDF4; --mist:#E9F6FB;
  --hair:rgba(42,27,61,.13); --hairline:rgba(42,27,61,.13); --shadow:none; --shadow-lg:none; --radius:8px;
  --grad-hero:var(--pink-dark);
}
body{background:var(--cream);color:var(--text)}
h1,h2,h3,h4{color:var(--ink)}
::selection{background:var(--pink);color:var(--ink)}
.tilt{transform:none!important}

/* ---------- Header ---------- */
.site-header{background:#fff;box-shadow:0 1px 0 var(--hair)}
.menu>li>a:hover,.menu .sub-label:hover{background:var(--blush);color:var(--pink-deep)}
.sub{box-shadow:0 14px 34px rgba(42,27,61,.12);border-color:var(--hair)}
.nav-toggle{background:var(--mist);color:var(--ink)}
.header-cta{background:var(--ink)!important;color:#fff!important;box-shadow:none}

/* ---------- Buttons: navy, pink accent, outlines ---------- */
.btn{box-shadow:none!important;background-image:none;border-radius:999px;font-family:inherit;transition:background-color .2s,color .2s,border-color .2s}
.btn:hover{filter:none}
.btn-pink,.form .btn-blue,.btn-pink.btn-block{background:var(--pink-deep);color:#fff;border-color:var(--pink-deep)}
.btn-pink:hover,.form .btn-blue:hover{background:var(--pink-dark);border-color:var(--pink-dark)}
.btn-navy,.btn-blue,.btn-sky{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-navy:hover,.btn-blue:hover,.btn-sky:hover{background:#3D2A55}
.btn-white,.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-line{background:transparent;color:var(--cream);border:1.5px solid rgba(255,248,241,.75)}
.btn-line:hover{background:var(--cream);color:var(--ink)}
.btn-line-dark{display:inline-flex;align-items:center;gap:.5em;background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:11px 22px;font-size:14px;font-weight:700;text-decoration:none}
.btn-line-dark:hover{background:var(--ink);color:#fff}
.accent-link{color:var(--pink-deep)}

/* ---------- Bands: full-width flat colour, content sits directly on them ---------- */
.band-cream{background:var(--cream)}
.band-white{background:#fff}
.band-blush{background:var(--blush)}
.band-mist{background:var(--mist)}
section[aria-labelledby="learn-explore-title"]{background:var(--mist)}
section[aria-labelledby="learn-explore-title"]::before{display:none}

/* ---------- Type ---------- */
.section-title h2{color:var(--pink-deep);font-size:12px;letter-spacing:.2em}
.section-title .line{background:var(--pink-dark);height:2px;width:36px;border-radius:2px}
.section-title.light h2{color:var(--pink)}
.lead-title,.big-title{color:var(--ink)}
.display-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;color:var(--ink);font-size:clamp(42px,6.2vw,96px);line-height:.94;letter-spacing:.005em;margin:.1em 0 .3em}
.display-title em{font-style:normal;color:var(--pink-dark)}
.big-title.display-title{font-size:clamp(46px,6.4vw,100px)}
.step-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-deep);margin:18px 0 6px}
.step-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink-dark)}
.step-no{font-family:var(--font-display);font-size:30px;line-height:1;color:var(--button-blue);margin:0 0 10px;letter-spacing:.02em}
.hl{position:relative;white-space:nowrap;z-index:0;font-weight:600;color:var(--ink)}
.hl::before{content:"";position:absolute;left:-.1em;right:-.1em;bottom:.08em;height:.42em;border-radius:2px;background:rgba(254,128,192,.32);z-index:-1;transform-origin:left center}
.bold-on .hl::before{transform:scaleX(0);transition:transform .9s var(--ease-out) .1s}
.bold-on .hl.on::before{transform:scaleX(1)}
.dark-bg .hl,.banner .hl{color:#fff}
.pill-new{display:inline-block;vertical-align:.2em;background:var(--pink-deep);color:#fff;font-family:var(--font-body);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:3px 8px;margin-right:4px}

/* ---------- Images sit flat on the band ---------- */
.rounded,.flat-img{border-radius:var(--radius)}
.flat-img{width:100%;height:auto;display:block}
.split img.rounded{box-shadow:none}
.split>div:last-child img.rounded{transform:none}
.split-wide{gap:clamp(32px,6vw,90px)}
.img-pair{display:grid;gap:14px}
.img-pair .ip-main{width:100%;border-radius:var(--radius)}
.img-pair .ip-side{margin:0;display:grid;grid-template-columns:1fr 46%;gap:14px;align-items:end}
.img-pair .ip-side img{grid-column:2;grid-row:1;width:100%;border-radius:var(--radius)}
.img-pair figcaption,.panel-fig figcaption{grid-column:1;grid-row:1;font-size:13px;color:var(--muted);text-align:right;padding-bottom:4px}
.panel-fig{margin:26px 0 0;max-width:340px}
.panel-fig img{width:100%;border-radius:var(--radius)}
.panel-fig figcaption{text-align:left;margin-top:8px}
.center-fig{margin:30px auto 0}
.center-fig figcaption{text-align:center}
.pull{font-family:var(--font-head);font-size:clamp(20px,2.2vw,28px);font-weight:700;line-height:1.3;color:var(--ink);margin:28px auto 0;max-width:680px;border:0;padding:0}
.pull::before{content:"";display:block;width:40px;height:2px;background:var(--pink-dark);margin:0 auto 16px}

/* ---------- Core areas ---------- */
.core-areas.dark-bg{background-color:var(--ink)}
.core-areas.dark-bg::before{background:rgba(42,27,61,.93)}
.core-grid{gap:34px 30px}
.core-item{background:none!important;border:0!important;border-top:1px solid rgba(255,255,255,.22)!important;border-radius:0!important;padding:22px 0 0!important;box-shadow:none!important}
.core-item img{width:48px;height:48px;border-radius:10px;background:#fff;padding:5px;margin-bottom:16px}
.core-item h3{color:#fff}
.dark-bg .learn-more a{color:var(--pink)}
.core-areas.blue-bg{background:var(--mist);color:var(--text)}
.blue-bg .core-item{border-top-color:var(--hair)!important}
.blue-bg .core-item h3,.blue-bg .core-heading{color:var(--ink)}
.blue-bg .section-title.light h2{color:var(--pink-deep)}
.blue-bg .core-item p{color:var(--text)}
.core-heading{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(40px,5.6vw,84px);line-height:.95;letter-spacing:.005em}
.core-heading span{display:block;font-size:inherit;color:var(--pink-dark)}
/* tabs (About core areas) */
.core-tabs-wrap .tablist{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--hair)}
.core-grid.tabbed{display:grid;grid-template-columns:minmax(220px,.8fr) 2fr;gap:44px;align-items:start}
.tab-btn{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:none;border:0;border-left:3px solid transparent;margin-left:-2px;padding:14px 18px;font-family:inherit;font-weight:700;font-size:16px;color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s}
.tab-btn img{width:30px;height:30px;border-radius:8px;background:#fff;padding:3px}
.tab-btn[aria-selected="true"]{color:var(--ink);border-left-color:var(--pink-dark)}
.tab-btn:hover{color:var(--ink)}
.tabbed .core-item{border-top:0!important;padding:0!important}
.tabbed .core-item h3{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:clamp(30px,3.4vw,50px);line-height:1;color:var(--ink)}
.tabbed .core-item p{font-size:18px;line-height:1.7}
.tabbed .core-item[hidden]{display:none}
.tabbed .core-item.enter{animation:v4-in .45s var(--ease-out) both}

/* ---------- Programmes / tools / team: no cards ---------- */
.programme-card,.tool-card,.team-card,.comic-tile,.phase,.info-card,.grey-card,.address-card{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important}
.programme-card{overflow:visible}
.programme-card img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%}
.programme-body{padding:18px 0 0}
.programme-label{background:none;padding:0;border-radius:0;color:var(--pink-deep);letter-spacing:.16em}
.podcast-links a{background:none;border:1.5px solid var(--ink);color:var(--ink);border-radius:999px;height:42px}
.podcast-links a:hover{background:var(--ink);color:#fff}
.flat-tools{grid-template-columns:repeat(5,1fr)}
.tool-card img{border-radius:var(--radius)}
.tool-body{padding:14px 0 0}
.tool-body h3{color:var(--ink)}
.tool-body p{color:var(--muted)}
.tool-card:hover h3{color:var(--pink-deep)}
.team-card{padding:0!important}
.team-card img{border-radius:var(--radius)}
.team-social a{background:var(--ink)}
.team-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(40px,5.6vw,84px);line-height:.95}
.info-card,.grey-card,.address-card{border-top:2px solid var(--ink)!important;padding:22px 0 0!important}
.info-card h3{border-bottom:0}

/* ---------- Engagements (flat rows, chunked text) ---------- */
.engagement-img{box-shadow:none!important;border-radius:var(--radius)}
.engagement-img img{border-radius:var(--radius)}
.chunks{margin:0 0 20px}
.chunks dt{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-deep);margin-top:14px}
.chunks dd{margin:4px 0 0;font-size:16px;line-height:1.65}
.chunks dd.quote{border-left:3px solid var(--pink-dark);padding-left:14px;color:var(--ink);font-weight:500}

/* ---------- 5-year goal banner + figures ---------- */
.banner::before{background:rgba(42,27,61,.9)}
.banner h2{color:var(--cream)}
.banner-text .count-up{color:var(--pink)}
.goal-figs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 48px;margin:34px auto 30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2);max-width:820px}
.goal-figs p{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.goal-figs b{font-family:var(--font-display);font-weight:400;font-size:clamp(40px,4.4vw,60px);line-height:1;color:var(--pink)}
.goal-figs span{font-size:14px;color:rgba(255,248,241,.85)}
.light-figs{justify-content:flex-start;border-top-color:var(--hair);margin:26px 0 0;gap:10px 36px}
.light-figs p{align-items:flex-start}
.light-figs b{color:var(--ink);font-size:clamp(34px,3.4vw,46px)}
.light-figs span{color:var(--muted)}

/* ---------- Events ---------- */
.events-teaser img{box-shadow:none;border-radius:var(--radius)}
.marquee img,.gallery img{border-radius:var(--radius)}
.gal-editorial{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:12px}
.gal-item{display:block;overflow:hidden;border-radius:var(--radius);position:relative}
.gal-item img{width:100%;height:100%!important;object-fit:cover;border-radius:0!important;transition:transform .6s var(--ease-out)}
.gal-item:hover img{transform:scale(1.04)}
.gal-main{grid-column:span 2;grid-row:span 2}
.gal-more{margin-top:28px}
.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;color:#fff}
.lb::backdrop{background:rgba(20,12,30,.92)}
.lb-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 70px}
.lb-img{max-width:100%;max-height:calc(100vh - 150px);border-radius:6px;object-fit:contain}
.lb[open] .lb-img{animation:v4-in .35s var(--ease-out) both}
.lb-cap{margin-top:14px;font-size:14px;color:rgba(255,255,255,.85)}
.lb-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center;font-family:inherit}
.lb-close{top:16px;right:16px}.lb-prev{left:14px;top:50%}.lb-next{right:14px;top:50%}

/* ---------- Call-to-action band (full width, no box) ---------- */
.cta-band{display:grid;grid-template-columns:1.15fr .85fr;background:var(--blush);min-height:440px}
.cta-photo{order:2;background-size:cover;background-position:center}
.cta-in{align-self:center;padding:90px clamp(24px,6vw,96px);max-width:760px;margin:0 0 0 auto}
.cta-in h2{font-family:var(--font-body);font-size:18px;font-weight:500;line-height:1.6;color:var(--text);margin:0 0 26px}
.cta-l1{display:block;font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:clamp(30px,3.4vw,52px);line-height:1;color:var(--ink);margin-bottom:.5em;letter-spacing:.005em}
.cta-band .btn-row{justify-content:flex-start}

/* ---------- Page heroes (other pages): calm navy wash, editorial title ---------- */
.hero::before{background:linear-gradient(105deg,rgba(42,27,61,.9),rgba(42,27,61,.72) 60%,rgba(42,27,61,.55))}
.hero-page{min-height:min(52vh,480px)}
.hero-page .page-title,.page-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;text-decoration:none;font-size:clamp(56px,10vw,150px);line-height:.92;letter-spacing:.005em;color:var(--cream)}
.hero-kicker{background:none;border:0;padding:0;border-radius:0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.kicker{color:var(--pink)}

/* ---------- Projects ---------- */
.comic{background:none!important;box-shadow:none!important;border-radius:0!important;border-top:1px solid var(--hair)!important;padding:30px 0!important;margin:0!important}
.comic-meta li{background:none;padding:0;border-radius:0}
.comic-meta li+li::before{display:inline;content:"·";margin-right:8px}
.comic-head h3 span{color:var(--pink-deep)}
.comic-cover img{border-radius:var(--radius)}
.comics-count{color:var(--pink-deep)}
.comic-tabs{display:flex;gap:6px 26px;flex-wrap:wrap;margin:8px 0 6px;border-bottom:1px solid var(--hair)}
.comic-tab{border:0;border-bottom:3px solid transparent;margin-bottom:-2px;background:none;color:var(--muted);padding:12px 0;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;transition:color .2s,border-color .2s}
.comic-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--pink-dark)}
.comic-tabs+.comics .comic{border-top:0!important}
.comic[hidden]{display:none}
.comic.enter{animation:v4-in .45s var(--ease-out) both}
.comic-info .btn-line-dark{margin-left:10px}
.peek{margin-top:44px;padding-top:34px;border-top:1px solid var(--hair)}
.peek-sub{font-family:var(--font-head);font-weight:800;color:var(--ink);font-size:22px;margin:0 0 4px}
.peek-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:16px}
.peek-item{display:block;border-radius:4px;overflow:hidden;transition:transform .35s var(--ease-out)}
.peek-item:hover{transform:translateY(-4px)}
.peek-item img{width:100%;height:auto;display:block}
.accordion summary{background:none;box-shadow:none;border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:18px 0}
.accordion summary:hover{border-color:var(--pink-dark)}
.progress-ring>div{background:#fff}

/* ---------- Donate ---------- */
.impact{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start;margin:56px 0 30px;padding-top:40px;border-top:1px solid var(--hair)}
.impact-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(34px,3.6vw,54px);line-height:1;color:var(--ink);margin:0 0 12px}
.impact-note{color:var(--muted)}
.impact-card{position:relative}
.impact-list{margin:0;display:grid;gap:10px}
.impact-list div{display:flex;gap:14px;align-items:baseline}
.impact-list dt{font-family:var(--font-display);font-size:26px;color:var(--pink-deep);min-width:80px}
.impact-list dd{margin:0}
.impact-card.enhanced .impact-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ix-amount{font-family:var(--font-display);font-size:clamp(72px,8vw,120px);line-height:.9;color:var(--ink);margin:0}
.ix-text{font-family:var(--font-head);font-size:clamp(19px,1.9vw,24px);font-weight:600;color:var(--ink);min-height:2.7em;margin:10px 0 16px}
.ix-range{width:100%;accent-color:var(--pink-deep);height:32px;cursor:pointer}
.ix-ticks{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--muted);margin-top:4px}
.ix-dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:20px;min-height:84px;align-content:flex-start}
.ix-dots i{width:9px;height:9px;border-radius:50%;background:var(--pink-dark)}
.bold-on .ix-dots i{animation:v4-dot .3s var(--ease-out) both}
.copy-btn{margin-left:8px;border:1px solid var(--hair);background:#fff;color:var(--ink);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.form-section{background:var(--ink)}
.dark-form{box-shadow:none}

/* ---------- Feature pages: lighter widgets ---------- */
.pt-panel,.quiz-card,.notice{box-shadow:none!important;border:1px solid var(--hair)}
.listen-links a{box-shadow:none;border:1.5px solid var(--ink);color:var(--ink);background:none}
.quiz-choice.myth{background:var(--pink-deep)}
.quiz-choice.fact{background:var(--ink)}
.ep-play,.reader-btn{background:var(--pink-deep)}
.reader{background:var(--ink)}
.coming-soon{background:var(--mist)}
.partners img{box-shadow:none;border:0;background:none;padding:0;border-radius:0}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink)}
.site-footer .wave{color:var(--ink)}
.footer-title{color:var(--pink)}
.footer-links a,.footer-address{color:#E4E8F6}
.copyright{color:#C9CFE6;border-top-color:rgba(255,255,255,.14)}
.social-icons a:hover{background:var(--pink-deep)}
.newsletter-form .btn{background:var(--pink-deep)}
.scroll-progress{background:var(--pink-dark)!important}

/* ---------- Ticker (decorative, calm) ---------- */
.ticker{background:var(--cream);color:var(--ink);overflow:hidden;padding:16px 0;white-space:nowrap;border-bottom:1px solid var(--hair)}
.ticker-track{display:inline-flex;gap:26px;align-items:center;font-family:var(--font-display);text-transform:uppercase;font-size:clamp(18px,2vw,26px);letter-spacing:.03em}
.ticker i{font-style:normal;color:var(--pink-dark);font-size:.6em}

@keyframes v4-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes v4-dot{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes v4-tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){.ticker-track{animation:v4-tick 60s linear infinite}.ticker.paused .ticker-track{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){.bold-on .hl::before{transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .flat-tools{grid-template-columns:repeat(3,1fr)}
  .gal-editorial{grid-template-columns:repeat(3,1fr)}
  .peek-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:899px){
  .core-grid.tabbed{grid-template-columns:1fr;gap:24px}
  .core-tabs-wrap .tablist{flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--hair);scroll-snap-type:x mandatory}
  .tab-btn{flex:0 0 auto;width:auto;border-left:0;border-bottom:3px solid transparent;margin:0 0 -1px;padding:10px 12px;font-size:14px;scroll-snap-align:start}
  .tab-btn[aria-selected="true"]{border-bottom-color:var(--pink-dark)}
  .impact{grid-template-columns:1fr;gap:20px}
  .cta-band{grid-template-columns:1fr}
  .cta-photo{order:0;min-height:220px}
  .cta-in{padding:54px 24px 60px;margin:0}
}
@media (max-width:820px){
  .flat-tools{grid-template-columns:1fr 1fr}
}
@media (max-width:699px){
  .gal-editorial{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
        .comic-info .btn-line-dark{margin:10px 0 0}
  .lb-inner{padding:60px 12px}
  .lb-prev,.lb-next{top:auto;bottom:16px}
}
@media (max-width:560px){
  .core-areas .core-grid:not(.tabbed){grid-template-columns:1fr 1fr;gap:22px 16px}
  .core-areas .core-grid:not(.tabbed) .core-item h3{font-size:15px}
  .flat-tools{grid-template-columns:1fr}
  .flat-tools .tool-card{display:grid;grid-template-columns:116px 1fr;gap:14px;align-items:center}
  .flat-tools .tool-body{padding:0}
  .goal-figs{gap:16px 28px}
  .light-figs{gap:14px 26px}
  .img-pair .ip-side{grid-template-columns:1fr 54%}
}

/* paragraphs inside .split were forced to 17px by the base CSS; keep the heading styles */
.split p.big-title{font-size:clamp(34px,4.6vw,56px);line-height:1.05}
.split p.lead-title{font-size:clamp(24px,2.8vw,36px);line-height:1.12}
.split p.step-label{font-size:12px}
.split p.step-no{font-size:30px}
.panel-fig{max-width:300px}
.banner .btn-sky,.banner .btn-light{background:transparent;color:var(--cream);border:1.5px solid rgba(255,248,241,.8)}
.banner .btn-sky:hover,.banner .btn-light:hover{background:var(--cream);color:var(--ink)}
.light-figs{gap:10px 30px}
.light-figs b{font-size:clamp(30px,2.8vw,40px)}

/* =========================================================
   v5: butterfly hero, flat (no glow / grid), smaller butterfly
   ========================================================= */
.hx{background:var(--pink-dark)}
.hx-glow,.hx-grid,.blobs{display:none!important}
.hx-photo{opacity:.2}
.hx-bfly{width:clamp(170px,22vw,360px);margin-top:1%}
.hx-page .hx-bfly{width:clamp(150px,18vw,280px)}
.hx-donate .hx-bfly{position:absolute;width:clamp(120px,13vw,210px);right:4.5vw;top:56px;margin:0}
/* Donate's headline is a long sentence: the butterfly sits in the margin and, when it drifts, flies BEHIND the words */
.hx-donate .hx-front-half{-webkit-clip-path:none;clip-path:none}
.bfly-shadow{opacity:.35}
.hx-actions .btn-ghost.solid{color:var(--pink-deep)}
.wipe,html.wipe-in body::after{background:url(/images/butterfly-ice-sm.webp) center/90px auto no-repeat,var(--pink-dark)}
/* small butterfly next to the big display titles */
.display-title .guide{width:.55em;height:.42em;top:-.42em}
/* page heroes (non-butterfly pages): flat plum wash, no blobs */
.hero::before,.hero-page::before{background:rgba(42,27,61,.8)}
.page-title{text-decoration:none}
/* stats inside the banner are plain figures (bold.css made them gradient text) */
.stat-num{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important}
/* things bold.css boxed that are now flat */
.pull{background:none;border-radius:0;color:var(--ink)}
.chunks dd.quote{background:none;border-radius:0;padding:0 0 0 14px}
.tab-btn,.tab-btn[aria-selected="true"]{box-shadow:none;border-radius:0}
.tab-btn:hover{transform:none}
.comic-tab,.comic-tab[aria-selected="true"]{background:none;border-radius:0}
.comic-tab[aria-selected="true"]{color:var(--ink)}
.peek-item{box-shadow:none}
.peek-item:hover{transform:translateY(-4px)}
.impact{background:none;color:inherit;padding:40px 0 0}
.impact .step-label{color:var(--pink-deep)}
.copy-btn{background:#fff}
.display-title em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--pink-dark)}
.hl::before{background:rgba(254,128,192,.38)}
.step-label::before{background:var(--pink-dark)}
.section-title.light h2{color:var(--pink)}
.banner h2{color:#fff}
.goal-figs b{color:var(--pink)}
.dark-bg .learn-more a{color:var(--pink)}
.kicker,.footer-title{color:var(--pink)}
.site-header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
/* the ticker: cream strip, plum type, plain slashes (no sparkles) */
.ticker i{color:var(--pink-dark);font-size:.8em}
.ticker-track{font-size:clamp(18px,2.2vw,28px)}
/* core areas + banner: flat plum (no gradient overlay) */
.core-areas.dark-bg::before,.banner::before{background:rgba(42,27,61,.92)}
.form-section{background:var(--ink)}
.site-footer{background:var(--ink)}
.site-footer .wave{color:var(--ink)}

/* ---------- Learn & Explore: editorial numbered rows on a flat band ---------- */
.lx .lx-lead{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(36px,5vw,72px);line-height:.95;letter-spacing:.005em;color:var(--ink);margin:.1em 0 .5em;max-width:none}
.lx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.lx-list li{border-bottom:1px solid var(--hair)}
.lx-row{display:grid;grid-template-columns:72px 1fr 200px 40px;gap:28px;align-items:center;padding:22px 0;color:inherit;text-decoration:none}
.lx-no{font-family:var(--font-display);font-size:28px;line-height:1;color:var(--pink-deep)}
.lx-main{display:block}
.lx-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.4vw,50px);line-height:1;letter-spacing:.005em;color:var(--ink);margin:0 0 6px;transition:color .2s}
.lx-text{display:block;font-size:16px;line-height:1.55;color:var(--text);max-width:560px}
.lx-img{width:200px;height:125px;object-fit:cover;border-radius:4px;display:block}
.lx-go{font-size:26px;color:var(--pink-deep);justify-self:end;transition:transform .3s var(--ease-out)}
.lx-row:hover .lx-title{color:var(--pink-deep)}
.lx-row:hover .lx-go{transform:translateX(6px)}
.lx-row:focus-visible{outline:2px solid var(--pink-deep);outline-offset:4px}

/* ---------- CTA band butterfly (small accent) ---------- */
.cta-band{position:relative}
.cta-band .cta-bfly{position:absolute;z-index:2;width:92px;top:26px;left:clamp(24px,6vw,96px);right:auto;opacity:1}

@media (max-width:820px){
  /* phones: the butterfly gets its own row just above the headline (clear of the words, tagline and buttons).
     When it drifts or swoops up on scroll it passes BEHIND the words (every line has a front copy), so they stay fully legible. */
  .hx-stage{grid-template-rows:auto auto;align-content:center;row-gap:6px}
  .hx-stage>.hx-bfly{grid-area:1/1;margin:0 auto}
  .hx-stage>.hx-type{grid-area:2/1}
  .hx .hx-front .ln{visibility:visible}
  .hx-front-half{-webkit-clip-path:none;clip-path:none}
  .hx-bfly{width:40vw}
  .hx-page .hx-bfly{width:38vw}
  .hx-donate .hx-bfly{position:relative;right:auto;top:auto;width:36vw;margin:0 auto}
  .cta-band .cta-bfly{width:60px;top:14px;left:16px}
  .lx-row{grid-template-columns:44px 1fr 104px;gap:14px;padding:18px 0}
  .lx-go{display:none}
  .lx-no{font-size:22px;align-self:start;padding-top:4px}
  .lx-img{width:104px;height:72px}
  .lx-title{font-size:clamp(26px,7vw,36px)}
  .lx-text{font-size:15px}
}
@media (max-width:380px){
  .lx-row{grid-template-columns:34px 1fr 84px;gap:12px}
  .lx-img{width:84px;height:60px}
}
.lx-new{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink-deep);margin:0 0 4px}

/* =========================================================
   Spacing pass: modest, consistent gaps between sections (esp. on phones)
   ========================================================= */
.section{padding:88px 0}
.section-tight{padding:56px 0}
.section:not([class*="band-"])+.section:not([class*="band-"]){padding-top:0}
/* quiz: flat shell, no reserved empty space; the explanation simply appears below the buttons */
.quiz-card{min-height:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:8px 0 0!important;margin:24px 0 0;max-width:720px}
.quiz-feedback{background:none;border:0;border-left:3px solid var(--pink-dark);border-radius:0;padding:4px 0 4px 16px}
.quiz-bar{background:var(--hair)}
/* partners: a flat strip on a white band – label, thin rule, logo */
.partners{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 20px;background:#fff;padding:36px 20px;border-top:1px solid var(--hair)}
.partners-label{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.partners-rule{width:56px;height:1px;background:var(--pink-dark)}
.partners img{width:150px;height:auto}
.site-footer{padding-top:60px}
/* podcast page: studio still leads the intro; the show cover sits beside the title */
.podcast-hero.pod-feature{grid-template-columns:1.1fr 1fr;gap:48px}
.pod-feature img.pod-still{width:100%;height:auto;border-radius:var(--radius);aspect-ratio:16/9;object-fit:cover}
.pod-title{display:flex;align-items:center;gap:14px;margin:4px 0 12px}
.podcast-hero .pod-title img.pod-cover{width:72px;height:72px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.pod-title .lead-title{margin:0}
@media (max-width:899px){.podcast-hero.pod-feature{grid-template-columns:1fr;gap:24px}.pod-feature img.pod-still{width:100%}}
@media (max-width:820px){
  .section{padding:44px 0}
  .section-tight{padding:34px 0}
  .core-areas{padding:44px 0}
  .banner{padding:52px 0 60px}
  section[aria-labelledby="learn-explore-title"]{padding:40px 0}
  .cta-in{padding:40px 20px 44px}
  .partners{padding:24px 16px;gap:10px 16px}
  .partners img{width:128px}
  .site-footer{padding-top:44px}
  .impact{margin:32px 0 8px;padding-top:28px}
  .ix-dots{min-height:0;margin-top:14px}
}
.notice{background:none!important;border:0!important;border-left:3px solid var(--pink-dark)!important;border-radius:0!important;padding:4px 0 4px 14px!important}
.podcast-hero .pod-title img.pod-cover{width:96px;height:auto;object-fit:contain;border-radius:4px}

/* ===== v6: Learn & Explore rows look and feel tappable ===== */
.lx-row{grid-template-columns:72px 1fr 200px;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease-out),background-color .15s;border-radius:4px}
.lx-go{display:none}
.lx-cta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-weight:700;font-size:15px;letter-spacing:.01em;color:var(--pink-deep)}
.lx-cta span{display:inline-block;transition:transform .25s var(--ease-out)}
.lx-list li{transition:border-color .2s}
@media (hover:hover){
  .lx-row:hover .lx-cta span{transform:translateX(6px)}
  .lx-row:hover .lx-cta{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
  .lx-list li:has(.lx-row:hover){border-bottom-color:var(--pink)}
  .lx-row:hover .lx-img{opacity:.92}
}
.lx-row:active{transform:translateX(4px);background-color:rgba(254,128,192,.10)}
.lx-list li:has(.lx-row:active){border-bottom-color:var(--pink-deep)}
.lx-row:focus-visible{outline:3px solid var(--pink-deep);outline-offset:3px}
@media (max-width:820px){.lx-row{grid-template-columns:44px 1fr 104px}.lx-cta{font-size:14px;margin-top:8px}}
@media (max-width:380px){.lx-row{grid-template-columns:34px 1fr 84px}}

/* ===== v6: image links get a visible cue (external ↗, enlarge +) ===== */
.engagement-img,.events-teaser,.programme-card>a,.peek-item,.gal-item{position:relative;display:block;-webkit-tap-highlight-color:transparent}
.engagement-img::after,.events-teaser::after,.programme-card>a::after,.peek-item::after,.gal-item::after{content:"\2197";position:absolute;right:12px;bottom:12px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--pink-deep);font:700 20px/1 var(--font-body);transition:transform .2s var(--ease-out),background-color .2s,color .2s;pointer-events:none}
.peek-item::after,.gal-item::after{content:"+";font-size:26px}
.events-teaser img{margin-bottom:0}
.events-teaser{margin:10px 0 20px}
@media (hover:hover){
  .engagement-img:hover::after,.events-teaser:hover::after,.programme-card>a:hover::after,.peek-item:hover::after,.gal-item:hover::after{background:var(--pink-deep);color:#fff;transform:scale(1.08)}
}
.engagement-img:active::after,.events-teaser:active::after,.programme-card>a:active::after,.peek-item:active::after,.gal-item:active::after{background:var(--pink-deep);color:#fff}
.engagement-img:active img,.events-teaser:active img,.programme-card>a:active img,.peek-item:active img,.gal-item:active img{transform:scale(.98);transition:transform .12s}
.engagement-img:focus-visible,.events-teaser:focus-visible,.programme-card>a:focus-visible,.peek-item:focus-visible,.gal-item:focus-visible{outline:3px solid var(--pink-deep);outline-offset:3px}
.peek-item::after{width:30px;height:30px;right:8px;bottom:8px;font-size:20px}
@media (max-width:820px){.gal-item::after{width:32px;height:32px;right:8px;bottom:8px;font-size:22px}}

/* ======================= v7 — "From silence to voice" =======================
   Calm, photo-led hierarchy (one confident sans for headlines, sentence case, comfortable paragraphs),
   a whisper-to-voice hero, question labels, reply arrows and a speech-bubble photo frame. */
:root{--font-display:"Bricolage Grotesque","DM Sans",system-ui,sans-serif}
.display-title,.core-heading,.tabbed .core-item h3,.team-title,.cta-l1,.page-title,.hero-page .page-title,.impact-title,.lx .lx-lead,.lx-title,.hx-type,.ticker-track{
  font-family:var(--font-head);font-weight:800;text-transform:none;letter-spacing:-.025em}
.display-title{font-size:clamp(34px,4.6vw,64px);line-height:1.02}
.core-heading,.team-title{font-size:clamp(32px,4.2vw,60px);line-height:1.02}
.tabbed .core-item h3{font-size:clamp(26px,2.8vw,40px);line-height:1.05}
.cta-l1{font-size:clamp(24px,2.8vw,40px);line-height:1.12}
.impact-title{font-size:clamp(28px,3vw,44px);line-height:1.05}
.lx .lx-lead{font-size:clamp(30px,4vw,56px);line-height:1.02}
.lx-title{font-size:clamp(22px,2.4vw,34px);line-height:1.05;margin-bottom:8px}
.ticker-track{font-size:clamp(15px,1.5vw,20px);font-weight:700;letter-spacing:0}
.step-no,.goal-figs b,.ix-amount,.lx-no,.impact-list dt{font-weight:800;letter-spacing:-.02em}
.lead-title{font-family:var(--font-head);font-weight:800;font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.025em}
.split p.lead-title{font-size:clamp(28px,3.4vw,46px)}

/* comfortable, GFC-like paragraphs: one size, one colour, short measure */
main .section p:not([class]),.programme-body p:not([class]),.core-item p:not([class]),.intro-text,.banner-text,.form-intro>p:not(.kicker):not(.ask-q){
  font-size:18px;line-height:1.62;max-width:38em}
main .section p:not([class])+p:not([class]){margin-top:14px}
.center p:not([class]),.centered+p:not([class]),.narrow.center p{margin-left:auto;margin-right:auto}
.banner-text{margin-left:auto;margin-right:auto}
.hx-sub{font-size:17px;line-height:1.6;max-width:34em}
.hl{font-weight:600}
.hl::before{transform:none!important;transition:none!important;opacity:.85}
@media (max-width:820px){
  main .section p:not([class]),.programme-body p:not([class]),.core-item p:not([class]),.intro-text,.banner-text,.form-intro>p:not(.kicker):not(.ask-q){font-size:17px;line-height:1.6}
  .hx-sub{font-size:16px}
  .lx-title{font-size:24px}
}

/* buttons: calm pills, words exactly as written */
.btn,.btn-ghost{border-radius:999px;text-transform:none;letter-spacing:.01em;font-weight:700}

/* ---- 1. hero: whisper -> voice (final state is the default; .whisper is only set by JS when motion is OK) ---- */
.hx-type{font-size:clamp(56px,min(10vw,16vh),150px);line-height:.96;letter-spacing:-.035em}
.hx-page .hx-type.page-title{font-size:clamp(52px,min(8.6vw,15vh),128px);letter-spacing:-.035em}
.hx .hx-type.hx-long{font-size:clamp(34px,4.4vw,66px);line-height:1.04;max-width:17ch;margin-left:auto;margin-right:auto}
.hx-type .ln>span,.hx-type:not(:has(.ln)){animation:none!important;transition:font-weight 1.3s cubic-bezier(.2,.7,.2,1),opacity 1.3s ease,letter-spacing 1.3s cubic-bezier(.2,.7,.2,1)}
.hx-type .ln:nth-child(2)>span{transition-delay:.16s}
.hx-type .ln:nth-child(3)>span{transition-delay:.32s}
.whisper .hx-type .ln>span,.whisper .hx-type:not(:has(.ln)){font-weight:200;opacity:.55;letter-spacing:.03em}
.hx-bfly{transition:transform 1.8s cubic-bezier(.2,.7,.2,1) .25s,opacity 1.2s ease .2s}
.whisper .hx-bfly{transform:translateY(26px) scale(.9);opacity:.7}
/* butterfly beside, not over, the words on wider screens (calmer, keeps the headline clean) */
@media (min-width:821px){
  .hx:not(.hx-donate) .hx-bfly{justify-self:end;align-self:start;width:clamp(150px,13vw,230px);margin:3vh 6vw 0 0}
  .hx .hx-front{display:none}
}
@media (max-width:820px){
  .hx-type{font-size:clamp(46px,14.5vw,72px)}
  .hx-page .hx-type.page-title{font-size:clamp(42px,12.5vw,64px)}
  .hx .hx-type.hx-long{font-size:clamp(30px,8.4vw,40px);line-height:1.06}
}

/* ---- 2. signature speech-bubble photo frame (flat: a mask, no shadow, no box) ---- */
.bubble{--r:30px;--t:18px;border-radius:0!important;box-shadow:none!important;
  -webkit-mask:
    radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)) 0 0/calc(2*var(--r)) calc(2*var(--r)) no-repeat,
    radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)) 100% 0/calc(2*var(--r)) calc(2*var(--r)) no-repeat,
    radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)) 0 calc(100% - var(--t))/calc(2*var(--r)) calc(2*var(--r)) no-repeat,
    radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)) 100% calc(100% - var(--t))/calc(2*var(--r)) calc(2*var(--r)) no-repeat,
    linear-gradient(#000 0 0) 50% 0/calc(100% - 2*var(--r)) calc(100% - var(--t)) no-repeat,
    linear-gradient(#000 0 0) 0 var(--r)/100% calc(100% - var(--t) - 2*var(--r)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 19'%3E%3Cpath d='M0 0H36C27 3 17 9 3 19C8 12 9 6 4 0Z'/%3E%3C/svg%3E") calc(var(--r) + 8px) 100%/36px calc(var(--t) + 1px) no-repeat;
  mask:
    radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)) 0 0/calc(2*var(--r)) calc(2*var(--r)) no-repeat,
    radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)) 100% 0/calc(2*var(--r)) calc(2*var(--r)) no-repeat,
    radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)) 0 calc(100% - var(--t))/calc(2*var(--r)) calc(2*var(--r)) no-repeat,
    radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)) 100% calc(100% - var(--t))/calc(2*var(--r)) calc(2*var(--r)) no-repeat,
    linear-gradient(#000 0 0) 50% 0/calc(100% - 2*var(--r)) calc(100% - var(--t)) no-repeat,
    linear-gradient(#000 0 0) 0 var(--r)/100% calc(100% - var(--t) - 2*var(--r)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 19'%3E%3Cpath d='M0 0H36C27 3 17 9 3 19C8 12 9 6 4 0Z'/%3E%3C/svg%3E") calc(var(--r) + 8px) 100%/36px calc(var(--t) + 1px) no-repeat}
.bubble.bubble-r{-webkit-mask-position:0 0,100% 0,0 calc(100% - var(--t)),100% calc(100% - var(--t)),50% 0,0 var(--r),calc(100% - var(--r) - 8px) 100%;
  mask-position:0 0,100% 0,0 calc(100% - var(--t)),100% calc(100% - var(--t)),50% 0,0 var(--r),calc(100% - var(--r) - 8px) 100%;
  -webkit-mask-image:radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)),radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)),radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)),radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)),linear-gradient(#000 0 0),linear-gradient(#000 0 0),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 19'%3E%3Cpath d='M36 0H0C9 3 19 9 33 19C28 12 27 6 32 0Z'/%3E%3C/svg%3E");
  mask-image:radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)),radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)),radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)),radial-gradient(circle,#000 calc(var(--r) - .5px),#0000 var(--r)),linear-gradient(#000 0 0),linear-gradient(#000 0 0),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 19'%3E%3Cpath d='M36 0H0C9 3 19 9 33 19C28 12 27 6 32 0Z'/%3E%3C/svg%3E")}
@media (max-width:820px){.bubble{--r:22px;--t:14px}}

/* ---- 3. question labels (what a young person or visitor would ask) ---- */
.ask-q{margin:0 0 12px;font-family:var(--font-head);font-weight:600;font-size:17px;line-height:1.3;color:var(--pink-deep);letter-spacing:-.005em}
.ask-q-in{display:inline-flex;align-items:center;gap:9px}
.ask-q-in::before{content:"";flex:none;width:21px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M5 1.5h14A3.5 3.5 0 0 1 22.5 5v7a3.5 3.5 0 0 1-3.5 3.5H11l-5.5 4v-4H5A3.5 3.5 0 0 1 1.5 12V5A3.5 3.5 0 0 1 5 1.5z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M5 1.5h14A3.5 3.5 0 0 1 22.5 5v7a3.5 3.5 0 0 1-3.5 3.5H11l-5.5 4v-4H5A3.5 3.5 0 0 1 1.5 12V5A3.5 3.5 0 0 1 5 1.5z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.banner .ask-q,.form-section .ask-q,.dark-bg .ask-q{color:var(--pink)}
.banner .ask-q{text-align:center}

/* ---- 4. calls to action read like replies: a small reply arrow before the existing button words ---- */
.cta-band .btn-row .btn::before,.banner .btn-row .btn::before,.hx-actions a::before{content:"";display:inline-block;vertical-align:-1px;width:15px;height:13px;margin-right:9px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M2 1v4.5A3.5 3.5 0 0 0 5.5 9H14M10 5l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M2 1v4.5A3.5 3.5 0 0 0 5.5 9H14M10 5l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- 5. restrained motion ---- */
.bold-on .bv{transform:translateY(12px)}
@keyframes mh-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ticker-track{animation-duration:140s!important}
.wave svg,.wave .w2-wrap svg{animation:none!important}
.cur,.fx-layer,.wipe,.scroll-progress,.guide,.ripple{display:none!important}
@media (prefers-reduced-motion:reduce){.hx-type .ln>span,.hx-type,.hx-bfly{transition:none!important}}

/* ======================= v8 — GFC-like look & feel, MHCF's own voice =======================
   DM Sans everywhere (GFC's typeface), solid deep-plum sections, big centred statements,
   ringed circle photos, one hand-drawn underline, sparing scribbles, quote mark, story carousel,
   fanned comic stack, solid sunny pill buttons. */
@font-face{font-family:"DM Sans Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica Neue"),local("Helvetica");size-adjust:101%;ascent-override:98.2%;descent-override:30.7%;line-gap-override:0%}
:root{--font-body:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-head:var(--font-body);--font-display:var(--font-body);
  --night:#2A1B3D;--night-2:#3B2754;--sun:#FFC857;--sun-deep:#F5B935}
body{font-family:var(--font-body);font-weight:400}
h1,h2,h3,h4,.lead-title,.display-title,.big-title,.core-heading,.team-title,.cta-l1,.impact-title,.lx-title,.lx .lx-lead,.hx-type,.page-title{font-family:var(--font-head);font-weight:800;letter-spacing:-.035em;text-transform:none}
h3,h4{letter-spacing:-.02em}
.section-title h2{letter-spacing:.2em;font-weight:700}
.big-title{font-size:clamp(32px,4.4vw,58px);line-height:1.04}

/* solid full-bleed night sections */
.band-night{background:var(--night)!important;color:rgba(255,255,255,.88)}
.band-night h2,.band-night h3,.band-night .lead-title,.band-night .big-title,.band-night .display-title{color:#fff}
.band-night .section-title h2{color:var(--pink)}
.band-night .section-title .line{background:var(--pink)}
.band-night p:not([class]),.band-night .vcenter p{color:rgba(255,255,255,.88)}
.band-night .step-no{color:var(--sky)}
.band-night .ask-q{color:var(--pink)}
.band-night .hl{color:#fff}
.band-night .hl::before{background:rgba(254,128,192,.35)}

/* ---- hero: deep plum, ringed circle photo, bold centred words (whisper -> voice stays) ---- */
.hx{background:var(--night)!important;min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"photo" "stage" "foot";padding:64px 0 76px;row-gap:0}
.hx-bg{position:relative;inset:auto;z-index:0;grid-area:photo;justify-self:center;width:min(70vw,440px);aspect-ratio:1;margin:30px auto 18px;border-radius:50%}
.hx-bg::before{content:"";position:absolute;inset:-6.5%;border-radius:50%;background:var(--night-2);z-index:-1}
.hx-bg::after{content:"";position:absolute;inset:-13%;border-radius:50%;border:3px dashed var(--sun);opacity:.9;pointer-events:none}
.hx-photo{inset:0;border-radius:50%;filter:none!important;mix-blend-mode:normal!important;opacity:1!important}
.hx{position:relative}
.hx .hx-stage{grid-area:stage;position:static!important;padding:22px 20px 0}
.hx-type{color:#fff}
.hx .hx-front{display:none!important}
.hx .hx-bfly{position:absolute!important;z-index:4;top:42px!important;left:calc(50% + min(26vw,170px))!important;right:auto!important;width:clamp(78px,22vw,140px)!important;margin:0!important;grid-area:auto}
.hx-foot{grid-area:foot;flex-direction:column;align-items:center;text-align:center;gap:22px;padding:22px 20px 0}
.hx-sub{margin:0 auto;color:rgba(255,255,255,.88);text-align:center}
.hx-actions{justify-content:center}
.hx-corner.bl,.hx-corner.br{bottom:22px}
@media (min-width:900px){
  .hx{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"stage photo" "foot photo";align-items:center;padding:88px 6vw 96px;column-gap:4vw}
  .hx-bg{width:min(34vw,500px);margin:0 auto}
  .hx-stage{align-self:end;padding:0;place-items:start}
  .hx-type{text-align:left}
  .hx-foot{align-items:flex-start;text-align:left;align-self:start;padding:26px 0 0}
  .hx-sub{text-align:left;margin:0}
  .hx-actions{justify-content:flex-start}
  .hx .hx-bfly{top:9vh!important;left:auto!important;right:calc(6vw + min(34vw,500px)*.02)!important;width:clamp(110px,10vw,170px)!important}
  .hx:not(.hx-page) .hx-type{font-size:clamp(56px,6.6vw,108px)}
  .hx .hx-type.hx-long{margin-left:0;margin-right:0;max-width:15ch}
}

/* ---- big centred statements (What We Do / Mission / Vision) ---- */
.statement-sec .container.split{display:block;max-width:900px;text-align:center}
.statement-sec .section-title{justify-content:center}
.statement-sec .step-label{justify-content:center}
.statement-sec .lead-title,.statement-sec .big-title{font-size:clamp(34px,5.4vw,62px);line-height:1.03;max-width:17ch;margin:14px auto 22px}
.statement-sec p:not([class]),.statement-sec .vcenter p{margin-left:auto;margin-right:auto;text-align:center;font-size:19px;line-height:1.62;max-width:34em}
.statement-p{font-family:var(--font-head);font-weight:700;font-size:clamp(23px,2.7vw,32px)!important;line-height:1.28;letter-spacing:-.02em;color:var(--ink);max-width:26em;margin:8px auto 0;text-align:center}
.statement-sec .vcenter,.statement-sec .split>div{display:block}
.statement-sec .split>div+div{margin-top:40px}
.statement-sec .btn{margin-top:26px}
.vision-sec .step-no{text-align:center}
@media (max-width:820px){.statement-sec p:not([class]),.statement-sec .vcenter p{font-size:18px}}

/* ---- ringed circle photos (replace the speech-bubble frame) ---- */
.ring-photo{display:block;width:min(74vw,440px)!important;max-width:100%;aspect-ratio:1;height:auto!important;object-fit:cover;border-radius:50%!important;
  box-shadow:0 0 0 12px var(--blush)!important;outline:3px dashed var(--pink-dark);outline-offset:24px;margin:44px auto 40px;-webkit-mask:none!important;mask:none!important}
.band-night .ring-photo{box-shadow:0 0 0 12px var(--night-2)!important;outline-color:var(--sun)}

/* ---- one hand-drawn underline per page (sun on dark, pink on light) ---- */
.u-stroke{position:relative;white-space:nowrap;display:inline-block}
.u-stroke::after{content:"";position:absolute;left:-2%;right:-3%;bottom:-.06em;height:.2em;background:var(--pink-dark);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.7,.2,1) .9s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C46 4 104 2 197 6' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C46 4 104 2 197 6' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hx .u-stroke::after,.band-night .u-stroke::after{background:var(--sun)}
.whisper .u-stroke::after{transform:scaleX(0)}

/* ---- scribble doodles, used sparingly ---- */
.doodle-sec{position:relative}
.doodle-sec::before{content:"";position:absolute;top:22px;left:calc(50% + 120px);width:62px;height:58px;background:var(--sky);opacity:.9;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 60'%3E%3Cpath d='M35 6C18 4 6 16 7 31s15 24 30 22 23-14 21-28S44 3 27 9 9 30 16 41s25 13 34 4' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 60'%3E%3Cpath d='M35 6C18 4 6 16 7 31s15 24 30 22 23-14 21-28S44 3 27 9 9 30 16 41s25 13 34 4' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.stories-sec::before{left:auto;right:6vw;background:var(--pink)}
.quote-sec::before{left:8vw;top:30px;background:var(--pink-dark);opacity:.55}
@media (max-width:820px){.doodle-sec::before{width:46px;height:43px;top:14px;left:auto;right:18px}}

/* ---- big centred quote (About: the existing pull quote) ---- */
.quote-sec .pull{font-family:var(--font-body);font-weight:500;font-size:clamp(22px,2.6vw,31px);line-height:1.4;letter-spacing:-.01em;text-align:center;max-width:24em;margin:44px auto 0;color:var(--ink)}
.quote-sec .pull::before{content:"";display:block;width:58px;height:44px;margin:0 auto 18px;background:var(--pink-dark);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 44'%3E%3Cpath d='M24 4C12 7 4 16 4 27c0 7 4 12 10 12s10-4 10-10-4-9-9-9c1-6 5-10 11-12zM54 4C42 7 34 16 34 27c0 7 4 12 10 12s10-4 10-10-4-9-9-9c1-6 5-10 11-12z' fill='none' stroke='%23000' stroke-width='3.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 44'%3E%3Cpath d='M24 4C12 7 4 16 4 27c0 7 4 12 10 12s10-4 10-10-4-9-9-9c1-6 5-10 11-12zM54 4C42 7 34 16 34 27c0 7 4 12 10 12s10-4 10-10-4-9-9-9c1-6 5-10 11-12z' fill='none' stroke='%23000' stroke-width='3.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- solid pill buttons, high contrast, obvious tap state ---- */
.btn,.btn-ghost{border-radius:999px!important;font-family:var(--font-body);font-weight:700;min-height:48px;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s ease,background-color .2s,color .2s,box-shadow .2s}
.hx .btn-ghost.solid,.band-night .btn:not(.btn-line-dark),.banner .btn-pink,.cta-band .btn-pink{background:var(--sun)!important;color:var(--night)!important;border-color:var(--sun)!important}
.hx .btn-ghost:not(.solid){border:2px solid rgba(255,255,255,.85);color:#fff;background:transparent}
@media (hover:hover){.btn:hover,.btn-ghost:hover{transform:translateY(-1px)}.hx .btn-ghost.solid:hover,.band-night .btn:not(.btn-line-dark):hover,.banner .btn-pink:hover,.cta-band .btn-pink:hover{background:var(--sun-deep)!important}}
.btn:active,.btn-ghost:active{transform:translateY(1px) scale(.98)}
.btn:focus-visible,.btn-ghost:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

/* ---- stories carousel (Home: Our Community Engagements) — arched photos, prev/next ---- */
.story-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:34px -20px 0;padding:4px 20px 8px;scroll-padding:0 20px}
.story-track::-webkit-scrollbar{display:none}
.story-track:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.story-track>.engagement{flex:0 0 min(86%,410px);scroll-snap-align:start;display:flex!important;flex-direction:column;gap:0;margin:0!important;background:#fff;border-radius:28px;overflow:hidden;color:var(--text)}
.story-track .engagement-text{order:2;max-width:none!important;padding:26px 24px 20px;text-align:left!important;justify-self:auto}
.story-track .engagement h3{color:var(--ink);font-size:24px;line-height:1.12}
.story-track .engagement p,.story-track .engagement dd{font-size:16px;line-height:1.55;text-align:left}
.story-track .engagement-img{order:1;margin:14px 14px 0;height:auto!important;box-shadow:none!important;border-radius:0!important}
.story-track .engagement-img img{width:100%;aspect-ratio:4/3!important;height:auto!important;object-fit:cover;border-radius:999px 999px 18px 18px/60% 60% 18px 18px!important;display:block}
.band-night .engagement .hl{color:var(--ink)}
.band-night .engagement .hl::before{background:rgba(254,128,192,.3)}
.car-ctl{display:flex;gap:12px;margin-top:22px}
.car-btn,.stack-btn{width:54px;height:54px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--night-2);color:#fff;transition:background-color .2s,transform .12s,opacity .2s;-webkit-tap-highlight-color:transparent}
.car-btn.next,.stack-btn.next{background:var(--sun);color:var(--night)}
.car-btn:disabled{opacity:.35;cursor:default}
.car-btn:active:not(:disabled),.stack-btn:active{transform:scale(.94)}
.car-btn:focus-visible,.stack-btn:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

/* ---- fanned comic stack (Projects) ---- */
.comics.stack-on{display:grid;max-width:820px;margin:34px auto 0;padding:6px 14px 18px;outline:none}
.stack-on>.comic{grid-area:1/1;background:#fff!important;border:1px solid var(--hair)!important;border-radius:26px!important;padding:22px 20px!important;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s;transform-origin:50% 85%;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.stack-on>.comic[data-pos="0"]{z-index:3}
.stack-on>.comic[data-pos="1"]{z-index:2;transform:translate(12px,10px) rotate(4deg);background:var(--blush)!important}
.stack-on>.comic[data-pos="2"]{z-index:1;transform:translate(-12px,16px) rotate(-4.5deg);background:var(--mist)!important}
.stack-on>.comic:not([data-pos="0"])>*{visibility:hidden}
.stack-on>.comic.dragging{transition:none!important;cursor:grabbing}
.stack-on>.comic.fly-out{transform:translate(var(--fx,130%),-24px) rotate(var(--fr,18deg))!important;opacity:0;transition:transform .38s ease-in,opacity .38s ease-in!important}
.stack-on>.comic.fly-in-start{transform:translate(-130%,-24px) rotate(-18deg)!important;opacity:0;transition:none!important}
.stack-on .comic-cover img{border-radius:46% 46% 14px 14px/26% 26% 14px 14px!important;-webkit-user-drag:none}
.stack-on:focus-visible>.comic[data-pos="0"]{outline:3px solid var(--pink-dark);outline-offset:4px}
.stack-ctl{display:flex;align-items:center;justify-content:center;gap:18px;margin:26px 0 0}
.stack-count{margin:0;min-width:64px;text-align:center;font-weight:800;font-size:18px;color:var(--ink);letter-spacing:.02em}
.stack-btn.prev{background:var(--night);color:#fff}
.stack-reduce>.comic{transition:opacity .3s ease!important;transform:none!important}
.stack-reduce>.comic:not([data-pos="0"]){opacity:0;visibility:hidden}

@media (prefers-reduced-motion:reduce){.u-stroke::after{transition:none!important;transform:none!important}.story-track{scroll-behavior:auto}}
@media (max-width:600px){.stack-on>.comic[data-pos="1"]{transform:translate(6px,10px) rotate(2.5deg)}.stack-on>.comic[data-pos="2"]{transform:translate(-6px,16px) rotate(-3deg)}.comics.stack-on{padding:6px 6px 18px}}

/* ---- v8-short: short card + "Read more +" ---- */
.short-sum{font-size:16px!important;line-height:1.5!important;margin:6px 0 4px!important;color:var(--text)}
.more{margin-top:10px}
.more[hidden]{display:none!important}
.more-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;margin:2px 0 10px;border:0;background:none;cursor:pointer;font:700 15px/1 var(--font-body);color:var(--pink-deep);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;-webkit-tap-highlight-color:transparent}
.more-btn .more-i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pink-deep);color:#fff;font-size:17px;text-decoration:none}
@media (hover:hover){.more-btn:hover{color:var(--ink)}.more-btn:hover .more-i{background:var(--ink)}}
.more-btn:active{transform:translateY(1px)}
.more-btn:focus-visible{outline:3px solid var(--pink-dark);outline-offset:2px;border-radius:6px}
/* comics: compact topic line, tighter card on phones */
.stack-on .comic-info h4:first-child{display:inline;margin:0 6px 0 0}
.stack-on .comic-info h4:first-child+.comic-strong{display:inline;margin:0}
.stack-on .comic-info .short-sum{margin-top:8px!important}
.stack-on .comic-info .btn{margin-top:6px}
.story-track{align-items:flex-start}
.story-track .short-sum{margin:10px 0 2px!important}
@media (max-width:600px){
  .stack-on>.comic{padding:18px 16px!important}
  .stack-on .comic-head h3{font-size:21px}
  .stack-on .comic-meta{margin-top:6px}
  .stack-on .comic-body{gap:12px}
  .stack-on .comic-cover img{aspect-ratio:16/9!important;height:auto;object-fit:cover}
  .stack-on .comic-info .btn{min-height:46px;padding:0 18px}
  .story-track .engagement-text{padding:18px 20px 18px}
  .story-track .engagement-img img{aspect-ratio:16/10!important}
}
.story-track .engagement.reverse .engagement-img{order:1!important}
.story-track .engagement.reverse .engagement-text{order:2!important}
.stack-on .more .comic-strong{margin-bottom:12px}
.stack-on .comic-info .more-btn{display:flex;margin:4px 0 6px}
@media (max-width:600px){
  .stack-on .comic-cover img{aspect-ratio:3/2!important}
  .stack-on .comic-info .btn{min-height:46px;padding:0 14px;font-size:15px;margin-right:4px}
  .stack-on .comic-info .btn .icon{width:16px;height:16px}
}

/* ======================= v9 hero — "finding his voice" (MHCF, not GFC) =======================
   Tall rounded photo with a solid pink speech-bubble block offset behind it (tail points to the words),
   sound-wave arcs rippling from the boy's microphone behind everything, text left-aligned. */
.hx{overflow:hidden;padding:40px 0 64px!important;row-gap:0}
.hx .hx-frame{--mx:55.8%;--my:46%;position:relative;isolation:isolate;z-index:1;overflow:visible;
  justify-self:start;width:calc(100% - 76px);max-width:460px;aspect-ratio:1/1;margin:30px 20px 0 50px;border-radius:0}
.hx .hx-frame::before{content:"";position:absolute;inset:0;transform:translate(-22px,18px);border-radius:34px 34px 34px 10px;background:var(--pink-dark);z-index:-1}
.hx .hx-frame::after{content:"";position:absolute;inset:auto;border:0!important;border-radius:0;opacity:1;left:-22px;top:calc(100% + 17px);width:46px;height:30px;background:var(--pink-dark);z-index:-1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M0 0H40C30 6 18 15 2 30C8 19 8 9 0 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M0 0H40C30 6 18 15 2 30C8 19 8 9 0 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.hx .hx-frame .hx-photo{position:absolute;inset:0;border-radius:34px 34px 34px 10px!important;background-size:cover;background-position:54% 50%;opacity:1!important;filter:none!important;z-index:0}
/* waves: concentric rings centred on the mic, behind the frame and behind all text */
.hx-waves{position:absolute;left:var(--mx);top:var(--my);width:340%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-2;pointer-events:none;overflow:visible}
.hx-waves circle{fill:none;stroke:var(--pink);stroke-width:.8;stroke-linecap:round;stroke-dasharray:15 85;stroke-dashoffset:-27;transform-box:view-box;transform-origin:50% 50%;opacity:.34}
.hx-waves circle:nth-child(2n){stroke:var(--sun);opacity:.24}
.hx-waves circle:nth-child(n+4){opacity:.18}
.hx-waves circle:nth-child(n+6){opacity:.11}
@media (max-width:899px){.hx-waves circle{opacity:.24}.hx-waves circle:nth-child(2n){opacity:.18}.hx-waves circle:nth-child(n+5){display:none}}
/* small "voice" arcs just beside the mic, on the photo */
.hx-mic{position:absolute;left:calc(var(--mx) + 3%);top:calc(var(--my) - 7.5%);width:12%;height:auto;z-index:2;overflow:visible;pointer-events:none}
.hx-mic path{fill:none;stroke:var(--pink-dark);stroke-width:4;stroke-linecap:round;opacity:.95}
/* butterfly: small, perched on the frame's top-right corner */
.hx .hx-frame .hx-bfly{position:absolute!important;top:-30px!important;right:-18px!important;left:auto!important;bottom:auto!important;width:62px!important;margin:0!important;z-index:3}
/* text sits above the waves */
.hx .hx-type,.hx .hx-foot,.hx .hx-corner{position:relative;z-index:3}
.hx .hx-corner{position:absolute}
.hx .hx-stage{padding:44px 20px 0;place-items:start;text-align:left}
.hx .hx-type{text-align:left!important;margin-left:0!important;margin-right:0!important}
.hx .hx-foot{align-items:flex-start!important;text-align:left!important;padding:20px 20px 0}
.hx .hx-sub{text-align:left!important;margin:0!important}
.hx .hx-actions{justify-content:flex-start!important}
/* underline in brand pink, not yellow */
.hx .u-stroke::after{background:var(--pink)}
@media (min-width:900px){
  .hx{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;grid-template-areas:"stage photo" "foot photo"!important;column-gap:5vw;padding:76px 6vw 92px!important;min-height:min(88vh,820px);align-content:center}
  .hx .hx-frame{justify-self:end;align-self:center;width:min(31vw,450px);aspect-ratio:4/5;margin:0 0 0 40px;max-width:none}
  .hx.hx-page .hx-frame{aspect-ratio:1/1;width:min(33vw,470px)}
  .hx .hx-frame::before{transform:translate(-30px,26px);border-radius:44px 44px 44px 12px}
  .hx .hx-frame .hx-photo{border-radius:44px 44px 44px 12px!important}
  .hx .hx-frame::after{left:-30px;top:calc(100% + 25px);width:62px;height:40px}
  .hx .hx-frame .hx-bfly{width:96px!important;top:-46px!important;right:-34px!important}
  .hx .hx-stage{padding:0}
  .hx .hx-foot{padding:26px 0 0}
  .hx-waves{width:360%}
  .hx-waves circle{stroke-dashoffset:-37;stroke-dasharray:26 74}
}
/* motion: waves ripple out once the headline finds its voice (first pulse syncs with the whisper -> voice change) */
@keyframes mhWave{0%{transform:scale(.4);opacity:0}18%{opacity:.42}100%{transform:scale(1.12);opacity:0}}
@keyframes mhVoice{0%,100%{opacity:.5}35%,60%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .hx.voiced .hx-waves circle{animation:mhWave 6.4s cubic-bezier(.25,.6,.3,1) infinite both}
  .hx.voiced .hx-waves circle:nth-child(2){animation-delay:1.05s}
  .hx.voiced .hx-waves circle:nth-child(3){animation-delay:2.1s}
  .hx.voiced .hx-waves circle:nth-child(4){animation-delay:3.2s}
  .hx.voiced .hx-waves circle:nth-child(5){animation-delay:4.25s}
  .hx.voiced .hx-waves circle:nth-child(6){animation-delay:5.3s}
  .hx.voiced .hx-mic path{animation:mhVoice 3.2s ease-in-out infinite both}
  .hx.voiced .hx-mic path:nth-child(2){animation-delay:.25s}
  .hx.voiced .hx-mic path:nth-child(3){animation-delay:.5s}
  .whisper .hx-waves circle{opacity:0;transition:opacity .4s}
  .whisper .hx-mic path{opacity:.3}
}

/* ---- quiz page hero: bright photo, light gradient only where the title sits ---- */
.hero-quiz{background-image:url('/images/quiz-hero.webp');background-size:cover;background-position:62% 38%;min-height:min(62vh,560px);background-color:#E9DCC6}
.hero-quiz::before{background:radial-gradient(120% 75% at 0% 100%,rgba(42,27,61,.78) 0,rgba(42,27,61,.45) 32%,rgba(42,27,61,0) 60%)!important}
.hero-quiz .hero-content{text-align:left!important;justify-content:flex-start;align-items:flex-end;display:flex;min-height:inherit;padding-bottom:84px}
.hero-quiz .page-title{text-align:left;max-width:none;white-space:nowrap;font-size:clamp(44px,6vw,92px)!important;color:#fff;text-shadow:0 1px 18px rgba(42,27,61,.35)}
@media (max-width:700px){
  .hero-quiz{background-image:url('/images/quiz-hero-m.webp');background-position:50% 30%;min-height:min(70vh,520px)}
  .hero-quiz::before{background:linear-gradient(0deg,rgba(42,27,61,.8) 0,rgba(42,27,61,.45) 26%,rgba(42,27,61,0) 50%)!important}
  .hero-quiz .hero-content{padding-bottom:64px}
  .hero-quiz .page-title{max-width:none}
}

/* ---- light-edged images: soft tint behind Programmes + a faint hairline edge (flat, no box) ---- */
.prog-sec{background:var(--mist)!important}
.programme-card img,.lx-row img,.lx-row .lx-img,.pod-still,.pod-cover{outline:1px solid rgba(42,27,61,.12);outline-offset:-1px}

/* ---- Myth or Fact: fanned swipe stack ---- */
.quiz-card.qz-on{background:transparent!important;box-shadow:none!important;padding:0!important;max-width:640px}
.qz-stack{display:grid;margin:18px 0 6px;padding:6px 8px 18px;outline:none;position:relative}
.qz-card{grid-area:1/1;position:relative;background:#fff;border:1px solid var(--hair,#E7DFEA);border-radius:26px;padding:26px 24px 28px;min-height:250px;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s;transform-origin:50% 90%}
.qz-top{z-index:3;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;display:flex;flex-direction:column;justify-content:center}
.qz-top.qz-answered{cursor:default;justify-content:flex-start}
.qz-b1{z-index:2;transform:translate(8px,10px) rotate(3deg);background:var(--blush)}
.qz-b2{z-index:1;transform:translate(-8px,16px) rotate(-3.5deg);background:var(--mist)}
.qz-top.qz-drag{transition:none;cursor:grabbing}
.qz-top.qz-enter{transform:translate(8px,10px) rotate(3deg) scale(.97);transition:none}
.qz-top.qz-out{transform:translate(var(--fx,140%),-20px) rotate(var(--fr,16deg))!important;opacity:0;transition:transform .34s ease-in,opacity .34s ease-in}
.qz-top.qz-turn{transform:perspective(900px) rotateY(90deg)!important;transition:transform .2s ease-in}
.qz-top.qz-turn-in{transform:perspective(900px) rotateY(-90deg)!important;transition:none}
.qz-top.qz-fade{opacity:0;transition:opacity .18s ease}
.qz-reduce .qz-card{transform:none!important}
.qz-reduce .qz-top{transition:opacity .2s ease}
.qz-front .tag{align-self:flex-start;margin-bottom:14px}
.qz-front .quiz-statement{font-size:clamp(23px,3.2vw,30px);line-height:1.25;letter-spacing:-.02em;margin:0}
.qz-label{position:absolute;top:18px;z-index:4;padding:6px 14px;border-radius:12px;font:800 18px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;opacity:0;pointer-events:none;border:3px solid currentColor;background:#fff}
.qz-myth{left:18px;color:var(--pink-deep);transform:rotate(-8deg)}
.qz-fact{right:18px;color:#1E7FA0;transform:rotate(8deg)}
.qz-answered .qz-label{display:none}
.qz-back{margin:0;padding:0;border:0;background:none}
.qz-back h3{font-size:22px;margin:0 0 4px}
.qz-back p{font-size:16px;line-height:1.55}
.qz-right{border-color:#9BD3AE;box-shadow:inset 0 6px 0 #2F9E5B}
.qz-wrong{border-color:#F1B4C7;box-shadow:inset 0 6px 0 var(--pink-deep)}
.qz-hint{text-align:center;font-size:14px;color:var(--muted);margin:10px 0 12px}
.qz-on .quiz-choices{gap:12px}
.qz-on .quiz-choice{min-height:56px;border-radius:999px;font-size:18px}
.qz-on .quiz-choice:active:not(:disabled){transform:scale(.97)}
.qz-stack:focus-visible .qz-top{outline:3px solid var(--pink-dark);outline-offset:4px}
@media (max-width:600px){.qz-card{padding:22px 18px 24px;min-height:230px}}
.qz-stack>.qz-label{top:-4px;z-index:6}
.qz-stack>.qz-myth{left:2px}.qz-stack>.qz-fact{right:2px}
.qz-done .qz-hint{visibility:hidden}

/* ---- v9 nolabels: no top eyebrow labels, photo moves up; room kept for the perched butterfly ---- */
.hx{padding-top:14px!important}
.hx .hx-frame{margin-top:40px}
.hx.hx-donate .hx-frame{margin-top:58px}
@media (min-width:900px){
  .hx{padding-top:64px!important;min-height:min(80vh,760px)}
  .hx .hx-frame,.hx.hx-donate .hx-frame{margin-top:0}
}

/* ======================= v10 — cinematic motion inside the existing hero + transparent header (Home) =======================
   Layout is unchanged from v9: the header is taken out of the flow and the hero gets exactly the header's height as extra top padding. */
.site-header.hdr-over{position:absolute;top:0;left:0;right:0;background:transparent!important;box-shadow:none!important;transition:background-color .35s ease,box-shadow .35s ease}
.site-header.hdr-over.hdr-js{position:fixed}
.site-header.hdr-over.shrink{transform:none}
.site-header.hdr-over.shrink .header-inner,.site-header.hdr-over.shrink .brand img{transform:none}
.hdr-over .brand{position:relative;display:inline-block}
.hdr-over .brand img{transition:opacity .35s ease}
.hdr-over .brand .brand-white{position:absolute;left:0;top:50%;transform:translateY(-50%);width:150px;height:auto}
.hdr-over .brand .brand-dark{opacity:0}
.hdr-over.solid{background:#fff!important;box-shadow:0 1px 0 var(--hair)!important}
.hdr-over.solid .brand .brand-dark{opacity:1}
.hdr-over.solid .brand .brand-white{opacity:0}
/* menu icon: white, directly on the plum */
.hdr-over:not(.solid) .nav-toggle{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
@media (min-width:821px){
  .hdr-over:not(.solid) .menu>li>a,.hdr-over:not(.solid) .menu>li>.sub-label{color:#fff}
  .hdr-over:not(.solid) .menu>li>a[aria-current="page"]{color:var(--pink)}
  .hdr-over:not(.solid) .header-cta{background:#fff!important;color:var(--night)!important;border-color:#fff!important}
}
.hdr-over~main .hx-full{padding-top:calc(14px + 84px)!important}
@media (min-width:900px){.hdr-over~main .hx-full{padding-top:calc(64px + 84px)!important;min-height:calc(min(80vh,760px) + 84px)}}

/* cinematic motion inside the existing frame */
.hx .hx-frame .hx-photo{overflow:hidden;isolation:isolate}
.hx .hx-frame .hx-photo::before{content:"";position:absolute;inset:0;background:inherit;background-size:cover;background-position:inherit;transform-origin:var(--mx,50%) var(--my,50%);will-change:transform}
@keyframes mhPush{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.11) translate(-1.6%,-.8%)}}
@keyframes mhBubble{0%,100%{translate:0 0}50%{translate:-5px 6px}}
@keyframes mhBfly{0%,100%{translate:0 0}50%{translate:-6px -8px}}
@media (prefers-reduced-motion:no-preference){
  .hx .hx-frame .hx-photo::before{animation:mhPush 22s ease-in-out infinite alternate}
  .hx .hx-frame::before,.hx .hx-frame::after{animation:mhBubble 9s ease-in-out infinite}
}

/* v10 A: wide group photos shown in full — the frame takes the photo's own ratio (pink bubble + tail stay behind it) */
.hx .hx-frame.hx-wide{aspect-ratio:var(--ar)!important;height:auto!important}
.hx .hx-frame.hx-wide .hx-photo{background-size:100% 100%;background-position:50% 50%}
.hx .hx-frame.hx-wide .hx-photo::before{background-size:100% 100%}
.hx .hx-frame.hx-wide .hx-bfly{width:52px!important;top:-26px!important;right:-12px!important}
@media (min-width:900px){
  .hx.hx-page .hx-frame.hx-wide{width:min(36vw,520px)}
  .hx .hx-frame.hx-wide .hx-bfly{width:78px!important;top:-40px!important;right:-26px!important}
}

/* v10 B: Core Areas tabs on phones — every area visible as a wrapped pill chip with its icon, no sideways scrolling */
@media (max-width:899px){
  .core-tabs-wrap .tablist{flex-wrap:wrap;overflow:visible;scroll-snap-type:none;gap:8px;border-bottom:0;padding:2px 0 18px;margin-bottom:6px}
  .core-tabs-wrap .tab-btn{flex:0 1 auto;white-space:normal;border:1.5px solid rgba(43,27,61,.16)!important;border-radius:999px!important;background:#fff;color:var(--ink);padding:5px 14px 5px 5px;margin:0;font-size:13.5px;line-height:1.25;gap:8px;min-height:44px}
  .core-tabs-wrap .tab-btn img{width:30px;height:30px;flex:0 0 30px;border-radius:50%}
  .core-tabs-wrap .tab-btn[aria-selected="true"]{background:var(--pink-dark);border-color:var(--pink-dark)!important;color:#fff;box-shadow:0 4px 12px rgba(200,30,110,.25)!important}
  .core-tabs-wrap .tab-btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
}

/* v10: the fanned comic stack never causes sideways page scroll on phones */
#comics{overflow-x:clip}
/* v12 forms: honeypot + friendly status messages */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-msg{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#e8f7ee;color:#14532d;font-weight:600;line-height:1.45;border-left:4px solid #22a05a}
.form-msg.is-error{background:#fff1f2;color:#881337;border-left-color:#e11d48}
.form-msg[hidden]{display:none}
.form-msg:focus{outline:2px solid currentColor;outline-offset:2px}
/* v12 rings: animated frame for ringed circle photos.
   The photo never rotates: halo (::before) and dashed ring (.ring-dash::before) are separate layers.
   The ring turns inside its own square .ring-dash box (overflow:hidden) so the rotated box's corners
   can never widen the page (v13 overflow fix).
   transform/opacity only; static under prefers-reduced-motion. */
.ring-frame{display:block;position:relative;width:min(74vw,440px);max-width:100%;aspect-ratio:1;margin:44px auto 40px;isolation:isolate}
.ring-frame>.ring-photo{width:100%!important;height:100%!important;margin:0!important;outline:none!important;box-shadow:none!important;position:relative;z-index:1}
.ring-frame::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:var(--blush);z-index:0}
.ring-frame>.ring-dash{position:absolute;inset:-27px;overflow:hidden;z-index:0;pointer-events:none}
.ring-frame>.ring-dash::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px dashed var(--pink-dark)}
.band-night .ring-frame::before{background:var(--night-2)}
.band-night .ring-frame>.ring-dash::before{border-color:var(--sun)}
@media (prefers-reduced-motion:no-preference){
  .ring-frame>.ring-dash::before{animation:ring-turn 50s linear infinite;will-change:transform}
  .ring-frame::before{animation:ring-breathe 7s ease-in-out infinite}
  .ring-frame[data-reveal]>.ring-photo{transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .ring-frame[data-reveal="wait"]>.ring-photo{opacity:0;transform:scale(.94)}
  .ring-frame[data-reveal="wait"]::before{opacity:0}
  .ring-frame[data-reveal]::before{transition:opacity 1.2s ease .15s}
}
@keyframes ring-turn{to{transform:rotate(1turn)}}
@keyframes ring-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
/* v12 cards: Community Engagements slider – equal-height cards, clean photo grids */
.story-track{align-items:stretch!important}
.story-track>.engagement{height:auto}
.story-track .engagement-img{flex:0 0 auto}
.eng-grid{display:grid;gap:6px;width:100%;aspect-ratio:8/7;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.story-track .engagement-img .eng-grid img{width:100%!important;height:100%!important;min-height:0;aspect-ratio:auto!important;object-fit:cover;border-radius:14px!important;display:block}
.eng-g3>img:first-child{grid-column:1/-1;object-position:50% 72%}
.eng-g3>img:nth-child(2){object-position:50% 35%}
.eng-g3>img:nth-child(3){object-position:50% 40%}
.eng-g2{grid-template-rows:minmax(0,1fr)}
.eng-g2v{grid-template-columns:minmax(0,1fr)}
/* text area: same structure on every card, buttons pinned to the bottom on one row */
.story-track .engagement-text{flex:1 1 auto;display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto 1fr;column-gap:14px;align-items:start}
.story-track .engagement-text>*{grid-column:1/-1}
.story-track .engagement-text>.more-btn{grid-column:1;grid-row:5;align-self:end;margin-top:14px}
.story-track .engagement-text>.btn{grid-row:5;align-self:end;justify-self:start;margin-top:14px}
.story-track .engagement-text>.more-btn~.btn{grid-column:2}
.story-track .engagement-text>.btn:only-of-type:not(.more-btn~.btn){grid-column:1/-1}
.story-track .engagement-img::after{width:34px;height:34px;right:8px;bottom:8px}
/* v14 quiz: short punchy reveal, full explanation behind a small "Why?" toggle */
.qz-intro{font-size:18px;margin:6px 0 18px}
.qz-back .qz-reveal{font-size:18px;line-height:1.45;font-weight:500;color:var(--ink);margin:2px 0 10px}
.qz-why{margin:4px 0 2px}
.qz-why>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-weight:700;font-size:15px;color:var(--pink-dark);padding:6px 12px;border:1.5px solid currentColor;border-radius:999px;-webkit-tap-highlight-color:transparent}
.qz-why>summary::-webkit-details-marker{display:none}
.qz-why>summary::after{content:"+";font-size:17px;line-height:1}
.qz-why[open]>summary::after{content:"\2013"}
.qz-why>summary:focus-visible{outline:3px solid var(--pink-deep);outline-offset:2px}
.qz-why[open]>*:not(summary){font-size:15px;line-height:1.55}
.qz-why[open]>summary{margin-bottom:8px}
/* v14 overflow fix: the two fanned cards behind the top card are rotated ±3deg around their centre, so their
   corners swing sideways by ~2.6% of their height. When an answer + open "Why?" makes the stack tall, that
   pushed past the screen edge. Cap them and anchor to the bottom: the fan looks the same, its swing stays small. */
.qz-behind{align-self:end;height:min(100%,300px)}
/* v15 swipe hint: clear direction labels + flat finger for the demo nudge (animated in quiz.js, WAAPI) */
.qz-on .qz-hint{display:flex;justify-content:space-between;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:8px 4px 12px;font-size:14px;color:var(--muted)}
.qz-on .qz-hint b{color:var(--ink);font-weight:700}
.qz-h{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.qz-arr{font-weight:700;font-size:16px;line-height:1}
.qz-h-l .qz-arr{color:var(--pink-deep)}
.qz-h-r .qz-arr{color:#1E7FA0}
.qz-hand{position:absolute;left:50%;bottom:30px;z-index:7;width:30px;height:38px;margin-left:-15px;opacity:0;pointer-events:none;filter:none}
.qz-hand svg{display:block}
@media (prefers-reduced-motion:reduce){.qz-hand{display:none}}
/* v27: reduced motion keeps a still finger between the arrow labels */
.qz-hand-static{display:inline-flex;align-items:center;justify-content:center;flex:none}
.qz-hand-static svg{display:block;width:24px;height:30px}
@media (max-width:359px){.qz-hand-static{display:none}}
/* ===== v16 trim: short summaries + original text behind "Read more" ===== */
.trim-sum:has(+ .more:not([hidden])){display:none}            /* full text open (or no JS) -> hide the summary */
.trim-more>p:first-child{margin-top:0}
.notice.trim-sum{margin-bottom:6px}
/* Donate hero chips */
.gift-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0 18px;padding:0}
.gift-chips li{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:#fff;color:var(--ink,#1d1d3b);font:600 14px/1.2 var(--font-body);border:1px solid rgba(0,0,0,.08)}
/* Read more on dark bands */
.banner .more-btn{color:#fff}
.banner .more-btn .more-i{background:#fff;color:var(--pink-deep)}
.banner .trim-more,.cta-band .trim-more{color:inherit}
.cta-more{font-size:17px;max-width:46rem}
/* Period tracker: numbered steps that open */
details.phase>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
details.phase>summary::-webkit-details-marker{display:none}
details.phase>summary h3{margin:0}
details.phase>summary::after{content:"+";flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pink-deep);color:#fff;font:700 17px/1 var(--font-body)}
details.phase[open]>summary::after{content:"\2212"}
details.phase>summary:focus-visible{outline:3px solid var(--pink-dark);outline-offset:2px;border-radius:6px}
details.phase>p{margin:8px 0 0}
.link-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.chip-link{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--pink-deep);color:var(--pink-deep);font-weight:700;text-decoration:none}
.chip-link:hover{background:var(--pink-deep);color:#fff}
/* Podcast show notes */
.ep-desc[hidden]{display:none}
/* ===== v17: card "Read more" popup + plus-icon fix ===== */
/* Plus icon stray dash: the button's underline was propagating into the circle (a blockified flex item),
   drawing a line under the "+" glyph. Underline only the label text now. */
.more-btn{text-decoration:none}
.more-btn .more-l{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.more-btn .more-i{text-decoration:none;line-height:1}

.more.more-pop[hidden]{display:none!important}
html.mh-lock,html.mh-lock body{overflow:hidden}
.mh-pop{box-sizing:border-box;width:min(720px,calc(100% - 48px));max-width:720px;max-height:min(88vh,900px);margin:auto;padding:0;border:0;border-radius:18px;background:#fff;color:var(--ink);font-family:var(--font-body);box-shadow:0 12px 40px rgba(29,16,48,.18);overflow:hidden}
.mh-pop::backdrop{background:rgba(29,16,48,.55)}
.mh-pop-in{position:relative;max-height:inherit;overflow-y:auto;overscroll-behavior:contain;padding:22px 26px 26px}
.mh-pop-x{position:sticky;top:0;float:right;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:-6px -10px 6px 12px;border:0;border-radius:50%;background:var(--pink-deep);color:#fff;font:400 28px/1 var(--font-body);cursor:pointer}
.mh-pop-x:hover{background:var(--ink)}
.mh-pop-x:focus-visible{outline:3px solid var(--pink-dark);outline-offset:3px}
.mh-pop-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 18px;clear:both}
.mh-pop-media[data-n="1"] img,.mh-pop-media[data-n="3"] img:first-child{grid-column:1/-1}
.mh-pop-media img{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain;background:#f6eef3;border-radius:12px}
.mh-pop-no{margin:0 0 4px;color:var(--sky,#3aa7d6);font-weight:700;letter-spacing:.08em}
.mh-pop-t{margin:0 0 12px;font:700 clamp(22px,3vw,28px)/1.2 var(--font-body);color:var(--ink)}
.mh-pop-t span{color:var(--pink-deep)}
.mh-pop-body{font-size:16px;line-height:1.6}
.mh-pop-body dl,.mh-pop-body dd{margin:0}
.mh-pop-body dt,.mh-pop-body h4{margin:16px 0 4px;color:var(--pink-deep);font:700 12px/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.mh-pop-body dd.quote{padding-left:12px;border-left:3px solid var(--pink-deep)}
.mh-pop-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.mh-pop-links .btn{margin:0}
/* gentle open: fade + small slide */
.mh-pop[open]{animation:mhPopIn .22s ease-out}
.mh-pop[open]::backdrop{animation:mhFade .22s ease-out}
@keyframes mhPopIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mhFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.mh-pop[open],.mh-pop[open]::backdrop{animation:none}}
/* phones: near-fullscreen sheet from the bottom, big close button */
@media (max-width:640px){
  .mh-pop{width:100%;max-width:100%;max-height:94dvh;margin:auto 0 0;border-radius:18px 18px 0 0}
  .mh-pop-in{padding:16px 18px 28px}
  .mh-pop-x{width:48px;height:48px;font-size:30px;margin:-4px -6px 8px 12px}
  .mh-pop-media{grid-template-columns:1fr}
  .mh-pop-media img{grid-column:1/-1}
}

/* ===== v17b: contrast of buttons/links in default, hover and focus (>= 4.5:1) ===== */
/* --pink-dark nudged #E0287D -> #CF1F76 (in v5-head.css / v11-blog.css): passes on white, cream and blush, and with white text on it */
.impact-note .accent-link{color:var(--pink-deep)}               /* was light pink on white (2.3:1) */
.btn-pink:hover,.form .btn-blue:hover{background:#A3125D;border-color:#A3125D}  /* darker on hover, not lighter */
/* "Read more +" on dark bands: light pink by default, inverts to white on hover/focus; never turns plum-on-plum */
:is(.band-night,.banner,.core-areas.dark-bg,.hx,.site-footer,footer) .more-btn{color:#FFB3D9}
:is(.band-night,.banner,.core-areas.dark-bg,.hx,.site-footer,footer) .more-btn .more-i{background:#FFB3D9;color:var(--night)}
:is(.band-night,.banner,.core-areas.dark-bg,.hx,.site-footer,footer) .more-btn:is(:hover,:focus-visible){color:#fff}
:is(.band-night,.banner,.core-areas.dark-bg,.hx,.site-footer,footer) .more-btn:is(:hover,:focus-visible) .more-i{background:#fff;color:var(--pink-deep)}
:is(.band-night,.banner,.core-areas.dark-bg,.hx,.site-footer,footer) .more-btn:focus-visible{outline-color:#fff}
/* light sections: hover goes to ink (dark) – visible on white/cream/blush/mist */
/* ...but buttons inside white cards that sit on a dark band (Home engagements) keep the light-section style */
:is(.band-night,.banner,.core-areas.dark-bg,.hx,.site-footer,footer) :is(.engagement,.comic,.programme-card,.info-card,.grey-card) .more-btn{color:var(--pink-deep)}
:is(.band-night,.banner,.core-areas.dark-bg,.hx,.site-footer,footer) :is(.engagement,.comic,.programme-card,.info-card,.grey-card) .more-btn .more-i{background:var(--pink-deep);color:#fff}
:is(.band-night,.banner,.core-areas.dark-bg,.hx,.site-footer,footer) :is(.engagement,.comic,.programme-card,.info-card,.grey-card) .more-btn:is(:hover,:focus-visible){color:var(--ink)}
:is(.band-night,.banner,.core-areas.dark-bg,.hx,.site-footer,footer) :is(.engagement,.comic,.programme-card,.info-card,.grey-card) .more-btn:is(:hover,:focus-visible) .more-i{background:var(--ink);color:#fff}
:is(.band-night,.banner,.core-areas.dark-bg,.hx,.site-footer,footer) :is(.engagement,.comic,.programme-card,.info-card,.grey-card) .more-btn:focus-visible{outline-color:var(--pink-dark)}
/* keep photos whole but compact so the title + text start above the fold */
.mh-pop-media img{max-height:none;height:200px;object-fit:contain}
.mh-pop-media[data-n="1"] img,.mh-pop-media[data-n="3"] img:first-child{height:260px}
@media (max-width:640px){
  .mh-pop-media{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mh-pop-media img{grid-column:auto;height:120px}
  .mh-pop-media[data-n="1"] img,.mh-pop-media[data-n="3"] img:first-child{grid-column:1/-1;height:180px}
}
/* ===== v19: comic reader controls ===== */
.reader-btn,#reader-pdf{-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.reader-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 20px;border-radius:999px;border:1.5px solid transparent;font:700 15px/1 var(--font-body);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.reader-controls .reader-btn{background:var(--pink-deep);color:#fff;border-color:var(--pink-deep)}
@media (hover:hover){.reader-controls .reader-btn:not([aria-disabled="true"]):hover{background:#A3125D;border-color:#A3125D}}
.reader-btn:focus-visible,#reader-pdf:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* first/last page: clearly "off", still readable – not a faded, broken-looking pink */
.reader-controls .reader-btn[aria-disabled="true"],.reader-controls .reader-btn[aria-disabled="true"]:hover{background:transparent;color:rgba(255,255,255,.72);border:1.5px dashed rgba(255,255,255,.4);cursor:not-allowed;opacity:1}
.reader-btn:disabled{opacity:1}
/* top bar: Download PDF is a real button (sun, like other buttons on dark bands); ghost buttons get a clear outline */
#reader-pdf{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--sun)!important;color:var(--night)!important;border:1.5px solid var(--sun)!important;font:700 15px/1 var(--font-body);text-decoration:none;box-shadow:none}
@media (hover:hover){#reader-pdf:hover{background:var(--sun-deep)!important;border-color:var(--sun-deep)!important}}
.reader-top .reader-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
@media (hover:hover){.reader-top .reader-btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}}
.reader-top .btn-row{gap:8px;flex-wrap:wrap}
.reader-count{color:#fff;margin:0}
/* normal mode: keep Prev/Next on screen under the page */
.reader:not(:fullscreen) .reader-page img{max-height:max(300px,min(80vh,calc(100svh - 280px)))}
/* v28: full screen – CSS mode for iPhone (no element full screen there) + controls always on top with big tap targets */
.reader.reader-max{position:fixed;inset:0;z-index:2000;margin:0;border-radius:0;max-width:none;width:100%;height:100%;height:100dvh;overflow:auto;display:flex;flex-direction:column;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom))}
.reader.reader-max .reader-page img{max-height:calc(100dvh - 170px)}
.reader:fullscreen .reader-top,.reader.reader-max .reader-top{position:relative;z-index:5}
.reader-top .reader-btn,#reader-close,#reader-full{min-height:44px;min-width:44px}
.reader:fullscreen #reader-close,.reader.reader-max #reader-close{background:#fff;color:var(--night);border-color:#fff}
/* ===== v20b: About intro photos – the original overlapping placement, rebuilt in CSS (no white backing).
   Positions copy the old about-intro.webp (photos 681x524 on a 977x896 area). The thin rim around the top photo
   is the band colour, so the photos sit directly on the page. ===== */
.photo-duo{--rim:var(--cream,#FFF8F1);position:relative;width:100%;aspect-ratio:977/896;container-type:inline-size;background:transparent}
.band-blush .photo-duo{--rim:var(--blush)}.band-white .photo-duo{--rim:#fff}
.photo-duo img{position:absolute;display:block;width:69.7%;height:auto;aspect-ratio:681/524;object-fit:cover;border-radius:4.8% / 6.2%;box-shadow:none;background:transparent;margin:0;max-width:none}
.photo-duo .pd-a{left:0;top:0;z-index:2;box-shadow:0 0 0 1.25cqw var(--rim)}
.photo-duo .pd-b{right:0;bottom:0;z-index:1}
/* ===== v21: Community Engagements – static 3-column grid on desktop (>=1024px); phones/tablets keep the slider ===== */
@media (min-width:1024px){
  .story-track{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;overflow:visible;scroll-snap-type:none;margin:34px 0 0;padding:4px 0 8px;scroll-padding:0}
  .story-track>.engagement{flex:none;width:auto;min-width:0;scroll-snap-align:none}
  .story-track+.car-ctl,.story-track~.car-ctl{display:none!important}
  .story-track .engagement-text{padding:22px 20px 20px}
  .story-track .engagement h3{font-size:22px}
  .story-track .engagement-text>.more-btn,.story-track .engagement-text>.btn{white-space:nowrap}
  .story-track .engagement-text>.more-btn{margin-bottom:0;align-self:center}
  .story-track .engagement-text>.btn{align-self:center}
}
/* ===== v22: Home transparent header -> white as soon as you scroll; logo never moves ===== */
/* The white logo is centred with translateY(-50%); the old ".shrink .brand img{transform:none}" rule removed that
   after 40px of scroll, so the logo dropped ~24px over the hero. Keep its position fixed in every state. */
.site-header.hdr-over .brand .brand-white,
.site-header.hdr-over.shrink .brand .brand-white{position:absolute;left:0;top:50%;transform:translateY(-50%)!important}
.site-header.hdr-over.shrink .brand .brand-dark{transform:none!important}
.site-header.hdr-over,.site-header.hdr-over.shrink{transform:none!important}
/* quick colour fade only (no movement) */
.site-header.hdr-over{transition:background-color .15s ease,box-shadow .15s ease!important}
.hdr-over .brand img{transition:opacity .15s ease!important}
.hdr-over .nav-toggle,.hdr-over .menu>li>a,.hdr-over .header-cta{transition:color .15s ease,background-color .15s ease,box-shadow .15s ease,border-color .15s ease}
@media (prefers-reduced-motion:reduce){.site-header.hdr-over,.hdr-over .brand img,.hdr-over .nav-toggle,.hdr-over .menu>li>a,.hdr-over .header-cta{transition:none!important}}
/* ===== v24: Privacy page + "How we use this" links under forms ===== */
.pv-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:18px 0 12px;padding:0}
.pv-chips li{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#fff;color:var(--ink);font-weight:700;border:1px solid rgba(0,0,0,.08)}
.pv-law,.pv-sub{margin:6px 0 0}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px;margin-top:22px}
.pv-card{min-width:0;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:20px 18px;scroll-margin-top:110px}
.pv-card h3{margin:8px 0 10px;font-size:20px}
.pv-card p{margin:10px 0 0;font-size:15px}
.pv-ic{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--blush,#FDEAF3);font-size:22px;line-height:1}
.pv-fields,.pv-rights{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.pv-fields li,.pv-rights li{padding:4px 11px;border-radius:999px;background:var(--cream,#FFF8F1);border:1px solid rgba(0,0,0,.07);font-size:14px;color:var(--ink)}
.pv-rights li{background:#fff;font-weight:700}
.pv-list{max-width:820px}
.pv-row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(0,0,0,.08)}
.pv-row:first-of-type{border-top:0}
.pv-row .pv-ic{background:#fff}
.pv-row>div{min-width:0}
.pv-row h3{margin:0 0 6px;font-size:20px}
.pv-row p{margin:0}
.pv-row .trim-more p{margin-top:8px}
.pv-row .more-btn{margin-top:8px}
.pv-end .btn{word-break:break-all}
.pv-date{color:var(--muted,#5a5470)}
/* the little link under each form */
.form-privacy{margin:10px 0 0;font-size:14px}
.form-privacy a,.pv-link{color:var(--pink-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.site-footer .pv-link,.site-footer .copyright a{color:#fff}
.site-footer .pv-link:hover,.site-footer .copyright a:hover{color:#FFB3D9}
/* v31: no icons in the form cards or the "Good to know" rows (only the 4 summary chips keep theirs) */
.pv-card h3{margin-top:0}
.pv-row{display:block}
/* ===== v26: page heroes in the same style/placement as the Myth or Fact hero (.hero-quiz) ===== */
.hero-quiz.hero-podcast{background-image:url('/images/podcast-hero.webp');background-position:60% 50%}
.hero-quiz.hero-comics{background-image:url('/images/comics-hero.webp');background-position:62% 50%}
.hero-quiz.hero-tracker{background-image:url('/images/tracker-hero.webp');background-position:62% 45%}
.hero-quiz.hero-ask{background-image:url('/images/ask-hero.webp');background-position:62% 50%}
.hero-quiz.hero-privacy{background-image:url('/images/privacy-hero.webp');background-position:60% 50%}
.hero-quiz:is(.hero-podcast,.hero-comics,.hero-tracker,.hero-ask,.hero-privacy) .page-title{white-space:normal}
@media (max-width:700px){
  .hero-quiz.hero-podcast{background-image:url('/images/podcast-hero-m.webp');background-position:50% 50%}
  .hero-quiz.hero-comics{background-image:url('/images/comics-hero-m.webp');background-position:50% 50%}
  .hero-quiz.hero-tracker{background-image:url('/images/tracker-hero-m.webp');background-position:50% 40%}
  .hero-quiz.hero-ask{background-image:url('/images/ask-hero-m.webp');background-position:50% 50%}
  .hero-quiz.hero-privacy{background-image:url('/images/privacy-hero-m.webp');background-position:50% 50%}
}
.hero-alt{position:absolute;inset:0;pointer-events:none}
/* ===== v29: phones (<768px) – subpage hero pictures become a slim banner (min(200px,26vh)) so the title and
   content show on the first screen. Home (.hx-full) is untouched. Tablet/desktop unchanged. ===== */
@media (max-width:767px){
  /* photo-background heroes (Projects, Contact, Events, Quiz, Podcast, Comics, Tracker, Ask, Privacy) */
  main .hero.hero-page{min-height:0!important;height:min(200px,26vh);padding:0!important;background-size:cover}
  main .hero.hero-page .hero-content{min-height:100%!important;height:100%;display:flex;align-items:flex-end;justify-content:flex-start;text-align:left;padding:0 20px 34px!important}
  main .hero.hero-page .page-title{font-size:clamp(28px,8.6vw,38px)!important;line-height:1.05;margin:0;text-align:left;white-space:normal;color:#fff;text-shadow:0 1px 14px rgba(42,27,61,.45)}
  main .hero.hero-page::before{background:linear-gradient(0deg,rgba(42,27,61,.78) 0,rgba(42,27,61,.4) 45%,rgba(42,27,61,.08) 100%)!important}
  /* wide pictures crop better into a short banner than the tall phone crops */
  .hero-quiz{background-image:url('/images/quiz-hero.webp')!important;background-position:68% 40%!important}
  .hero-quiz.hero-podcast{background-image:url('/images/podcast-hero.webp')!important;background-position:66% 62%!important}
  .hero-quiz.hero-comics{background-image:url('/images/comics-hero.webp')!important;background-position:70% 45%!important}
  .hero-quiz.hero-tracker{background-image:url('/images/tracker-hero.webp')!important;background-position:72% 40%!important}
  .hero-quiz.hero-ask{background-image:url('/images/ask-hero.webp')!important;background-position:74% 55%!important}
  .hero-quiz.hero-privacy{background-image:url('/images/privacy-hero.webp')!important;background-position:62% 60%!important}
  /* framed-photo heroes (About, Donate): slim photo banner + smaller title */
  .hx.hx-page .hx-frame,.hx.hx-page .hx-frame.hx-wide{aspect-ratio:auto!important;height:min(200px,26vh)!important;width:100%!important;max-width:none!important}
  .hx.hx-page .hx-photo{background-size:cover!important;background-position:50% 40%!important}
  .hx-page .hx-type.page-title{font-size:clamp(34px,10vw,46px)!important}
  .hx-page .hx-long{font-size:clamp(24px,6.8vw,32px)!important}
  .hx-page .hx-bfly,.hx-donate .hx-bfly{width:22vw!important}
  .hx-page .hx-scroll{display:none}
}
/* Podcast: the studio still is gone (it repeated the hero) – title, cover and player use the full width */
.podcast-hero.pod-feature{grid-template-columns:minmax(0,1fr)!important;gap:0}
.podcast-hero.pod-feature>div{max-width:860px}
/* v32 final review – contrast fixes (WCAG AA 4.5:1) */
.light-figs b{color:var(--pink-deep)}                       /* Projects comic numbers: was light pink on cream (2.2:1) */
.form-section .form-privacy a{color:#FE80C0}                 /* "How we use this" under Donate/Volunteer forms sits on the dark band (was 2.7:1) */
.comic-meta strong{color:var(--pink-deep)}                    /* Projects comic cards: "English / 20 / 44MB" was light pink on white (2.3:1) */
/* ===== v33: Donate hero – gentle, natural brightening of the two-children photo (all widths), and on phones
   (<768px) a short 200px photo banner with the title on it, like the other subpages; the gift chips and
   DONATE button follow below on the dark band. Tablet/desktop layout unchanged. ===== */
/* v35: the gentle brightening is now baked into donate-hero.webp (re-encoded from the original PNG at q90),
   so no CSS filter – a filter on the animated layer made the browser soften the photo */
.hx-donate .hx-frame .hx-photo::before{filter:none}
@media (max-width:767px){
  .hx.hx-donate{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:min(200px,26vh) auto!important;min-height:0!important;height:auto!important;padding:0!important;gap:0!important}
  .hx.hx-donate .hx-frame,.hx.hx-donate .hx-frame.hx-wide{grid-area:1/1!important;margin:0!important;height:min(200px,26vh)!important;width:100%!important;position:relative!important;transform:none!important}
  .hx-donate .hx-frame::before,.hx-donate .hx-frame::after{display:none!important}
  .hx-donate .hx-frame .hx-photo{border-radius:0!important;background-size:cover!important;background-position:50% 30%!important}
  .hx-donate .hx-frame .hx-photo::before{background-size:cover!important;background-position:50% 30%!important;animation:none!important}
  .hx-donate .hx-frame .hx-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(42,27,61,.82) 0,rgba(42,27,61,.42) 50%,rgba(42,27,61,0) 100%)}
  .hx-donate .hx-bfly,.hx-donate .hx-corner,.hx-donate .hx-front{display:none!important}
  .hx.hx-donate .hx-stage{grid-area:1/1!important;align-self:end!important;position:relative;z-index:2;margin:0!important;padding:0 20px 16px!important;min-height:0!important;height:auto!important;display:block!important}
  .hx.hx-donate .hx-stage .hx-type{position:static!important;font-size:clamp(21px,5.8vw,25px)!important;line-height:1.12!important;margin:0!important;color:#fff;text-shadow:0 1px 12px rgba(42,27,61,.5);transform:none!important}
  .hx.hx-donate .hx-foot{grid-row:2!important;grid-column:1!important;padding:18px 20px 30px!important;margin:0!important;position:static!important}
}
/* v34: Comics page closing line – plain text, no box, no border; same 24px rhythm as the card grid gap */
.comics-end{margin:24px 0 0;max-width:none;font-size:16px;line-height:1.6;color:var(--muted)}
.comics-end a{color:var(--pink-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.comics-end a:hover,.comics-end a:focus-visible{color:var(--ink)}
/* v13: safety net only – the real overflow causes (rotating ring box, sideways reveals) are fixed at source.
   clip (not hidden) so position:sticky and the header keep working. */
html,body{overflow-x:clip}