/* Open Minds Foundation, version 3 (October 20, 2026). Design system and
   layout. Readable on its own: with JavaScript off every chapter is a normal
   section in normal flow. css/scenes.css adds the pinned, scroll-driven layer. */

:root {
  --paper: #f2f0ea;
  --paper-2: #e8e5dc;
  --ink: #0d1117;
  --ink-2: #161c24;
  --grey: #5c6168;
  --grey-ink: #9aa1aa;
  --navy: #314b6e;        /* the one accent: the logo's own navy */
  --navy-ink: #9db3cf;    /* the same hue, lifted for use on ink */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--grey);
  --accent: var(--navy);
  --line: rgba(13, 17, 23, .18);
  --f-display: "League Spartan", "Arial Narrow", Arial, sans-serif;
  --f-sub: "Raleway", Arial, sans-serif;
  --f-body: "Montserrat", Arial, sans-serif;
  --gutter: clamp(20px, 3.4vw, 48px);
  --gap: clamp(12px, 1.7vw, 24px);
  --frame: 1440px;
  --ease-io: cubic-bezier(.83, 0, .17, 1);
  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --ease-soft: cubic-bezier(.65, 0, .35, 1);
  --hdr: 88px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.6 var(--f-body);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }
::selection { background: var(--navy); color: var(--paper); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper); font: 600 .875rem/1 var(--f-display); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Grid ------------------------------------------------------------------------ */
.frame { width: min(100% - var(--gutter) * 2, var(--frame)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: start; }
.grid > * { grid-column: 1 / -1; min-width: 0; }

/* Type ------------------------------------------------------------------------- */
.lbl { font: 600 .8125rem/1.35 var(--f-sub); letter-spacing: .01em; color: var(--fg-soft); }
.lbl__i { display: inline-block; min-width: 2.25em; color: var(--accent); font-variant-numeric: tabular-nums; }
h1, h2, h3, .display { font-family: var(--f-display); font-weight: 500; text-wrap: balance; }
.fn { font: 600 .55em/0 var(--f-sub); vertical-align: super; margin-left: .12em; letter-spacing: 0; }
.fn a { color: var(--accent); }

/* Lines ------------------------------------------------------------------------- */
.rule { position: relative; display: block; height: 9px; color: var(--fg); opacity: .24; }
.rule::before { content: ""; position: absolute; left: 0; top: 0; width: var(--notch, 74%); height: 1px; background: currentColor; }
.rule::after { content: ""; position: absolute; left: calc(var(--notch, 74%) + 8px); right: 0; top: 8px; height: 1px; background: currentColor; }
.rule i { position: absolute; left: var(--notch, 74%); top: 0; width: 11.4px; height: 1px; background: currentColor; transform-origin: 0 0; transform: rotate(45deg); }
.rule:not(.rule--notch)::after, .rule:not(.rule--notch) i { display: none; }
.rule:not(.rule--notch)::before { width: 100%; }

/* Controls: they never move on hover. ---------------------------------------------- */
.btn, .go { display: inline-flex; align-items: center; gap: .7rem; font: 600 .9375rem/1 var(--f-display); letter-spacing: .005em; transition: color .3s var(--ease-out), background-color .3s var(--ease-out), border-color .3s var(--ease-out); }
.btn { min-height: 48px; padding: 0 1.25rem; background: var(--fg); color: var(--bg); border: 1px solid var(--fg); }
.btn:hover { background: transparent; color: var(--fg); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: transparent; color: var(--paper); }
.go { padding: .55rem 0; border-bottom: 1px solid currentColor; }
.go:hover { color: var(--accent); }
.go b, .btn b { font-weight: 500; }

/* Header -------------------------------------------------------------------------- */
.hdr { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: var(--hdr); display: flex; align-items: center; gap: var(--gap); padding: 0 var(--gutter); color: var(--ink); pointer-events: none; transition: color .5s var(--ease-soft); }
.hdr[data-tone="dark"] { color: var(--paper); }
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); border-bottom: 1px solid rgba(13, 17, 23, .14); opacity: 0; transition: opacity .45s var(--ease-out); }
.hdr[data-tone="dark"]::before { background: var(--ink); border-color: rgba(242, 240, 234, .14); }
.hdr.is-solid::before { opacity: 1; }
.hdr > * { pointer-events: auto; }
.hdr__brand { display: inline-flex; align-items: center; gap: .75rem; }
.hdr__mark { display: block; width: 44px; height: 44px; }
.hdr__mark .mark { width: 100%; height: 100%; }
.hdr__where { margin-left: auto; margin-right: 1.5rem; min-width: 18rem; text-align: right; font: 600 .8125rem/1 var(--f-sub); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr__menu { margin-left: auto; display: inline-flex; align-items: center; gap: .75rem; height: 40px; padding: 0 1rem; border: 1px solid currentColor; font: 600 .875rem/1 var(--f-display); transition: background-color .3s var(--ease-out), color .3s var(--ease-out); }
.hdr__menu i { position: relative; width: 18px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.hdr__menu:hover { background: currentColor; }
.hdr__menu:hover > * { color: var(--bg); }
.hdr[data-tone="dark"] .hdr__menu:hover > * { color: var(--ink); }
.hdr__menu:hover i { border-color: var(--bg); }
.hdr[data-tone="dark"] .hdr__menu:hover i { border-color: var(--ink); }

/* The wordmark: League Spartan Bold OPEN MINDS over Times New Roman Bold FOUNDATION,
   exactly as the style guide's two-line lockup. Never restyle it. */
.wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; font: 700 1.3125rem/.9 "League Spartan", "Arial Narrow", Arial, sans-serif; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.wordmark__sub { align-self: center; margin: .45em -.06em 0 0; font: 700 .6em/1 "Times New Roman", Times, serif; letter-spacing: .06em; }

/* Menu ---------------------------------------------------------------------------- */
.menu { position: fixed; z-index: 60; inset: 0; background: var(--ink); color: var(--paper); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__in { min-height: 100%; padding-block: calc(var(--hdr) + 4vh) 6vh; align-content: space-between; }
.menu__nav { grid-column: 1 / 9; }
.menu__nav li { border-top: 1px solid rgba(242, 240, 234, .16); }
.menu__nav a { display: flex; align-items: baseline; gap: 1.25rem; padding: .7rem 0 .6rem; font: 500 clamp(1.75rem, 3.4vw, 3rem)/1.05 var(--f-display); letter-spacing: -.03em; color: rgba(242, 240, 234, .92); transition: color .3s var(--ease-out); }
.menu__nav a:hover, .menu__nav a[aria-current] { color: var(--navy-ink); }
.menu__g { display: flex; align-items: baseline; gap: 1.25rem; padding: .7rem 0 .2rem; font: 500 clamp(1.75rem, 3.4vw, 3rem)/1.05 var(--f-display); letter-spacing: -.03em; color: rgba(242, 240, 234, .55); }
.menu__sub { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; padding: 0 0 .8rem 3.3rem; }
.menu__nav .menu__sub li { border: 0; }
.menu__nav .menu__sub a { padding: .25rem 0; font-size: clamp(1.125rem, 1.8vw, 1.5rem); letter-spacing: -.02em; }
.menu__i { font: 600 .8125rem/1 var(--f-sub); color: var(--navy-ink); min-width: 2.5em; font-variant-numeric: tabular-nums; }
.menu__aside { grid-column: 10 / -1; align-self: end; display: grid; gap: .5rem; font-size: .9375rem; }
.menu__aside .lbl { color: var(--grey-ink); margin-top: 1rem; }
.menu__aside a:hover { color: var(--navy-ink); }
body.menu-open { overflow: hidden; }
body.menu-open .hdr { z-index: 70; color: var(--paper); }
body.menu-open .hdr::before { opacity: 0 !important; }
body.menu-open .hdr__menu:hover > * { color: var(--ink); }
body.menu-open .hdr__menu:hover i { border-color: var(--ink); }
[data-fx="wipe"] { overflow: hidden; }

/* Stage canvas ------------------------------------------------------------------ */
.stage { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
html.js .stage { display: block; }
/* The stage sits above chapter backgrounds and below chapter content: chapters
   are not positioned (their backgrounds paint underneath the canvas) and every
   frame is positioned above it. */
main { display: block; }
.notes > .frame, .foot > .frame { position: relative; z-index: 1; }

/* Chapters: shared ---------------------------------------------------------------- */
.ch[data-theme="ink"] { background: var(--ink); color: var(--paper); --bg: var(--ink); --fg: var(--paper); --fg-soft: var(--grey-ink); --accent: var(--navy-ink); --line: rgba(242, 240, 234, .16); }
.ch[data-theme="paper"] { background: var(--paper); color: var(--ink); --bg: var(--paper); }
.ch__frame { position: relative; z-index: 1; padding-block: calc(var(--hdr) + 8vh) 12vh; }
.ch .rule { margin-bottom: 1.75rem; }
.ch .lbl { margin-bottom: 1.5rem; }
.ph { margin: 0; overflow: hidden; background: rgba(127, 127, 127, .12); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.vid { width: 100%; height: 100%; object-fit: cover; }

/* Home: hero ------------------------------------------------------------------------- */
.ch--hero { background: var(--ink); color: var(--paper); }
.hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 17, 23, .62), rgba(13, 17, 23, .28) 38%, rgba(13, 17, 23, .86)); }
.hero__grid { position: relative; min-height: 100svh; padding-block: calc(var(--hdr) + 2vh) 6vh; grid-template-rows: auto auto 1fr auto auto; }
.hero__grid .rule { grid-row: 1; color: var(--paper); opacity: .4; }
.hero__l1, .hero__l2, .hero__l3 { grid-row: 2; color: rgba(242, 240, 234, .74); }
.hero__l1 { grid-column: 1 / 4; } .hero__l2 { grid-column: 5 / 8; } .hero__l3 { grid-column: 10 / -1; text-align: right; }
.hero__title { grid-row: 4; grid-column: 1 / 9; align-self: end; font-size: clamp(2.75rem, 6.4vw, 6rem); line-height: .93; letter-spacing: -.045em; }
.hero__intro { grid-row: 4; grid-column: 9 / -1; align-self: end; max-width: 30ch; color: rgba(242, 240, 234, .86); }
.hero__actions { grid-row: 5; grid-column: 9 / -1; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; margin-top: 2rem; }
.hero__caption { grid-row: 5; grid-column: 1 / 6; align-self: end; color: rgba(242, 240, 234, .5); margin: 0 !important; }

/* Home: story ------------------------------------------------------------------------ */
.story .lbl { grid-column: 1 / 4; }
.story__lead { grid-column: 4 / -1; font-size: clamp(2.5rem, 6vw, 5.75rem); line-height: .95; letter-spacing: -.045em; max-width: 13ch; }
.story__body { grid-column: 7 / -1; margin-top: 3.5rem; max-width: 42ch; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.6; color: var(--fg-soft); }
.story__go { grid-column: 7 / -1; margin-top: 2.25rem; }

/* Home: timeline ---------------------------------------------------------------------- */
.tl .lbl { grid-column: 1 / 4; }
.tl__note { grid-column: 4 / 11; margin-top: 1.25rem; color: var(--fg-soft); }
.tl__title { grid-column: 4 / 11; font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.04em; }
.tl__track { position: relative; margin-top: 8vh; overflow: visible; }
.tl__list { display: grid; gap: 4rem var(--gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); width: min(100% - var(--gutter) * 2, var(--frame)); margin-inline: auto; }
.tl__item { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.tl__date { font: 500 clamp(1.375rem, 2vw, 1.875rem)/1.05 var(--f-display); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.tl__next { display: inline-block; margin-left: .4rem; padding: .2rem .45rem; border: 1px solid currentColor; border-radius: 2px; font: 600 .6875rem/1 var(--f-sub); color: var(--accent); vertical-align: middle; letter-spacing: .02em; }
.tl__what { margin-top: .75rem; font-weight: 500; }
.tl__what a { border-bottom: 1px solid var(--line); }
.tl__what a:hover { color: var(--accent); }
.tl__where { color: var(--fg-soft); font-size: .875rem; }

/* Home: layers ------------------------------------------------------------------------- */
.lys .lbl { grid-column: 1 / 4; }
.lys__title { grid-column: 4 / 11; font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.04em; }
.lys__stack { grid-column: 8 / -1; margin-top: 6vh; display: grid; gap: 4rem; }
.ly__i { margin-bottom: 1rem !important; }
.ly__t { font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1; letter-spacing: -.035em; }
.ly__p { margin-top: 1.25rem; max-width: 38ch; color: var(--fg-soft); }
.ly__go { margin-top: 1.5rem; }

/* Home: map ------------------------------------------------------------------------------ */
.mp .lbl { grid-column: 1 / 4; }
.mp__title { grid-column: 1 / 7; font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.04em; }
.mp__p { grid-column: 1 / 6; margin-top: 2rem; max-width: 40ch; color: var(--fg-soft); }
.pins { grid-column: 1 / 7; margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.pin { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.ch[data-theme="ink"] .pin { border-color: rgba(242, 240, 234, .2); }
.pin__name { font: 500 1.375rem/1.1 var(--f-display); letter-spacing: -.02em; }
.pin__city { color: var(--fg-soft); font-size: .875rem; }
.pin__list { margin-top: .75rem; font-size: .9375rem; }
.pin__list li { padding: .25rem 0; }
.mp__chip { grid-column: 1 / 5; margin-top: 3rem; width: min(100%, 320px); }
.mp__chip .vid { aspect-ratio: 16 / 9; }
.mp__chip .lbl { margin: .6rem 0 0 !important; }

/* Home: impact instrument ------------------------------------------------------------------ */
.ip .lbl { grid-column: 1 / 4; }
.ip__title, .ip .head__title { grid-column: 4 / -1; font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.04em; }
.ip .head__lede { grid-column: 4 / 11; }
.ruler { grid-column: 1 / -1; position: relative; height: 34px; margin-top: 9vh; }
.ruler__ticks { position: absolute; inset: 0; background:
  linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat,
  repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px calc(100% / 60)) left bottom / 100% 10px no-repeat,
  repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px calc(100% / 12)) left bottom / 100% 22px no-repeat;
  opacity: .28; }
.ruler__fill { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--fill, 1)); }
.rds { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 2rem; }
.rd { grid-column: span 4; padding-right: 2rem; }
.rd__v { font: 500 clamp(2.75rem, 5.2vw, 5rem)/1 var(--f-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.rd__k { margin-top: .6rem; color: var(--fg-soft); max-width: 22ch; }
.ip__go { grid-column: 9 / -1; margin-top: 4rem; }

/* Home: competitions -------------------------------------------------------------------------- */
.cs .lbl { grid-column: 1 / 4; }
.cs__title { grid-column: 4 / 11; font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.04em; margin-bottom: 8vh; }
.cs__media { grid-column: 1 / 6; grid-row: span 4; align-self: start; position: sticky; top: calc(var(--hdr) + 3vh); }
.cs__media .vid { aspect-ratio: 16 / 10; }
.cs__cap { margin: .75rem 0 0 !important; }
.crs { grid-column: 7 / -1; }
.cr { padding: 1.75rem 0 2.25rem; border-top: 1px solid var(--line); }
.cr__a { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; }
.cr__n { font: 500 clamp(2rem, 3.6vw, 3.25rem)/1 var(--f-display); letter-spacing: -.04em; }
.cr__tag { align-self: center; color: var(--accent); }
.cr__d { grid-column: 1; margin-top: .75rem; font: 500 1.0625rem/1.3 var(--f-display); font-variant-numeric: tabular-nums; }
.cr__w { grid-column: 1; color: var(--fg-soft); font-size: .9375rem; }
.cr__a:hover .cr__n { color: var(--accent); }
.cr__p { margin-top: 1rem; max-width: 46ch; color: var(--fg-soft); }

/* Home: projects ------------------------------------------------------------------------------- */
.pjs .lbl { grid-column: 1 / 4; }
.pjs__title { grid-column: 4 / 11; font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.04em; margin-bottom: 8vh; }
.pj .ph { aspect-ratio: 4 / 3; margin-bottom: 1.25rem; }
.pj--0 { grid-column: 1 / 7; }
.pj--1 { grid-column: 8 / -1; margin-top: 18vh; }
.pj--2 { grid-column: 3 / 8; margin-top: 10vh; }
.pj__with { margin-bottom: .5rem !important; }
.pj__t { font-size: clamp(1.5rem, 2.4vw, 2.25rem); letter-spacing: -.03em; line-height: 1.05; }
.pj__p { margin-top: .75rem; max-width: 44ch; color: var(--fg-soft); }
.pjs__go { grid-column: 9 / -1; align-self: end; margin-top: 4rem; }

/* Home: values --------------------------------------------------------------------------------- */
.vls .lbl { grid-column: 1 / 4; }
.vls__title { grid-column: 4 / 11; font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.04em; margin-bottom: 6vh; }
.vls__list { grid-column: 4 / -1; }
.vl { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: var(--gap); padding: 1.75rem 0; border-top: 1px solid var(--line); }
.vl__t { font-size: clamp(1.5rem, 2.3vw, 2.125rem); letter-spacing: -.03em; line-height: 1; }
.vl__p { color: var(--fg-soft); max-width: 46ch; }

/* Home: people ---------------------------------------------------------------------------------- */
.ch--people { background: var(--ink); color: var(--paper); }
.people__media { position: absolute; inset: 0; overflow: hidden; }
.people__media .ph { height: 100%; }
.people__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 17, 23, .9), rgba(13, 17, 23, .55) 55%, rgba(13, 17, 23, .3)); }
.pp { position: relative; }
.pp .lbl { grid-column: 1 / 4; }
.pp__title { grid-column: 1 / 8; font-size: clamp(2.25rem, 4.8vw, 4.75rem); line-height: .95; letter-spacing: -.045em; }
.pp__p { grid-column: 1 / 6; margin-top: 2rem; max-width: 40ch; color: var(--fg-soft); }
.pp__go { grid-column: 1 / 8; margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; }

/* Home: partners --------------------------------------------------------------------------------- */
.pts .lbl { grid-column: 1 / 4; }
.pts__title { grid-column: 4 / 9; font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.04em; }
.pts__p { grid-column: 4 / 10; margin-top: 2rem; max-width: 52ch; color: var(--fg-soft); }
.pts__list { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 6vh; }
.pt { display: flex; align-items: center; gap: 1.25rem; min-height: 76px; padding: .75rem 0; border-top: 1px solid var(--line); }
.pt__m { flex: none; width: 52px; }
.pt__n { font: 500 1.0625rem/1.25 var(--f-display); letter-spacing: -.01em; }
.pt .ph { background: none; }
.pt img { object-fit: contain; mix-blend-mode: multiply; }
.pts__go { grid-column: 4 / -1; margin-top: 5vh; }

/* Home: news ----------------------------------------------------------------------------------------- */
.nw .lbl { grid-column: 1 / 4; }
.nw__title { grid-column: 4 / 11; font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.04em; margin-bottom: 5vh; }
.nw__list { grid-column: 4 / -1; }
.nw__i a { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--gap); align-items: baseline; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.nw__d { font: 500 .9375rem/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--fg-soft); }
.nw__t { font: 500 clamp(1.25rem, 2vw, 1.75rem)/1.15 var(--f-display); letter-spacing: -.02em; }
.nw__i a:hover .nw__t { color: var(--accent); }
.nw__go { grid-column: 4 / -1; margin-top: 2rem; }

