/* GMRF website styles. Sections, in this order:
   1. Tokens
   2. Fonts
   3. Base
   4. Layout
   5. Header and menus
   6. Hero, page headers and map
   7. Home
   8. About
   9. Approach
   10. Apply
   11. Funded projects
   12. Newsroom
   13. Contact and forms
   14. Policies
   15. Footer
   16. Shared across pages
   17. Utilities
   18. Animations
   Each selector has one rule, in its part's section. Media queries sit with the rules they change.
   Colours and fonts are tokens in :root (section 1); use var(--name), never a typed colour.
   Line length: text in a column or card fills the column; introductions and notes across the full width share one
   measure (--measure); the last two words of paragraphs, list items and captions are kept together in the HTML. */
/* ==== Tokens ==== */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
  --paper:#FFFFFF;
  --crimson:#9E1C4E;
  --gold:#F2CC5F;
  --pink:#F4B6B4;
  --serif:Georgia,"Times New Roman",serif;
  --gutter:clamp(16px,4.5vw,64px);
  --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;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --sans:"GMRF Sans",Futura,"Century Gothic","Helvetica Neue",Arial,sans-serif;
  --measure:42rem
;
  --orchid:#DA8BD8 /* accent on the dark funder dashboard */;
  --on-dark-mute:#D7D4EC /* body text on the dark funder dashboard */;
  --ink-3:#2C2C66 /* dashboard lock circle */;
  --lilac:#C9A2F0 /* status label on dark */;
  --cream:#FFF1C9 /* “soon” label */;
  --mat-hover:#DDD6EA /* portrait frame on hover */;
  --field-line:#8B87A6 /* form field border */;
  --error:#A3213D /* form error text */;
  --cover-violet:#6346B0 /* newsroom cover gradients */;
  --cover-rose:#B4549C;
  --cover-blue:#3B4AB3;
  --cover-plum:#8E3E98;
  --cover-ink:#1E1E4C;
  --shade-rgb:30 30 76 /* shadows: rgb(var(--shade-rgb) / alpha) */;
  --ink-rgb:25 24 69 /* sheet backdrop */;
  --white-rgb:255 255 255 /* white with transparency */}

/* ==== Fonts ==== */
@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}

/* ==== Base ==== */
body{padding:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);font-size:16px;line-height:1.6}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}
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}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0}
h3{line-height:1.2}
form.cf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:860px){
  form.cf{grid-template-columns:1fr}
}
:lang(zh) body{font-family:"GMRF Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}

/* translated pages stay hidden for a moment until the chosen language is in place */
html.i18n-wait body{visibility:hidden}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* ==== Layout ==== */
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font:600 .74rem/1 var(--sans);text-transform:uppercase;color:var(--violet)}
.lead{line-height:1.6;color:var(--soft);max-width:42em;font-size:clamp(1rem,1.15vw,1.08rem)}
.muted{color:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font:600 1.02rem/1 var(--sans);text-decoration:none;border:1.5px solid var(--violet);cursor:pointer;font-size:.92rem;padding:13px 24px}
.btn.fill{background:var(--violet);color:var(--paper)}
.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}
header.dk .menu .btn.fill{background:var(--a-lite);border-color:var(--a-lite);color:var(--ink)}
@media (max-width:1140px){
  header.dk .menu.open{background:var(--ink)}
  header.dk .menu.open .panel,header.dk .menu.open .panel b,header.dk .menu.open .panel.lang button{color:var(--on-dark)}
}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,38px)}
.blocks{background:var(--lav)}
.blocks ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.blocks li{background:var(--paper);border-radius:18px;padding:clamp(24px,2.6vw,34px);display:grid;gap:12px;align-content:start}
.blocks p{color:var(--soft)}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;color:var(--violet);font-weight:600;text-decoration:none}
.more:hover span{transform:translateX(3px)}
@media (max-width:900px){
  .blocks ul{grid-template-columns:1fr}
}
.arrow{color:var(--plum);font-size:1.4rem;line-height:1}
.soon{display:inline-flex;align-items:center;gap:8px;background:none;padding:0;border-radius:0;color:var(--soft);font-weight:600;font-size:.82rem}
.tag{justify-self:start;font:700 .72rem/1 var(--sans);text-transform:uppercase;color:var(--plum);background:var(--lav);padding:6px 10px}
.band{width:100%}

