/* Indaba Foundation — site stylesheet.
   Brand: the Indaba system shared with the Investor Book (sites/ventures/public/investor-book/css/book.css) and the
   Impact Report (sites/impact/styles/tokens.css + report.css). Token names match tokens.css so donate.css and future
   pages can rely on them. Stone/ivory pages, charcoal moments as inset cards, sage as the only green (dots, focus,
   progress), mineral for photo/rights tags. Cormorant Garamond display, IBM Plex Sans body, IBM Plex Mono labels.
   Fonts: /assets/fonts/fonts.css (self-hosted). Mobile-first, 320–1920. Everything is complete at rest; motion-only
   states live under html.motion (set by /js/site.js) and never hide content without JS or with reduced motion. */

/* ------------------------------------------------------------------ tokens */
:root{
  --bg:#efede7;--bg-depth:#e1dcd5;--paper:#eee9e1;--surface:#dbd4c9;--surface-light:#f7f7f2;--stone-deep:#c4bbad;
  --dark:#1e1c1b;--dark-lift:#2b2928;
  --ink-strong:#191818;--ink:#2f2d2b;--soft:#5c5954;--on-dark:#f7f7f2;--on-dark-soft:#c4c2bc;
  --sage:#74847e;--sage-deep:#5f6f69;--mineral:#9b8d69;--warning:#c56a21;--warning-bg:#f3e8d6;--warning-ink:#6b3f10;
  --rule:rgba(25,24,24,.08);--rule-strong:rgba(25,24,24,.16);--rule-on-dark:rgba(247,247,242,.18);--line:var(--rule-strong);
  --veil:linear-gradient(180deg,rgba(30,28,27,.3) 0%,rgba(30,28,27,.56) 45%,rgba(30,28,27,.9) 100%);--tag-bg:rgba(30,28,27,.72);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;--mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --fs-display:clamp(2.75rem,1.6rem + 4.4vw,6rem);--fs-h1:clamp(2.5rem,1.5rem + 3.4vw,4.75rem);--fs-h2:clamp(2.25rem,1.85rem + 1.4vw,3rem);--fs-h3:clamp(1.6rem,1.3rem + 1vw,2.5rem);
  --fs-quote:clamp(1.6rem,1.1rem + 2vw,2.6rem);--fs-stat:clamp(2.75rem,2rem + 3vw,4rem);--fs-lede:clamp(1.15rem,1.05rem + .45vw,1.4rem);--fs-body:1.0625rem;--fs-small:.875rem;--fs-eyebrow:.75rem;
  --lh-body:1.65;--lh-tight:1.04;--track-display:-.03em;--track-eyebrow:.0625em;
  --measure:38rem;--wide:80rem;--gutter:clamp(1rem,.4rem + 3vw,4rem);
  --space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2.5rem;--space-5:4rem;--space-6:clamp(4.5rem,3rem + 6vw,9rem);
  --frame:1rem;--r-card:24px;--r:16px;--r-sm:12px;--header:60px;--bar-top:8px;
  --ease:cubic-bezier(.22,1,.36,1);--ease-circ:cubic-bezier(0,.55,.45,1);--dur:.7s;--m-fast:.45s;--m-base:.8s;--m-slow:1.2s;
  /* z-index scale: content 1 · sticky heads 2 · topbar 30 · draft pill 35 · menu = dialog top layer */
  --z-topbar:30;--z-pill:35;
}
@media (min-width:48rem){:root{--frame:2rem;--bar-top:12px}}
@media (max-width:767px){:root{--r-card:20px}}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-top) + var(--header) + 1rem);color-scheme:light}
body{font-variant-numeric:lining-nums;margin:0;background:var(--bg);color:var(--ink);font:300 var(--fs-body)/var(--lh-body) var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;min-height:100svh;display:flex;flex-direction:column}
main{flex:1 0 auto;outline:none}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:var(--lh-tight);margin:0;text-wrap:balance;color:var(--ink-strong);font-variant-numeric:lining-nums}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:500;color:var(--ink-strong)}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
figcaption{font-size:.82rem;line-height:1.5;color:var(--soft);margin-top:.7rem}
:focus-visible{outline:2px solid var(--ink-strong);outline-offset:3px;border-radius:4px}
::selection{background:var(--sage);color:var(--on-dark)}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-6rem;z-index:60;background:var(--ink-strong);color:var(--on-dark);padding:.75rem 1rem;border-radius:var(--r-sm);font-weight:500;text-decoration:none}
.skip:focus{top:1rem;outline:2px solid var(--on-dark);outline-offset:2px}
.credit{color:var(--soft);font-size:.92em}
.ext{display:inline;margin-left:.3em;font-size:.8em;vertical-align:.1em;opacity:.7}

/* ------------------------------------------------------------------ editorial grid: full = edge to edge · wide = 80rem column · main = reading measure */
.grid{display:grid;grid-template-columns:[full-start] minmax(var(--gutter),1fr) [wide-start] minmax(0,calc((var(--wide) - var(--measure)) / 2)) [main-start] min(var(--measure),100% - 2 * var(--gutter)) [main-end] minmax(0,calc((var(--wide) - var(--measure)) / 2)) [wide-end] minmax(var(--gutter),1fr) [full-end]}
.grid>*{grid-column:main;min-width:0}
.grid>.col-wide{grid-column:wide}
.grid>.col-full{grid-column:full}
.container{width:100%;max-width:calc(var(--wide) + 2 * var(--gutter));margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}
.container--wide{max-width:calc(112.5rem + 2 * var(--gutter))}
.section{padding-block:var(--space-6)}

/* ------------------------------------------------------------------ type */
.eyebrow{display:flex;align-items:center;gap:.75rem;margin:0 0 1.1rem;font:400 var(--fs-eyebrow)/1.4 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink)}
.eyebrow::before{content:"";flex:none;width:8px;height:8px;border-radius:100vw;background:var(--sage)}
.eyebrow__text{display:inline-block}
.runhead{margin:0 0 .9rem;font:italic 400 1.2rem/1.3 var(--serif);color:var(--soft)}
.h1,.hero__title{font-size:var(--fs-h1);letter-spacing:var(--track-display);line-height:.98}
.h2,.b-pathway__title,.b-flow__title,.b-matrix__title,.b-register__title,.b-intro__title,.b-pillars__title,.b-cards__title,.b-stats__title,.b-story__title,.b-timeline__title,.b-feature__title,.b-gallery__title,.b-faq__title,.b-eco__title,.b-steps__title,.b-compare__title,.b-links__title,.b-logos__title{font-size:var(--fs-h2);letter-spacing:-.025em;line-height:1.06;max-width:20ch}
.b-prose__title{font-size:var(--fs-h3);letter-spacing:-.015em;line-height:1.1}
.h3{font-size:var(--fs-h3)}
.lede,.hero__lede{font:400 var(--fs-lede)/1.5 var(--sans);color:var(--ink);max-width:36rem;margin:0 0 1.25em}
.b-intro .lede{font:400 var(--fs-lede)/1.5 var(--sans);color:var(--ink-strong);max-width:34rem}
.prose{max-width:var(--measure)}
.small{font-size:var(--fs-small);line-height:1.55}
.muted{color:var(--soft)}
.statement{margin:0;font:400 clamp(1.9rem,1.2rem + 2.6vw,3.6rem)/1.12 var(--serif);letter-spacing:-.02em;color:var(--ink-strong);max-width:24ch;text-wrap:balance}
.b-statement__note{margin-top:1.5rem;color:var(--soft);max-width:48ch}
.dated{margin:1.5rem 0 0;font:400 var(--fs-eyebrow)/1.4 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
.source{font:400 .72rem/1.5 var(--mono);letter-spacing:.02em;color:var(--soft)}

/* ------------------------------------------------------------------ buttons (the shell's: 16px radius, Plex 500; charcoal primary, stone secondary, ruled ghost) */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.95rem 1.5rem;border:1px solid transparent;background:var(--ink-strong);color:var(--bg);border-radius:var(--r);text-decoration:none;font:500 1rem/1.25 var(--sans);text-align:center;transition:background-color .25s var(--ease-circ),color .25s var(--ease-circ),border-color .25s var(--ease-circ),transform .25s var(--ease-circ)}
.button:hover{background:var(--dark-lift);color:var(--bg)}
.button:active{transform:scale(.96)}
.button--secondary{background:var(--surface);color:var(--ink-strong)}
.button--secondary:hover{background:var(--stone-deep);color:var(--ink-strong)}
.button--ghost{background:transparent;color:var(--ink-strong);border-color:var(--rule-strong)}
.button--ghost:hover{background:rgba(39,36,31,.06);color:var(--ink-strong)}
.button--dark{background:var(--dark);color:var(--on-dark)}
.button--dark:hover{background:var(--dark-lift);color:var(--on-dark)}
.textlink,.itemlink,.card__link{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;font:500 1rem/1.3 var(--sans);color:var(--ink-strong);text-decoration:none;border-bottom:1px solid var(--rule-strong);padding-bottom:.1rem;transition:border-color .25s var(--ease-circ)}
.textlink:hover,.itemlink:hover,.card__wrap:hover .card__link{border-color:var(--ink-strong)}
.textlink span,.itemlink span{transition:translate .3s var(--ease)}
.textlink:hover span[aria-hidden],.itemlink:hover span[aria-hidden]{translate:.25rem 0}
.actions{display:flex;flex-wrap:wrap;gap:.75rem .9rem;margin-top:var(--space-3)}
.blk__actions{margin-top:var(--space-4)}

/* ------------------------------------------------------------------ dark surfaces: charcoal cards share one set of overrides */
.tone-dark,.hero--dark,.foot,.menu{color:var(--on-dark);--ink:var(--on-dark);--ink-strong:var(--on-dark);--soft:var(--on-dark-soft);--line:var(--rule-on-dark);--rule:var(--rule-on-dark);--rule-strong:var(--rule-on-dark);--surface:var(--dark-lift);--surface-light:var(--dark-lift);--bg-depth:var(--dark-lift);--sage-deep:#a9b6b1}
:is(.tone-dark,.hero--dark,.foot,.menu) :is(h1,h2,h3,h4,strong,.statement,.lede,.hero__lede){color:var(--on-dark)}
:is(.tone-dark,.hero--dark,.foot) :focus-visible{outline-color:var(--on-dark)}
:is(.tone-dark,.hero--dark,.foot) ::selection{background:var(--paper);color:var(--dark)}
:is(.tone-dark,.hero--dark,.foot) .button{background:var(--bg);color:var(--dark)}
:is(.tone-dark,.hero--dark,.foot) .button:hover{background:var(--surface-light);color:var(--dark)}
:is(.tone-dark,.hero--dark,.foot) :is(.button--secondary,.button--ghost){background:transparent;color:var(--on-dark);border-color:var(--rule-on-dark)}
:is(.tone-dark,.hero--dark,.foot) :is(.button--secondary,.button--ghost):hover{background:rgba(247,247,242,.08);color:var(--on-dark)}
:is(.tone-dark,.hero--dark) .button--dark{background:var(--bg);color:var(--dark)}
:is(.tone-dark,.hero--dark) :is(.textlink,.itemlink){color:var(--on-dark)}

/* ------------------------------------------------------------------ header: the shell's floating stone bar (8px radius, inset by --frame) */
.topbar{position:sticky;top:var(--bar-top);z-index:var(--z-topbar);margin:var(--bar-top) max(var(--frame),env(safe-area-inset-right,0px)) 0 max(var(--frame),env(safe-area-inset-left,0px));height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:8px 8px 8px 16px;background:var(--surface);color:var(--ink-strong);border-radius:8px;transition:box-shadow .4s var(--ease),background-color .4s var(--ease)}
.topbar.is-scrolled{box-shadow:0 12px 32px -18px rgba(30,28,27,.45)}
.topbar__brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:#27241f;white-space:nowrap}
.topbar__brand img{width:30px;height:30px;object-fit:contain}
.topbar__word{font:400 1.75rem/1 var(--serif);letter-spacing:3px;text-transform:uppercase}
.topbar__unit{font:400 var(--fs-eyebrow)/1 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft);margin-left:.4rem;padding-left:.9rem;border-left:1px solid var(--rule-strong);align-self:center;line-height:1.6}
.topbar__nav{display:none}
.topbar__nav ul{display:flex;gap:clamp(1rem,1.4vw,1.75rem)}
.topbar__nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font:400 .95rem/1 var(--sans);color:var(--ink);position:relative;white-space:nowrap}
.topbar__nav a::after{content:"";position:absolute;left:0;right:0;bottom:.6rem;height:1px;background:var(--ink-strong);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.topbar__nav a:hover::after,.topbar__nav a[aria-current=page]::after{transform:scaleX(1)}
.topbar__nav a[aria-current=page]{color:var(--ink-strong)}
.topbar__actions{display:flex;align-items:center;gap:.5rem}
.topbar__cta{min-height:44px;padding:0 1rem;border-radius:var(--r-sm);font-size:.9rem}
.topbar__menu{min-height:44px;padding:0 .9rem;border-radius:var(--r-sm);display:inline-flex;align-items:center;gap:.6rem;font:400 .9rem/1 var(--sans);color:var(--ink-strong);transition:background-color .25s var(--ease-circ)}
.topbar__menu:hover{background:rgba(25,24,24,.06)}
.topbar__menu-icon{width:16px;height:9px;background:linear-gradient(currentColor 0 0) top/100% 1px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 1px no-repeat}
.topbar :focus-visible{outline:2px solid var(--ink-strong);outline-offset:3px;border-radius:8px}
@media (max-width:420px){.topbar__unit{display:none}.topbar__menu-label{display:none}.topbar__menu{padding:0 .6rem}.topbar__cta{padding:0 .8rem;font-size:.85rem}.topbar__word{font-size:1.4rem;letter-spacing:2px}.topbar{padding-left:12px}.topbar__brand{gap:8px}}
@media (min-width:72rem){.topbar__nav{display:block}.topbar__menu-label{display:none}.topbar__menu{padding:0 .75rem}}

/* ------------------------------------------------------------------ menu (<dialog>): charcoal sheet from the right */
.menu{margin:0 0 0 auto;height:100dvh;max-height:none;width:min(26rem,100vw);border:0;padding:0;background:var(--dark)}
.menu::backdrop{background:rgba(30,28,27,.55)}
.menu[open]{animation:menu-in .45s var(--ease)}
@keyframes menu-in{from{transform:translateX(2rem);opacity:0}}
/* the panel arrives, then its contents settle a beat apart; the page behind dims rather than snapping */
@media (prefers-reduced-motion:no-preference){
  .menu[open]::backdrop{animation:menu-dim .45s var(--ease)}
  .menu[open] :is(.menu__list li,.menu__eco-title,.menu__eco li){animation:menu-item .6s var(--ease) both}
  .menu[open] .menu__list li:nth-child(1){animation-delay:140ms}.menu[open] .menu__list li:nth-child(2){animation-delay:180ms}.menu[open] .menu__list li:nth-child(3){animation-delay:220ms}.menu[open] .menu__list li:nth-child(4){animation-delay:260ms}.menu[open] .menu__list li:nth-child(5){animation-delay:300ms}.menu[open] .menu__list li:nth-child(6){animation-delay:340ms}.menu[open] .menu__list li:nth-child(7){animation-delay:380ms}.menu[open] .menu__list li:nth-child(8){animation-delay:420ms}.menu[open] .menu__inner .menu__eco-title{animation-delay:480ms}.menu[open] .menu__inner .menu__eco li{animation-delay:520ms}
  .menu__list a{transition:translate var(--t-std,.35s) var(--ease),text-decoration-color var(--t-micro,.18s)}
  .menu__list a:hover{translate:.35rem 0}
}
@keyframes menu-item{from{opacity:0;translate:0 10px}}
@keyframes menu-dim{from{opacity:0}}
.menu__inner{padding:var(--bar-top) var(--frame) 2.5rem;min-height:100%;display:flex;flex-direction:column;gap:1.5rem}
.menu__top{display:flex;align-items:center;justify-content:space-between;height:var(--header);padding:8px 8px 8px 16px;background:var(--dark-lift);border-radius:8px}
.menu__title{margin:0;display:inline-flex;align-items:center;gap:.75rem;font:400 var(--fs-eyebrow)/1 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase}
.menu__title::before{content:"";width:8px;height:8px;border-radius:100vw;background:var(--sage)}
.menu__close{min-height:44px;padding:0 1rem;border-radius:var(--r-sm);background:var(--bg);color:var(--dark);font-size:.875rem}
.menu__list{padding:0 .5rem;border-bottom:1px solid var(--rule-on-dark)}
.menu__list a{display:block;padding:.75rem 0;border-top:1px solid var(--rule-on-dark);text-decoration:none;font:400 1.6rem/1.15 var(--serif);letter-spacing:-.01em;color:var(--on-dark)}
.menu__list a:hover,.menu__list a[aria-current=page]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--on-dark-soft)}
.menu__eco-title{margin:.5rem 0 0;padding:0 .5rem;font:400 var(--fs-eyebrow)/1.4 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--on-dark-soft)}
.menu__eco{padding:0 .5rem;display:grid;gap:.1rem}
.menu__eco a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--on-dark);font-size:1rem}
.menu__eco a:hover{text-decoration:underline}
.menu :focus-visible{outline-color:var(--on-dark)}

