@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 01-tokens.css */
/* ==========================================================================
   CHOGM26 · Commonwealth of Learning — design tokens
   Colours from the talking-points PDF (first sampled from v5.7; now as in v5.17 and COL's graphics resources of 15 and 21 October 2026).
   Each talking point sets --tp / --tp-wave / --tp-tint on <html>.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand */
  --col-blue: #136ab6;          /* cover, TP01, "Working in synergy" */
  --lavender: #a799d0;          /* the constant ribbon in every page header */
  --lime-wave: #e2e4ab;         /* index-page ribbon */
  --red: #c42a1c;               /* talking-point subtitles */
  --red-label: #c0504d;         /* index super-headings */
  --rule-teal: #3c8a9e;         /* index dividers */
  --link: #1d5f9e;              /* the PDF's link blue: references, Gaborone evidence */

  /* Ink (PDF v5.17: titles #141414, text #333333, case studies #1b1b1b) */
  --ink-strong: #141414;
  --ink: #333333;
  --ink-2: #555555;
  --ink-3: #666666;
  --ink-4: #767676;             /* lightest text that still clears 4.5:1 on white */

  /* Paper */
  --paper: #ffffff;
  --paper-2: #f7f6f2;           /* warm band behind card grids */
  --paper-3: #efede7;
  --rule: #e6e4de;
  --rule-2: #d5d2ca;

  /* Atlas tiles (from the Commonwealth-Atlas-Tiles slides) */
  --tile: #f1f2f7;
  --tile-line: #d7dbe7;
  --tile-ink: #2e3350;

  /* Per talking point (defaults = TP01) */
  --tp: var(--col-blue);
  --tp-wave: #b5d0e8;
  --tp-tint: #e7f0f8;
  --tp-ink: color-mix(in oklab, var(--tp) 84%, black);
  --tp-soft: color-mix(in oklab, var(--tp) 12%, white);
  --tp-mid: color-mix(in oklab, var(--tp) 52%, white);
  --tp-line: color-mix(in oklab, var(--tp) 30%, white);

  /* Type */
  --serif: "Cormorant Garamond", "Cormorant", "EB Garamond", Garamond, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Layout */
  --max: 1180px;
  --read: 41rem;
  --gutter: clamp(16px, 4.6vw, 44px);
  --r-xl: 22px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-xs: 6px;

  /* Elevation — quiet */
  --shadow-card: 0 1px 2px rgba(22, 24, 44, .05), 0 12px 30px -20px rgba(22, 24, 44, .30);
  --shadow-lift: 0 2px 4px rgba(22, 24, 44, .07), 0 22px 44px -22px rgba(22, 24, 44, .38);
  /* Talking-point and proof cards: a fine line border and a subtle drop shadow (the President's note, Oct 2026) */
  --card-line: rgba(0, 0, 0, .12);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 18px -10px rgba(0, 0, 0, .22);
  --card-shadow-lift: 0 2px 4px rgba(0, 0, 0, .07), 0 14px 26px -12px rgba(0, 0, 0, .28);

  /* Motion: one short settle, then stillness */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms;
  --t-med: 420ms;

  /* Chart chrome (FT / Economist conventions: hairline grid, recessive axes) */
  --grid: #e8e6e1;
  --axis: #a8a59d;
  --grey-1: #d5d3cd;
  --grey-2: #b5b2aa;
  --grey-3: #8e8b84;
  --chart-ink: #3a3a3a;

  /* Validated multi-series set (dataviz validator: all checks pass, all-pairs) */
  --cat-1: #136ab6;
  --cat-2: #c47a1b;
  --cat-3: #2f9d6a;
  --cat-4: #a83a5a;
}

/* 02-base.css */
/* ==========================================================================
   Base: reset, type, layout primitives
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.62 var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--tp);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On the colour bands (hero, callout, opportunity, footer) the ring is white */
:where(.hero, .callout, .opportunity, .oppbox, .sitefoot, .dl:first-child) :focus-visible { outline-color: #fff; }

a { color: var(--tp-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
/* Email links: the "@" is drawn here, so the address is never written out in the page (spam harvesters);
   core.js adds the mailto: link when a reader reaches for it */
a.mail { cursor: pointer; text-decoration-line: underline; }
.mail__at::before { content: "@"; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink-strong); }
em { font-style: italic; }
sup { font-size: .7em; line-height: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; color: var(--ink-strong); text-wrap: balance; }

/* Display serif — Cormorant Garamond, as in the PDF */
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -.005em; }
.serif-i { font-family: var(--serif); font-style: italic; font-weight: 500; }

/* The PDF's small uppercase tracked labels */
.label {
  display: block;
  font: 700 .78rem/1.3 var(--sans);
  letter-spacing: .065em;
  text-transform: uppercase;
  color: var(--label-ink, var(--tp));
  margin: 0 0 .7rem;
}
.label--ink { color: var(--ink-2); }
.label--red { color: var(--red-label); }
.label--white { color: #fff; }

.kicker {
  font: 600 .95rem/1.35 var(--sans);
  color: var(--ink-2);
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.read { max-width: var(--read); }

.section { padding-block: clamp(44px, 7vw, 88px); }
.section--tight { padding-block: clamp(32px, 5vw, 56px); }
.band { background: var(--paper-2); }
.band--tint { background: var(--tp-tint); }

.section-head { display: grid; gap: .25rem; margin-bottom: clamp(20px, 3vw, 32px); max-width: 46rem; }
.section-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.01em;
}
.section-head p:not(.label) { color: var(--ink-2); font-size: 1.05rem; margin: .5rem 0 0; max-width: 40rem; }
/* the kicker over a section heading: the PDF's small bold capitals in the talking point's colour */
.section-head > .label { margin: 0 0 .2rem; }

.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: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink-strong); color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 12px; }

.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: .86rem; line-height: 1.5; }
.tiny { font-size: .76rem; line-height: 1.45; color: var(--ink-3); }

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