/* moved from style attributes in the HTML (CR6) */
header.dk{background:var(--ink);color:var(--on-dark);--hover:var(--ink-2)}
footer.dk{background:var(--ink);color:var(--on-dark)}
.dk .btn.line:hover{background:var(--ink-2)}
.blocks h2{font-size:clamp(1.8rem,2.6vw,2.5rem);letter-spacing:-.03em}
.sec{padding-block:clamp(40px,8svh,84px)}

/* Background glows: three fixed layers moved with transform only, so scrolling never repaints the page background */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;background:none;overflow:hidden;contain:strict}
.sec-head{display:grid;grid-template-columns:none;gap:16px;margin-bottom:clamp(32px,5svh,56px);max-width:none}
.sec-head .lead{line-height:1.65}
.sec-head .hzf{margin-top:8px}
:lang(zh) .eyebrow{letter-spacing:.08em}
.soon::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
header.dk .menu .btn.line{color:var(--on-dark)}
.cta{background:var(--lav)}
.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}
.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 p{margin:0 0 12px}
.prose ul{margin:0 0 14px;padding-left:1.2em;list-style:disc outside}
.prose li{display:list-item;margin:0 0 8px}
.prose li::marker{color:var(--violet)}
.prose a{color:var(--violet)}
.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%)}
@media (prefers-reduced-motion:reduce){
  .bgfx i{will-change:auto}
}

/* 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))}
html.navfold header.dk .menu.open{background:var(--ink)}
html.navfold header.lt .menu.open{background:var(--mist)}
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)}

/* ==== Header and menus ==== */
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;font-size:.9rem}
.menu > a:hover,.trigger:hover,.trigger[aria-expanded="true"],.menu > a.on,.trigger.on{opacity:1;background:var(--hover)}
.trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd{position:relative}
.panel{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgb(var(--shade-rgb) / .18);padding:8px;color:var(--ink);transform-origin:top left}
.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;transform-origin:top right}
.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)}
.menu .btn.fill{padding:11px 22px;margin-left:8px;opacity:1}
.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;padding:8px var(--gutter) 20px;border-top:1px solid var(--line);max-height:calc(100svh - var(--hdr,72px));overflow-y:auto;overscroll-behavior:contain;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
  .menu.open .panel{position:static;box-shadow:none;border:0;padding:0 0 4px 14px;min-width:0;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:stretch}
}
.panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}

/* translations */
.lsoon{font-size:.7rem;opacity:.6;margin-left:6px}
.panel.lang button[aria-disabled="true"]{opacity:.55;cursor:default}

/* #12 header Apply as visible as Contact, closing next step */
.menu > a.btn.line{padding:10px 20px;margin-left:8px;opacity:1;border:1.5px solid currentColor;border-radius:999px;min-height:0}
.menu .btn.line:hover{background:var(--hover)}
@media (max-width:1140px){
  /* #25 phone menu: header stays on screen, menu scrolls inside, sections fold */
  header{position:sticky;top:0}
  .menu.open .trigger{justify-content:space-between;width:100%}
}
@starting-style{
  .panel{opacity:0;transform:translateY(-4px) scale(.98)}
}
@media (max-width:1140px){
  @starting-style{
  .menu.open{opacity:0;transform:translateY(-6px)}
  .panel{transform:none}
  }
}

/* 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);max-height:calc(100svh - var(--hdr,72px));overflow-y:auto;overscroll-behavior:contain;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out);opacity:0;transform:translateY(-6px)}
html.navfold .menu.open .panel{position:static;box-shadow:none;border:0;padding:0 0 4px 14px;min-width:0;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:stretch}
html.navfold header{position:sticky;top:0}
html.navfold .menu.open .trigger{justify-content:space-between;width:100%}
html.navfold .panel{transform:none}

/* ==== Hero, page headers and map ==== */
.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}