/* ------------------------------------------------------------------ hero: stone split (type left, rounded photo card right) · dark = the book's inset charcoal card · type-only */
.hero{position:relative}
.hero__inner{display:grid;gap:var(--space-4);align-items:end;max-width:calc(var(--wide) + 2 * var(--gutter));margin:0 auto;padding:clamp(3rem,7vh,5.5rem) var(--gutter) var(--space-5)}
.hero--short .hero__inner{min-height:0;padding-block:clamp(3rem,10vh,7rem)}
.hero__text{display:flex;flex-direction:column;align-items:flex-start}
.hero__title{margin:0 0 1.25rem;max-width:18ch}
.hero__lede{margin:0;max-width:34rem}
.hero__actions{margin-top:var(--space-4)}
.hero__media{width:100%;max-width:min(100%,var(--maxw,40rem));justify-self:end}
.hero__media .pic img,.hero__media .ph{aspect-ratio:var(--frame,4/5);object-fit:cover;width:100%;border-radius:var(--r-card)}
.hero--type .hero__inner{min-height:min(56svh,34rem);align-items:center}
.hero--type .hero__title{max-width:16ch;font-size:var(--fs-display)}
.hero--stone.hero--type .hero__inner::after{content:"";grid-column:1/-1;height:1px;background:var(--rule-strong);margin-top:var(--space-3)}
.hero--dark{margin:var(--frame) max(var(--frame),env(safe-area-inset-right,0px)) 0 max(var(--frame),env(safe-area-inset-left,0px));background:var(--dark);border-radius:var(--r-card);overflow:clip;isolation:isolate}
.hero--dark .hero__inner{min-height:min(calc(100svh - var(--bar-top) - var(--header) - 2 * var(--frame)),58rem);padding:clamp(3rem,9vh,6rem) clamp(1.5rem,5vw,4.5rem) clamp(2rem,6vh,4.5rem)}
.hero--dark .hero__title{font-size:var(--fs-display);max-width:15ch;line-height:.95}
.hero--dark .hero__lede{color:var(--on-dark-soft)}
.hero--dark .eyebrow{color:var(--on-dark)}
.hero--dark figcaption{color:var(--on-dark-soft)}
@media (min-width:48rem){
  .hero--split .hero__inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem)}
  .hero--split .hero__media{align-self:end}
}
@media (min-width:64rem){.hero--split .hero__inner{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
@media (max-width:767px){.hero--split .hero__media{order:-1;max-width:none}.hero--split .hero__media .pic img,.hero--split .hero__media .ph{aspect-ratio:var(--frame,4/3)}}
/* panorama (home): the Prospectus hero, a full-bleed photograph behind the type, veiled from the left, trailer card on the right */
.hero__bg{position:absolute;inset:0;z-index:-1;margin:0}
.hero__bg .pic,.hero__bg .ph{position:absolute;inset:0;max-width:none;height:100%}
.hero__bg .pic img{width:100%;height:100%;object-fit:cover;border-radius:0;background:var(--dark-lift)}
.hero__bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(30,28,27,.9) 0%,rgba(30,28,27,.72) 38%,rgba(30,28,27,.28) 72%,rgba(30,28,27,.12) 100%),linear-gradient(0deg,rgba(30,28,27,.6) 0%,rgba(30,28,27,0) 32%)}
.hero__bg figcaption{position:absolute;z-index:1;left:clamp(1.5rem,5vw,4.5rem);right:clamp(1.5rem,5vw,4.5rem);bottom:1rem;margin:0;font-size:.75rem}
.hero--panorama .hero__inner{padding-bottom:clamp(4rem,9vh,6rem)}
.hero--panorama .hero__title{text-shadow:0 1px 24px rgba(30,28,27,.35)}
.trailer{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:20rem;padding:1rem;border-radius:var(--r);background:rgba(30,28,27,.48);color:var(--on-dark);text-decoration:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-self:end;align-self:end}
.trailer__screen{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--dark-lift)}
.trailer__loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trailer__play{position:relative;display:grid;place-items:center;width:3rem;height:3rem;border-radius:100vw;background:var(--paper);color:var(--dark);transition:transform var(--m-fast) var(--ease)}
.trailer__play svg{margin-left:2px}
.trailer:hover .trailer__play,.trailer:focus-visible .trailer__play{transform:scale(1.08)}
.trailer:focus-visible{outline:2px solid var(--on-dark);outline-offset:3px}
.trailer__meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;font:400 .8125rem/1.3 var(--sans)}
.trailer__time{color:var(--on-dark-soft)}
/* the hero invitation to the film: an underlined text link beside the primary button, opening the same player */
.watchlink{display:inline-flex;align-items:center;gap:.7rem;min-height:2.75rem;color:var(--on-dark);text-decoration:none;font:500 1rem/1.3 var(--sans)}
.watchlink__icon{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border:1px solid rgba(239,237,231,.55);border-radius:100vw;transition:background-color var(--t-micro,.18s) var(--ease),color var(--t-micro,.18s) var(--ease),border-color var(--t-micro,.18s) var(--ease)}
.watchlink__icon svg{width:.8rem;height:.8rem;margin-left:2px}
.watchlink__text{padding-bottom:.15rem;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.watchlink__text em{font:italic 400 1.15em/1 var(--serif);white-space:nowrap}
@media (max-width:767px){.hero--panorama .hero__inner:has(.watchlink) .trailer{display:none}}
.watchlink:hover .watchlink__icon,.watchlink:focus-visible .watchlink__icon{background:var(--paper);color:var(--dark);border-color:var(--paper)}
.watchlink:focus-visible{outline:2px solid var(--on-dark);outline-offset:4px;border-radius:4px}
.trailer__title{margin-top:-.35rem;font:400 1.3rem/1.15 var(--serif)}
@media (min-width:48rem){.hero--panorama .hero__inner{grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,5vw,5rem)}.hero--panorama .trailer{width:clamp(16rem,24vw,21rem)}}
@media (max-width:767px){
  .hero__bg::after{background:linear-gradient(0deg,rgba(30,28,27,.92) 0%,rgba(30,28,27,.74) 55%,rgba(30,28,27,.4) 100%)}
  .hero--panorama .hero__inner{padding-bottom:5rem}
  .hero--panorama .trailer{justify-self:start;max-width:17rem}
}
/* trailer player: native <dialog>, the film fills the width up to 16:9 of the viewport */
.player{width:min(100vw - 2 * var(--frame),calc((100svh - 8rem) * 16 / 9),72rem);max-width:none;max-height:none;padding:0;border:0;background:transparent;color:var(--on-dark);overflow:visible}
.player::backdrop{background:rgba(20,19,18,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.player__inner{display:grid;gap:.75rem}
.player__close{justify-self:end;min-height:44px;padding:0 1.1rem;border:1px solid var(--rule-on-dark);border-radius:100vw;color:var(--on-dark);font-size:.9rem}
.player__close:hover{background:rgba(247,247,242,.08)}
.player__close:focus-visible{outline:2px solid var(--on-dark);outline-offset:2px}
.player__frame{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
.player__frame iframe{display:block;width:100%;height:100%;border:0}

/* ------------------------------------------------------------------ blocks: section tone + rhythm (adjacent same-tone sections share one band) */
.blk{position:relative;padding-block:var(--space-6)}
.tone-ivory{background:var(--bg);--sec-bg:var(--bg)}.tone-dark{--sec-bg:var(--dark)}
.tone-paper{background:var(--bg-depth);--sec-bg:var(--bg-depth)}
.tone-ivory+.tone-ivory,.tone-paper+.tone-paper{padding-top:0}
.tone-ivory+.tone-ivory>.grid::before,.tone-paper+.tone-paper>.grid::before{content:"";grid-column:wide;height:1px;background:var(--rule-strong);margin-bottom:var(--space-6)}
.hero+.blk.tone-ivory{padding-top:var(--space-4)}
.hero--panorama+.blk.tone-ivory{padding-top:var(--space-6)}
.blk.tone-dark{margin:var(--frame) max(var(--frame),env(safe-area-inset-right,0px)) var(--frame) max(var(--frame),env(safe-area-inset-left,0px));border-radius:var(--r-card);overflow:clip;background:var(--dark)}
main>.blk.tone-dark:last-child{margin-bottom:clamp(2.5rem,6vw,4rem)}
.blk.tone-dark+.blk.tone-dark{margin-top:calc(-1 * var(--frame) + 1rem)}
.blk__extras{margin-top:var(--space-3)}
.blk__extras:empty{display:none}

/* ------------------------------------------------------------------ intro */
.b-intro__title{margin-top:0;margin-bottom:1.25rem}
.b-intro__body{margin-top:1.5rem}
.b-intro .lede{margin-top:0}
.b-intro__body p{max-width:var(--measure)}
.b-intro--media{display:grid;gap:var(--space-4);align-items:center}
.b-intro--media .b-intro__body{margin-top:1.25rem}
.b-intro__media .pic img,.b-intro__media .ph{width:100%;aspect-ratio:var(--frame,4/5);object-fit:cover;border-radius:var(--r-card)}
@media (min-width:56rem){.b-intro--media{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(2rem,5vw,5rem)}.b-intro--media .b-intro__media{max-width:30rem;justify-self:end}}

/* ------------------------------------------------------------------ prose: running head in the margin (sticky from 1100px), reading column */
.b-prose{display:grid;grid-template-columns:subgrid}
.b-prose__head{grid-column:main}
.b-prose__body{grid-column:main;margin-top:1rem}
.b-prose__body p{max-width:var(--measure)}
@media (min-width:68.75rem){
  .b-prose__head{grid-column:wide-start/main-start;grid-row:1;padding-right:2.5rem;text-align:right;align-self:start;position:sticky;top:calc(var(--bar-top) + var(--header) + 1.5rem);z-index:2}
  .b-prose__head .runhead{margin-bottom:.5rem}
  .b-prose__title{font-size:1.7rem;line-height:1.12}
  .b-prose__body{grid-row:1;margin-top:.2rem}
}

/* ------------------------------------------------------------------ pillars: a ruled editorial list (title left, text right), not a card grid */
.b-pillars__intro,.b-cards__intro,.b-eco__intro{margin:1.25rem 0 0;color:var(--soft);max-width:var(--measure)}
.pillars{margin-top:var(--space-4);border-top:1px solid var(--rule-strong)}
.pillar{display:grid;gap:.75rem 2rem;padding:clamp(1.5rem,3vw,2.25rem) 0;border-bottom:1px solid var(--rule-strong)}
.pillar__num{font:400 1.4rem/1 var(--serif);color:var(--soft);font-variant-numeric:lining-nums}
.pillar__title{font-size:clamp(1.6rem,1.3rem + 1vw,2.25rem);letter-spacing:-.015em}
.pillar__meta{margin:.4rem 0 0;font:400 var(--fs-eyebrow)/1.4 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
.pillar__body p{max-width:var(--measure)}
.pillar__body .itemlink{margin-top:.5rem}
@media (min-width:56rem){
  .pillar{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .pillar__num{grid-column:1/-1;margin-bottom:-.25rem}
  .pillar__head{padding-right:1rem}
}

/* ------------------------------------------------------------------ cards: stone or photo cards (photo cards = the book's product card: rounded, veiled, type on the image) */
.cards{margin-top:var(--space-4);display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.card{min-width:0}
.card__wrap{display:flex;flex-direction:column;height:100%;border-radius:var(--r-card);background:var(--surface);text-decoration:none;color:inherit;overflow:clip;transition:background-color .3s var(--ease-circ),transform .5s var(--ease)}
.tone-paper .card__wrap{background:var(--bg)}
a.card__wrap:hover{background:var(--stone-deep)}
.card__text{padding:clamp(1.25rem,2.5vw,1.75rem);display:flex;flex-direction:column;gap:.6rem;flex:1}
.card__meta,.card__text .card__meta{margin:0;font:400 var(--fs-eyebrow)/1.4 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
.card__title{font-size:clamp(1.5rem,1.3rem + .8vw,2rem);line-height:1.1;letter-spacing:-.01em}
.card__text p{color:var(--soft);font-size:.98rem}
.card__link{margin-top:auto;align-self:flex-start;padding-top:.75rem}
.card__pic img,.card__pic.ph{width:100%;aspect-ratio:var(--row-frame,var(--frame,4/3));object-fit:cover;border-radius:0}
.card--photo .card__wrap{background:var(--surface)}
.card__text p.card__note{margin-top:.25rem;padding-top:.75rem;border-top:1px solid var(--rule-strong);font-size:.8rem;line-height:1.5}

/* ------------------------------------------------------------------ chart: Apple-style comparison bars in the Indaba palette
   One thin bar per group, the Indaba result in a warm-gold-to-sage gradient, comparisons in quiet stone; a large value to the
   right of each bar. Bars grow when the chart scrolls into view and re-measure when a tab is chosen (site.js). */
.b-chart__title{font-size:var(--fs-h2);max-width:20ch}
.b-chart__lede{margin:1.25rem 0 0;max-width:40rem;font:300 var(--fs-lede)/1.5 var(--sans);color:var(--soft)}
.chart{margin:var(--space-5) 0 0}
.chart__tabs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem;margin-bottom:var(--space-4);scrollbar-width:none}
.chart__tabs::-webkit-scrollbar{display:none}
.chart__tab{flex:none;min-height:44px;padding:0 1.1rem;border:1px solid var(--rule);border-radius:100vw;font:400 .9rem/1 var(--sans);color:var(--soft);transition:background-color .3s var(--ease-circ),color .3s var(--ease-circ),border-color .3s}
.chart__tab:hover{color:var(--ink-strong);border-color:var(--rule-strong)}
.chart__tab[aria-selected=true]{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.tone-ivory .chart__tab[aria-selected=true],.tone-paper .chart__tab[aria-selected=true]{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
.chart__unit{margin:0 0 var(--space-3);font:400 var(--fs-eyebrow)/1.5 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
.chart__note{text-transform:none;letter-spacing:0;font-family:var(--sans)}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.75rem,4.5vw,3.25rem)}
.bar{display:grid;grid-template-columns:minmax(0,1fr) clamp(5.25rem,13vw,9.5rem);column-gap:clamp(1rem,4vw,3rem);align-items:center}
.bar__track{grid-column:1;grid-row:1;position:relative;height:12px}
.bar__fill{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 1%);min-width:12px;border-radius:100vw;background:rgba(247,247,242,.26);transition:width 1.2s var(--ease)}
.tone-ivory .bar__fill,.tone-paper .bar__fill{background:var(--stone-deep)}
.bar--accent .bar__fill{background:linear-gradient(90deg,#f3e9d2 0%,#d9bf8a 30%,#b9a36f 52%,#93a79c 78%,#c8dbd1 100%)}
.bar:nth-child(2) .bar__fill{transition-delay:.12s}.bar:nth-child(3) .bar__fill{transition-delay:.24s}.bar:nth-child(4) .bar__fill{transition-delay:.36s}
.bar__label{grid-column:1;grid-row:2;margin-top:.7rem;font:300 clamp(.98rem,.9rem + .35vw,1.3rem)/1.35 var(--sans);color:var(--soft)}
.bar--accent .bar__label{color:var(--ink-strong)}
.bar__value{grid-column:2;grid-row:1/3;justify-self:end;font:300 clamp(2.25rem,1.4rem + 3.6vw,4.75rem)/1 var(--sans);letter-spacing:-.025em;color:var(--soft);white-space:nowrap}
.bar--accent .bar__value{color:var(--ink-strong);font-weight:400}
.chart__caveat{margin:var(--space-4) 0 0;max-width:46rem;font-size:.85rem;line-height:1.6;color:var(--soft)}
.chart__caveat .source{display:block;margin-top:.4rem;font:400 .72rem/1.5 var(--mono)}
.chart__table{margin-top:var(--space-3)}
.chart__table summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-size:.9rem;text-decoration:underline;text-underline-offset:.22em}
.chart__scroll{overflow-x:auto;margin-top:.75rem}
.chart__table table{width:100%;min-width:34rem;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.chart__table :is(th,td){padding:.6rem .75rem;text-align:right;border-bottom:1px solid var(--rule);font-weight:400}
.chart__table :is(th:first-child){text-align:left}
.chart__table thead th{font:400 .72rem/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--soft)}
html.motion .b-chart:not(.is-drawn) .bar__fill{width:0}
@media (max-width:599px){.bar{grid-template-columns:minmax(0,1fr) 4.75rem}.bar__track{height:10px}}

/* ------------------------------------------------------------------ ways: the six ways to build with us (charity: water's "ways to give", Indaba-quiet) */
.b-ways__title{font-size:var(--fs-h2);max-width:18ch}
.b-ways__intro{margin:1.25rem 0 0;max-width:40rem;color:var(--soft);font-size:1.05rem}
.ways{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:40rem){.ways{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.ways{grid-template-columns:repeat(3,minmax(0,1fr))}}
.way{min-width:0}
.way__wrap{position:relative;display:flex;flex-direction:column;gap:.75rem;height:100%;min-height:clamp(15rem,24vw,19rem);padding:clamp(1.5rem,2.6vw,2.25rem);border-radius:var(--r-card);background:var(--bg);color:inherit;text-decoration:none;overflow:clip;transition:transform .5s var(--ease),background-color .3s var(--ease-circ)}
.way__wrap:hover{transform:translateY(-3px);background:var(--surface-light)}
.way__wrap:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.way__num{font:400 var(--fs-eyebrow)/1 var(--mono);letter-spacing:var(--track-eyebrow);color:var(--soft)}
.way__verb{font:400 clamp(2rem,1.6rem + 1.6vw,3.1rem)/1 var(--serif);letter-spacing:-.02em;color:var(--ink-strong)}
.way__body{color:var(--soft);font-size:.98rem;line-height:1.55;max-width:30rem}
.way__link{margin-top:auto;padding-top:.75rem;font-size:.92rem;font-weight:400;color:var(--ink-strong)}
.way__link>span[aria-hidden]{display:inline-block;transition:translate .4s var(--ease)}
.way__wrap:hover .way__link>span[aria-hidden]{translate:4px 0}
.way--featured .way__wrap{background:var(--dark);color:var(--on-dark)}
.way--featured .way__wrap:hover{background:var(--dark-lift)}
.way--featured :is(.way__verb,.way__link){color:var(--on-dark)}
.way--featured :is(.way__num,.way__body){color:var(--on-dark-soft)}
.way__pic{margin:calc(-1 * clamp(1.5rem,2.6vw,2.25rem)) calc(-1 * clamp(1.5rem,2.6vw,2.25rem)) .5rem;max-width:none;width:auto}
.way__pic img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0}
@media (min-width:64rem){.cards[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.cards[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}.cards[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.cards[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:80rem){.cards[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.cards[data-count="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ------------------------------------------------------------------ stats: static numbers, caveat beside them at label size (never a footnote) */
.b-stats__row{margin-top:var(--space-4);display:grid;gap:var(--space-4)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:2rem clamp(1.5rem,3vw,3rem)}
.stat{border-top:1px solid var(--rule-strong);padding-top:1rem;min-width:0}
.stat__value{margin:0;font:400 var(--fs-stat)/.95 var(--serif);letter-spacing:-.01em;color:var(--ink-strong);font-variant-numeric:lining-nums proportional-nums;overflow-wrap:anywhere}
.stat__label{margin:.6rem 0 0;font-size:.98rem;color:var(--ink);max-width:24ch}
.stat__period{margin:.4rem 0 0;font:400 .72rem/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--soft)}
.stat__note{margin:.5rem 0 0;font-size:.85rem;line-height:1.5;color:var(--soft);max-width:30ch}
.stat .badge{margin-top:.75rem}
.stat__source{margin:.6rem 0 0;max-width:26ch;font-size:.64rem;line-height:1.5}
.stat__source .source{font-size:1em;line-height:inherit;opacity:.8}
.stats__caveat{margin:0;padding:1rem 1.25rem;border:1px solid var(--rule);background:color-mix(in srgb,var(--ink-strong) 3%,transparent);border-radius:var(--r);font-size:.98rem;line-height:1.55;color:var(--ink);align-self:start}
@media (min-width:48rem){.stats[data-count="4"],.stats[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.stats[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:64rem){.b-stats__row .stats[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.b-stats__row.has-caveat .stats__caveat{max-width:44rem}}

/* ------------------------------------------------------------------ quote */
.b-quote{text-align:center;display:grid;justify-items:center;padding-block:var(--space-2)}
.b-quote .b-quote__pic{margin-bottom:1.5rem;width:6rem}
.b-quote .b-quote__pic img{width:6rem;height:6rem;object-fit:cover;border-radius:100vw}
.b-quote blockquote{margin:0;max-width:min(100%,58rem)}
.b-quote blockquote::before{content:"\201C";display:block;font:400 clamp(4rem,3rem + 3vw,6rem)/.6 var(--serif);color:var(--sage);height:.45em;margin-bottom:.15em}
.b-quote blockquote p{font:italic 400 var(--fs-quote)/1.2 var(--serif);letter-spacing:-.01em;margin:0 auto;max-width:26ch;text-wrap:balance;color:var(--ink-strong)}
.b-quote--long blockquote p{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);line-height:1.25;max-width:34ch}
.b-quote figcaption{margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem .9rem;font-size:.92rem;color:var(--ink)}
.b-quote__name{font-weight:500;color:var(--ink-strong)}
.b-quote__role{color:var(--soft)}
.b-quote__role::before{content:"";display:inline-block;width:6px;height:6px;border-radius:100vw;background:var(--sage);vertical-align:middle;margin-right:.9rem}
@media (max-width:30rem){.b-quote figcaption{flex-direction:column}.b-quote__role::before{display:none}}

/* ------------------------------------------------------------------ story: portrait photo + dropcap body */
.b-story{display:grid;gap:var(--space-4);align-items:start}
.b-story__media .pic img,.b-story__media .ph{width:100%;aspect-ratio:var(--frame,4/5);object-fit:cover;border-radius:var(--r-card)}
.b-story__title{margin-bottom:1.4rem;max-width:16ch}
.b-story__body p{max-width:var(--measure)}
.b-story__body .dropcap::first-letter{float:left;font:400 4.4em/.8 var(--serif);padding:.08em .1em 0 0;color:var(--ink-strong)}
@supports (initial-letter:3){.b-story__body .dropcap::first-letter{float:none;initial-letter:3;font:400 1em/1 var(--serif);padding:0;margin-right:.14em}}
@media (min-width:56rem){
  .b-story{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem)}
  .b-story__media{position:sticky;top:calc(var(--bar-top) + var(--header) + 1.5rem);max-width:30rem}
  .blk--story:nth-of-type(even) .b-story__media{order:2}
}

/* ------------------------------------------------------------------ timeline: vertical, year column from 48rem (the order IS the information) */
.tl{margin-top:var(--space-4);border-top:1px solid var(--rule-strong)}
.tl__item{position:relative;display:grid;gap:.5rem 2rem;padding:1.5rem 0 1.5rem 1.75rem;border-bottom:1px solid var(--rule-strong)}
.tl__item::before{content:"";position:absolute;left:0;top:2.05rem;width:9px;height:9px;border-radius:50%;background:var(--sage)}
.tl__item--future::before{background:transparent;border:1px dashed var(--sage-deep)}
.tl__year{margin:0;font:400 1.6rem/1 var(--serif);color:var(--ink-strong);font-variant-numeric:lining-nums tabular-nums}
.tl__title{font-size:1.5rem;line-height:1.15;margin-bottom:.5rem}
.tl__item--future .tl__title{font-style:italic}
.tl__text p{color:var(--ink);font-size:.98rem;max-width:var(--measure)}
.tl__text .badge{margin-top:.5rem}
/* timeline, progressive (compositor-run, view timelines): a hairline spine joins the years and fills as the reader moves
   down; each year lights as it reaches the reading line. Static and complete without support or with reduced motion. */
@supports (animation-timeline:view()){
  @media screen and (prefers-reduced-motion:no-preference){
    .tl{position:relative}
    .tl::before,.tl::after{content:"";position:absolute;left:4px;top:2.3rem;bottom:2.3rem;width:1px;background:var(--rule-strong);transform-origin:50% 0}
    .tl::after{background:var(--sage-deep);animation:tl-fill linear both;animation-timeline:view();animation-range:entry 70% exit 40%}
    .tl__item::before{z-index:1;box-shadow:0 0 0 4px var(--sec-bg,var(--bg));animation:tl-dot linear both;animation-timeline:view();animation-range:entry 55% cover 45%}
    .tl__item--future::before{animation:none}
    .tl__year,.tl__title{animation:tl-ink linear both;animation-timeline:view();animation-range:entry 55% cover 45%}
  }
}
@keyframes tl-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tl-dot{from{background:var(--rule-strong);scale:.7}to{background:var(--sage);scale:1}}
@keyframes tl-ink{from{opacity:.38}to{opacity:1}}
@media (min-width:48rem){.tl__item{grid-template-columns:7rem minmax(0,1fr);padding-left:2rem}.tl__item::before{top:2.1rem}}

/* ------------------------------------------------------------------ feature: image + text, alternating sides */
.b-feature{display:grid;gap:var(--space-4);align-items:center}
.b-feature__media .pic img,.b-feature__media .ph{width:100%;aspect-ratio:var(--frame,5/4);object-fit:cover;border-radius:var(--r-card)}
.b-feature__body p{max-width:var(--measure)}
.b-feature__title{margin-bottom:1.25rem}
@media (min-width:56rem){
  .b-feature{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,6vw,6rem)}
  .b-feature--right .b-feature__media{order:2}
}

/* ------------------------------------------------------------------ gallery */
.gallery{margin-top:var(--space-4);display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));align-items:start}
.gallery .pic img,.gallery .ph{width:100%;aspect-ratio:var(--frame,4/5);object-fit:cover;border-radius:var(--r)}
.gallery li:nth-child(3n+2){margin-top:0}
@media (min-width:56rem){.gallery li:nth-child(3n+2){margin-top:var(--space-4)}}

/* ------------------------------------------------------------------ faq: disclosures */
.faq{margin-top:var(--space-4);border-top:1px solid var(--rule-strong)}
.faq__item{border-bottom:1px solid var(--rule-strong)}
.faq__item>summary{list-style:none;display:flex;align-items:baseline;gap:1rem;padding:1.15rem 2.75rem 1.15rem 0;position:relative;cursor:pointer;min-height:44px;font:400 clamp(1.3rem,1.15rem + .6vw,1.7rem)/1.2 var(--serif);color:var(--ink-strong)}
.faq__item>summary::-webkit-details-marker{display:none}
.faq__item>summary::after{content:"";position:absolute;right:.25rem;top:50%;width:1.7rem;height:1.7rem;margin-top:-.85rem;border:1px solid var(--rule-strong);border-radius:50%;background:linear-gradient(currentColor 0 0) center/.7rem 1px no-repeat,linear-gradient(currentColor 0 0) center/1px .7rem no-repeat;transition:transform .35s var(--ease)}
.faq__item[open]>summary::after{transform:rotate(45deg)}
.faq__item>summary:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.faq__a{padding:0 0 1.5rem;max-width:var(--measure)}

/* ------------------------------------------------------------------ ecosystem: three organisations, each its own panel (role · name · text · link) */
.eco{margin-top:var(--space-4);display:grid;gap:1rem}
.eco__item{display:grid;gap:1.25rem;padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--r-card);background:var(--surface-light)}
.tone-paper .eco__item{background:var(--bg)}
.eco__pic img,.eco__pic.ph{width:100%;aspect-ratio:var(--frame,3/2);object-fit:cover;border-radius:var(--r)}
.eco__role{margin:0 0 .6rem;font:400 var(--fs-eyebrow)/1.4 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
.eco__title{font-size:clamp(1.6rem,1.3rem + 1vw,2.25rem);margin-bottom:.8rem}
.eco__text p{color:var(--ink);font-size:.98rem}
.eco__soon{color:var(--soft);font-style:italic}
@media (min-width:56rem){
  .eco[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .eco[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eco[data-count="3"] .eco__item:nth-child(2){margin-top:var(--space-4)}
}

/* ------------------------------------------------------------------ cta */
.b-cta{display:grid;gap:1rem;padding-block:var(--space-2)}
.b-cta__title{font-size:var(--fs-h1);letter-spacing:var(--track-display);line-height:.98;max-width:14ch}
.b-cta__text{font:300 var(--fs-lede)/1.55 var(--sans);max-width:44ch;color:var(--on-dark-soft)}
.tone-ivory .b-cta__text,.tone-paper .b-cta__text{color:var(--ink)}
.b-cta .actions{margin-top:var(--space-3)}
@media (min-width:64rem){
  .b-cta{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:clamp(2rem,5vw,5rem)}
  .b-cta .eyebrow{grid-column:1/-1}
  .b-cta .actions{margin-top:0;justify-content:flex-start}
}

/* ------------------------------------------------------------------ steps: a real sequence, so numbers carry meaning */
.steps{margin-top:var(--space-4);display:grid;gap:1.5rem 2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.step{display:grid;gap:.5rem;align-content:start;padding-top:1rem;border-top:1px solid var(--rule-strong)}
.step__num{font:400 2.2rem/1 var(--serif);color:var(--ink-strong);font-variant-numeric:lining-nums}
.step__title{font-size:1.45rem;line-height:1.15}
.step__body p{font-size:.98rem;color:var(--ink)}
@media (min-width:56rem){.steps[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ------------------------------------------------------------------ logos (names only until partners are confirmed) */
.logos{margin-top:var(--space-3);display:flex;flex-wrap:wrap;gap:.5rem 2rem;font:400 1.3rem/1.3 var(--serif);color:var(--soft)}
.logos a{text-decoration:none}

/* ------------------------------------------------------------------ compare: two or three columns of plain lists */
.compare{margin-top:var(--space-4);display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.compare__col{padding:clamp(1.25rem,3vw,2rem);border-radius:var(--r-card);background:var(--surface-light)}
.tone-paper .compare__col{background:var(--bg)}
.compare__col:last-child:not(:first-child){background:transparent;outline:1px solid var(--rule-strong);outline-offset:-1px}
.compare__head{font-size:1.5rem;margin-bottom:.9rem}
.compare__col li{padding:.6rem 0;border-top:1px solid var(--rule-strong);font-size:.98rem;line-height:1.5}
.b-compare__caption{margin-top:1.25rem;font-size:.9rem;color:var(--soft);max-width:var(--measure)}

/* ------------------------------------------------------------------ links: deeper reading */
.links{margin-top:var(--space-4);border-top:1px solid var(--rule-strong)}
.links__a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem 1.5rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--rule-strong);text-decoration:none;color:inherit;min-height:44px}
.links__label{font:400 1.4rem/1.2 var(--serif);color:var(--ink-strong)}
.links__body{grid-column:1;font-size:.92rem;color:var(--soft)}
.links__arrow{grid-column:2;grid-row:1/span 2;font:300 1.5rem/1 var(--serif);transition:translate .3s var(--ease)}
.links__a:hover .links__label{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.links__a:hover .links__arrow{translate:.3rem 0}

/* ------------------------------------------------------------------ pictures, placeholders, tags, badges, flags */
/* Frames never upscale: capped at the manifest's native width (CSS px at 1x); on hi-dpi screens at native/1.5 so the
   worst case is a 1.33x stretch rather than 2x. Landscape sources keep landscape frames (--frame, set per image). */
/* width:100%: the media columns are grids with justify-items:end, so without it a lazy image's box is 0×0 until it loads,
   and a 0×0 lazy image never loads (only eager images appeared). */
.pic{position:relative;width:100%;max-width:var(--maxw,100%)}
@media (min-resolution:1.5dppx){.pic,.ph{max-width:calc(var(--maxw,100vw) / 1.5)}}
.hero__media,.b-intro__media,.b-story__media,.b-feature__media{display:grid;justify-items:end}
.hero__media figcaption,.b-intro__media figcaption,.b-story__media figcaption,.b-feature__media figcaption{justify-self:stretch;max-width:var(--maxw,100%)}
.pic img{border-radius:var(--r);background:var(--surface);object-position:var(--fx,50%) var(--fy,50%)} /* every crop keeps the subject the catalogue marks (focalPoint) */
.ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;aspect-ratio:var(--ar,3/2);width:100%;max-width:var(--maxw,100%);border-radius:var(--r);background:repeating-linear-gradient(135deg,var(--rule-strong) 0 1px,transparent 1px 14px),var(--surface);color:var(--soft);text-align:center;padding:1rem}
.tone-dark .ph,.hero--dark .ph{background:repeating-linear-gradient(135deg,rgba(247,247,242,.07) 0 1px,transparent 1px 14px),var(--dark-lift)}
.ph__label{font:italic 400 1.15rem/1.2 var(--serif)}
.ph__id{font:400 .66rem/1.3 var(--mono);letter-spacing:.06em;opacity:.8;overflow-wrap:anywhere}
.rights-tag{position:absolute;left:.75rem;top:.75rem;z-index:1;display:block;background:var(--tag-bg);color:var(--on-dark);border-radius:100vw;padding:.4rem .8rem .4rem 1.55rem;font:400 .6875rem/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;pointer-events:none;max-width:calc(100% - 1.5rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rights-tag::before{content:"";position:absolute;left:.75rem;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:100vw;background:var(--mineral)}
.badge{display:inline-flex;align-items:center;gap:.45rem;font:400 .6875rem/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:.35rem .7rem;border:1px solid var(--rule-strong);color:var(--ink);border-radius:100vw;white-space:nowrap;vertical-align:middle}
.badge::before{content:"";flex:none;width:6px;height:6px;border-radius:100vw;background:var(--soft)}
.badge--historical::before{background:var(--mineral)}
.badge--future::before{background:transparent;border:1px dashed var(--ink)}
.flag{margin:1rem 0 0;padding:.8rem 1rem;background:var(--warning-bg);color:#2b2416;border:1px dashed var(--warning);border-radius:var(--r-sm);font-size:.85rem;line-height:1.5;max-width:var(--measure)}
.flag__label{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;font:400 .6875rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--warning-ink)}
.flag__label::before{content:"";flex:none;width:7px;height:7px;border-radius:100vw;background:var(--warning)}
.draft-pill{position:fixed;right:var(--frame);bottom:min(var(--frame),2rem);z-index:var(--z-pill);display:flex;align-items:center;gap:.6rem;max-width:min(30rem,calc(100vw - 2 * var(--frame)));background:var(--dark);color:var(--on-dark);border:1px solid var(--rule-on-dark);border-radius:var(--r-sm);padding:.6rem .9rem;font:300 .8rem/1.45 var(--sans);box-shadow:0 10px 30px -10px rgba(30,28,27,.45);pointer-events:none}
.draft-pill::before{content:"";flex:none;width:8px;height:8px;border-radius:100vw;background:var(--warning)}
.draft-pill strong{font:400 var(--fs-eyebrow)/1 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--on-dark)}
@media (max-width:767px){.draft-pill{left:0;right:0;bottom:0;max-width:none;border-radius:0;border-width:1px 0 0;justify-content:center;padding:.45rem .75rem;font-size:.74rem;box-shadow:none}body.is-preview{padding-bottom:2.2rem}}
@media (max-width:360px){.draft-pill span{display:none}}

/* ------------------------------------------------------------------ forms (base for donate): 48px controls, 16px radius, ink focus ring */
.field{display:grid;gap:.4rem}
.field__label{font:500 .95rem/1.3 var(--sans);color:var(--ink-strong)}
.field__hint{font-size:.85rem;color:var(--soft)}
.input,input:where([type=text],[type=email],[type=number],[type=tel],[type=url]),select,textarea{width:100%;min-height:3rem;padding:.75rem 1rem;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface-light);color:var(--ink-strong);font:400 1rem/1.3 var(--sans);transition:border-color .25s var(--ease-circ)}
.input:hover,input:where([type=text],[type=email],[type=number],[type=tel],[type=url]):hover,select:hover,textarea:hover{border-color:var(--soft)}
.input::placeholder,input::placeholder,textarea::placeholder{color:var(--soft);opacity:1}
.tone-dark :is(.input,input,select,textarea){background:var(--dark-lift);color:var(--on-dark);border-color:var(--rule-on-dark)}

/* ------------------------------------------------------------------ footer: charcoal */
.foot{background:var(--dark);padding:var(--space-6) var(--gutter) var(--space-4);margin-top:auto}
.foot__inner{max-width:var(--wide);margin:0 auto;display:grid;gap:var(--space-5)}
.foot__brand{display:grid;gap:1.25rem;max-width:40rem}
.foot__mark{display:flex;align-items:center;gap:.75rem;margin:0;font:400 2rem/1 var(--serif);letter-spacing:3px;text-transform:uppercase;color:var(--on-dark)}
.foot__mark img{width:40px;height:40px}
.foot__mark em{font:400 var(--fs-eyebrow)/1 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--on-dark-soft);margin-left:.75rem;vertical-align:.4em}
.foot__lede{margin:0;font:italic 400 clamp(1.3rem,1.1rem + .8vw,1.75rem)/1.35 var(--serif);color:var(--on-dark)}
.foot .actions{margin-top:.5rem}
.foot__cols{display:grid;gap:2rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));padding-top:var(--space-4);border-top:1px solid var(--rule-on-dark)}
.foot__col--eco{grid-column:1/-1}
@media (min-width:64rem){.foot__cols{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.6fr)}.foot__col--eco{grid-column:auto}}
.foot__col-title{margin:0 0 .75rem;font:400 var(--fs-eyebrow)/1.4 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--on-dark-soft)}
.foot__col li{display:grid}
.foot__col a{display:inline-block;padding-block:calc((44px - 1.4em) / 2);line-height:1.4;text-decoration:none;color:var(--on-dark);font-size:1rem}
.foot__col a:hover{text-decoration:underline;text-decoration-color:var(--on-dark-soft)}
.foot__blurb{display:block;font-size:.85rem;color:var(--on-dark-soft);margin:-.4rem 0 .5rem}
.foot__soon{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark-soft)}
.foot__soon em{font-size:.85rem;margin-left:.4rem}
.foot__legal{display:grid;gap:1rem;padding-top:var(--space-3);border-top:1px solid var(--rule-on-dark);font-size:.85rem;line-height:1.55;color:var(--on-dark-soft)}
.foot__legal p{margin:0}
.foot__legal a{color:var(--on-dark);min-height:44px;display:inline-flex;align-items:center}
.foot__name{color:var(--on-dark);font-weight:500}
.foot__reg{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em}
.foot__copy{font-size:.8rem}
.foot .flag{background:var(--dark-lift);color:var(--on-dark-soft);border-color:var(--mineral)}
.foot .flag__label{color:var(--on-dark)}
.foot .flag__label::before{background:var(--mineral)}
@media (min-width:48rem){.foot__legal{grid-template-columns:minmax(0,1fr) auto;align-items:end}}

/* ------------------------------------------------------------------ motion (screen only; an enhancement — everything is visible by default)
   Shared vocabulary with the Investor Book and Impact Report: out-quint, fast .45s / base .8s / slow 1.2s, 80ms stagger capped
   at 6, rise 16px headings / 12px body / 24px cards, photographs clip inset(8%) -> 0 with a slow settle. "From" states apply only
   to elements site.js has marked with data-m (below the fold, html.motion). site.js removes data-m once an entrance has played,
   so every element ends on its static style. Transform, opacity and clip-path only. */
.hero--dark :is(.hero__media,.hero__bg) img{animation:settle 2.4s var(--ease) both}
@keyframes settle{from{transform:scale(1.045)}}
.m-eb{display:inline-block}
@media screen and (prefers-reduced-motion:no-preference){
  .motion :is([data-m=rise],[data-m=head],[data-m=card]){transition:opacity var(--m-base) var(--ease) var(--md,0ms),translate var(--m-base) var(--ease) var(--md,0ms)}
  .motion [data-m=head]:not(.is-in){opacity:0;translate:0 16px}
  /* split section headings: the words, not the block, make the entrance (see splitWords in site.js) */
  .motion .hl{display:inline-block;overflow:clip;padding:.02em .08em .16em;margin:-.02em -.08em -.16em;vertical-align:top}
  .motion .hl>span{display:inline-block}
  .motion [data-m=head].is-split{transition:none}
  .motion [data-m=head].is-split:not(.is-in){opacity:1;translate:none}
  .motion [data-m=head].is-split .hl>span{transition:translate .9s var(--ease) calc(var(--md,0ms) + var(--w,0) * 45ms)}
  .motion [data-m=head].is-split:not(.is-in) .hl>span{translate:0 108%}
  .motion [data-m=rise]:not(.is-in){opacity:0;translate:0 12px}
  .motion [data-m=card]:not(.is-in){opacity:0;translate:0 24px}
  .motion [data-m=eyebrow]::before{transition:scale var(--m-fast) var(--ease) var(--md,0ms)}
  .motion [data-m=eyebrow] .m-eb{transition:opacity var(--m-base) var(--ease) calc(var(--md,0ms) + 120ms),translate var(--m-base) var(--ease) calc(var(--md,0ms) + 120ms)}
  .motion [data-m=eyebrow]:not(.is-in)::before{scale:0}
  .motion [data-m=eyebrow]:not(.is-in) .m-eb{opacity:0;translate:-8px 0}
  .motion [data-m=photo]{transition:clip-path var(--m-slow) var(--ease) var(--md,0ms),opacity var(--m-fast) var(--ease) var(--md,0ms)}
  .motion [data-m=photo] img{transition:scale var(--m-slow) var(--ease) var(--md,0ms)}
  .motion [data-m=photo]:not(.is-in){clip-path:inset(8% round var(--m-r,16px));opacity:0}
  .motion [data-m=photo].is-in{clip-path:inset(0 round var(--m-r,16px))}
  .motion [data-m=photo]:not(.is-in) img{scale:1.08}
  .motion [data-m=stat] .stat__value{transition:opacity var(--m-base) var(--ease) var(--md,0ms),translate var(--m-base) var(--ease) var(--md,0ms)}
  .motion [data-m=stat]>:not(.stat__value){transition:opacity var(--m-base) var(--ease) calc(var(--md,0ms) + 180ms)}
  .motion [data-m=stat]:not(.is-in) .stat__value{opacity:0;translate:0 .2em}
  .motion [data-m=stat]:not(.is-in)>:not(.stat__value){opacity:0}
  .motion [data-m=quote] blockquote::before{transition:opacity var(--m-base) var(--ease) var(--md,0ms),scale var(--m-slow) var(--ease) var(--md,0ms)}
  .motion [data-m=quote]:not(.is-in) blockquote::before{opacity:0;scale:.6}
  .motion [data-m=quote] blockquote p{transition:opacity var(--m-base) var(--ease) calc(var(--md,0ms) + 150ms),translate var(--m-base) var(--ease) calc(var(--md,0ms) + 150ms)}
  .motion [data-m=quote]:not(.is-in) blockquote p{opacity:0;translate:0 12px}
  .motion [data-m=quote] figcaption{transition:opacity var(--m-base) var(--ease) calc(var(--md,0ms) + 450ms)}
  .motion [data-m=quote]:not(.is-in) figcaption{opacity:0}
  /* dark cards (hero, cta, dark sections) arrive as one piece: the card rises and its contents follow */
  .motion [data-m=dark]{transition:opacity var(--m-base) var(--ease) var(--md,0ms),translate var(--m-slow) var(--ease) var(--md,0ms)}
  .motion [data-m=dark]:not(.is-in){opacity:0;translate:0 24px}
  .motion [data-m=dark] :is(.eyebrow,h2,.b-cta__text,.actions,.statement){transition:opacity var(--m-base) var(--ease) calc(var(--md,0ms) + var(--o,200ms)),translate var(--m-base) var(--ease) calc(var(--md,0ms) + var(--o,200ms))}
  .motion [data-m=dark] h2{--o:280ms}
  .motion [data-m=dark] :is(.b-cta__text,.statement){--o:400ms}
  .motion [data-m=dark] .actions{--o:520ms}
  .motion [data-m=dark]:not(.is-in) :is(.eyebrow,h2,.b-cta__text,.actions,.statement){opacity:0;translate:0 12px}
  /* page load: the hero text settles in one choreographed pass (no JS needed; the hero is above the fold) */
  .motion .hero__text>*{animation:hero-in var(--m-base) var(--ease) both;animation-delay:calc(var(--i,0) * 110ms + 80ms)}
  .motion .hero__text>.eyebrow{--i:0}.motion .hero__text>.hero__title{--i:1}.motion .hero__text>.hero__lede{--i:2}.motion .hero__text>.hero__actions{--i:3}
  .motion .hero__media{animation:hero-pic var(--m-slow) var(--ease) backwards;animation-delay:200ms} /* backwards: the clip ends with the animation, so it never trims the caption */
  /* the headline: words rise from behind their own baseline mask, 70ms apart; lede and actions follow as the last words land */
  .motion .hero__text>.hero__title--words{animation:none}
  .motion .hw{display:inline-block;overflow:clip;padding:.02em .06em .16em;margin:-.02em -.06em -.16em;vertical-align:top}
  .motion .hw>span{display:inline-block;animation:hw-in .95s var(--ease) both;animation-delay:calc(var(--w,0) * 70ms + 140ms)}
  .motion .hero__text>.hero__title--words~.hero__lede{--i:4.2}.motion .hero__text>.hero__title--words~.hero__actions{--i:5.4}
  @keyframes hw-in{from{translate:0 108%}}
  @keyframes hero-in{from{opacity:0;translate:0 14px}}
  @keyframes hero-pic{from{opacity:0;clip-path:inset(6% round var(--r-card))}to{clip-path:inset(0 round var(--r-card))}}
  .motion :is(.m-now,.m-now *),.motion :is(.m-now,.m-now *)::before{transition:none!important}
  /* parallax (progressive, compositor-run): large photographs drift ±4% inside their rounded frame */
  @supports (animation-timeline:view()){
    .motion :is(.b-feature__media,.b-intro__media,.hero--stone .hero__media)>.pic{overflow:clip;border-radius:var(--r-card)}
    .motion :is(.b-feature__media,.b-intro__media,.hero--stone .hero__media)>.pic>img{scale:1.08;animation:m-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes m-drift{from{translate:0 -4%}to{translate:0 4%}}
/* Chapter-style hand-off into a dark card: a soft charcoal veil rises over the tail of the preceding section as the card
   approaches (site.js writes --v from scroll progress; CSS-only height, so no layout shift). Decorative, aria-hidden. */
.ix{display:none}
@media screen and (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .ix{display:block;position:relative;z-index:2;height:0;pointer-events:none}
  .ix::before{content:"";position:absolute;left:0;right:0;bottom:0;height:28svh;background:linear-gradient(180deg,rgba(30,28,27,0),rgba(30,28,27,.55));opacity:var(--v,0)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .button:active{transform:none}
}

/* ------------------------------------------------------------------ craft layer (31 Oct 2026): motion tokens, page transitions, microinteractions
   Motion tokens: micro 180ms (hover, press, focus) · standard 350ms (state changes, tabs, toggles) · reveal 650ms+ (entrances,
   the --m-* vocabulary above). One easing family: --ease (out-quint) for movement, --ease-circ for colour. */
:root{--t-micro:.18s;--t-std:.35s;--t-reveal:.65s}

/* page transitions: same-origin navigations cross-fade, the new page rising 8px; the header holds still between pages */
@media screen and (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out var(--t-micro) var(--ease-circ) both}
  ::view-transition-new(root){animation:vt-in var(--t-reveal) var(--ease) both}
  .topbar{view-transition-name:topbar}
  ::view-transition-group(topbar){animation-duration:0s}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;translate:0 8px}}

/* links draw their ink underline from the left over the quiet rule */
.textlink,.itemlink,.card__link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:border-color var(--t-micro) var(--ease-circ),background-size var(--t-std) var(--ease)}
.textlink:hover,.itemlink:hover,.card__wrap:hover .card__link{background-size:100% 1px}
.card__link span[aria-hidden]{display:inline-block;transition:translate var(--t-std) var(--ease)}
.card__wrap:hover .card__link span[aria-hidden]{translate:.25rem 0}
/* photo cards: the picture leans in slightly under the pointer; the frame stays still */
.card--photo .card__pic img{transition:scale 1.1s var(--ease)}
@media (hover:hover){a.card__wrap:hover .card__pic img{scale:1.035}}
/* photographs inside cards keep square joins with the text panel (the card frame does the rounding, also during entrances) */
.card__pic,.card__pic.pic{--m-r:0px}
/* buttons: colour on hover, a short press on click, focus ring offset from the shape */
.button{transition:background-color var(--t-micro) var(--ease-circ),color var(--t-micro) var(--ease-circ),border-color var(--t-micro) var(--ease-circ),transform var(--t-micro) var(--ease-circ)}
.button:active{transform:scale(.97)}
.button:focus-visible{outline-offset:4px}

/* the centred photo banner: a soft pool of shade behind the words so the lede reads over a busy picture */
.banner--center::before{background:radial-gradient(ellipse 58% 52% at 50% 52%,rgba(20,19,18,.62) 0%,rgba(20,19,18,.3) 55%,rgba(20,19,18,0) 80%),linear-gradient(0deg,rgba(20,19,18,.8) 0%,rgba(20,19,18,.42) 45%,rgba(20,19,18,.2) 100%)}

/* photo heroes on phones: the top third of the card belongs to the photograph; the words sit in the shade below it */
@media (max-width:767px){
  .hero--panorama .hero__inner{padding-top:clamp(9rem,30svh,15rem)}
  .hero__bg::after{background:linear-gradient(0deg,rgba(30,28,27,.95) 0%,rgba(30,28,27,.84) 46%,rgba(30,28,27,.4) 76%,rgba(30,28,27,.08) 100%)}
}

/* footer on phones: two link columns rather than one long list */
@media (max-width:39.99rem){.foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem}.foot__col a{font-size:.95rem}}

/* ------------------------------------------------------------------ print */
@media print{
  .topbar,.menu,.draft-pill,.skip,.ix,.rights-tag,.trailer,.player,.hero__bg{display:none!important}
  .blk.tone-dark,.hero--dark,.foot{background:#fff;color:#000;--ink:#000;--ink-strong:#000;--soft:#333;margin:0;border-radius:0}
  .blk{padding-block:1.5rem}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}

/* Native-frame photography: no face/hand crops, no text overlay, no synthetic enlargement. */
.media-library { margin: 0; max-width: 100%; }
.media-library img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 3px; }
.media-library figcaption { margin-top: 1rem; max-width: 48ch; font: 400 .8rem/1.5 var(--font-body, sans-serif); letter-spacing: .015em; color: inherit; opacity: .78; }
.media-library-strip { padding: clamp(2rem, 5vw, 5rem); max-width: 1280px; margin: auto; }
.media-library-strip h2 { margin-bottom: 2rem; }
.media-library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 2rem; }
.media-library-grid figure { justify-self: center; }
@media(max-width: 700px) { .media-library-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ------------------------------------------------------------------ film: silent loops (hero background, section media, banners) */
.hero__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__bg::after{z-index:1}
.loop{display:block;width:100%;aspect-ratio:var(--film-ar,16/10);object-fit:cover;border-radius:var(--r-card);background:var(--dark-lift)}
.b-feature__film .loop,.b-intro__media--film .loop{aspect-ratio:4/3} /* landscape film: a portrait frame on phones crops the subject out */
@media (min-width:64rem){.b-feature__film .loop{aspect-ratio:5/6}}
.points{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.6rem}
.points li{position:relative;padding-left:1.5rem;color:var(--ink);font-size:1rem;line-height:1.5}
.points li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:.55rem;border-radius:100vw;background:var(--sage)}
.b-feature .lede{margin:0 0 1rem}

/* ------------------------------------------------------------------ banner: full-bleed cinematic band */
.blk--banner{padding-block:0;background:var(--bg)}
.blk--banner>.grid{max-width:none;padding:0;display:block}
.banner{position:relative;isolation:isolate;margin:var(--frame) max(var(--frame),env(safe-area-inset-right,0px)) var(--frame) max(var(--frame),env(safe-area-inset-left,0px));min-height:clamp(30rem,82svh,52rem);border-radius:var(--r-card);overflow:clip;display:grid;align-items:end;color:var(--on-dark);background:var(--dark)}
.banner__media,.banner__media .pic{position:absolute;inset:0;max-width:none;height:100%;z-index:-2}
.banner__media img,.banner__film{width:100%;height:100%;object-fit:cover;border-radius:0}
.banner__film{position:absolute;inset:0}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(20,19,18,.88) 0%,rgba(20,19,18,.5) 45%,rgba(20,19,18,.12) 100%)}
.banner__body{padding:clamp(2rem,6vw,5rem);max-width:56rem}
.banner--center{align-items:center;text-align:center}.banner--center .banner__body{margin:0 auto}.banner--center .eyebrow,.banner--center .actions{justify-content:center}
.banner .eyebrow{color:var(--on-dark)}
.banner__title{font-size:var(--fs-display);line-height:.98;letter-spacing:var(--track-display);color:var(--on-dark);max-width:16ch}
.banner--center .banner__title{margin-inline:auto}
.banner__text{margin:1.25rem 0 0;max-width:38rem;font:300 var(--fs-lede)/1.5 var(--sans);color:var(--on-dark-soft)}
.banner--center .banner__text{margin-inline:auto}
.banner .actions{margin-top:var(--space-4)}
.banner .button{background:var(--bg);color:var(--dark)}
.banner .button--secondary{background:transparent;color:var(--on-dark);border-color:var(--rule-on-dark)}
.banner__caption{position:absolute;right:clamp(1.25rem,3vw,2.5rem);bottom:1rem;margin:0;font-size:.72rem;color:var(--on-dark-soft)}
.banner .rights-tag{top:1rem;left:1rem}

/* ------------------------------------------------------------------ mosaic: composed photo grid */
.b-mosaic__title{font-size:var(--fs-h2);max-width:18ch}
.b-mosaic__intro{margin:1.25rem 0 0;max-width:40rem;color:var(--soft);font-size:1.05rem}
.mosaic{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(9rem,22vw,17rem);grid-auto-flow:dense}
@media (min-width:64rem){.mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mosaic__tile{min-width:0}
.mosaic__tile figure{position:relative;margin:0;height:100%}
.mosaic__tile .pic{height:100%;max-width:none}
.mosaic__tile .pic img,.mosaic__tile .ph{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.mosaic__tile--wide{grid-column:span 2}.mosaic__tile--tall{grid-row:span 2}.mosaic__tile--big{grid-column:span 2;grid-row:span 2}
.mosaic__tile figcaption{position:absolute;left:.75rem;bottom:.75rem;right:.75rem;margin:0;padding:.35rem .7rem;border-radius:100vw;width:fit-content;max-width:calc(100% - 1.5rem);background:var(--tag-bg);color:var(--on-dark);font-size:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mosaic .rights-tag{display:none}

/* ------------------------------------------------------------------ ways with photographs */
.way--photo .way__wrap{padding-top:0}
.way__pic{margin:0 calc(-1 * clamp(1.5rem,2.6vw,2.25rem)) .75rem}
.way__pic img{aspect-ratio:3/2}
.way__pic .rights-tag{display:none}

/* ------------------------------------------------------------------ grouped ELOM chart (every domain at once) */
.b-chart--grouped .b-chart__head{display:grid;gap:1rem;max-width:46rem}
.b-chart__body p{margin:0 0 .9rem;color:var(--soft)}
.insights{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:1px;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--rule-strong);border-block:1px solid var(--rule-strong)}
@media (min-width:64rem){.insights{grid-template-columns:repeat(4,minmax(0,1fr))}}
.insights:has(>li:nth-child(3):last-child){grid-template-columns:1fr}
@media (min-width:48rem){.insights:has(>li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
.insight{background:var(--bg);padding:clamp(1.25rem,2.5vw,2rem) clamp(.75rem,2vw,1.5rem)}
.tone-paper .insight{background:var(--bg-depth)}
.insight__value{margin:0;font:300 clamp(2.5rem,1.6rem + 3.4vw,4.5rem)/1 var(--sans);letter-spacing:-.03em;color:var(--ink-strong)}
.insight__label{margin:.75rem 0 0;font-size:.92rem;line-height:1.45;color:var(--soft);max-width:18rem}
.gchart{margin:var(--space-5) 0 0}
.gchart__legend{list-style:none;margin:0 0 var(--space-3);padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.gchart__key{display:inline-flex;align-items:center;gap:.55rem;text-align:left;min-height:36px;font-size:.88rem;color:var(--ink);border-radius:8px;padding:0 .25rem}
.gchart__key[aria-pressed=true]{font-weight:500}
.gchart__swatch{width:.85rem;height:.85rem;border-radius:3px;flex:none}
/* validated palette (31 Oct 2026): Indaba gold for the CoRE result, then slate, sage-green and clay; deutan ΔE ≥ 8.5 on the stone surface */
.gchart__swatch--0,.gcol--0{background:#c99418}.gchart__swatch--1,.gcol--1{background:#365a95}.gchart__swatch--2,.gcol--2{background:#3f9a72}.gchart__swatch--3,.gcol--3{background:#c0552b}
.gcol--accent{background:linear-gradient(180deg,#e0b54a 0%,#c99418 60%,#b07f12 100%)}
.gchart__plot{position:relative;height:clamp(18rem,40vw,26rem);margin-top:var(--space-4);padding-left:2.5rem}
.gchart__ticks{position:absolute;inset:0 0 3.25rem 2.5rem}
.gchart__tick{position:absolute;left:0;right:0;bottom:calc(var(--t) * 1%);border-top:1px solid var(--rule)}
.gchart__tick:first-child{border-top-color:var(--rule-strong)}
.gchart__tick span{position:absolute;right:calc(100% + .5rem);top:-.55rem;font:400 .68rem/1 var(--mono);color:var(--soft)}
.gchart__groups{position:absolute;inset:0 0 0 2.5rem;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:clamp(.4rem,2vw,1.75rem)}
.gchart__group{display:grid;grid-template-rows:minmax(0,1fr) 3.25rem;min-width:0}
.gchart__cols{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%}
.gcol{position:relative;flex:1 1 0;max-width:24px;height:calc(var(--v) * 1%);border-radius:4px 4px 0 0;transition:height 1.1s var(--ease),opacity .35s var(--ease-circ);cursor:default}
.gcol:nth-child(2){transition-delay:.08s}.gcol:nth-child(3){transition-delay:.16s}.gcol:nth-child(4){transition-delay:.24s}
.gcol__val{position:absolute;bottom:calc(100% + .35rem);left:50%;translate:-50% 0;font:400 .68rem/1 var(--sans);color:var(--soft);white-space:nowrap;transition:opacity .4s var(--ease-circ) .6s}
.gcol--accent .gcol__val{font-weight:500;font-size:.8rem;color:var(--ink-strong)}
/* selective labels: the CoRE value always, comparison values when their group is hovered or their series is chosen */
.gcol:not(.gcol--accent) .gcol__val{opacity:0;transition-delay:0s}
.gchart__group:hover .gcol__val,.gchart.is-focus .gcol.is-on .gcol__val{opacity:1}
.gchart__group:hover .gcol--accent .gcol__val{font-size:.68rem}
.gchart__label{margin:.6rem 0 0;font-size:.78rem;line-height:1.3;text-align:center;color:var(--ink);hyphens:auto}
.gchart.is-focus .gcol:not(.is-on){opacity:.18}
.gchart.is-focus .gcol:not(.is-on) .gcol__val{opacity:0}
html.motion .b-chart:not(.is-drawn) .gcol{height:0}
html.motion .b-chart:not(.is-drawn) .gcol__val{opacity:0}
/* the Indaba mark crowns each CoRE column, above its value; the plot keeps room for it under the legend */
.gcol__mark{position:absolute;bottom:calc(100% + 1.35rem);left:50%;translate:-50% 0;width:1.6rem;height:1.6rem;max-width:none;transition:opacity .4s var(--ease-circ) .6s}
.b-chart--grouped .gchart__plot{margin-top:calc(var(--space-4) + 2.5rem)}
html.motion .b-chart:not(.is-drawn) .gcol__mark{opacity:0}
.gchart.is-focus .gcol:not(.is-on) .gcol__mark{opacity:.3}
@media (max-width:47.99rem){
  .gchart__plot{height:auto;padding-left:0;margin-top:var(--space-3)}
  .gchart__ticks{display:none}
  .gchart__groups{position:static;grid-template-columns:repeat(2,minmax(0,1fr));gap:4.25rem 1rem}
  .b-chart--grouped .gchart__plot{margin-top:calc(var(--space-3) + 2.75rem)}
  .gcol__mark{width:1.35rem;height:1.35rem;bottom:calc(100% + 1.25rem)}
  .gchart__group{grid-template-rows:9.5rem auto}
  .gcol{max-width:20px}
  .gcol:not(.gcol--accent) .gcol__val{display:none}
}
.b-chart__after{margin-top:var(--space-5);max-width:44rem}
.b-chart__after p{margin:0 0 1rem;color:var(--ink)}
.b-chart__closing{margin:var(--space-5) auto 0;max-width:36rem;padding-block:1.5rem;border-block:1px solid var(--rule-strong);text-align:center;font:400 var(--fs-quote)/1.2 var(--serif);color:var(--ink-strong)}
@media print{.hero__film,.loop,.banner__film{display:none}}

/* ------------------------------------------------------------------ carousel: inside the programme, slide by slide */
.b-carousel__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem}
@media (max-width:47.99rem){.b-carousel__head{flex-direction:column;align-items:stretch}.carousel__nav{justify-content:flex-end;margin-top:-.5rem}}
.b-carousel__title{font-size:var(--fs-h2);max-width:18ch}
.b-carousel__intro{margin:1.25rem 0 0;max-width:40rem;color:var(--soft);font-size:1.05rem}
.carousel__nav{display:flex;gap:.5rem;flex:none}
.carousel__nav[hidden]{display:none}
.carousel__btn{width:48px;height:48px;border-radius:100vw;border:1px solid var(--rule-strong);font-size:1.1rem;color:var(--ink-strong);transition:background-color .3s var(--ease-circ),opacity .3s}
.carousel__btn:hover{background:var(--surface)}
.carousel__btn:disabled{opacity:.35;cursor:default}
.carousel{margin:var(--space-4) calc(-1 * var(--gutter)) 0}
.carousel__track{list-style:none;margin:0;padding:0 var(--gutter) .5rem;display:grid;grid-auto-flow:column;grid-auto-columns:min(82vw,24rem);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track:focus-visible{outline:2px solid var(--sage);outline-offset:4px}
@media (min-width:64rem){.carousel__track{grid-auto-columns:calc((100% - 2 * var(--gutter) - 2rem) / 3.15)}}
.slide{scroll-snap-align:start;display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--surface-light);overflow:clip;min-width:0}
.tone-paper .slide{background:var(--bg)}
.slide__media{margin:0}
.slide__media .pic{max-width:none}
.slide__media .pic img,.slide__media .ph,.slide__media .loop{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.slide__media .rights-tag{display:none}
.slide__text{padding:clamp(1.25rem,2.4vw,1.75rem);display:flex;flex-direction:column;gap:.6rem;flex:1}
.slide__num{margin:0;font:400 var(--fs-eyebrow)/1 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
.slide__title{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);line-height:1.05}
.slide__text p{margin:0;color:var(--soft);font-size:.96rem;line-height:1.55}
.slide__text p.slide__outcome{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--rule-strong);color:var(--ink);font-size:.9rem}
.slide__outcome span{display:block;margin-bottom:.25rem;font:400 .68rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sage-deep)}

/* ------------------------------------------------------------------ bento (Mosaic Six): what changes, tile by tile */
.b-bento__title{font-size:var(--fs-h2);max-width:18ch}
.b-bento__intro{margin:1.25rem 0 0;max-width:40rem;color:var(--soft);font-size:1.05rem}
.bento{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:56rem){.bento{grid-template-columns:repeat(3,minmax(0,1fr))}.tile--wide{grid-column:span 2}.tile--full{grid-column:1/-1}}
.tile{position:relative;isolation:isolate;min-height:clamp(22rem,36vw,30rem);border-radius:var(--r-card);overflow:clip;display:flex;align-items:flex-end;background:var(--dark);color:var(--on-dark)}
.tile__media{position:absolute;inset:0;z-index:-2}
.tile__media .pic{height:100%;max-width:none}
.tile__media .pic img,.tile__film{width:100%;height:100%;object-fit:cover;border-radius:0;transition:scale 1.2s var(--ease)}
.tile:hover .tile__media img,.tile:hover .tile__film{scale:1.04}
.tile__media .rights-tag{display:none}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(20,19,18,.94) 0%,rgba(20,19,18,.8) 32%,rgba(20,19,18,.5) 58%,rgba(20,19,18,.14) 84%,rgba(20,19,18,.04) 100%)}
.tile:not(.tile--framed) .tile__body{text-shadow:0 1px 14px rgba(20,19,18,.55)}
.tile:not(.tile--framed) .tile__eyebrow{color:rgba(247,247,242,.86)}
.tile__body{padding:clamp(1.5rem,2.8vw,2.25rem);display:grid;gap:.55rem;max-width:34rem}
.tile__eyebrow{margin:0;font:400 var(--fs-eyebrow)/1.2 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--on-dark-soft)}
.tile__title{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.6rem);line-height:1.02;color:var(--on-dark)}
.tile__text{margin:0;color:var(--on-dark-soft);font-size:.96rem;line-height:1.5}
.tile__stat{margin:.6rem 0 0;padding-top:.8rem;border-top:1px solid var(--rule-on-dark);display:flex;align-items:baseline;gap:.75rem}
.tile__stat-value{font:300 clamp(2rem,1.5rem + 1.6vw,3rem)/1 var(--sans);letter-spacing:-.02em;color:var(--on-dark);white-space:nowrap}
.tile__stat-label{font-size:.82rem;line-height:1.35;color:var(--on-dark-soft)}
.tile--framed{background:var(--surface);color:var(--ink);flex-direction:column;align-items:stretch}
.tile--framed::before{display:none}
.tile--framed .tile__media{position:relative;inset:auto;z-index:0;margin:1rem 1rem 0;border-radius:var(--r);overflow:clip;flex:1;min-height:12rem}
.tile--framed .tile__body{max-width:none}
.tile--framed :is(.tile__title,.tile__stat-value){color:var(--ink-strong)}
.tile--framed :is(.tile__text,.tile__eyebrow,.tile__stat-label){color:var(--soft)}
.tile--framed .tile__stat{border-top-color:var(--rule-strong)}
.b-bento__note{margin:var(--space-3) 0 0;max-width:46rem;font-size:.82rem;line-height:1.55;color:var(--soft)}

/* ---- Shared Indaba header (Ventures · Foundation · Institute, 28 Oct 2026) ----
   The same bar as www.indaba.co (sites/indaba/src/styles/03-chrome.css): full width, 68px, translucent paper, hairline;
   "Indaba" wordmark (no mark) with the unit after a hairline; Plex links with a pill hover; a dark pill button. */
:root{--bar-top:0px !important;--header:68px !important}
.topbar{top:0;margin:0;border-radius:0;max-width:none;min-height:68px;padding:0 max(clamp(16px,4vw,48px),calc((100% - 1320px)/2 + clamp(16px,4vw,48px)));background:color-mix(in srgb,#efede7 92%,transparent);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border:0;border-bottom:1px solid rgba(25,24,24,.14);box-shadow:none}
.topbar.is-scrolled{box-shadow:none}
.topbar__brand{gap:0;color:#191818}
.topbar__brand img{display:none}
.topbar__word{font:400 1.85rem/1 var(--serif);letter-spacing:.01em;text-transform:none}
.topbar__unit{margin-left:.8rem;padding-left:.8rem;border-left:1px solid rgba(25,24,24,.32);font:400 .6875rem/1.1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#625d57}
.topbar__nav ul{gap:.25rem}
.topbar__nav a{padding:0 .85rem;border-radius:100vw;font:400 .9375rem/1 var(--sans);color:#191818}
.topbar__nav a::after{display:none}
.topbar__nav a:hover{background:rgba(25,24,24,.06)}
.topbar__nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.5em}
.topbar__cta{display:inline-flex;align-items:center;gap:1.25rem;min-height:40px;padding:.5rem 1rem .5rem 1.15rem;border-radius:100vw;background:#191818;color:#f7f7f2;font:400 .875rem/1.2 var(--sans)}
.topbar__cta::after{content:"\2192";transition:transform .2s}
.topbar__cta:hover::after{transform:translateX(3px)}
.topbar__menu{border-radius:0;font:400 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
@media (max-width:479px){.topbar__unit{display:none}}
/* Phones and tablets: MENU (label and two hairlines) before the button, as on www.indaba.co. */
.topbar__menu{order:-1;padding:0 .25rem;gap:.6rem}
.topbar__menu:hover{background:none}
.topbar__menu-icon{width:22px;height:10px;background:none;border-block:1px solid currentColor}
@media (max-width:420px){.topbar__menu-label{display:inline}.topbar__menu{padding:0 .25rem}}
@media (max-width:379px){.topbar__menu-label{display:none}.topbar__cta{padding:.45rem .9rem;font-size:.8125rem}.topbar__cta::after{display:none}}
@media (min-width:72rem){.topbar__menu{order:0}}

/* ---- Status marks (what kind of claim): independent, documented, Indaba records, proposal, model, future ---- */
.badge--independent::before{background:var(--sage-deep);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--sage-deep)}
.badge--documented::before{background:var(--sage)}
.badge--records::before{background:var(--mineral)}
.badge--proposal::before{background:transparent;border:1.5px solid var(--ink)}
.badge--model::before,.badge--future::before{background:transparent;border:1px dashed var(--ink)}
.tone-dark .badge{color:var(--on-dark);border-color:var(--rule-on-dark)}
.tone-dark .badge--proposal::before,.tone-dark .badge--model::before,.tone-dark .badge--future::before{border-color:var(--on-dark)}
.card__text>.badge,.b-matrix>.badge{justify-self:start;align-self:flex-start;width:fit-content;margin-bottom:.25rem}

/* ---- Pathway: stages and quality gates ---- */
.b-pathway__title,.b-flow__title,.b-matrix__title,.b-register__title{max-width:20ch}
.b-pathway__intro,.b-flow__intro,.b-matrix__intro,.b-register__intro{max-width:46rem;margin-top:1rem;font-size:var(--fs-lede);line-height:1.5;color:var(--ink)}
/* One path: a rail of numbered stations (solid up to the stage under way, dashed after), a gate between each pair, and per
   stage a photograph (done, under way) or a labelled line drawing (proposed). site.js fills the rail with scroll. */
.pw{--rail:4.25rem;--node:2.75rem;--col:clamp(1rem,2.5vw,2.25rem);--gold:#d6a12a;--after:clamp(2.5rem,4vw,3.5rem);list-style:none;margin:var(--space-5) 0 0;padding:0}
.pw-step{position:relative;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);grid-template-areas:"rail media" "rail text" "rail gate";column-gap:var(--col);padding-bottom:var(--after)}
.pw-step:last-child{padding-bottom:0}
@media (min-width:56rem){.pw-step{grid-template-columns:var(--rail) minmax(0,1fr) clamp(15rem,24vw,21rem);grid-template-rows:auto 1fr;grid-template-areas:"rail text media" "rail gate media";--col:clamp(1.25rem,3vw,3rem)}}
@media (max-width:40rem){.pw{--rail:2.5rem;--node:2.25rem}}
/* the rail: each stage draws its segment down to the next station */
.pw-step::before,.pw-step--done:not(:last-child)::after{content:"";position:absolute;left:calc(var(--rail) / 2 - .75px);top:var(--node);bottom:0;width:1.5px}
.pw-step::before{background:var(--rule-strong)}
.pw-step--done::after{background:var(--ink-strong);transform-origin:top;scale:1 var(--p,1)}
.pw-step:last-child::before{-webkit-mask:linear-gradient(#000 45%,transparent);mask:linear-gradient(#000 45%,transparent)} /* the path runs on past the last gate */
.pw-step:is(.pw-step--now,.pw-step--proposed)::before{background:repeating-linear-gradient(to bottom,var(--soft) 0 5px,transparent 5px 11px);opacity:.55}
.pw-rail{grid-area:rail;position:relative}
.pw-node{position:absolute;left:50%;top:0;translate:-50% 0;display:grid;place-items:center;width:var(--node);height:var(--node);border-radius:50%;border:1.5px solid var(--ink-strong);background:var(--sec-bg,var(--bg-depth));font:400 .72rem/1 var(--mono);letter-spacing:.04em;color:var(--ink-strong);transition:background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease),scale .6s var(--ease)}
.pw-step--done .pw-node{background:var(--ink-strong);color:var(--sec-bg,var(--bg-depth))}
.pw-step--now .pw-node{background:var(--gold);border-color:var(--gold);color:var(--ink-strong)}
.pw-step--proposed .pw-node{border-style:dashed;border-color:var(--soft);color:var(--soft)}
.pw-step--now .pw-node::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--gold);opacity:0}
/* phase, title, text */
.pw-text{grid-area:text;min-width:0;padding-top:calc((var(--node) - 1.6rem) / 2)}
.pw-phase{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;margin:0 0 .85rem}
.pw-phase__k{display:inline-flex;align-items:center;height:1.6rem;padding:0 .7rem;border-radius:999px;font:400 .66rem/1 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;background:var(--ink-strong);color:var(--sec-bg,var(--bg-depth))}
.pw-step--now .pw-phase__k{background:var(--gold);color:var(--ink-strong)}
.pw-step--proposed .pw-phase__k{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--soft)}
.pw-phase__when{font:400 .68rem/1.4 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
.pw-title{margin:0 0 .65rem;font-size:clamp(1.85rem,1.4rem + 1.3vw,2.6rem);line-height:1.04;letter-spacing:-.02em}
.pw-text>p:not(.pw-phase){margin:0;max-width:36rem;color:var(--ink);font-size:1.02rem;line-height:1.6}
.pw-text>.badge{margin-top:1rem}
/* media: a photograph, or a drawing of the proposal */
.pw-media{grid-area:media;align-self:start;position:relative;overflow:hidden;aspect-ratio:16/10;margin-bottom:1.25rem;border-radius:var(--r-card);background:var(--bg)}
@media (min-width:56rem){.pw-media{aspect-ratio:4/3;margin-bottom:0}}
.pw-media .pic{display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto}
.pw-media .pic img{width:100%;height:100%;object-fit:cover;border-radius:0}
.pw-media--drawing{background:color-mix(in srgb,var(--bg) 70%,transparent);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.pw-drawing{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%;margin:0;padding:clamp(.75rem,2vw,1.25rem)}
.pw-d{display:block;width:100%;height:100%;overflow:visible}
.pw-drawing__cap{font:400 .62rem/1.3 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
.pw-d-area{fill:none;stroke:var(--ink-strong);stroke-opacity:.3;stroke-dasharray:2 5}
.pw-d-link{stroke:var(--ink-strong);stroke-opacity:.3;stroke-width:1;stroke-dasharray:2 4}
.pw-d-link--strong{stroke-opacity:.55;stroke-width:1.25;stroke-dasharray:5 5}
.pw-d-arc{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-dasharray:5 5}
.pw-d-dot{fill:#c4b9aa}
.pw-d-open{fill:var(--bg);stroke:var(--gold);stroke-width:1.5}
.pw-bloom>g{transform-box:fill-box;transform-origin:center}
/* the gate: a checkpoint on the rail before the next stage */
.pw-gate{grid-area:gate;align-self:start;position:relative;max-width:40rem;margin-top:1.35rem;padding-top:1rem;border-top:1px dashed var(--rule-strong)}
.pw-gate__mark{position:absolute;left:calc(-1 * var(--col) - var(--rail) / 2);top:calc(1rem + .55em);width:11px;height:11px;translate:-50% -50%;rotate:45deg;background:var(--sec-bg,var(--bg-depth));border:1.5px solid var(--ink-strong)}
.pw-step--proposed .pw-gate__mark,.pw-step--now .pw-gate__mark{border-color:var(--soft)}
.pw-gate .stage__gate span{display:block;margin-bottom:.3rem;font:400 var(--fs-eyebrow)/1.3 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
.pw-gate .stage__gate{margin:0;font-size:.93rem;line-height:1.5;color:var(--ink-strong)}
/* motion (site.js adds is-js unless motion is reduced): the rail fills to the stage under way; each stage arrives in turn */
@media (prefers-reduced-motion:no-preference){
  .pw.is-js .pw-step--done:not(.is-reached) .pw-node{background:var(--sec-bg,var(--bg-depth));color:var(--ink-strong);scale:.86}
  .pw.is-js .pw-step--now:not(.is-reached) .pw-node{background:var(--sec-bg,var(--bg-depth));border-color:var(--soft);scale:.86}
  .pw.is-js .pw-step--now.is-reached .pw-node::after{animation:pw-here 2.6s var(--ease) .4s infinite}
  .pw.is-js :is(.pw-phase,.pw-title,.pw-text>p:not(.pw-phase),.pw-text>.badge,.pw-gate){transition:opacity .9s var(--ease),translate .9s var(--ease)}
  .pw.is-js .pw-title{transition-delay:.08s}.pw.is-js .pw-text>p:not(.pw-phase){transition-delay:.16s}.pw.is-js .pw-text>.badge{transition-delay:.24s}.pw.is-js .pw-gate{transition-delay:.3s}
  .pw.is-js .pw-step:not(.is-in) :is(.pw-phase,.pw-title,.pw-text>p:not(.pw-phase),.pw-text>.badge,.pw-gate){opacity:0;translate:0 18px}
  .pw.is-js .pw-bloom>g{transition:scale 1.1s cubic-bezier(.34,1.45,.64,1) .35s,rotate 1.6s var(--ease) .35s}
  .pw.is-js .pw-step:not(.is-in) .pw-bloom>g{scale:0;rotate:-40deg}
  .pw.is-js :is(.pw-d-dot,.pw-d-open){transition:opacity .6s var(--ease) calc(.5s + var(--d,0) * 45ms)}
  .pw.is-js .pw-step:not(.is-in) :is(.pw-d-dot,.pw-d-open,.pw-d-link,.pw-d-arc,.pw-d-area){opacity:0}
  .pw.is-js :is(.pw-d-link,.pw-d-arc,.pw-d-area){transition:opacity 1s var(--ease) .2s}
  .pw.is-js .pw-step.is-in :is(.pw-d-link--strong,.pw-d-arc){animation:pw-march 1.8s linear infinite}
}
@keyframes pw-here{0%{opacity:.9;scale:.85}70%,100%{opacity:0;scale:1.55}}
@keyframes pw-march{to{stroke-dashoffset:-20}}
@media print{.pw-step::after{scale:1 1}}
.b-pathway__note,.b-flow__note,.b-matrix__caption,.b-register__note{margin-top:var(--space-3);max-width:46rem;font-size:.9rem;color:var(--soft)}

/* ---- Flow: one commitment, step by connected step ---- */
.flow{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:3rem}
@media (min-width:56rem){.flow{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1.5rem}.flow[data-count="3"]{--n:3}.flow[data-count="5"]{--n:5}}
.flow__step{position:relative;display:grid;align-content:start;gap:.5rem;padding-top:1.1rem;border-top:1px solid var(--rule-strong)}
.flow__step:not(:last-child)::after{content:"\2193";position:absolute;left:0;bottom:-2.2rem;font:400 1.1rem/1 var(--sans);color:var(--sage-deep)}
@media (min-width:56rem){.flow__step:not(:last-child)::after{content:"\2192";left:auto;right:-1.2rem;bottom:auto;top:-.72rem;background:var(--bg);padding:0 .2rem}.tone-paper .flow__step:not(:last-child)::after{background:var(--bg-depth)}.tone-dark .flow__step:not(:last-child)::after{background:var(--dark)}}
.flow__label{margin:0;font:400 var(--fs-eyebrow)/1.3 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--sage-deep)}
.tone-dark .flow__label{color:var(--sage)}
.flow__title{font-size:clamp(1.5rem,1.25rem + .8vw,1.95rem);line-height:1.08}
.flow__step p{margin:0;font-size:.97rem;line-height:1.55;color:var(--ink)}
.tone-dark .flow__step p{color:var(--on-dark-soft)}
.tone-dark .flow__step{border-top-color:var(--rule-on-dark)}

/* ---- Matrix: a framework as a table ---- */
.b-matrix>.badge{margin-top:1.25rem}
.matrix__scroll{margin-top:var(--space-4);overflow-x:auto;border-radius:var(--r);border:1px solid var(--rule-strong);background:var(--surface-light,var(--bg))}
.matrix__scroll:focus-visible{outline:2px solid var(--ink-strong);outline-offset:2px}
.matrix{width:100%;min-width:52rem;border-collapse:collapse;font-size:.9rem;line-height:1.45}
.matrix th,.matrix td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.matrix thead th{font:400 var(--fs-eyebrow)/1.3 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft);background:var(--bg-depth)}
.matrix tbody th{font:500 .9rem/1.35 var(--sans);color:var(--ink-strong);position:sticky;left:0;background:var(--bg);min-width:7rem;width:9rem}
.matrix td{min-width:9.5rem}
.b-matrix__hint{margin:.75rem 0 0;font:400 var(--fs-eyebrow)/1.3 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
@media (min-width:80rem){.b-matrix__hint{display:none}}
.matrix tbody tr:last-child :is(th,td){border-bottom:0}
.matrix td{color:var(--ink)}

/* ---- Register: claims, sources, marks ---- */
.marks{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.register{list-style:none;margin:var(--space-3) 0 0;padding:0;border-top:1px solid var(--rule-strong)}
.reg{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem 2rem;padding:1.25rem 0;border-bottom:1px solid var(--rule-strong);align-items:baseline}
@media (min-width:56rem){.reg{grid-template-columns:minmax(8rem,12rem) minmax(0,1fr) auto}}
.reg__value{margin:0;font:300 clamp(2.2rem,1.6rem + 1.6vw,3rem)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:lining-nums;color:var(--ink-strong)}
.reg__claim{margin:0;color:var(--ink-strong)}
.reg__source{margin:.3rem 0 0;font-size:.82rem;color:var(--soft)}
.reg .badge{justify-self:start}

/* A dark card after a tinted band gets air, so the two never read as one shape. */
.blk.tone-paper+.blk.tone-dark{margin-top:clamp(2.5rem,6vw,4rem)}

.stat__value{text-wrap:balance}

/* ------------------------------------------------------------------ QA pass (art-direction review) */
/* photo cards: the picture bleeds to both card edges (the generic .pic width would otherwise pin it short) */
.way .way__pic{width:auto;max-width:none}
/* the ending: a page that closes on a dark panel opens it to full width and lets it run into the footer as one sheet */
main>.blk.tone-dark:last-child{margin:var(--space-5) 0 0;border-radius:var(--r-card) var(--r-card) 0 0}
main:has(>.blk.tone-dark:last-child)+.foot{padding-top:0}
main:has(>.blk.tone-dark:last-child)+.foot .foot__inner{border-top:1px solid var(--rule-on-dark);padding-top:var(--space-5)}
/* phones: sources stay readable */
@media (max-width:40rem){.source,.stat__source{font-size:.75rem;line-height:1.5}.stat__source .source{font-size:1em}}
/* quote portraits: a small round frame zooms in on the face the catalogue marks (focalPoint.zoom) */
.b-quote .b-quote__pic{border-radius:100vw;overflow:hidden;width:6rem;height:6rem}
.b-quote .b-quote__pic img{scale:var(--fz,1);transform-origin:var(--fx,50%) var(--fy,50%)}
/* six figures: three to a row, so display numbers keep their words together */
@media (min-width:64rem){.stats[data-count="6"],.stats[data-count="5"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* sideways scrollers on phones: a soft edge says there is more, and the last chip can scroll clear of it */
@media (max-width:40rem){.lens__tabs,.nd-tabs,.cy-tabs,.chart__tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);padding-inline-end:2.5rem}}
/* the matrix reads as an editorial table: hairlines on the page, not a white spreadsheet */
.matrix__scroll{border:0;border-top:1px solid var(--ink-strong);border-radius:0;background:transparent}
.matrix thead th{background:transparent}
.matrix tbody th{background:var(--sec-bg,var(--bg))}
/* phones: each row becomes a card whose cells carry their own column label */
@media (max-width:40rem){
  .b-matrix__hint{display:none}
  .matrix__scroll{overflow:visible;border-top:0}
  .matrix{min-width:0}
  .matrix thead{display:none}
  .matrix,.matrix tbody,.matrix tr,.matrix th,.matrix td{display:block;width:auto}
  .matrix tr{border-top:1px solid var(--ink-strong);padding-bottom:.5rem;margin-bottom:1.25rem}
  .matrix tbody th{position:static;width:auto;min-width:0;padding:.85rem 0 .35rem;font:400 1.3rem/1.2 var(--serif)}
  .matrix td{padding:.6rem 0;border-bottom:1px solid var(--rule)}
  .matrix td:last-child{border-bottom:0}
  .matrix td::before{content:attr(data-label);display:block;margin-bottom:.2rem;font:400 var(--fs-eyebrow)/1.3 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
}
/* range controls in the house style: a hairline track and an ink thumb ringed in the section colour */
input[type=range]{-webkit-appearance:none;appearance:none;height:1.75rem;background:transparent;cursor:pointer;accent-color:var(--ink-strong)}
input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:var(--rule-strong)}
input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:var(--rule-strong)}
input[type=range]::-moz-range-progress{height:2px;border-radius:2px;background:var(--ink-strong)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;background:var(--ink-strong);border:3px solid var(--sec-bg,var(--bg));box-shadow:0 0 0 1px var(--ink-strong);transition:scale var(--t-micro,.18s) var(--ease)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink-strong);border:3px solid var(--sec-bg,var(--bg));box-shadow:0 0 0 1px var(--ink-strong);transition:scale var(--t-micro,.18s) var(--ease)}
input[type=range]:active::-webkit-slider-thumb{scale:1.18}
input[type=range]:active::-moz-range-thumb{scale:1.18}
input[type=range]:focus-visible{outline:2px solid var(--ink-strong);outline-offset:4px;border-radius:4px}

/* ------------------------------------------------------------------ visual layer (2 Nov 2026): every page carries pictures, film or drawings
   Glyphs (src/site/glyphs.mjs) are the Foundation's line illustrations: a petal-coloured disc behind a fine ink drawing that
   draws itself in as it arrives. Statements and prose can hold a photograph or silent loop; quotes can sit over a full-bleed
   picture; closing calls can carry film; reading links preview their page; a filmstrip shows stills from the Foundation's film.
   Everything is complete and visible without JavaScript; motion is screen-only and skipped for reduced motion. */

/* glyphs */
.glyph{display:block;flex:none;width:var(--gs,3.5rem);height:var(--gs,3.5rem);overflow:visible;color:var(--ink-strong)}
.glyph__disc{fill:var(--gc,var(--surface));opacity:.5;transform-box:view-box;transform-origin:36px 34px;transition:transform .9s var(--ease)}
.tone-dark .glyph__disc{opacity:.3}
.glyph__ink *{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.glyph__ink .glyph__arc{stroke-width:.55;opacity:.42}
.glyph__dots{fill:currentColor}
.glyph__dots *{transform-box:fill-box;transform-origin:center;scale:.82}
@media (hover:hover){:is(.step,.pillar,.card__wrap,.compare__col,.flow__step):hover .glyph__disc{transform:scale(1.12) translate(-2px,1px)}}
@media screen and (prefers-reduced-motion:no-preference){
  .glyph.g-wait .glyph__ink *{stroke-dasharray:1 1;transition:stroke-dashoffset 1.4s var(--ease) calc(var(--k,0) * 110ms + 120ms)}
  .glyph.g-wait:not(.is-drawn) .glyph__ink *{stroke-dashoffset:1}
  .glyph.g-wait .glyph__disc{transition:transform 1.2s var(--ease),opacity .9s var(--ease)}
  .glyph.g-wait:not(.is-drawn) .glyph__disc{transform:scale(.35);opacity:0}
  .glyph.g-wait .glyph__dots{transition:opacity .5s var(--ease) .95s}
  .glyph.g-wait:not(.is-drawn) .glyph__dots{opacity:0}
}
.step__glyph{--gs:4.5rem;margin:0 0 .75rem -.35rem}
.steps--art .step__num{font:400 var(--fs-eyebrow)/1 var(--mono);letter-spacing:var(--track-eyebrow);color:var(--soft);margin-top:.25rem}
.steps--art .step{padding-top:1.5rem}
.step__pic{margin-bottom:.75rem;--m-r:var(--r)}
.step__pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.pillar__glyph{--gs:4rem;margin:0 0 1rem -.3rem}
.card__glyph{--gs:4.25rem;margin:0 0 1.25rem -.3rem}
.compare__glyph{--gs:4rem;margin:0 0 1rem -.3rem}
.flow__glyph{--gs:4.25rem;margin:0 0 .75rem -.3rem}
.flow__step:has(.flow__glyph):not(:last-child)::after{top:auto}
@media (min-width:56rem){.flow__step:has(.flow__glyph):not(:last-child)::after{top:-.72rem}}

/* statement + media: the sentence and a tall picture share the row; the picture drifts inside its frame */
.b-statement--media{display:grid;gap:var(--space-4);align-items:center}
.b-statement__media{margin:0;width:100%;display:grid;justify-items:end}
.b-statement__media figcaption{justify-self:stretch}
.b-statement__media .pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-card)}
.film-frame{position:relative;width:100%;overflow:clip;border-radius:var(--r-card);background:var(--dark-lift);aspect-ratio:4/3}
.film-frame .loop{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
@media (min-width:56rem){
  .b-statement--media{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,6.5rem)}
  .b-statement--right .b-statement__media{order:-1;justify-items:start}
  .b-statement__media{max-width:30rem;justify-self:end}
  .b-statement--right .b-statement__media{justify-self:start}
  .b-statement__media .pic img,.b-statement__media .film-frame{aspect-ratio:4/5}
}

/* prose + media: a portrait under the running head (sticky with it from 1100px) */
.b-prose__media{margin:1.75rem 0 0;display:grid}
.b-prose__media .pic img,.b-prose__media .film-frame{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-card)}
.b-prose__media figcaption{text-align:left}
@media (min-width:68.75rem){
  .b-prose__media{margin:2rem 0 0 auto;max-width:19rem;justify-items:end}
  .b-prose__media .pic img,.b-prose__media .film-frame{aspect-ratio:4/5}
}

/* timeline: a dated photograph beside the entry it documents */
.tl__pic{margin-top:1rem;max-width:22rem;--m-r:var(--r)}
.tl__pic img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}

/* story without a consented portrait: a scene from the work, never a stand-in for the person */
.b-story__media--scene .pic img{aspect-ratio:4/5}

/* cinema quote: the banner's frame, the words of a page set over a picture */
.blk--cinema{padding-block:0;background:var(--sec-bg,var(--bg))}
.blk--cinema>.grid{max-width:none;padding:0;display:block}
.b-quote--cinema{min-height:clamp(30rem,84svh,50rem);padding:0;justify-items:stretch}
.b-quote--cinema .banner__body{max-width:64rem;padding:clamp(2.5rem,7vw,6rem) clamp(1.5rem,6vw,5rem)}
.b-quote--cinema blockquote{margin:0 auto}
.b-quote--cinema blockquote::before{color:var(--on-dark-soft)}
.b-quote--cinema blockquote p{color:var(--on-dark);font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem);line-height:1.12;max-width:22ch}
.b-quote--cinema.b-quote--long blockquote p{font-size:clamp(1.55rem,1.1rem + 1.5vw,2.45rem);line-height:1.2;max-width:32ch}
.b-quote--cinema figcaption{color:var(--on-dark-soft)}
.b-quote--cinema .b-quote__name{color:var(--on-dark)}
/* The credit's role line sits on a photograph: the page's --soft grey vanished there, and even --on-dark-soft measured
   3.4:1 over the brightest pixels. Full ivory keeps WCAG AA (4.5:1); the name keeps its weight for hierarchy. */
.b-quote--cinema .b-quote__role{color:var(--on-dark)}
.b-quote--cinema .b-quote__role::before{background:var(--on-dark-soft)}
.b-quote--cinema .banner__caption{left:clamp(1.25rem,3vw,2.5rem);text-align:right}

/* closing call with film or a photograph behind the words */
.blk--cta:has(.b-cta--media){padding-block:clamp(6rem,13vw,11rem)}
.blk--cta:has(.b-cta--media)>.grid{position:static}
.b-cta__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
.b-cta__bg :is(.pic,.pic img,.b-cta__film){position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0}
.b-cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,28,27,.95) 0%,rgba(30,28,27,.88) 36%,rgba(30,28,27,.45) 70%,rgba(30,28,27,.22) 100%),linear-gradient(0deg,rgba(30,28,27,.55) 0%,rgba(30,28,27,0) 45%)}
.b-cta--media>:not(.b-cta__bg){position:relative;z-index:1}
.b-cta--media .b-cta__text{color:var(--on-dark)}
@media (min-width:64rem){.b-cta--media{grid-template-columns:minmax(0,40rem);align-items:start}.b-cta--media .actions{margin-top:var(--space-3)}}
@media (max-width:63.99rem){.b-cta__bg::after{background:linear-gradient(0deg,rgba(30,28,27,.95) 0%,rgba(30,28,27,.82) 60%,rgba(30,28,27,.55) 100%)}}

/* reading links preview the page they open: a thumbnail on touch screens, a tilted card under the pointer elsewhere */
.links__a--thumb{grid-template-columns:auto minmax(0,1fr) auto}
.links__thumb{grid-row:1/span 2;grid-column:1;width:5.5rem}
.links__thumb .pic{max-width:none}
.links__thumb .pic img{width:5.5rem;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}
.links__a--thumb :is(.links__label,.links__body){grid-column:2}
.links__a--thumb .links__arrow{grid-column:3}
.links__label{transition:translate var(--t-std,.35s) var(--ease)}
@media (hover:hover) and (min-width:56rem){
  .links__a{position:relative}
  .links__a--thumb{grid-template-columns:minmax(0,1fr) auto}
  .links__a--thumb :is(.links__label,.links__body){grid-column:1}
  .links__a--thumb .links__arrow{grid-column:2}
  .links__thumb{position:absolute;z-index:3;right:5rem;top:50%;width:15rem;translate:0 -50%;opacity:0;scale:.82;rotate:-4deg;transition:opacity .35s var(--ease),scale .6s var(--ease),rotate .6s var(--ease);pointer-events:none}
  .links__thumb .pic img{width:15rem;border-radius:var(--r);box-shadow:0 24px 50px -24px rgba(30,28,27,.55)}
  .links__a--thumb:is(:hover,:focus-visible) .links__thumb{opacity:1;scale:1;rotate:-2deg}
  .links__a:hover .links__label{translate:.5rem 0}
}

/* filmstrip: stills from the film in one slow row */
.blk--filmstrip{overflow:clip}
.blk--filmstrip>.grid{max-width:none}
.b-filmstrip{display:grid;gap:var(--space-4)}
.b-filmstrip__head,.b-filmstrip__foot{width:min(var(--wide),100% - 2 * var(--gutter));margin:0 auto}
.b-filmstrip__head{display:grid;gap:1.1rem;justify-items:start}
@media (min-width:56rem){.b-filmstrip__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:clamp(2rem,5vw,5rem)}.b-filmstrip__head .eyebrow{grid-column:1/-1}.b-filmstrip__intro,.b-filmstrip__head .watchlink{grid-column:2}.b-filmstrip__title{grid-row:2/span 2;align-self:end}}
.b-filmstrip__title{margin:0;max-width:16ch}
.b-filmstrip__intro{margin:0;max-width:34rem;color:var(--ink)}
.watchlink--ink{color:var(--ink-strong)}
.watchlink--ink .watchlink__icon{border-color:var(--rule-strong)}
.watchlink--ink:hover .watchlink__icon,.watchlink--ink:focus-visible .watchlink__icon{background:var(--ink-strong);color:var(--bg);border-color:var(--ink-strong)}
.watchlink--ink:focus-visible{outline-color:var(--ink-strong)}
.watchlink__time{color:var(--soft);font-weight:400}
.fs{overflow-x:auto;scrollbar-width:none;padding:0 var(--gutter);scroll-padding-inline:var(--gutter);scroll-snap-type:x proximity}
.fs::-webkit-scrollbar{display:none}
.fs:focus-visible{outline:2px solid var(--ink-strong);outline-offset:-2px}
.fs__track{display:flex;align-items:center;gap:clamp(.75rem,1.4vw,1.25rem);width:max-content;list-style:none;margin:0;padding:0}
.fs__frame{scroll-snap-align:start}
.fs__frame figure{margin:0}
.fs__frame .pic{width:auto;max-width:none}
.fs__frame .pic img{display:block;height:clamp(13rem,26vw,24rem);width:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.fs__frame--tall .pic img{aspect-ratio:4/5}
.fs__frame--square .pic img{aspect-ratio:1}
.fs__frame:nth-child(3n+2) .pic img{height:clamp(11rem,21vw,19rem)}
.fs.is-marquee{overflow:hidden;padding:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.fs.is-marquee .fs__track{padding-right:clamp(.75rem,1.4vw,1.25rem);animation:fs-run var(--fs-dur,90s) linear infinite}
.fs.is-marquee:is(:hover,.is-paused,.is-off) .fs__track{animation-play-state:paused}
@keyframes fs-run{to{translate:-50% 0}}
.b-filmstrip__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.b-filmstrip__caption{margin:0;font-size:.8rem;line-height:1.5;color:var(--soft);max-width:48rem}
.fs__toggle{flex:none;min-height:2.75rem;padding:0 1rem;border:1px solid var(--rule-strong);border-radius:100vw;background:transparent;color:var(--ink-strong);font:400 .8rem/1 var(--sans);cursor:pointer;transition:background-color var(--t-micro,.18s) var(--ease-circ)}
.fs__toggle:hover{background:var(--surface-light)}
.fs__toggle[hidden]{display:none}

/* living pictures: panorama heroes settle slowly and fall away with the scroll; banners and section pictures drift */
@media screen and (prefers-reduced-motion:no-preference){
  .hero--panorama .hero__bg .pic img{animation:kb 22s cubic-bezier(.2,.6,.3,1) both}
  @supports (animation-timeline:scroll()){
    .hero--panorama .hero__bg{animation:hero-fall linear both;animation-timeline:scroll(root);animation-range:0 100svh}
    .topbar::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--mineral);transform-origin:0 50%;scale:0 1;animation:read-bar linear both;animation-timeline:scroll(root)}
  }
  @supports (animation-timeline:view()){
    .motion :is(.b-statement__media,.b-prose__media,.b-story__media)>.pic{overflow:clip;border-radius:var(--r-card)}
    .motion :is(.b-statement__media,.b-prose__media,.b-story__media)>.pic>img{scale:1.08;animation:m-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .motion :is(.banner__media,.b-cta__bg)>.pic>img{animation:m-pan linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes kb{from{transform:scale(1.14) translate3d(1.2%,1%,0)}to{transform:scale(1.03)}}
@keyframes hero-fall{to{translate:0 14%}}
@keyframes read-bar{to{scale:1 1}}
@keyframes m-pan{from{transform:scale(1.14) translateY(-3%)}to{transform:scale(1.14) translateY(3%)}}
@media print{.fs__toggle,.b-cta__bg,.links__thumb{display:none!important}.fs{overflow:visible}.fs__track{flex-wrap:wrap;width:auto}}
.is-counting{font-variant-numeric:lining-nums tabular-nums}

/* ------------------------------------------------------------------ people and partners (/people, 2 Nov 2026)
   A publication in chapters: a quiet section nav under the bar; portraits in one warm crop, typographic initials where no
   consented portrait exists; the academic advisory as a ruled list; partner names drifting past as wordmarks, then the
   same names in full with what each relationship is. */
html:has(.subnav){scroll-padding-top:calc(var(--header) + 3.25rem + 1rem)}
.subnav{position:sticky;top:var(--header);z-index:2;background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--rule)}
.subnav__list{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;padding:.55rem max(var(--gutter),calc((100% - var(--wide)) / 2));-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent)}
.subnav__list::-webkit-scrollbar{display:none}
.subnav__list a{display:inline-flex;align-items:center;min-height:2.25rem;padding:0 .85rem;border-radius:100vw;white-space:nowrap;text-decoration:none;font:400 .8125rem/1 var(--sans);color:var(--soft);transition:color .2s var(--ease),background-color .2s var(--ease)}
.subnav__list a:hover{color:var(--ink-strong);background:var(--surface-light)}
.subnav__list a[aria-current]{color:var(--ink-strong);background:var(--surface)}
.subnav__list li:first-child a{color:var(--ink-strong)}
.subnav__list li:first-child a::after{content:"";width:1px;height:1rem;margin-left:1.1rem;background:var(--rule-strong)}

.b-people{display:grid;gap:var(--space-4)}
.b-people__head{display:grid;gap:1.1rem;justify-items:start}
@media (min-width:56rem){.b-people__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:clamp(2rem,5vw,5rem)}.b-people__head .eyebrow{grid-column:1/-1}.b-people__title{grid-row:2}.b-people__intro{grid-column:2;grid-row:2}}
.b-people__title{margin:0;max-width:16ch}
.b-people__intro{max-width:34rem;color:var(--ink)}
.b-people__intro p+p{color:var(--soft);font-size:.92rem}
.b-people__note{margin:0;font-size:.82rem;line-height:1.5;color:var(--soft);max-width:var(--measure)}
.people__group{display:grid;gap:1.4rem}
.people__group+.people__group{margin-top:var(--space-3)}
.people__group-title{display:flex;align-items:center;gap:1rem;font:400 var(--fs-eyebrow)/1.4 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
.people__group-title::after{content:"";flex:1;height:1px;background:var(--rule-strong)}
.people{display:grid;gap:clamp(1.75rem,3vw,2.75rem) clamp(1rem,2.4vw,2rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr))}
.people--board{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:clamp(2rem,4vw,3.5rem)}
.person{display:grid;align-content:start;gap:1.1rem;min-width:0}
.person__media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--surface)}
.person__pic,.person__pic.pic{width:100%;height:100%;max-width:none}
.person__pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) sepia(.06);transition:scale 1.1s var(--ease),filter .6s var(--ease)}
@media (hover:hover){.person:hover .person__pic img{scale:1.03;filter:none}}
/* the board portrait is a cut-out on white: the white takes the card's tone and the crop keeps head and shoulders */
.people--board .person__pic img{object-position:50% 4%!important;mix-blend-mode:multiply}
.person__mono{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(120% 90% at 30% 20%,var(--surface-light) 0,var(--paper) 55%,var(--surface) 100%)}
.person__mono span{font:300 clamp(3rem,2rem + 4vw,5.5rem)/1 var(--serif);letter-spacing:.04em;color:var(--mineral)}
.person__mono::after{content:"";position:absolute;inset:.75rem;border:1px solid var(--rule-strong);border-radius:calc(var(--r) - 6px)}
.people--board .person__mono span{font-size:clamp(4rem,2.5rem + 5vw,7rem)}
.person__name{font-size:clamp(1.45rem,1.25rem + .6vw,1.85rem);line-height:1.1}
.people--board .person__name{font-size:clamp(1.75rem,1.4rem + 1vw,2.4rem)}
.person__role{margin:.45rem 0 0;font:400 .6875rem/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.person__place{margin:.2rem 0 0;font-size:.82rem;color:var(--soft)}
.person__bio{margin-top:.8rem;font-size:.92rem;line-height:1.6;color:var(--ink);max-width:30rem}
.person__more summary{margin-top:.6rem;cursor:pointer;font-size:.85rem;text-decoration:underline;text-underline-offset:.22em}
/* academic advisory: a ruled list, names large, fields beside them */
.people--list{grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule-strong)}
.people--list .person{grid-template-columns:3rem minmax(0,1fr);gap:0 1rem;padding:1.3rem 0;border-bottom:1px solid var(--rule-strong)}
.people--list .person__media{aspect-ratio:auto;background:none;border-radius:0;overflow:visible}
.person__num{font:400 .75rem/2.2 var(--mono);color:var(--mineral)}
@media (min-width:48rem){.people--list .person__text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:baseline;gap:2rem}.people--list .person__role{margin:0}}
.people--list .person__name{font-size:clamp(1.6rem,1.3rem + 1.1vw,2.5rem)}
/* phones: two portraits a row; board members sit beside their portrait */
@media (max-width:39.99rem){
  .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem .85rem}
  .people .person__name{font-size:1.25rem}
  .people .person__bio{font-size:.86rem}
  .person__mono span{font-size:2.6rem}
  .people--board{grid-template-columns:1fr;gap:1.75rem}
  .people--board .person{grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:1rem;align-items:start}
  .people--board .person__name{font-size:1.5rem}
  .people--board .person__mono span{font-size:2.6rem}
  .people--list{grid-template-columns:1fr}
  .people--list .person{grid-template-columns:2rem minmax(0,1fr)}
}