/* Calm entrance: one short settle, then still. Disabled for reduced motion. */
.js .settle { opacity: 0; transform: translateY(10px); }
.js .settle.is-in { opacity: 1; transform: none; transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
@media print { .js .settle { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .settle { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* 03-components.css */
/* ==========================================================================
   Components
   ========================================================================== */

/* ---------- Top bar ------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar__in { display: flex; align-items: center; gap: 12px; min-height: 58px; }
.brand { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; color: var(--ink-strong); min-width: 0; }
.brand__name { font-family: var(--serif); font-weight: 600; font-size: 1.22rem; letter-spacing: -.005em; white-space: nowrap; }
.brand__tag { font: 700 .7rem/1 var(--sans); letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; }
.brand__short { display: none; }
@media (max-width: 560px) { .brand__full { display: none; } .brand__short { display: inline; } .brand__tag { display: inline !important; } .brand__tagx { display: none; } }
@media (max-width: 380px) { .brand__tag { display: none !important; } }
.topbar__nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.topbar__nav a, .topbar__nav button {
  display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 12px; border-radius: 999px;
  border: 0; background: none; color: var(--ink-2); font: 600 .86rem/1 var(--sans); text-decoration: none; white-space: nowrap;
}
.topbar__nav a:hover, .topbar__nav button:hover { background: var(--paper-2); color: var(--ink-strong); }
.topbar__nav a[aria-current="true"] { background: var(--ink-strong); color: #fff; }
.topbar__nav svg { width: 16px; height: 16px; flex: none; }
.topbar .tpnav { display: flex; gap: 4px; margin-left: 6px; }
.tpnav a { width: 36px; justify-content: center; padding: 0; border: 1px solid var(--rule); }
@media (max-width: 1120px) { .brand__tag { display: none; } }
@media (max-width: 980px) { .topbar__nav .navlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .topbar__nav a { padding: 0 10px; } }
@media (max-width: 760px) {
  .brand__tag, .topbar__nav .hide-sm { display: none; }
  .topbar__nav a.hide-sm { display: none; }
  .topbar__nav a, .topbar__nav button { padding: 0 10px; }
}

/* ---------- Waves (the PDF header ribbons) -------------------------------- */
.waves { position: absolute; inset: 0 0 auto 0; height: var(--wave-h, clamp(150px, 21vw, 270px)); pointer-events: none; overflow: hidden; }
.waves svg { width: 100%; height: 100%; }
.waves path { mix-blend-mode: multiply; }
.js .waves .ribbon { transform: translateX(-2.5%); opacity: 0; }
.js .waves.is-in .ribbon { transform: none; opacity: 1; transition: transform 1100ms var(--ease), opacity 700ms var(--ease); }
.js .waves.is-in .ribbon--b { transition-delay: 120ms; }

/* ---------- Badge (numbered circle) --------------------------------------- */
.badge {
  --s: 3.25rem;
  display: inline-grid; place-items: center; flex: none;
  width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--tp); color: #fff;
  font: 700 calc(var(--s) * .38)/1 var(--sans); letter-spacing: .01em;
}
.badge--sm { --s: 2.1rem; }
/* the PDF's numbered discs are flat; a white ring only where one sits on a ribbon */
.masthead .badge, .tpcard__top .badge { box-shadow: 0 0 0 3px #fff; }
.badge--xs { --s: 1.6rem; box-shadow: none; }

/* ---------- Masthead ------------------------------------------------------ */
.masthead { position: relative; padding-top: clamp(40px, 6.6vw, 88px); padding-bottom: clamp(18px, 3vw, 30px); }   /* title and subtitle sit in the wave, as in the PDF */
.masthead__in { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; align-items: start; }
.masthead h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: calc(clamp(2.7rem, 7.4vw, 5.6rem) * var(--title-k, 1)); line-height: .98; letter-spacing: -.012em;   /* --title-k: the PDF's smaller setting for long titles */
  color: var(--ink-strong);
}
.masthead .subtitle {
  margin: .75rem 0 0; color: var(--red);
  font: 600 clamp(1.08rem, 2.2vw, 1.75rem)/1.3 var(--sans); letter-spacing: -.003em; max-width: 34em;   /* the PDF's 13 : 40 pt subtitle-to-title ratio */
}
.masthead__meta { display: grid; justify-items: end; gap: 12px; text-align: right; padding-top: 4px; }
.masthead__meta .meta { font: 400 .78rem/1.45 var(--sans); color: #1d1d1d; }
/* the centre of the PDF's QR panel: the number in a ring of the talking point's colour */
.masthead__meta .badge { background: #fff; color: var(--tp); box-shadow: inset 0 0 0 3px var(--tp), 0 0 0 3px #fff; }
.masthead__meta .meta .mail { color: inherit; }
.masthead__meta .meta b { display: block; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1d1d1d; font-size: .74rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; margin: 18px 0 0; padding: 0; list-style: none; font: 600 .8rem/1.3 var(--sans); color: var(--ink-3); }
.crumbs li { white-space: nowrap; }
/* the wave's tint band reaches 0.93 of its height (41 of 44 mm) a quarter of the way across: the crumbs start at 0.95 or lower */
.masthead__in > div:first-child::before { content: ""; float: left; width: 0; height: calc(clamp(150px, 21vw, 270px) * .95 - clamp(40px, 6.6vw, 88px)); }
.masthead .crumbs { clear: left; }
.crumbs li:not(:last-child)::after { content: "·"; margin: 0 .7em; color: var(--ink-4); }
@media (max-width: 640px) {
  .masthead { padding-top: 66px; }
  .masthead__in > div:first-child::before { height: calc(150px * .95 - 66px); }
  .masthead__in { grid-template-columns: 1fr; }
  /* the number sits on the ribbons at the top right, like the PDF's QR panel; the title sits on the wave */
  .masthead__meta { position: absolute; top: -56px; right: var(--gutter); }
  .masthead__meta .badge { --s: 2.6rem; }
  .masthead__meta .meta { display: none; }
}

/* ---------- Lead row: headline callout + the ask ------------------------- */
.lead { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: stretch; }
@media (max-width: 860px) { .lead { grid-template-columns: 1fr; } }

.callout {
  position: relative; border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px);
  background: var(--tp); color: #fff; display: flex; flex-direction: column; gap: 14px;
}
.callout .label { color: #fff; margin: 0; padding-right: 48px; }
.callout__text {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 2.55vw, 2.05rem); line-height: 1.22; letter-spacing: -.003em; margin: 0;
}
.callout__source { margin-top: auto; font-size: .78rem; text-align: right; }   /* opaque: at 90 % white it fell under 4.5:1 on six sheets */
.callout .sharebtn { position: absolute; top: 14px; right: 14px; color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); }
.callout .sharebtn:hover { background: rgba(255, 255, 255, .2); }

.askcard {
  border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px);
  background: var(--tp-tint); display: flex; flex-direction: column; gap: 10px;
}
.askcard .label { margin: 0; }
/* Labels on the 10 % tints take the darker ink: in the sheet colour, as the PDF prints them, six sheets fall just under
   4.5:1 (open decision 10 in docs/HANDOFF.md; the screen exceeds the print) */
.askcard, .box { --label-ink: var(--tp-ink); }
.askcard__lead { font: 600 1rem/1.35 var(--sans); color: var(--ink-strong); margin: 0; }
.askcard__text { font-family: var(--serif); font-weight: 500; font-size: clamp(1.55rem, 2.5vw, 2.05rem); line-height: 1.16; color: var(--ink-strong); margin: 0; }
.askcard__more { margin-top: 10px; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.askcard { justify-content: center; }
/* the PDF's first row: the headline box and the photo side by side, top-aligned, in two equal columns
   (241 : 246.6 pt); the ask follows as a strip across both */
.lead--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lead--photo .photo { align-self: start; }
.askcard--strip { margin-top: clamp(16px, 2.4vw, 28px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px clamp(20px, 3vw, 40px); }
.askcard__body { display: flex; flex-direction: column; gap: 10px; max-width: 48rem; }
.askcard--strip .askcard__more { margin: 0; padding: 0; justify-content: flex-end; }
@media (max-width: 860px) {
  .lead--photo { grid-template-columns: 1fr; }
  .askcard--strip { grid-template-columns: 1fr; }
  .askcard--strip .askcard__more { justify-content: flex-start; }
}

/* ---------- Prose (verbatim narrative) ------------------------------------ */
.prose { max-width: var(--read); }
.prose > p { margin: 0 0 1em; }
.prose > p:last-child { margin-bottom: 0; }
.prose > .box, .prose > .pullquote { margin: 1.6em 0; }
.prose > h3 { font: 700 .8rem/1.3 var(--sans); letter-spacing: .065em; text-transform: uppercase; color: var(--tp); margin-top: 2.1em; }
.prose > h3 + p { margin-top: .6em; }
.prose .lede { font-size: 1.16rem; line-height: 1.55; color: var(--ink-strong); }
/* The argument ("Why …") is set in the serif, as in the PDF from v5.15; the case study stays in the sans.
   Cormorant runs small, so it is set larger than the sans body (11 pt against 9.5 pt in the PDF). */
#why .prose > p { font-family: var(--serif); font-weight: 500; font-size: clamp(1.19rem, 1.1rem + .3vw, 1.3rem); line-height: 1.4; font-variant-numeric: lining-nums; }
#why .prose > p strong { font-weight: 650; }
#case .prose > p:not(.lede) { color: #1b1b1b; }   /* the PDF's case-study text (deck: Text #1B1B1B); the argument and the boxes stay #333 */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.split--text-left { grid-template-columns: minmax(0, 41rem) minmax(0, 1fr); }
@media (max-width: 980px) { .split, .split--text-left { grid-template-columns: 1fr; } }
.sticky { position: sticky; top: 84px; }
@media (max-width: 980px) { .sticky { position: static; } }

/* ---------- Boxes: tinted lists and tables -------------------------------- */
.box { background: var(--tp-tint); border-radius: var(--r-md); padding: clamp(18px, 2.4vw, 26px); max-width: var(--read); }
.box .label { margin-bottom: .8rem; }
.box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.box li { position: relative; padding-left: 1.35rem; font-size: .97rem; line-height: 1.5; }
.box li::before { content: ""; position: absolute; left: .15rem; top: .64em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }   /* the PDF's plain bullets */
.box--check li { padding-left: 1.85rem; }
.box--check li::before {
  left: 0; top: .2em; width: 1.15rem; height: 1.15rem; border-radius: 4px; background: #fff; border: 1.5px solid var(--tp-mid);
}
.box--check li.is-done::before { background: var(--tp) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; border-color: var(--tp); }
.box table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.42; }
.box th { text-align: left; font-weight: 700; color: var(--ink-strong); padding: 0 12px 8px 0; border-bottom: 1px solid var(--tp-line); }
.box td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--tp-line); vertical-align: top; }
.box tr:last-child td { border-bottom: 0; }

/* ---------- Photo ---------------------------------------------------------- */
.photo { margin: 0; }
/* the PDF's photo frame: 246.6 × 172.9 pt (the photo whole) with 6.24 pt corners, which scale with the frame */
.photo img { width: 100%; border-radius: 2.53% / 3.61%; aspect-ratio: 685 / 480; object-fit: cover; background: var(--paper-3); }
.prose > .photo { margin: 1.8em 0 2em; }
.photo figcaption { margin-top: .6rem; font: italic 400 .82rem/1.45 var(--sans); color: var(--ink-2); max-width: 40rem; }

/* ---------- Generic card --------------------------------------------------- */
.card { position: relative; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.card-grid { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); }

/* ---------- Talking-point card (hub) --------------------------------------- */
.tpcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--card-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--card-shadow); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.tpcard:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-lift); }
.tpcard__wave { position: relative; height: 66px; }
.tpcard__wave svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tpcard__wave path { mix-blend-mode: multiply; }
.tpcard__top { position: absolute; inset: 12px 12px auto 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink-2); font: 700 .64rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tpcard__body { display: flex; flex-direction: column; flex: 1; padding: 4px 20px 18px; }
.tpcard__title { font-family: var(--serif); font-weight: 500; font-size: 1.62rem; line-height: 1.04; letter-spacing: -.006em; color: var(--ink-strong); margin: 0; }
.tpcard__title a { color: inherit; text-decoration: none; }
.tpcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tpcard__sub { margin: .4rem 0 0; font: 400 .86rem/1.32 var(--sans); color: var(--ink-3); }
.tpcard__rule { border: 0; border-top: 1px solid var(--rule); margin: 14px 0 10px; }
/* display figures: the PDF's Cormorant Garamond SemiBold with old-style numerals, in the talking point's colour */
.tpcard__value { font: 600 clamp(2.3rem, 3.5vw, 2.8rem)/1 var(--serif); letter-spacing: 0; color: var(--tp); }
.tpcard__text { margin: .45rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.tpcard__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tpcard__open { font: 700 .86rem/1 var(--sans); color: var(--tp-ink); }
.tpcard .sharebtn { position: relative; z-index: 2; }
/* the talking point's persistent link, as the PDF prints it at the foot of its pages; above the card's own link */
.tpcard__hdl { margin: auto 0 0; padding-top: 14px; font: 500 .72rem/1.3 var(--sans); letter-spacing: -.005em; overflow-wrap: anywhere; }
.tpcard__hdl a { position: relative; z-index: 2; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: .22em; }
.tpcard__hdl a:hover { color: var(--tp-ink); text-decoration-color: currentColor; }
.tpcard__hdl + .tpcard__foot { margin-top: 0; padding-top: 10px; }

/* ---------- Proof cards ----------------------------------------------------- */
.proofs { display: grid; gap: clamp(12px, 1.8vw, 20px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
/* the PDF's at-a-glance box: figures on a panel in the talking point's tint, as a card: a fine line and a subtle shadow */
.proof { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 24px 22px 18px; background: var(--tp-tint); border: 1px solid var(--card-line); border-radius: var(--r-sm); box-shadow: var(--card-shadow); }
#proofs.band { background: var(--paper); }
.box .proof { background: #fff; }
.proof--flat { border: 0; box-shadow: none; }   /* figures inside a text box stay flat */
.proof__value { font: 600 clamp(2.6rem, 4vw, 3.4rem)/.95 var(--serif); letter-spacing: 0; color: var(--tp); padding-right: 46px; white-space: nowrap; }
.proof__value--long { font-size: clamp(2.15rem, 3.1vw, 2.75rem); }
.proof__unit, .tpcard__unit { font-size: .56em; letter-spacing: 0; white-space: nowrap; }
.proof__unit { color: var(--tp-ink); }   /* below 24 px on phones, so it needs 4.5:1 on the tint, unlike the figure */
.proof__qual, .tpcard__qual { display: block; margin-bottom: 2px; font: 600 .86rem/1.2 var(--sans); letter-spacing: 0; color: var(--ink-3); }
@media (min-width: 900px) {
  .proofs[data-n="6"], .proofs[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proofs[data-n="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* three, then two wider */
  .proofs[data-n="5"] > * { grid-column: span 2; }
  .proofs[data-n="5"] > :nth-child(n+4) { grid-column: span 3; }
  .proofs[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}
.proof__text { font-size: 1.02rem; line-height: 1.45; color: var(--ink); margin: 0; }
.proof__src { margin-top: auto; padding-top: .45rem; font-size: .78rem; color: var(--ink-3); }
.proof .sharebtn { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, .7); }

/* ---------- Share button + toast ------------------------------------------ */
.sharebtn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--rule-2); background: #fff; color: var(--ink-2); padding: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sharebtn:hover { background: var(--tp); border-color: var(--tp); color: #fff; }
.sharebtn svg { width: 15px; height: 15px; }

.sharemenu {
  position: fixed; z-index: 80; width: 264px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto;
  padding: 6px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-lift);
}
.sharemenu[hidden] { display: none; }
.sharemenu__preview { display: block; width: 216px; height: 270px; max-width: 100%; margin: 0 auto 6px; border-radius: 10px; border: 1px solid var(--rule); }
.sharemenu button, .sharemenu a {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px;
  background: none; color: var(--ink-strong); font: 600 .9rem/1.2 var(--sans); text-decoration: none; text-align: left;
}
.sharemenu button:hover, .sharemenu a:hover { background: var(--paper-2); }
.sharemenu svg { width: 16px; height: 16px; color: var(--tp); flex: none; }
.sharemenu__note { padding: 8px 12px 6px; font-size: .74rem; line-height: 1.4; color: var(--ink-3); border-top: 1px solid var(--rule); margin-top: 4px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, 12px); opacity: 0;
  background: #1d1d1f; color: #fff; padding: 11px 16px; border-radius: 12px; font: 600 .88rem/1.3 var(--sans);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); pointer-events: none; max-width: calc(100vw - 32px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Buttons and chips --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--rule-2); background: #fff; color: var(--ink-strong);
  font: 600 .9rem/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { border-color: var(--ink-3); }
.btn svg { width: 16px; height: 16px; }
.btn--solid { background: var(--tp); border-color: var(--tp); color: #fff; }
.btn--solid:hover { background: var(--tp-ink); border-color: var(--tp-ink); }
.btn--ghost-white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--ghost-white:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--rule-2); background: #fff; color: var(--ink-2); font: 600 .8rem/1 var(--sans);
  text-decoration: none; white-space: nowrap;
}
button.chip:hover, a.chip:hover { border-color: var(--ink-3); color: var(--ink-strong); }
.chip[aria-pressed="true"], .chip[aria-pressed="true"]:hover { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }
@media (hover: none) { button.chip:hover:not([aria-pressed="true"]) { border-color: var(--rule-2); color: var(--ink-2); } }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--tp)); flex: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Pull quote ------------------------------------------------------ */
.pullquote { margin: 0; padding: 4px 0 4px clamp(18px, 2.4vw, 28px); border-left: 3px solid var(--tp); max-width: 44rem; }
.pullquote p { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.45rem, 2.6vw, 2.05rem); line-height: 1.24; color: var(--tp); margin: 0; }
.pullquote cite { display: block; margin-top: .9rem; font: 400 .84rem/1.45 var(--sans); font-style: normal; color: var(--ink-2); }