/* #4 the pill is only for filters: labels and jump links become text */
.phead .sub{display:flex;flex-wrap:wrap;margin-top:10px;align-items:baseline;gap:6px 22px}
.phead .sub a{border:0 !important;background:none;padding:0;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{border-color:var(--violet);color:var(--plum)}
.hero{display:grid;gap:clamp(24px,3vw,48px);align-items:center;padding-block:clamp(24px,3vw,48px)}
.hero h1 .gm{color:var(--violet)}
.hero .lead{margin-top:clamp(22px,2.6vw,34px)}
.map{margin:0;min-width:0}
.legend{flex-wrap:wrap;margin-top:12px;color:var(--soft)}
.legend span{align-items:baseline;gap:8px;flex-wrap:wrap}
.legend span i{align-self:center}
.legend i{border-radius:3px;background:linear-gradient(90deg,var(--map-top),var(--map-bot))}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .map{width:100%}
}
.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}
@media (min-width:901px){
  /* #22 hero map keeps its shape inside the columns, top aligned with the heading */
  .hero{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);min-height:calc(100svh - var(--hdr,84px));align-items:start;align-content:center}
}

/* 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{font-size:.8rem !important;line-height:1.5;display:flex;align-items:flex-start;gap:16px;margin-left:0}
.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}
.phead .sub .sublab{font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-right:4px}
@media (min-width:901px){
  .hero .map{width:100%;margin-left:0;margin-top:.4rem}
}

/* 61 the hero map is a still image in an Equal Earth projection */
.map img.wmap{display:block;width:100%;height:auto}

/* 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:rgb(var(--white-rgb) / .9);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgb(var(--shade-rgb) / .12);transition:background-color .15s ease,transform .16s var(--ease-out)}
.mapplay[hidden]{display:none}
.mapplay:hover{background:var(--paper)}
.mapplay:active{transform:scale(.97)}
.mapplay:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.hero .legend > span{flex:1;min-width:0}
.hero .legend .mapplay{position:static;flex:none;margin-top:-6px}
.legend b{font-weight:600}

/* ==== Home ==== */
.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%}
/* photos whose subject sits high in the frame: keep heads in view when the card crops to a wide shape */
.ph img.focus-high{object-position:center 12%}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(var(--shade-rgb) / 0) 55%,rgb(var(--shade-rgb) / .35))}
.pillars{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);column-gap:clamp(28px,5vw,96px);row-gap:clamp(64px,8vw,128px);display:block;position:relative}
.pt{grid-column:1;align-self:start;gap:16px;align-items:flex-start;transition:opacity .3s;position:static;display:block;font-size:clamp(1.6rem,2.4vw,2.3rem);line-height:1.08;letter-spacing:-.035em;margin:0}
.pt:nth-of-type(1){top:.8em}
.pillars.js .pt{opacity:.32}
.pillars.js .pt.on{opacity:1}
.pimg{position:relative;margin:0;border-radius:18px;overflow:hidden;background:var(--lav)}
.pimg img{display:block;width:100%;height:100%;object-fit:cover;max-width:100%}
.ex{display:flex;flex-wrap:wrap;gap:0}
@media (max-width:860px){
  .pillars{grid-template-columns:1fr;row-gap:18px}
  .pt{grid-column:1;opacity:1}
}
.sol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
@media (max-width:980px){
  .sol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .sol{grid-template-columns:1fr}
}
#home-fund{padding-top:clamp(44px,5vw,72px)}
.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}
.pi{display:block}

/* #13 faded hazard titles readable (about 3.4:1) */
.pt button{all:unset;cursor:pointer;display:flex;gap:16px;align-items:flex-start;padding:10px 0;color:var(--ink);opacity:.6;transition:opacity .2s ease}
.pt button:hover{opacity:.8}
.pt button:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:6px}
.pi.on .pt button{opacity:1}
/* Body text lines up with the heading text: number circle width (.pn: 1.15em at .55em) plus the 16px gap. On desktop .pd has the heading's font size, so em matches */
.pd{gap:12px;padding:4px 0 16px calc(.55em * 1.15 + 16px)}
.pd > p{font-size:.95rem;line-height:1.6;color:var(--soft)}
.pi.on .pd{display:grid}
@media (min-width:861px){
  #home-fund{height:240svh;padding:0;position:relative}
  /* Home hazards: content starts at the same distance from the line as every other section */
  #home-fund .pin{position:sticky;top:0;display:flex;flex-direction:column;height:auto;justify-content:flex-start;padding-block:clamp(40px,8svh,84px)}
  /* Home hazards: the active one opens smoothly and its photo cross-fades */
  .pi{width:40%;display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .5s var(--ease-io)}
  .pimg{position:absolute;top:0;right:0;width:56%;height:100%;aspect-ratio:auto;opacity:0;transition:opacity .6s var(--ease-io);will-change:opacity}
  .pi.on .pimg{opacity:1}
  .pd{font-size:clamp(1.6rem,2.4vw,2.3rem);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .5s}
  .pd > *{font-size:initial}
}
@media (max-width:860px){
  .pi{margin-bottom:40px}
  /* 72 on phones the figure sits under the photo instead of covering it */
  .pimg{margin:6px 0 14px;overflow:visible;aspect-ratio:auto;background:none}
  .pd{padding-left:0}
}
.sol li{perspective:1400px;display:flex}
.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;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 var(--ease-out)}
.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)}
.sol .s3 .face{background:var(--sel);color:var(--ink)}
.sol .s4 .face{background:var(--violet);color:var(--paper)}
@media (prefers-reduced-motion:reduce){
  .sol .tile{transition:none}
}

