/* Asia AI4D Observatory: prototype styles
   Tokens first. Every colour pair used for text clears WCAG 2.2 AA (4.5:1);
   control borders and focus rings clear 3:1. Map ramp validated as an
   ordered single-hue scale (monotone lightness, light end >= 2:1 on paper). */

/* ============================================================ brand layer
   LIRNEasia's palette, used the way their guidelines describe it: the greys carry the structure,
   red and orange are for emphasis. Linen is the site's theme — warm off-white page, warm bands to
   separate sections, dark red as the action colour because on a light ground it clears AA at 8.6:1.

   Bright is the same system turned up: more red, a warmer hero, stronger accents.
   Switch with data-brand="bright" on <html>. The control is in the prototype dock.

   Three kinds of surface, and the difference matters:
     --b-ground / --b-paper   follow the theme. Light here, so hero text is ink, not white.
     --b-ink-surface          deliberately dark in every theme: the footer, menu panels, tooltips,
                              the definition band. These are inverted panels by design.
     --b-solid                a solid dark control: buttons, checked boxes, selected chips. */
:root {
  --b-deep-900: #efe8e3;
  --b-deep-800: #faf6f3;
  --b-deep-700: #f0e8e3;
  --b-deep-600: #dbcfc8;
  --b-deep-950: #e2d7cf;
  --b-ground: #f0e9e4;
  --b-ground-card: #fbf8f6;
  --b-veil: 240, 233, 228;
  --b-hero-scrim: 231, 221, 213;
  --b-hero-wash: 250, 232, 204;

  /* text and chips on the hero and the stat band, which are light in this theme */
  --b-on-hero: #2b2526;
  --b-on-hero-2: #554d4e;
  --b-hero-ink: var(--b-on-hero); --b-hero-ink-2: #463d3e;
  /* Clay: the hero darkens at the top and resolves into --b-ground before the stat band.
     6.9:1 for the headline at the ramp's darkest point, 4.8:1 for the lede. */
  --b-hero-ramp: linear-gradient(180deg, #c0ab9f 0%, #cfbeb3 26%, #e0d4cc 60%, var(--b-ground) 92%);
  --b-hero-chip: rgba(43, 37, 38, .09);
  --b-hero-chip-line: rgba(43, 37, 38, .24);

  /* panels that stay dark whatever the theme does */
  --b-ink-surface: #2b2526;
  --b-ink-surface-2: #231f20;
  --b-ink-surface-ink: #f3edec;
  --b-solid: #3a3436;
  --b-solid-2: #231f20;
  --b-solid-ink: #ffffff;

  --b-accent: #a51212;
  --b-accent-rgb: 165, 18, 18;
  --b-accent-300: #cf5f57;
  --b-accent-on-dark: #e8938c;  /* the accent as it must be on an inverted panel — 5.9:1 there */
  --b-accent-200: #f2ddda;
  --b-accent-600: #8a0f0f;
  --b-accent-ink: #ffffff;
  --b-primary: #a51212;
  --b-accent-2: #f26836;
  --b-accent-line: #a51212;
  --b-accent-ink-light: #8a0f0f;

  --b-paper: #f4efec;
  --b-panel: #efe8e4;
  --b-surface: #ffffff;
  --b-surface-2: #e9e1dc;
  --b-tile: #ded3cd;
  --b-neutral-2: #ebe3df;

  --b-ink: #2b2526;
  --b-ink-2: #554d4e;
  --b-ink-3: #6d6264;   /* worst case 4.84:1, measured on paper, panel and white */
  --b-muted: #8b8183;
  --b-rule: #e0d6d1;
  --b-rule-2: #c6b9b3;
  --b-control: #857b7d;
  --b-shadow: 43, 37, 38;

  /* their data guidance: shades of red, not orange, with greys as the second set */
  --b-map-1: #ecd2cc;
  --b-map-2: #d79f96;
  --b-map-3: #bf6e63;
  --b-map-4: #9e3a31;
  --b-map-5: #721713;
  --b-map-rgb: 215, 159, 150;

  --b-tint-100: #f1e3df;
  --b-tint-50: #f8f1ef;
  /* The tail of a gradient headline: the accent phrase deepens instead of dissolving into the page. 11.9:1 on paper. */
  --b-grad-end: #4a1b1b; --b-tag-ink: #8a0f0f; --b-numeral: #cf5f57;
  /* The globe's pins and its travelling light, which were still the old brand's lime. */
  --b-pin-on: #a51212; --b-pin-on-core: #fdf8f4; --b-pin-core: #5a4f50;
  --b-spark: rgba(255, 233, 206, .9); --b-spark-hot: #fff6ea;
  /* Status is reserved: it means a state, not a brand, so it is the same in every theme. 6.8:1. */
  --b-ok-bg: #e2ece4; --b-ok-line: #bed3c3; --b-ok-ink: #2c5839;
  --b-tint-200: #e7dbd6;
  --b-on-dark: #f3edec;
  --b-soft: #bfafa8;

  /* the globe, which paints on a canvas and reads these at draw time */
  /* how much of the dot ramp survives on this ground: the alpha floor, and the gain on
     land outside the nineteen. Clay's taupe swallows the defaults. */
  --b-globe-floor: 0.24;
  --b-globe-far-k: 0.66;
  --b-globe-rim: 250, 245, 241;
  --b-globe-far: 48, 41, 39;
  --b-globe-t1: 124, 5, 5;
  --b-globe-t2: 170, 54, 32;
  --b-globe-t3: 52, 44, 42;
  --b-globe-glow: 162, 134, 112;
  --b-globe-air: 194, 166, 142;

  /* the stat band easing into the page below it — scenery, never the map ramp */
  --b-fade-1: #f0e9e4;
  --b-fade-2: #f3ece8;
  --b-fade-3: #f6f1ed;
  --b-fade-4: #f9f5f2;
  --b-fade-5: #fcf9f8;
  --b-fade-6: #fefdfc;
}
:root[data-brand="bright"] {
  /* The same system with the volume up: a warmer, redder hero, a stronger accent, more contrast
     between the bands and the page. Red is still never a full field. */
  --b-deep-900: #f6e9e3;
  --b-deep-800: #fdf4ef;
  --b-deep-700: #f7e4db;
  --b-deep-600: #e8c3b6;
  --b-deep-950: #efd9ce;
  --b-ground: #f8ebe4;
  --b-ground-card: #fffbf9;
  --b-veil: 248, 235, 228;
  --b-hero-scrim: 254, 249, 246;
  --b-hero-wash: 252, 206, 150;

  --b-on-hero: #3d1d16;
  --b-on-hero-2: #6b4034;
  --b-hero-chip: rgba(61, 29, 22, .08);
  --b-hero-chip-line: rgba(61, 29, 22, .2);

  --b-ink-surface: #3d1d16;
  --b-ink-surface-2: #2a120d;
  --b-ink-surface-ink: #fdf1ea;
  --b-solid: #a51212;
  --b-solid-2: #7a0e0e;
  --b-solid-ink: #ffffff;

  --b-accent: #d73f28;   /* white on it is 4.53:1 — the brightest red that still clears AA */
  --b-accent-rgb: 215, 63, 40;
  --b-accent-300: #f08b73;
  --b-accent-on-dark: #f6a893;
  --b-accent-200: #fde0d6;
  --b-accent-600: #c0351f;
  --b-accent-ink: #ffffff;
  --b-primary: #c0351f;
  --b-accent-2: #f26836;
  --b-accent-line: #d73f28;
  --b-accent-ink-light: #a5300f;

  --b-paper: #fdf6f2;
  --b-panel: #faeee8;
  --b-surface: #ffffff;
  --b-surface-2: #f6e5dd;
  --b-tile: #eed6ca;
  --b-neutral-2: #f7e8e1;

  --b-ink: #30201c;
  --b-ink-2: #5e4740;
  --b-ink-3: #735b54;
  --b-muted: #8d756d;
  --b-rule: #f0dfd7;
  --b-rule-2: #d7bcb0;
  --b-control: #8e766e;
  --b-shadow: 48, 32, 28;

  --b-map-1: #fbd9ca;
  --b-map-2: #f0a98f;
  --b-map-3: #de7254;
  --b-map-4: #bf3f22;
  --b-map-5: #8a1c08;
  --b-map-rgb: 240, 169, 143;

  --b-tint-100: #fbe6dd;
  --b-tint-50: #fef5f1;
  --b-grad-end: #5c1d12; --b-tag-ink: #8e2a12; --b-numeral: #d9664b;
  --b-pin-on: #d73f28; --b-pin-on-core: #fff7f3; --b-pin-core: #6a544d;
  --b-spark: rgba(255, 224, 190, .9); --b-spark-hot: #fff3e6;
  --b-tint-200: #f5ded3;
  --b-on-dark: #fdf1ea;
  --b-soft: #d2ab9b;

  --b-globe-rim: 248, 236, 228;
  --b-globe-far: 92, 70, 62;
  --b-globe-t1: 196, 36, 16;
  --b-globe-t2: 242, 104, 54;
  --b-globe-t3: 100, 74, 66;
  --b-globe-glow: 226, 166, 132;
  --b-globe-air: 252, 214, 174;

  --b-fade-1: #f8ebe4;
  --b-fade-2: #faefe9;
  --b-fade-3: #fcf3ef;
  --b-fade-4: #fdf7f4;
  --b-fade-5: #fefbf9;
  --b-fade-6: #fffdfc;
}


:root {
  /* Surfaces: warm grey page, off-white panels, white cards */
  --paper: var(--b-paper);
  --panel: var(--b-panel);
  --surface: var(--b-surface);
  /* The hero heading's size, named once so a flag beside it can be sized from it */
  --lh-h1: clamp(2.2rem, 4vw, 3.6rem);
  --lh-h1-lh: 1.04;
  --h1-size: clamp(2.7rem, 5.2vw, 5.3rem);   /* the home hero */
  --h2-size: clamp(2rem, 3.7vw, 3.35rem);    /* every section title */
  --surface-2: var(--b-surface-2);
  --ink: var(--b-ink);
  --ink-2: var(--b-ink-2);
  --ink-3: var(--b-ink-3);
  --muted: var(--b-muted);      /* large display text on panels and white only (>= 3:1) */
  --rule: var(--b-rule);
  --rule-2: var(--b-rule-2);
  --control: var(--b-control);

  /* Brand: deep slate and lime */
  --lime: var(--b-accent);
  --lime-300: var(--b-accent-300);
  --lime-200: var(--b-accent-200);
  --tile-grey: var(--b-tile);
  --ground: var(--b-ground);      /* the dark ground the hero eases into and the stats sit on */
  --ground-card: var(--b-ground-card); /* stat cards on it: labels (white 56%) 5.96:1, lime numbers 13.25:1 */

  /* Sequential map ramp, sage, light to dark (ordinal checks pass on panel and white) */
  --map-1: var(--b-map-1);
  --map-2: var(--b-map-2);
  --map-3: var(--b-map-3);
  --map-4: var(--b-map-4);
  --map-5: var(--b-map-5);

  /* Older names, kept so listing and detail styles follow the new palette */
  --indigo-900: var(--b-ink);
  --indigo-800: var(--b-ink);
  --indigo-700: var(--b-ink-2);
  --indigo-600: var(--b-ink-3);
  --indigo-100: var(--b-tint-100);
  --indigo-50: var(--b-tint-50);
  --turmeric-100: var(--lime-200);
  --turmeric-200: var(--b-accent-300);
  --turmeric-400: var(--lime);
  --turmeric-500: var(--lime);
  --turmeric-600: var(--ink);
  --turmeric-700: #915c08;

  --green-700: #196632;
  --green-100: #dcf7e1;
  --green-200: #a9dcb5;
  --red-700: #a52a26;
  --red-100: #ffe7e4;

  --focus: var(--b-primary);

  /* Headings in Host Grotesk; text and the small uppercase labels in Inter, as on ai4d.ai.
     --font-mono keeps its name but now sets labels in Inter. */
  --font-display: 'Host Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --r: 8px; --r-pill: 999px;
  --r-lg: 14px;
  --r-xl: 24px;
  --wrap: 1280px;
  --shell: 1440px;
  --shell-pad: 12px;
  --page-pad: clamp(20px, calc(12.5vw - 60px), 120px); /* 120px from 1440px wide, easing to 20px on phones */
  --nav-h: 64px;
  --gutter: clamp(16px, 3.2vw, 40px);
  --shadow-lift: 0 18px 36px -24px rgba(var(--b-shadow), .45);
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 40px); background: var(--b-ground); }
main { padding-top: calc(var(--nav-h) + 30px); }
body.is-home main { padding-top: 0; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--font-text);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--b-primary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--b-accent-600); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
/* Route changes move focus to the page heading for screen readers; no ring needed there. */
[tabindex="-1"]:focus { outline: none; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
mark { background: var(--turmeric-100); color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px var(--turmeric-200); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { padding: 0 var(--page-pad); }
[hidden] { display: none !important; }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico .f { fill: currentColor; stroke: none; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r); text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; color: #fff; }

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: 500 16px/1 var(--font-text); letter-spacing: 0.005em;
  position: relative; overflow: hidden; isolation: isolate;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s,
    transform .22s cubic-bezier(.2, .9, .3, 1.2), box-shadow .22s ease;
}
.btn .ico { width: 18px; height: 18px; }
.btn-primary { background: var(--b-solid); color: var(--b-solid-ink); }
.btn-primary:hover { background: var(--b-solid-2); color: var(--b-solid-ink); }
.btn-quiet { background: transparent; border-color: var(--control); color: var(--ink); }
.btn-quiet:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink); padding: 0 16px; }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-sm { min-height: 36px; padding: 0 16px; font-size: 14.5px; }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; color: var(--b-primary); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font: inherit; }
.linkish:hover { color: var(--b-accent-600); text-decoration-thickness: 2px; }

.btn-lime { background: var(--lime); color: var(--b-accent-ink); }
.btn-lime:hover { background: var(--b-accent-600); color: var(--b-accent-ink); }