/* ---------- Opportunity for action (full-bleed colour band) --------------- */
.opportunity { background: var(--tp); color: #fff; padding-block: clamp(48px, 7vw, 92px); }
.opportunity .label { color: #fff; }
.opportunity__lead { font: 600 1.05rem/1.4 var(--sans); margin: 0 0 1rem; color: rgba(255, 255, 255, .95); }
.opportunity__ask { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 2.85rem); line-height: 1.14; letter-spacing: -.006em; margin: 0; max-width: 24em; color: #fff; }
.opportunity__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; }
.today { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(0, 0, 0, .2); font: 600 .8rem/1.2 var(--sans); white-space: nowrap; }
.today::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
@media (max-width: 760px) { .opportunity__head { grid-template-columns: 1fr; } .today { justify-self: start; } }

.milestones { list-style: none; padding: 0; margin: clamp(30px, 4.5vw, 48px) 0 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; counter-reset: ms; }
.milestones li { position: relative; padding: 0 18px 0 0; }
.milestones li::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 2px; background: rgba(255, 255, 255, .45); }
/* the PDF's roundel line: the column colour with 45 % white, mixed in Display P3 as in Pages (deck slides 3 and 7); exact for all 12 sheets.
   In @supports because a var() inside the declaration defeats the usual two-line fallback: an unsupported color-mix() would leave no line at all */