/* partner rows */
.b-partners{display:grid;gap:var(--space-4)}
.b-partners__head,.b-partners__foot,.b-partners__detail{width:min(var(--wide),100% - 2 * var(--gutter));margin:0 auto}
.b-partners__head{display:grid;gap:1.1rem;justify-items:start}
@media (min-width:56rem){.b-partners__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:clamp(2rem,5vw,5rem)}.b-partners__head .eyebrow{grid-column:1/-1}.b-partners__title{grid-row:2}.b-partners__intro{grid-column:2;grid-row:2}}
.b-partners__title{margin:0;max-width:16ch}
.b-partners__intro{max-width:34rem}
.b-partners__intro p+p{color:var(--soft);font-size:.92rem}
.b-partners__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:calc(var(--space-4) * -.5)}
.b-partners__caption{margin:0;font-size:.8rem;line-height:1.5;color:var(--soft);max-width:44rem}
.mq{position:relative;overflow-x:auto;scrollbar-width:none;padding:0 var(--gutter);border-block:1px solid var(--rule-strong)}
.mq::-webkit-scrollbar{display:none}
.mq:focus-visible{outline:2px solid var(--ink-strong);outline-offset:-2px}
.mq__track{display:flex;align-items:center;width:max-content;list-style:none;margin:0;padding:0}
.mq__item{display:flex;align-items:center}
.mq__item::after{content:"";width:5px;height:5px;border-radius:100vw;background:var(--sage);opacity:.7}
.mq__mark{display:flex;align-items:center;min-height:clamp(5.5rem,9vw,8rem);padding:0 clamp(1.5rem,3.2vw,3rem);text-decoration:none;color:var(--ink-strong);transition:opacity .28s var(--ease),color .28s var(--ease)}
.mq__word{font:400 clamp(1.5rem,1.15rem + 1.3vw,2.4rem)/1 var(--serif);letter-spacing:-.01em;white-space:nowrap}
.b-partners--sikana-legacy .mq__word{font-style:italic;font-size:clamp(1.3rem,1.05rem + 1vw,2rem);color:var(--ink)}
.mq__mark img{display:block;height:clamp(2.25rem,3vw,3rem);width:auto;max-width:11rem;object-fit:contain}
a.mq__mark:hover{color:var(--sage-deep)}
@media (hover:hover){.mq:hover .mq__mark{opacity:.55}.mq .mq__mark:hover{opacity:1}}
.mq.is-marquee{overflow:hidden;padding:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.mq.is-marquee .mq__track{animation:mq-run var(--mq-dur,60s) linear infinite}
.mq.is-marquee:is(:hover,:focus-within,.is-paused,.is-off,.is-touch) .mq__track{animation-play-state:paused}
@keyframes mq-run{to{translate:-50% 0}}
.pships{display:grid;gap:0 clamp(2rem,5vw,5rem);border-top:1px solid var(--rule-strong)}
@media (min-width:56rem){.pships{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pship{display:grid;gap:.9rem;padding:1.6rem 0 1.8rem;border-bottom:1px solid var(--rule-strong);scroll-margin-top:calc(var(--header) + 4.5rem);transition:background-color .6s var(--ease),box-shadow .6s var(--ease)}
.pship:target{background:var(--surface-light);box-shadow:-1rem 0 0 var(--surface-light),1rem 0 0 var(--surface-light)}
.pship__name{font-size:clamp(1.4rem,1.2rem + .7vw,1.9rem);line-height:1.12}
.pship__cat{margin:.4rem 0 0;font:400 .6875rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.pship__body{display:grid;gap:.8rem;font-size:.95rem}
.pship__body>p{margin:0;max-width:34rem}
.pship__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.pship__years{font-size:.82rem;color:var(--soft)}
.pship__links{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;font-size:.85rem}
.badge--active::before{background:var(--sage)}
.badge--sikana-legacy::before{background:transparent;border:1px dashed var(--mineral)}
.badge--in-discussion::before,.badge--prospective::before{background:transparent;border:1.5px solid var(--ink)}
.legacy{display:grid;gap:var(--space-3) clamp(1.5rem,3vw,3rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));padding-top:var(--space-2);border-top:1px solid var(--rule-strong)}
.legacy__title{margin:0 0 .8rem;font:400 var(--fs-eyebrow)/1.4 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--soft)}
.legacy__list li{padding:.32rem 0;font-size:.9rem;line-height:1.4;border-bottom:1px solid var(--rule)}
.b-partners__more{margin:var(--space-3) 0 0}
@media print{.subnav,.mq__toggle{display:none!important}.mq{overflow:visible}.mq__track{flex-wrap:wrap;width:auto}}

/* a long headline (several sentences) steps down from the display size; the hero keeps its lede and actions in view */
.hero--dark .hero__title--long,.hero--type .hero__title--long{font-size:var(--fs-h1);max-width:20ch}

/* ------------------------------------------------------------------ control system (3 Nov 2026)
   One geometry for everything a hand touches. Actions and segmented frames take a 10px corner, the segments inside a
   frame 7px, chips and status marks a 4px archival tag. Round stays only where a thing is round: dots, the play disc,
   portraits, icon-only buttons. The shared bar (nav, Give) keeps the Indaba bar's shape, as on indaba.co. */
:root{--r-ctl:10px;--r-seg:7px;--r-tag:4px}
.button{border-radius:var(--r-ctl);letter-spacing:.005em}
.button[aria-disabled="true"],.button:disabled{opacity:.42;pointer-events:none}
.button[aria-busy="true"]{cursor:progress}
.badge{border-radius:var(--r-tag);padding:.32rem .6rem}
.chart__tab,.fs__toggle,.subnav__list a{border-radius:var(--r-ctl)}