/* Flip cards: one smooth turn */
.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%;border-radius:16px;transition:transform .55s var(--ease-io)}
#home-fund .sec-head{margin-bottom:clamp(20px,3.5svh,36px)}
@media (min-width:861px){
  .pillars{height:clamp(320px,48svh,540px);contain:layout size}
}
.ex li{border:0;padding:0;border-radius:0;font-size:.84rem;color:var(--ink)}
/* separator dots end the item before them, so a wrapped line never starts with a dot */
.ex li:not(:last-child)::after{content:"\00b7";margin:0 8px;color:var(--muted)}
@media (max-width:700px){
  /* #26 solution cards fit their content on phones */
  .sol .tile{min-height:0;transform:none !important}
  .sol .face{-webkit-backface-visibility:visible;transform:none}
  .sol .back{display:none}
  .sol .tile.on .front{display:none}
  .sol .tile.on .back{display:flex}
  .sol .front .p3{margin-top:4px}
}
@media (max-width:860px){
  .pimg img{border-radius:18px;aspect-ratio:16/10}
  .pimg::after{border-radius:18px;bottom:auto;aspect-ratio:16/10;height:auto}
}

/* Photo tints blend only with their own photo, not with the moving background behind the page */
.ph,.pimg{isolation:isolate}
@media (min-width:861px){
  .pi.on{grid-template-rows:auto 1fr}
  .pd,.pi.on .pd{display:grid;min-height:0;overflow:hidden;padding-top:0;padding-bottom:0}
  .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}
}

/* ==== 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);font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.25;letter-spacing:-.02em}
@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)}
.why p{color:var(--soft)}
@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;margin-top:clamp(22px,2.6vw,34px)}
.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)}
.pcard{display:grid;gap:4px}
.mat{display:block;background:var(--frame);padding:clamp(10px,1.1vw,16px);margin-bottom:16px;border:0;width:100%;cursor:pointer}
.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:var(--mat-hover)}
.pcard.on .mat:hover{background:var(--sel)}
.pname{font:400 clamp(1.35rem,1.75vw,1.75rem)/1.2 var(--serif);color:var(--ink);font-size:clamp(1.3rem,1.6vw,1.6rem)}
.ploc{display:flex;align-items:center;gap:10px;color:var(--soft);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;border:0;font:700 1.05rem/1.2 var(--sans);color:var(--ink);cursor:pointer;font-weight:400;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}
.biob:hover{color:var(--violet)}
.biopanel{border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;gap:clamp(24px,4vw,64px);align-items:start}
.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{color:var(--soft);margin-top:12px}
.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;color:var(--ink);max-width:46em;font-size:1.02rem;line-height:1.7}
.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))}
}
@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}
}
.ploc,.prole{font-size:.92rem}
.prole{font:italic 400 clamp(1.05rem,1.3vw,1.25rem)/1.3 var(--serif);color:var(--soft);font-size:clamp(1rem,1.2vw,1.12rem)}
.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)}
@media (max-width:760px){
  /* #27 team cards on phones: places on their own line, links aligned */
  .pcard{display:flex;flex-direction:column}
  .ploc{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:12px}
}
@starting-style{
  .biopanel{opacity:0;transform:translateY(8px)}
}
@supports (grid-template-rows:subgrid){
  /* Team and Advisory Board: name, role, place and "Read bio" line up across each row */
  .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}
}
@media (max-width:760px){
  /* Phones: cards stay on the shared row grid (the stakeholder rule made them flex columns) */
  .people .pcard{display:grid}
}