/* Dark label + lime arrow square, joined */
/* One box: the words and the arrow inside it */
.btn-arrow { display: inline-flex; flex: none; align-items: center; gap: 16px; min-height: 48px; padding: 0 20px 0 24px; border: 0; border-radius: var(--r-pill); background: var(--b-solid); color: var(--b-solid-ink); font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .2s; }
.btn-arrow:hover { background: var(--b-solid-2); color: var(--b-solid-ink); }
.btn-arrow .ba-label { display: inline-flex; align-items: center; }
.btn-arrow .ba-sq { display: inline-grid; place-items: center; background: none; color: inherit; }
.btn-arrow .ba-sq .ico { width: 18px; height: 18px; transition: transform .2s; }
.btn-arrow:hover .ba-sq .ico { transform: translateX(3px); }
.btn-arrow:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* A lime arrow set into a notch cut from a card corner */
.corner { --n: var(--notch, var(--paper)); position: absolute; right: 0; bottom: 0; z-index: 2; width: 60px; height: 60px; display: grid; place-items: end; background: var(--n); border-top-left-radius: 18px; }
.corner::before, .corner::after { content: ""; position: absolute; width: 18px; height: 18px; background: radial-gradient(circle at 0 0, transparent 17.5px, var(--n) 18px); pointer-events: none; }
.corner::before { right: 0; top: -18px; }
.corner::after { left: -18px; bottom: 0; }
.corner-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--lime); color: var(--b-accent-ink); transition: transform .2s; }
.corner-btn .ico { width: 18px; height: 18px; transform: rotate(-45deg); }
a.corner:hover .corner-btn { transform: translate(-2px, -2px); }
a.corner:focus-visible { outline: none; }
a.corner:focus-visible .corner-btn { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- Prototype bar + labels */
/* The brand switch: two brands on one build, so the difference can be felt rather than described.
   The whole site follows — every surface, band, card, chart and the globe, which repaints. */
.pd-plate { display: none; }
:root[data-heroart="image"] .pd-plate { display: inline-flex; }
.pd-font select, .pd-plate select { max-width: 180px; min-height: 26px; padding: 0 22px 0 10px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 8px center;
  color: #fff; font: 500 10.5px/1 var(--font-mono); letter-spacing: .04em; cursor: pointer; appearance: none; }
.pd-font select:hover, .pd-plate select:hover { background-color: rgba(255, 255, 255, .22); }
.pd-font select option, .pd-plate select option { color: #111; background: #fff; letter-spacing: 0; }
.pd-brand { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.pd-brand button { min-height: 22px; padding: 0 9px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .66); font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color .18s, color .18s; }
.pd-brand button:hover { color: #fff; }
.pd-brand button[aria-pressed="true"] { background: var(--b-accent); color: var(--b-accent-ink); }
.proto-dock { position: fixed; right: 14px; bottom: 14px; z-index: 70; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 28px); padding: 5px 5px 5px 12px; border-radius: 999px; background: rgba(var(--b-shadow), .88); color: var(--b-on-dark); font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); --focus: var(--lime); }
.pd-note { color: rgba(255, 255, 255, .86); font: 400 12.5px/1.35 var(--font-text); letter-spacing: 0; text-transform: none; }
.proto-dock { padding: 9px 16px; }
.proto-dock button { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; white-space: nowrap; }
.proto-dock button:hover { background: rgba(255, 255, 255, .22); }
.proto-dock .sw { width: 22px; height: 13px; border-radius: 999px; background: rgba(255, 255, 255, .35); position: relative; transition: background .15s; }
.proto-dock .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: #fff; transition: transform .15s; }
.proto-dock button[aria-pressed="true"] .sw { background: #2f9a55; }
.proto-dock button[aria-pressed="true"] .sw::after { transform: translateX(9px); }
.pd-q { display: none; }
.proto-dock .pd-i { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--lime); stroke-width: 1.7; stroke-linecap: round; }
/* The dock keeps a slow green glow, so the prototype note is noticed once and then left alone */
@keyframes pd-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--b-accent-rgb), .22), 0 0 14px -4px rgba(var(--b-accent-rgb), .3), 0 18px 40px -22px rgba(0, 0, 0, .8); }
  50% { box-shadow: inset 0 0 0 1px rgba(var(--b-accent-rgb), .62), 0 0 22px -2px rgba(var(--b-accent-rgb), .5), 0 18px 40px -22px rgba(0, 0, 0, .8); }
}
.proto-dock { animation: pd-glow 4.2s ease-in-out infinite; }
body.motion-paused .proto-dock { animation: none; box-shadow: inset 0 0 0 1px rgba(var(--b-accent-rgb), .4); }
@media (prefers-reduced-motion: reduce) { .proto-dock { animation: none; box-shadow: inset 0 0 0 1px rgba(var(--b-accent-rgb), .4); } }
.pd-a11y { flex: none; }
.pd-a11y svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* What the prototype claims against WCAG 2.2 AA, as a checklist */
.a11y-dlg { width: min(720px, calc(100vw - 32px)); max-height: min(78vh, 760px); padding: 0; border: 0; border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(var(--b-shadow), .6); }
.a11y-dlg::backdrop { background: rgba(var(--b-shadow), .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.a11y-hd { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 22px 14px; background: var(--surface); border-bottom: 1px solid var(--rule); }
.a11y-hd h2 { margin: 0; font: 500 21px/1.2 var(--font-display); letter-spacing: -0.015em; }
.a11y-hd p { margin: 6px 0 0; max-width: 46em; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.a11y-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); cursor: pointer; }
.a11y-x:hover { background: var(--rule); }
.a11y-x .ico { width: 17px; height: 17px; }
.a11y-b { padding: 6px 22px 22px; overflow: auto; }
/* The numbers the claims rest on */
.a11y-m { margin-top: 16px; padding: 14px 16px 12px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); }
.a11y-m h3 { margin: 0 0 8px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.a11y-m table { width: 100%; border-collapse: collapse; }
.a11y-m tr + tr th, .a11y-m tr + tr td { border-top: 1px solid var(--rule); }
.a11y-m th { padding: 7px 0; font-size: 14px; font-weight: 500; text-align: left; }
.a11y-m td { padding: 7px 0 7px 12px; font: 500 13.5px/1.3 var(--font-mono); color: var(--ink); white-space: nowrap; }
.a11y-m td:last-child { font: 400 13px/1.35 var(--font-text); color: var(--ink-3); white-space: normal; }
.a11y-m p { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.a11y-sc { margin-right: 8px; font: 500 12px/1 var(--font-mono); color: var(--ink-3); text-decoration: none; border-bottom: 1px dotted var(--rule-2); }
.a11y-sc:hover { color: var(--ink); border-bottom-color: var(--ink-3); }
.a11y-g { margin-top: 18px; }
.a11y-g h3 { margin: 0 0 8px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.a11y-g ul { list-style: none; margin: 0; padding: 0; }
.a11y-g li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.a11y-g li b { display: block; font-size: 15px; font-weight: 500; }

.a11y-g li p { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.a11y-s { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; }
.a11y-s .ico { width: 14px; height: 14px; }
.a11y-s.met { background: var(--b-ok-bg); color: var(--b-ok-ink); }
.a11y-s.part { background: var(--lime-200); color: var(--b-accent-ink-light); }
.a11y-s.na { background: var(--surface-2); color: var(--ink-3); }
/* 2.5.8 Target size: a standalone link clears 24px even where the type is small */
.foot-links a, .foot-motion, .ro-all, .matrix th a, .dtable th a, .linkish { display: inline-flex; align-items: center; min-height: 24px; }
.dd-b { min-height: 24px; }
/* The listing's sketch: the record as a browser. The rows are blanks — the shape of the repository, never fake entries.
   One row opens, its detail lines arrive in turn and a marker walks down. The panel's box is fixed, so none of it
   can move the hero: the height is declared, the overflow is clipped and layout is contained. */
.lh-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 1001px) { .lh-top { grid-template-columns: minmax(0, 1fr) clamp(258px, 26vw, 350px); min-height: 228px; } }
.lh-rec { height: 228px; border-radius: 18px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .09); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; position: relative; contain: layout paint; transform: translateY(-24px);
  /* The panel does not end on an edge: its foot, hairline and rows dissolve into the band together */
  -webkit-mask-image: linear-gradient(#000 58%, rgba(0, 0, 0, .35) 84%, transparent); mask-image: linear-gradient(#000 58%, rgba(0, 0, 0, .35) 84%, transparent); }
.rec-bar { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 13px; border-bottom: 1px solid rgba(var(--b-shadow), .10); }
.rec-dots { display: inline-flex; gap: 5px; }
.rec-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--b-shadow), .16); }
.rec-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.rec-live i { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--b-accent-rgb), .55); animation: rec-live 2.6s ease-in-out infinite; }
/* Every blank is one component: a soft bar with a slow sweep across it */
.sk { display: block; height: 7px; border-radius: 3px; background: rgba(var(--b-shadow), .13); position: relative; overflow: hidden; }
.sk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, .72) 50%, transparent 78%); transform: translateX(-110%); animation: sk-sweep 4.6s cubic-bezier(.5, 0, .5, 1) infinite; }
.sk-name { width: 62px; }
.sk-live { width: 22px; height: 6px; background: rgba(var(--b-shadow), .11); }
.rec-rows { list-style: none; margin: 0; padding: 6px; height: 199px; overflow: hidden; }
.rr-h { display: grid; grid-template-columns: 14px 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 29px; padding: 0 9px; border-radius: 10px; }
.rr-c { display: grid; place-items: center; color: rgba(var(--b-shadow), .3); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.rr-c .ico { width: 11px; height: 11px; }
.rr-id { background: rgba(var(--b-accent-rgb), .38); }
.rr-k { height: 6px; background: rgba(var(--b-shadow), .1); justify-self: end; }
.rr-sub { list-style: none; margin: 0 0 4px; padding: 3px 9px 3px 33px; display: grid; gap: 6px; overflow: hidden; }
.rr-sub li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: center; }
.sk-lb { height: 6px; background: rgba(var(--b-shadow), .1); }
.rec-mark { position: absolute; left: 10px; top: 47px; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--b-accent-rgb), .6); box-shadow: 0 0 0 3.5px rgba(var(--b-accent-rgb), .1); }
/* The loop: the second row opens and closes, its lines arrive in turn, the marker walks, one row lights */
@keyframes rec-live { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes sk-sweep { 0%, 55% { transform: translateX(-110%); } 92%, 100% { transform: translateX(110%); } }
@keyframes rec-open { 0%, 8% { max-height: 0; opacity: 0; } 18%, 74% { max-height: 78px; opacity: 1; } 86%, 100% { max-height: 0; opacity: 0; } }
@keyframes rec-caret { 0%, 8% { transform: rotate(-90deg); } 18%, 74% { transform: rotate(0deg); } 86%, 100% { transform: rotate(-90deg); } }
@keyframes rec-line { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes rec-walk { 0%, 6% { transform: translateY(0); } 16%, 76% { transform: translateY(29px); } 88%, 94% { transform: translateY(116px); } 100% { transform: translateY(0); } }
@keyframes rec-lit { 0%, 8% { background: rgba(255, 255, 255, 0); } 18%, 74% { background: rgba(255, 255, 255, .05); } 86%, 100% { background: rgba(255, 255, 255, 0); } }
.rr .rr-c { transform: rotate(-90deg); }
.lh-rec .rr:nth-child(2n) .sk::after { animation-delay: -1.4s; }
.lh-rec .rr:nth-child(3n) .sk::after { animation-delay: -2.7s; }
.lh-rec .rr.is-open .rr-c { animation: rec-caret 12s ease-in-out infinite; }
.lh-rec .rr.is-open .rr-h { animation: rec-lit 12s ease-in-out infinite; }
.lh-rec .rr-sub { animation: rec-open 12s ease-in-out infinite; max-height: 0; opacity: 0; }
.lh-rec .rr-sub li { animation: rec-line .5s ease-out both; }
.lh-rec .rr-sub li:nth-child(2) { animation-delay: .1s; }
.lh-rec .rr-sub li:nth-child(3) { animation-delay: .2s; }
.lh-rec .rr-sub li:nth-child(4) { animation-delay: .3s; }
.lh-rec .rec-mark { animation: rec-walk 12s ease-in-out infinite; }
/* At rest the panel holds its open state: no sweep, no walk, nothing that moves */
body.motion-paused .lh-rec *, body.motion-paused .lh-rec, body.motion-paused .lh-rec *::after { animation: none !important; }
body.motion-paused .lh-rec .sk::after { opacity: 0; }
body.motion-paused .lh-rec .rr-sub { max-height: 78px; opacity: 1; }
body.motion-paused .lh-rec .rr.is-open .rr-c { transform: none; }
body.motion-paused .lh-rec .rr.is-open .rr-h { background: rgba(255, 255, 255, .05); }
body.motion-paused .lh-rec .rec-mark { transform: translateY(29px); }
@media (prefers-reduced-motion: reduce) {
  .lh-rec *, .lh-rec, .lh-rec *::after { animation: none !important; }
  .lh-rec .sk::after { opacity: 0; }
  .lh-rec .rr-sub { max-height: 78px; opacity: 1; }
  .lh-rec .rr.is-open .rr-c { transform: none; }
  .lh-rec .rr.is-open .rr-h { background: rgba(255, 255, 255, .05); }
  .lh-rec .rec-mark { transform: translateY(29px); }
}
@media (max-width: 1000px) { .lh-rec { display: none; } }

/* A country's own page: the band names it and counts what the record holds, with its outline beside */
.ch-top { display: grid; grid-template-columns: minmax(0, 1fr); }
/* The hero's globe, held still behind the band's right side. It runs off the edge as it does on the
   home page, because a globe small enough to fit the column draws its dots at under a pixel. */
.lh.ch-head { position: relative; overflow: hidden; isolation: isolate; }
.lh.ch-head > .wrap { position: relative; z-index: 1; }
.ch-ill { display: none; }
.ch-globe { display: block; width: 100%; height: 100%; }
@media (min-width: 1001px) {
  .ch-ill { display: block; position: absolute; z-index: 0; right: -10%; top: 0; bottom: 0; width: min(58vw, 860px); pointer-events: none; }
}
.lh.ch-head .crumbs { margin-bottom: 0; }
/* The flag stands as tall as the name and its region together: one line of the heading, the gap
   between them, and the region's own line. Taken from the heading's size, so it follows it. */
.ch-name { display: flex; align-items: center; gap: 18px; margin-top: 40px; }
.ch-flag { flex: none; display: grid; width: var(--ch-fh); height: var(--ch-fh); --ch-fh: calc(var(--lh-h1) * var(--lh-h1-lh) + 10px + 11.5px); }
.ch-nm { display: grid; gap: 10px; }
.ch-k { margin: 0; font: 500 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--b-primary); }
.lh.ch-head h1 { display: block; margin: 0; max-width: none; }
.ch-flag .tflag { width: 100%; height: 100%; }
.ch-head .lede { max-width: 40em; }
.ch-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.ch-stat { display: grid; gap: 4px; min-width: 132px; padding: 16px 18px 14px; border-radius: 18px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; text-decoration: none; transition: background-color .2s, box-shadow .2s; }
.ch-stat:hover { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(var(--b-accent-rgb), .5); color: #fff; }
.ch-stat b { font: 300 2.1rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--lime); }
.ch-stat span { font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.dmap .dpc { fill: rgba(255, 255, 255, .26); }
.dmap .dph { fill: var(--lime); }
.dmap .edge > * { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: .8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ch-en { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 26px 0 0; padding: 0; }
.ch-en a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 14px; padding: 18px 20px 16px; border-radius: 20px; background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .25s ease, filter .3s ease; }
.ch-en a:hover { color: var(--ink); transform: translateY(-2px); filter: drop-shadow(0 14px 16px rgba(var(--b-shadow), .1)); }
.ch-en a.is-zero { background: none; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-3); }
.ch-en-n { font: 300 1.9rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--b-primary); }
.ch-en a.is-zero .ch-en-n { color: var(--rule-2); }
.ch-en-t { font-size: 15.5px; font-weight: 500; }
.ch-en-b { grid-column: 1 / -1; height: 5px; margin-top: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ch-en-b em { display: block; height: 100%; border-radius: 99px; background: var(--map-3); }
.ch-en a.is-zero .ch-en-b { background: var(--rule); }

/* The country's list: two sets of filters over it, then the listing's own cards, a page at a time */
.cty-body { padding-block: 34px 72px; }
.cty-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ctyf { position: relative; }
.ctyf > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px 0 18px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); color: var(--ink); font: 500 14.5px/1 var(--font-text); cursor: pointer; transition: box-shadow .2s; }
.ctyf > summary::-webkit-details-marker { display: none; }
.ctyf > summary:hover { box-shadow: 0 0 0 1px rgba(var(--b-shadow), .22); }
.ctyf > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ctyf > summary .ico { width: 16px; height: 16px; color: var(--ink-3); transition: transform .2s; }
.ctyf[open] > summary { box-shadow: 0 0 0 1px rgba(var(--b-shadow), .22); }
.ctyf[open] > summary .ico { transform: rotate(180deg); }
.cf-k { font: 500 14.5px/1 var(--font-text); color: var(--ink-3); }
.cf-v.on { color: var(--b-primary); }
.cf-pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; display: grid; gap: 2px; min-width: 268px; max-height: 60vh; overflow: auto; padding: 6px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .08), 0 26px 50px -24px rgba(var(--b-shadow), .45); }
.cf-pop button { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 40px; padding: 0 13px; border: 0; border-radius: 11px; background: none; color: var(--ink-2); font: 500 14.5px/1 var(--font-text); text-align: left; cursor: pointer; }
.cf-pop button:hover:not([disabled]) { background: var(--panel); color: var(--ink); }
.cf-pop button b { font: 500 12px/1 var(--font-mono); color: var(--ink-3); }
.cf-x { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--rule-2); transition: background-color .15s, box-shadow .15s; }
.cf-x .ico { width: 12px; height: 12px; color: #fff; opacity: 0; }
.cf-pop button[aria-checked="true"] { color: var(--ink); }
.cf-pop button[aria-checked="true"] .cf-x { background: var(--map-3); box-shadow: inset 0 0 0 1.5px var(--map-3); }
.cf-pop button[aria-checked="true"] .cf-x .ico { opacity: 1; }
.cf-pop button[disabled] { color: var(--ink-3); opacity: .5; cursor: default; }
.cf-clear { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 500 14.5px/1 var(--font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cf-clear:hover { color: var(--ink); }
@media (max-width: 560px) { .ctyf, .ctyf > summary { width: 100%; } .cf-pop { min-width: 0; width: 100%; } }
.cty-n { margin: 26px 0 14px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cty-more { display: flex; justify-content: center; margin-top: 24px; }

/* The countries page: one card a country — its flag, its name, what it holds, and its outline in the corner */
.cty-wrap { padding-block: 34px 80px; }
.cty-count { margin: 0 0 18px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cty-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; }
.cty-card > .nc { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: 24px; border-radius: 24px; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; }
.cty-card > .nc:hover { color: var(--ink); transform: translateY(-3px); filter: drop-shadow(0 16px 16px rgba(var(--b-shadow), .1)); }
.cty-card .cline.cty-ill { position: absolute; right: -10px; top: -12px; width: 96px; height: 96px; color: var(--map-2); opacity: .26; pointer-events: none; }
.cty-flag { display: block; }
.cty-tf { width: 40px; height: 40px; }
.cty-t { margin-top: 16px; font: 500 20px/1.2 var(--font-display); letter-spacing: -0.02em; }
.cty-m { margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1.4 var(--font-text); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.cty-go { margin-top: 32px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.cty-go .ico { width: 15px; height: 15px; transition: transform .2s; }
.cty-card > .nc:hover .cty-go .ico { transform: translateX(3px); }
.cty-none { margin: 22px 0 0; font-size: 16px; color: var(--ink-3); }
.lh-m { color: rgba(255, 255, 255, .62); }

/* The live check, while you browse */
.a11y-run { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 22px 0; padding: 14px 16px; border-radius: 16px; background: var(--panel); }
.a11y-run span { flex: 1; min-width: 12em; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
#a11y-live { display: block; position: fixed; left: 14px; bottom: 14px; z-index: 80; width: min(380px, calc(100vw - 28px)); max-height: min(60vh, 520px); overflow: auto; padding: 14px 16px 16px; border-radius: 20px; background: rgba(var(--b-shadow), .94); color: #fff; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#a11y-live .al-h { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: start; gap: 4px 10px; }
#a11y-live .al-h b { grid-column: 1; font: 500 17px/1.2 var(--font-display); }
#a11y-live.ok .al-h b { color: var(--lime); }
#a11y-live.bad .al-h b { color: #ffb4ab; }
#a11y-live .al-s { grid-column: 1; font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
#a11y-live .al-h button { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
#a11y-live .al-h button:hover { background: rgba(255, 255, 255, .22); }
#a11y-live .al-h .ico { width: 15px; height: 15px; }
#a11y-live .al-g { margin: 14px 0 0; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--b-primary); }
#a11y-live .al-e { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .62); }
#a11y-live .al-l { list-style: none; display: grid; gap: 2px; margin: 12px 0 0; padding: 0; }
#a11y-live .al-l button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; }
#a11y-live .al-l button:hover { background: rgba(255, 255, 255, .1); }
#a11y-live .al-l b { display: block; font-size: 14px; font-weight: 500; }
#a11y-live .al-l small { display: block; margin-top: 2px; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
#a11y-live .al-i { padding: 3px 7px; border-radius: 999px; font: 500 9.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .14); }
#a11y-live .al-i.critical, #a11y-live .al-i.serious { background: #ffb4ab; color: #4a1410; }
#a11y-live .al-i.moderate { background: var(--lime); color: var(--b-accent-ink); }
.a11y-hit { outline: 3px dashed #ff7b6b !important; outline-offset: 3px !important; }
.a11y-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.5; color: var(--ink-3); }
body:not(.is-home) [data-tune-open] { display: none; }
.tune { position: fixed; right: 14px; bottom: 60px; z-index: 72; width: min(320px, calc(100vw - 28px)); padding: 14px 16px 12px; border-radius: 16px; background: rgba(var(--b-shadow), .94); color: var(--b-on-dark); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); --focus: var(--lime); }
.tune[hidden] { display: none; }
.tune-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tune-head p { margin: 0; font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--b-primary); }
.tune-x { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.tune-x:hover { background: rgba(255, 255, 255, .12); }
.tune-x .ico { width: 16px; height: 16px; }
.tune-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 58px; align-items: center; gap: 10px; min-height: 36px; font-size: 13.5px; }
.tune-row input { width: 100%; accent-color: var(--lime); }
.tune-row output { font: 500 12px/1 var(--font-mono); text-align: right; color: #fff; }
.tune-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.tune-foot .linkish { color: #fff; }
.tune-foot .btn { min-height: 34px; padding: 0 12px; border-color: rgba(255, 255, 255, .4); color: #fff; font-size: 13px; }
.tune-foot .btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.tune-note { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .7); }

/* Live / Illustrative marks (Annex 1, Section 5) */
.ptag { position: relative; display: inline-block; vertical-align: middle; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; font-weight: 500; }
.ptag > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 4px; border-radius: 999px; cursor: pointer; border: 1px solid; white-space: nowrap; user-select: none; }
.ptag > summary::-webkit-details-marker { display: none; }
.ptag.live > summary { background: var(--green-100); color: var(--green-700); border-color: var(--green-200); }
.ptag.illus > summary { background: #fdf0d2; color: var(--turmeric-700); border-color: #efd29a; }
.ptag > summary::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.ptag.live > summary::before { background: currentColor; }
.ptag.illus > summary::before { border: 1.5px solid currentColor; width: 4px; height: 4px; }
.on-dark .ptag.live > summary { background: rgba(var(--b-map-rgb), .12); color: #b5edc4; border-color: rgba(var(--b-map-rgb), .35); }
.on-dark .ptag.illus > summary { background: rgba(245, 207, 125, .12); color: #f5d58f; border-color: rgba(245, 207, 125, .35); }
.ptag-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: min(310px, 78vw);
  background: var(--ink); color: var(--b-tint-50); padding: 11px 13px; border-radius: 10px;
  font: 400 13.5px/1.45 var(--font-text); letter-spacing: 0; text-transform: none;
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .45);
}
.ptag-pop b { color: #fff; }
.ptag.right .ptag-pop { left: auto; right: 0; }
body.no-ptags .ptag { display: none; }

/* ---------------------------------------------------------------- Header */
.lang { position: relative; }
.lang > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px 0 13px; border-radius: 99px; cursor: pointer; color: inherit; font: 500 13.5px/1 var(--font-text); }
.lang > summary::-webkit-details-marker { display: none; }
.lang .chev { width: 14px; height: 14px; opacity: .75; transition: transform .2s; }
.lang[open] .chev { transform: rotate(180deg); }
.flag { position: relative; flex: none; display: block; width: 20px; height: 20px; overflow: hidden; border-radius: 50%; background: var(--tile-grey); }
.flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A hairline drawn over the flag, so white fields (Indonesia, Nepal) keep their edge */
.flag::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .2); }
.lang > summary .flag { width: 18px; height: 18px; }
/* Each language is shown by the first two letters of its own script (Aa for English), never by a flag */
.lg { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 5px; border-radius: 8px; background: rgba(var(--b-shadow), .07); color: inherit; font: 600 13px/1 var(--font-text); letter-spacing: 0; text-transform: none; white-space: nowrap; }
body.nav-dark .head-bar .lang > summary .lg { background: rgba(255, 255, 255, .14); }
.lang-opt .lg { background: var(--panel); color: var(--ink); }
.lang-opt[aria-current="true"] .lg { background: var(--lime); }
body.nav-dark .head-bar summary .flag::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.lang-pop { --focus: var(--b-primary); position: absolute; right: 0; top: calc(100% + 12px); z-index: 70; width: 214px; margin: 0; padding: 6px; list-style: none; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-lift); }
.lang-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: 400 15px/1.2 var(--font-text); text-align: left; cursor: pointer; }
.lang-opt:hover { background: var(--panel); }
.lang-opt[aria-current="true"] { font-weight: 600; }
.lang-opt .tick { width: 16px; height: 16px; margin-left: auto; color: var(--focus); }

.site-head { position: fixed; top: 14px; left: var(--page-pad); right: var(--page-pad); z-index: 80; }
/* The glass lives on a pseudo-element: backdrop-filter on the bar itself would trap the fixed mobile menu inside it */
.head-bar { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; height: var(--nav-h); padding: 0 10px 0 14px; border-radius: 18px; color: var(--ink); transition: color .35s ease; }
.head-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .74); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .08), 0 12px 32px -20px rgba(var(--b-shadow), .4); -webkit-backdrop-filter: saturate(150%) blur(18px); backdrop-filter: saturate(150%) blur(18px); transition: background-color .35s ease, box-shadow .35s ease; }
body.nav-dark .head-bar { color: #fff; --focus: var(--lime); }
body.nav-init .head-bar, body.nav-init .head-bar::before, body.nav-init .brand-mark * { transition: none; }
body.nav-dark .head-bar::before { background: rgba(var(--b-shadow), .58); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 32px -20px rgba(0, 0, 0, .7); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .head-bar::before { background: rgba(255, 255, 255, .96); }
  body.nav-dark .head-bar::before { background: rgba(var(--b-shadow), .94); }
}
.brand { display: flex; align-items: center; gap: 11px; flex: none; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-mark .m-pet { fill: var(--b-ink); transition: fill .35s ease; }
.brand-mark .m-dots { fill: #00d652; transition: fill .35s ease; }
.brand-mark .m-arc { fill: #00d652; }
body.nav-dark .head-bar .brand-mark .m-pet, body.nav-dark .head-bar .brand-mark .m-dots { fill: #fff; }
.brand-name { display: grid; gap: 4px; }
.bn-1 { font: 500 9.5px/1 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; }
.bn-2 { font: 500 19px/1 var(--font-display); letter-spacing: -0.035em; }

.nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; gap: 2px; list-style: none; }
.nav-top { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 11px; background: none; color: inherit; font: 500 14.5px/1 var(--font-text); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s; }
.nav-top .ico { width: 15px; height: 15px; margin-right: -3px; opacity: .7; transition: transform .2s; }
.nav-top[aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav-top:hover, .nav-top[aria-expanded="true"] { background: rgba(var(--b-shadow), .06); color: inherit; }
.nav .is-current > .nav-top { background: rgba(var(--b-shadow), .08); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .1); }
@media (min-width: 1241px) {
  body.nav-dark .nav-top:hover, body.nav-dark .nav-top[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
  body.nav-dark .nav .is-current > .nav-top { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
}
/* A section's panel: a light card under the bar, whatever the bar's tint */
.has-panel { position: relative; }
.nav-panel { --focus: var(--b-primary); position: absolute; top: calc(100% + 20px); left: 50%; z-index: 90; display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 6px; width: 660px; padding: 8px; border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .08), 0 32px 64px -30px rgba(var(--b-shadow), .5); transform: translateX(calc(-50% + var(--shift, 0px))); }
.nav-panel.no-intro { grid-template-columns: minmax(0, 1fr); width: 380px; }
@media (prefers-reduced-motion: no-preference) { .nav-panel:not([hidden]) { animation: np-in .22s cubic-bezier(.2, .7, .2, 1); } }
@keyframes np-in { from { opacity: 0; margin-top: -6px; } }
.np-intro { --focus: var(--lime); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; border-radius: 14px; background: var(--b-ink-surface); color: var(--b-ink-surface-ink); }
.np-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(100% 70% at 100% 115%, rgba(var(--b-map-rgb), .38), transparent 70%); }
.np-eyebrow { margin: 0; font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--b-primary); }
.np-lede { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .84); }
/* 22.2 (LIRNEasia, 20 Oct): the overview row read as part of the picture rather than a link. It is a
   button now — a bordered pill that lifts on hover, with the arrow travelling. */
.np-over { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: fit-content; margin-top: auto; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: #fff; font-weight: 500; font-size: 14.5px; text-decoration: none; transition: background-color .18s, box-shadow .18s; }
.np-over .ico { width: 16px; height: 16px; color: var(--lime); transition: transform .18s; }
.np-over:hover, .np-over:focus-visible { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px var(--lime); color: #fff; text-decoration: none; }
.np-over:hover .ico { transform: translateX(3px); }
.np-intro { margin-top: 0; }
.np-over:hover .ico { transform: translateX(3px); }
.np-list { list-style: none; display: grid; gap: 2px; align-content: start; }
.np-list a { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 9px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .15s; }
.np-list a:hover { background: var(--panel); color: var(--ink); }
.np-list a[aria-current="page"] { background: var(--lime-200); }
.np-ic { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--paper); color: var(--ink-2); transition: background-color .15s, color .15s; }
.np-list a:hover .np-ic, .np-list a[aria-current="page"] .np-ic { background: var(--b-ink-surface); color: var(--b-accent-on-dark); }
.np-ic .ico { width: 18px; height: 18px; }
.np-t { font-weight: 600; font-size: 15px; line-height: 1.25; }
.np-d { font-size: 13.5px; line-height: 1.35; color: var(--ink-3); }
.nav-foot { display: none; }
.sub-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-left: 6px; padding: 0 20px; border-radius: var(--r-pill); background: var(--lime); color: var(--b-accent-ink); font: 500 14.5px/1 var(--font-text); text-decoration: none; white-space: nowrap; transition: background-color .15s; }
.sub-pill:hover { background: var(--b-accent-600); color: var(--b-accent-ink); }
.sub-pill[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--b-accent-ink); }
.icon-link[aria-current="page"] { background: rgba(var(--b-shadow), .08); }
body.nav-dark .icon-link[aria-current="page"] { background: rgba(255, 255, 255, .16); }
.head-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.icon-link { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: inherit; }
.icon-link:hover, .lang > summary:hover { background: rgba(var(--b-shadow), .06); color: inherit; }
body.nav-dark .icon-link:hover, body.nav-dark .lang > summary:hover { background: rgba(255, 255, 255, .12); }
.menu-btn { display: none; }
body.nav-dark .menu-btn { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
body.nav-dark .menu-btn:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------- Shared section furniture */
.sec { padding-block: 72px; }
.sec + .sec { padding-top: 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 28px; }
.sec-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 2.6vw, 2.3rem); line-height: 1.1; letter-spacing: -0.012em; margin-top: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sec-lede { max-width: 34em; color: var(--ink-2); margin: 0; }
.more-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.more-link .ico { width: 18px; height: 18px; transition: transform .15s; }
.more-link:hover .ico { transform: translateX(3px); }

/* ---------------------------------------------------------------- Search box (repository) */
.searchbox { display: flex; align-items: center; gap: 6px; max-width: 680px; padding: 6px 6px 6px 20px; border-radius: var(--r-pill); background: var(--surface); border: 1.5px solid var(--ink); border-radius: 14px; }
.searchbox:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.searchbox > .ico { margin-left: 10px; color: var(--ink-3); }
.searchbox input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 18px; padding: 10px 6px; color: var(--ink); }
.searchbox input:focus { outline: none; }
.searchbox input::placeholder { color: var(--ink-3); opacity: 1; }
.searchbox input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

/* ---------------------------------------------------------------- Segmented control */
.seg { display: inline-flex; border: 1px solid var(--control); border-radius: var(--r-pill); background: var(--surface); padding: 3px; gap: 2px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.seg button:hover { background: var(--surface-2); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.seg .ico { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Tile map */
.tilemap { --tile: 56px; --gap: 6px; display: grid; grid-template-columns: repeat(7, var(--tile)); grid-template-rows: repeat(5, var(--tile)); gap: var(--gap); }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: 6px 7px 5px; border-radius: 7px; border: 1px solid transparent;
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .25s ease;
}
.tile-c { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; line-height: 1; }
.tile-n { font-size: 15px; font-weight: 700; line-height: 1; align-self: flex-end; font-variant-numeric: tabular-nums; }
.tile[data-bin="0"] { background: var(--surface); border-color: var(--rule-2); color: var(--ink-3); }
.tile[data-bin="1"] { background: var(--map-1); color: var(--ink); }
.tile[data-bin="2"] { background: var(--map-2); color: var(--ink); }
.tile[data-bin="3"] { background: var(--map-3); color: #fff; }
.tile[data-bin="4"] { background: var(--map-4); color: #fff; }
.tile[data-bin="5"] { background: var(--map-5); color: #fff; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(17, 22, 77, .7); color: inherit; }
.tile[data-bin="3"]:hover, .tile[data-bin="4"]:hover, .tile[data-bin="5"]:hover { color: #fff; }
.tile[data-bin="0"]:hover { color: var(--ink-3); }
.tile[aria-pressed="true"] { outline: 3px solid var(--turmeric-600); outline-offset: 2px; }
.tile[aria-pressed="true"]::after {
  content: ""; position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--turmeric-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat;
  box-shadow: 0 0 0 2px var(--paper);
}
.tile[aria-disabled="true"] { cursor: default; }
.tile[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.tile-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap;
  padding: 6px 9px; border-radius: 5px; opacity: 0; pointer-events: none; z-index: 10;
  transition: opacity .12s, transform .12s;
}
.tile-tip b { font-weight: 400; color: #c9cde3; }
.tile:hover .tile-tip, .tile:focus-visible .tile-tip { opacity: 1; transform: translate(-50%, 0); }
.tile.tip-r .tile-tip { left: auto; right: -2px; transform: translate(0, 4px); }
.tile.tip-l .tile-tip { left: -2px; transform: translate(0, 4px); }
.tile.tip-r:hover .tile-tip, .tile.tip-r:focus-visible .tile-tip, .tile.tip-l:hover .tile-tip, .tile.tip-l:focus-visible .tile-tip { transform: none; }
.tilemap.sm { --tile: 44px; --gap: 5px; }
.tilemap.sm .tile-c { font-size: 11px; }
.tilemap.sm .tile-n { font-size: 13px; }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.legend-scale { display: flex; gap: 2px; list-style: none; }
.legend-scale li { display: flex; flex-direction: column; gap: 4px; font-size: 12px; min-width: 34px; font-variant-numeric: tabular-nums; }
.legend-scale i { display: block; height: 10px; border-radius: 2px; }
.legend-zero i { background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-2); }

@media (prefers-reduced-motion: no-preference) {
  .tile.pop { animation: tile-in .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 28ms); }
  @keyframes tile-in { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------- Coverage glyph */
.glyph { width: 62px; height: auto; }
.glyph .g-on { fill: var(--map-3); }
.glyph .g-off { fill: var(--rule); }
.glyph .g-hl { fill: var(--lime); stroke: var(--b-ink); stroke-width: .8; }
.glyph-cap { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-3); text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------- Enabler icon (detail) */
.enabler-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--lime-300); color: var(--b-tag-ink); }
.enabler-ico .ico { width: 23px; height: 23px; }

/* ---------------------------------------------------------------- Report cover */
.cover {
  position: relative; aspect-ratio: 3 / 4; text-decoration: none; border-radius: 12px; padding: 18px 16px 16px 22px; overflow: hidden;
  background: var(--b-ink-surface); color: var(--b-ink-surface-ink); display: flex; flex-direction: column; justify-content: space-between;
}
.cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--lime); }
.cover .eyebrow { color: rgba(255, 255, 255, .7); }
.cover-title { font: 500 23px/1.08 var(--font-display); letter-spacing: -0.02em; margin: 10px 0 0; }
.cover .glyph { width: 100%; }
.cover .glyph .g-on { fill: var(--lime); }
.cover .glyph .g-off { fill: rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------- Cards (listing, related, side) */
.card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 24px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 20px;
  transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: var(--rule-2); box-shadow: var(--shadow-lift); }
.card:focus-within { border-color: var(--b-primary); }
/* The card's top line: what it is on the left, how far along and when on the right, in one quiet voice */
.card-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; font: 500 10.5px/1.5 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.cm-l, .cm-r { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.cm-r { margin-left: auto; justify-content: flex-end; } /* stays at the right even when the line wraps */
.cm-c { display: inline-flex; align-items: center; gap: 8px; } /* where it is: the flag, then the place */
.cm-c .tflag { width: 15px; height: 15px; }
.cm-c .tflag + .tflag { margin-left: -9px; box-shadow: 0 0 0 1.5px var(--surface); }
.cm-l > * + *, .cm-r > * + * { position: relative; padding-left: 13px; }
.cm-l > * + *::before, .cm-r > * + *::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: var(--rule-2); }
.type { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ink); }
.type .ico { width: 15px; height: 15px; color: var(--b-primary); }
.cid { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-3); }
.card-meta .cid { font-size: inherit; letter-spacing: inherit; }
.acc { display: inline-flex; align-items: center; gap: 6px; }
.acc .ico { width: 14px; height: 14px; }
.card h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.22; letter-spacing: -0.004em; margin: 8px 0 6px; text-wrap: pretty; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.card h3 a:hover { text-decoration: none; }
.card h3 a:focus-visible { outline: none; }
.card h3 a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.card-s { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.card-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.card-when { display: none; margin: 8px 0 0; font: 500 13px/1.3 var(--font-text); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.card-when .cw-d { display: inline-block; width: 5px; height: 5px; margin: 0 8px 1px; border-radius: 50%; background: var(--rule-2); }
/* A card in the card view, per the Figma frame: the kind, where it is, the title, when, the summary, its tags */
.lst .list.is-cards .card.nc, .rel-grid .card.nc { padding: 25px 24px 27px; border-radius: 24px; }
.lst .list.is-cards .card-when, .rel-grid .card-when { display: block; }
.lst .list.is-cards .cm-l .type, .rel-grid .cm-l .type { font: 600 14px/1.15 var(--font-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.lst .list.is-cards .cm-l > * + *, .rel-grid .cm-l > * + * { display: none; }
.lst .list.is-cards .card h3, .rel-grid .card h3 { margin: 18px 0 0; font-size: 20px; line-height: 1.22; letter-spacing: -0.02em; }
.lst .list.is-cards .card-s, .rel-grid .card-s { margin-top: 18px; font-size: 15.5px; line-height: 1.5; color: var(--ink-3); }
.lst .list.is-cards .card-tags, .rel-grid .card-tags { gap: 8px; }
.lst .list.is-cards .tagbtn, .rel-grid .tagbtn { min-height: 28px; padding: 0 10px; font-size: 13.5px; }
.tagmore { display: inline-flex; align-items: center; min-height: 28px; padding: 0 4px; font: 500 13.5px/1 var(--font-text); color: var(--ink-3); }
.card-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 2px; }
.card.compact { padding: 16px 18px; grid-template-columns: minmax(0, 1fr); }
.card.compact h3 { font-size: 18.5px; margin: 6px 0 4px; }
.card.compact .card-s { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.tagbtn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px;
  border: 0; border-radius: 999px; background: var(--paper);
  font: 500 13.5px/1 var(--font-text); color: #626262; cursor: pointer; text-decoration: none;
  transition: background-color .18s, color .18s;
}
.tagbtn .ico { width: 14px; height: 14px; }
.tagbtn:hover { background: var(--surface-2); color: var(--ink); }
.tagbtn.is-on { background: var(--lime-200); color: var(--ink); }
.tflag { position: relative; flex: none; display: block; width: 16px; height: 16px; overflow: hidden; border-radius: 50%; background: var(--tile-grey); }
.tflag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tflag::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .16); }
/* Bangladesh's disc sits toward the hoist, so a round badge leaves two circles that are not concentric
   and the eye reads it as a mistake. The crop moves onto the disc; the field colour behind it covers the
   sliver that opens at the edge. The flag itself is untouched — this is where the round crop is taken. */
.tflag[data-f="bd"] { background: #006a4e; }
.tflag[data-f="bd"] img { transform: translateX(5.08%); }
.ch-flag .tflag, .on-dark .tflag { box-shadow: 0 0 0 2px rgba(255, 255, 255, .92); }
.lh .tflag { box-shadow: 0 0 0 2px rgba(var(--b-shadow), .14); }
.lh .tflag::after, .ch-flag .tflag::after, .on-dark .tflag::after { box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .1); }

.stage { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ink-2); }
.stage i { display: inline-flex; gap: 2px; }
.stage i b { width: 4px; height: 11px; border-radius: 1px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule-2); }
.stage[data-v="1"] i b:nth-child(-n+1), .stage[data-v="2"] i b:nth-child(-n+2), .stage[data-v="3"] i b:nth-child(-n+3) { background: var(--map-3); box-shadow: none; }
.stage .ico { width: 14px; height: 14px; }