/* Home: get involved ---------------------------------------------------------------------------------- */
.iv .lbl { grid-column: 1 / 4; }
.iv__title { grid-column: 4 / 11; font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.04em; margin-bottom: 7vh; }
.iv__list { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem var(--gap); }
.iv__list li { padding-top: 1.25rem; border-top: 1px solid rgba(242, 240, 234, .18); }
.iv__k { font: 500 1.375rem/1.1 var(--f-display); letter-spacing: -.02em; }
.iv__p { margin: .5rem 0 1.25rem; color: var(--fg-soft); max-width: 34ch; }

/* Secondary pages ------------------------------------------------------------------------------------ */
.head .lbl { grid-column: 1 / 4; }
.head__title { grid-column: 1 / -1; font-size: clamp(3rem, 8vw, 7.5rem); line-height: .92; letter-spacing: -.05em; max-width: 16ch; }
.head__lede { grid-column: 6 / 12; margin-top: 3rem; max-width: 46ch; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--fg-soft); }
.head__go { grid-column: 6 / -1; margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.head__media { margin-top: 9vh; }
.head__media .ph { height: min(78vh, 52rem); }
.pg .lbl { grid-column: 1 / 4; }
.pg__t { grid-column: 4 / 11; font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.04em; }
.pg__p { grid-column: 4 / 9; margin-top: 2rem; font-size: 1.125rem; }
.pg__list { grid-column: 4 / 9; margin-top: 1.5rem; }
.pg__list li { padding: .85rem 0; border-top: 1px solid var(--line); }
.pg__note { grid-column: 4 / 9; margin-top: 1rem; color: var(--fg-soft); font-size: .9375rem; }
.pg__go { grid-column: 4 / 9; margin-top: 2rem; }
.pg__media { grid-column: 9 / -1; grid-row: 3 / span 5; align-self: start; }
.pg__media .ph { aspect-ratio: 4 / 5; }
.pg--1 .pg__t, .pg--1 .pg__p, .pg--1 .pg__list, .pg--1 .pg__note, .pg--1 .pg__go { grid-column: 6 / -1; }
.pg--1 .pg__media { grid-column: 1 / 5; }
.sts .lbl { grid-column: 1 / 4; }
.sts__title { grid-column: 4 / 11; font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.04em; }
.sts__list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 10vh; }
.st { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.st__i { font: 600 .8125rem/1 var(--f-sub); color: var(--accent); }
.st__t { margin-top: 1rem; font-size: clamp(1.375rem, 2vw, 1.875rem); letter-spacing: -.025em; line-height: 1.05; }
.st__p { margin-top: .85rem; color: var(--fg-soft); max-width: 32ch; }
.cta .lbl { grid-column: 1 / 4; }
.cta__t { grid-column: 4 / 12; font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: .95; letter-spacing: -.045em; }
.cta__p { grid-column: 4 / 10; margin-top: 2.5rem; max-width: 52ch; color: var(--fg-soft); }
.cta__p a { border-bottom: 1px solid currentColor; }
.cta__go { grid-column: 4 / -1; margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.ev .lbl { grid-column: 1 / 4; }
.ev__t { grid-column: 4 / 10; font-size: clamp(2.25rem, 4.8vw, 4.5rem); line-height: .98; letter-spacing: -.04em; }
.ev__p { grid-column: 4 / 9; margin-top: 2rem; max-width: 52ch; }
.ev__when { grid-column: 4 / 9; margin-top: 1rem; font: 500 1.0625rem/1.3 var(--f-display); color: var(--accent); }
.ev__go { grid-column: 4 / 10; margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.ev__media { grid-column: 4 / -1; margin-top: 6vh; }
.ev__media .ph { aspect-ratio: 16 / 9; }
.ev__cap { grid-column: 4 / -1; margin-top: .75rem !important; color: var(--fg-soft); }
.ev--1 .ev__cap { grid-column: 1 / 11; }
.ev.ev--2 .ev__cap { grid-column: 7 / -1; grid-row: 8; }
.pg__cap { margin-top: .75rem !important; color: var(--fg-soft); }
.ev--1 .ev__media { grid-column: 1 / 11; }
.ev--2 .lbl { grid-column: 1 / -1; grid-row: 2; }
.ev--2 .ev__t { grid-column: 1 / 7; grid-row: 3; }
.ev--2 .ev__p { grid-column: 1 / 6; grid-row: 4; }
.ev--2 .ev__when { grid-column: 1 / 6; grid-row: 5; }
.ev--2 .ev__go { grid-column: 1 / 7; grid-row: 6; align-self: start; }
.ev--2 .ev__media { grid-column: 7 / -1; grid-row: 3 / 8; margin-top: 0; align-self: start; }
.ev--2 .ev__media .ph { aspect-ratio: 4 / 5; }
.cp__media { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.cp__media > .ph { height: 100%; }
.cp__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 17, 23, .6), rgba(13, 17, 23, .25) 40%, rgba(13, 17, 23, .88)); }
.cph { position: relative; min-height: 100svh; padding-block: calc(var(--hdr) + 2vh) 7vh; grid-template-rows: auto auto 1fr auto auto; }
.cph .rule { grid-row: 1; color: var(--paper); opacity: .4; }
.cph__l, .cph__l2 { grid-row: 2; color: rgba(242, 240, 234, .74); }
.cph__l { grid-column: 1 / 5; } .cph__l2 { grid-column: 7 / -1; text-align: right; }
.cph__t { grid-row: 4; font-size: clamp(3rem, 8vw, 7.5rem); line-height: .92; letter-spacing: -.05em; max-width: 12ch; }
.cph__go { grid-row: 5; margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.cph .btn, .ch--hero .btn, .ch--people .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cph .btn:hover, .ch--hero .btn:hover, .ch--people .btn:hover { background: transparent; color: var(--paper); }
.cw .lbl { grid-column: 1 / 4; }
.cw__when { grid-column: 1 / -1; font: 500 clamp(1.375rem, 2.2vw, 2rem)/1.2 var(--f-display); letter-spacing: -.02em; }
.cw__when .lbl { display: block; margin-bottom: .6rem; }
.fcs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.fc { padding-top: 1rem; border-top: 1px solid var(--line); }
.fc dt { margin-bottom: .6rem !important; }
.fc dd { font: 500 clamp(1.375rem, 2.2vw, 2rem)/1.1 var(--f-display); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.cw__about { grid-column: 4 / 11; margin-top: 10vh; }
.cw__t { font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.04em; margin-bottom: 2rem; }
.cw__about p + p, .cw__about h2 + p { margin-top: 1rem; max-width: 58ch; }
.gl .lbl { grid-column: 1 / 4; }
.gl__t { grid-column: 4 / 11; font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.04em; margin-bottom: 7vh; }
.gl__f { margin: 0 0 6vh; }
.gl__f .ph { aspect-ratio: 3 / 2; }
.gl__f figcaption { margin-top: .75rem; }
.gl__f--0 { grid-column: 1 / 8; } .gl__f--1 { grid-column: 9 / -1; margin-top: 16vh; }
.gl__f--2 { grid-column: 3 / 9; } .gl__f--3 { grid-column: 10 / -1; margin-top: 8vh; }
.gl__go { grid-column: 4 / -1; }
.tms .lbl { grid-column: 1 / 4; }
.tms__t { grid-column: 4 / 11; font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.04em; margin-bottom: 7vh; }
.tms__list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4rem var(--gap); }
.tm__ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.tm__ph img { width: 100%; height: 100%; object-fit: cover; }
.tm--mark .tm__ph { display: grid; place-items: center; background: var(--paper-2); }
.tm--mark .tm__ph img { width: 42%; height: auto; object-fit: contain; filter: brightness(0) opacity(.22); }
.tm__n { margin-top: 1rem; font: 500 1.25rem/1.1 var(--f-display); letter-spacing: -.02em; }
.tm__r { margin: .35rem 0 .5rem !important; }
.tm__e { font-size: .8125rem; color: var(--fg-soft); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tm__e:hover { color: var(--accent); }
.tms__fmt { grid-column: 1 / 7; margin-top: 5rem; color: var(--fg-soft); font-size: .9375rem; }
.qt .lbl { grid-column: 1 / 4; }
.qt__q { grid-column: 2 / 12; font: 500 clamp(2.25rem, 5.4vw, 5.25rem)/1 var(--f-display); letter-spacing: -.04em; }
.qt__p { grid-column: 7 / 12; margin-top: 3rem; color: var(--fg-soft); }
.pos__list { grid-column: 1 / -1; }
.po__a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 2rem 0 3rem; border-top: 1px solid var(--line); }
.po__ph { grid-column: 1 / 5; grid-row: span 4; }
.po__ph .ph { aspect-ratio: 4 / 3; }
.po--1 .po__ph .ph { aspect-ratio: 3 / 4; width: 62%; }
.po__meta, .po__t, .po__p, .po__a .go { grid-column: 6 / 12; }
.po__t { margin-top: .75rem; font-size: clamp(1.75rem, 3.2vw, 3rem); line-height: 1; letter-spacing: -.035em; }
.po__p { margin-top: 1rem; max-width: 52ch; color: var(--fg-soft); }
.po__a .go { justify-self: start; margin-top: 1.5rem; }
.po__a:hover .po__t { color: var(--accent); }
.ar__crumb { grid-column: 1 / 7; } .ar__date { grid-column: 9 / -1; text-align: right; }
.ar__crumb a { border-bottom: 1px solid currentColor; }
.ar__t { grid-column: 1 / -1; margin-top: 4vh; font-size: clamp(2.75rem, 7vw, 6.5rem); line-height: .93; letter-spacing: -.05em; max-width: 15ch; }
.ar__dek { grid-column: 6 / 12; margin-top: 3rem; font-size: clamp(1.125rem, 1.5vw, 1.375rem); }
.ar__by { grid-column: 6 / 12; margin-top: 1.5rem; }
.ar__fig { grid-column: 1 / -1; margin: 0 0 8vh; overflow: hidden; }
.ar__fig img { width: 100%; max-height: 80vh; object-fit: cover; }
.ar__fig figcaption { margin-top: .75rem; }
.ar__body { padding-bottom: 6vh; }
.ar__body p { grid-column: 4 / 10; font-size: 1.125rem; line-height: 1.7; }
.ar__body p + p { margin-top: 1.25rem; }
.ch--story .ar__fig img { aspect-ratio: auto; }
.rp .lbl { grid-column: 1 / 4; }
.rp .head__lede { grid-column: 6 / 12; }
.rp__viewer { grid-column: 1 / -1; margin-top: 8vh; height: min(88vh, 60rem); border: 1px solid var(--line); background: var(--paper-2); }
.rp__viewer object, .rp__frame { width: 100%; height: 100%; display: block; border: 0; }
.rp__help { grid-column: 1 / -1; margin-top: 1rem; font-size: .875rem; color: var(--fg-soft); }
.rp__help a { text-decoration: underline; text-underline-offset: 3px; }
.rp__viewer p { padding: 2rem; }
.pv { margin-top: 10vh; }
.nf { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.pv__q { margin-top: 2.5rem; }
.pv__qp { margin-top: .5rem; font-size: .875rem; color: var(--fg-soft); max-width: 30ch; }
.pv__toc { grid-column: 1 / 4; align-self: start; position: sticky; top: calc(var(--hdr) + 2rem); }
.pv__toc li { padding: .4rem 0; font-size: .9375rem; }
.pv__toc a:hover { color: var(--accent); }
.pv__body { grid-column: 5 / 12; }
.pv__s { padding-bottom: 3.5rem; }
.pv__h { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.035em; line-height: 1.05; margin: .5rem 0 1.25rem; }
.pv__s p + p { margin-top: 1rem; }
.pv__s a { border-bottom: 1px solid currentColor; }

/* Notes, footer ---------------------------------------------------------------------------------------- */
.notes { padding: 10vh 0 6vh; background: var(--ink); color: var(--paper); --bg: var(--ink); --fg: var(--paper); --fg-soft: var(--grey-ink); --accent: var(--navy-ink); --line: rgba(242, 240, 234, .16); }
.notes__list p { max-width: 68ch; }
.notes .rule { margin-bottom: 1.5rem; }
.notes__title { grid-column: 1 / 4; }
.notes__list { grid-column: 4 / 12; counter-reset: n; }
.notes__list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; padding: .85rem 0; border-top: 1px solid var(--line); font-size: .875rem; color: var(--fg-soft); }
.notes__n { font: 600 .8125rem/1.6 var(--f-sub); color: var(--accent); }
.notes__back { margin-left: .35rem; color: var(--accent); }
.foot { background: var(--ink); color: var(--paper); padding: 9vh 0 4vh; overflow: hidden; }
.foot .grid { row-gap: 3rem; }
.foot__close { grid-column: 1 / -1; height: 22vh; }
.foot__stage { display: block; width: 100%; height: 100%; }
.foot__line { grid-column: 1 / 7; font: 500 clamp(1.75rem, 3.2vw, 3rem)/1.05 var(--f-display); letter-spacing: -.035em; max-width: 20ch; }
.foot__mail { grid-column: 1 / 7; align-self: start; }
.foot__mail a { border-bottom: 1px solid currentColor; }
.foot__nav { grid-column: 8 / 11; grid-row: 2 / span 2; }
.foot__soc { grid-column: 11 / -1; grid-row: 2 / span 2; }
.foot .lbl { color: var(--grey-ink); margin-bottom: 1rem; }
.foot li { padding: .2rem 0; font-size: .9375rem; }
.foot__g { margin-top: 1.5rem; }
.foot li a:hover, .foot__mail a:hover { color: var(--navy-ink); }
.foot__brand { grid-column: 1 / 7; display: inline-flex; align-items: center; gap: .75rem; margin-top: 8vh; }
.foot__mark { width: 44px; height: 44px; }
.foot__small { grid-column: 8 / -1; align-self: end; color: var(--grey-ink); font-size: .8125rem; }

/* Annual report banner (built by the script) --------------------------------------------------------------- */
.banner { position: fixed; z-index: 40; right: var(--gutter); bottom: 20px; border-radius: 2px; display: flex; align-items: center; gap: .75rem; padding: 8px 6px 8px 8px; max-width: calc(100vw - var(--gutter) * 2); background: var(--paper); color: var(--ink); border: 1px solid rgba(13, 17, 23, .2); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s var(--ease-out); }
.banner[hidden] { display: none; }
.banner.is-held, .banner.is-quiet { visibility: hidden; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s var(--ease-out) .6s; opacity: 0; transform: translateY(12px); pointer-events: none; }
.banner img { width: 27px; height: 36px; object-fit: cover; }
.banner__t { font: 600 .875rem/1.2 var(--f-display); }
.banner__k { font-size: .75rem; color: var(--grey); }
.banner__go { margin-left: .5rem; font: 600 .8125rem/1 var(--f-display); padding: .55rem .8rem; border: 1px solid currentColor; }
.banner__go:hover { background: var(--ink); color: var(--paper); }
.banner__x { width: 32px; height: 32px; font-size: 1.125rem; line-height: 1; }

/* Competition brand colours: colours only, inside #main. ------------------------------------------------------ */
.theme-lbcc #main { --navy: #9c261e; --navy-ink: #e7aaa3; }
.theme-lbcc #main .ch[data-theme="paper"], .theme-lbcc #main .ch[data-theme="ink"] { --accent: var(--navy); }
.theme-lbcc #main .ch[data-theme="ink"] { --accent: var(--navy-ink); }
.theme-velocity #main { --navy: #2a5b8c; --navy-ink: #aac8dd; }
.theme-velocity #main .ch[data-theme="paper"] { --accent: var(--navy); }
.theme-velocity #main .ch[data-theme="ink"] { --accent: var(--navy-ink); }

/* Phones and tablets ------------------------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .tms__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sts__list, .fcs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
}
@media (max-width: 760px) {
  :root { --hdr: 72px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid > *, .grid > .lbl { grid-column: 1 / -1 !important; }
  .hdr__where { display: none; }
  .hdr__mark { width: 38px; height: 38px; }
  .hdr__menu { margin-left: auto; }
  .wordmark { font-size: 1rem; }
  .hero__l2 { display: none; }
  .hero__l1 { grid-column: 1 / 3 !important; } .hero__l3 { grid-column: 3 / -1 !important; }
  .hero__grid { grid-template-rows: auto auto 1fr auto auto auto; }
  .hero__title { grid-row: 4; } .hero__intro { grid-row: 5; margin-top: 1.5rem; } .hero__actions { grid-row: 6; } .hero__caption { display: none; }
  .story__body, .story__go { margin-top: 2rem; }
  .tl__list { grid-template-columns: 1fr; gap: 1.75rem; }
  .lys__stack { margin-top: 4vh; }
  .pins { margin-top: 2rem; gap: 1.5rem; }
  .pts__list { grid-template-columns: 1fr; }
  .mp__chip { display: none; }
  .rds { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .rd { grid-column: 1 / -1; }
  .cs__media { position: static; grid-row: auto; margin-bottom: 2rem; }
  .cs__media .vid { aspect-ratio: 16 / 10; }
  .pj--1, .pj--2 { margin-top: 3rem; }
  .vl { grid-template-columns: 1fr; gap: .75rem; }
  .iv__list { grid-template-columns: 1fr; }
  .nw__i a { grid-template-columns: 1fr; gap: .4rem; }
  .menu__aside { margin-top: 3rem; }
  .sts__list, .fcs, .tms__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl__f--1, .gl__f--3 { margin-top: 0; }
  .po__a { grid-template-columns: 1fr; }
  .po__a > * { grid-column: 1 / -1 !important; }
  .po__ph { margin-bottom: 1.25rem; }
  .head__media .ph { height: 56vh; }
  .pv__toc { position: static; margin-bottom: 2rem; }
  .foot__nav, .foot__soc { grid-row: auto; }
  .banner__k { display: none; }
}
@media print { .stage, .world-canvas, .hdr, .banner { display: none !important; } }

/* Headings never leave one word alone on the last line. */
h1, h2, h3, blockquote p { text-wrap: balance; }
img[loading="lazy"] { background: rgba(127, 127, 127, .1); }
.rd__n { display: inline-block; text-align: right; }

/* Without the scene layer (reduced motion, or no JavaScript) the header is a solid
   bar in the tone it was built with, so it never sits on body copy. */
html:not(.scenes) .hdr::before { opacity: 1; }
.hdr__menu--nojs { display: none; }
html:not(.js) .hdr__menu:not(.hdr__menu--nojs) { display: none; }
html:not(.js) .hdr__menu--nojs { display: inline-flex; }
@media (max-width: 760px) {
  .cph__l2 { display: none; }
  .ev--2 > * { grid-row: auto !important; }
  .ev--2 .ev__media { margin-top: 4vh; }
}

/* Rhythm: chapters vary their depth and heading scale. */
.ch--story .story__lead { font-size: clamp(2.75rem, 6.4vw, 6.25rem); }
.ch--values .vls__title, .ch--news .nw__title { font-size: clamp(1.75rem, 3vw, 2.75rem); }
.ch--partners .pts__title { font-size: clamp(2rem, 4vw, 3.75rem); }
.ch--involve .iv__title { font-size: clamp(2.75rem, 6vw, 6rem); }
.ch--values > .ch__frame { padding-block: calc(var(--hdr) + 3vh) 8vh; }
.ch--news > .ch__frame { padding-block: calc(var(--hdr) + 14vh) 10vh; }
.ch--partners > .ch__frame { padding-block: calc(var(--hdr) + 18vh) 14vh; }
.ch--projects > .ch__frame { padding-block: calc(var(--hdr) + 4vh) 16vh; }
.ch--involve > .ch__frame { padding-block: calc(var(--hdr) + 20vh) 18vh; }
.ev--1 { padding-top: 6vh; }
.ev--2 { padding-top: 2vh; }

/* Community projects: three layers, each with its photo */
.pjl__ph { width: min(260px, 70%); margin-bottom: 1.25rem; }
.pjl__ph .ph { aspect-ratio: 4 / 3; }
.pjs .pjs__go { grid-column: 8 / -1; margin-top: 2rem; }