/* Bio map: cropped to the land, so the place names sit right under it on the same left edge */
.bmap .bmapimg{position:relative}

/* 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:var(--paper);color:var(--ink);box-shadow:0 -10px 40px rgb(var(--shade-rgb) / .25);transform:none;transition:transform .32s cubic-bezier(.32,.72,0,1),display .32s allow-discrete,overlay .32s allow-discrete}
.biodlg.closing,.biodlg:not([open]){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:rgb(var(--ink-rgb) / .5);opacity:1;transition:opacity .32s ease,display .32s allow-discrete,overlay .32s allow-discrete}
.biodlg.closing::backdrop,.biodlg:not([open])::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}
.sponsor .muted{flex:1;min-width:260px}

/* ==== 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;cursor:pointer}
.hz p{color:var(--soft)}
.chips{display:flex;flex-wrap:wrap;align-items:center;margin-top:clamp(26px,3vw,40px);gap:10px 22px}
.chip{border:1.5px solid var(--violet);border-radius:999px;padding:6px 13px}
@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{color:var(--soft);border-top:2px solid var(--line);padding-top:12px}
.barrier b{display:block;font:700 .75rem/1 var(--sans);text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.path{background:var(--lav);border-radius:16px;padding:22px 24px;display:grid;gap:8px}
.path b{font:400 1.25rem/1.25 var(--serif)}
.path p{color:var(--ink)}
.impact{margin-top:clamp(20px,2.4vw,30px);background:var(--ink);color:var(--on-dark);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);text-transform:uppercase;color:var(--a-lite)}
.impact p{font:400 1.15rem/1.45 var(--serif);font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.3;letter-spacing:-.02em}
@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}

/* criteria are not a sequence, so no numbers: same card style as the other lists */
.crit li{background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;align-content:start;gap:8px}
.crit b{font:400 1.2rem/1.25 var(--serif)}
.crit p{color:var(--soft)}
@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{background:var(--paper);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)}
.look p{color:var(--soft)}
@media (max-width:760px){
  .look{grid-template-columns:1fr}
}
.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.metrics li{background:var(--paper);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{color:var(--soft)}
@media (max-width:980px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* type scale: compact body copy inside components */
.hz h3{margin-top:4px;font-size:clamp(1.6rem,2.3vw,2.2rem);letter-spacing:-.03em}
/* Number circles: lining figures from the sans, centred on the first line of the heading */
.pn{flex:none;display:grid;place-items:center;width:1.15em;height:1.15em;border-radius:50%;background:var(--plum);color:var(--paper);font:500 .55em/1 var(--sans);font-variant-numeric:lining-nums tabular-nums;letter-spacing:0;margin-top:.4em}
.src{font-size:.72rem !important;color:var(--muted) !important}
@media (min-width:861px){
  /* keep long sections within one screen */
  #approach-fund .ph{aspect-ratio:2/1}
  #approach-fund .chips .muted{font-size:.82rem}
  #approach-fund .chip{padding:5px 11px}
  #approach-fund .chips + p{font-size:.82rem;margin-top:10px}
  #approach-change .impact p{font-size:clamp(1.1rem,1.45vw,1.3rem)}
  #approach-change .impact + p{margin-top:14px}
  #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}
}
.h-drought .pjtop{background:linear-gradient(135deg,var(--violet),var(--cobalt))}
.h-multi .pjtop{background:linear-gradient(135deg,var(--cobalt),var(--ink))}
.chipwrap{position:relative;display:inline-flex}

/* solution terms are explainers, not buttons: underlined text with an info icon */
button.chip{gap:6px;cursor:pointer;font-family:var(--sans);transition:background .2s,color .2s;border:0;border-radius:0;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;font-size:.86rem}
button.chip svg{opacity:.7}
button.chip:hover,.chipwrap.open button.chip,button.chip:focus-visible{background:var(--violet);color:var(--paper);color:var(--plum) !important;text-decoration-style:solid}
.pop{display:none;position:absolute;top:calc(100% + 10px);left:0;z-index:25;width:min(360px,86vw);background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 18px 40px rgb(var(--shade-rgb) / .18);font-size:.84rem;line-height:1.55;color:var(--soft);text-align:left;transform-origin:top 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}
@media (max-width:700px){
  .chipwrap{position:static}
  .chips{position:relative}
  .pop{left:0 !important;right:auto !important;width:100%}
}
.hz .ph img{transition:transform .5s}
.hz:hover .ph img{transform:scale(1.04)}
.hz:hover h3{color:var(--violet)}
.hzmore{margin-top:2px}
@media (min-width:861px){
  /* hazard blocks: photo, title, text and link line up across the row */
  .hazards{grid-template-rows:auto auto 1fr auto;row-gap:0}
  .hz{grid-row:span 4;display:grid;grid-template-rows:subgrid}
  .hz h3{align-self:start}
  .hzmore{align-self:start;margin-top:4px}
}
@media (hover:hover){
  .hz .ph img{transition:transform .45s var(--ease-out)}
}
@starting-style{
  .pop{opacity:0;transform:translateY(-4px) scale(.98)}
}
@supports (grid-template-rows:subgrid){
  @media (min-width:861px){
  /* Theory of change: barriers, arrows and solution cards line up across the three columns, cards the same height */
  .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}
  }
}
.note{max-width:52em}

/* ==== Apply ==== */
.status{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;background:var(--ink);color:var(--paper);border-radius:18px;padding:22px 28px;margin-bottom:clamp(36px,4vw,56px)}
.status .pill{border-radius:999px;font-weight:700;text-transform:uppercase;background:none;padding:0;color:var(--lilac);font-size:.72rem;letter-spacing:.16em}
.status p{font:400 1.2rem/1.4 var(--serif);flex:1;min-width:240px;font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.02em}
.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;font-size:clamp(2.8rem,4.6vw,4.2rem)}
.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:var(--paper);font:700 .95rem/34px var(--sans);text-align:center}
.steps b{font:400 1.2rem/1.25 var(--serif)}
.steps p{color:var(--soft)}
@media (max-width:980px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
}
.ask{align-self:center;color:var(--soft);font-size:.95rem;margin-left:6px}
.ask .more{margin:0 0 0 4px}