.datechip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; min-height: 62px; border: 1px solid var(--ink); border-radius: 6px; background: var(--surface); line-height: 1; flex: none; }
.datechip b { font-size: 24px; font-weight: 700; }
.datechip span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; margin-top: 5px; }
.deadline { font-weight: 700; color: var(--ink); }
.deadline.soon { color: var(--red-700); }

/* ---------------------------------------------------------------- Home */
/* One continuous page: sections sit on the same surface, divided by space and a hairline */
.page { padding: 0 var(--page-pad); }
.page > * { min-width: 0; }
.blk { padding: clamp(72px, 9vw, 128px) 0; }
.sec-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.sec-note { max-width: 25em; margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.kicker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 24px; }
.kicker-row .kicker { margin: 0; }
.kicker-row .ptag { margin-block: -8px; }
.kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0; font: 500 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
/* Mini titles: one terracotta label across every section (Figma: Our working definition) */
.kicker-row .kicker, .sec-head .kicker, .page-head .eyebrow, .sec-head .eyebrow { color: var(--b-accent-2); }
.sec-head .eyebrow { margin-bottom: 24px; }
.on-dark .kicker-row .kicker { color: #e87752; }
.h2 { margin: 0; max-width: 21em; font: 500 var(--h2-size)/1.04 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.muted { color: var(--b-accent-line); background: linear-gradient(90deg, var(--b-accent-line) 4.93%, var(--b-grad-end) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (forced-colors: active) { .muted { -webkit-text-fill-color: currentColor; background: none; } }

/* Hero: edge to edge, under the floating navigation */
.hero3 { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; column-gap: clamp(24px, 4vw, 72px); min-height: max(720px, 100svh); padding: calc(var(--nav-h) + 14px + clamp(40px, 7vh, 88px)) var(--page-pad) clamp(48px, 8vh, 96px); background: var(--b-ground); color: var(--b-hero-ink); --focus: var(--b-primary); }
.hero3-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(var(--b-hero-scrim), .9) 0%, rgba(var(--b-hero-scrim), .5) 34%, rgba(var(--b-hero-scrim), 0) 58%),
    radial-gradient(circle at var(--gx, 74%) var(--gy, 64%), rgba(var(--b-hero-wash), .3) 0, rgba(var(--b-hero-wash), .24) calc(var(--gr, 440px) * .6), rgba(var(--b-hero-wash), .15) var(--gr, 440px), rgba(var(--b-hero-wash), .08) calc(var(--gr, 440px) * 1.3), rgba(var(--b-hero-wash), .035) calc(var(--gr, 440px) * 1.7), rgba(var(--b-hero-wash), 0) calc(var(--gr, 440px) * 2.2)),
    radial-gradient(60% 50% at 100% 104%, rgba(238, 234, 214, .14), rgba(238, 234, 214, 0) 70%),
    var(--b-hero-ramp); }
/* ---------------------------------------------------------------------------
   Button motion. One idea, three weights: the control lifts a little, a sheen
   crosses a filled one, and an arrow leans into the direction it points. A press
   puts it straight back down, so the click feels like it landed.
   --------------------------------------------------------------------------- */
.btn:hover, .sub-pill:hover, .hs-go:hover, .btn-arrow:hover, .btn-view:hover, .corner-btn:hover {
  transform: translateY(-1.5px); }
.btn:active, .sub-pill:active, .hs-go:active, .btn-arrow:active, .btn-view:active {
  transform: translateY(0) scale(.985); transition-duration: .08s; }

/* The sheen: a soft diagonal band parked off the left edge that crosses once per hover. */
.btn-primary::after, .btn-lime::after, .sub-pill::after, .hs-go::after, .btn-arrow::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .22) 46%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, .22) 54%, transparent 68%);
  transform: translateX(-120%); }
.btn-primary:hover::after, .btn-lime:hover::after, .sub-pill:hover::after, .hs-go:hover::after, .btn-arrow:hover::after {
  transform: translateX(120%); transition: transform .62s cubic-bezier(.3, .7, .3, 1); }

.sub-pill, .hs-go, .btn-arrow, .btn-view, .corner-btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-color .2s, border-color .2s, color .2s,
    transform .22s cubic-bezier(.2, .9, .3, 1.2), box-shadow .22s ease; }
.btn-primary:hover, .btn-lime:hover, .sub-pill:hover, .hs-go:hover {
  box-shadow: 0 10px 22px -12px rgba(var(--b-accent-rgb), .75); }
.btn-arrow:hover { box-shadow: 0 10px 22px -12px rgba(var(--b-shadow), .6); }

/* Quiet and ghost fill from the centre out rather than snapping. */
.btn-quiet::before, .btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--surface-2); transform: scaleX(.2); opacity: 0;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .25s ease; }
.btn-quiet:hover::before, .btn-ghost:hover::before { transform: scaleX(1); opacity: 1; }

/* An arrow leans the way it points; the corner button's turns a little instead. */
.btn .ico:last-child, .hs-go .ico, .btn-view .ico { transition: transform .26s cubic-bezier(.2, .9, .3, 1.3); }
.btn:hover .ico:last-child, .hs-go:hover .ico, .btn-view:hover .ico { transform: translateX(4px); }
.corner-btn { transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), background-color .2s; }
.corner-btn:hover { transform: translateY(-1.5px) rotate(45deg); }
.nc:hover .corner-btn { transform: translateY(-1.5px) rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .btn, .sub-pill, .hs-go, .btn-arrow, .btn-view, .corner-btn,
  .btn .ico:last-child, .hs-go .ico, .btn-view .ico { transition-duration: .01ms; }
  .btn:hover, .sub-pill:hover, .hs-go:hover, .btn-arrow:hover, .btn-view:hover, .corner-btn:hover { transform: none; }
  .btn-primary::after, .btn-lime::after, .sub-pill::after, .hs-go::after, .btn-arrow::after { display: none; }
}

/* ---------------------------------------------------------------------------
   Announcement banner: one line above the header, the brand red, a text button
   at its end and a dismiss. It pushes the fixed header and the hero down by its
   own height rather than overlapping them.
   --------------------------------------------------------------------------- */
.annc { position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: var(--annc-h, 40px); padding: 8px calc(var(--page-pad) + 34px) 8px var(--page-pad);
  background: var(--b-accent); color: var(--b-accent-ink);
  font: 500 13.5px/1.35 var(--font-text); text-align: center; }
.annc b { font-weight: 600; }
.annc-cta { display: inline-flex; align-items: center; gap: 6px; flex: none;
  color: var(--b-accent-ink); font-weight: 600; text-decoration: underline;
  text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
.annc-cta:hover { color: var(--b-accent-ink); text-decoration-thickness: 2.5px; }
.annc-cta .ico { width: 15px; height: 15px; transition: transform .26s cubic-bezier(.2, .9, .3, 1.3); }
.annc-cta:hover .ico { transform: translateX(4px); }
.annc-x { position: absolute; right: calc(var(--page-pad) - 4px); top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: var(--b-accent-ink); cursor: pointer;
  transition: background-color .18s; }
.annc-x:hover { background: rgba(255, 255, 255, .28); }
.annc-x .ico { width: 14px; height: 14px; }
.annc :focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
/* before the script runs, reserve the band so nothing jumps on first paint */
:root.pre-annc body { --annc-h: 40px; }
:root.pre-annc .site-head { top: calc(var(--annc-h) + 14px); }
body.has-annc { --annc-h: 40px; }
body.has-annc .site-head { top: calc(var(--annc-h) + 14px); }
body.has-annc .hero3, body.has-annc .page-head { padding-top: calc(var(--annc-h) + var(--nav-h) + 14px + clamp(40px, 7vh, 88px)); }
body.has-annc .lh { scroll-margin-top: calc(var(--annc-h) + var(--nav-h)); }
@media (max-width: 760px) {
  body.has-annc { --annc-h: 56px; }
  .annc { font-size: 12.5px; flex-wrap: wrap; gap: 4px 10px; }
}

/* ---------------------------------------------------------------------------
   Hero approach two: a printed plate instead of the drawn globe (LIRNEasia 5.3).
   The image sits where the globe sits and is masked away from the copy, so the
   headline keeps the same clean ground either way. One attribute swaps them.
   --------------------------------------------------------------------------- */
.hero-plate { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-plate img { position: absolute; right: -2%; top: 50%; width: 76%; min-width: 760px; height: auto;
  transform: translateY(-50%); opacity: .96;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 14%, #000 34%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .06) 14%, rgba(0, 0, 0, .3) 29%, rgba(0, 0, 0, .74) 43%, #000 53%, #000 81%, rgba(0, 0, 0, .5) 91%, transparent 99%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 14%, #000 34%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .06) 14%, rgba(0, 0, 0, .3) 29%, rgba(0, 0, 0, .74) 43%, #000 53%, #000 81%, rgba(0, 0, 0, .5) 91%, transparent 99%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
:root[data-heroart="image"] .globe { display: none; }
:root:not([data-heroart="image"]) .hero-plate { display: none; }
/* the plate carries its own warm paper, so the ramp under it steps back */
:root[data-heroart="image"] { --b-hero-wash: 246, 236, 226; }
@media (max-width: 860px) {
  .hero-plate img { right: -18%; top: auto; bottom: 0; width: 150%; min-width: 0; transform: none; opacity: .5; }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-heroart="image"] .hero-plate img { animation: plate-in 1.1s cubic-bezier(.2, .8, .2, 1) both; }
  :root[data-heroart="image"] .hero-plate img.is-swap { animation: plate-in .5s ease both; }
  @keyframes plate-in { from { opacity: 0; transform: translateY(-50%) scale(1.03); } to { opacity: .96; transform: translateY(-50%) scale(1); } }
}
.pd-link { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #fff; font: 500 10.5px/1 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.pd-link:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.pd-art { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.pd-art button { min-height: 22px; padding: 0 9px; border: 0; border-radius: 999px; background: none;
  color: rgba(255, 255, 255, .78); font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; }
.pd-art button:hover { color: #fff; }
.pd-art button[aria-pressed="true"] { background: var(--b-accent); color: var(--b-accent-ink); }

/* ---------------------------------------------------------------------------
   The feedback review page. Every point from the 20 October document, and where
   a point changed something visible, a wipe between the build they reviewed and
   the build today. The handle is a real range input, so it takes arrow keys.
   --------------------------------------------------------------------------- */
.fbk-page { padding-bottom: clamp(64px, 8vw, 110px); }
.fbk-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.fbk-f { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 15px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2);
  font: 500 13.5px/1 var(--font-text); cursor: pointer; transition: background-color .18s, color .18s; }
.fbk-f:hover { background: var(--surface); color: var(--ink); }
.fbk-f.is-on { background: var(--b-solid); color: var(--b-solid-ink); }
.fbk-f.is-on .dot { display: none; }
.fbk-f b { font: 500 11.5px/1 var(--font-mono); }
.fbk-f .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fbk-f .p-ok { background: var(--b-ok-ink); } .fbk-f .p-wait { background: var(--b-accent-2); }
.fbk-f .p-build { background: var(--b-accent); } .fbk-f .p-talk { background: var(--b-ink-3); }
.fbk-f .p-none { background: var(--rule-2); }

.fbk-part + .fbk-part { margin-top: clamp(48px, 6vw, 80px); }
.fbk-pt { margin: 0 0 8px; font: 500 clamp(1.5rem, 2.2vw, 2rem)/1.1 var(--font-display); letter-spacing: -0.03em; }
.fbk-pt span { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); vertical-align: middle; }
.fbk-area { margin-top: clamp(28px, 3.4vw, 44px); }
.fbk-an { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--rule); font: 500 18px/1.2 var(--font-display); letter-spacing: -0.02em; }
.fbk-an span { font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--b-primary); }
.fbk-list { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.fbk-i { padding: 20px 22px 22px; border-radius: 18px; background: var(--b-surface); box-shadow: inset 0 0 0 1px var(--rule); }
.fbk-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.fbk-id { font: 500 12px/1.5 var(--font-mono); color: var(--b-primary); }
.fbk-t { margin: 0; font-size: 16.5px; line-height: 1.45; color: var(--ink); }
.fbk-m { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); }
.fbk-m b { font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.fbk-n { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.fbk-n p { margin: 0 0 10px; } .fbk-n p:last-child { margin-bottom: 0; }
.fbk-n b { color: var(--ink); } .fbk-n code { font: 500 13px/1 var(--font-mono); color: var(--b-primary); }
.fbk-foot { margin: clamp(44px, 5vw, 70px) 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

.pill { flex: none; padding: 5px 11px; border-radius: var(--r-pill); font: 500 10.5px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.p-ok { background: var(--b-ok-bg); color: var(--b-ok-ink); }
.p-wait { background: var(--b-tint-100); color: var(--b-tag-ink); }
.p-build { background: var(--b-accent-200); color: var(--b-accent-600); }
.p-talk { background: var(--b-neutral-2); color: var(--b-ink-2); }
.p-none { background: var(--surface-2); color: var(--ink-3); }

/* The review page carries no site navigation: it is a working surface, not a page of the site. */
body.bare .site-head, body.bare .site-foot, body.bare .annc { display: none; }
body.bare { --annc-h: 0px; }
body.bare #main { padding-top: 0; }

/* The review page's own bar: where it is, what it is, and which statuses are showing.
   It stays at the top so the filter never scrolls away from ninety points of list. */
.fbk-top { position: sticky; top: 0; z-index: 60;
  padding: 12px clamp(16px, 4vw, 48px) 12px;
  background: rgba(var(--b-veil), .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule); }
.fbk-top-in { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); }
.fbk-title { flex: 1 1 auto; min-width: 0; margin: 0; font: 500 clamp(1rem, 1.5vw, 1.3rem)/1.2 var(--font-display);
  letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbk-ver { flex: none; display: flex; align-items: baseline; gap: 9px; margin: 0;
  font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--b-primary); }
.fbk-ver span { color: var(--ink-3); }
.fbk-back { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px;
  border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink-2); font: 500 11.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: color .18s, box-shadow .18s, transform .22s cubic-bezier(.2,.9,.3,1.2); }
.fbk-back:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); transform: translateY(-1.5px); }
.fbk-back .ico { width: 15px; height: 15px; transform: rotate(180deg); }
.fbk-page { padding-top: clamp(28px, 3.4vw, 44px); }
@media (max-width: 760px) {
  .fbk-top-in { flex-wrap: wrap; }
  .fbk-title { order: 3; flex-basis: 100%; white-space: normal; }
  .fbk-back { order: 1; } .fbk-ver { order: 2; margin-left: auto; }
}

/* the wipe */
.ba { margin: 18px 0 0; }
.ba-w { position: relative; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--rule); line-height: 0; }
.ba-img { display: block; width: 100%; height: auto; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--p, 50%)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--p, 50%); width: 2px; margin-left: -1px;
  background: var(--b-accent); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); pointer-events: none; }
.ba-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--b-accent);
  box-shadow: 0 2px 10px rgba(var(--b-shadow), .4); }
.ba-tag { position: absolute; top: 10px; z-index: 2; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(var(--b-shadow), .72); color: #fff; font: 500 10px/1.4 var(--font-mono);
  letter-spacing: .09em; text-transform: uppercase; pointer-events: none; }
.ba-tl { left: 10px; } .ba-tr { right: 10px; }
.ba-r { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0;
  background: none; appearance: none; cursor: ew-resize; opacity: 0; }
.ba-r:focus-visible { opacity: 1; outline: 3px solid var(--focus); outline-offset: -3px; }
.ba figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 680px) {
  .fbk-h { grid-template-columns: auto minmax(0, 1fr); }
  .fbk-h .pill { grid-column: 2; justify-self: start; }
  .fbk-bar { position: static; }
}

/* ---------------------------------------------------------------------------
   Category landing pages (LIRNEasia 19). The head says what the output type is
   for and counts itself from the record; a featured band says where to start;
   the browser follows under its own heading.
   --------------------------------------------------------------------------- */
.lh-cat .lh-say { max-width: 44em; }
.lh-intro { margin: 18px 0 0; max-width: 40em; font-size: 16.5px; line-height: 1.62; color: var(--ink-2); }
.lh-does { list-style: none; display: grid; gap: 9px; margin: 20px 0 0; padding: 0; max-width: 40em; }
.lh-does li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px;
  font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.lh-does .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--b-primary); }
.lh-stats { display: flex; flex-wrap: wrap; gap: 10px 46px; margin: clamp(26px, 3vw, 40px) 0 0;
  padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--rule); }
.lh-stats div { display: flex; flex-direction: column-reverse; gap: 4px; }
.lh-stats dt { font: 500 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lh-stats dd { margin: 0; font: 300 clamp(2rem, 3vw, 2.8rem)/1 var(--font-display); letter-spacing: -0.04em; color: var(--b-primary); }

.cat-feat { padding: clamp(44px, 5.5vw, 76px) 0 clamp(8px, 1vw, 16px); }
.cat-feat-top { align-items: flex-end; }
.cat-feat .sec-lede { margin-top: 10px; }
.cat-grid { margin-top: clamp(26px, 3vw, 38px); }
.cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat-grid > li { grid-column: auto; }
.cat-browse { margin-top: clamp(48px, 6vw, 86px); padding-top: clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--rule); }
.cat-browse .h2 { margin: 0; }
.cat-browse .sec-lede { margin: 12px 0 0; }
.cat-browse + .repo-grid { margin-top: clamp(22px, 2.6vw, 34px); }
@media (max-width: 900px) { .cat-grid { grid-template-columns: minmax(0, 1fr); } }

/* The hero's first frame, painted from index.html before any script runs. Same classes, so it is
   the same picture; app.innerHTML replaces it on the first render. Its own animations are off, so
   nothing moves between the two. */
.hero3-pre .hero-plate img { animation: none; }
.hero3-pre .hero3-copy > * { animation: none; opacity: 1; transform: none; }
.hero3-pre .hsearch { min-height: 60px; }
.hero3-pre .hs-pre { flex: 1; }
.hero3-pre .hs-pre-go { min-height: 48px; padding: 0 22px 0 26px; align-items: center; }
.hero3-pre .hero2-try a { pointer-events: none; }

/* Work in progress, said on the surface itself. Amber so it cannot be mistaken for content, and
   it links to the point in the feedback review that explains it. */
.wip { display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 0; padding: 5px 11px 5px 10px;
  border-radius: var(--r-pill); background: #fdf0d8; color: #6b4708;
  box-shadow: inset 0 0 0 1px #e8cf9c;
  font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: box-shadow .18s, transform .22s cubic-bezier(.2, .9, .3, 1.2); }
.wip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c98a12; }
.wip b { font-weight: 500; letter-spacing: .04em; }
.wip:hover { color: #6b4708; box-shadow: inset 0 0 0 1px #c98a12; transform: translateY(-1.5px); }
.hero3-copy .wip { margin-top: 16px; }
.sec-top .wip, .lh-say .wip { margin-top: 12px; }

.hero3-bg::after { content: ""; position: absolute; inset: 0; opacity: .2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.hero3-bg .orb { position: absolute; border-radius: 50%; filter: blur(50px); }
.hero3-bg .o2 { width: 30vmax; height: 30vmax; left: -6%; bottom: -16%; background: radial-gradient(circle, rgba(var(--b-globe-glow), .32), transparent 68%); }
@media (prefers-reduced-motion: no-preference) {
  .hero3-bg .o2 { animation: drift 30s ease-in-out infinite alternate-reverse; }
  @keyframes drift { to { transform: translate3d(-4%, 5%, 0) scale(1.08); } }
}
.hero3-copy { position: relative; z-index: 1; grid-column: 1; grid-row: 1; max-width: 880px; }
.hero3 h1 { max-width: 12.5em; margin: 0 0 24px; font: 500 var(--h1-size)/.98 var(--font-display); letter-spacing: -0.04em; text-wrap: balance; }

/* The globe: a canvas across the whole hero (globe.js draws it), with the card and controls on top */
.globe { position: absolute; inset: 0; z-index: 0; }
.globe canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The bottom of the globe dissolves into the background: the land fades out as a blurred copy
   fades in and away again. Pins, lines and cards stay sharp. globe.js sets the band. */
.g-land { -webkit-mask-image: linear-gradient(to bottom, #000 var(--fade-a, 75%), transparent var(--fade-b, 100%)); mask-image: linear-gradient(to bottom, #000 var(--fade-a, 75%), transparent var(--fade-b, 100%)); }
/* The veil: the lower hero eases into the dark ground the stats sit on (smoothstep stops, no hard edges) */
.g-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(var(--b-veil), 0.000) 48.7%, rgba(var(--b-veil), 0.028) 53.0%, rgba(var(--b-veil), 0.104) 57.4%, rgba(var(--b-veil), 0.216) 61.7%, rgba(var(--b-veil), 0.352) 66.1%, rgba(var(--b-veil), 0.500) 70.4%, rgba(var(--b-veil), 0.648) 74.7%, rgba(var(--b-veil), 0.784) 79.1%, rgba(var(--b-veil), 0.896) 83.4%, rgba(var(--b-veil), 0.972) 87.8%, rgba(var(--b-veil), 1.000) 92.1%); }
.g-haze { filter: blur(7px); -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-a, 75%), #000 var(--fade-m, 87%), transparent var(--fade-b, 100%)); mask-image: linear-gradient(to bottom, transparent var(--fade-a, 75%), #000 var(--fade-m, 87%), transparent var(--fade-b, 100%)); }
.globe-slot { display: none; }
.gcard { position: absolute; left: 0; top: 0; z-index: 1; display: grid; gap: 7px; width: min(340px, calc(100vw - 2 * var(--page-pad))); padding: 12px 16px 13px; border-radius: 14px; background: var(--b-surface); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .10), 0 20px 40px -24px rgba(var(--b-shadow), .34); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .35s ease, box-shadow .2s; will-change: transform; }
.gcard.on { opacity: 1; pointer-events: auto; cursor: pointer; }
.gcard.on:hover { box-shadow: inset 0 0 0 1px rgba(var(--b-accent-rgb), .55), 0 20px 40px -24px rgba(0, 0, 0, .8); }
.gcard .sf-label { padding-right: 24px; }
.gcard .sf-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.gc-go { position: absolute; top: 10px; right: 11px; width: 16px; height: 16px; fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: opacity .2s, transform .2s; }
.gcard.on:hover .gc-go { opacity: 1; transform: translate(1px, -1px); }
.gp-play { display: none; }
body.motion-paused .gp-pause { display: none; }
body.motion-paused .gp-play { display: inline; }
/* Pause stops every moving part of the page, not just the globe */
body.motion-paused .hero3-bg .orb { animation-play-state: paused; }
body.motion-paused .sf-label::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .sf-label::before, .sf-body.in { animation: none; } }
.sf-label { display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--b-primary); }
.sf-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--b-primary); animation: live-dot 1.8s ease-out infinite; }
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(var(--b-accent-rgb), .55); } 100% { box-shadow: 0 0 0 9px rgba(var(--b-accent-rgb), 0); } }
.sf-body { display: grid; gap: 4px; min-width: 0; }
.sf-body.in { animation: sf-in .55s ease both; }
@keyframes sf-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.sf-meta { overflow: hidden; font: 500 10.5px/1.25 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.sf-title { overflow: hidden; font-size: 14.5px; line-height: 1.3; color: var(--b-ink); white-space: nowrap; text-overflow: ellipsis; }

.hero2-lede { max-width: 33em; margin: 0 0 34px; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.55; color: var(--b-hero-ink-2); }
.hsearch { display: flex; align-items: center; gap: 8px; max-width: 660px; padding: 6px 6px 6px 22px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); box-shadow: 0 28px 56px -30px rgba(0, 0, 0, .7); --focus: var(--b-primary); }
.hsearch:focus-within { outline: 3px solid var(--lime); outline-offset: 3px; }
.hsearch > .ico { width: 21px; height: 21px; color: var(--ink-3); }
.hsearch input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 4px; font: 400 18px/1.3 var(--font-text); color: var(--ink); }
.hsearch input:focus { outline: none; }
.hsearch input::placeholder { color: var(--ink-3); opacity: 1; }
.hsearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.hs-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: none; min-height: 48px; padding: 0 22px 0 26px; border: 0; border-radius: var(--r-pill); background: var(--lime); color: var(--b-accent-ink); font: 500 15.5px/1 var(--font-text); cursor: pointer; transition: background-color .15s; }
.hs-go:hover { background: var(--b-accent-600); }
.hs-go .ico { width: 18px; height: 18px; }
.hero2-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--b-hero-ink-2); }
.hero2-try > span { margin-right: 2px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.hero2-try a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--b-hero-chip-line); background: var(--b-hero-chip); color: var(--b-on-hero); font-weight: 500; text-decoration: none; backdrop-filter: blur(6px); transition: background .15s, border-color .15s; }
.hero2-try a:hover { background: var(--b-hero-chip); border-color: var(--b-primary); color: var(--b-hero-ink); }

/* The region: a white sheet the hero's green fades into, with a centred title over a map of the nineteen countries.
   One flat ground: the long ramp to white left a visible seam where it met the flat colour. */
.region { --fade: clamp(220px, 22vw, 330px); position: relative; padding: calc(var(--fade) * .46) var(--page-pad) clamp(72px, 8vw, 112px);
  background: var(--b-ground); }