@supports (background: color-mix(in display-p3, #000 55%, #fff)) { .milestones li::before { background: color-mix(in display-p3, var(--tp) 55%, #fff); } }
.milestones li:last-child::before { right: auto; width: 36px; }
.ms__num { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--tp); font: 700 1.05rem/1 var(--sans); }
/* the dates in white and the text in the PDF's #f3f8fd: the PDF's 82 % and 92 % white fall under 4.5:1 on several sheets */
.ms__when { display: block; margin-top: 16px; font: 700 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ms__title { display: block; margin-top: 4px; font: 700 1.15rem/1.25 var(--sans); color: #fff; }
.ms__text { margin: 6px 0 0; font-size: .93rem; line-height: 1.5; color: #f3f8fd; }
@media (max-width: 860px) {
  .milestones { grid-template-columns: 1fr; gap: 26px; }
  .milestones li { padding: 0 0 0 54px; }
  .milestones li::before { left: 17px; right: auto; top: 36px; bottom: -26px; width: 2px; height: auto; }
  .milestones li:last-child::before { display: none; }
  .ms__num { position: absolute; left: 0; top: 0; }
  .ms__when { margin-top: 2px; }
}
.continue { margin-top: clamp(34px, 5vw, 52px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .45); max-width: 44rem; }
@supports (border-color: color-mix(in display-p3, #000 55%, #fff)) { .continue { border-top-color: color-mix(in display-p3, var(--tp) 55%, #fff); } }   /* the PDF's rule above it: the roundel line's colour */
.continue .label { margin-bottom: .5rem; letter-spacing: .11em; }
.opportunity .label, .refbox .label { letter-spacing: .11em; }
.continue p:not(.label) { font-style: italic; font-size: 1.02rem; line-height: 1.55; margin: 0; color: rgba(255, 255, 255, .95); }

/* Connector variant: "The opportunity" box (TP13–TP15) */
/* the PDF's opportunity box on the connector talking points: one column wide, small corners */
.oppbox { border-radius: var(--r-md); background: var(--tp); color: #fff; padding: clamp(24px, 3.4vw, 40px); max-width: var(--read); }
.oppbox .label { color: #fff; }
.oppbox__ask { font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.2; margin: 0; }
.oppbox__continue { margin: 1.1rem 0 0; font-style: italic; font-size: .98rem; line-height: 1.55; color: rgba(255, 255, 255, .94); }

/* ---------- Atlas (equal tiles, after the Commonwealth-Atlas-Tiles slides) - */
.atlas { --tile-s: 40px; --gap: 5px; position: relative; }
.atlas__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.atlas__stage { position: relative; overflow: hidden; }
/* Measured while their classes change, so they never take the reduced-motion 1 ms transition (02-base.css) */
.atlas__body, .atlas__main, .atlas__stage { transition: none !important; }
/* The periodic table, the first view: a card with the caption of the President's v2 slide 1 */
.atlas__stage.atlas__stage--compact { margin: 0; padding: clamp(12px, 2.2vw, 22px) clamp(12px, 2.2vw, 22px) clamp(10px, 1.6vw, 16px); background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.atlas__table { width: max-content; max-width: 100%; margin-inline: auto; }
.atlas__caption { width: 0; min-width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: clamp(10px, 1.6vw, 16px) 0 0; }   /* as wide as the table, never wider */
.atlas__ctitle { font: 500 clamp(1.15rem, 1rem + .5vw, 1.4rem)/1.15 var(--serif); color: var(--ink-strong); }
.atlas__cnote { margin-left: auto; text-align: right; font-size: .74rem; line-height: 1.4; color: var(--ink-3); }   /* at the right, on its own line where both do not fit */
.atlas__grid { position: relative; display: grid; gap: var(--gap); grid-template-columns: repeat(var(--cols), var(--tile-s)); grid-auto-rows: var(--tile-s); width: max-content; margin-inline: auto; }
.tile {
  position: relative; display: grid; place-items: center; width: var(--tile-s); height: var(--tile-s); padding: 0;
  border-radius: 7px; border: 1px solid var(--tile-line); background: var(--tile); color: var(--tile-ink);
  font: 700 calc(var(--tile-s) * .27)/1 var(--sans); letter-spacing: .02em;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.tile:hover { border-color: var(--ink-3); }
.tile.is-small::after { content: ""; position: absolute; inset: 3px; border-radius: 5px; border: 1.5px dashed currentColor; opacity: .55; }
.tile.is-on { background: var(--c, var(--tp)); border-color: var(--c, var(--tp)); color: #fff; }
.tile.is-soft { background: var(--tp-soft); border-color: var(--tp-line); color: var(--tp-ink); }
.tile.is-dim { opacity: .38; }
.tile[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink-strong); z-index: 2; }
/* Forced colours (Windows High Contrast) drop the fills that carry the atlas's meaning: there, pressed buttons and lit tiles
   take the system highlight (forced-color-adjust: none keeps their text off the Canvas backplate; their focus ring goes back
   to the system colour), and the pinned tile, whose box-shadow is dropped, a thick border that leaves the focus ring free */
@media (forced-colors: active) {
  .atlas .chip[aria-pressed="true"], .atlas .tile.is-on { forced-color-adjust: none; background: Highlight !important; border-color: Highlight !important; color: HighlightText !important; outline-color: Highlight; }
  .atlas .chip--tp[aria-pressed="true"] .badge { background: HighlightText !important; color: Highlight !important; }
  .atlas .atlas__legend i.on, .atlas .atlas__legend .ramp i { forced-color-adjust: none; background: Highlight !important; border-color: Highlight !important; }
  .atlas .tile[aria-pressed="true"] { border: 3px solid CanvasText !important; }
}
.atlas__grid--regions .tile { font-size: max(10px, calc(var(--tile-s) * .27)); }   /* 27 columns: keep codes legible */
.atlas__region { position: absolute; font: 700 .7rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; pointer-events: none; }
.atlas__region b { font-weight: 500; letter-spacing: .02em; margin-left: .35em; color: var(--ink-4); }
.atlas__stack { display: grid; gap: 18px; }
.atlas__block .atlas__blocklabel { font: 700 .7rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.atlas__block .atlas__grid { margin-inline: 0; }
.atlas__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: .78rem; color: var(--ink-3); }
.atlas__legend span { display: inline-flex; align-items: center; gap: 6px; }
.atlas__legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--tile-line); background: var(--tile); }
.atlas__legend i.on { background: var(--tp); border-color: var(--tp); }
.atlas__legend .ramp { gap: 3px; }
.atlas__legend .ramp i { width: 18px; border-radius: 3px; }
.atlas__legend .ramp i:first-of-type { margin-left: 5px; }
.atlas__legend .ramp i:last-of-type { margin-right: 5px; }
.atlas__legend i.dot { width: auto; height: auto; border: 0; background: none; }
.atlas__legend i.dot { width: 14px; height: 14px; border: 1.5px dashed var(--ink-3); border-radius: 4px; background: none; }
.atlas__legend i.dot::before { content: none; }
.atlas__info { margin-top: 14px; min-height: 3.2em; padding: 14px 16px; border-radius: var(--r-sm); background: var(--paper-2); font-size: .92rem; line-height: 1.5; }
.atlas__info b { color: var(--ink-strong); }
.atlas__info .roles { margin: .35rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.atlas__info .roles li { display: flex; gap: 8px; align-items: baseline; }
.atlas__info .roles .badge { --s: 1.35rem; box-shadow: none; font-size: .62rem; transform: translateY(2px); }

.places { display: grid; gap: clamp(24px, 3.4vw, 40px); }
.placelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(20px, 3vw, 36px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); border-top: 1px solid var(--rule); }
.placelist li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.placelist .code { font: 700 .74rem/1.9 var(--sans); letter-spacing: .04em; color: var(--tp-ink); }
.placelist b { display: block; font-weight: 600; color: var(--ink-strong); font-size: .95rem; }
.placelist span { display: block; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }

/* ---------- Story cards (COL newsroom) ----------------------------------- */
.stories { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.story { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.story:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.story__img { aspect-ratio: 16 / 9; background: var(--paper-3); overflow: hidden; border-top: 3px solid var(--c, var(--tp)); }
.story__img img { width: 100%; height: 100%; object-fit: cover; }
.story__body { display: flex; flex-direction: column; gap: .55rem; padding: 16px 18px 18px; flex: 1; }
.story__date { font: 600 .76rem/1 var(--sans); color: var(--ink-3); }
.story__title { font-family: var(--serif); font-weight: 600; font-size: 1.32rem; line-height: 1.14; color: var(--ink-strong); margin: 0; }
.story__title a { color: inherit; text-decoration: none; }
.story__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.story__text { font-size: .88rem; line-height: 1.48; color: var(--ink-2); margin: 0; }
.story__quote { margin: .2rem 0 0; padding-left: 12px; border-left: 2px solid var(--c, var(--tp)); font-style: italic; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.story__tags { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 2; }
.story__tags .chip { min-height: 26px; font-size: .74rem; padding: 0 10px; }

/* ---------- Connections ---------------------------------------------------- */
.tplinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tplink { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink-strong); }
.tplink:hover { background: var(--paper-2); }
.tplink .badge { --s: 2.3rem; }
.tplink .t b { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.32rem; line-height: 1.1; }
.tplink .t span { display: block; font-size: .82rem; color: var(--ink-2); margin-top: 2px; }

/* ---------- References ----------------------------------------------------- */
.refs { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; max-width: 52rem; }
.refs li { padding-left: 1.6em; text-indent: -1.6em; font-size: .86rem; line-height: 1.5; color: #454545; overflow-wrap: anywhere; }
.refs a { color: var(--link); }   /* the PDF's link blue */
.refs--extra li { color: var(--ink-3); }

/* ---------- Footer band ---------------------------------------------------- */
.sitefoot { background: var(--tp); color: #fff; }
.sitefoot__in { display: grid; grid-template-columns: auto 1fr auto; gap: 20px 32px; align-items: center; padding-block: 26px; }
.sitefoot img.logo { width: 74px; height: auto; }
.sitefoot__mid { font: 400 .86rem/1.5 var(--sans); }
.sitefoot__mid b { font-weight: 700; letter-spacing: .02em; }
.sitefoot__mid a { color: #fff; }
.sitefoot__nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sitefoot .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.sitefoot .btn:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.sitefoot__note { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .28); padding-top: 14px; font-size: .74rem; line-height: 1.5; color: #fff; }
@media (max-width: 760px) { .sitefoot__in { grid-template-columns: auto 1fr; } .sitefoot__nav { grid-column: 1 / -1; justify-content: flex-start; } }

/* ---------- Partner mark ---------------------------------------------------- */
.partner { display: inline-flex; flex-direction: column; align-items: flex-start; justify-self: start; gap: 6px; font-size: .74rem; color: var(--ink-2); }
.partner img { height: 46px; width: auto; max-width: 220px; object-fit: contain; }
.partner--stacked img { height: auto; width: 150px; max-width: 100%; }

/* ---------- Asides, milestone chips ---------------------------------------- */
.figs { display: grid; gap: clamp(26px, 3.4vw, 40px); align-content: start; min-width: 0; }
.figs > * { min-width: 0; }
.split > * { min-width: 0; }
.figs .figure { margin: 0; }
.figs .photo + .figure { margin-top: 6px; }
.figs .partner:not(.partner--stacked) img { height: 54px; }
.figs .partner--stacked img { width: 116px; }
.ms__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mschip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); color: #fff; font: 600 .74rem/1 var(--sans); text-decoration: none; }
a.mschip:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
a.mschip::after { content: "→"; margin-left: 5px; opacity: .8; }
.placelist em.ref { font-style: italic; color: var(--ink-3); font-size: .8rem; }   /* --ink-4 is 4.2:1 on the warm band */

/* ---------- References: one tap away ---------------------------------------- */
.refbox { border-top: 1px solid var(--rule); padding-top: 18px; }
.refbox summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; cursor: pointer; list-style: none; }
.refbox summary::-webkit-details-marker { display: none; }
.refbox summary .label { flex-basis: 100%; color: var(--ink); }
.refbox summary h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3.2vw, 2.2rem); line-height: 1.1; }
.refbox summary h2 .muted { font-family: var(--sans); font-size: .9rem; font-weight: 500; }
.refbox__hint { margin-left: auto; font: 600 .84rem/1 var(--sans); color: var(--tp-ink); text-decoration: underline; text-underline-offset: .2em; }
.refbox[open] .refbox__hint { font-size: 0; }
.refbox[open] .refbox__hint::after { content: "Hide the sources"; font-size: .84rem; }
.refbox .refs { margin-top: 14px; }
.asklink { display: inline-flex; align-items: center; gap: 5px; color: var(--tp-ink); text-decoration: none; }
.asklink svg { width: 13px; height: 13px; }
.asklink:hover { text-decoration: underline; }

/* ---------- Phones: compact proofs, swipeable stories --------------------- */
@media (max-width: 560px) {
  .proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .proofs[data-n="5"] > :last-child, .proofs[data-n="3"] > :last-child { grid-column: 1 / -1; }
  .proof { padding: 14px 13px 12px; gap: .35rem; }
  .proof__value { font-size: 2.15rem; padding-right: 30px; }
  .proof__value--long { font-size: 1.7rem; }
  .proof__text { font-size: .88rem; line-height: 1.4; }
  .proof__src { font-size: .72rem; }
  .proof .sharebtn { width: 28px; height: 28px; top: 8px; right: 8px; }
  .proof .sharebtn svg { width: 13px; height: 13px; }
  .tp-page .stories { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .tp-page .stories > .story { scroll-snap-align: start; }
  .tp-page .stories > .story:hover { transform: none; }
}
.prose .is-target { background: color-mix(in oklab, var(--tp) 13%, white); box-shadow: 0 0 0 8px color-mix(in oklab, var(--tp) 13%, white); border-radius: 4px; transition: background 1.2s var(--ease), box-shadow 1.2s var(--ease); }
.prose .is-target.is-faded { background: transparent; box-shadow: 0 0 0 8px transparent; }
.story__art { position: relative; width: 100%; height: 100%; background: #fff; }
.story__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.story__art svg path { mix-blend-mode: multiply; }
.story__art span { position: absolute; left: 16px; bottom: 12px; font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* Touch: comfortable targets for a phone-first, senior audience */
@media (pointer: coarse) {
  .chip { min-height: 38px; }
  .story__tags .chip { min-height: 34px; }
  .sharebtn { width: 38px; height: 38px; }
  .proof .sharebtn { width: 34px; height: 34px; }
}
.placelist li.multi .code { line-height: 1.5; }
.atlas__key { margin: 10px 0 0; text-align: center; font-size: .78rem; color: var(--ink-3); }

/* Narrow screens: each aside follows the paragraph it was written after */
@media (max-width: 980px) {
  .split--flow { display: flex; flex-direction: column; gap: 0; }
  .split--flow > .prose, .split--flow > .figs { display: contents; }
  .split--flow > .prose > *, .split--flow > .figs > * { order: var(--o, 0); }
  .split--flow > .figs > * { margin: 1.4em 0 1.8em; max-width: 600px; }
  .split--flow > .figs > .figs__lead { max-width: 640px; }
}
/* Desktop: when the text is shorter than its charts, it travels beside them */
@media (min-width: 981px) { .split.is-sticky > .prose { position: sticky; top: 84px; align-self: start; } }
.figs__lead { display: grid; gap: 18px; }
/* Milestone chips without a link are plain tags, not buttons */
span.mschip { border-color: transparent; padding: 0 6px 0 0; opacity: .85; }
.atlas__stage { padding: 6px; margin: -6px; }
.proof__kind { display: inline-block; margin-right: .5em; padding: 1px 6px; border-radius: 999px; background: #fff; color: var(--ink-2); font: 700 .62rem/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }

/* 04-charts.css */
/* ==========================================================================
   Charts — FT / Economist conventions in the COL palette
   short colour tag · left-aligned title + subtitle · hairline grid ·
   one highlight colour + greys · direct labels · source line · table twin
   ========================================================================== */

.figure { margin: clamp(26px, 4vw, 40px) 0; max-width: 56rem; }
.figure--wide { max-width: none; }
.figure--text { max-width: var(--read); }

.chart { position: relative; }
.chart__head { margin-bottom: 14px; }
.chart__head::before { content: ""; display: block; width: 34px; height: 4px; background: var(--tp); margin-bottom: 12px; }
.chart__title { font: 600 1.08rem/1.32 var(--sans); color: var(--ink-strong); margin: 0; max-width: 40rem; }
.chart__sub { font: 400 .9rem/1.42 var(--sans); color: var(--ink-3); margin: 3px 0 0; max-width: 40rem; }
.chart__tag { display: inline-block; margin-left: .45em; padding: 1px 7px; border-radius: 999px; background: var(--paper-3); color: var(--ink-2); font: 700 .6875rem/1.6 var(--sans); letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.chart__plot { position: relative; width: 100%; }
.chart__plot svg { width: 100%; height: auto; overflow: visible; }
.chart__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); }
.chart__src { font: 400 .76rem/1.45 var(--sans); color: var(--ink-4); max-width: 44rem; }
.chart__src a { color: inherit; }
.chart__toggle { border: 0; background: none; padding: 8px 0; min-height: 32px; font: 600 .76rem/1.4 var(--sans); color: var(--tp-ink); text-decoration: underline; text-underline-offset: .2em; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; padding: 0; list-style: none; font: 500 .8rem/1.3 var(--sans); color: var(--ink-2); }
.chart__legend li { display: inline-flex; align-items: center; gap: 7px; }
.chart__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.chart__legend i.line { height: 3px; border-radius: 2px; width: 16px; }
.chart__legend i.dash { height: 0; width: 16px; border-top: 2px dashed var(--c); background: none; border-radius: 0; }
.chart__legend i.dot { width: 11px; height: 11px; border-radius: 50%; }

/* SVG furniture */
.chart .grid line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart .tick text, .chart .axis text { font: 400 12px/1 var(--sans); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .cat text { font: 500 13px/1.2 var(--sans); fill: var(--chart-ink); }
.chart .val { font: 600 13px/1 var(--sans); fill: var(--chart-ink); font-variant-numeric: tabular-nums; }
.chart .val--strong { font-weight: 700; fill: var(--ink-strong); }
.chart .val--in { fill: #fff; }
.chart .note { font: italic 400 12px/1.3 var(--sans); fill: var(--ink-3); }
.chart .ann line, .chart .ann path { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.chart .threshold { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .threshold-label { font: 600 12px/1 var(--sans); fill: var(--red); }
.chart .mark { transition: opacity var(--t-fast); }
.chart .is-faded .mark:not(.is-hot) { opacity: .35; }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:focus { outline: none; }
.chart .hit:focus-visible { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart .mark.is-hot { filter: brightness(1.08); }
/* Value labels keep a paper halo so gridlines and threshold lines never strike through them */
.chart .val:not(.val--in), .chart .threshold-label, .chart .note { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }

/* Draw-in once (bars grow from the baseline, lines draw) — then still */
.js .chart .grow { transform-box: fill-box; transform-origin: var(--origin, left center); transform: scaleX(0); }
.js .chart .grow-y { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(0); }
.js .chart.is-in .grow, .js .chart.is-in .grow-y { transform: none; transition: transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js .chart .fade { opacity: 0; }
.js .chart.is-in .fade { opacity: 1; transition: opacity 500ms var(--ease) 350ms; }
.js .chart .draw { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }
.js .chart.is-in .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .chart .grow, .js .chart .grow-y { transform: none; }
  .js .chart .fade { opacity: 1; }
  .js .chart .draw { stroke-dashoffset: 0; }
}

/* Tooltip — values lead, labels follow */
.tip {
  position: fixed; z-index: 70; pointer-events: none; min-width: 120px; max-width: 280px;
  padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--rule);
  box-shadow: var(--shadow-lift); font: 400 .8rem/1.35 var(--sans); color: var(--ink-2);
  opacity: 0; transform: translateY(4px); transition: opacity 120ms, transform 120ms;
}
.tip.is-on { opacity: 1; transform: none; }
.tip b { display: block; font: 700 1.02rem/1.2 var(--sans); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.tip .k { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; background: var(--c, var(--tp)); }

/* Data table twin */
.datatable { margin-top: 12px; overflow-x: auto; }
.datatable[hidden] { display: none; }
.datatable table { border-collapse: collapse; width: 100%; font: 400 .84rem/1.4 var(--sans); }
.datatable th, .datatable td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.datatable td.n, .datatable th.n { text-align: right; font-variant-numeric: tabular-nums; }
.datatable th { font-weight: 700; color: var(--ink-strong); }

/* Bespoke interactive diagrams share the same frame */
.viz { position: relative; }
.viz__stage { position: relative; }
.viz__controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.viz__panel { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--paper-2); font-size: .92rem; line-height: 1.5; min-height: 3em; }
.viz__panel b { color: var(--ink-strong); }
.stepper { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stepper .btn { min-height: 34px; padding: 0 12px; font-size: .84rem; }
.stepper .count { font: 600 .8rem/1 var(--sans); color: var(--ink-3); margin-left: 4px; }

.chart__views { margin: 0 0 12px; }
.chart__views .chip { min-height: 28px; font-size: .76rem; padding: 0 11px; }
.chart__note { margin: 6px 0 0; font: italic 400 .78rem/1.4 var(--sans); color: var(--ink-3); }
.chart .proj { stroke-dasharray: 4 4; }

/* Bespoke diagram furniture */
.viz__svg { width: 100%; }
.viz__svg svg { width: 100%; height: auto; overflow: visible; }
.viz .inst { cursor: pointer; outline: none; }
.viz .inst:focus-visible circle { stroke-width: 3; }
.orgs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.orgs .chip { white-space: normal; text-align: left; line-height: 1.25; padding: 6px 12px; }
.orgs .chip[aria-pressed="true"] .dot { background: #fff; }

/* 05-hero.css */
/* ---------- Hero: the PDF cover ------------------------------------------------
   As close to the PDF covers as a screen allows. Proportions are measured on the cover pages (595 pt wide) and
   kept relative to the width; small text keeps a legible size instead. Every photo cut starts right of the
   T-shirt's printed flag, which reads upside down.
   Phones and portrait screens: the v5.15 cover. A blue strip (48 pt), the photo band (2.03:1), then the panel:
   "Learning" (64 pt), "to accelerate in partnership" (half the size, stepped in), and, indented, Commonwealth of
   Learning / November 2026, the italic kicker, the email address and the DOI; the site's countdown and buttons
   follow; the caption bottom left and the CHOGM logo bottom right.
   Landscape screens from 900px: the v5.12 cover. Its photo (the same 1.55:1 crop, square corners) and the
   photo's reflection fading into the blue, beside the panel; the caption and the logo under the photo. The
   whole cover shows in the first screen. */
.hero {
  --bar: 59px;                       /* the sticky top bar: .topbar__in's 58px and its rule */
  --strip: min(8vw, 64px);           /* the blue strip above the photo: 48 of 595 pt */
  --h1: max(3rem, 10.75vw);          /* "Learning": 64 of 595 pt */
  --ind: 8.6vw;                      /* the text column starts 51 pt right of the title */
  position: relative; background: var(--col-blue); color: #fff; overflow: hidden; padding-top: var(--strip);
}
/* the v5.15 band: its own rows across the photo; a 2.03:1 box shows the PDF's crop, moved 2% right */
.hero__band { background: #0f5c9e; }
.hero__band picture { display: block; }
.hero__band img { display: block; width: 100%; height: auto; aspect-ratio: 2.027; object-fit: cover; object-position: 0% 50%; }
.hero__refl { display: none; }
.hero__panel { display: flex; flex-direction: column; padding-block: clamp(26px, 10.4vw, 64px) 0; }
.hero__panel > *, .hero__meta > * { min-width: 0; margin: 0; }
.hero__meta { display: contents; }
.hero h1 { order: 1; font-family: var(--serif); font-weight: 500; color: #fff; font-size: var(--h1); line-height: .86; letter-spacing: -.01em; margin-left: -.03em; }
/* half the title, stepped in 1.81 title-ems (3.57 of its own) where the line allows */
.hero__sub { display: block; margin: .45em 0 0 max(0px, min(3.57em, 100% - 10.8em)); font-size: calc(var(--h1) * .507); line-height: 1.08; letter-spacing: 0; }
.hero__org { order: 2; margin-top: clamp(22px, 9vw, 56px); padding-left: var(--ind); font: 600 1.05rem/1.3 var(--sans); }
.hero__org > span { display: block; }
.hero__kicker { order: 3; margin-top: clamp(12px, 3.9vw, 26px); padding-left: var(--ind); font: italic 500 clamp(1.02rem, 3.6vw, 1.4rem)/1.3 var(--serif); color: #fff; }
.hero__ids { order: 4; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 4vw, 30px); margin-top: clamp(14px, 4.7vw, 32px); padding-left: var(--ind); font: 500 .9rem/1.45 var(--sans); color: #fff; }
.hero__ids a { color: #fff; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hero__ids .mail { font: italic 500 1.15rem/1.3 var(--serif); }
.hero__clock { order: 5; margin-top: 24px; padding-left: var(--ind); }
.hero__ctas { order: 6; display: grid; gap: 10px; margin-top: 14px; padding-left: var(--ind); }
.hero__ctas .btn { min-height: 44px; }
.btn--white { background: #fff; color: var(--col-blue); border-color: #fff; }
.btn--white:hover { background: rgba(255, 255, 255, .9); }
/* the foot: the caption bottom left, the CHOGM logo bottom right (120 of 595 pt wide) */
.hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: end; padding-block: clamp(26px, 7vw, 48px) clamp(22px, 5vw, 40px); }
.hero__cap { margin: 0; max-width: 36rem; font: italic 400 .78rem/1.45 var(--sans); color: #fff; }
.hero__logo { width: clamp(64px, 18vw, 140px); height: auto; }
@media (min-width: 600px) {
  .hero__org { font-size: 1.15rem; }
  .hero__ids .mail { font-size: 1.3rem; }
  .hero__ctas { display: flex; flex-wrap: wrap; }
  .hero__ctas .btn { min-height: 40px; }   /* the site's button height (.btn has no vertical padding) */
  .hero__cap { font-size: .8rem; }
}

/* A phone on its side: the band takes what the panel leaves */
@media (min-width: 600px) and (max-width: 899px) and (min-aspect-ratio: 5/4) {
  .hero { --band-min: min(180px, 24vh); --h1: 4.5rem; --strip: 16px; --ind: 2.5rem; }
  .hero__fold { display: grid; grid-template-rows: minmax(var(--band-min), 1fr) auto; min-height: calc(100vh - var(--bar) - var(--strip)); }
  .hero__band { position: relative; }
  .hero__band img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 0% 12%; }
}

/* Laptops and desktops: the v5.12 cover, in a box up to 1320px wide with equal margins, as on the cover. The
   photo takes half the box, or less where it, at least 60px of its reflection and the caption row (--foot-h)
   would not fit the first screen; the reflection takes what is left, up to its own height (0.26 of the
   photo's width). The type gives way on short screens. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .hero {
    --edge: max(var(--gutter), (100vw - 1320px) / 2 + var(--gutter));
    --h1: clamp(4.25rem, 6.2vw, 5.6rem);
    --ind: calc(var(--h1) * .8);
    --vh: 100vh;
    --pad-t: clamp(24px, 6vh, 64px); --pad-b: clamp(14px, 3vh, 28px); --foot-h: 96px;
    --pw: min((min(100vw, 1320px) - 2 * var(--gutter)) * .5, (var(--vh) - var(--bar) - var(--pad-t) - var(--pad-b) - var(--foot-h) - 60px) * 1.5497);
    --rh: clamp(0px, var(--vh) - var(--bar) - var(--pad-t) - var(--pad-b) - var(--foot-h) - var(--pw) / 1.5497, var(--pw) * .2606);
    /* the photo and reflection rows are fixed, so a panel taller than them (narrow screens: the buttons in three
       rows) lengthens the caption row instead of opening a gap between the photo and its reflection */
    display: grid; grid-template-columns: minmax(0, 1fr) var(--pw); grid-template-rows: calc(var(--pw) / 1.5497) var(--rh) auto;
    grid-template-areas: "panel band" "panel refl" "panel foot"; column-gap: clamp(36px, 4.6vw, 72px); align-content: center;
    min-height: calc(var(--vh) - var(--bar)); padding: var(--pad-t) var(--edge) var(--pad-b);
  }
  .hero__fold { display: contents; }
  .hero__band { grid-area: band; background: none; }
  .hero__band img { aspect-ratio: 1.5497; object-position: 50% 50%; }   /* the v5.12 crop, whole */
  .hero__refl { display: block; grid-area: refl; height: var(--rh); overflow: hidden; }
  .hero__refl img { display: block; width: 100%; height: auto; }
  .hero__panel { grid-area: panel; align-self: center; max-width: none; margin: 0; padding: 0; }
  .hero__org { margin-top: min(var(--h1) * .84, 7vh); }
  .hero__kicker { margin-top: min(var(--h1) * .36, 2.6vh); font-size: 1.3rem; }
  .hero__ids { gap: min(var(--h1) * .3, 2vh); margin-top: min(var(--h1) * .44, 3.4vh); }
  .hero__clock { margin-top: min(var(--h1) * .44, 3vh); }
  .hero__ctas { margin-top: 12px; }
  .hero__foot { grid-area: foot; max-width: none; margin: 0; padding: 14px 0 0; }
  .hero__cap { max-width: none; }
  .hero__logo { width: clamp(72px, 6.4vw, 104px); }
}
@supports (height: 1svh) { @media (min-width: 900px) and (min-aspect-ratio: 5/4) { .hero { --vh: 100svh; } } }
/* the margins measured without a scrollbar, where container units exist */
@supports (width: 1cqw) { @media (min-width: 900px) and (min-aspect-ratio: 5/4) { .hero { container-type: inline-size; --edge: max(var(--gutter), (100cqw - 1320px) / 2 + var(--gutter)); } } }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-height: 760px) {
  .hero { --h1: 4.5rem; }
  .hero__org { font-size: 1.05rem; }
  .hero__kicker { font-size: 1.2rem; }
  .hero__ids .mail { font-size: 1.15rem; }
}

/* 05-hub.css */
/* ==========================================================================
   Hub (overview) — cover hero, card grid, ask, compass, evidence
   ========================================================================== */

/* Derived colour tokens follow a locally overridden --tp */
.tpcard, .story, .tplink, .dl, .compass__row, .result, .gaborone__list li, [data-tp-scope] {
  --tp-ink: color-mix(in oklab, var(--tp) 84%, black);
  --tp-soft: color-mix(in oklab, var(--tp) 12%, white);
  --tp-mid: color-mix(in oklab, var(--tp) 52%, white);
  --tp-line: color-mix(in oklab, var(--tp) 30%, white);
}

/* ---------- Actions to accelerate (index page) ---------------------------- */
.actions { position: relative; padding-top: clamp(50px, 6.8vw, 98px); }
.actions .waves { --wave-h: clamp(130px, 15.5vw, 225px); }   /* the title sits in the lime band, as in the PDF */
.actions .section-head { grid-template-rows: minmax(calc(clamp(130px, 15.5vw, 225px) * .95 - clamp(50px, 6.8vw, 98px) - .75rem), auto); }   /* the intro starts under the wave */
#h-actions { font-weight: 600; }
.section-head--wide { max-width: 58rem; }
.section-head--wide h2 { font-size: clamp(2.4rem, 5.4vw, 3.8rem); }
.section-head--wide p:not(.label) { font-size: 1.08rem; max-width: 52rem; color: var(--ink); }
.tpfilters { margin-top: 8px; }
.superset + .superset { margin-top: 10px; }
.superlabel { margin: clamp(30px, 4vw, 44px) 0 clamp(18px, 2.4vw, 26px); padding-top: 18px; border-top: 3px solid var(--rule-teal); text-align: center; font: 700 .8rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red-label); }
.tpgroup + .tpgroup { margin-top: clamp(24px, 3vw, 34px); }
.actions .card-grid { grid-template-columns: 1fr; }
@media (min-width: 350px) { .actions .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 760px) { .actions .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .actions .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .actions .tpcard__body { padding: 4px 16px 16px; } .actions .tpcard__title { font-size: 1.48rem; } .actions .tpcard__value { font-size: 2.05rem; } }
@media (min-width: 350px) and (max-width: 759px) {
  .actions .tpcard__wave { height: 54px; }
  .actions .tpcard__top { inset: 9px 9px auto 10px; }
  .actions .tpcard__top .pill { display: none; }
  .actions .tpcard__body { padding: 2px 12px 12px; }
  .actions .tpcard__title { font-size: 1.22rem; }
  .actions .tpcard__sub { font-size: .76rem; }
  .actions .tpcard__rule { margin: 10px 0 8px; }
  .actions .tpcard__value { font-size: 1.75rem; }
  .actions .tpcard__text { font-size: .76rem; }
  .actions .tpcard__foot { padding-top: 10px; }
  .actions .tpcard .sharebtn { width: 28px; height: 28px; }
}
@media (min-width: 350px) and (max-width: 389px) { .actions .tpcard__hdl { font-size: .64rem; letter-spacing: -.01em; } }   /* the handle on one line in the narrowest two columns */
.grouplabel { margin: 0 0 12px; font: 700 .78rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--col-blue); }
.tpcard[hidden], .tpgroup[hidden], .superset[hidden] { display: none; }

/* ---------- Ask the talking points ------------------------------------------ */
.ask { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .9fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .ask { grid-template-columns: minmax(0, 1fr); } }
.ask > *, .compass > *, .compass__main > *, .hero__in > * { min-width: 0; }
.askbox { display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 18px; background: #fff; border: 1px solid var(--rule-2); border-radius: 999px; box-shadow: var(--shadow-card); }
.askbox:focus-within { border-color: var(--col-blue); box-shadow: 0 0 0 3px rgba(19, 106, 182, .18); }
.askbox > svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.askbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 1.06rem/1.2 var(--sans); color: var(--ink-strong); }
.askbox input::-webkit-search-cancel-button { display: none; }
.ask__try { margin: 14px 0 0; }
.ask__try .chip { font-weight: 500; }
.where { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; height: 70px; margin: 20px 0 4px; align-items: end; }
.where span { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.where i { display: block; height: var(--h, 3px); min-height: 3px; border-radius: 3px 3px 0 0; background: var(--c); opacity: var(--o, .22); transition: height 400ms var(--ease), opacity 400ms var(--ease); }
.where b { display: block; margin-top: 4px; text-align: center; font: 600 .62rem/1 var(--sans); color: var(--ink-3); }
.results { display: grid; gap: 12px; margin-top: 18px; }
.result { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); }
.result .badge { --s: 2.2rem; grid-row: span 3; align-self: start; }
.result__meta { font: 700 .72rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tp-ink); }
.result__text { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--ink); }
.result__text mark { background: color-mix(in oklab, var(--tp) 16%, white); color: inherit; border-radius: 3px; padding: 0 2px; }
.result__links { display: flex; flex-wrap: wrap; gap: 14px; font: 600 .82rem/1.3 var(--sans); }
.result__links a { color: var(--tp-ink); }
.ask__note { padding: 14px 16px; border-radius: var(--r-sm); background: #fff; border: 1px dashed var(--rule-2); color: var(--ink-2); font-size: .95rem; }
.meter { padding: 18px 20px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); }
.meter dl { margin: 0; display: grid; gap: 10px; }
.meter dl div { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.meter dt { font: 700 .68rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.meter dd { margin: 0; font-size: .9rem; color: var(--ink-strong); }
.meter dd b { font: 700 1.15rem/1.2 var(--sans); }
.meter .tiny { margin: 12px 0 0; }

/* ---------- Atlas on the hub: talking-point buttons in the President's four groups ---------- */
.atlas__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 18px; }
.atlas__group { display: grid; align-content: start; gap: 6px; }
.atlas__group--all { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.atlas__glabel { margin: 0; font: 700 .66rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.atlas__group--all .atlas__glabel { font: 600 .92rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-strong); }
.atlas__gchips { display: grid; gap: 6px; }
.atlas__filters .chip { min-height: 32px; font-size: .76rem; }
.atlas__gchips .chip { justify-content: flex-start; }
/* the roundel carries the number in the talking point's colour; pressed, the whole button takes the colour */
.chip--tp { gap: 8px; padding: 0 12px 0 3px; }
.chip--tp .badge { --s: 26px; background: var(--c); font-size: 11px; }
button.chip--tp:hover { border-color: var(--c); }
.chip--tp[aria-pressed="true"], .chip--tp[aria-pressed="true"]:hover { background: var(--c); border-color: var(--c); color: #fff; }
.chip--tp[aria-pressed="true"] .badge { background: #fff; color: var(--c); }
@media (pointer: coarse) { .atlas__filters .chip { min-height: 38px; } }
/* Wide screens: the buttons beside the table in two columns, as on the slide (Skills | Instrument, Tech | Connectors) */
.atlas--side .atlas__body { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 28px; align-items: start; }
.atlas--side .atlas__main { grid-column: 1; grid-row: 1; }
.atlas--side .atlas__filters { grid-column: 2; grid-row: 1; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin: 0; }
.atlas--side .atlas__group:not(.atlas__group--all) { align-self: end; }   /* Instrument's four end level with Skills' five */

/* ---------- Stories filter --------------------------------------------------- */
.storyfilters { margin: 0 0 18px; }
.storyfilters .chip { min-height: 28px; font-size: .74rem; padding: 0 10px; }
.story[hidden] { display: none; }
.stories__more { margin: 22px 0 0; text-align: center; }

/* ---------- Compass ---------------------------------------------------------- */
.compass { display: grid; gap: clamp(20px, 3vw, 40px); }
.compass__main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 980px) { .compass__main { grid-template-columns: 1fr; } }
/* the bank: points left; a gauge (a thin progress line and, below 980 px, a chip naming the leader); below 980 px,
   where the rose is under the rows, a mini rose. Its height never changes: the count is taller than the gauge. */
.compass__bank { position: sticky; top: 70px; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 12px 16px; margin-bottom: 14px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
/* stuck under the top bar, the bank hides the rows in the gap above it */
.compass__bank::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: calc(100% + 1px); height: 12px; background: var(--paper-2); }
.compass__left { flex: none; font: 700 2.1rem/1 var(--sans); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.compass__left small { display: block; margin-top: 4px; font: 600 .72rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.compass__gauge { flex: 1; min-width: 0; display: grid; gap: 8px; }
.compass__progress { height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.compass__progress i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--col-blue); }
.compass__chip { display: none; height: 24px; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; font: 600 .8rem/1 var(--sans); color: var(--ink-2); }
.compass__chip .badge { --s: 1.4rem; font-size: .7rem; box-shadow: none; }
.compass__mini { display: none; flex: none; width: 48px; height: 48px; }
.compass__mini svg { display: block; width: 100%; height: 100%; }
@media (max-width: 980px) { .compass__chip { display: flex; } .compass__mini { display: block; } }
/* the hint, then the 15 rows in one white panel, divided by hairlines (media queries only, for older phones) */
.compass__howto { margin: 0 2px 10px; text-wrap: pretty; }
.compass__rows { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 2px 14px 4px; }
.compass__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 8px 0; }
.compass__row + .compass__row { border-top: 1px solid var(--rule); }
.compass__row .badge { --s: 1.75rem; font-size: .7rem; }
.compass__name { display: block; font: 600 .95rem/1.2 var(--sans); color: var(--ink-strong); }
.compass__subtitle { display: none; }
/* − n +: 44 px round buttons (never smaller, even at 320 px) around the number, which is a quiet text field */
.compass__ctl { display: flex; align-items: center; gap: 2px; }
/* a control reached with the keyboard stops below the sticky bank (top 70 px, 79 px tall), not just below the top bar:
   the margin adds to the page's 76 px scroll padding, so it lands at 160 px */
.compass__ctl > * { scroll-margin-top: 84px; scroll-margin-bottom: 12px; }
.compass__ctl button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--rule-2); background: #fff; font: 500 1.25rem/1 var(--sans); color: var(--ink-strong); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.compass__ctl button[disabled] { opacity: .35; cursor: not-allowed; }
@media (hover: hover) { .compass__ctl button:hover:not([disabled]) { background: var(--tp); border-color: var(--tp); color: #fff; } }
/* touch: a still pressed state, since the point moves on release */
@media (hover: none) { .compass__ctl button:active:not([disabled]) { background: var(--paper-3); border-color: var(--tp); } }
.compass__val { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: calc(3ch + 16px); height: 44px; padding: 0 6px; margin: 0; border: 1px solid transparent; border-bottom-color: var(--rule-2); border-radius: 8px 8px 0 0; background: transparent; text-align: center; font: 700 1.05rem/1 var(--sans); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.compass__val::placeholder { color: var(--ink-3); font-weight: 500; opacity: 1; }
.compass__val:focus::placeholder { color: transparent; }   /* the caret alone, not a crossed 0 */
@media (hover: hover) { .compass__val:hover { border-color: var(--rule-2); border-radius: 8px; } }
.compass__val:focus { outline: 0; border-color: var(--col-blue); border-radius: 8px; background: #fff; box-shadow: 0 0 0 3px rgba(19, 106, 182, .16); }
@media (min-width: 600px) { .compass__subtitle { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.35; color: var(--ink-3); } }
@media (max-width: 599px) { .compass__rows { padding: 2px 10px 4px; } .compass__row { gap: 0 8px; } }
.compass__stays { margin: 10px 2px 0; }
/* the side card: the rose, the heading, the top three and, at 100 points, the PDF's ask */
.compass__side { display: grid; gap: 16px; position: sticky; top: 70px; }
@media (max-width: 980px) { .compass__side { position: static; } }
.compass__card { padding: 18px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); }
.compass__cardlabel { margin: 0; color: var(--col-blue); }
.compass__top { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.compass__top li { display: flex; align-items: center; gap: 8px; }
.compass__top .badge { --s: 1.5rem; font-size: .7rem; box-shadow: none; }
.compass__toplabel { margin: 14px 0 6px; color: var(--ink-3); }
.compass__ask { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.compass__asklabel { margin: 0 0 6px; color: var(--ink-3); }
.compass__asktext { margin: 0 0 6px; font: 500 1.1rem/1.35 var(--serif); color: var(--ink-strong); }
.compass__asklink { display: inline-block; }
/* small text links get a thumb-sized target without moving anything */
.compass__asklink, .compass__clear .linkbtn { position: relative; }
.compass__asklink::after, .compass__clear .linkbtn::after { content: ""; position: absolute; inset: -10px -6px; }
.compass__note { margin: 14px 0 0; color: var(--ink-3); }
.compass__restart { margin-top: 12px; }
/* the rose: a polar-area dial, one 24° wedge per talking point, 01 at north, in the four headings' groups. Wedges are solid in their own colour;
   the ink needle's shaft lies under them and its head above, so it never covers data. Never the PDF red. */
.compass__dial { width: 100%; max-width: 380px; margin: 28px auto 16px; }   /* room above and below for the corner words (the President's tweak, 22 October 2026) */
/* beside the rows, the rose shrinks on short screens so the side card stays in view while the reader works down them */
@media (min-width: 981px) { .compass__dial { max-width: clamp(240px, calc(100vh - 590px), 380px); } }
.compass__dial svg { display: block; width: 100%; height: auto; }
/* the headings' short words in the rose's corners, nearest their wedges (the President's sketch, 22 October 2026);
   the heading the compass names in ink. Set in CSS pixels, so they keep their size however small the rose is drawn */
.compass__dial { position: relative; }
.compass__quad { position: absolute; font: italic 600 .8125rem/1 var(--sans); color: var(--col-blue); pointer-events: none; }
.compass__quad--nw { top: 0; left: 0; }
.compass__quad--ne { top: 0; right: 0; }
.compass__quad--sw { bottom: 0; left: 0; }
.compass__quad--se { bottom: 0; right: 0; }
.compass__quad.is-on { color: var(--ink-strong); }
/* narrow phones: a tighter card, and the dial takes 6 px of its padding each side (SVG text stays at 11 px or more);
   a tighter bank, so three tied badges and "tie" fit the chip at 320 px */
@media (max-width: 359px) {
  .compass__card { padding: 14px; }
  .compass__dial { width: calc(100% + 12px); margin-inline: -6px; }
  .compass__bank { gap: 12px; }
}
.compass__spokes line { stroke: var(--rule); stroke-width: 1; }
.compass__rings circle { fill: none; stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 2 3; }
.compass__rim { fill: none; stroke: #bdb8ad; stroke-width: 1.5; }
.compass__wedge { stroke: #fff; stroke-width: 1; stroke-linejoin: round; }
.compass__over circle { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: .8; }
.compass__ringlabels text { font: 600 12.6px var(--sans); fill: var(--ink-4); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.compass__needle-shaft line { stroke: var(--ink-strong); stroke-width: 1.6; stroke-dasharray: 3 3; }
.compass__needle-head path, .compass__needle-tie path { fill: var(--ink-strong); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.compass__pin { fill: #fff; stroke: var(--ink-strong); stroke-width: 1.5; }
.compass__dot { fill: var(--ink-strong); }
.compass__badge-num { font: 600 12.5px var(--sans); fill: #fff; text-anchor: middle; }
.compass__badge-ring { fill: none; stroke: none; }
.compass__badge-ring.is-on { stroke: var(--ink-strong); stroke-width: 1.75; }
/* no single leader (a tie, or no points): the needle fades out where it was; two or three tied get a head each */
.compass__svg.is-still .compass__needle-shaft, .compass__svg.is-still .compass__needle-head { opacity: 0; }
.compass__needle-tie { opacity: 0; }
.compass__needle-tie.is-on { opacity: 1; }
.compass__svg--mini .compass__rim { stroke-width: 3.5; }
.compass__svg--mini .compass__wedge { stroke-width: 1.5; }
.compass__svg--mini .compass__needle-shaft line { stroke-width: 2.6; stroke-dasharray: none; }
/* the four headings under the rose, placed as on the President's sketch: the right-hand pair set to the right */
.compass__headings { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.compass__hgroup { display: grid; gap: 5px; align-content: start; padding: 8px 10px 9px; border-radius: 8px; background: var(--paper-2); }
.compass__hgroup:nth-child(2n) { justify-items: end; text-align: right; }
.compass__hlabel { font: 600 .78rem/1.3 var(--sans); color: var(--ink-3); }
.compass__hbadges { display: flex; flex-wrap: wrap; gap: 3px; }
.compass__hbadges .badge { --s: 1.5rem; font-size: .6875rem; box-shadow: none; }   /* 11 px numerals, the floor for small text */
.compass__hgroup.is-on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink-strong); }
.compass__hgroup.is-on .compass__hlabel { color: var(--ink-strong); }
/* the heading: a serif sentence (headings and titles in bold, never a number), the numbers in a sans line, then a muted line */
.compass__heading { margin: 10px 0 0; font: 500 1.2rem/1.3 var(--serif); color: var(--ink-strong); text-wrap: balance; font-variant-numeric: lining-nums; }   /* C21 in a heading */
.compass__heading b { font-weight: 600; }
.compass__headnum { margin: 4px 0 0; font: 600 .9rem/1.4 var(--sans); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.compass__headmore { margin: 4px 0 0; font: 400 .86rem/1.45 var(--sans); color: var(--ink-3); }
.compass__more { margin: 6px 0 0; font: 500 .84rem/1.4 var(--sans); color: var(--ink-3); }
/* motion: one short settle, then stillness; none at all for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .compass__needle-shaft, .compass__needle-head { transition: transform 600ms var(--ease), opacity 200ms; }
  .compass__needle-tie { transition: opacity 200ms; }
  .compass__progress i { transition: width 200ms var(--ease); }
  .compass__preview { animation: compass-fade 240ms var(--ease); }
}
@keyframes compass-fade { from { opacity: 0; } }
/* reduced motion: none at all (the site-wide rule would still leave 1 ms) */
@media (prefers-reduced-motion: reduce) {
  .compass__needle-shaft, .compass__needle-head, .compass__needle-tie, .compass__progress i, .compass__preview { transition: none !important; animation: none !important; }
}
/* the panel: who is saying this, your card, send your view to COL */
.compass__panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); grid-template-areas: "who card" "send card"; gap: 0 clamp(20px, 3vw, 40px); align-items: start; padding: clamp(18px, 2.4vw, 28px); background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); }
.compass__who { grid-area: who; }
.compass__make { grid-area: card; }
.compass__send { grid-area: send; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
@media (min-width: 981px) { .compass__make { align-self: stretch; padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--rule); } }
@media (max-width: 980px) {
  .compass__panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "card" "send"; }
  .compass__make { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
}
.compass__blocklabel { margin: 0 0 6px; color: var(--col-blue); }
.compass__lead { margin: 0 0 16px; font-size: .92rem; line-height: 1.5; color: var(--ink-2); max-width: 36rem; }
.form { display: grid; gap: 14px; }
.compass__field label { display: block; margin-bottom: 5px; font: 600 .84rem/1.3 var(--sans); color: var(--ink-2); }
.form input, .form select, .form textarea { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 10px; background: #fff; font: 400 1rem/1.4 var(--sans); color: var(--ink-strong); }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--col-blue); box-shadow: 0 0 0 3px rgba(19, 106, 182, .16); }
.form input[aria-invalid="true"] { border-color: var(--red); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .form .row2 { grid-template-columns: 1fr; } }
.compass__hint { margin: 6px 0 0; }
.compass__msg { margin: 0; font: 500 .84rem/1.45 var(--sans); color: var(--red); }
.compass__msg:not(:empty) { margin-top: 6px; }
.form__row.compass__clear { justify-content: flex-start; gap: 14px; margin-top: -4px; }
.compass__cleared { font: 500 .8rem/1.3 var(--sans); color: var(--ink-3); }
.compass__count { flex: none; align-self: flex-start; margin-top: 6px; font: 500 .76rem/1.45 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.compass__wait { margin: 6px 0 0; font: 500 .9rem/1.45 var(--sans); color: var(--ink-2); }
.compass__preview { display: block; width: 100%; max-width: 400px; height: auto; margin-top: 12px; border-radius: 12px; border: 1px solid var(--rule); background: #fff; }
.compass__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.compass__actions:empty { display: none; }
.compass__mailrow .compass__wait { margin: 0; }
.compass__send > .compass__hint { margin-top: 14px; }
.compass__send > .compass__hint + .compass__hint { margin-top: 4px; }
.compass__mailmsg { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.compass__mailmsg:not(:empty) { margin-top: 14px; }
.compass__mailstatus .compass__actions { margin-top: 10px; }
@media (max-width: 599px) { .compass__actions .btn { flex: 1 1 100%; } }

/* ---------- About COL + synergy ------------------------------------------------ */
/* PDF p. i: the ribbon header (Cormorant Bold Italic title, then the kicker), the lede beside one tinted results box */
#col { position: relative; padding-top: clamp(52px, 8.5vw, 112px); }
#col .waves { --wave-h: clamp(150px, 21vw, 270px); opacity: .6287; mix-blend-mode: multiply; }   /* PDF p. i: the TP01 wave at 62.87 % (/ca .6287); multiply keeps the title black */
#col .section-head { min-height: calc(clamp(150px, 21vw, 270px) * .95 - clamp(52px, 8.5vw, 112px) - clamp(20px, 3vw, 36px)); align-content: start; }   /* the lede starts under the wave; the kicker stays under the title */
#h-col { font-style: italic; font-weight: 700; letter-spacing: 0; }
#col .col-kicker { margin: .5rem 0 0; font-size: clamp(.8rem, 1.05vw, .95rem); letter-spacing: .05em; color: var(--ink-strong); }
.col-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(20px, 3vw, 36px); }
@media (max-width: 980px) { .col-top { grid-template-columns: 1fr; } }
.col-lede { font-size: clamp(1.45rem, 2.9vw, 2.35rem) !important; line-height: 1.22 !important; color: var(--ink-strong) !important; margin: 0 !important; max-width: 44rem; }
.col-results { background: #e7f0f8; border-radius: var(--r-md); padding: clamp(18px, 2.4vw, 26px); }
.col-results > .label { margin: 0 0 14px; }
.proofs--col { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 20px; }
.col-results .proof { background: none; padding: 0; gap: .35rem; border: 0; box-shadow: none; }   /* COL's results stay flat in their box */
/* larger and clearer than the PDF's box (the President's note, 22 October 2026); no share buttons here */
.col-results .proof__value { font-size: clamp(2rem, 2.75vw, 2.6rem); padding-right: 0; }
.col-results .proof__text { font-size: clamp(.94rem, 1.05vw, 1.02rem); line-height: 1.4; color: var(--ink-strong); }
.results-box { max-width: none; }
.results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; }
@media (max-width: 520px) { .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.results-grid .proof__value { font-size: clamp(1.5rem, 2.4vw, 1.9rem); padding: 0; color: var(--col-blue); }
.results-grid .proof__text { font-size: .8rem; margin-top: 4px; }
/* PDF p. i: four photos 2 × 2 at 61% of the measure, gutters and corners in proportion */
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 1.2vw, 10px); }
.grid4 img { width: 100%; aspect-ratio: 425 / 295; object-fit: cover; border-radius: 3.75% / 5.39%; }
@media (min-width: 981px) { #col .split--text-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } #col .figs { align-self: center; } }
.pillars { display: grid; gap: 0; background: #eef4fb; border-radius: var(--r-md); padding: 8px 20px; }
.pillar { display: grid; grid-template-columns: minmax(130px, .5fr) 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid #d3e2f2; }
.pillar:last-child { border-bottom: 0; }
.pillar b { display: block; font: 700 1rem/1.2 var(--sans); color: var(--col-blue); }
.pillar em { display: block; font-size: .82rem; color: var(--ink-2); }
.pillar__tps { display: flex; flex-wrap: wrap; gap: 7px; }
.pillar__tps .badge { text-decoration: none; }
.synergy-note { font-size: 1.25rem; line-height: 1.4; color: var(--ink-2); max-width: 34rem; }

/* ---------- Evidence to impact ---------------------------------------------- */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; }
.journey li { position: relative; padding: 0 24px 0 0; }
.journey li::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: var(--rule-2); }
.journey li:last-child::before { right: auto; width: 32px; }
.journey__dot { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--col-blue); color: #fff; font: 700 .85rem/1 var(--sans); }
.journey b { display: block; margin-top: 14px; font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.1; color: var(--ink-strong); }
.journey__when { display: block; margin-top: 4px; font: 700 .72rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--col-blue); }
.journey p { margin: 6px 0 0; font-size: .92rem; color: var(--ink-2); }
@media (max-width: 760px) {
  .journey { grid-template-columns: 1fr; gap: 22px; }
  .journey li { padding: 0 0 0 48px; }
  .journey li::before { left: 15px; top: 32px; bottom: -22px; right: auto; width: 2px; height: auto; }
  .journey li:last-child::before { display: none; }
  .journey__dot { position: absolute; left: 0; top: 0; }
  .journey b { margin-top: 2px; }
}
.gaborone { margin-top: clamp(32px, 4.5vw, 52px); padding: clamp(18px, 2.6vw, 28px); border-radius: var(--r-md); background: #e7f0f8; }
/* the PDF's column heads, each over its column, then a darker rule */
.gaborone__cols { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; padding: 4px 0 8px; border-bottom: 1px solid #b9c0c6; font: 700 .86rem/1.3 var(--sans); color: var(--col-blue); }
.gaborone__list li:first-child { border-top: 0; }
.gaborone__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 10px; }
.gaborone__head .label { margin: 0; }
.gaborone__list { list-style: none; margin: 0; padding: 0; }
.gaborone__list li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; align-items: start; padding: 13px 0; border-top: 1px solid #d0d8df; }
.gaborone__list li > div b { display: block; font: 700 .95rem/1.3 var(--sans); color: #1d1d1d; }
.gaborone__list li > div span { display: block; font-size: .86rem; line-height: 1.45; color: #333333; }
.gaborone__list li > p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--ink); }
.gaborone__list a { color: var(--link); }
.gaborone__list .badge { --s: 1.92rem; font-size: .81rem; }   /* deck slide 9: a 5 mm disc and a 6 pt number beside 7 pt actions */
@media (max-width: 760px) { .gaborone__list li, .gaborone__cols { grid-template-columns: 2.1rem minmax(0, 1fr); } .gaborone__list li > p, .gaborone__cols > :last-child { grid-column: 2; } }

/* ---------- Downloads ------------------------------------------------------------ */
.dl-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid var(--rule); border-radius: 12px; text-decoration: none; color: var(--ink-strong); }
.dl:hover { border-color: var(--tp, var(--col-blue)); }
.dl > svg { width: 22px; height: 22px; grid-row: span 2; color: var(--col-blue); }
.dl .badge { grid-row: span 2; }
.dl b { font: 600 .92rem/1.25 var(--sans); }
.dl span:not(.badge) { font-size: .76rem; color: var(--ink-3); }
.dl:first-child { grid-column: 1 / -1; background: var(--col-blue); color: #fff; border-color: var(--col-blue); }
.dl:first-child > svg, .dl:first-child span { color: rgba(255, 255, 255, .9); }
/* the 15 print cards in one PDF, then each talking point's share card (PNG) and print card (PDF) */
.dl--print { grid-column: 1 / -1; }
.dl--card .dl__links { display: flex; flex-wrap: wrap; gap: 0 14px; }
.dl__links a { display: inline-flex; align-items: center; min-height: 26px; font: 600 .76rem/1.2 var(--sans); color: var(--tp-ink); text-decoration: underline; text-decoration-color: var(--tp-line); text-underline-offset: .2em; }
.dl__links a:hover { text-decoration-color: currentColor; }

@media (max-width: 520px) { .proofs--col { grid-template-columns: 1fr 1fr; } .col-results .proof__value { font-size: 1.95rem; } .col-results .proof__text { font-size: .9rem; } }

/* Phones: filter rows become one swipeable line */
@media (max-width: 760px) {
  .tpfilters, .storyfilters, .atlas__filters, .ask__try {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter); scroll-padding-inline: var(--gutter);   /* 6 px: room for the focus ring, which the scroller clips */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  }
  .tpfilters::-webkit-scrollbar, .storyfilters::-webkit-scrollbar, .atlas__filters::-webkit-scrollbar, .ask__try::-webkit-scrollbar { display: none; }
  .tpfilters .chip, .storyfilters .chip, .atlas__filters .chip, .ask__try .chip { flex: none; }
  /* the atlas's four groups run on in the same line, their names as quiet separators */
  .atlas__filters { display: flex; align-items: center; gap: 6px; }
  .atlas__group, .atlas__gchips { display: flex; flex: none; align-items: center; gap: 6px; }
  .atlas__glabel { margin: 0 2px 0 10px; white-space: nowrap; }
  .atlas__group--all .atlas__glabel { display: none; }
}

/* Ask on phones: a few suggestions on two rows, the where-strip only after a question */
@media (max-width: 760px) {
  .ask__try { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .ask__try .chip:nth-child(n+5) { display: none; }
  .ask__try .chip { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; padding-block: 6px; }
  #ask:not(.ask--ran) .where { display: none; }
  .meter dl div:nth-child(n+3) { display: none; }
  .meter dl { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .meter dl div { border-bottom: 0; padding-bottom: 0; }
  .meter .tiny { display: none; }
}
.result__cite { color: var(--ink-3); font-style: italic; }

/* Card grid: columns follow each group's count, so rows never end ragged */
@media (min-width: 1080px) {
  .actions .tpgroup[data-n="5"] .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .actions .tpgroup[data-n="4"] .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .actions .tpgroup[data-n="3"] .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 760px) and (max-width: 1079px) {
  .actions .tpgroup[data-n="4"] .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .actions .tpcard__text, .actions .tpcard__sub { font-size: .84rem !important; } }
.tpcard__value--long { font-size: clamp(1.8rem, 2.6vw, 2.2rem) !important; }


.form__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.linkbtn { border: 0; background: none; padding: 4px 0; font: 600 .78rem/1.2 var(--sans); color: var(--col-blue); text-decoration: underline; text-underline-offset: .2em; }

.chip--pillar { color: var(--col-blue); font-weight: 700; }
.chip--pillar em { font-weight: 500; color: var(--ink-3); }
.chip--pillar[aria-pressed="true"] em { color: rgba(255, 255, 255, .8); }
.tpcard__src { margin: .35rem 0 0; font-size: .72rem; line-height: 1.35; color: var(--ink-4); }

/* PDF p. ii: one row of photos under the heading: the President square and PCF11 at 2.54:1, equal heights,
   with the PDF's gap (4.9%) and corners (8.7 × 6.8 pt, the same on both); each caption under its own photo */
.evrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.54fr); column-gap: 4.9%; align-items: start; margin: 0 0 clamp(34px, 5vw, 56px); }
.evrow .photo img { border-radius: 6.42% / 5%; }
.evrow .photo + .photo img { border-radius: 2.53% / 5%; }
.evrow figcaption { max-width: none; }
@media (max-width: 599px) {
  .evrow { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .evrow .photo:first-child { display: grid; grid-template-columns: clamp(96px, 30vw, 132px) minmax(0, 1fr); column-gap: 14px; align-items: end; }
  .evrow .photo:first-child figcaption { margin: 0; }
}
/* the text in the PDF's two columns: the President's words on the left, "Evidence matters" on the right */
.evsplit > .pullquote { margin: 0; }
.evsplit > .prose > h3:first-child { margin-top: 0; }
@media (min-width: 981px) {
  .evsplit { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
  .evsplit > .pullquote { grid-column: 1; grid-row: 1; }
  .evsplit > .prose { grid-column: 2; grid-row: 1; }
}

/* PDF p. ii: the subtitle in red under the title, as each talking point's */
#evidence .ev-subtitle { margin: .5rem 0 0; max-width: 46rem; color: var(--red); font: 600 clamp(1.08rem, 2.2vw, 1.5rem)/1.3 var(--sans); letter-spacing: -.003em; }

/* 06-print.css */
/* ==========================================================================
   Print — a clean document: no navigation, no controls, colour bands kept light
   ========================================================================== */
@media print {
  @page { margin: 16mm 14mm; }
  body { font-size: 10.5pt; }
  .topbar, .skip, .sharebtn, .chart__toggle, .chart__views, .viz__controls, .atlas__controls, .atlas__filters,
  .askcard__more, .tpfilters, .storyfilters, .stories__more, .hero__ctas, .ask, #compass, .sitefoot__nav, .toast, .tip, .sharemenu, .refbox__hint { display: none !important; }
  .section { padding-block: 14pt; break-inside: auto; }
  .figure, .proof, .story, .callout, .askcard, .box, .milestones li { break-inside: avoid; }
  .card, .proof, .story, .tpcard, .atlas__stage { box-shadow: none !important; }
  .opportunity, .sitefoot, .hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .refbox:not([open]) > *:not(summary) { display: block !important; }
  .datatable[hidden] { display: block !important; }
  a[href^="http"]::after { content: ""; }
  .waves .ribbon { opacity: 1 !important; transform: none !important; }
  /* the atlas: atlas.js redraws it at the paper's width; the hidden buttons give their column back (for browsers that
     print without redrawing), and the shading prints even with background graphics off, as it carries the meaning */
  .atlas--side .atlas__body { display: block; }
  .tile, .atlas__legend i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* TP11's panel, held on screen while a country is selected: on paper in its place, without its close button or lift */
  [data-viz="tp11.cohorts"] .viz__panel { position: static !important; box-shadow: none !important; }
  [data-viz="tp11.cohorts"] .viz__panel > button { display: none !important; }
}
/* A closed <details> keeps its content in a slot that newer browsers hide with content-visibility, which the rule above
   cannot reach: core.js opens the references before printing, and this covers a print that skips beforeprint
   (a rule of its own, as a browser without ::details-content drops the whole rule) */
@media print { .refbox::details-content { content-visibility: visible; } }
@media print {
  .js .chart .grow, .js .chart .grow-y { transform: none !important; }
  .js .chart .fade, .js .settle { opacity: 1 !important; transform: none !important; }
  .js .chart .draw { stroke-dashoffset: 0 !important; }
}