/* 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)}

/* ==== Funded projects ==== */
.stat{background:var(--ink);color:var(--paper);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:var(--orchid);font-size:clamp(4.4rem,8vw,7rem)}
.stat span{color:var(--on-dark-mute)}
.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%;max-width:100%;opacity:.9}
.mapbox .soon{position:absolute;top:18px;right:18px}
.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:var(--paper);border-radius:20px;padding:clamp(26px,3.4vw,44px)}
.dash h2{color:var(--paper)}
.dash p{color:var(--on-dark-mute);margin-top:12px}
.dash .soon{margin-top:18px}
.dash .lock{justify-self:center;width:min(220px,100%);aspect-ratio:1;border-radius:50%;background:var(--ink-3);display:grid;place-items:center}
@media (max-width:760px){
  .dash{grid-template-columns:1fr}
  .dash .lock{display:none}
}
.pstat{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);max-width:min(280px,80%);padding:16px 18px;border-radius:12px;font-size:.84rem;line-height:1.4;background:rgb(var(--white-rgb) / .9);backdrop-filter:blur(8px);color:var(--ink);box-shadow:0 10px 30px rgb(var(--shade-rgb) / .18)}
.pstat b{display:block;font:400 clamp(2.2rem,3.6vw,3.2rem)/1 var(--serif);letter-spacing:-.035em;margin-bottom:8px;color:var(--violet)}
/* Photo location and year: quiet small text in the bottom right corner of hazard photos, kept readable by a soft shadow */
.credit{position:absolute;right:12px;bottom:10px;z-index:2;font-size:.68rem;line-height:1.3;letter-spacing:.01em;color:var(--on-dark);opacity:.85;text-shadow:0 1px 3px rgb(var(--shade-rgb) / .8);pointer-events:none}
@media (max-width:860px){
  /* on phones the Home figure continues below the photo, so pin the caption to the photo's 16:10 bottom edge (margin % is of the width) */
  .pimg .credit{bottom:auto;top:0;margin-top:calc(62.5% - 26px)}
}
.pipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.pj{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.pjtop{position:relative;padding:20px 22px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--paper);background:linear-gradient(135deg,var(--plum),var(--violet));min-height:clamp(96px,12svh,128px)}
.pjtop b{font:400 clamp(1.8rem,2.6vw,2.4rem)/1 var(--serif);letter-spacing:-.03em;margin-top:18px}
.pjtop > span:not(.tag){font-size:.82rem;opacity:.85;margin-top:6px}
.pjtop .tag{position:static;align-self:flex-start;margin-bottom:auto;background:rgb(var(--white-rgb) / .18);color:var(--paper);opacity:.85}
.pjbody{padding:20px 22px 22px;display:grid;align-content:start}
.pjtags{display:flex;flex-wrap:wrap;gap:0}
.pj h3{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.15;letter-spacing:-.02em}
.pj .org{font-size:.84rem;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}
@media (max-width:900px){
  .pipe{grid-template-columns:1fr}
}
.mapwrap{position:relative;max-width:min(100%,calc(36svh * 2.092));margin-inline:auto}
.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:var(--paper);padding:4px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgb(var(--shade-rgb) / .14)}
.mpin.left em{left:auto;right:22px}
/* Map pins pulse: a ring grows out of each dot and fades. Only transform and opacity animate, so it runs off the main thread. Staggered so the pins take turns. Turned off by reduced motion (see top) */
.mpin i{position:relative}
.mpin i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--plum);opacity:0;animation:mpulse 2.4s var(--ease-out) infinite}
.pin-br i::after{animation-delay:.8s}
.pin-mz i::after{animation-delay:1.6s}
@keyframes mpulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.8);opacity:0}}
.hzf{display:flex;flex-wrap:wrap;gap:8px}
.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:var(--paper)}
.pj .pjbody{padding-top:16px;gap:8px}
#projects-map .sec-head{margin-bottom:clamp(24px,3.5svh,36px)}
#projects-map .metrics{margin-top:16px}
#projects-portfolio .sec-head{margin-bottom:clamp(24px,3.5svh,36px)}
.pjtags span{border:0;padding:0;border-radius:0;font-size:.78rem;color:var(--soft)}
.pjtags span:not(:last-child)::after{content:"\00b7";margin:0 8px}