/* The nav stays dark over the darker part of the fade */
.region-fade { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--fade) * .34); pointer-events: none; }
/* A centred section head: kicker, title, then the description beneath (the region, the six enablers) */
.region-head, .sec-center { max-width: 880px; margin: 0 auto; text-align: center; }
.region-head .kicker-row, .sec-center .kicker-row { justify-content: center; }
.region-head .h2, .sec-center .h2 { margin-inline: auto; }
.region-lede, .sec-lede { max-width: 38em; margin: 20px auto 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.rmap { position: relative; }
.rmap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 27%; pointer-events: none; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
.rm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rm-land { fill: #e6e8e3; }
/* Countries: fill by documented use cases (the same five greens as before); white hairlines between neighbours */
.rm-c { --f: #fff; --sc: #fff; --sw: .8; cursor: pointer; outline: none; }
.rm-c[data-bin="0"] { --sc: var(--b-soft); }
.rm-c[data-bin="1"] { --f: var(--map-1); }
.rm-c[data-bin="2"] { --f: var(--map-2); }
.rm-c[data-bin="3"] { --f: var(--map-3); }
.rm-c[data-bin="4"] { --f: var(--map-4); }
.rm-c[data-bin="5"] { --f: var(--map-5); }
.rm-c path, .rm-c > circle:not(.rm-ring) { fill: var(--f); stroke: var(--sc); stroke-width: var(--sw); stroke-linejoin: round; transition: fill .2s; }
.rm-ring { fill: rgba(var(--b-map-rgb), .13); stroke: var(--map-2); stroke-width: .7; stroke-dasharray: 2 1.6; }
.rm-c:focus-visible { --sc: var(--b-primary); --sw: 2.2; }
/* Copies drawn on top: the pointed-at country lifts with a deeper shadow; the selected one gets an ink outline */
/* Hover: a copy of the country, drawn on top, eases up while a blurred shadow eases in beneath it */
.rm-his, .rm-sels { pointer-events: none; }
.rm-hi { --f: #fff; --sc: #fff; }
.rm-hi[data-bin="0"] { --sc: var(--b-soft); }
.rm-hi[data-bin="1"] { --f: var(--map-1); }
.rm-hi[data-bin="2"] { --f: var(--map-2); }
.rm-hi[data-bin="3"] { --f: var(--map-3); }
.rm-hi[data-bin="4"] { --f: var(--map-4); }
.rm-hi[data-bin="5"] { --f: var(--map-5); }
.rm-hi-top path, .rm-hi-top > circle:not(.rm-ring) { fill: var(--f); stroke: var(--sc); stroke-width: 1.1; stroke-linejoin: round; }
.rm-hi-sh path, .rm-hi-sh > circle { fill: var(--b-ground); stroke: none; }
.rm-hi-sh .rm-ring { display: none; }
.rm-hi-top, .rm-hi-sh { transition: transform .55s cubic-bezier(.22, .9, .3, 1), opacity .45s ease; }
.rm-hi-sh { opacity: 0; }
.rm-hi.up .rm-hi-top { transform: translateY(-4px); }
.rm-hi.up .rm-hi-sh { opacity: .24; transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) { .rm-hi-top, .rm-hi-sh { transition: none; } }
/* The selected country keeps an ink outline */
.rm-selc path, .rm-selc > circle:not(.rm-ring) { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.rm-selc .rm-ring { display: none; }
.rm-labs { pointer-events: none; }
.rm-lab text { font: 500 9.2px/1 var(--font-mono); letter-spacing: .07em; fill: var(--ink); }
.rm-lab.inv text { fill: #fff; }
.rm-lab.out text { fill: var(--ink-2); }
.rm-lead { fill: none; stroke: var(--ink-3); stroke-width: .55; }
.rm-pin { fill: var(--ink-3); }
/* The short read follows the pointer, in the hero globe's card style */
.rm-tip { position: absolute; left: 0; top: 0; z-index: 4; display: grid; gap: 7px; width: 290px; padding: 12px 16px 13px; border-radius: 14px; background: rgba(var(--b-shadow), .96); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 44px -24px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.rm-tip.on { opacity: 1; }
.rm-tip .sf-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
/* The tooltip is the one place .sf-* sits on an inverted panel, so every line is re-inked for it. */
.rm-tip .sf-label { color: var(--b-accent-on-dark); }
.rm-tip .sf-label::before { background: var(--b-accent-on-dark); }
.rm-tip .sf-meta { color: rgba(255, 255, 255, .78); }
.rm-tip .sf-title { color: var(--b-ink-surface-ink); }
.rm-tip-hint { font: 500 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .64); }
/* The full record, in a card beside the country */
.rm-pop { position: absolute; left: 0; top: 0; z-index: 5; display: grid; gap: 14px; width: 404px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); overflow: auto; padding: 22px; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06), 0 34px 70px -30px rgba(var(--b-shadow), .5); overscroll-behavior: contain; }
.rm-pop[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .rm-pop:not([hidden]) { animation: rm-in .28s cubic-bezier(.2, .8, .2, 1) both; } }
@keyframes rm-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.rm-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color .15s; }
.rm-x:hover { background: #e6e4dc; }
.rm-x .ico { width: 16px; height: 16px; }
.rm-head { display: grid; gap: 8px; padding-right: 40px; }
.rm-k { margin: 0; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--b-accent-2); }
.rm-name { margin: 0; font: 500 32px/1 var(--font-display); letter-spacing: -0.035em; outline: none; }
.rm-sum { margin: 0; font-size: 14px; color: var(--ink-3); }
.rm-fam { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; }
.rm-fam a, .rm-fam .is-zero { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; height: 100%; min-height: 60px; padding: 9px 10px; border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; transition: background-color .15s; }
.rm-fam a:hover { background: var(--lime-200); color: var(--ink); }
.rm-fam .n { font: 500 21px/1 var(--font-display); letter-spacing: -0.03em; }
.rm-fam .l { font: 500 9.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rm-fam .is-zero .n { color: var(--muted); }
.rm-sec { display: grid; gap: 6px; }
.rm-sec .rd-label { margin: 0; }
.rm-bars { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.rm-bars li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 20px; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.rm-bars .l { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rm-bars .bar { height: 6px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.rm-bars .bar i { display: block; height: 100%; border-radius: 3px; background: var(--map-2); }
.rm-bars .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.rm-pop .rd-recent li { padding: 7px 0; }
.rm-pop .rd-recent a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; }
.rm-pop .rd-recent span { font-size: 12.5px; }
.rm-pop .rd-recent li:last-child { border-bottom: 0; padding-bottom: 0; }
.region .map-foot { margin: 16px 0 0; }

/* Map view and table view: tabs after the title (Figma 25:2); a white thumb slides between them */
.rv-tabs { position: relative; display: inline-flex; margin: 26px auto 0; padding: 4px; border-radius: 100px; background: var(--paper); }
.rv-tabs button { position: relative; z-index: 1; width: 132px; padding: 11px 18px; border: 0; border-radius: 100px; background: none; color: var(--ink-3); font: 400 17px/1.2 var(--font-display); letter-spacing: -0.015em; cursor: pointer; transition: color .35s ease; }
.rv-tabs button:hover { color: var(--ink-2); }
.rv-tabs button[aria-selected="true"] { color: var(--ink); cursor: default; }
.rv-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.rv-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 132px; border-radius: 100px; background: #fff; box-shadow: 0 2px 8px rgba(204, 204, 204, .25), 0 1px 2px rgba(var(--b-shadow), .06); transition: transform .55s cubic-bezier(.3, 1.25, .5, 1); }
.rv-tabs[data-view="table"] .rv-thumb { transform: translateX(100%); }
.rv { position: relative; max-width: 1040px; margin: clamp(26px, 3.2vw, 40px) auto 0; transition: height .65s cubic-bezier(.2, .8, .2, 1); }
.rv.flying { overflow: clip; }
/* While the countries fly, the outgoing view dissolves over the incoming one, and the real shapes wait underneath */
.rv-out { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; animation: rv-out .45s ease both; }
.rv.flying > .rv-p:not(.rv-out) { animation: rv-in .6s ease .18s both; }
.rv.flying .rm-cs, .rv.flying .rm-sels, .rv.flying .rm-his, .rv.flying .tv-sil { visibility: hidden; }
.rv.flying #rv-table:not(.rv-out) tbody tr { animation: rv-row .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 32ms + .22s); }
@keyframes rv-out { to { opacity: 0; transform: scale(.985); filter: blur(3px); } }
@keyframes rv-in { from { opacity: 0; } }
@keyframes rv-row { from { opacity: 0; transform: translateY(10px); } }
.rv-fly { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.rv-f { position: absolute; overflow: visible; transform-origin: 0 0; will-change: transform; }
.rv-f, .tv-sil { --f: #fff; }
.rv-f[data-bin="1"], .tv-sil[data-bin="1"], .tv-bar[data-bin="1"] { --f: var(--map-1); }
.rv-f[data-bin="2"], .tv-sil[data-bin="2"], .tv-bar[data-bin="2"] { --f: var(--map-2); }
.rv-f[data-bin="3"], .tv-sil[data-bin="3"], .tv-bar[data-bin="3"] { --f: var(--map-3); }
.rv-f[data-bin="4"], .tv-sil[data-bin="4"], .tv-bar[data-bin="4"] { --f: var(--map-4); }
.rv-f[data-bin="5"], .tv-sil[data-bin="5"], .tv-bar[data-bin="5"] { --f: var(--map-5); }
.rv-f path, .rv-f circle, .tv-sil path, .tv-sil circle { fill: var(--f); stroke: none; }
.rv-f[data-bin="0"] path, .rv-f[data-bin="0"] circle, .tv-sil[data-bin="0"] path, .tv-sil[data-bin="0"] circle { stroke: var(--b-soft); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
/* The table: each sub-region a ranked card of white rows */
.tv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tv-card { padding: 20px 16px 12px; border-radius: 24px; background: var(--paper); }
.tv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 0 6px 12px; }
.tv-head h3 { margin: 0; font: 500 24px/1.1 var(--font-display); letter-spacing: -0.02em; }
.tv-head p { margin: 0; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tvtab { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; font-size: 15px; }
.tvtab thead th, .tvtab thead td { padding: 2px 8px 4px; font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: left; }
.tvtab .tv-rk { width: 32px; }
.tvtab .tv-uc { width: 23%; }
.tvtab .tv-all { width: 50px; text-align: right; }
.tvtab .tv-en { width: 96px; padding-left: 14px; }
.tvtab .tv-go { width: 26px; }
.tvtab tbody tr { cursor: pointer; }
.tvtab tbody th, .tvtab tbody td { padding: 8px; background: var(--surface); font-weight: 400; vertical-align: middle; transition: background-color .2s; }
.tvtab tbody tr > :first-child { border-radius: 12px 0 0 12px; }
.tvtab tbody tr > :last-child { border-radius: 0 12px 12px 0; }
.tvtab tbody tr:hover > * { background: #fbfdf6; }
.tvtab tbody tr.is-sel > * { background: var(--lime-200); }
.tv-rk { font: 500 11px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink-3); }
.tvtab td.tv-rk { padding-left: 12px; }
.tv-c { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); font-weight: 500; text-decoration: none; }
.tv-c span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tv-c:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tv-sil { flex: none; width: 30px; height: 30px; overflow: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.tvtab tbody tr:hover .tv-sil { transform: translateY(-2px) scale(1.06); }
.tv-ucw { display: flex; align-items: center; gap: 10px; }
.tv-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--b-surface-2); overflow: hidden; }
.tv-bar i { display: block; width: calc(var(--v) * 100%); min-width: 3px; height: 100%; border-radius: 4px; background: var(--f, var(--b-surface-2)); }
.tv-ucw b { min-width: 1.4em; font: 500 15px/1 var(--font-display); text-align: right; font-variant-numeric: tabular-nums; }
.tvtab td.tv-all { font: 400 13.5px/1 var(--font-mono); color: var(--ink-2); }
.tv-sq { display: inline-grid; grid-template-columns: repeat(6, 10px); gap: 3px; vertical-align: middle; }
.tv-sq i { width: 10px; height: 10px; border-radius: 3px; background: var(--b-surface-2); }
.tv-sq i[data-k="1"] { background: var(--map-1); }
.tv-sq i[data-k="2"] { background: var(--map-3); }
.tv-sq i[data-k="3"] { background: var(--map-5); }
.tv-go .ico { width: 16px; height: 16px; color: var(--ink-3); transition: transform .2s, color .2s; }
.tvtab tbody tr:hover .tv-go .ico { transform: translateX(3px); color: var(--ink); }
/* A small note on hover: what a country's entries are, and which enablers its use cases rely on */
.tt { position: relative; display: inline-block; }
.tt-b { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 30; display: grid; gap: 4px; width: max-content; max-width: 240px; padding: 12px 14px; border-radius: 14px; background: var(--b-ink-surface); color: var(--b-ink-surface-ink); font: 500 12px/1.3 var(--font-text); letter-spacing: 0; text-transform: none; text-align: left; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .18s, transform .18s; }
.tt-b.tt-r { left: auto; right: -8px; transform: translate(0, 4px); }
.tt:hover .tt-b, .tt:focus-within .tt-b { opacity: 1; transform: translate(-50%, 0); }
.tt:hover .tt-b.tt-r, .tt:focus-within .tt-b.tt-r { transform: translate(0, 0); }
body.tt-off .tt-b { opacity: 0 !important; } /* Escape dismisses a hover card without moving the pointer */
.tt-b::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--b-ink-surface); }
.tt-b.tt-r::after { left: auto; right: 22px; margin: 0; }
.tt-b b { margin-bottom: 2px; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.tt-b span { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; white-space: nowrap; }
.tt-b span.off { color: rgba(255, 255, 255, .42); }
.tt-b i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--b-accent-on-dark); }
.tt-b span.off i { color: rgba(255, 255, 255, .42); }

/* The key: the six enablers named, in the order the squares follow */
.tv-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 16px; padding: 12px 18px; border-radius: 999px; background: var(--paper); }
.tv-key-l { font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tv-key ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; }
.tv-key li { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--font-text); color: var(--ink-2); }
.tv-key .ico { width: 15px; height: 15px; color: var(--ink-3); }
.tv-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); text-align: center; }
.map-note { max-width: 36em; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); text-align: right; }
.map-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; }
.map-foot .legend { margin-top: 0; }
.legend-scale i { border-radius: 3px; }

