:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: multi-page static site (hash routing) in the funder-deck style: dark indigo top bar, white pages, Georgia headlines, lavender cards, indigo footer. Team cards follow the approved mat-frame design. Single light look by choice. */
:root{
  color-scheme:light;
  --paper:#FFFFFF; --mist:#F3F1F8; --lav:#ECE9F7; --frame:#E6E1EF; --line:#D9D4EE;
  --ink:#1E1E4C; --violet:#68349A; --violet-dk:#56288A; --plum:#8E3E98; --cobalt:#3D4DB5; --soft:#5C5B7B; --muted:#7A7896;
  --crimson:#9E1C4E; --gold:#F2CC5F; --pink:#F4B6B4; --sel:#E2C6EA;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Jost",Futura,"Century Gothic","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,4.5vw,64px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans)}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0;text-wrap:balance}
h2{font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.08;letter-spacing:-.01em}
h3{font-size:clamp(1.35rem,1.9vw,1.7rem);line-height:1.2}
.eyebrow{font:600 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.lead{font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.6;color:var(--soft);max-width:42em}
.muted{color:var(--soft)}
.tbc{background:#FFF1C9;color:var(--ink);padding:0 .25em;border-radius:4px}

/* ---------- header ---------- */
header{position:relative;z-index:30}
header .wrap{display:flex;align-items:center;gap:16px;padding-block:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 1rem/1.05 var(--serif);color:inherit;margin-right:auto}
.brand svg{flex:none}
.menu{display:flex;align-items:center;gap:2px}
.menu > a,.trigger{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;background:none;font:500 1rem/1 var(--sans);color:inherit;opacity:.82;text-decoration:none;cursor:pointer;border-radius:8px}
.menu > a:hover,.trigger:hover,.trigger[aria-expanded="true"],.menu > a.on,.trigger.on{opacity:1;background:var(--hover)}
.trigger svg{transition:transform .2s}
.trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd{position:relative}
.panel{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(30,30,76,.18);padding:8px;color:var(--ink)}
.panel a{display:block;padding:9px 14px;border-radius:9px;text-decoration:none;color:inherit;font-size:.98rem}
.panel a:hover b{color:var(--violet)}
.panel a:hover{background:var(--mist)}
.panel b{font-weight:400;color:inherit}
.panel span{font-size:.92rem;color:var(--soft);line-height:1.35}
.panel.lang{left:auto;right:0;min-width:170px}
.panel.lang button{display:flex;justify-content:space-between;width:100%;padding:10px 14px;border:0;background:none;border-radius:9px;font:500 1rem/1.2 var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.panel.lang button:hover{background:var(--mist)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:14px 26px;font:600 1.02rem/1 var(--sans);text-decoration:none;border:1.5px solid var(--violet);cursor:pointer;transition:background .2s,color .2s}
.btn.fill{background:var(--violet);color:#fff}
.btn.fill:hover{background:var(--violet-dk);border-color:var(--violet-dk)}
.btn.line{color:var(--violet);background:transparent}
.btn.line:hover{background:var(--lav)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.menu .btn.fill{padding:11px 22px;margin-left:8px;opacity:1}
header.dk .menu .btn.fill{background:var(--a-lite);border-color:var(--a-lite);color:var(--ink)}
.burger{display:none;width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer;border-radius:8px}
@media (max-width:1140px){
  .menu{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .menu.open{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;background:inherit;padding:8px var(--gutter) 20px;border-top:1px solid var(--line)}
  header.dk .menu.open{background:var(--ink)}
  header.lt .menu.open{background:var(--mist)}
  .menu.open .panel{position:static;box-shadow:none;border:0;background:transparent;padding:0 0 4px 14px;min-width:0}
  header.dk .menu.open .panel,header.dk .menu.open .panel b,header.dk .menu.open .panel.lang button{color:var(--on-dark)}
  header.lt .menu.open .panel,header.lt .menu.open .panel b,header.lt .menu.open .panel.lang button{color:var(--ink)}
  .menu.open .panel{background:transparent}
  .menu.open .panel span{color:inherit;opacity:.75}
  .menu.open .panel a:hover,.menu.open .panel.lang button:hover{background:var(--hover)}
  .menu.open .btn{margin:10px 0 0;align-self:flex-start}
}

/* ---------- page scaffolding ---------- */
.page[hidden]{display:none}
.phead{background:var(--mist);border-bottom:1px solid var(--line)}
.phead .wrap{padding-block:clamp(44px,6vw,80px) clamp(36px,5vw,64px);display:grid;gap:14px}
.phead h1{font-size:clamp(2.6rem,5.6vw,4.8rem);line-height:1.04;letter-spacing:-.015em}
.phead .sub{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.phead .sub a{font-size:.95rem;text-decoration:none;color:var(--violet);border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px}
.phead .sub a:hover{border-color:var(--violet)}
.sec{padding-block:clamp(52px,7vw,96px)}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{display:grid;gap:12px;margin-bottom:clamp(26px,3.4vw,42px);max-width:52em}
.note{font-size:.95rem;color:var(--muted);font-style:italic}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:clamp(24px,3vw,48px);align-items:center;padding-block:clamp(36px,5.5vw,88px) clamp(48px,6vw,96px)}
.hero h1{font-size:clamp(2.5rem,4.4vw,4.3rem);line-height:1.1;letter-spacing:-.012em}
.hero h1 .gm{color:var(--violet)}
.hero .lead{margin-top:clamp(22px,2.6vw,34px)}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,38px)}
.map{margin:0;min-width:0;width:calc(100% + var(--gutter))}
.map canvas{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:2.6}
.legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;font-size:.92rem;color:var(--soft)}
.legend span{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.legend span i{align-self:center}
.legend i{display:block;width:22px;height:6px;border-radius:3px}
.legend .lnote{flex-basis:100%;font-size:.88rem;opacity:.85}
.blocks{background:var(--lav)}
.blocks ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.blocks li{background:#fff;border-radius:18px;padding:clamp(24px,2.6vw,34px);display:grid;gap:12px;align-content:start}
.blocks h2{font-size:clamp(1.45rem,2vw,1.8rem)}
.blocks p{color:var(--soft)}
.more{display:inline-flex;align-items:center;gap:8px;color:var(--violet);font-weight:600;text-decoration:none;margin-top:4px}
.more:hover span{transform:translateX(3px)}
.more span{transition:transform .2s}
@media (max-width:900px){.hero{grid-template-columns:1fr}.map{width:100%}.blocks ul{grid-template-columns:1fr}}

/* ---------- about ---------- */
.who{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4vw,64px);align-items:start}
.who .txt{display:grid;gap:16px;font-size:1rem}
.who .txt p:first-child{font:400 clamp(1.3rem,1.9vw,1.6rem)/1.4 var(--serif);color:var(--ink)}
.stat{background:var(--ink);color:#fff;border-radius:18px;padding:clamp(24px,3vw,36px);display:grid;gap:10px}
.stat b{font:400 clamp(3.4rem,6vw,4.8rem)/1 var(--serif);color:#DA8BD8}
.stat span{color:#D7D4EC}
@media (max-width:860px){.who{grid-template-columns:1fr}}
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.why li{background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:grid;gap:8px;align-content:start}
.why b{font:400 1.25rem/1.25 var(--serif);color:var(--violet)}
.why p{color:var(--soft);font-size:1rem}
@media (max-width:980px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.why{grid-template-columns:1fr}}
.sponsor{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;background:var(--lav);border-radius:18px;padding:22px 28px}
.sponsor b{font:400 1.35rem/1.2 var(--serif)}

/* team cards (approved design) */
.people-sec{background:var(--mist)}
.people{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,40px) clamp(16px,2.2vw,34px)}
.people.board{grid-template-columns:repeat(4,minmax(0,1fr))}
.pcard{display:grid;gap:4px;align-content:start}
.mat{display:block;background:var(--frame);padding:clamp(10px,1.1vw,16px);margin-bottom:16px;border:0;width:100%;cursor:pointer;transition:background .2s}
.mat img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 35%;max-width:100%}
.pcard.on .mat{background:var(--sel)}
.mat:hover{background:#DDD6EA}
.pcard.on .mat:hover{background:var(--sel)}
.pname{font:400 clamp(1.35rem,1.75vw,1.75rem)/1.2 var(--serif);color:var(--ink)}
.prole{font:italic 400 clamp(1.05rem,1.3vw,1.25rem)/1.3 var(--serif);color:var(--soft)}
.ploc{display:flex;align-items:center;gap:10px;color:var(--soft);font-size:1rem;margin-top:8px}
.ploc .shapes{display:flex;gap:4px;align-items:center}
.ploc svg{height:20px;width:auto;fill:var(--plum)}
.biob{justify-self:start;margin-top:14px;border:0;background:none;padding:0 0 3px;font:700 1.05rem/1.2 var(--sans);color:var(--ink);border-bottom:2.5px solid var(--gold);cursor:pointer}
.biob:hover{color:var(--violet)}
.biopanel{margin-top:clamp(28px,3.5vw,48px);border-top:1px solid var(--line);padding-top:clamp(28px,3.5vw,48px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;gap:clamp(24px,4vw,64px);align-items:start}
.biopanel[hidden]{display:none}
.bmap{position:relative;margin:0}
.bmap img{display:block;width:100%;max-width:100%;height:auto}
.bmap .dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--plum);box-shadow:0 0 0 4px color-mix(in srgb,var(--plum) 18%,transparent)}
.bmap figcaption{margin-top:16px;color:var(--soft)}
.btext{display:grid;gap:6px}
.btext h3{font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.1}
.btext .prole{font-size:clamp(1.2rem,1.6vw,1.45rem)}
.btext p{margin-top:22px;font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.75;color:var(--ink);max-width:46em}
.bclose{border:0;background:none;font-size:1.9rem;line-height:1;color:var(--ink);cursor:pointer;width:44px;height:44px;border-radius:50%}
.bclose:hover{background:var(--lav)}
@media (max-width:1100px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}.people.board{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.people,.people.board{grid-template-columns:repeat(2,minmax(0,1fr))}.biopanel{grid-template-columns:1fr auto}.bmap{grid-column:1/-1;order:3;max-width:420px}}

/* ---------- approach ---------- */
.hazards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.hz{display:grid;gap:12px;align-content:start}
.ph{position:relative;display:block;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--lav)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;max-width:100%}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,30,76,0) 55%,rgba(30,30,76,.35))}
.hz p{color:var(--soft)}
.chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:clamp(26px,3vw,40px)}
.chip{border:1.5px solid var(--violet);color:var(--violet);border-radius:999px;padding:7px 15px;font-weight:600;font-size:.9rem}
@media (max-width:860px){.hazards{grid-template-columns:1fr}}
.toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.toc li{display:grid;gap:12px;align-content:start}
.barrier{font-size:.98rem;color:var(--soft);border-top:2px solid var(--line);padding-top:12px}
.barrier b{display:block;font:700 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.arrow{color:var(--plum);font-size:1.4rem;line-height:1}
.path{background:var(--lav);border-radius:16px;padding:22px 24px;display:grid;gap:8px}
.path b{font:400 1.25rem/1.25 var(--serif);color:var(--plum)}
.path p{color:var(--ink);font-size:1rem}
.impact{margin-top:clamp(20px,2.4vw,30px);background:var(--ink);color:var(--on-dark,#fff);border-radius:16px;padding:22px 28px;display:grid;grid-template-columns:auto 1fr;gap:10px 28px;align-items:center}
.impact b{font:600 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--a-lite)}
.impact p{font:400 1.15rem/1.45 var(--serif)}
@media (max-width:860px){.toc{grid-template-columns:1fr}.impact{grid-template-columns:1fr}}
.crit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin-top:26px}
.crit li{background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;gap:10px;align-content:start}
.num{width:34px;height:34px;border-radius:50%;background:var(--plum);color:#fff;font:700 .95rem/34px var(--sans);text-align:center}
.crit b{font:400 1.2rem/1.25 var(--serif)}
.crit p{color:var(--soft);font-size:.98rem}
@media (max-width:980px){.crit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.crit{grid-template-columns:1fr}}
.look{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.look li{border-left:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:grid;gap:6px}
.look b{font:400 1.25rem/1.25 var(--serif);color:var(--violet)}
.look p{color:var(--soft)}
@media (max-width:760px){.look{grid-template-columns:1fr}}

/* ---------- apply ---------- */
.status{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;background:var(--ink);color:#fff;border-radius:18px;padding:22px 28px;margin-bottom:clamp(36px,4vw,56px)}
.status .pill{background:#C9A2F0;color:var(--ink);border-radius:999px;padding:6px 14px;font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.status p{font:400 1.2rem/1.4 var(--serif);flex:1;min-width:240px}
.notify{display:flex;gap:8px;flex-wrap:wrap}
.notify input{border:0;border-radius:999px;padding:12px 18px;font:400 1rem var(--sans);min-width:0;width:240px;max-width:100%}
.notify .btn{background:#C9A2F0;border-color:#C9A2F0;color:var(--ink);padding:12px 20px}
.glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.glance li{border-top:2px solid var(--ink);padding-top:16px;display:grid;gap:6px}
.glance b{font:400 clamp(2.2rem,3.6vw,3rem)/1 var(--serif);color:var(--plum);font-variant-numeric:tabular-nums}
.glance p{color:var(--soft)}
@media (max-width:760px){.glance{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);counter-reset:s}
.steps li{counter-increment:s;background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;gap:10px;align-content:start}
.steps li::before{content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--plum);color:#fff;font:700 .95rem/34px var(--sans);text-align:center}
.steps li:last-child::before{background:var(--ink)}
.steps b{font:400 1.2rem/1.25 var(--serif)}
.steps p{color:var(--soft);font-size:.98rem}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- projects ---------- */
.soon{display:inline-flex;align-items:center;gap:8px;background:#FFF1C9;color:var(--ink);border-radius:999px;padding:6px 14px;font-weight:700;font-size:.85rem}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,3.5vw,56px);align-items:start}
.pcardx{background:#fff;border:1px dashed var(--line);border-radius:18px;overflow:hidden}
.pcardx .img{aspect-ratio:16/9;background:linear-gradient(135deg,var(--lav),#DCD3EE);display:grid;place-items:center;color:var(--muted);font-size:.95rem}
.pcardx .body{padding:22px 24px;display:grid;gap:10px}
.pcardx dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:.98rem}
.pcardx dt{color:var(--muted)}
.pcardx dd{margin:0}
.tag{justify-self:start;font:700 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--plum);background:var(--lav);border-radius:999px;padding:6px 10px}
@media (max-width:860px){.pgrid{grid-template-columns:1fr}}
.mapbox{position:relative;background:var(--mist);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,2.4vw,30px)}
.mapbox img{display:block;width:100%;height:auto;max-width:100%;opacity:.9}
.mapbox .soon{position:absolute;top:18px;right:18px}
.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:22px}
.metrics li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:6px;align-content:start}
.metrics b{font:400 1.8rem/1 var(--serif);color:var(--muted)}
.metrics span{font-size:.92rem;color:var(--soft)}
@media (max-width:980px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dash{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,3vw,48px);align-items:center;background:var(--ink);color:#fff;border-radius:20px;padding:clamp(26px,3.4vw,44px)}
.dash h2{color:#fff}
.dash p{color:#D7D4EC;margin-top:12px}
.dash .soon{margin-top:18px}
.dash .lock{justify-self:center;width:min(220px,100%);aspect-ratio:1;border-radius:50%;background:#2C2C66;display:grid;place-items:center}
@media (max-width:760px){.dash{grid-template-columns:1fr}.dash .lock{display:none}}

/* ---------- news ---------- */
.posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.posts li{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid;align-content:start}
.posts .cov{aspect-ratio:16/10;background:linear-gradient(135deg,#6346B0,#B4549C)}
.posts li:nth-child(2) .cov{background:linear-gradient(135deg,#3B4AB3,#6346B0)}
.posts li:nth-child(3) .cov{background:linear-gradient(135deg,#8E3E98,#3B4AB3)}
.posts li:nth-child(4) .cov{background:linear-gradient(135deg,#1E1E4C,#8E3E98)}
.posts .body{padding:18px 20px;display:grid;gap:8px}
.posts b{font:400 1.18rem/1.3 var(--serif)}
@media (max-width:980px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.posts{grid-template-columns:1fr}}
.subscribe{margin-top:clamp(28px,3.4vw,44px);display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;background:var(--lav);border-radius:18px;padding:22px 28px}
.subscribe b{font:400 1.35rem/1.25 var(--serif)}
.subscribe form{display:flex;gap:8px;flex-wrap:wrap}
.subscribe input{border:1px solid var(--line);border-radius:999px;padding:12px 18px;font:400 1rem var(--sans);width:260px;max-width:100%}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4vw,64px);align-items:start}
form.cf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fld{display:grid;gap:6px;min-width:0}
.fld.full{grid-column:1/-1}
.fld label,.fld legend{font-weight:600;font-size:.98rem}
.fld .opt{font-weight:400;color:var(--muted)}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:400 1rem var(--sans);color:var(--ink);background:#fff}
.fld textarea{min-height:150px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--violet);outline-offset:1px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.98rem}
.check input{margin-top:5px;width:18px;height:18px;accent-color:var(--violet)}
.err{color:#A3213D;font-size:.9rem}
.sent{grid-column:1/-1;background:var(--lav);border-radius:14px;padding:16px 18px}
.side{display:grid;gap:18px}
.side .box{background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:grid;gap:8px}
.side .mail{user-select:all;font:400 1.1rem/1.3 var(--serif);overflow-wrap:anywhere}
.soc{display:flex;gap:10px;flex-wrap:wrap}
.soc a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-weight:600}
.soc a:hover{border-color:var(--violet);color:var(--violet)}
@media (max-width:860px){.contact{grid-template-columns:1fr}form.cf{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{}
footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 40px;padding-block:44px;font-size:.98rem}
footer .name{font:400 1.25rem/1.2 var(--serif)}
footer .left{display:grid;gap:6px}
footer .mail{user-select:all}
footer nav{display:flex;flex-wrap:wrap;gap:18px;align-items:end;justify-content:flex-end}
footer nav a{color:inherit;opacity:.8;text-decoration:none}
footer nav a:hover{opacity:1}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}footer nav{justify-content:flex-start}}

/* ---------- design system: light and dark sections ---------- */
.band{width:100%}
header.lt{background:var(--mist);color:var(--ink);border-bottom:1px solid var(--line)}
header.dk{background:var(--ink);color:var(--on-dark)}
footer.lt{background:var(--lav);color:var(--ink)}
footer.dk{background:var(--ink);color:var(--on-dark)}
.dk:not(header):not(footer){background:var(--ink)!important;color:var(--on-dark);border-color:var(--line-dk)!important}
.dk h1,.dk h2,.dk h3,.dk .pname,.dk .who .txt p:first-child,.dk .glance b{color:var(--on-dark)}
.dk p,.dk .lead,.dk .muted,.dk .prole,.dk .ploc,.dk .note,.dk .hz p{color:var(--on-dark-soft)}
.dk .eyebrow,.dk .more,.dk .hero h1 .gm,.dk .why b,.dk .look b,.dk .path b{color:var(--a-lite)}
.dk .btn.fill{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
.dk .btn.line{color:var(--on-dark);border-color:var(--on-dark)}
.dk .btn.line:hover{background:var(--ink-2)}
.dk .blocks li,.dk li.card,.blocks.dk li,.dk .why li,.dk .crit li,.dk .look li,.dk .steps li,.dk .path,.dk .pcardx,.dk .posts li,.dk .sponsor,.dk .side .box{background:var(--ink-2)!important;border-color:var(--line-dk)!important;color:var(--on-dark)}
.dk .mat{background:var(--ink-2)}
.dk .mat:hover{background:var(--line-dk)}
.dk .pcard.on .mat{background:var(--sel)}
.dk .biob{color:var(--on-dark)}
.dk .biopanel{border-color:var(--line-dk)}
.dk .bmap img{filter:brightness(.42) saturate(1.2)}
.dk .chip{color:var(--a-lite);border-color:var(--a-lite)}
.dk .ploc svg{fill:var(--a-lite)}
.dk .barrier{border-color:var(--line-dk)}
.dk .legend{color:var(--on-dark-soft)}
/* type scale: compact body copy inside components */
.hz p,.why p,.path p,.crit p,.look p,.steps p,.blocks p,.posts .body,.pcardx dl,.pcardx p,.side .box,.metrics span,.barrier,.glance p{font-size:.94rem;line-height:1.6}
.hz h3{font-size:clamp(1.4rem,2vw,1.8rem);margin-top:4px}
.why b,.look b,.path b,.crit b,.steps b{font-size:1.2rem}
.btext p{font-size:1.02rem!important;line-height:1.7!important}
.pname{font-size:clamp(1.3rem,1.6vw,1.6rem)!important}
.blocks h2{font-size:clamp(1.6rem,2.3vw,2.1rem)!important}
.sec-head{gap:14px}
/* ---------- pop: big is big, small is small ---------- */
body{font-size:16px;line-height:1.6}
h1,h2,h3,.pname,.why b,.look b,.path b,.crit b,.steps b,.posts b,.glance b,.stat b{letter-spacing:-.025em}
h2{font-size:clamp(2.5rem,4.8vw,4.6rem);line-height:1.02;letter-spacing:-.035em}
.phead h1{font-size:clamp(3rem,7.2vw,6.6rem);line-height:.98;letter-spacing:-.04em}
.hero h1{font-size:clamp(2.8rem,4.6vw,4.6rem);line-height:1.02;letter-spacing:-.035em}
.blocks h2{font-size:clamp(1.8rem,2.6vw,2.5rem)!important;letter-spacing:-.03em}
.hz h3{font-size:clamp(1.6rem,2.3vw,2.2rem);letter-spacing:-.03em}
.why b,.look b,.path b,.crit b,.steps b{font-size:clamp(1.35rem,1.7vw,1.6rem);line-height:1.15}
.who .txt p:first-child{font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.25;letter-spacing:-.02em}
.impact p{font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.3;letter-spacing:-.02em}
.status p{font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.02em}
.stat b{font-size:clamp(4.4rem,8vw,7rem)}
.glance b{font-size:clamp(2.8rem,4.6vw,4.2rem)}
.hz p,.why p,.path p,.crit p,.look p,.steps p,.blocks p,.posts .body,.pcardx dl,.pcardx p,.side .box,.metrics span,.barrier,.glance p,.who .txt p.muted,.chips .muted,.legend{font-size:.9rem;line-height:1.6}
.lead{font-size:clamp(1rem,1.15vw,1.08rem)}
.eyebrow,.barrier b,.impact b,.tag{font-size:.68rem;letter-spacing:.18em}
.menu > a,.trigger{font-size:.9rem}
.chip{font-size:.8rem;padding:6px 13px}
.btn{font-size:.92rem;padding:13px 24px}
.ploc,.prole{font-size:.92rem}
.prole{font-size:clamp(1rem,1.2vw,1.12rem)}
/* footer: big serif links, tiny meta */
footer .wrap{grid-template-columns:1fr;gap:clamp(36px,5vw,72px);padding-block:clamp(56px,7vw,104px) 36px}
footer .ftop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,96px);align-items:start}
footer nav.big{display:grid;grid-template-columns:repeat(2,max-content);gap:12px clamp(32px,4vw,72px);justify-content:end}
.fnews b{display:block;font:400 clamp(1.7rem,2.5vw,2.3rem)/1.1 var(--serif);letter-spacing:-.03em}
.fnews p{font-size:.86rem;line-height:1.55;opacity:.78;margin-top:10px;max-width:30em}
.fnews form{display:flex;gap:8px;margin-top:20px;max-width:460px}
.fnews input{flex:1;min-width:0;border:1px solid color-mix(in srgb,currentColor 35%,transparent);background:transparent;color:inherit;border-radius:999px;padding:12px 18px;font:400 .95rem var(--sans)}
.fnews input::placeholder{color:inherit;opacity:.6}
.fnews .btn{background:var(--a-lite);border-color:var(--a-lite);color:var(--ink);padding:12px 22px}
footer.lt .fnews .btn{background:var(--violet);border-color:var(--violet);color:#fff}
@media (max-width:760px){footer .ftop{grid-template-columns:1fr}footer nav.big{justify-content:start}}
footer nav.big a{opacity:1}
@media (min-width:901px){.hero{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}}
footer .big a{font:400 clamp(1.3rem,1.8vw,1.65rem)/1.2 var(--serif);letter-spacing:-.02em;text-decoration:none;color:inherit}
footer .big a:hover{color:var(--a-lite)}
footer.lt .big a:hover{color:var(--violet)}
footer .meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 40px;align-items:end;border-top:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent);padding-top:22px;font-size:.78rem;opacity:.9}
footer .name{font:400 1.1rem/1.2 var(--serif)}
footer nav{gap:20px;font-size:.78rem}
@media (max-width:760px){footer .meta{grid-template-columns:1fr}}
/* ---------- home: three pillars (sticky stacked titles) ---------- */
.pillars{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);column-gap:clamp(28px,5vw,96px);row-gap:clamp(64px,8vw,128px)}
.pt{grid-column:1;position:sticky;align-self:start;display:flex;gap:16px;align-items:flex-start;font-size:clamp(1.8rem,2.7vw,2.6rem);line-height:1.05;letter-spacing:-.035em;transition:opacity .3s}
.pt:nth-of-type(1){top:.8em}.pt:nth-of-type(2){top:2.7em}.pt:nth-of-type(3){top:5.6em}
.pn{flex:none;display:grid;place-items:center;width:1.15em;height:1.15em;border-radius:50%;background:var(--plum);color:#fff;font:400 .55em/1 var(--serif);letter-spacing:0;margin-top:-.02em}
.pillars.js .pt{opacity:.32}
.pillars.js .pt.on{opacity:1}
.pb{grid-column:2;display:grid;gap:18px;align-content:start}
.pimg{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:var(--lav)}
.pimg img{display:block;width:100%;height:100%;object-fit:cover;max-width:100%}
.pstat{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);max-width:min(280px,80%);background:var(--gold);color:var(--ink);padding:16px 18px;border-radius:12px;font-size:.84rem;line-height:1.4}
.pstat b{display:block;font:400 clamp(2.2rem,3.6vw,3.2rem)/1 var(--serif);letter-spacing:-.035em;margin-bottom:8px}
.pb > p{font-size:1rem;line-height:1.6;color:var(--soft);max-width:36em}
.ex{display:flex;flex-wrap:wrap;gap:8px}
.ex li{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.8rem;color:var(--ink)}
.src{font-size:.72rem!important;color:var(--muted)!important}
.dk .ex li{border-color:var(--line-dk);color:var(--on-dark)}
.dk .pt{color:var(--on-dark)}
@media (max-width:860px){.pillars{grid-template-columns:1fr;row-gap:18px}.pt{position:static;grid-column:1;opacity:1!important}.pb{grid-column:1;margin-bottom:44px}}
/* ---------- home: four solution tiles ---------- */
.sol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.sol a{display:flex;flex-direction:column;gap:14px;min-height:clamp(250px,24vw,340px);padding:clamp(20px,2vw,28px);border-radius:16px;text-decoration:none;transition:transform .2s}
.sol a:hover{transform:translateY(-4px)}
.sol h3{font-size:clamp(1.6rem,2.3vw,2.3rem);line-height:1.04;letter-spacing:-.035em;color:inherit}
.sol p{margin-top:auto;font-size:.84rem;line-height:1.5}
.sol .arr{font-size:1.2rem;line-height:1}
.sol .s1 a{background:var(--lav);color:var(--ink)}
.sol .s2 a{background:var(--ink);color:var(--on-dark,#fff)}
.sol .s3 a{background:var(--sel);color:var(--ink)}
.sol .s4 a{background:var(--violet);color:#fff}
.dk .sol .s2 a{background:var(--ink-2)}
.dk .sol p{color:inherit}
@media (max-width:980px){.sol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sol{grid-template-columns:1fr}.sol a{min-height:180px}}
/* ---------- hero map bigger, legend smaller ---------- */
@media (min-width:901px){.hero .map{width:calc(100% + var(--gutter) + 3vw);margin-left:-3vw}}
.hero .legend{display:block;font-size:.8rem!important;line-height:1.5;max-width:36em;margin-left:3vw}
.hero .legend span{display:block}
.hero .legend i{display:inline-block;vertical-align:middle;margin-right:8px;width:18px;height:5px}
.hero .legend b{font-weight:500!important}
@media (max-width:900px){.hero .legend{margin-left:0}}
.hero{padding-block:clamp(24px,3vw,48px)}
@media (min-width:901px){.hero{min-height:calc(100svh - var(--hdr,84px))}}
#home-fund{padding-top:clamp(44px,5vw,72px)}
.ask{align-self:center;color:var(--soft);font-size:.95rem;margin-left:6px}
.ask .more{margin:0 0 0 4px}
.bioslot{grid-column:1/-1;list-style:none}
.bioslot .biopanel{margin-top:0;padding-top:clamp(18px,2.4vw,28px);padding-bottom:clamp(18px,2.4vw,28px);border-bottom:1px solid var(--line)}
.dk .bioslot .biopanel{border-color:var(--line-dk)}
.sec{padding-block:clamp(40px,8svh,84px)}
/* keep long sections within one screen */
@media (min-width:861px){
  #approach-fund .ph{aspect-ratio:2/1}
  #approach-fund .chips .muted{font-size:.82rem!important}
  #approach-fund .chip{font-size:.74rem;padding:5px 11px}
  #approach-fund .chips + p{font-size:.82rem;margin-top:10px!important}
  #approach-change .impact p{font-size:clamp(1.1rem,1.45vw,1.3rem)}
  #approach-change .impact + p{margin-top:14px!important}
  #approach-fund .hz{gap:10px}
  #approach-fund .hz p{line-height:1.5}
  #approach-fund .chips{margin-top:clamp(18px,3svh,28px)}
  #approach-change .path{padding:18px 20px}
  #approach-change .toc{gap:clamp(14px,1.6vw,22px)}
  #approach-change .impact{padding:18px 24px}
}
.panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}

/* ---------- stat card and photo tone ---------- */
.pstat{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);box-shadow:0 10px 30px rgba(30,30,76,.18)}
.pstat b{color:var(--violet)}
.pimg img,.ph img{filter:saturate(.82) contrast(1.02)}
.pimg::after,.ph::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,color-mix(in srgb,var(--plum) 16%,transparent),color-mix(in srgb,var(--ink) 22%,transparent));mix-blend-mode:multiply}
.pimg figcaption{z-index:1}
/* ---------- soft background gradient that drifts while scrolling ---------- */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55% 45% at var(--gx1,12%) var(--gy1,8%),color-mix(in srgb,var(--sel) 38%,transparent),transparent 72%),
    radial-gradient(50% 50% at var(--gx2,92%) var(--gy2,88%),color-mix(in srgb,var(--cobalt) 10%,transparent),transparent 72%),
    radial-gradient(45% 40% at var(--gx3,85%) var(--gy3,20%),color-mix(in srgb,var(--lav) 70%,transparent),transparent 70%)}
/* ---------- home pillars as one pinned screen (scroll steps through the three hazards) ---------- */
.pillars{display:block;position:relative}
.pi{display:block}
.pt{position:static;display:block;font-size:clamp(1.6rem,2.4vw,2.3rem);line-height:1.08;letter-spacing:-.035em;margin:0}
.pt button{all:unset;cursor:pointer;display:flex;gap:16px;align-items:flex-start;padding:10px 0;color:var(--ink);opacity:.32;transition:opacity .3s}
.pt button:hover{opacity:.6}
.pt button:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:6px}
.pi.on .pt button{opacity:1}
.pd{display:none;gap:12px;padding:4px 0 16px calc(1.15em * 1.6 + 16px)}
.pd > p{font-size:.95rem;line-height:1.6;color:var(--soft);max-width:34em}
.pi.on .pd{display:grid}
.dk .pt button{color:var(--on-dark)}
@media (min-width:861px){
  #home-fund{height:240svh;padding:0;position:relative}
  #home-fund .pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(24px,5svh,56px)}
  .pillars{height:clamp(340px,56svh,580px)}
  .pi{width:40%}
  .pimg{position:absolute!important;top:0;right:0;width:56%;height:100%;aspect-ratio:auto;opacity:0;transition:opacity .5s}
  .pi.on .pimg{opacity:1}
  .pd{font-size:clamp(1.6rem,2.4vw,2.3rem)}
  .pd > *{font-size:initial}
}
@media (max-width:860px){.pi{margin-bottom:40px}.pt button{opacity:1}.pimg{margin:6px 0 14px}.pd{padding-left:0}}
/* ---------- projects: pipeline cards and map pins ---------- */
.pipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.pj{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.pjtop{position:relative;padding:20px 22px;min-height:clamp(110px,15svh,150px);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(135deg,var(--plum),var(--violet))}
.h-drought .pjtop{background:linear-gradient(135deg,var(--violet),var(--cobalt))}
.h-multi .pjtop{background:linear-gradient(135deg,var(--cobalt),var(--ink))}
.pjtop b{font:400 clamp(1.8rem,2.6vw,2.4rem)/1 var(--serif);letter-spacing:-.03em}
.pjtop > span:not(.tag){font-size:.82rem;opacity:.85;margin-top:6px}
.pjtop .tag{position:static;align-self:flex-start;margin-bottom:auto;background:rgba(255,255,255,.18);color:#fff}
.pjtop b{margin-top:18px}
.pjbody{padding:20px 22px 22px;display:grid;gap:10px;align-content:start}
.pjtags{display:flex;flex-wrap:wrap;gap:6px}
.pjtags span{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.74rem;color:var(--ink)}
.pj h3{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.15;letter-spacing:-.02em}
.pj .org{font-size:.84rem;color:var(--violet);font-weight:500}
.pj p{font-size:.88rem;line-height:1.55;color:var(--soft)}
.pj p.org{color:var(--violet)}
.pj dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:4px 0 0;font-size:.82rem;border-top:1px solid var(--line);padding-top:12px}
.pj dt{color:var(--muted)}
.pj dd{margin:0}
.dk .pj{background:var(--ink-2);border-color:var(--line-dk)}
@media (max-width:900px){.pipe{grid-template-columns:1fr}}
.mapwrap{position:relative}
.mpin{position:absolute;transform:translate(-50%,-50%);z-index:1}
.mpin i{display:block;width:14px;height:14px;border-radius:50%;background:var(--plum);box-shadow:0 0 0 6px color-mix(in srgb,var(--plum) 22%,transparent)}
.mpin em{position:absolute;left:22px;top:50%;transform:translateY(-50%);font-style:normal;font-size:.78rem;font-weight:600;color:var(--ink);background:#fff;padding:4px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(30,30,76,.14)}
.mpin.left em{left:auto;right:22px}
/* ---------- solution chips with definitions on hover or tap ---------- */
.chipwrap{position:relative;display:inline-flex}
button.chip{display:inline-flex;align-items:center;gap:6px;background:transparent;cursor:pointer;font-family:var(--sans);transition:background .2s,color .2s}
button.chip svg{opacity:.7}
button.chip:hover,.chipwrap.open button.chip,button.chip:focus-visible{background:var(--violet);color:#fff}
.pop{display:none;position:absolute;top:calc(100% + 10px);left:0;z-index:25;width:min(360px,86vw);background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 18px 40px rgba(30,30,76,.18);font-size:.84rem;line-height:1.55;color:var(--soft);text-align:left}
.pop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.pop b{display:block;font:400 1.2rem/1.2 var(--serif);letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.pop em{display:block;font:600 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin:12px 0 5px;font-style:normal}
.chipwrap.r .pop{left:auto;right:0}
.chipwrap:hover .pop,.chipwrap:focus-within .pop,.chipwrap.open .pop{display:block}
.dk .pop{background:var(--ink-2);border-color:var(--line-dk);color:var(--on-dark-soft)}
.dk .pop b{color:var(--on-dark)}
@media (max-width:700px){.chipwrap{position:static}.chips{position:relative}.pop{left:0!important;right:auto!important;width:100%}}
/* ---------- home solution tiles flip in place ---------- */
.sol li{perspective:1400px;display:flex}
.sol .tile{all:unset;box-sizing:border-box;display:grid;width:100%;min-height:clamp(320px,28vw,400px);cursor:pointer;position:relative;transform-style:preserve-3d;height:100%;transition:transform .65s cubic-bezier(.2,.7,.2,1);border-radius:16px}
.sol .tile:focus-visible{outline:2px solid var(--violet);outline-offset:4px}
.sol .tile.on{transform:rotateY(180deg)}
.sol .face{grid-area:1/1;display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2vw,28px);border-radius:16px;-webkit-backface-visibility:hidden;backface-visibility:hidden;text-align:left}
.sol .back{transform:rotateY(180deg);gap:8px;font-size:.8rem;line-height:1.5}
.sol .front .t3{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.3vw,2.3rem);line-height:1.04;letter-spacing:-.035em;color:inherit}
.sol .front .p3{display:block;margin-top:auto;font-size:.84rem;line-height:1.5}
.sol .back b{font:400 1.15rem/1.15 var(--serif);letter-spacing:-.02em}
.sol .back em{font:600 .64rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;font-style:normal;opacity:.75;margin-top:6px}
.sol .back .more2{margin-top:auto}
.sol .more2{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600}
.sol .tg{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;transition:transform .3s}
.sol .back .tg{transform:rotate(45deg)}
.sol .tile:hover .front .tg{transform:rotate(90deg)}
.sol .s1 .face{background:var(--lav);color:var(--ink)}
.sol .s2 .face{background:var(--ink);color:var(--on-dark,#fff)}
.sol .s3 .face{background:var(--sel);color:var(--ink)}
.sol .s4 .face{background:var(--violet);color:#fff}
.dk .sol .s2 .face{background:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.sol .tile{transition:none}}
@media (max-width:560px){.sol .tile{min-height:300px}}
/* ---------- hazard blocks link to filtered projects ---------- */
.hz{cursor:pointer}
.hz .ph img{transition:transform .5s}
.hz:hover .ph img{transform:scale(1.04)}
.hz:hover h3{color:var(--violet)}
.hzmore{margin-top:2px}
.hzf{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hzf button{border:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:6px 14px;font:500 .8rem/1 var(--sans);cursor:pointer}
.hzf button:hover{border-color:var(--violet);color:var(--violet)}
.hzf button[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
@media (min-width:861px){
}
/* ---------- one standard section header, more breathing room ---------- */
.sec-head{display:grid;grid-template-columns:none;gap:16px;max-width:none;margin-bottom:clamp(32px,5svh,56px)}
.pjtop{min-height:clamp(96px,12svh,128px)!important}
.pj .pjbody{padding-top:16px;gap:8px}
.mapwrap{max-width:min(100%,calc(36svh * 2.092));margin-inline:auto}
#projects-map .sec-head{margin-bottom:clamp(24px,3.5svh,36px)}
#projects-map .metrics{margin-top:16px}
main .sec > .wrap,#home-fund .pin > .wrap{width:100%}
/* hazard blocks: photo, title, text and link line up across the row */
@media (min-width:861px){
  .hazards{grid-template-rows:auto auto 1fr auto;row-gap:0!important}
  .hz{grid-row:span 4;display:grid;grid-template-rows:subgrid;gap:12px}
  .hz h3{align-self:start}
  .hzmore{align-self:start;margin-top:4px}
}
#projects-portfolio .sec-head{margin-bottom:clamp(24px,3.5svh,36px)}
.sec-head .lead{max-width:40em;line-height:1.65}
.sec-head .hzf{margin-top:8px}
#home-fund .sec-head{margin-bottom:clamp(20px,3.5svh,36px)}
@media (min-width:861px){.pillars{height:clamp(320px,48svh,540px)}}
.hazards,.toc,.crit,.look,.why,.pipe,.sol{gap:clamp(18px,2.2vw,32px)!important}
.hz p,.path p,.barrier{line-height:1.65}
/* criteria are not a sequence, so no numbers: same card style as the other lists */
.crit li{gap:8px}
.crit b{color:var(--violet)}
/* solution terms are explainers, not buttons: underlined text with an info icon */
button.chip{border:0!important;border-radius:0!important;padding:0 0 1px!important;background:none!important;color:var(--violet)!important;font-weight:600;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:4px}
button.chip:hover,.chipwrap.open button.chip,button.chip:focus-visible{color:var(--plum)!important;text-decoration-style:solid}
.chips{gap:10px 22px!important}
button.chip{font-size:.86rem!important}
.dk button.chip{color:var(--a-lite)!important}
/* translations */
.lsoon{font-size:.7rem;opacity:.6;margin-left:6px}
.panel.lang button[aria-disabled="true"]{opacity:.55;cursor:default}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(zh) .pt,:lang(zh) .t3,:lang(zh) footer .big a{letter-spacing:0;font-family:Georgia,"Songti SC","Noto Serif SC","Source Han Serif SC","STSong",serif}
:lang(zh) body{font-family:"Jost","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
:lang(zh) .eyebrow{letter-spacing:.08em}
/* ---------- review fixes ---------- */
/* #3 one link style for links that go somewhere */
.more{color:var(--violet);font-weight:600;text-decoration:none}
/* #4 the pill is only for filters: labels and jump links become text */
.phead .sub{align-items:baseline;gap:6px 22px}
.phead .sub .sublab{font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-right:4px}
.phead .sub a{border:0!important;background:none!important;padding:0!important;border-radius:0;color:var(--violet);font-weight:600;font-size:.92rem;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.phead .sub a:hover{color:var(--plum)}
.tag,.pjtop .tag{background:none!important;padding:0!important;border-radius:0}
.pjtop .tag{color:#fff;opacity:.85}
.pjtags{gap:0}
.pjtags span{border:0;padding:0;border-radius:0;font-size:.78rem;color:var(--soft)}
.pjtags span+span::before{content:"\00b7";margin:0 8px}
.ex{gap:0}
.ex li{border:0;padding:0;border-radius:0;font-size:.84rem;color:var(--ink)}
.ex li+li::before{content:"\00b7";margin:0 8px;color:var(--muted)}
.soon{background:none!important;padding:0!important;border-radius:0;color:var(--soft);font-weight:600;font-size:.82rem}
.soon::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.status .pill{background:none;padding:0;color:#C9A2F0;font-size:.72rem;letter-spacing:.16em}
.soc a{border:0;background:none;padding:0;border-radius:0;color:var(--violet);text-decoration:underline;text-underline-offset:4px}
/* #10 card headings share one colour */
.why b,.look b,.path b,.crit b,.steps b{color:var(--ink)!important}
/* #12 header Apply as visible as Contact, closing next step */
.menu > a.btn.line{padding:10px 20px;margin-left:8px;opacity:1;color:inherit;border:1.5px solid currentColor;border-radius:999px;min-height:0}
header.dk .menu .btn.line{color:var(--on-dark)}
.menu .btn.line:hover{background:var(--hover)}
.cta{background:var(--lav);border-top:1px solid var(--line)}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-block:clamp(36px,5svh,56px)}
.cta h2{font-size:clamp(1.8rem,3vw,2.8rem)}
.cta .ctas{margin-top:0}
/* #13 faded hazard titles readable (about 3.4:1) */
.pt button{opacity:.6}
.pt button:hover{opacity:.8}
/* #14 #15 form field edges and hints */
.fld input,.fld select,.fld textarea{border-color:#8B87A6}
.fld .opt{color:var(--soft)}
/* #30 checkboxes the same size */
.check input{flex:none;width:20px;height:20px;margin-top:3px}
/* #18 #19 footer: visible field label, stronger grey text */
.fnews form{flex-wrap:wrap}
.fnews .flabel{position:static!important;left:auto!important;flex-basis:100%;font-size:.8rem;font-weight:600}
.fnews input{flex:1 1 200px}
.fnews .btn{flex:none}
.fnews p{opacity:.92}
footer .meta{opacity:1}
footer nav a{opacity:.92}
footer .big a.on{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
/* #22 hero map keeps its shape inside the columns, top aligned with the heading */
@media (min-width:901px){.hero{align-items:start;align-content:center}.hero .map{width:100%;margin-left:0;margin-top:.4rem}.hero .legend{margin-left:0}}
/* #23 projects map on phones: small dots, names listed under the map */
.maplist{display:none}
@media (max-width:700px){
  .mapbox{padding:12px}
  .mapbox .soon{position:static;display:flex;margin-bottom:10px}
  .mpin i{width:8px;height:8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--plum) 22%,transparent)}
  .mpin em{display:none}
  .maplist{display:grid;gap:8px;margin-top:14px;font-size:.86rem;color:var(--ink)}
  .maplist li{display:flex;align-items:center;gap:10px}
  .maplist i{width:8px;height:8px;border-radius:50%;background:var(--plum);flex:none}
}
/* #24 footer signup inside the margins on phones */
@media (max-width:480px){.fnews form{max-width:none}.fnews input{flex-basis:100%}.fnews .btn{width:100%}}
/* #25 phone menu: header stays on screen, menu scrolls inside, sections fold */
@media (max-width:1140px){
  header{position:sticky;top:0}
  .menu.open{max-height:calc(100svh - var(--hdr,72px));overflow-y:auto;overscroll-behavior:contain}
  .menu.open .trigger{justify-content:space-between;width:100%}
  .menu.open .btn{align-self:stretch}
}
/* #26 solution cards fit their content on phones */
@media (max-width:700px){
  .sol .tile{min-height:0!important;transform:none!important;transition:none}
  .sol .face{backface-visibility:visible;-webkit-backface-visibility:visible;transform:none!important}
  .sol .back{display:none}
  .sol .tile.on .front{display:none}
  .sol .tile.on .back{display:flex}
  .sol .front .p3{margin-top:4px}
}
/* #27 team cards on phones: places on their own line, links aligned */
@media (max-width:760px){
  .pcard{display:flex;flex-direction:column}
  .ploc{flex-direction:column;align-items:flex-start;gap:4px}
  .biob{margin-top:auto;align-self:flex-start}
  .ploc{margin-bottom:12px}
}
/* #28 email address never splits */
@media (max-width:560px){.side .mail{font-size:.84rem;overflow-wrap:normal;white-space:nowrap}.side .box{padding:18px}}

.biob{font-weight:400!important}

#page-policies .legal{display:block!important}
.legal-meta{font-size:.9rem;color:var(--soft);margin:4px 0 0}
.legal-note{font-size:.9rem;color:var(--soft);margin:0}
:root:not([lang]) .legal-note,:root[lang="en"] .legal-note{display:none}
.pol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,5vw,80px);padding-block:clamp(36px,5vw,64px);border-top:1px solid var(--line)}
.pol:first-child{border-top:0;padding-top:0}
.pol:last-child{padding-bottom:0}
.pol > h2{font-size:clamp(1.8rem,2.8vw,2.6rem)!important;line-height:1.08;position:sticky;top:32px;align-self:start}
.prose{max-width:44em;font-size:1.02rem;line-height:1.7;color:var(--ink)}
.prose h3{font-family:var(--sans);font-weight:600;font-size:1.04rem;line-height:1.4;letter-spacing:0;margin:30px 0 8px}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 14px;padding-left:1.2em;list-style:disc outside}
.prose li{display:list-item}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--violet)}
.prose a{color:var(--violet)}
@media (max-width:860px){.pol{grid-template-columns:1fr;gap:18px}.pol > h2{position:static}}


/* ---------- round 4 fixes ---------- */
:root{--ink:#191845;--ink-2:#282A59;--line-dk:#3F4273;--cobalt:#4C5083;--soft:#4F5371;--muted:#6F728C;--on-dark:#F3EFFE;--on-dark-soft:#CBC8D6;--mist:#F7F5FF;--lav:#ECE9F7;--frame:#E2DFED;--line:#D5D2E0;--violet:#7D2D87;--violet-dk:#671571;--plum:#8C3C96;--a-lite:#E3A3EA;--sel:#E4B9E9;--map-top:#AC5BB6;--map-bot:#4C5083;--map-north:#878491}
/* 62 focus ring that shows on dark backgrounds (about 12:1 on the indigo) */
.dk :focus-visible,header.dk :focus-visible,footer.dk :focus-visible{outline-color:var(--on-dark)}
/* 32 'Under construction' in the card's light text colour */
#projects-dashboard .soon{color:var(--on-dark-soft)!important;opacity:1!important}
/* images now carry width and height to stop layout shift; keep their CSS shape */
.mat img,.mapwrap img{height:auto}
/* 61 the hero map is a still image in an Equal Earth projection */
.map img.wmap{display:block;width:100%;height:auto}
/* 72 on phones the figure sits under the photo instead of covering it */
@media (max-width:860px){
  .pimg{overflow:visible;aspect-ratio:auto;background:none}
  .pimg img{border-radius:18px;aspect-ratio:16/10}
  .pimg::after{border-radius:18px;bottom:auto;aspect-ratio:16/10;height:auto}
  .pstat{position:static;max-width:none;margin-top:12px}
}
/* translated pages stay hidden for a moment until the chosen language is in place */
html.i18n-wait body{visibility:hidden}


/* ---------- motion: smooth, compositor-only where possible ---------- */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1)}
/* Background glows: three fixed layers moved with transform only, so scrolling never repaints the page background */
.bgfx{background:none;overflow:hidden;contain:strict}
.bgfx i{position:absolute;left:0;top:0;will-change:transform;backface-visibility:hidden}
.bgfx i:nth-child(1){width:90%;height:80%;background:radial-gradient(closest-side,color-mix(in srgb,var(--lav) 70%,transparent),transparent 70%)}
.bgfx i:nth-child(2){width:100%;height:100%;background:radial-gradient(closest-side,color-mix(in srgb,var(--cobalt) 10%,transparent),transparent 72%)}
.bgfx i:nth-child(3){width:110%;height:90%;background:radial-gradient(closest-side,color-mix(in srgb,var(--sel) 38%,transparent),transparent 72%)}
/* Photo tints blend only with their own photo, not with the moving background behind the page */
.ph,.pimg{isolation:isolate}
/* Buttons and links answer the press */
.btn,.hzf button,.bclose,.biob,.mat,.sol a{transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .16s var(--ease-out)}
.btn:active,.hzf button:active,.bclose:active,.biob:active{transform:scale(.97)}
.sol a:active{transform:translateY(-2px) scale(.99)}
.trigger svg,.more span{transition:transform .2s var(--ease-out)}
.sol .tg{transition:transform .3s var(--ease-out)}
.pt button{transition:opacity .2s ease}
@media (hover:hover){.hz .ph img{transition:transform .45s var(--ease-out)}}
@media (hover:none){.hz:hover .ph img,.sol a:hover{transform:none}}
/* Flip cards: one smooth turn */
.sol .tile{transition:transform .55s var(--ease-io)}
/* Menus, definitions and bios ease in from where they open instead of popping */
.panel,.pop,.biopanel{transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
.panel{transform-origin:top left}.panel.lang{transform-origin:top right}.pop{transform-origin:top left}
@starting-style{.panel{opacity:0;transform:translateY(-4px) scale(.98)}.pop{opacity:0;transform:translateY(-4px) scale(.98)}.biopanel{opacity:0;transform:translateY(8px)}}
@media (max-width:1140px){.menu.open{transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}@starting-style{.menu.open{opacity:0;transform:translateY(-6px)}.panel{transform:none}}}
/* Home hazards: the active one opens smoothly and its photo cross-fades */
@media (min-width:861px){
  .pi{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .5s var(--ease-io)}
  .pi.on{grid-template-rows:auto 1fr}
  .pd,.pi.on .pd{display:grid;min-height:0;overflow:hidden;padding-top:0;padding-bottom:0}
  .pd{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .5s}
  .pi.on .pd{opacity:1;visibility:visible;transition:opacity .35s ease .12s,visibility 0s}
  .pd > :first-child{margin-top:4px}.pd > :last-child{margin-bottom:16px}
  .pillars{contain:layout size}
  .pimg{transition:opacity .6s var(--ease-io);will-change:opacity}
}
/* Live wave map (61): drawn over the still image, with a pause/play button */
.mapstage{position:relative}
.mapstage .wmap-live{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.mapstage.live img.wmap{opacity:0}
.mapplay{position:absolute;right:0;bottom:0;width:40px;height:40px;padding:0;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(30,30,76,.12);transition:background-color .15s ease,transform .16s var(--ease-out)}
.mapplay[hidden]{display:none}
.mapplay:hover{background:#fff}.mapplay:active{transform:scale(.97)}
.mapplay:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.bgfx i{will-change:auto}*,*::before,*::after{transition:none!important;animation:none!important}}


/* ---------- round 5: alignment and spacing ---------- */
/* Tap targets (review 69): footer links, "Read bio" and the solution term buttons get the 44px tap height used
   everywhere else; text size and look unchanged */
footer .meta nav a,.soc a,button.chip{display:inline-flex;align-items:center;min-height:44px}
.biob{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;padding:0;border-bottom:0;
  background:linear-gradient(var(--gold),var(--gold)) left calc(50% + .78em) / 100% 2.5px no-repeat}
/* How to apply: every step number in the same plum (the stakeholder CSS painted only the last one indigo) */
.steps li:last-child::before{background:var(--plum)}
/* One rule for section boundaries: a 1px line at the content width between two sections on the same background;
   no line where the background changes, because the colour change already separates them. Every section keeps the same padding. */
.sec + .sec,.cta{border-top:0}
.has-sep{position:relative}
.has-sep::before{content:"";position:absolute;top:0;height:1px;background:var(--line);pointer-events:none;
  left:calc(max(0px,(100% - 1280px) / 2) + var(--gutter));right:calc(max(0px,(100% - 1280px) / 2) + var(--gutter))}
.dk.has-sep::before{background:var(--line-dk)}
.legal .pol:last-child .prose > :last-child{margin-bottom:0}
@media (min-width:861px){
  /* Home hazards: content starts at the same distance from the line as every other section */
  #home-fund .pin{height:auto;justify-content:flex-start;padding-block:clamp(40px,8svh,84px)}
}
/* Team and Advisory Board: name, role, place and "Read bio" line up across each row */
@supports (grid-template-rows:subgrid){
  .people{grid-auto-flow:row}
  .people .pcard{grid-row:span 5;grid-template-rows:subgrid;row-gap:4px;align-content:stretch}
  .people .pcard .biob{align-self:end}
}
/* Theory of change: barriers, arrows and solution cards line up across the three columns, cards the same height */
@supports (grid-template-rows:subgrid){
  @media (min-width:861px){
    .toc li{grid-row:span 4;grid-template-rows:subgrid;row-gap:12px}
    .toc .path{grid-row:span 2;grid-template-rows:subgrid;row-gap:8px}
  }
}
/* Bio map: cropped to the land, so the place names sit right under it on the same left edge */
.bmap .bmapimg{position:relative}
.bmap figcaption{margin-top:12px}
/* Bio on phones: a sheet that slides up over the page */
.biodlg{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:88svh;padding:0;border:0;border-radius:20px 20px 0 0;
  background:#fff;color:var(--ink);box-shadow:0 -10px 40px rgba(30,30,76,.25);transform:none;
  transition:transform .32s cubic-bezier(.32,.72,0,1),display .32s allow-discrete,overlay .32s allow-discrete}
.biodlg.closing{transform:translateY(100%);transition-duration:.22s;transition-timing-function:cubic-bezier(.4,0,1,1)}
@starting-style{.biodlg[open]{transform:translateY(100%)}}
.biodlg::backdrop{background:rgba(25,24,69,.5);opacity:1;transition:opacity .32s ease,display .32s allow-discrete,overlay .32s allow-discrete}
.biodlg.closing::backdrop{opacity:0}
@starting-style{.biodlg[open]::backdrop{opacity:0}}
html:has(.biodlg[open]){overflow:hidden}
.biodlg-in{position:relative;max-height:88svh;overflow:auto;overscroll-behavior:contain;padding:28px var(--gutter) calc(28px + env(safe-area-inset-bottom))}
.biodlg .grab{position:absolute;top:10px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line)}
.biodlg .bclose{position:absolute;top:12px;right:10px}
.biodlg h2{font:400 clamp(1.7rem,6vw,2.1rem)/1.12 var(--serif);letter-spacing:-.025em;color:var(--ink);margin:6px 48px 4px 0}
.biodlg .prole{display:block;font-size:1.15rem}
.biodlg .bmap{margin:20px 0 0;max-width:none}
.biodlg .bmap img{filter:none}
.biodlg p{margin-top:18px;font-size:1.02rem;line-height:1.7;color:var(--ink)}
.biodlg .bclose:focus-visible{outline:2px solid var(--violet);outline-offset:2px}


/* ---------- body font: what the stakeholder file shows ----------
   On the stakeholder's Mac the page renders in Futura (Jost, first in their list, did not load), so text is Futura Medium
   and bold text is Futura Bold. This family uses Futura where it is installed (Mac, iPhone, iPad) and the same weights of
   Jost, the open Futura revival, everywhere else, served from this site. */
@font-face{font-family:"GMRF Sans";font-style:normal;font-weight:1 550;font-display:swap;src:local("Futura Medium"),local("Futura-Medium"),url(fonts/jost-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"GMRF Sans";font-style:normal;font-weight:551 1000;font-display:swap;src:local("Futura Bold"),local("Futura-Bold"),url(fonts/jost-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"GMRF Sans";font-style:italic;font-weight:1 550;font-display:swap;src:local("Futura Medium Italic"),local("Futura-MediumItalic"),url(fonts/jost-500-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"GMRF Sans";font-style:italic;font-weight:551 1000;font-display:swap;src:url(fonts/jost-700-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--sans:"GMRF Sans",Futura,"Century Gothic","Helvetica Neue",Arial,sans-serif}
:lang(zh) body{font-family:"GMRF Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}


/* ---------- line length and line breaks: one rule set ----------
   1. Text in a column or card fills that column; it is never cut short by its own em width.
   2. Introductions and notes that run across the full content width share one reading measure (42rem, about 70 characters).
   3. Text sitting above a control is as wide as that control (footer newsletter).
   4. No single word on a last line: the last two words of paragraphs, list items and captions are kept together
      (in the HTML), and headings and titles are balanced so their lines are of similar length. */
:root{--measure:42rem}
.sec-head{max-width:none}
.sec-head .lead,.phead .lead,.wrap > .lead,main section > p.muted,main .band > section > p.muted{max-width:var(--measure)!important}
.pd > p,.pd .src,.pb > p,.hero .legend{max-width:none}
.fnews p{max-width:460px}
h1,h2,h3,.pname,.prole,.path b,.crit b,.why b,.look b,.steps b,.pop b,.fnews b,.pstat{text-wrap:balance}
/* Hero map: the legend runs from the map's left edge, the pause/play button sits at its right edge on the same line */
.hero .legend{display:flex;align-items:flex-start;gap:16px;margin-left:0}
.hero .legend > span{flex:1;min-width:0}
.hero .legend .mapplay{position:static;flex:none;margin-top:-6px}

/* header fold (see site.js) */
html.navfold .menu{display:none}
html.navfold .burger{display:inline-flex;align-items:center;justify-content:center}
html.navfold .menu.open{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;background:inherit;padding:8px var(--gutter) 20px;border-top:1px solid var(--line)}
html.navfold header.dk .menu.open{background:var(--ink)}
html.navfold header.lt .menu.open{background:var(--mist)}
html.navfold .menu.open .panel{position:static;box-shadow:none;border:0;background:transparent;padding:0 0 4px 14px;min-width:0}
html.navfold header.dk .menu.open .panel,html.navfold header.dk .menu.open .panel b,html.navfold header.dk .menu.open .panel.lang button{color:var(--on-dark)}
html.navfold header.lt .menu.open .panel,html.navfold header.lt .menu.open .panel b,html.navfold header.lt .menu.open .panel.lang button{color:var(--ink)}
html.navfold .menu.open .panel{background:transparent}
html.navfold .menu.open .panel span{color:inherit;opacity:.75}
html.navfold .menu.open .panel a:hover,html.navfold .menu.open .panel.lang button:hover{background:var(--hover)}
html.navfold .menu.open .btn{margin:10px 0 0;align-self:flex-start}
html.navfold header{position:sticky;top:0}
html.navfold .menu.open{max-height:calc(100svh - var(--hdr,72px));overflow-y:auto;overscroll-behavior:contain}
html.navfold .menu.open .trigger{justify-content:space-between;width:100%}
html.navfold .menu.open .btn{align-self:stretch}
html.navfold .menu.open{transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
html.navfold .menu.open{opacity:0;transform:translateY(-6px)}
html.navfold .panel{transform:none}