/* #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}
}

/* 32 'Under construction' in the card's light text colour */
#projects-dashboard .soon{color:var(--on-dark-soft);opacity:1}
@media (max-width:860px){
  .pstat{position:static;max-width:none;margin-top:12px}
}
.dash .eyebrow{color:var(--orchid)}

/* ==== Newsroom ==== */
.posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.posts li{background:var(--paper);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,var(--cover-violet),var(--cover-rose))}
.posts li:nth-child(2) .cov{background:linear-gradient(135deg,var(--cover-blue),var(--cover-violet))}
.posts li:nth-child(3) .cov{background:linear-gradient(135deg,var(--cover-plum),var(--cover-blue))}
.posts li:nth-child(4) .cov{background:linear-gradient(135deg,var(--cover-ink),var(--cover-plum))}
.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}
}

/* ==== Contact and forms ==== */
.contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4vw,64px);align-items:start}
.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(--soft)}

/* #14 #15 form field edges and hints */
.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:var(--paper);border-color:var(--field-line)}
.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}

/* #30 checkboxes the same size */
.check input{accent-color:var(--violet);flex:none;width:20px;height:20px;margin-top:3px}
.err{color:var(--error);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}
@media (max-width:860px){
  .contact{grid-template-columns:1fr}
}
@media (max-width:560px){
  /* #28 email address never splits */
  .side .mail{font-size:.84rem;overflow-wrap:normal;white-space:nowrap}
  .side .box{padding:18px}
}

/* ==== Policies ==== */
#page-policies .legal{display:block}
.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);line-height:1.08;position:sticky;top:32px;align-self:start}
@media (max-width:860px){
  .pol{grid-template-columns:1fr;gap:18px}
  .pol > h2{position:static}
}
.legal .pol:last-child .prose > :last-child{margin-bottom:0}

/* ==== Footer ==== */
.soc{display:flex;gap:10px;flex-wrap:wrap}
.soc a{gap:8px;font-weight:600;border:0;background:none;padding:0;border-radius:0;color:var(--violet);text-decoration:underline;text-underline-offset:4px}
.soc a:hover{border-color:var(--violet);color:var(--violet)}