.rd-label { margin: 0 0 4px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.rd-recent { list-style: none; margin: 0; padding: 0; }
.rd-recent li { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.rd-recent a { color: var(--ink); font-weight: 500; line-height: 1.35; text-decoration: none; }
.rd-recent a:hover { text-decoration: underline; }
.rd-recent span { font-size: 13.5px; color: var(--ink-3); }


/* The Observatory in numbers */
.statband { padding: clamp(28px, 3.5vw, 48px) var(--page-pad) clamp(36px, 4.5vw, 64px); background: var(--b-ground); color: var(--b-on-hero); }
.statcards { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }

.statcard { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; min-height: 176px; padding: 18px 20px 20px; border-radius: 20px; background: var(--b-ground-card); color: var(--b-on-hero); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .07); }
.statcard .cnt { display: inline-block; font-variant-numeric: tabular-nums; }
.statcard .l { max-width: 14em; font: 500 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--b-on-hero-2); }
.statcard .n { font: 300 clamp(2.8rem, 4.6vw, 4.2rem)/1 var(--font-display); letter-spacing: -0.05em; color: var(--b-primary); }
.statcard .n small { margin-left: 6px; font-size: .32em; letter-spacing: 0; color: var(--b-on-hero-2); }
/* The Observatory: title centred over a bento of the four workstreams and the partners */
.about-head { display: grid; justify-items: center; text-align: center; }
.about-head .kicker-row { justify-content: center; }
.about-head .h2 { max-width: 20em; font-size: clamp(1.9rem, 3.1vw, 2.85rem); }
.bento { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(310px, auto) minmax(310px, auto); gap: 14px; margin: 56px 0 0; padding: 0; }
.bcard { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06), 0 20px 44px -34px rgba(var(--b-shadow), .45); }
.b-bench { grid-column: 1; grid-row: 1 / span 2; }
.b-know { grid-column: 2; grid-row: 1; }
.b-cap { grid-column: 2; grid-row: 2; }
.b-incl { grid-column: 3; grid-row: 1 / span 2; }
.b-text { padding: 24px 26px 26px; }
.b-text h3 { margin: 0 0 10px; font: 500 clamp(21px, 1.75vw, 25px)/1.18 var(--font-display); letter-spacing: -0.025em; }
.b-text p { margin: 0; max-width: 34em; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.b-art { position: relative; flex: 1; display: grid; place-items: center; min-height: 180px; padding: 0 20px 20px; }
.b-know .b-art, .b-cap .b-art { order: -1; padding: 22px 20px 0; }
.b-svg { display: block; width: 100%; height: 100%; max-height: 470px; }

/* Benchmarking: six map layers, one per enabler; the stack breathes apart and back as a highlight moves through it */
.iso-p { animation: iso-breathe 9s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes iso-breathe { 0%, 100% { transform: translateY(calc((var(--k) - 2.5) * 15px)); } 50% { transform: translateY(calc((var(--k) - 2.5) * 34px)); } }
.iso-base { fill: rgba(255, 255, 255, .94); stroke: rgba(var(--b-shadow), .12); stroke-width: 1; stroke-linejoin: round; }
.iso-t polygon { fill: var(--map-1); opacity: .38; animation: iso-lit 13.5s ease-in-out infinite; animation-delay: calc(var(--k) * 2.25s - 13.5s); }
@keyframes iso-lit { 0%, 17%, 100% { fill: var(--map-1); opacity: .38; } 5%, 12% { fill: var(--lime); opacity: 1; } }
.iso-lead { fill: none; stroke: rgba(var(--b-shadow), .18); stroke-width: 1; }
.iso-lab, .iso-cap { font: 500 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-3); }
.iso-lab { animation: iso-lab 13.5s ease-in-out infinite; animation-delay: calc(var(--k) * 2.25s - 13.5s); }
@keyframes iso-lab { 0%, 17%, 100% { fill: var(--ink-3); } 5%, 12% { fill: var(--ink); } }

/* 02 Knowledge products: a deck of publications; the front one leaves and joins the back */
.deck { position: relative; width: 212px; height: 136px; margin-top: 38px; }
.doc { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(var(--b-shadow), .08), 0 14px 30px -18px rgba(var(--b-shadow), .4); transform-origin: 50% 0; animation: deck 12s cubic-bezier(.6, 0, .3, 1) infinite; animation-delay: calc(var(--i) * -3s); }
.doc-tag { align-self: flex-start; margin-bottom: 3px; padding: 4px 7px; border-radius: 999px; font: 500 9px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.k1 .doc-tag { background: var(--b-accent-200); color: var(--b-tag-ink); }
.k2 .doc-tag { background: var(--b-tint-100); color: var(--b-tag-ink); }
.k3 .doc-tag { background: var(--b-neutral-2); color: var(--b-ink-2); }
.k4 .doc-tag { background: var(--b-ink-surface); color: var(--b-accent-on-dark); }
.doc i { display: block; width: 100%; height: 6px; border-radius: 4px; background: var(--b-neutral-2); }
.doc .doc-h { width: 88%; height: 9px; background: #d9d7cf; }
.doc .doc-h.s, .doc .doc-l.s { width: 60%; }
@keyframes deck {
  0%, 18% { transform: translateY(-26px) scale(.86); opacity: .45; z-index: 1; }
  25%, 43% { transform: translateY(-13px) scale(.93); opacity: .78; z-index: 2; }
  50%, 68% { transform: translateY(0) scale(1); opacity: 1; z-index: 3; }
  75% { transform: translateY(24px) scale(1.02); opacity: 0; z-index: 3; }
  76% { transform: translateY(-40px) scale(.8); opacity: 0; z-index: 0; }
  100% { transform: translateY(-26px) scale(.86); opacity: .45; z-index: 1; }
}

/* Capacity and dialogue: a live thread among stakeholders; new messages arrive and the thread glides up */
.chat { width: min(100%, 300px); height: 186px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 24%, #000 80%, transparent); }
.chat-track { display: grid; gap: 10px; animation: chat 15s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes chat {
  0%, 12.7% { transform: translateY(0); } 16.7%, 29.3% { transform: translateY(-58px); } 33.3%, 46% { transform: translateY(-116px); }
  50%, 62.7% { transform: translateY(-174px); } 66.7%, 79.3% { transform: translateY(-232px); } 83.3%, 96% { transform: translateY(-290px); } 100% { transform: translateY(-348px); }
}
.msg { display: flex; align-items: center; gap: 10px; height: 48px; }
.msg.r { flex-direction: row-reverse; }
.msg-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 600 12px/1 var(--font-text); color: var(--ink-2); }
.p1 { background: var(--lime); color: var(--b-accent-ink); } .p2 { background: var(--b-tint-100); } .p3 { background: var(--b-neutral-2); } .p4 { background: #f3e2c4; } .p5 { background: #dcd7f0; } .p6 { background: #cfe0ef; }
.msg-b { display: grid; gap: 5px; min-width: 150px; padding: 8px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(var(--b-shadow), .08), 0 10px 20px -14px rgba(var(--b-shadow), .35); }
.msg.r .msg-b { background: var(--lime-200); }
.msg-w { font: 500 9.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.msg-b i { display: block; width: 120px; height: 5px; border-radius: 3px; background: rgba(var(--b-shadow), .1); }
.msg-b i.s { width: 76px; }

/* Inclusion and sustainability: six lenses switched on one after another while the ring fills */
.lens { width: min(100%, 300px); padding: 12px 14px 6px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(var(--b-shadow), .08), 0 24px 48px -30px rgba(var(--b-shadow), .45); }
.lens-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 12px; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lens-ring { width: 20px; height: 20px; transform: rotate(-90deg); }
.lens-ring circle { fill: none; stroke: var(--b-neutral-2); stroke-width: 3; }
.lens-ring .lens-fill { stroke: var(--map-2); stroke-linecap: round; stroke-dasharray: 56.6; stroke-dashoffset: 56.6; animation: lens-ring 9s ease-in-out infinite; }
@keyframes lens-ring { 0%, 4% { stroke-dashoffset: 56.6; } 37%, 62% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 56.6; } }
.lens-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid #f0eee8; }
.lens-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--panel); }
.lens-ic svg { width: 16px; height: 16px; fill: none; stroke: var(--b-ink-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lens-l { flex: 1; font-size: 13px; line-height: 1.2; color: var(--ink-2); }
.tog { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: var(--b-neutral-2); animation: tog-bg 9s ease infinite; animation-delay: calc(var(--i) * .5s); }
.tog i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(var(--b-shadow), .25); animation: tog-knob 9s cubic-bezier(.3, 1.3, .5, 1) infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes tog-bg { 0%, 4% { background: var(--b-neutral-2); } 9%, 60% { background: var(--map-2); } 66%, 100% { background: var(--b-neutral-2); } }
@keyframes tog-knob { 0%, 4% { transform: translateX(0); } 9%, 60% { transform: translateX(12px); } 66%, 100% { transform: translateX(0); } }

/* The bento rests off-screen and when motion is paused; it holds still for reduced motion */
.bento.is-idle *, body.motion-paused .bento * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .bento * { animation: none !important; } }

/* Six enablers: a row of cards; the one under the pointer or keyboard focus grows to show what it covers
   and a fan of the files the record holds for it */
.enab-row { --ease: cubic-bezier(.2, .8, .2, 1); container-type: inline-size; list-style: none; display: flex; align-items: center; gap: 12px; min-height: 430px; margin: 48px 0 0; padding: 0; }
.ecard { position: relative; flex: 1 1 0; min-width: 0; height: 340px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border-radius: 22px; overflow: hidden; filter: drop-shadow(0 0 .5px rgba(var(--b-shadow), .2)) drop-shadow(0 22px 22px rgba(var(--b-shadow), 0)); transition: flex-grow .6s var(--ease), height .6s var(--ease), filter .5s ease; }
.ecard.is-on { flex-grow: 2.7; height: 420px; filter: drop-shadow(0 0 .5px rgba(var(--b-shadow), .2)) drop-shadow(0 22px 22px rgba(var(--b-shadow), .15)); }
.ec-n { font: 300 clamp(3rem, 5vw, 4.6rem)/1 var(--font-display); letter-spacing: -0.06em; color: var(--b-numeral); }
.ec-ic { margin-bottom: 14px; }
.ec-t { margin: 0; font: 500 18px/1.2 var(--font-display); letter-spacing: -0.02em; transition: font-size .5s var(--ease); }
.ecard.is-on .ec-t { font-size: 27px; }
.ec-t a { color: inherit; text-decoration: none; }
.ec-t a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.ec-t a:focus-visible { outline: none; }
.ec-t a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.ec-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .3s ease; }
.ec-more > div { min-height: 0; overflow: hidden; }
.ecard.is-on .ec-more { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .6s var(--ease), opacity .5s ease .15s; }
.ec-d { width: calc((100cqw - 324px) * .3506); max-width: 30em; margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
/* Enabler icons: the definition cards' line style, with their own small movements */
.d-ic .i-trend { stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  .d-ic .i-rec, .d-ic .i-n, .d-ic .i-spark { animation: en-blink 3s ease-in-out infinite; }
  .d-ic .i-rec2, .d-ic .i-n2 { animation-delay: .4s; }
  .d-ic .i-rec3, .d-ic .i-n3 { animation-delay: .8s; }
  .d-ic .i-spark { animation-duration: 1.6s; }
  .d-ic .i-core { transform-origin: 24px 24px; animation: dm-pop 3.2s ease-in-out infinite; }
  .d-ic .i-bar { transform-origin: 0 40px; animation: en-grow 3.6s ease-in-out infinite; }
  .d-ic .i-bar2 { animation-delay: .2s; }
  .d-ic .i-bar3 { animation-delay: .4s; }
  .d-ic .i-trend { animation: dm-draw 3.6s ease-in-out infinite; }
  .d-ic .i-stamp { animation: dm-hop 3s ease-in-out infinite; }
}
@keyframes en-blink { 0%, 40%, 100% { fill: #fff; } 15% { fill: var(--lime); } }
@keyframes en-grow { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.55); } }
.ec-more .d-cnt { margin-top: 14px; }
.ecard:hover .d-cnt .ico { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ecard, .ec-t, .ec-more { transition: none !important; } }

/* The six enablers and the definition form a stack: once the enablers are fully in view they hold still
   (sticky, bottom edge on the window's bottom edge) and the definition slides up over them like a new sheet.
   While it covers them their content fades back a little (--cover from app.js); the page colour stays. */
/* The dot band across the top of the six enablers (initDots): very faint, behind the section's content */
#enablers { position: relative; isolation: isolate; }
#who { position: relative; isolation: isolate; }
.dots-band { position: absolute; left: calc(-1 * var(--page-pad)); top: calc(-1 * clamp(100px, 13vw, 190px)); z-index: -1; display: block; width: calc(100% + 2 * var(--page-pad)); height: clamp(220px, 26vw, 380px); pointer-events: none; }
.stack { position: relative; }
.stack-under { position: sticky; top: var(--under-top, 0px); z-index: 0; transform-origin: 50% 100%; opacity: calc(1 - var(--cover, 0) * .6); }
/* Once the enablers are fully in view they hold still for this much scrolling (about a second or two)
   before the definition starts to rise over them */
.stack-dwell { height: 70vh; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .stack-under { transform: scale(calc(1 - var(--cover, 0) * .03)); } }

/* Our working definition (Figma: Desktop - 4): a dark sheet. The statement holds still (sticky) while the
   five dimensions scroll past it, then the section lets go once the last card is in view. */
.defn { position: relative; z-index: 2; overflow: clip; background: var(--b-ink-surface); color: var(--b-ink-surface-ink); --focus: var(--lime); }
/* The frame holds still (sticky) for as long as the row has left to travel: the section is one screen tall plus that distance */
.defn-sticky { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: clamp(84px, 9vw, 140px) var(--page-pad) clamp(72px, 8vw, 112px); }
.defn-sticky > :not(.defn-net) { position: relative; z-index: 1; }
.defn-h { max-width: 873px; margin: 0; font: 500 clamp(2.2rem, 3.8vw, 3.45rem)/1.04 var(--font-display); letter-spacing: -0.003em; text-wrap: pretty; color: #fff;
  background: linear-gradient(90deg, var(--b-accent-on-dark) 4.93%, var(--b-map-1) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.defn-h .defn-ink { -webkit-text-fill-color: #fff; }
.defn-row { flex: none; padding-top: clamp(32px, 4vw, 52px); }
.defn-cards { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; width: auto; margin: 0; padding: 0; }
.dcard { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 230px; padding: 22px 20px 20px; border-radius: 20px;
  background: var(--b-surface); color: var(--ink); box-shadow: 0 18px 18px -14px rgba(0, 0, 0, .32);
  transition: transform .25s ease, box-shadow .25s ease; }
.dcard:hover { transform: translateY(-3px); box-shadow: 0 22px 26px -14px rgba(0, 0, 0, .4); }
.dcard .d-body { display: grid; gap: 7px; }
.dcard .d-cnt { margin-top: auto; align-self: flex-start; color: var(--ink-2); text-decoration: none; }
.dcard .d-cnt:hover { color: var(--b-primary); }
.dcard .d-cnt:hover .ico { transform: translateX(3px); }
@media (max-width: 1180px) { .defn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .defn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .defn-cards { grid-template-columns: minmax(0, 1fr); } }
/* the tile's own box lives on .dcard now; what remains here is the corner-arrow hover */

/* The corner arrow opens out of the card's bottom-right corner on hover: the notch (cut in the sheet's own green)
   grows from the corner, the lime square springs up inside it and the arrow slides in along its own direction */
/* The notch is cut out of the card's own white layer (a mask whose size eases from 0 to 60px), so whatever is behind
   the card, its shadow included, shows through; the shadow is a drop-shadow, which follows the cut */
@property --nk { syntax: '<number>'; inherits: false; initial-value: 0; }
/* Each card keeps its own compositing layer, so its text is drawn the same way before, during and after a hover */
.nc { position: relative; isolation: isolate; will-change: transform; }
.nc::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface); --nk: 0; --s: calc(60px * var(--nk)); --r: calc(18px * var(--nk)); transition: --nk .5s cubic-bezier(.2, .9, .25, 1);
  -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) 100% 100% / var(--s) calc(var(--s) - var(--r)) no-repeat, linear-gradient(#000 0 0) 100% 100% / calc(var(--s) - var(--r)) var(--s) no-repeat, radial-gradient(circle at var(--r) var(--r), #000 calc(var(--r) - .5px), #0000 var(--r)) 100% 100% / var(--s) var(--s) no-repeat, radial-gradient(circle at 0 0, #0000 calc(var(--r) - .5px), #000 var(--r)) right 0 bottom var(--s) / var(--r) var(--r) no-repeat, radial-gradient(circle at 0 0, #0000 calc(var(--r) - .5px), #000 var(--r)) right var(--s) bottom 0 / var(--r) var(--r) no-repeat;
  mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) 100% 100% / var(--s) calc(var(--s) - var(--r)) no-repeat, linear-gradient(#000 0 0) 100% 100% / calc(var(--s) - var(--r)) var(--s) no-repeat, radial-gradient(circle at var(--r) var(--r), #000 calc(var(--r) - .5px), #0000 var(--r)) 100% 100% / var(--s) var(--s) no-repeat, radial-gradient(circle at 0 0, #0000 calc(var(--r) - .5px), #000 var(--r)) right 0 bottom var(--s) / var(--r) var(--r) no-repeat, radial-gradient(circle at 0 0, #0000 calc(var(--r) - .5px), #000 var(--r)) right var(--s) bottom 0 / var(--r) var(--r) no-repeat;
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
  mask-composite: subtract, add, add, add, add, add; }
.nc:hover::before, .nc:focus-visible::before, .nc:focus-within::before { --nk: 1; }
.nc .corner { z-index: 3; background: none; opacity: 0; pointer-events: none; }
.nc .corner::before, .nc .corner::after { display: none; }
.nc:hover .corner, .nc:focus-visible .corner, .nc:focus-within .corner { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .nc .corner { transition: opacity .2s ease; }
  .nc .corner-btn { transform: scale(.45); transition: transform .55s cubic-bezier(.3, 1.35, .5, 1) .06s; }
  .nc .corner-btn .ico { opacity: 0; transform: rotate(-45deg) translateX(-10px); transition: transform .45s cubic-bezier(.2, .9, .25, 1) .16s, opacity .25s ease .16s; }
  .nc:hover .corner-btn, .nc:focus-visible .corner-btn, .nc:focus-within .corner-btn { transform: none; }
  .nc:hover .corner-btn .ico, .nc:focus-visible .corner-btn .ico, .nc:focus-within .corner-btn .ico { opacity: 1; transform: rotate(-45deg); }
}
/* No hover on touch screens: the arrow stays in its corner */
@media (hover: none) { .nc::before { --nk: 1; } .nc .corner { opacity: 1; } .nc .corner-btn, .nc .corner-btn .ico { opacity: 1; transform: none; } .nc .corner-btn .ico { transform: rotate(-45deg); } }
.d-body { display: grid; gap: 12px; }
@media (min-width: 901px) and (max-height: 760px) {
  .defn-sticky { padding-top: 128px; padding-bottom: 32px; }
  .defn-h { font-size: clamp(2rem, 3.1vw, 2.8rem); }
  .defn-row { padding-top: 20px; }
}
.dcard h3 { margin: 0; font: 500 clamp(1.15rem, 1.4vw, 1.4rem)/1.1 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; }
.dcard p { max-width: 32em; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.d-cnt { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.d-cnt .ico { width: 16px; height: 16px; transition: transform .15s; }
.dcard:hover .d-cnt .ico { transform: translateX(3px); }
/* The icons: refined line drawings (1.5px slate lines, one green accent line), no colour fills */
.d-ic { display: block; flex: none; width: 52px; height: 52px; color: var(--ink-2); }
.d-ic svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.d-ic svg * { transform-box: view-box; }
.d-ic .acc { stroke: var(--b-accent-line); }
.d-ic .soft { stroke-opacity: .4; }
.d-ic .dash { stroke-dasharray: 2 3.5; }
.d-ic .bg { fill: #fff; }
.d-ic .i-check { stroke-width: 1.9; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .d-ic .i-shield { transform-origin: 24px 24px; animation: dm-pop 3.6s ease-in-out infinite; }
  .d-ic .i-check { animation: dm-draw 3.6s ease-in-out infinite; }
  .d-ic .i-beam { transform-origin: 24px 15px; animation: dm-tilt 4.2s ease-in-out infinite; }
  .d-ic .i-leaf-l { transform-origin: 24px 29px; animation: dm-sway-l 4s ease-in-out infinite; }
  .d-ic .i-leaf-r { transform-origin: 24px 23px; animation: dm-sway-r 4s ease-in-out .35s infinite; }
  .d-ic .i-p { animation: dm-bob 3.2s ease-in-out infinite; }
  .d-ic .i-p2 { animation-delay: .18s; }
  .d-ic .i-p3 { animation-delay: .36s; }
  .d-ic .i-pin { animation: dm-hop 3s ease-in-out infinite; }
  .d-ic .i-ring { transform-origin: 34px 30.2px; animation: dm-ring 3s ease-out infinite; }
}
@keyframes dm-draw { 0%, 12% { stroke-dashoffset: 1; opacity: 1; } 40%, 82% { stroke-dashoffset: 0; opacity: 1; } 94% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes dm-pop { 0%, 36%, 52%, 100% { transform: scale(1); } 44% { transform: scale(1.05); } }
@keyframes dm-tilt { 0%, 100% { transform: rotate(0); } 22% { transform: rotate(-8deg); } 48% { transform: rotate(6deg); } 68% { transform: rotate(-3deg); } 84% { transform: rotate(0); } }
@keyframes dm-sway-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
@keyframes dm-sway-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }
@keyframes dm-bob { 0%, 30%, 100% { transform: translateY(0); } 15% { transform: translateY(-3px); } }

@keyframes dm-hop { 0%, 30%, 100% { transform: translateY(0); } 14% { transform: translateY(-5px); } }
@keyframes dm-ring { 0%, 24% { transform: scale(.45); opacity: 0; } 28% { opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
body.motion-paused .d-ic * { animation-play-state: paused !important; }
.defn-net { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; display: block; width: min(72%, 1040px); height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 28%, #000 62%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 28%, #000 62%); }


/* Data spotlight */
/* 13.1 (LIRNEasia, 20 Oct): a sideways scroll stays in the row — it never reaches the browser and
   fires its back gesture. Every horizontal scroller on the site carries this. */
.mx-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 0 6px; }
.matrix { border-collapse: separate; border-spacing: 5px; margin: 0 auto; }
.matrix thead th { padding: 0 0 6px; text-align: center; font: 500 11px/1 var(--font-mono); letter-spacing: .02em; color: var(--ink-3); }
.matrix thead abbr { text-decoration: none; cursor: help; }
.matrix thead .grp th { padding: 0 0 9px; text-align: left; border-bottom: 1px solid var(--ink); font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.matrix tbody th { padding: 0 22px 0 0; text-align: left; white-space: nowrap; font: 500 14.5px/1.2 var(--font-text); }
.matrix tbody th a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.matrix tbody th a .ico { width: 18px; height: 18px; color: var(--b-ink-2); }
.matrix tbody th a:hover { text-decoration: underline; }
.matrix td { padding: 0; }
.sq { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); font: 500 12px/1 var(--font-mono); color: transparent; text-decoration: none; transition: transform .12s, box-shadow .12s; }
a.sq:hover { transform: scale(1.12); box-shadow: 0 8px 16px -10px rgba(var(--b-shadow), .7); }
.sq[data-bin="1"] { background: var(--map-1); box-shadow: none; }
.sq[data-bin="2"] { background: var(--map-2); box-shadow: none; }
.sq[data-bin="3"] { background: var(--map-3); box-shadow: none; }
.sq[data-bin="4"] { background: var(--map-4); box-shadow: none; }
.sq[data-bin="5"] { background: var(--map-5); box-shadow: none; }
.show-n .sq[data-bin="1"], .show-n .sq[data-bin="2"] { color: var(--ink); }
.show-n .sq[data-bin="3"], .show-n .sq[data-bin="4"], .show-n .sq[data-bin="5"] { color: #fff; }
.matrix .tot { padding: 0 0 0 10px; text-align: center; font: 500 12px/1 var(--font-mono); color: var(--ink-2); }
.matrix thead th.tot { color: var(--ink-3); }
.matrix tfoot th { padding: 10px 22px 0 0; text-align: left; font: 400 13px/1.2 var(--font-text); color: var(--ink-3); }
.matrix tfoot td { padding-top: 10px; }
.mx-source { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-3); }

/* Newsroom: a carousel of wide cards, the next one peeking in from the edge */
.lat-note { margin: 16px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.btn-view { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--r-pill); background: var(--b-surface-2); color: var(--b-inkeep-900); font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background-color .15s; }
.btn-view .ico { width: 17px; height: 17px; transition: transform .2s; }
.btn-view:hover { background: var(--lime); color: var(--b-accent-ink); }
.btn-view:hover .ico { transform: translateX(3px); }
/* Newsroom (Figma 9:2 layout, 17:207 styling): one featured story with its cover, three text-only stories beside it */
.nw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; align-items: stretch; }
.nw-feat, .nw-item { position: relative; isolation: isolate; filter: drop-shadow(0 16px 18px rgba(var(--b-shadow), 0)); transition: transform .25s ease, filter .3s ease; }
.nw-feat:hover, .nw-item:hover { transform: translateY(-3px); filter: drop-shadow(0 16px 18px rgba(var(--b-shadow), .16)); }
.nw-feat, .nw-item { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; }
.nw-art { flex: none; height: clamp(150px, 13vw, 190px); }
.nw-art .lat-iso { right: 5%; bottom: 7%; width: auto; height: 84%; }
.nw-feat:hover .lat-iso { transform: translateY(-8px); }
.nw-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; }
.nw-item .nw-txt { flex: 1 1 auto; }
.nw-item .nw-art .lat-id { display: none; }
.nw-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 11px; }
.nw-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; font: 500 12px/1 var(--font-mono); letter-spacing: .077em; text-transform: uppercase; color: var(--ink-2); }
.nw-meta .sep, .nw-meta time { color: var(--ink-3); }
.nw-txt { display: grid; gap: 14px; }
.nw-item .nw-txt { gap: 8px; }
.nw-feat h3, .nw-item h3 { margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--ink); text-wrap: balance; }
.nw-feat h3, .nw-item h3 { font-size: clamp(1.25rem, 1.5vw, 1.5rem); line-height: 1.14; letter-spacing: -0.025em; }
.nw-item h3 { font-size: clamp(1.25rem, 1.5vw, 1.5rem); line-height: 1.14; letter-spacing: -0.025em; }
.nw-feat h3 a, .nw-item h3 a { color: inherit; text-decoration: none; }
/* Each story is one link: the title's link covers the card */
.nw-feat h3 a::after, .nw-item h3 a::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.nw-feat h3 a:focus-visible, .nw-item h3 a:focus-visible { outline: none; }
.nw-feat h3 a:focus-visible::after, .nw-item h3 a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.nw-sum { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(3 * 1.5em); }
.nw-item .nw-sum { -webkit-line-clamp: 3; }
.nw-more { margin-top: auto; }
.nw-more { display: inline-flex; align-items: center; gap: 12px; margin: 16px 0 0; font: 500 14px/1 var(--font-mono); letter-spacing: .082em; text-transform: uppercase; color: var(--ink); }
.nw-more span { text-decoration: underline; text-underline-position: from-font; text-decoration-thickness: from-font; }
.nw-more .ico { width: 18px; height: 18px; transition: transform .2s; }
.nw-feat:hover .nw-more .ico, .nw-item:hover .nw-more .ico { transform: translateX(4px); }
.nw-list { list-style: none; display: grid; grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
.nw-item { display: flex; flex-direction: column; gap: 0; padding: 0; border-radius: 24px; }
.nw-head { display: grid; gap: 16px; }
.lat-art { position: relative; isolation: isolate; overflow: hidden; }
/* Film grain over the drawn cover */
.lat-art::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .22; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lat-art.a-dark { --glow: var(--b-accent-300); --ft: var(--b-accent-300); --fl: var(--b-accent); --fr: var(--b-accent-600); --fo: rgba(255, 255, 255, .1); --fo-s: rgba(255, 255, 255, .22); --id: rgba(255, 255, 255, .2); --cap: #fff; --cap-bg: rgba(255, 255, 255, .12);
  background: radial-gradient(75% 85% at 72% 92%, rgba(var(--b-map-rgb), .5), transparent 70%), radial-gradient(40% 40% at 12% 8%, rgba(var(--b-accent-rgb), .12), transparent 70%), linear-gradient(160deg, var(--b-ink-surface-2) 0%, var(--b-ink-surface) 54%, #3d3433 100%); }
.lat-art.a-sage { --glow: #ffffff; --ft: var(--lime); --fl: var(--b-deep-600); --fr: var(--b-deep-800); --fo: rgba(var(--b-shadow), .1); --fo-s: rgba(var(--b-shadow), .2); --id: rgba(var(--b-shadow), .24); --cap: var(--ink); --cap-bg: rgba(255, 255, 255, .6);
  background: radial-gradient(70% 80% at 72% 90%, rgba(255, 255, 255, .6), transparent 70%), linear-gradient(155deg, var(--b-tint-50) 0%, var(--b-tint-200) 52%, var(--b-soft) 100%); }
.lat-art.a-lime { --glow: #ffffff; --fx: #ffffff; --ft: var(--b-map-2); --fl: var(--b-deep-700); --fr: var(--b-deep-900); --fo: rgba(var(--b-shadow), .1); --fo-s: rgba(var(--b-shadow), .2); --id: rgba(var(--b-shadow), .24); --cap: var(--ink); --cap-bg: rgba(255, 255, 255, .62);
  background: radial-gradient(70% 80% at 72% 90%, rgba(255, 255, 255, .7), transparent 70%), linear-gradient(155deg, #f5fbe2 0%, #e2f6a9 55%, #cdee6b 100%); }
.lat-art.a-paper { --glow: var(--lime); --ft: var(--map-1); --fl: var(--map-3); --fr: var(--map-5); --fo: rgba(var(--b-shadow), .08); --fo-s: rgba(var(--b-shadow), .18); --id: rgba(var(--b-shadow), .22); --cap: var(--ink); --cap-bg: rgba(255, 255, 255, .7);
  background: radial-gradient(60% 70% at 74% 88%, rgba(var(--b-accent-rgb), .55), transparent 70%), linear-gradient(160deg, #f8f6f1 0%, #ece8de 60%, #ddd7c8 100%); }
.lat-iso { position: absolute; right: 6%; bottom: 9%; z-index: 1; width: 68%; height: auto; overflow: visible; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.lat-iso .ft { fill: var(--ft); stroke: rgba(255, 255, 255, .35); stroke-width: .6; }
.lat-iso .fl { fill: var(--fl); }
.lat-iso .fr { fill: var(--fr); }
.lat-iso .fo { fill: var(--fo); stroke: var(--fo-s); stroke-width: .6; }
.lat-iso .fx { fill: var(--fx, var(--ink)); font: 600 9px/1 var(--font-mono); letter-spacing: .04em; text-anchor: middle; }
.lat-id { position: absolute; left: 24px; top: 20px; z-index: 1; font: 500 clamp(2.4rem, 4.6vw, 4.4rem)/1 var(--font-mono); letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1px var(--id); }
.lat-cap { position: absolute; left: 20px; bottom: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 9px; border-radius: 999px; background: var(--cap-bg, var(--b-tint-100)); color: var(--cap, var(--ink)); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lat-cap .ico { width: 14px; height: 14px; }
.lat-pick { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: var(--lime-200); font: 500 12px/.875 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.lat-pick::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--b-primary); }

/* Five routes: titles on the left, one open at a time; the scene on the right follows it */
.rt-head { padding-bottom: 0; }
.rt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 36px; margin-top: 36px; align-items: start; }
.rt-list { list-style: none; display: grid; gap: 4px; }
.rt-item { border-radius: 20px; transition: background-color .3s, box-shadow .3s; }
.rt-item.is-open { background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06), 0 22px 40px -30px rgba(var(--b-shadow), .45); }
.rt-h { margin: 0; }
.rt-h button { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px 20px; border: 0; border-radius: 20px; background: none; color: var(--ink-2); font: 500 20px/1.2 var(--font-display); letter-spacing: -0.02em; text-align: left; cursor: pointer; transition: color .2s, background-color .2s; }
.rt-h button:hover { color: var(--ink); background: rgba(var(--b-shadow), .04); }
.rt-item.is-open .rt-h button { color: var(--ink); background: none; cursor: default; }
.rt-h .ico { width: 18px; height: 18px; color: var(--ink-3); transform: rotate(-90deg); transition: transform .3s, color .3s; }
.rt-item.is-open .rt-h .ico { color: var(--ink); transform: none; }
.rt-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s; }
.rt-item.is-open .rt-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
/* Padding would show while collapsed, so the bottom space is a spacer that collapses with the rest */
.rt-in { min-height: 0; overflow: hidden; padding: 0 20px; }
.rt-in::after { content: ""; display: block; height: 22px; }
.rt-desc { max-width: 34em; margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.rt-go { list-style: none; margin: 0 0 18px; border-top: 1px solid var(--rule); }
.rt-go a { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid var(--rule); color: var(--ink); font-size: 15.5px; font-weight: 600; text-decoration: none; }
.rt-go .c { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rt-go .ico { width: 16px; height: 16px; transition: transform .15s; }
.rt-go a:hover { color: var(--ink); }
.rt-go a:hover .l { text-decoration: underline; text-underline-offset: 3px; }
.rt-go a:hover .ico { transform: translateX(3px); }
/* The scene: a line illustration for each audience on a dotted canvas, a glass card and a headline figure */
.rt-art { --h: clamp(480px, 42vw, 620px); position: relative; isolation: isolate; overflow: hidden; height: var(--h); border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .05);
  background: radial-gradient(rgba(var(--b-shadow), .11) 1px, transparent 1.4px) 0 0 / 22px 22px, radial-gradient(70% 60% at 88% 0%, rgba(var(--b-accent-rgb), .42), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(var(--b-map-rgb), .3), transparent 70%), var(--surface-2); }
.rt-ill { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s .6s; }
.rt-ill.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s .05s, transform .7s .05s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
/* Five routes in: "I am a … and I want to …" (the user's Figma frames). The sentence stacks line by line; each choice
   is a box that opens into its list right over itself. The answer, two stacked cards, takes half the width. */
.ro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.ro-l { container-type: inline-size; min-width: 0; }
/* One big container for the whole section, on a green gradient: light where the dark card sits, deepest in the lower
   left where the drawing lies. It reaches a little into the page margin, so its content still lines up with the
   sections around it. Only the background layer clips to its corners: the role list may open past its top. */
.ro-box { position: relative; --focus: var(--lime); padding: clamp(24px, 3.4vw, 48px); border-radius: 36px; color: #fff;
  background: radial-gradient(70% 60% at 100% 0%, rgba(var(--b-accent-rgb), .22), transparent 70%), linear-gradient(225deg, var(--b-accent-600) 0%, var(--b-grad-end) 46%, var(--b-ink-surface-2) 100%);
  box-shadow: 0 60px 110px -80px rgba(var(--b-shadow), .6); }
.ro-box .kicker-row .kicker { color: var(--lime); }
.ro-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ro-in { position: relative; z-index: 1; }
/* Research papers on the floor, in soft white line art (scratchpad docs-ill/build.mjs) */
.ro-ill { position: absolute; left: 0; bottom: 0; display: block; width: min(52%, 760px); height: auto; overflow: visible; }
.ro-ill .d-pg, .ro-ill .d-pe { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .72); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ro-ill .d-pe { fill: none; }
.ro-ill .d-pl { fill: none; stroke: rgba(255, 255, 255, .36); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ro-ill .d-pt { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ro-ill .d-pb { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ro-ill .d-pc { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ro-ill .d-pd { fill: var(--lime); }
.ro-ill .d-to { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ro-ill .d-tw { fill: rgba(255, 255, 255, .5); }
.ro-ill .d-tl { fill: var(--lime); }
.ro-ill .d-acc { stroke: var(--lime); }
.ro-ill .d-hl { fill: none; stroke: rgba(var(--b-accent-rgb), .4); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ro-ill .d-tt { fill: rgba(255, 255, 255, .9); font: 600 11px var(--font-display); letter-spacing: -.01em; }
.ro-ill .d-big { font-size: 14px; }
.ro-ill .d-tk { fill: rgba(255, 255, 255, .55); font: 600 6px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.ro-ill .d-rm { fill: none; stroke: url(#dz-corner); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ro-ill .d-rf { fill: none; stroke: url(#dz-floor); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
/* Sized so the longest choice ("compare how neighbours govern AI", 17.7em boxed) still fits on one line */
.ro-q { font: 500 clamp(1.45rem, 5.6cqi, 2.9rem)/1.18 var(--font-display); letter-spacing: -0.028em; color: #fff; }
.ro-w { margin: 0; }
.ro-art { display: inline-block; }
/* The sentence as a form to fill in: "I am a [role]", "and I want to", "[goal]" */
.ro-w { margin: 0 0 .34em; }
.ro-w.ro-gl { margin: 0; }
.dd { position: relative; display: inline-block; max-width: 100%; vertical-align: baseline; }
/* A blank: the chosen words in italic on a dashed line, typed onto it (ddType); lime on hover */
.dd-b { position: relative; display: inline-flex; align-items: center; max-width: 100%; margin: 0; padding: 0 .1em .1em .02em; border: 0; background: none; color: #fff; font: inherit; font-style: italic; font-weight: 400; letter-spacing: -0.015em; line-height: 1.18; text-align: left; cursor: pointer; transition: color .2s; }
.dd-b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.05em; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .62) 0 6px, transparent 6px 11px); pointer-events: none; }
.dd-b:hover { color: #eafcc2; }
.dd-b:hover::after { background: repeating-linear-gradient(90deg, var(--lime) 0 6px, transparent 6px 11px); }
.dd-b:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; border-radius: 4px; }
.dd-t { white-space: nowrap; }
.dd-c { flex: none; width: .5em; height: .5em; margin-left: .32em; color: var(--lime); stroke-width: 2.8; opacity: 0; transition: transform .2s, opacity .3s ease; }
.dd.typed .dd-c { opacity: .95; }
.dd.is-open .dd-c { transform: rotate(180deg); }
/* The caret while typing, leaning with the italic */
.dd.typing .dd-t::after { content: ""; display: inline-block; width: .07em; height: .92em; margin-left: .05em; vertical-align: -.1em; background: var(--lime); transform: skewX(-12deg); animation: dd-caret .9s steps(1) infinite; }
@keyframes dd-caret { 50% { opacity: 0; } }
.dd-ok { flex: none; display: grid; place-items: center; width: .74em; height: .74em; border-radius: 50%; }
.dd-ok svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* The list opens over its box, the chosen row where the box was */
.dd-pop { position: absolute; left: 0; z-index: 40; width: max-content; padding: .1em 0; border-radius: .36em; outline: none; background: var(--b-deep-800);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 70px -24px rgba(0, 0, 0, .6); }
.dd-o { display: flex; align-items: center; justify-content: space-between; gap: .4em; margin: 0 .1em; padding: .16em .14em .16em .3em; border-radius: .24em; color: rgba(255, 255, 255, .56); line-height: 1.18; white-space: nowrap; cursor: pointer; transition: color .15s, background-color .15s; }
.dd-o:hover, .dd-pop:not(.by-pointer) .dd-o.act { background: rgba(255, 255, 255, .08); color: #fff; }
.dd-o.on { color: #fff; }
.dd-ok { visibility: hidden; background: var(--lime); color: var(--b-accent-ink); }
.dd-o.on .dd-ok { visibility: visible; }
.dd-pop:focus-visible:not(.by-pointer) .dd-o.act { box-shadow: inset 0 0 0 2px var(--focus); }
/* The answer: where to start, then what to read first */
.ro-r { display: grid; gap: 14px; width: 100%; max-width: 960px; justify-self: end; }
@keyframes rs-in { from { opacity: 0; transform: translateY(12px); } }
[data-ro-out].swap > * { animation: rs-in .5s cubic-bezier(.2, .8, .2, 1) both; }
[data-ro-out].swap > :nth-child(2) { animation-delay: .06s; }
.ro-k { margin: 0 0 12px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .64); }
/* Where to start: the title's link covers the whole card; the other stops sit above it */
.ro-go { position: relative; isolation: isolate; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto; column-gap: 24px;
  min-height: clamp(300px, 22vw, 400px); padding: 30px 32px 32px; border-radius: 28px; overflow: hidden; color: #fff;
  background: radial-gradient(80% 70% at 100% 0%, rgba(var(--b-accent-rgb), .18), transparent 62%), radial-gradient(60% 60% at 0% 100%, rgba(var(--b-map-rgb), .14), transparent 70%), radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.3px) 0 0 / 18px 18px, var(--b-ink-surface);
  box-shadow: 0 44px 80px -52px rgba(var(--b-shadow), .9); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.ro-go:has(.ro-main:hover) { transform: translateY(-3px); box-shadow: 0 50px 86px -48px rgba(var(--b-shadow), .95); }
.ro-go:has(.ro-main:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.ro-go .ro-k { color: rgba(255, 255, 255, .56); }
.ro-top { grid-column: 1; grid-row: 1; min-width: 0; }
.ro-main { color: #fff; text-decoration: none; outline: none; }
.ro-main::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.ro-main:hover { color: #fff; }
.ro-main b { display: block; font: 500 clamp(2.1rem, 3.3vw, 3.6rem)/1.02 var(--font-display); letter-spacing: -0.035em; }
.ro-c { margin: 12px 0 0; font: 500 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--b-accent-on-dark); }
.ro-num { display: none; grid-column: 2; grid-row: 1; margin: -6px 0 0; text-align: right; }
.ro-num b { display: block; font: 400 clamp(4.2rem, 7vw, 7rem)/.86 var(--font-display); letter-spacing: -0.06em; color: var(--lime); }
.ro-num span { display: block; margin-top: 10px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.ro-why { grid-column: 1 / -1; grid-row: 3; max-width: 32em; margin: 26px 0 0; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .76); }
.ro-more { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding: 32px 0 0; }
.ro-more .ro-k { margin: 0 6px 0 0; }
.ro-more a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font: 500 13.5px/1 var(--font-text); text-decoration: none; transition: background-color .2s, box-shadow .2s; }
.ro-more a:hover { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(var(--b-accent-rgb), .5); color: #fff; }
.ro-arr { margin-left: auto; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lime); color: var(--b-accent-ink); pointer-events: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.ro-arr .ico { width: 22px; height: 22px; }
.ro-go:has(.ro-main:hover) .ro-arr { transform: translateX(3px); }
/* With room, the count becomes the card's big figure, like the stats on the hero */
@container (min-width: 460px) {
  .ro-num { display: block; }
  .ro-c { display: none; }
}
/* What to read first: a list, or three tiles side by side once the card is wide */
.ro-read { container-type: inline-size; padding: 24px 26px 22px; border-radius: 28px; background: var(--surface); color: var(--ink); }
.ro-rh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 6px; }
.ro-rh .ro-k { margin: 0; }
.ro-all { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.ro-all .ico { width: 14px; height: 14px; transition: transform .2s; }
.ro-all:hover { color: var(--ink); }
.ro-all:hover .ico { transform: translateX(3px); }
.ro-read ol { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.ro-read li a { position: relative; display: grid; gap: 5px; margin: 0 -12px; padding: 11px 46px 11px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background-color .2s; }
.ro-read li a:hover { background: var(--panel); color: var(--ink); }
.ro-read small { font: 500 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ro-read b { font: 500 15.5px/1.32 var(--font-text); }
.ro-sum { display: none; }
.ro-ra { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ink); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .25s; }
.ro-ra .ico { width: 18px; height: 18px; }
.ro-read li a:hover .ro-ra, .ro-read li a:focus-visible .ro-ra { opacity: 1; transform: none; }
@container (min-width: 600px) {
  .ro-read ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
  .ro-read li, .ro-read li a { height: 100%; }
  .ro-read li a { align-content: start; gap: 10px; margin: 0; padding: 18px 18px 50px; border-radius: 18px; background: var(--panel); transition: box-shadow .25s, transform .25s, background-color .25s; }
  .ro-read li a:hover { background: #efede7; box-shadow: 0 18px 30px -22px rgba(var(--b-shadow), .45); transform: translateY(-2px); }
  .ro-read b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; }
  .ro-sum { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
  .ro-ra { top: auto; bottom: 16px; right: 16px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ro-out].swap > * { animation: none; }
}
@media (max-width: 1100px) {
  .ro { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the cards fill the lower half, so the drawing steps aside */
  .ro-ill { display: none; }
  .ro-r { max-width: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ro-r { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ro-box { border-radius: 26px; }
  .ro-go { min-height: 280px; padding: 24px 22px 22px; border-radius: 24px; }
  .ro-more { padding-top: 22px; }
  .ro-read { padding: 20px 20px 18px; border-radius: 24px; }
  /* On a phone the boxes run the full width and long choices wrap */
  /* On a phone each blank takes its own full line, and long choices wrap */
  .dd { display: block; width: 100%; min-width: 0 !important; }
  .dd-b { display: flex; width: 100%; min-width: 0 !important; }
  .dd-t, .dd-o { white-space: normal; }
  .dd-o { color: rgba(255, 255, 255, .72); } /* smaller type needs more contrast */
  .dd-pop { right: 0; width: auto; }
}

/* The drawings share one kit: hairline grids, white nodes on slate, sage for data, lime for what matters, small mono labels */
.rt-ill .tx { font: 500 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-3); }
.rt-ill .tx.k { fill: var(--b-ink); }
.rt-ill .tx.inv { fill: var(--lime); font-size: 8.5px; }
.rt-ill .gd { fill: none; stroke: rgba(var(--b-shadow), .16); stroke-width: 1; }
.rt-ill .gd2 { fill: none; stroke: rgba(var(--b-shadow), .09); stroke-width: 1; }
.rt-ill .ax { fill: none; stroke: rgba(var(--b-shadow), .45); stroke-width: 1.1; }
.rt-ill .ln { fill: none; stroke: var(--b-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rt-ill .ln.b { stroke-width: 2.2; }
.rt-ill .dsh { stroke-dasharray: 3 4; }
.rt-ill .wt { fill: none; stroke: var(--b-ink); stroke-width: 1; }
.rt-ill .lane { fill: none; stroke: rgba(var(--b-shadow), .38); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 16 6 28 6 10 6 22 6; }
.rt-ill .nd { fill: #fff; stroke: var(--b-ink); stroke-width: 1.4; }
.rt-ill .nd.lm { fill: var(--lime); }
.rt-ill .nd.sg { fill: var(--map-1); }
.rt-ill .nd.sgs { stroke: var(--map-3); }
.rt-ill .nd.k, .rt-ill .k { fill: var(--b-ink); }
.rt-ill .pl { fill: rgba(255, 255, 255, .92); stroke: rgba(var(--b-shadow), .14); stroke-width: 1; }
.rt-ill .pl.lmf, .rt-ill .lmf { fill: var(--lime); }
.rt-ill .lmf2 { fill: rgba(var(--b-accent-rgb), .55); }
.rt-ill .lmt { fill: rgba(var(--b-accent-rgb), .42); }
.rt-ill .lmw { fill: none; stroke: rgba(var(--b-accent-rgb), .85); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.rt-ill .sgf { fill: rgba(var(--b-map-rgb), .2); }
.rt-ill .sgl { stroke: var(--map-3); }
.rt-ill .c1 { fill: var(--map-1); }
.rt-ill .c2 { fill: var(--map-2); }
.rt-ill .c3 { fill: var(--map-3); }
.rt-ill .c4 { fill: var(--map-4); }
.rt-ill .gdf { fill: rgba(var(--b-shadow), .08); }
.rt-ill .dl { fill: rgba(var(--b-shadow), .13); }
.rt-ill .dm0 { fill: rgba(var(--b-shadow), .22); }
.rt-ill .dm1 { fill: var(--map-1); }
.rt-ill .dm2 { fill: var(--map-2); }
.rt-ill .dm3 { fill: var(--map-3); }
.rt-ill .dm4 { fill: var(--map-4); }
.rt-ill .ns { vector-effect: non-scaling-stroke; }
.rt-ill .nd.hub { stroke-width: 1.2; }
.rt-ill .thin-r { fill: rgba(255, 255, 255, .45); stroke: var(--b-ink); stroke-opacity: .75; stroke-width: 1.3; stroke-dasharray: 2.5 3; }
.rt-ill .ring-out { fill: none; stroke: rgba(var(--b-shadow), .3); stroke-width: 1; opacity: 0; }
/* Motion, only on the drawing in view: a radar sweep, a row being read, signals running along the wires,
   nodes taking turns and the Dispatch's reach spreading. The footer's pause and reduced motion stop it all. */
.rt-ill .pulse, .rt-ill .pulse-w { stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .rt-ill.is-on .sweep { transform-box: fill-box; transform-origin: center; animation: rt-spin 16s linear infinite; }
  .rt-ill.is-on .scan { animation: rt-scan 9s ease-in-out infinite; }
  .rt-ill.is-on .pulse { stroke: var(--b-ink); stroke-width: 2.4; stroke-dasharray: 7 93; animation: rt-run 3.2s linear infinite; animation-delay: calc(var(--i, 0) * -1.1s); }
  .rt-ill.is-on .pulse-w { stroke: #fff; stroke-width: 3; stroke-dasharray: 5 95; animation: rt-run 2.6s linear infinite; }
  .rt-ill.is-on .bl { animation: rt-blink 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.37s); }
  .rt-ill.is-on .ring-out { transform-box: fill-box; transform-origin: center; animation: rt-ring 6s cubic-bezier(.2, .6, .3, 1) infinite; animation-delay: calc(var(--i, 0) * -2s); }
  .rt-ill.is-on .lane { animation: rt-lane 6s linear infinite; }
}
@keyframes rt-spin { to { transform: rotate(-360deg); } }
@keyframes rt-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(192px); } }
@keyframes rt-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes rt-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes rt-ring { from { transform: scale(.15); opacity: .8; } to { transform: scale(1); opacity: 0; } }
@keyframes rt-lane { to { stroke-dashoffset: -96; } }
body.motion-paused .rt-ill * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .rt-ill .sweep { display: none; } }
.rt-glass { position: absolute; right: 5%; bottom: 5%; z-index: 2; width: min(420px, 74%); padding: 16px 16px 14px; border-radius: 20px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 30px 60px -30px rgba(var(--b-shadow), .5); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); transition: opacity .4s, transform .5s cubic-bezier(.2, .7, .2, 1), visibility 0s .5s; }
.rt-glass.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s .15s, transform .6s .15s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.rt-gh { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 6px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.rt-gh .ico { width: 15px; height: 15px; }
.rt-rows { list-style: none; display: grid; gap: 2px; margin: 0 0 10px; }
.rt-rows a { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 8px 8px 4px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .15s; }
.rt-rows a:hover { background: rgba(255, 255, 255, .72); color: var(--ink); }
.rt-rows .n { font: 500 11px/1 var(--font-mono); text-align: center; color: var(--ink-3); }
.rt-rows .n.i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--b-ink-surface); color: var(--b-accent-on-dark); font-size: 10.5px; }
.rt-rt { display: grid; gap: 4px; min-width: 0; }
.rt-rt b { overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.rt-rt small { font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rt-pill { display: flex; align-items: center; gap: 8px; width: fit-content; margin-left: auto; padding: 9px 14px; border-radius: 999px; background: var(--lime); color: var(--b-accent-ink); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.rt-pill .ico { width: 15px; height: 15px; transition: transform .15s; }
.rt-pill:hover { background: var(--b-accent-600); color: var(--b-accent-ink); }
.rt-pill:hover .ico { transform: translateX(3px); }
.rt-chip { position: absolute; right: 5%; top: 5%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px 10px 12px; border-radius: 999px; background: rgba(var(--b-veil), .8); color: #fff; font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .4s, transform .5s cubic-bezier(.2, .7, .2, 1), visibility 0s .5s; }
.rt-chip.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s .25s, transform .6s .25s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.rt-chip .ico { width: 15px; height: 15px; color: var(--lime); }


/* ---------------------------------------------------------------- Forms */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label, .field .label { font-weight: 700; font-size: 15px; }
.field .opt-hint { font-weight: 400; color: var(--ink-3); }
.input, .select {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--control); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font-size: 16px;
}
.input:focus, .select:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.input[aria-invalid="true"] { border-color: var(--red-700); }
.select { appearance: none; padding-right: 36px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141728' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 18px no-repeat; }
.err { display: flex; align-items: center; gap: 6px; color: var(--red-700); font-size: 14.5px; font-weight: 600; margin: 0; }
.err .ico { width: 16px; height: 16px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; }
.check input, .opt input, .cb {
  appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--control); border-radius: 4px;
  background: var(--surface); display: grid; place-content: center; cursor: pointer;
}
.check input:checked, .opt input:checked, .cb:checked { background: var(--indigo-700); border-color: var(--b-primary); }
.check input:checked::after, .opt input:checked::after, .cb:checked::after { content: ""; width: 10px; height: 5.5px; border: 2.2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.opt input:indeterminate { background: var(--indigo-700); border-color: var(--b-primary); }
.opt input:indeterminate::after { content: ""; width: 10px; height: 2.4px; background: #fff; }
.fine { font-size: 14px; color: var(--ink-3); line-height: 1.5; margin: 10px 0 0; }
.ok { display: flex; gap: 10px; align-items: flex-start; background: var(--green-100); border: 1px solid var(--green-200); color: var(--ink); border-radius: var(--r-lg); padding: 14px 16px; }
.ok .ico { color: var(--green-700); width: 22px; height: 22px; }
.ok p { margin: 0; }

/* ---------------------------------------------------------------- Repository */
.page-head { padding: 32px 0 26px; }
.crumbs { font-size: 14px; color: var(--ink-3); margin: 0 0 14px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--rule-2); }
.crumbs a { color: var(--ink-2); }
.page-head h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-head .lede { color: var(--ink-2); margin: 10px 0 22px; max-width: 42em; font-size: 18px; }
.repo-search { max-width: 820px; }
.repo-search .clear { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--ink-3); }
.repo-search .clear:hover { background: var(--surface-2); color: var(--ink); }
.kbd { font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; color: var(--ink-3); margin-right: 8px; }

.repo-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px; padding-block: 28px 80px; align-items: start; }
/* Listing pages in the home page's manner (listHead, .lst): a slim green band, a filter card, pill tools, notch cards.
   The band runs up behind the floating bar, as the home page's hero does. */
.lh { position: relative; margin-top: calc(-1 * (var(--nav-h) + 30px)); padding: calc(var(--nav-h) + 58px) 0 44px; color: var(--b-hero-ink); --focus: var(--b-primary);
  background: radial-gradient(64% 150% at 100% 0%, rgba(var(--b-accent-rgb), .07), transparent 68%),
    radial-gradient(rgba(var(--b-shadow), .045) 1px, transparent 1.3px) 0 0 / 22px 22px,
    linear-gradient(180deg, #c0ab9f 0%, #cfbeb3 26%, #e0d4cc 60%, var(--b-ground) 94%); }
.lh .crumbs { margin-bottom: 18px; color: var(--ink-2); }
.lh .crumbs a { color: var(--ink); }
.lh .crumbs li + li::before { color: var(--ink-3); }
.lh h1 { display: block; max-width: 22em; margin: 0; color: var(--b-hero-ink); font-size: var(--lh-h1); line-height: var(--lh-h1-lh); letter-spacing: -0.035em; text-wrap: balance; }
.lh .lede { max-width: 44em; margin: 16px 0 28px; color: var(--b-hero-ink-2); font-size: 18px; line-height: 1.55; }
/* The search runs the full width of the page's column, with the home page's lime button at its end */
.lh .repo-search { max-width: none; }
.lh .repo-search .clear { flex: none; }
.lst.repo-grid { gap: 32px; padding-block: 32px 96px; }
.lst .facets { padding: 18px 16px 10px; border-radius: 26px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .04); }
.lst .facets-head { margin-bottom: 10px; padding: 0 4px; }
.lst .facets-head h2 { font: 500 21px/1 var(--font-display); letter-spacing: -0.02em; }
.lst .facet-h button { font: 500 16.5px/1.2 var(--font-display); letter-spacing: -0.01em; padding-inline: 4px; }
.lst .facet-h button:hover { color: var(--b-primary); }
.lst .facet-find { border: 0; border-radius: 12px; background: var(--panel); }
.lst .opt { border-radius: 10px; }
.lst .opt:hover { background: var(--panel); }
.lst .opt input { border-radius: 6px; }
.lst .opt input:checked, .lst .opt input:indeterminate { background: var(--b-solid); border-color: var(--b-solid); }
.lst .opt input:checked::after { border-color: var(--lime); }
.lst .opt input:indeterminate::after { background: var(--lime); }
.lst .opt .ico { color: var(--b-primary); }
.lst .results-bar { margin-bottom: 18px; }
.lst .count { font-size: 15px; }
.lst .count b { margin-right: 3px; font: 500 28px/1 var(--font-display); letter-spacing: -0.03em; }
.lst .seg { gap: 2px; padding: 4px; border: 0; border-radius: 999px; background: var(--b-neutral-2); }
.lst .seg button { min-height: 34px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); font-weight: 500; }
.lst .seg button:hover { background: transparent; color: var(--ink); }
.lst .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 10px rgba(var(--b-shadow), .1); }
.lst .tools .btn-ghost { min-height: 42px; border-radius: 999px; font-weight: 500; }
.lst .tools .btn-ghost:hover { background: var(--b-neutral-2); }
.lst .filters-btn { min-height: 42px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .08); font-weight: 500; }

.lst .list { gap: 14px; }
/* Cards: the same results side by side in narrower frames */
.lst .list.is-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.lst .list.is-cards .card { grid-template-columns: minmax(0, 1fr); }
.lst .list.is-cards .card > div { display: flex; flex-direction: column; height: 100%; }
.lst .list.is-cards .card-tags { margin-top: auto; padding-top: 40px; }
.lst .list.is-cards .card h3 { font-size: 20px; }
.lst .list.is-cards .card-s { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lst .list.is-cards .card h3 .ct { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lst .card.nc { padding: 24px; border: 0; border-radius: 24px; background: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; }
.lst .card.nc:hover { box-shadow: none; transform: translateY(-3px); filter: drop-shadow(0 16px 16px rgba(var(--b-shadow), .1)); }
.lst .card.nc:focus-within { border-color: transparent; }
.lst .card h3 { margin: 12px 0 8px; font-size: 23px; letter-spacing: -0.02em; }
.lst .card h3 a:hover { text-decoration: none; }
.lst .card h3 a::after { border-radius: 24px; }
.lst .card-s { color: var(--ink-3); font-size: 15.5px; }
.lst .card-tags { margin-top: 16px; padding-right: 56px; }
.lst .tagbtn.is-on { background: var(--lime-200); }
.lst .empty { border: 0; border-radius: 24px; }
@media (max-width: 980px) {
  body.facets-open .lst .facets { border-radius: 0; background: var(--paper); box-shadow: 20px 0 40px -20px rgba(0, 0, 0, .4); }
}
@media (max-width: 640px) {
  .lh { padding-bottom: 30px; }
  .lh .lede { font-size: 16.5px; }
  .lst .card.nc { padding: 20px; }
  .lst .card h3 { font-size: 20px; }
}
.facets { position: sticky; top: calc(var(--nav-h) + 30px); max-height: calc(100vh - var(--nav-h) - 46px); overflow: auto; overscroll-behavior: contain; padding: 2px 10px 12px 2px; scrollbar-width: thin; }
/* 19.6 (LIRNEasia, 20 Oct): the search field moved out of the hero and into the filter panel, where it
   searches this category alone rather than the whole repository. */
.fq { position: relative; display: flex; align-items: center; gap: 9px; height: 42px; margin: 0 0 18px; padding: 0 12px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); }
.fq:focus-within { box-shadow: inset 0 0 0 2px var(--map-3); }
.fq .ico { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.fq input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 400 14.5px/1 var(--font-text); }
.fq input::placeholder { color: var(--ink-3); }
.fq input:focus { outline: none; }
.fq .clear { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border: 0; border-radius: 50%; background: var(--rule); color: var(--ink-2); cursor: pointer; }
.fq .clear .ico { width: 13px; height: 13px; color: inherit; }
.facets-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.facets-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.facets .facets-close { display: none; }
.facet { border-top: 1px solid var(--rule); }
.facet-h button {
  display: flex; width: 100%; align-items: center; gap: 8px; padding: 13px 2px; border: 0; background: transparent; cursor: pointer;
  font-weight: 700; font-size: 15.5px; text-align: left; color: var(--ink);
}
.facet-h button:hover { color: var(--b-primary); }
.facet-h .ico { margin-left: auto; width: 18px; height: 18px; transition: transform .18s; }
.facet-h button[aria-expanded="false"] .ico { transform: rotate(-90deg); }
.facet-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lime-200); border: 1px solid var(--turmeric-200); color: var(--ink); font-size: 12.5px; font-weight: 700; }
.facet-b { padding: 0 0 14px; }
.facet-b fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.facet-find { width: 100%; min-height: 38px; margin-bottom: 8px; padding: 6px 10px; border: 1.5px solid var(--control); border-radius: var(--r); background: var(--surface); font-size: 15px; }
.facet-find:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.fgroup + .fgroup { margin-top: 8px; }
.fgroup-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 6px 4px 4px; margin: 0; }
.fgroup-h .linkish { font-family: var(--font-text); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.opt { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 34px; padding: 4px 6px; border-radius: 5px; cursor: pointer; font-size: 15px; line-height: 1.25; }
.opt:hover { background: var(--surface-2); }
.opt .ico { width: 16px; height: 16px; color: var(--b-primary); display: inline-block; vertical-align: -3px; margin-right: 5px; }
.opt-n { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.opt.is-zero { color: var(--ink-3); cursor: default; }
.opt.is-zero:hover { background: transparent; }
.opt.is-zero input { border-color: var(--rule-2); background: var(--surface-2); cursor: default; }
.opt.is-hidden { display: none; }
/* Three ways to read the country filter, switched inside the panel */
.cviews { display: flex; gap: 2px; margin: 0 0 10px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.cviews button { flex: 1; min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 500 13px/1 var(--font-text); cursor: pointer; transition: background-color .2s, color .2s; }
.cviews button:hover { color: var(--ink); }
.cviews button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(var(--b-shadow), .12); }
.opt-flag .opt-l { display: inline-flex; align-items: center; gap: 9px; }
.opt-flag .tflag { width: 17px; height: 17px; }
/* Each country as a card: its outline, its name and its count */
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.opt-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 92px; padding: 10px 10px 9px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); text-align: left; transition: background-color .18s, box-shadow .18s; }
.opt-card:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-2); }
/* No box to tick: the card is the switch, and several can be on at once */
.opt-card input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.opt-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.opt-card .oc-s { display: grid; place-items: center; width: 100%; height: 40px; margin-bottom: 2px; color: var(--b-soft); }
.opt-card .cline { max-width: 100%; max-height: 100%; }
.opt-card .opt-l { font: 500 12px/1.2 var(--font-text); }
.opt-card .opt-n { font-size: 11.5px; }
.opt-card:has(input:checked) { background: var(--lime-200); box-shadow: inset 0 0 0 1.5px var(--b-map-3); }
.opt-card:has(input:checked) .oc-s { color: var(--b-map-3); }
.opt-card:has(input:checked) .opt-l { color: var(--ink); }
.opt-card.is-zero { opacity: .5; }
/* A country's outline, drawn as a line */
.cline { display: block; width: 100%; height: 100%; }
.cline path, .cline circle { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cline.cfill path, .cline.cfill circle { fill: currentColor; stroke: currentColor; stroke-width: .6; }
.facet-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 0 4px; font-size: 13.5px; }
.facet-logic { color: var(--ink-3); font-size: 12.5px; }

.results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 14px; }
.count { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.count b { color: var(--ink); font-size: 17px; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
/* Sort: the site's own menu, not the browser's */
.sortmenu { position: relative; }
.sortmenu > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 13px 0 16px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); color: var(--ink); font: 500 14.5px/1 var(--font-text); cursor: pointer; transition: box-shadow .2s; }
.sortmenu > summary::-webkit-details-marker { display: none; }
.sortmenu > summary:hover { box-shadow: 0 0 0 1px rgba(var(--b-shadow), .22); }
.sortmenu > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sm-k { font: 500 14.5px/1 var(--font-text); color: var(--ink-3); }
.sortmenu > summary .ico { width: 16px; height: 16px; color: var(--ink-3); transition: transform .2s; }
.sortmenu[open] > summary .ico { transform: rotate(180deg); }
.sm-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: grid; gap: 2px; min-width: 210px; padding: 6px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .08), 0 26px 50px -24px rgba(var(--b-shadow), .45); }
.sm-pop button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 10px 0 13px; border: 0; border-radius: 11px; background: none; color: var(--ink-2); font: 500 14.5px/1 var(--font-text); text-align: left; cursor: pointer; }
.sm-pop button:hover { background: var(--panel); color: var(--ink); }
.sm-pop button .ico { width: 15px; height: 15px; color: var(--b-primary); opacity: 0; }
.sm-pop button[aria-pressed="true"] { color: var(--ink); }
.sm-pop button[aria-pressed="true"] .ico { opacity: 1; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 9px 0 12px;
  border-radius: 999px; background: var(--lime-200); border: 0;
  font: 500 13.5px/1 var(--font-text); cursor: pointer; color: var(--ink);
}
.chip small { font-weight: 500; color: var(--ink-2); }
.chip .ico { width: 14px; height: 14px; }
.chip:hover { background: var(--lime-300); }
.filters-btn { display: none; }

.list { list-style: none; display: grid; gap: 12px; transition: opacity .15s; }
.list.is-busy { opacity: .6; }
.list-more { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.list-more p { margin: 0; color: var(--ink-3); font-size: 14.5px; }

.empty { background: var(--surface); border: 1px dashed var(--rule-2); border-radius: var(--r-lg); padding: 32px; }
.empty h2 { font-family: var(--font-display); font-weight: 500; font-size: 26px; margin-bottom: 8px; }
.empty ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

.table-wrap { position: relative; max-height: 430px; overflow: auto; border: 1px solid var(--rule); border-radius: var(--r); }
.dtable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dtable caption { text-align: left; font-weight: 700; font-size: 15px; padding: 10px 12px; background: var(--paper); border-bottom: 1px solid var(--rule); caption-side: top; }
.dtable caption span { display: block; font-weight: 400; color: var(--ink-3); font-size: 13px; }
.dtable th, .dtable td { padding: 7px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.dtable thead th { position: sticky; top: 0; background: var(--surface); font-size: 12px; font-family: var(--font-mono); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); z-index: 1; }
.dtable thead th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.dtable thead th button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.dtable td.num, .dtable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable tbody tr:hover { background: var(--paper); }
.dtable tr.is-sel { background: var(--turmeric-100); }
.dtable tr.is-sel:hover { background: var(--turmeric-100); }
.dtable .barcell { width: 34%; }
.dtable .bar { display: block; height: 8px; border-radius: 0 3px 3px 0; background: var(--map-3); min-width: 2px; }
.dtable .zero { color: var(--ink-3); }

/* ---------------------------------------------------------------- Detail
   The head is a pale green band that runs under the nav and fades back into the page, with the entry's
   facts as small cards on it. */
.detail-head { position: relative; margin-top: calc(-1 * (var(--nav-h) + 30px)); padding: calc(var(--nav-h) + 54px) 0 52px;
  background:
    radial-gradient(58% 92% at 92% -10%, rgba(var(--b-globe-glow), .78), transparent 60%),
    radial-gradient(46% 72% at 2% 0%, rgba(var(--b-accent-rgb), .55), transparent 64%),
    radial-gradient(38% 60% at 58% 104%, rgba(var(--b-map-rgb), .3), transparent 70%),
    radial-gradient(rgba(var(--b-shadow), .06) 1px, transparent 1.3px) 0 0 / 18px 18px,
    linear-gradient(180deg, var(--b-tint-100) 0%, var(--b-tint-100) 40%, var(--b-tint-50) 72%, var(--paper) 100%); }
.detail-head .crumbs { margin-bottom: 36px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The kind and the date, in the site's small voice */
.kicker.dk { gap: 8px 12px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.kicker.dk .type { gap: 0; font-size: 11px; color: var(--ink); }
.dh-in { max-width: 62em; }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; font-size: 14.5px; color: var(--ink-3); }
.kicker .type { font-size: 15px; }
.detail-head h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.1rem, 3.9vw, 3.35rem); line-height: 1.05; letter-spacing: -0.022em; max-width: 21em; text-wrap: balance; }
.standfirst { font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 38em; margin: 16px 0 0; }
/* What the entry is, as chips: a phrase each, two to a list and then a count */
.fchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 0; }
.hf { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.hf .fchip { text-decoration: none; transition: box-shadow .2s, background-color .2s; }
.hf a.fchip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .3); }
.hf .tflag { width: 17px; height: 17px; }
.fchip { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 15px; border-radius: 999px; background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .08); font-size: 14.5px; font-weight: 500; color: var(--ink); }
.fchip a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.fchip a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fchip .tflag { width: 17px; height: 17px; }
.fc-sep { flex: none; width: 3px; height: 3px; border-radius: 50%; background: var(--rule-2); }
.fc-more { font: 500 11.5px/1 var(--font-mono); color: var(--ink-3); }
.fchip.st { background: var(--b-ok-bg); box-shadow: inset 0 0 0 1px var(--b-ok-line); color: var(--b-ok-ink); }
.fchip.st .st-d { width: 7px; height: 7px; border-radius: 50%; background: var(--b-ok-ink); }
.fchip.st .st-n { font: 500 11.5px/1 var(--font-mono); color: var(--b-ok-ink); opacity: .82; }
.fchip .ico { width: 15px; height: 15px; }
.kicker.dk .fc-sep { background: var(--rule-2); }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; padding-block: 44px 64px; align-items: start; }
.dsec { margin-bottom: 52px; }
.dsec:last-child { margin-bottom: 0; }
.detail-main .dsec { margin-bottom: 60px; }
.detail-main .sub { max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
/* One card shape through the reading column: a title, what it means, where it leads */
.mcards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin: 24px 0 0; }
.mcard > .nc { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; border-radius: 24px; color: var(--ink); text-decoration: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; }
.mcard > a.nc:hover { color: var(--ink); transform: translateY(-3px); filter: drop-shadow(0 16px 16px rgba(var(--b-shadow), .1)); }
.mcard h3 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.008em; }
.mcard p { margin: 0; max-width: 46ch; padding-right: 52px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.mcard .d-ic { width: 48px; height: 48px; margin-bottom: 6px; }
.mcard-go { margin-top: auto; padding: 12px 52px 0 0; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.en-off { margin: 20px 0 0; font-size: 15px; color: var(--ink-3); }
.en-off a { color: var(--ink-2); text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.en-off a:hover { color: var(--ink); }
.dsec > h2 { font-family: var(--font-display); font-weight: 500; font-size: 27px; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dsec > .sub { color: var(--ink-3); font-size: 16px; margin: -8px 0 16px; max-width: 42em; }
.h-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dsec .h-row h2 { font-family: var(--font-display); font-weight: 500; font-size: 27px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
.prose p { max-width: 42em; font-size: 16px; line-height: 1.65; }
.glance { display: grid; grid-template-columns: 190px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--ink); }
.glance dt, .glance dd { padding: 13px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.glance dt { font-weight: 700; padding-right: 16px; }
.glance dd { color: var(--ink-2); }
.findings { list-style: none; counter-reset: f; display: grid; gap: 12px; }
.findings li { counter-increment: f; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 16px 18px; }
.findings li::before { content: counter(f, decimal-leading-zero); font-family: var(--font-mono); font-size: 14px; color: var(--b-primary); padding-top: 3px; }
.toc { list-style: none; counter-reset: t; border-top: 1px solid var(--rule); }
.toc li { counter-increment: t; display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.toc li::before { content: counter(t); font-family: var(--font-mono); color: var(--ink-3); width: 20px; }

.assess { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.assess th, .assess td { padding: 14px 16px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.assess tr:last-child th, .assess tr:last-child td { border-bottom: 0; }
.assess thead th { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); padding-block: 9px; }
.assess tbody th { width: 190px; font-weight: 700; }
.assess tbody th a { color: var(--ink); }
.assess tbody th small { display: block; font-weight: 400; color: var(--ink-3); font-size: 14px; line-height: 1.45; margin-top: 4px; }
.assess td.rate { width: 150px; white-space: nowrap; }
.rating { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.rating i { display: inline-flex; gap: 3px; }
.rating i b { width: 14px; height: 9px; border-radius: 2px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--control); }
.rating[data-v="3"] i b, .rating[data-v="2"] i b:nth-child(-n+2), .rating[data-v="1"] i b:nth-child(1) { background: var(--indigo-700); box-shadow: none; }
.assess td.note { color: var(--ink-2); font-size: 16px; }

.en-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.en-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--rule); }
.en-item .enabler-ico { width: 40px; height: 40px; }
.en-item .enabler-ico .ico { width: 21px; height: 21px; }
.en-item h3 { font-size: 16.5px; font-weight: 500; margin: 0 0 4px; letter-spacing: -0.005em; }
.en-item p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 6px; }
.en-item a { font-size: 14px; font-weight: 600; }
.en-item.is-off .enabler-ico { background: none; box-shadow: inset 0 0 0 1px var(--rule); }
.en-item.is-off .enabler-ico .ico { color: var(--rule-2); }
.en-item.is-off h3, .en-item.is-off p { color: var(--ink-3); }

.files { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 24px; }
.file > .nc { display: flex; flex-direction: column; gap: 26px; width: 100%; min-height: 168px; padding: 22px 22px 20px; border: 0; border-radius: 24px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; }
.file > .nc:hover { transform: translateY(-3px); filter: drop-shadow(0 16px 16px rgba(var(--b-shadow), .1)); }
.file-t { margin-top: auto; display: grid; gap: 3px; padding-right: 48px; }
.file-t > b { font-size: 17px; font-weight: 500; letter-spacing: -0.008em; }
.file-ico { display: inline-flex; align-items: center; gap: 12px; width: auto; height: auto; border-radius: 0; background: none; border: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-2); }
.file-ico .d-ic { width: 44px; height: 44px; }
.file-ico b { font: 500 11px/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.file-t span { font-size: 14px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.file span .ico { width: 14px; height: 14px; }
.gate { margin-top: 14px; border: 1px solid var(--indigo-100); background: var(--indigo-50); border-radius: var(--r-lg); padding: 20px 22px; }
.gate h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.gate h3 .ico { width: 18px; height: 18px; color: var(--b-primary); }
.gate > p { color: var(--ink-2); font-size: 15px; }
.gate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.gate-grid .field:first-child { grid-column: 1 / -1; }
.staff { margin-top: 14px; border: 1px dashed var(--rule-2); border-radius: var(--r-lg); background: var(--surface); }
.staff > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.staff-body { padding: 0 16px 16px; }
.staff-body p { font-size: 14px; color: var(--ink-3); }

.cite { padding: 25px 24px 27px; border-radius: 24px; background: var(--surface); }
.cite-t { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.55; }
.cite-u { margin: 10px 0 18px; font: 400 14px/1.5 var(--font-mono); overflow-wrap: anywhere; }
.cite-u a { color: var(--ink-3); text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.cite-u a:hover { color: var(--ink); }
.cite-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.timeline { list-style: none; border-left: 2px solid var(--rule); margin-left: 6px; }
.timeline li { position: relative; padding: 0 0 18px 22px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--indigo-700); }
.timeline li:first-child::before { background: var(--indigo-700); }
.timeline b { display: block; }
.timeline span { font-size: 14px; color: var(--ink-3); }

.tmpl { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 32px; align-items: center; padding: 26px 28px; border-radius: 24px; background: var(--surface); }
.tmpl-l { margin: 0 0 18px; max-width: 54ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.tmpl-o { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; margin: 0; padding: 0; counter-reset: none; }
.tmpl-o li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; }
.tmpl-n { font: 500 11.5px/1 var(--font-mono); color: var(--lime-ink, var(--b-map-2)); }
.tmpl-t { font-size: 16px; font-weight: 500; }
.tmpl-art svg { display: block; width: 100%; height: auto; }
.tmpl-art svg { fill: none; stroke: var(--b-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tmpl-art .pg { fill: #fff; }
.tmpl-art .pg2 { fill: var(--panel); stroke-opacity: .35; }
.tmpl-art .ln { stroke-opacity: .32; }
.tmpl-art .acc { stroke: var(--b-accent-line); stroke-width: 3.4; }
.tmpl-art .bx { stroke-opacity: .35; stroke-dasharray: 4 4; }
.tmpl-art .bar { fill: #fff; stroke-opacity: .5; }
.tmpl-art .lmbar { fill: var(--lime); stroke: none; }
.tmpl-art .dot { fill: var(--lime-300); stroke: var(--b-accent-line); stroke-width: 1.4; }
@media (max-width: 860px) { .tmpl { grid-template-columns: minmax(0, 1fr); } .tmpl-art { max-width: 160px; } }
.template-note ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; counter-reset: s; }
.template-note li { counter-increment: s; display: inline-flex; gap: 8px; align-items: baseline; padding: 0; border-radius: 0; background: none; border: 0; font-size: 14px; font-weight: 600; }
.template-note li::before { content: counter(s); font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }

.detail-aside { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; display: grid; gap: 12px; }
.record { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; }
.record-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.record-h h2 { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.55; letter-spacing: -0.01em; }
.record dl { margin-top: 14px; }
.record > p { font-size: 13.5px; color: var(--ink-3); margin: 6px 0 4px; line-height: 1.45; }
.record dl { margin: 0; }
.record dl > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid #e6e6e6; }
.record dl > div:last-child { border-bottom: 0; }
.record dt { flex: none; width: 110px; margin: 0; font-size: 13px; text-transform: uppercase; color: var(--ink-3); }
.record dd { flex: none; width: 150px; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; text-align: right; color: var(--ink-2); }
.record dd .tagbtn { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-decoration: none; }
.record dd .tagbtn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.record dd .stage { justify-content: flex-end; font-size: 13px; }
/* What you can do with the record, in a card of its own under the summary */
.record-do { flex: none; padding: 6px; border-radius: 20px; background: var(--surface); }
.record-do button { display: grid; grid-template-columns: 27px minmax(0, 1fr) 15px; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 8px 10px; border: 0; border-radius: 14px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .18s; }
.record-do button:hover { background: var(--panel); }
.record-do button > .ico:first-child { width: 20px; height: 20px; margin-left: 7px; color: var(--b-ink-2); }
.record-do button > .ico:last-child { width: 15px; height: 15px; color: var(--ink-3); transition: transform .2s; }
.record-do button:hover > .ico:last-child { transform: translateX(3px); color: var(--ink); }
.record-do span { display: grid; gap: 1px; min-width: 0; }
.record-do b { font-size: 14.5px; font-weight: 500; }
.record-do span { font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.record-do b { color: var(--ink); }

.related { background: var(--surface-2); }
.related .wrap { padding-block: 56px 72px; }
.rel-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.rel-grid .card.nc { grid-template-columns: minmax(0, 1fr); padding: 24px; border: 0; border-radius: 24px; background: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; }
.rel-grid .card.nc:hover { box-shadow: none; transform: translateY(-3px); filter: drop-shadow(0 16px 16px rgba(var(--b-shadow), .1)); }
.rel-grid .card > div { display: flex; flex-direction: column; height: 100%; }
.rel-grid .card h3 { margin: 12px 0 8px; font-size: 20px; letter-spacing: -0.02em; }
.rel-grid .card h3 .ct { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-grid .card h3 a::after { border-radius: 24px; }
.rel-grid .card-s { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-3); font-size: 15.5px; }
.rel-grid .card-tags { margin-top: auto; padding-top: 40px; padding-right: 56px; }
.why { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--rule); font-size: 13.5px; line-height: 1.45; color: var(--ink-3); position: relative; z-index: 1; }
.why b { font-weight: 600; color: var(--ink-2); }
.why .ed { color: var(--green-700); font-weight: 700; }

/* ---------------------------------------------------------------- Dialog + toast */
dialog.about-dlg { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 12px; padding: 0; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
dialog.about-dlg::backdrop { background: rgba(20, 23, 40, .55); }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px 18px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 1; }
.dlg-head h2 { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.1; }
.dlg-head p { margin: 6px 0 0; color: var(--ink-2); font-size: 15.5px; }
.dlg-body { padding: 22px 28px 28px; display: grid; gap: 24px; }
.dlg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dlg-col { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 16px 18px; }
.dlg-col h3 { margin-bottom: 10px; }
.dlg-col ul { list-style: none; display: grid; gap: 8px; font-size: 15px; }
.dlg-col li { padding-left: 14px; position: relative; }
.dlg-col li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.dlg-body h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.dlg-body p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-2); background: var(--surface); cursor: pointer; flex: none; }
.icon-btn:hover { border-color: var(--ink); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 300; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 8px; font-size: 15px; font-weight: 600; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); display: flex; gap: 10px; align-items: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .ico { width: 18px; height: 18px; color: var(--turmeric-400); }

/* Machine translation. Google's own bar, pop-ups and hover highlights are hidden and the page stays where it was;
   this note says what happened and offers the way back. */
.gt-el { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
body > .skiptranslate, iframe.skiptranslate, .goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip { display: none !important; }
body { top: 0 !important; position: static !important; }
.goog-text-highlight, .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q { background: none !important; box-shadow: none !important; }
.mt-note { position: fixed; left: 14px; bottom: 14px; z-index: 70; display: flex; align-items: center; gap: 10px; max-width: min(470px, calc(100vw - 28px)); min-height: 40px; padding: 5px 5px 5px 14px; border-radius: 20px; background: rgba(var(--b-shadow), .88); color: var(--b-on-dark); font: 500 13px/1.3 var(--font-text); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); --focus: var(--lime); }
.mt-note.on { opacity: 1; transform: none; }
.mt-note[hidden] { display: none; }
.mt-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(var(--b-accent-rgb), .18); }
.mt-note[data-state="busy"] .mt-dot { animation: mt-pulse 1s ease-in-out infinite alternate; }
@keyframes mt-pulse { to { opacity: .3; transform: scale(.7); } }
.mt-t { min-width: 0; padding: 4px 0; }
.mt-back { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: 500 12.5px/1 var(--font-text); letter-spacing: 0; cursor: pointer; transition: background-color .2s ease; }
.mt-back:hover { background: rgba(255, 255, 255, .2); }
.mt-back .ico { width: 14px; height: 14px; }
.mt-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-left: -4px; border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .65); cursor: pointer; }
.mt-x:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.mt-x .ico { width: 15px; height: 15px; }
.mt-note[data-state="busy"] .mt-back, .mt-note[data-state="busy"] .mt-x { display: none; }
@media (max-width: 900px) { .mt-note { bottom: 66px; } }
@media (prefers-reduced-motion: reduce) { .mt-note[data-state="busy"] .mt-dot { animation: none; } }

/* Translated pages. Each script gets its own face after Host Grotesk and Inter, which keep the Latin letters and digits.
   Sinhala, Tamil, Bangla, Nepali and Thai need room above and below the line and no tracking, and they run
   longer than English, so the largest headings come down a step. Vietnamese stacks accents, so tight headings loosen. */
html[data-tr="si"] { --font-display: 'Host Grotesk', 'Noto Sans Sinhala', sans-serif; --font-text: 'Inter', 'Noto Sans Sinhala', sans-serif; --font-mono: 'Inter', 'Noto Sans Sinhala', sans-serif; }
html[data-tr="ta"] { --font-display: 'Host Grotesk', 'Noto Sans Tamil', sans-serif; --font-text: 'Inter', 'Noto Sans Tamil', sans-serif; --font-mono: 'Inter', 'Noto Sans Tamil', sans-serif; }
html[data-tr="bn"] { --font-display: 'Host Grotesk', 'Noto Sans Bengali', sans-serif; --font-text: 'Inter', 'Noto Sans Bengali', sans-serif; --font-mono: 'Inter', 'Noto Sans Bengali', sans-serif; }
html[data-tr="ne"] { --font-display: 'Host Grotesk', 'Noto Sans Devanagari', sans-serif; --font-text: 'Inter', 'Noto Sans Devanagari', sans-serif; --font-mono: 'Inter', 'Noto Sans Devanagari', sans-serif; }
html[data-tr="th"] { --font-display: 'Host Grotesk', 'Noto Sans Thai', sans-serif; --font-text: 'Inter', 'Noto Sans Thai', sans-serif; --font-mono: 'Inter', 'Noto Sans Thai', sans-serif; }
html:is([data-tr="si"], [data-tr="ta"], [data-tr="bn"], [data-tr="ne"], [data-tr="th"]) body * { letter-spacing: 0 !important; }
html:is([data-tr="si"], [data-tr="ta"], [data-tr="bn"], [data-tr="ne"], [data-tr="th"]) :is(h1, h2, h3, h4) { line-height: 1.34 !important; }
html:is([data-tr="si"], [data-tr="ta"], [data-tr="bn"], [data-tr="ne"], [data-tr="th"]) .hero3 h1 { max-width: 15em; font-size: clamp(1.8rem, 2.9vw, 2.9rem); }
html:is([data-tr="si"], [data-tr="ta"], [data-tr="bn"], [data-tr="ne"], [data-tr="th"]) .h2 { font-size: clamp(1.7rem, 2.8vw, 2.6rem); }
html[data-tr="vi"] :is(h1, h2, h3, h4) { line-height: 1.16 !important; }
/* When a translated menu is too long for the bar (see fitHead) */
body.head-fold .head-bar .sub-pill { padding: 0 16px; font-size: 13.5px; }
body.head-tight .head-bar .nav-top { padding: 0 7px; font-size: 13.5px; }
body.head-tight .head-bar .nav-list { gap: 0; }
body.head-tighter .head-bar { gap: 6px; }
body.head-tighter .head-bar .nav-top { padding: 0 5px; font-size: 13px; }

/* ---------------------------------------------------------------- Footer */
.site-foot { --focus: var(--lime); }
.foot-panel { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 8vw, 112px) var(--page-pad) 0; background: var(--b-ink-surface); color: var(--b-ink-surface-ink); }
.foot-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 82% 105%, rgba(var(--b-map-rgb), .42), transparent 70%), radial-gradient(40% 45% at 8% 110%, rgba(var(--b-accent-rgb), .18), transparent 70%); }
.foot-in { max-width: none; }
.foot-motion { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-motion:hover { color: #fff; }
/* Statement on the left, the sign-up box flush with the right edge (tops aligned), the three links beneath it */
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; gap: 28px 72px; }
.foot-side { display: grid; gap: 22px; }
.foot-side .foot-links { margin: 0; }
/* Both partner groups on one line, the social links at the right end of it */
.foot-partners { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px 72px; }
.fp-group { display: grid; gap: 16px; }
.fp-head { display: flex; align-items: center; gap: 12px; }
.site-foot .fp-head h2 { margin: 0; }
.site-foot .foot-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 44px; }
/* Partner logos in white, straight on the panel; each logo's height is set so every mark carries about the same weight */
.site-foot .foot-logos a { display: flex; align-items: center; padding: 4px 0; border-radius: 6px; color: #fff; text-decoration: none; }
.foot-logos img { display: block; width: auto; max-width: 100%; height: var(--h, 28px); opacity: .86; transition: opacity .15s; }
.site-foot .foot-logos a:hover img { opacity: 1; }
.site-foot .foot-logos a:hover { text-decoration: none; }
.foot-mid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-top: 72px; }
.site-foot .foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot-social { display: flex !important; gap: 8px !important; }
.soc { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 42px; height: 42px; padding: 0 10px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.soc svg { width: 20px; height: 20px; }
.site-foot a.soc { font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; }
.soc:hover, .site-foot a.soc:hover { background: var(--lime); color: var(--b-accent-ink); text-decoration: none; }
.foot-statement { max-width: 22em; margin: 0; font: 500 clamp(1.45rem, 2vw, 1.9rem)/1.16 var(--font-display); letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.foot-news .field { margin: 0; }
/* The newsletter's name, above its field */
.foot-news label.foot-nl-h { display: block; margin: 0 0 12px; font: 500 clamp(1.15rem, 1.5vw, 1.45rem)/1.2 var(--font-display); letter-spacing: -0.02em; text-transform: none; color: #fff; }
.foot-news label { color: rgba(255, 255, 255, .74); font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.foot-news .row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 22px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 28px 56px -30px rgba(0, 0, 0, .7); }
.foot-news .row:focus-within { outline: 3px solid var(--lime); outline-offset: 3px; }
.foot-news .row:has(.input[aria-invalid="true"]) { box-shadow: inset 0 0 0 2px #ffb4ab; }
.foot-news .input { flex: 1; min-width: 0; min-height: 48px; padding: 12px 4px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 400 17px/1.3 var(--font-text); }
.foot-news .input::placeholder { color: var(--ink-3); opacity: 1; }
.foot-news .input:focus { outline: none; }
.foot-news .btn { flex: none; min-height: 48px; padding: 0 26px; border: 0; border-radius: var(--r-pill); background: var(--lime); color: var(--b-accent-ink); font: 500 15.5px/1 var(--font-text); }
.foot-news .btn:hover { background: var(--b-accent-600); }
.foot-news .err { color: #ffb4ab; }
.foot-news .fine { color: rgba(255, 255, 255, .66); }
.foot-news .ok { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.foot-news .ok .ico { color: var(--lime); }
.site-foot h2 { margin: 6px 0 16px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .64); }
.site-foot ul { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.site-foot a, .site-foot .linkish { color: var(--b-tint-50); font-size: 15px; text-decoration: none; }
.site-foot a:hover, .site-foot .linkish:hover { color: #fff; text-decoration: underline; }
/* The wordmark closes the footer: full width, fading from a pale tint into the panel, its lower part cut by the panel's edge */
/* Host Grotesk sets the baseline .845em below the top of a 1em line, with caps .72em tall: a .72em box keeps the top
   83% of the letters. The width fits the content column (the text runs 7.35em). */
/* The mark leads the wordmark, outlined and fading the same way */
.fw-mark { display: inline-block; width: .74em; height: .74em; margin-right: .12em; vertical-align: -.055em; color: rgba(255, 255, 255, .26);
  -webkit-mask-image: linear-gradient(180deg, #000 18%, rgba(0, 0, 0, .28) 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 18%, rgba(0, 0, 0, .28) 62%, transparent 100%); }
.fw-mark svg { display: block; width: 100%; height: 100%; }
.foot-wordmark .fw-mark svg * { fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.foot-wordmark { height: .72em; overflow: hidden; margin: clamp(20px, 3vw, 40px) 0 0; font: 500 calc((100vw - 2 * var(--page-pad)) / 8.3) / 1 var(--font-display); letter-spacing: -0.055em; white-space: nowrap; text-align: center; user-select: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 18%, rgba(255, 255, 255, .05) 62%, rgba(255, 255, 255, 0) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 18px; padding: 0 0 26px; font: 500 10.5px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .64); }
.foot-base p { margin: 0; }

/* ---------------------------------------------------------------- IA pages: overviews, hubs, directory, profiles, forms */
.ph-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-head .eyebrow { margin-bottom: 24px; }
.page-head .lede:last-child { margin-bottom: 4px; }

/* Section overviews and About's sub-pages */
.sub-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; padding-block: 28px 12px; }
.sub-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; height: 100%; min-height: 220px; padding: 20px 20px 16px; border-radius: 20px; background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); transition: transform .2s, box-shadow .2s; }
.sub-card:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .08), var(--shadow-lift); }
.sub-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 13px; background: var(--b-ink-surface); color: var(--b-accent-on-dark); }
.sub-t { font: 500 22px/1.15 var(--font-display); letter-spacing: -0.015em; }
.sub-d { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.sub-n { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--rule); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sub-n b { margin-right: 4px; font: 300 2.1rem/.8 var(--font-display); letter-spacing: -0.04em; text-transform: none; color: var(--ink); }
.sub-n .ico { width: 18px; height: 18px; color: var(--ink); transition: transform .2s; }
.sub-card:hover .sub-n .ico { transform: translateX(3px); }

.about-page > .blk { padding-top: clamp(48px, 6vw, 80px); }

/* Hub blocks */
.hub-sec { padding-block: 44px 0; }
.hub-sec:last-child, .about-more, .nf-links, .net-wrap { padding-bottom: clamp(64px, 8vw, 104px); }
.hub-sec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-bottom: 16px; }
.hub-sec-h h2 { font: 500 clamp(1.5rem, 2.2vw, 1.95rem)/1.1 var(--font-display); letter-spacing: -0.015em; }
.hub-sec-h h2 a { color: inherit; text-decoration: none; }
.hub-sec-h h2 a:hover { text-decoration: underline; }
.hub-sec-h .h-row { margin: 0; }
.hub-top { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 8px 0 6px; }
.hub-glyph { display: grid; place-items: center; padding: 16px 22px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); }
.hub-glyph .glyph { width: 118px; }
.hub-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 520px; }
.hub-stats li { flex: 1 1 140px; }
.hub-stats a, .hub-stats li > span { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; height: 100%; min-height: 118px; padding: 14px 16px 16px; border-radius: 18px; background: var(--ground-card); color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background-color .15s, transform .2s; --focus: var(--b-ink-3); }
.hub-stats a:hover { background: var(--b-solid-2); color: var(--b-solid-ink); transform: translateY(-2px); }
.hub-stats .l { font: 500 11px/1.35 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.hub-stats .n { font: 300 2.6rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--lime); }
.hub-stats li > span .n { color: rgba(255, 255, 255, .55); }
.hub-study { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; flex: 1 1 260px; padding: 16px 18px; border-radius: 18px; background: var(--lime); color: var(--b-accent-ink); text-decoration: none; }
.hub-study b { font: 500 19px/1.2 var(--font-display); letter-spacing: -0.01em; }
.hub-study .eyebrow { color: var(--ink-2); }
.hub-study .ico { align-self: flex-end; transition: transform .2s; }
.hub-study:hover { color: var(--ink); background: var(--b-accent-600); }
.hub-study:hover .ico { transform: translateX(3px); }
.hub-map { display: inline-block; padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.hub-mapgrid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.hub-rank { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); }
.hub-rank ol { list-style: none; display: grid; gap: 4px; }
.hub-rank ol a { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; }
.hub-rank ol a::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--w); border-radius: inherit; background: var(--lime-200); box-shadow: inset 0 0 0 1px var(--turmeric-200); transition: background-color .15s; }
.hub-rank ol a:hover::before { background: var(--lime); }
.hub-rank ol b { font-variant-numeric: tabular-nums; }
.hub-rank .more-link { margin-top: auto; }
.hub-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hub-chips .tagbtn { min-height: 32px; padding: 0 12px; }
.hub-note { margin: 0; padding: 18px 20px; border-radius: 16px; border: 1px dashed var(--rule-2); color: var(--ink-3); }
.person-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 4px; }
.nf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding-top: 28px; }

/* Regional map and countries */
.map-page { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; padding-block: 28px clamp(64px, 8vw, 104px); }
.mp-map { padding: 26px; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); }
.mp-map .tilemap { --tile: 70px; --gap: 7px; }
.mp-map .tile-c { font-size: 13.5px; }
.mp-map .tile-n { font-size: 18px; }
.map-page .table-wrap { max-height: 600px; background: var(--surface); border-radius: 16px; }

/* People and organisations */
.po-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.po-card a { position: relative; display: flex; flex-direction: column; gap: 22px; min-height: 196px; height: 100%; padding: 20px; border-radius: 24px; color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); transition: transform .2s, box-shadow .2s; }
.po-card a:hover { color: var(--ink); transform: translateY(-3px); filter: drop-shadow(0 16px 16px rgba(var(--b-shadow), .1)); }
.po-card a { transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; }
.po-t { margin-top: auto; display: grid; gap: 6px; padding-right: 46px; }
.po-t b { font: 600 16px/1.25 var(--font-display); letter-spacing: -0.01em; }
.po-t small { font: 500 13.5px/1.35 var(--font-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.po-pic { display: flex; align-items: center; justify-content: flex-start; width: auto; height: 44px; }
.po-logo img { display: block; width: auto; height: var(--h); max-width: 130px; filter: brightness(0); opacity: .84; }
.po-mark { width: 44px; height: 44px; }
.po-av { width: 44px; height: 44px; }
.po-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--b-ink-surface); color: var(--b-accent-on-dark); font: 500 14px/1 var(--font-mono); letter-spacing: .04em; }
.po-t { display: grid; gap: 3px; min-width: 0; }
.po-t b { font-weight: 600; font-size: 16px; line-height: 1.25; }
.po-t small { font-size: 13.5px; line-height: 1.35; color: var(--ink-3); }
.net-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; padding: 26px 0 4px; }
.net-filters label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.net-filters .select { min-width: 210px; }
.net-filters .linkish { min-height: 44px; font-size: 15px; }
.net-count { margin: 16px 0 0; }
.net-sec { padding-top: 26px; }
.net-sec h2 { font: 500 clamp(1.4rem, 2vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -0.015em; }
.net-sec > h2 { margin-bottom: 14px; }
.net-sec .h-row { margin-bottom: 14px; }

/* Partners */
.partner-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.partner-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 18px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); }
.partner-card > :not(.partner-logo) { margin-inline: 8px; }
.partner-logo { display: grid; place-items: center; min-height: 120px; margin-bottom: 8px; padding: 0 16px; border-radius: 14px; background: var(--paper); border: 1px dashed var(--rule-2); font: 500 24px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--b-ink-2); text-align: center; }
.partner-card h3 { font-size: 18px; font-weight: 700; }
.partner-card h3 a { color: var(--ink); }
.partner-full { margin: 0; font-size: 14px; color: var(--ink-3); }
.partner-card p { margin: 0; font-size: 15px; color: var(--ink-2); }
.partner-card .more-link { margin-top: auto; padding-top: 6px; font-size: 15px; }

/* Forms: contact and subscribe */
.form-page { display: grid; grid-template-columns: minmax(0, 720px) minmax(260px, 340px); gap: 28px; align-items: start; padding-block: 28px clamp(64px, 8vw, 104px); }
.form-card { padding: 26px 26px 28px; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); }
.form-card .h-row { margin-bottom: 20px; }
.form-card h2 { font: 500 1.55rem/1.1 var(--font-display); letter-spacing: -0.015em; }
.form-card .field { margin-bottom: 18px; }
.form-card fieldset.field { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; border: 0; }
.form-card legend { margin-bottom: 10px; padding: 0; font-weight: 700; font-size: 15px; }
.field label.check { font-weight: 400; }
.form-card textarea.input { min-height: 150px; resize: vertical; }
.form-card .btn { margin-top: 4px; }
.form-card .ok { margin: 0; }
.form-side { display: grid; gap: 10px; }
.side-card { position: relative; display: grid; gap: 5px; padding: 18px 52px 18px 18px; border-radius: 18px; background: var(--b-ink-surface); color: var(--b-ink-surface-ink); text-decoration: none; transition: background-color .15s; --focus: var(--b-ink-3); }
.side-card b { font-weight: 600; }
.side-card span { font-size: 14.5px; line-height: 1.4; color: rgba(255, 255, 255, .74); }
.side-card .ico { position: absolute; right: 18px; top: 19px; width: 18px; height: 18px; color: var(--lime); transition: transform .2s; }
.side-card:hover { background: var(--b-solid-2); color: var(--b-solid-ink); }
.side-card:hover .ico { transform: translateX(3px); }

/* Policy and method pages */
.wrap.prose { padding-top: 10px; }
.prose section { max-width: 46em; padding-top: 30px; }
.prose section h2 { margin-bottom: 8px; font: 500 1.5rem/1.15 var(--font-display); letter-spacing: -0.012em; }
.prose-date { padding: 30px 0 clamp(64px, 8vw, 104px); font-size: 14px; color: var(--ink-3); }

@media (max-width: 1100px) {
  .map-page, .form-page, .hub-mapgrid { grid-template-columns: minmax(0, 1fr); }
  .mp-map { justify-self: start; }
}
@media (max-width: 640px) {
  .mp-map { padding: 14px; justify-self: stretch; }
  .mp-map .tilemap { --tile: min(46px, calc((100vw - 40px - 28px - 36px) / 7)); --gap: 5px; }
  .mp-map .tile-c { font-size: 10.5px; }
  .mp-map .tile-n { font-size: 12.5px; }
  .hub-map { display: block; padding: 14px; }
  .hub-stats .n { font-size: 2.1rem; }
  .hub-stats a, .hub-stats li > span { min-height: 100px; }
  .net-filters label, .net-filters .select { width: 100%; min-width: 0; }
  .form-card { padding: 20px 16px 22px; }
  .sub-card { min-height: 0; }
}

/* ---------------------------------------------------------------- Home: responsive */
@media (max-width: 1100px) {
  .nw-grid { grid-template-columns: minmax(0, 1fr); }
  .rm-lab text { font-size: 10.5px; }
  .tv-grid { grid-template-columns: minmax(0, 1fr); }
  .rt-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rt-art { --h: clamp(320px, 62vw, 500px); order: -1; }
  .statcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .b-bench { grid-column: 1; grid-row: 1; }
  .b-incl { grid-column: 2; grid-row: 1; }
  .b-know { grid-column: 1; grid-row: 2; }
  .b-cap { grid-column: 2; grid-row: 2; }
  .b-bench .b-art, .b-incl .b-art { min-height: 420px; }
  .enab-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: 0; }
  /* No hover here: every card shows everything */
  .ecard, .ecard.is-on { height: auto; gap: 28px; filter: drop-shadow(0 0 .5px rgba(var(--b-shadow), .2)) drop-shadow(0 22px 22px rgba(var(--b-shadow), 0)); }
  .ecard .ec-t, .ecard.is-on .ec-t { font-size: 22px; }
  .ec-d { width: auto; }
  .ecard .ec-more { grid-template-rows: 1fr; opacity: 1; }
  .foot-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .defn { height: auto; }
  .defn-sticky { position: static; height: auto; padding-block: clamp(64px, 12vw, 96px); }
  .stack-under { position: static; transform: none; opacity: 1; }
  .stack-dwell { display: none; }
  .defn-row { margin: 32px calc(-1 * var(--page-pad)) 0; padding: 0 var(--page-pad) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-pad); scrollbar-width: none; }
  .defn-row::-webkit-scrollbar { display: none; }
  .defn-cards { gap: 12px; transform: none !important; }
  .defn-net { width: 100%; opacity: .7; }
  .dcard { width: min(84vw, 420px); scroll-snap-align: start; }
  .dcard a { min-height: 220px; }
  .hero3 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0; padding-bottom: 0; }
  .globe-slot { display: block; grid-row: 2; grid-column: 1; height: min(118vw, 560px); }
  .g-veil { background: linear-gradient(to bottom, rgba(var(--b-veil), 0.000) 66.0%, rgba(var(--b-veil), 0.028) 69.4%, rgba(var(--b-veil), 0.104) 72.8%, rgba(var(--b-veil), 0.216) 76.2%, rgba(var(--b-veil), 0.352) 79.6%, rgba(var(--b-veil), 0.500) 83.0%, rgba(var(--b-veil), 0.648) 86.4%, rgba(var(--b-veil), 0.784) 89.8%, rgba(var(--b-veil), 0.896) 93.2%, rgba(var(--b-veil), 0.972) 96.6%, rgba(var(--b-veil), 1.000) 100.0%); }
  .hero3-bg { background:
    linear-gradient(180deg, rgba(var(--b-shadow), .9) 0%, rgba(var(--b-shadow), .55) 36%, rgba(var(--b-shadow), 0) 60%),
    radial-gradient(circle at var(--gx, 50%) var(--gy, 80%), rgba(var(--b-map-rgb), .3) 0, rgba(var(--b-map-rgb), .24) calc(var(--gr, 260px) * .6), rgba(var(--b-map-rgb), .15) var(--gr, 260px), rgba(var(--b-map-rgb), .08) calc(var(--gr, 260px) * 1.3), rgba(var(--b-map-rgb), .035) calc(var(--gr, 260px) * 1.7), rgba(var(--b-map-rgb), 0) calc(var(--gr, 260px) * 2.2)),
    linear-gradient(160deg, var(--b-deep-950) 0%, var(--b-deep-800) 46%, var(--b-deep-700) 76%, var(--b-deep-700) 100%); }
}
@media (max-width: 760px) {
  .rv-tabs { display: flex; max-width: 100%; }
  .rv-tabs button { width: 50%; padding: 10px; font-size: 16px; }
  .rv-thumb { width: calc(50% - 4px); }
  .tvtab .tv-en, .tvtab .tv-all { display: none; }
  .tv-key { display: none; } /* its squares are hidden at this width, so the key has nothing to explain */
  .tvtab .tv-uc { width: 38%; }
  /* Phones: no names on the map (too small to read) and no pointer tip; a country's record rises from the bottom */
  .rm-labs, .rm-tip { display: none; }
  .rm-pop { position: fixed; top: auto !important; right: 8px; bottom: 8px; left: 8px !important; z-index: 90; width: auto; max-width: none; max-height: min(80vh, 640px); border-radius: 20px; box-shadow: 0 -12px 40px -12px rgba(var(--b-shadow), .45), 0 0 0 1px rgba(var(--b-shadow), .06); }
  .region .map-foot { flex-direction: column; align-items: flex-start; }
  .map-note { text-align: left; }
  .lat-id { left: 18px; top: 16px; font-size: 2.3rem; }
  .nw-body { padding: 20px 20px 22px; }
  .nw-item { padding: 20px; }
  .lat-cap { left: 14px; bottom: 14px; }
}
@media (max-width: 640px) {
  :root { --nav-h: 58px; }
  .site-head { top: 10px; }
  .hero3 h1 { font-size: clamp(2.35rem, 10.6vw, 3.2rem); }
  .hsearch { padding-left: 12px; }
  .hs-go { width: 48px; padding: 0; }
  .hs-go-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .statcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .statcard { gap: 18px; min-height: 132px; padding: 14px 14px 16px; border-radius: 16px; }
  .statcard .n { font-size: 2.6rem; }
  .rt-in { padding-left: 16px; padding-right: 16px; }
  .rt-h button { min-height: 58px; padding: 12px 16px; font-size: 18px; }
  /* Phones give the picture the room: the card's entries and the figure are in the open panel's links */
  .rt-glass, .rt-chip { display: none; }
  .enab-row { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > .bcard { grid-column: 1; grid-row: auto; }
  .b-bench .b-art, .b-incl .b-art { min-height: 360px; }
  .sq { width: 26px; height: 26px; border-radius: 6px; }
  .site-foot .foot-logos { gap: 16px 32px; }
  .foot-mid { flex-direction: column; align-items: flex-start; }
  .head-bar { gap: 8px; padding-left: 10px; }
  .brand-mark { width: 30px; height: 30px; }
  .bn-2 { font-size: 17px; }
  .pd-note { font-size: 11.5px; }
  .proto-dock { left: 10px; right: 10px; bottom: 10px; gap: 10px; padding: 9px 12px; border-radius: 16px; }
  .proto-dock .pd-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .proto-dock button { min-width: 32px; min-height: 32px; padding: 0 9px; justify-content: center; }
  .pd-q { display: inline; font: 600 13px/1 var(--font-text); }
}
@media (max-width: 380px) {
  .head-bar { gap: 4px; padding: 0 6px 0 10px; }
  .brand { gap: 8px; }
  .brand-mark { width: 27px; height: 27px; }
  .bn-1 { font-size: 8.5px; }
  .bn-2 { font-size: 16px; }
  .head-bar .icon-link { width: 36px; }
  .head-bar .lang > summary { padding: 0 8px; }
  .head-bar .lang-code { display: none; }
  .head-bar .menu-btn { padding: 0 9px; }
}

/* ---------------------------------------------------------------- Mobile nav + facet drawer */
.scrim { position: fixed; inset: 0; background: rgba(var(--b-shadow), .55); z-index: 90; }

@media (max-width: 1240px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .head-actions { margin-left: auto; }
  body.nav-open .site-head { z-index: 120; }
  body.nav-open .nav {
    display: block; position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
    background: var(--paper); color: var(--ink); padding: 72px 20px 20px; box-shadow: -20px 0 40px -20px rgba(0,0,0,.4); overflow: auto;
  }
  body.nav-open .nav { width: min(380px, 90vw); padding: 72px 14px 24px; overscroll-behavior: contain; --focus: var(--b-primary); }
  body.nav-open .nav-list { flex-direction: column; gap: 2px; }
  body.nav-open .nav-top { width: 100%; justify-content: space-between; min-height: 52px; padding: 0 12px; font-size: 18px; }
  body.nav-open .nav-top .ico { width: 18px; height: 18px; margin-right: 0; }
  body.nav-open .nav-top:hover, body.nav-open .nav-top[aria-expanded="true"] { background: rgba(var(--b-shadow), .05); }
  body.nav-open .nav .is-current > .nav-top { background: transparent; box-shadow: inset 3px 0 0 var(--indigo-700); }
  body.nav-open .nav-panel { position: static; display: block; width: auto; margin: 2px 0 10px; padding: 2px 0 2px 10px; border-radius: 0; background: none; box-shadow: none; transform: none; animation: none; }
  body.nav-open .np-intro { display: block; padding: 0; border-radius: 0; background: none; color: inherit; }
  body.nav-open .np-intro::before, body.nav-open .np-eyebrow, body.nav-open .np-lede, body.nav-open .np-d { display: none; }
  body.nav-open .np-over { margin: 0; padding: 10px 12px; color: var(--b-primary); font-size: 15.5px; }
  body.nav-open .np-over .ico { color: currentColor; }
  body.nav-open .np-list a { grid-template-columns: 30px minmax(0, 1fr); padding: 8px 12px; }
  body.nav-open .np-ic { grid-row: auto; width: 30px; height: 30px; border-radius: 9px; background: var(--surface); }
  body.nav-open .np-ic .ico { width: 16px; height: 16px; }
  body.nav-open .np-t { font-size: 16px; font-weight: 500; }
  body.nav-open .nav .flag::after { box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .2); }
  .nav-close { position: absolute; top: 16px; right: 16px; }
}
@media (min-width: 1241px) { .nav-close { display: none; } }
/* Six sections, search, language and Subscribe share the bar: the language shows its flag alone until there is room */
@media (min-width: 1241px) and (max-width: 1439px) { .head-bar .lang-code { display: none; } }
/* Phones: the language menu moves into the drawer; Subscribe keeps its place as an icon */
@media (max-width: 560px) {
  .head-actions > .lang { display: none; }
  body.nav-open .nav-foot { display: block; margin-top: 16px; padding: 16px 12px 0; border-top: 1px solid var(--rule); }
  .nav-foot::before { content: "Language"; display: block; margin-bottom: 8px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .nav-foot .lang > summary { min-height: 44px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 12px; }
  .nav-foot .lang-pop { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
  .nav-foot .lang .lang-code { display: inline; }
}
@media (max-width: 480px) {
  .sub-pill { margin-left: 2px; padding: 0 16px; font-size: 13.5px; }
}
/* The narrowest phones have no room for the word; the footer keeps the sign-up */
@media (max-width: 359px) { .sub-pill { display: none; } }

@media (max-width: 1100px) {
  .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .record { position: static; }
  .detail-head-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .head-glyph { align-items: flex-start; flex-direction: row; }
  .head-glyph .glyph { width: 110px; }

  .repo-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .filters-btn { display: inline-flex; }
  .facets { display: none; }
  body.facets-open .facets {
    display: block; position: fixed; z-index: 100; top: 0; left: 0; bottom: 0; width: min(380px, 92vw); max-height: none;
    background: var(--paper); padding: 16px 16px 96px; box-shadow: 20px 0 40px -20px rgba(0,0,0,.4);
  }
  body.facets-open .facets .facets-close { display: inline-grid; }
  .facets-apply { position: fixed; z-index: 101; left: 0; bottom: 0; width: min(380px, 92vw); padding: 12px 16px; background: var(--paper); border-top: 1px solid var(--rule); }
  .facets-apply .btn { width: 100%; }
}
@media (min-width: 981px) { .facets-apply { display: none; } }

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .menu-btn { padding: 0 11px; }
  .menu-btn .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sec { padding-block: 52px; }
  .repo-search .kbd { display: none; }
  .tilemap { --gap: 4px; --tile: min(40px, calc((100vw - 90px) / 7)); }
  .ptag-pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; z-index: 400; }
  .ptag.right .ptag-pop { left: 16px; right: 16px; }
  .tile { padding: 4px 5px; border-radius: 5px; }
  .tile-c { font-size: 10.5px; }
  .tile-n { font-size: 12.5px; }
  .searchbox input { font-size: 16.5px; }
  .card { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .card-aside { flex-direction: row; align-items: center; justify-content: flex-start; order: -1; display: none; }
  .card h3 { font-size: 19px; }
  .results-bar { align-items: stretch; }
  .tools { margin-left: 0; width: 100%; }
  .glance { grid-template-columns: minmax(0, 1fr); }
  .glance dt { border-bottom: 0; padding-bottom: 0; }
  .assess thead { display: none; }
  .assess tr { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
  .assess th, .assess td { border: 0; padding: 6px 14px; width: auto !important; }
  .assess tbody th { padding-top: 14px; }
  .assess td.note { padding-bottom: 14px; }
  .fact + .fact { padding-left: 0; border-left: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file { grid-template-columns: 40px minmax(0, 1fr); }
  .file .btn { grid-column: 1 / -1; }
  .dlg-head, .dlg-body { padding-inline: 18px; }
  .proto-actions { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .tile { border: 1px solid CanvasText; }
  .tile[aria-pressed="true"] { outline-color: Highlight; }
  .glyph .g-on, .glyph .g-hl { fill: CanvasText; }
  .ptag > summary, .chip, .tagbtn { border: 1px solid CanvasText; }
}

@media print {
  .proto, .proto-dock, .site-head, .facets, .tools, .related, .site-foot, .ptag, .globe, .globe-tools { display: none !important; }
  body { background: #fff; }
}

/* Scroll reveal (app.js initReveal): hidden until the block reaches the viewport, then it fades up; the classes come off afterwards */
.reveal { opacity: 0 !important; transform: translate3d(0, 24px, 0) !important; }
@media print { .reveal { opacity: 1 !important; transform: none !important; } }
.reveal.in { opacity: 1 !important; transform: none !important; transition: opacity .8s ease var(--rd, 0ms), transform .95s cubic-bezier(.2, .8, .2, 1) var(--rd, 0ms) !important; }

/* Data spotlight: the heading, insight and key in a column beside six small maps (3 × 2), so it all fits on one screen */
.gp-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: stretch; gap: 20px 40px; }
.gp-side { display: flex; flex-direction: column; }
.gp-side .h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.gp-intro { margin: 22px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.gp-intro em { font-style: normal; font-weight: 600; color: var(--ink); }
.gp-side .legend { margin: auto 0 0; padding-top: 28px; }
.gp-side .legend-zero i { box-shadow: none; border-color: transparent; }
.gp-side .mx-source { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; }
.gp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gp-wrap { position: relative; display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
/* Enabler tags: ranked by use cases; the chosen one goes dark, and a thin one's count is terracotta */
.gs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 6px 6px 13px; border: 0; border-radius: 100px; background: #fff; color: var(--ink-2); font: 500 14px/1.2 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.gs-tag b { min-width: 24px; padding: 5px 6px; border-radius: 100px; background: var(--paper); color: var(--ink); font: 500 11px/1 var(--font-mono); text-align: center; transition: background-color .3s ease, color .3s ease; }
.gs-tag.thin b { background: #f8e7df; color: var(--b-accent-2); }
.gs-tag:hover { color: var(--ink); box-shadow: 0 6px 16px -10px rgba(var(--b-shadow), .35); }
.gs-tag[aria-selected="true"] { background: var(--b-solid); color: var(--b-solid-ink); cursor: default; }
.gs-tag[aria-selected="true"] b { background: var(--lime); color: var(--b-accent-ink); }
.gs-tag.thin[aria-selected="true"] b { background: #f8e7df; color: var(--b-accent-2); }
.gs-tag:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Too narrow for one row but wider than a phone: three by two, rather than one tag left over on its own */
@container (min-width: 560px) and (max-width: 849.98px) {
  .gs-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gs-tag { justify-content: space-between; }
}
/* The counts on the map grow a little as the map shrinks, and give way to the colours alone on a phone */
@container (max-width: 849.98px) { .gs-map { --bs: 1.15; } }
@container (max-width: 519.98px) { .gs-nums { display: none; } }
.gs-sum { margin: 18px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.gs-sum b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.gs-sum .gp-thin { margin-left: 6px; vertical-align: 2px; }
.gp-thin { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: #f8e7df; color: var(--b-accent-2); font: 500 9px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.gs-panel { position: relative; flex: 1; display: flex; align-items: center; margin-top: 16px; padding: 12px; border-radius: 24px; background: var(--surface); }
.gs-map { display: block; width: 100%; height: auto; max-height: calc(100svh - 290px); overflow: visible; }
.gs-land { fill: #ecebe5; }
.gs-hzs { pointer-events: none; }
.gs-hz { fill: url(#gs-hatch); stroke: #fff; stroke-width: .9; }
/* Each country recolours in turn, west to east, when the enabler changes */
.gpc { fill: var(--b-neutral-2); stroke: #fff; stroke-width: .9; stroke-linejoin: round; cursor: pointer; transition: fill .55s cubic-bezier(.3, .7, .3, 1) calc(var(--wx, 0) * 380ms), fill-opacity .55s ease calc(var(--wx, 0) * 380ms), stroke .2s ease, stroke-width .2s ease; }
.gpc[data-k="0"] { fill-opacity: 0; }
.gpc[data-k="1"] { fill: var(--map-1); }
.gpc[data-k="2"] { fill: var(--map-2); }
.gpc[data-k="3"] { fill: var(--map-3); }
.gpc[data-k="4"] { fill: var(--map-4); }
.gpc[data-k="5"] { fill: var(--map-5); }
circle.gpc, circle.gs-hz { stroke-width: 1.4; }
.gs-hls { pointer-events: none; }
.gs-hls > * { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.gs-hold .gs-n { opacity: 0; transition: none; }
/* Counts on the map, popping back in with the wave */
.gs-nums { pointer-events: none; filter: drop-shadow(0 1px 1.5px rgba(var(--b-shadow), .22)); }
.gs-n { transition: opacity .3s ease calc(var(--wx, 0) * 380ms); }
.gs-n.z { opacity: 0; }
.gs-b { transform-box: fill-box; transform-origin: center; transform: scale(var(--bs, 1)); }
.gs-b circle { fill: #fff; }
.gs-b text { fill: var(--ink); font: 500 10.5px/1 var(--font-mono); text-anchor: middle; }
.gs-panel.go .gs-b { animation: gs-pop .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--wx, 0) * 380ms + 80ms) backwards; }
@keyframes gs-pop { from { opacity: 0; transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) {
  .gpc, .gs-n { transition: none; }
  .gs-panel.go .gs-b { animation: none; }
}
body.motion-paused .gpc, body.motion-paused .gs-n { transition: none; }
body.motion-paused .gs-panel.go .gs-b { animation: none; }
.gp-side .legend-zero i { background: repeating-linear-gradient(-45deg, var(--b-neutral-2) 0 2.2px, #d6d9d1 2.2px 3.6px); }
.gp-tip { width: 250px; }
.gp-tl { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.gp-tl li { display: flex; justify-content: space-between; gap: 12px; margin: 0 -8px; padding: 2px 8px; border-radius: 7px; font-size: 13.5px; color: #fff; }
.gp-tl li b { font: 500 13px/1.2 var(--font-mono); color: var(--lime); }
.gp-tl li.z { color: rgba(255, 255, 255, .5); }
.gp-tl li.z b { color: rgba(255, 255, 255, .45); }
.gp-tl li.on { background: rgba(var(--b-accent-rgb), .13); }
@media (max-width: 1100px) {
  .gp-layout { grid-template-columns: minmax(0, 1fr); }
  .gp-side .legend { margin-top: 20px; padding-top: 0; }
  .gs-map { max-height: none; }
}
@media (max-width: 640px) {
  .gs-tags { gap: 5px; }
  .gs-tag { padding: 5px 5px 5px 12px; font-size: 13.5px; gap: 6px; }
  .gs-sum { font-size: 14.5px; }
}

/* People and organisations: the network's size and mix on a dark card, partners with their logos, a spread of the organisations behind the use cases */
.who-logo { display: flex; align-items: center; height: 52px; }
.who-logo img { display: block; width: auto; height: var(--h); filter: brightness(0); opacity: .84; }
.who-meta { font: 500 10.5px/1.35 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.who-meta .sep { margin: 0 6px; }
.who-note { max-width: 44em; margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--b-ink-2); }

/* The mosaic: the site's own tile shape. The figure holds two columns, the partners stand tall beside it,
   and four organisations fill the row below. */
/* the mosaic of named organisations moved to the Partners and funders page (16.1-16.3) */
.w3 > li { min-width: 0; }
/* 16.1/16.2: the home page carries the overview and the partner logos; the detail lives on the
   Partners and funders page. The figure tile stays, the mosaic of named organisations does not. */
.w3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(20px, 3vw, 44px); align-items: stretch; margin-top: 40px; }
.w3-side { display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.w3-lede { max-width: 34em; margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.w3-logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin: 0; padding: 0; }
.w3-logos a { display: grid; place-items: center; min-height: 44px; padding: 4px 6px; border-radius: 10px; opacity: .78; transition: opacity .2s, transform .2s; }
.w3-logos a:hover { opacity: 1; transform: translateY(-2px); }
.w3-logos img { display: block; height: var(--h, 32px); width: auto; filter: brightness(0); opacity: .84; }
.w3-side .btn-arrow { align-self: flex-start; }
@media (max-width: 900px) { .w3 { grid-template-columns: minmax(0, 1fr); } }
.w3-n { display: flex; flex-direction: column; gap: 14px; padding: 24px 28px 26px; border-radius: 22px; color: var(--b-ink-surface-ink); --focus: var(--b-accent-on-dark);
  background: radial-gradient(78% 72% at 100% 0%, rgba(var(--b-accent-rgb), .34), transparent 62%), radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.3px) 0 0 / 18px 18px, var(--b-ink-surface-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.w3-n p { display: grid; gap: 8px; margin: 0; }
.w3-n p b { font: 300 clamp(2.7rem, 3.9vw, 3.5rem)/.9 var(--font-display); letter-spacing: -0.05em; color: var(--b-accent-on-dark); }
.w3-n p span { max-width: 21em; font-size: 13.5px; line-height: 1.42; color: rgba(255, 255, 255, .72); }
.w3-key { list-style: none; display: grid; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.w3-key a { display: grid; grid-template-columns: minmax(0, 10.6em) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 5px 0; color: var(--b-ink-surface-ink); font-size: 13.5px; text-decoration: none; border-radius: 6px; transition: color .18s; }
.w3-key a:hover { color: var(--b-accent-on-dark); }
.w3-key a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.w3-key i { display: block; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .10); overflow: hidden; }
.w3-key em { display: block; height: 100%; border-radius: 999px; transform-origin: left; animation: w3-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes w3-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .w3-key em { animation: none; } }
.w3-key b { min-width: 1.8em; font: 500 12.5px/1 var(--font-mono); text-align: right; color: rgba(255, 255, 255, .8); }
.w3-p { grid-row: span 2; }
.w3-p a, .w3-o a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 20px 18px 18px; border-radius: 22px; color: var(--ink); text-decoration: none; }
.w3-o a { overflow: hidden; }
/* Where the organisation works, drawn faintly in the tile's empty half; the corner arrow covers its foot */
.w3-ill { position: absolute; right: -14px; top: -16px; width: 104px; height: 104px; color: var(--map-2); opacity: .22; pointer-events: none; }
.w3-p a { gap: 18px; padding-top: 24px; }
.w3-p a:hover, .w3-o a:hover { color: var(--ink); }
.w3-pt { margin-top: auto; display: grid; gap: 6px; padding-right: 40px; }
.w3-pn { font: 500 16px/1.2 var(--font-display); letter-spacing: -0.01em; }
.w3-p .who-meta { font-size: 9.5px; letter-spacing: .05em; } /* the role and the count hold one line */
.w3-o a { gap: 10px; }
.w3-hd { display: grid; gap: 7px; padding-right: 8px; }
.w3-where { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-right: 46px; font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.w3-where .tflag { width: 16px; height: 16px; }
.w3-on { font-size: 15px; font-weight: 500; line-height: 1.25; }
.w3-more a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 20px 18px 18px; border-radius: 22px; background: var(--lime); color: var(--b-accent-ink); text-decoration: none; }
.w3-more a:hover { color: var(--ink); }
.w3-more b { font: 300 2.8rem/1 var(--font-display); letter-spacing: -0.045em; }
.w3-more span { max-width: 8em; font-size: 14px; line-height: 1.3; }
.w3-more .ico { width: 18px; height: 18px; margin-top: auto; transition: transform .2s; }
.w3-more a:hover .ico { transform: translateX(3px); }
@media (max-width: 1080px) {
  .w3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 168px; }
  .w3-n { grid-column: span 2; }
}
@media (max-width: 640px) {
  .w3 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .w3-n, .w3-p { grid-column: auto; grid-row: auto; }
  .w3-o a, .w3-p a, .w3-more a { min-height: 138px; }
}

/* Events and open calls: two sections of four notch cards. Events carry a small abstract picture with the date on
   its edge; calls lead with the closing date and how much of the window is left. */
.sec-top .tp-lede { margin: 16px 0 0; } /* the shared lede rule centres itself; here it sits under the heading */
.tp-row { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 40px 0 0; padding: 0; }
.tp-row > li { display: flex; min-width: 0; }
.tp-row .nc { display: flex; flex-direction: column; width: 100%; border-radius: 22px; color: var(--ink); text-decoration: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; }
.tp-row .nc:hover { color: var(--ink); transform: translateY(-3px); filter: drop-shadow(0 16px 16px rgba(var(--b-shadow), .12)); }
.tp-empty { grid-column: 1 / -1; padding: 24px; border-radius: 20px; background: var(--surface); color: var(--ink-3); }
.tp-meta { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tp-meta b { font-weight: 500; color: var(--ink-2); } /* the date, a shade stronger than the rest of the line */
.tp-t { font: 500 19px/1.22 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.tp-d { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
/* Tags sit at the foot, clear of the corner the arrow opens into */
.tp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding: 6px 54px 0 0; }
.tp-tags span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--paper); box-shadow: none; color: var(--ink-2); font: 500 13.5px/1 var(--font-text); white-space: nowrap; }
.evc .nc { position: relative; }
.evc-art { display: block; height: 148px; margin: 8px 8px 0; border-radius: 16px; overflow: hidden; background: var(--b-ink-surface); }
.evc-art svg { display: block; width: 100%; height: 100%; }
.evc-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px 22px 22px; }
.opc .nc { gap: 12px; padding: 20px 22px 22px; }
.opc-top { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.opc-date { flex: none; display: grid; justify-items: center; align-content: center; gap: 5px; width: 70px; height: 78px; border-radius: 15px; background: var(--lime); color: var(--b-accent-ink); }
.opc-date b { font: 500 28px/1 var(--font-display); letter-spacing: -0.03em; }
.opc-date span { font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.opc-when { display: grid; flex: 1; gap: 6px; min-width: 0; }
.opc-when i { font: 500 10px/1 var(--font-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.opc-when b { font: 500 20px/1.1 var(--font-display); letter-spacing: -0.02em; }
.opc-bar { display: block; height: 6px; margin-top: 2px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.opc-bar i { display: block; width: calc(var(--p) * 100%); height: 100%; border-radius: 3px; background: var(--map-2); }
@media (max-width: 1100px) {
  .who-grid { grid-template-columns: minmax(0, 1fr); }
  .tp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .who-partners, .who-orgs { grid-template-columns: minmax(0, 1fr); }
  .who-partners a { min-height: 0; }
}
@media (max-width: 560px) {
  .tp-row { grid-template-columns: minmax(0, 1fr); }
}