/* footer: big serif links, tiny meta */
footer .wrap{display:grid;font-size:.98rem;grid-template-columns:1fr;gap:clamp(36px,5vw,72px);padding-block:clamp(56px,7vw,104px) 36px}
footer .left{display:grid;gap:6px}
footer .mail{user-select:all}
footer nav{display:flex;flex-wrap:wrap;align-items:end;justify-content:flex-end;gap:20px;font-size:.78rem}
footer nav a{color:inherit;text-decoration:none;opacity:.92}
footer nav a:hover{opacity:1}
@media (max-width:760px){
  footer nav{justify-content:flex-start}
}
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;margin-top:10px;opacity:.92;max-width:460px}

/* #18 #19 footer: visible field label, stronger grey text */
.fnews form{display:flex;gap:8px;margin-top:20px;max-width:460px;flex-wrap:wrap}
.fnews input{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);flex:1 1 200px}
.fnews input::placeholder{color:inherit;opacity:.6}
.fnews .btn{background:var(--a-lite);border-color:var(--a-lite);color:var(--ink);padding:12px 22px;flex:none}
@media (max-width:760px){
  footer .ftop{grid-template-columns:1fr}
  footer nav.big{justify-content:start}
}
footer nav.big a{opacity:1}
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 .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:1}
footer .name{font:400 1.1rem/1.2 var(--serif)}
@media (max-width:760px){
  footer .meta{grid-template-columns:1fr}
}
.fnews .flabel{position:static;left:auto;flex-basis:100%;font-size:.8rem;font-weight:600}
footer .big a.on{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
@media (max-width:480px){
  /* #24 footer signup inside the margins on phones */
  .fnews form{max-width:none}
  .fnews input{flex-basis:100%}
  .fnews .btn{width:100%}
}
.fsub-ok{font-weight:600}

/* ==== Shared across pages ==== */
.dk p,.dk .lead,.dk .muted,.dk .prole,.dk .ploc,.dk .note,.dk .hz p{color:var(--on-dark-soft)}
h1,h2,h3,.pname,.why b,.look b,.path b,.crit b,.steps b,.posts b,.glance b,.stat b{letter-spacing:-.025em}

/* ==== Base ==== */
h2{font-size:clamp(2.5rem,4.8vw,4.6rem);line-height:1.02;letter-spacing:-.035em}

/* ==== Shared across pages ==== */

/* #10 card headings share one colour */
.why b,.look b,.path b,.crit b,.steps b{font-size:clamp(1.35rem,1.7vw,1.6rem);line-height:1.15;color:var(--ink)}
.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}

/* ==== Approach ==== */
.hz p,.path p,.barrier{line-height:1.65}

/* ==== Shared across pages ==== */
.eyebrow,.barrier b,.impact b,.tag{font-size:.68rem;letter-spacing:.18em}
main .sec > .wrap,#home-fund .pin > .wrap{width:100%}
.hazards,.toc,.crit,.look,.why,.pipe,.sol{gap:clamp(18px,2.2vw,32px) !important}
: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}
.tag,.pjtop .tag{background:none !important;padding:0 !important;border-radius:0}

/* 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)}

/* images now carry width and height to stop layout shift; keep their CSS shape */
.mat img,.mapwrap img{height:auto}

/* 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)}
.trigger svg,.more span{transition:transform .2s var(--ease-out)}
@media (hover:none){
  .hz:hover .ph img,.sol a:hover{transform:none}
}

/* 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)}
footer .meta nav a,.soc a,button.chip{display:inline-flex;align-items:center;min-height:44px}
.sec-head .lead,.phead .lead,.wrap > .lead,main section > p.muted,main .band > section > p.muted{max-width:var(--measure)}
.pd > p,.pd .src,.pb > p,.hero .legend{max-width:none}
h1,h2,h3,.pname,.prole,.path b,.crit b,.why b,.look b,.steps b,.pop b,.fnews b,.pstat{text-wrap:balance}

/* ==== Utilities ==== */
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-22{margin-top:22px}
.self-start{justify-self:start}
.pin-in{left:68.92%;top:31.63%}
.pin-br{left:34.02%;top:74.88%}
.pin-mz{left:56.13%;top:77.92%}

/* text for screen readers only (CR9) */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}