/* 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.

   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;
  /* globe v2 on this ground: the nineteen in the brand red, with a soft red glow */
  --b-globe-mem: 165, 18, 18;
  --b-globe-halo: 196, 52, 36;

  /* The dark red hero (A/B 'Hero ground' V2–V4, ext/hero.css): a deep LIRNEasia red the globe glows on,
     resolving into --b-ground before the stat band. Scenery, never the data ramp. */
  --b-ember-0: #120305;
  --b-ember-1: #1e0508;
  --b-ember-2: #30070b;
  --b-ember-3: #4b0b10;
  --b-ember-4: #6b0f13;
  --b-ember-5: #8c1214;
  --b-ember-glow: #b8261a;
  --b-ember-flare: #dc5a34;
  --b-ember-peach: #f0c4ae;
  --b-ember-rgb: 30, 5, 8;
  --b-ember-glow-rgb: 200, 52, 30;
  --b-ember-flare-rgb: 236, 110, 70;
  /* V4 takes its colours from the gradient display type (.defn-h): --b-accent-on-dark into the map reds.
     Copied, not referenced, so a change to the data ramp never repaints the hero. */
  --b-ember-t5: #721713;
  --b-ember-t4: #9e3a31;
  --b-ember-t3: #bf6e63;
  --b-ember-t2: #e8938c;
  --b-ember-t1: #ecd2cc;
  /* text on it: 18.9:1 and 14.6:1 on the darkest stop, 7.6:1 and 7.3:1 on --b-ember-5 */
  --b-on-ember: #fff8f5;
  --b-on-ember-2: #f4dcd6;
  --b-ember-chip: rgba(30, 5, 8, .26);
  --b-ember-chip-line: rgba(255, 240, 236, .34);
  /* the globe on it: light dots that darken into the ground at the rim */
  --b-ember-globe-floor: 0.16;
  --b-ember-globe-far-k: 0.62;
  --b-ember-globe-rim: 96, 18, 22;
  --b-ember-globe-far: 238, 184, 174;
  --b-ember-globe-t1: 255, 246, 240;
  --b-ember-globe-t2: 255, 192, 174;
  --b-ember-globe-t3: 255, 222, 202;
  --b-ember-globe-glow: 214, 72, 52;
  --b-ember-globe-air: 255, 140, 110;
  --b-ember-globe-acc: 255, 170, 150;
  --b-ember-globe-mem: 255, 156, 132;
  --b-ember-globe-halo: 255, 92, 64;
  --b-ember-pin-on: #ffd9cf; --b-ember-pin-core: #4b0b10;
  --b-ember-spark: rgba(255, 228, 214, .95); --b-ember-spark-hot: #fff6f2;
  /* Globe styles on the dark grounds (dock: Globe style). Each is a whole palette for the canvas.
     Pale: a lit cream sphere carrying red dots. */
  --b-gs-pale-body-0: 255, 246, 242, .97; --b-gs-pale-body-1: 230, 182, 174, .94;
  --b-gs-pale-rim: 236, 200, 192; --b-gs-pale-far: 196, 124, 116;
  --b-gs-pale-t1: 165, 18, 18; --b-gs-pale-t2: 200, 52, 38; --b-gs-pale-t3: 122, 14, 18;
  --b-gs-pale-mem: 165, 18, 18; --b-gs-pale-halo: 220, 64, 44;
  --b-gs-pale-air: 255, 214, 200; --b-gs-pale-acc: 150, 16, 16;
  --b-gs-pale-pin-on: #a51212; --b-gs-pale-pin-core: #6b0f13; --b-gs-pale-spark: rgba(165, 18, 18, .9);
  /* Rose: a sphere in the brand's lighter reds, its dots near-black red */
  --b-gs-rose-body-0: 242, 166, 156, .96; --b-gs-rose-body-1: 178, 72, 66, .94;
  --b-gs-rose-rim: 172, 70, 64; --b-gs-rose-far: 116, 30, 32;
  --b-gs-rose-t1: 58, 4, 8; --b-gs-rose-t2: 92, 10, 14; --b-gs-rose-t3: 40, 4, 8;
  --b-gs-rose-mem: 66, 4, 8; --b-gs-rose-halo: 120, 10, 14;
  --b-gs-rose-air: 255, 150, 130; --b-gs-rose-acc: 255, 236, 230;
  --b-gs-rose-pin-on: #fff8f5; --b-gs-rose-pin-core: #3a0609; --b-gs-rose-spark: rgba(255, 240, 236, .95);
  /* Glass: a faint clear sphere, its dots hot red */
  --b-gs-glass-body-0: 255, 228, 222, .2; --b-gs-glass-body-1: 255, 150, 130, .05;
  --b-gs-glass-rim: 110, 18, 18; --b-gs-glass-far: 255, 118, 94;
  --b-gs-glass-t1: 255, 98, 66; --b-gs-glass-t2: 255, 146, 104; --b-gs-glass-t3: 255, 72, 52;
  --b-gs-glass-mem: 255, 112, 74; --b-gs-glass-halo: 255, 70, 40;
  --b-gs-glass-air: 255, 168, 148; --b-gs-glass-acc: 255, 160, 128;

  /* Ground X: two reds of the user's own, picked from the primary red's line (hue 0, saturation 80%),
     set on :root by the dock (and before first paint). These are the defaults. */
  --b-hero-c1: hsl(0 80% 3%);
  --b-hero-c2: hsl(0 80% 16%);
  /* the picker's track: the primary red's line, 2% to 60% lightness (#a51212 sits at 36%) */
  --b-red-line: linear-gradient(90deg, hsl(0 80% 2%), hsl(0 80% 12%), hsl(0 80% 24%), hsl(0 80% 36%), hsl(0 80% 48%), hsl(0 80% 60%));

  /* 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 {
  /* 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 */
  /* Section headings, two roles (24 Oct): display for the homepage and section overviews, section on inner pages */
  --h-display: clamp(2rem, 3.7vw, 3.35rem);
  --h-section: clamp(1.5rem, 2.2vw, 1.95rem);
  --h2-size: var(--h-display);
  --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);

  /* Spacing: the only spacing values on the site. 8px base, --sp-N = N × 8px, plus three half steps.
     Never hard-code a margin, padding or gap in px on a page; use these (Brain: ai4d-prototype-map, Spacing). */
  --sp-0-5: 4px; --sp-1: 8px; --sp-1-5: 12px; --sp-2: 16px; --sp-2-5: 20px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-7: 56px; --sp-8: 64px; --sp-9: 72px; --sp-10: 80px; --sp-11: 88px;
  --sp-12: 96px; --sp-13: 104px; --sp-14: 112px; --sp-15: 120px; --sp-16: 128px; --sp-18: 144px; --sp-21: 168px;
  /* Roles */
  --sp-section: clamp(64px, calc(5vw + 40px), 112px); /* section padding top/bottom: 112 at 1440, 64 on phones */
  --sp-section-lg: clamp(80px, calc(6.6667vw + 48px), 144px); /* homepage bands only: 144 at 1440, 80 on phones */
  --sp-head: var(--sp-3);       /* section heading block → content */
  --sp-head-desc: var(--sp-1-5); /* heading → its description */
  --sp-controls: var(--sp-3);   /* tabs / filters row → content */
  --sp-grid: var(--sp-3);       /* between cards, both axes, every grid (24px, Shajee 24 Oct) */
  --sp-card: var(--sp-3);       /* card inner padding, all sides (20 on phones) */
  --sp-card-meta: var(--sp-1-5); /* meta row → title */
  --sp-card-title: var(--sp-1);  /* title → date / meta line */
  --sp-card-sum: var(--sp-1-5);  /* → summary */
  --sp-card-tags: var(--sp-2);   /* least gap above the tag row / footer, which pins to the bottom */
  --sp-card-nested: var(--sp-2); /* a tile inside a card (event rows, spec cells) */
  --sp-chip-gap: var(--sp-1);    /* between chips and tags */
  --sp-chip-x: var(--sp-1);      /* chip and tag padding, left/right */
}
@media (max-width: 640px) { :root { --sp-card: var(--sp-2-5); } }

/* ---------------------------------------------------------------- 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) + var(--sp-4)); }
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, .hd-count, .ov-count { 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: var(--sp-1) var(--sp-2); 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: var(--sp-1);
  min-height: 44px; padding: 0 var(--sp-3);
  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); }
:is(.btn-primary, .btn-lime) > .ico { order: 1; }  /* a primary CTA's icon always follows its label (Shajee, 24 Oct) */
.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 var(--sp-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-sm { min-height: 36px; padding: 0 var(--sp-2); 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: var(--sp-2); min-height: 48px; padding: 0 var(--sp-2-5) 0 var(--sp-3); 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; }
/* Cards with the corner arrow (29 Oct): text CTAs inside drop their own arrow, and the summary keeps clear of the corner's cut-out */
/* The corner arrow as in the green build (Shajee, 29 Oct): a 12px square whose outer corner follows the card's own corner,
   whatever radius that card has (inherited through .corner) */
/* .card with the corner arrow hovers like every other card: its outline and box shadow can't follow the notch, so they give way to the drop shadow */
.card.nc { background: none; }  /* the white comes from .nc::before, so the corner notch can cut it */
.card.nc:is(:hover, :focus-within) { border-color: transparent; box-shadow: none; transform: translateY(-3px); filter: drop-shadow(0 16px 16px rgba(var(--b-shadow), .1)); }
.nc > .corner { border-bottom-right-radius: inherit; }
.nc > .corner .corner-btn { border-radius: 12px; border-bottom-right-radius: inherit; }
/* only while the corner arrow can show: the rows-without-cards versions hide it, so their links keep their own arrow */
.nc:has(> .corner):not([data-cl="b"] .nc) :is(.nw-more, .d-cnt, .cty-go, .pj-start a) > .ico { display: none; }
.nc:has(> .corner) .nw-sum { padding-right: 64px; }
/* Text buttons (29 Oct, universal): no underline at rest; it draws in when the link or its card is hovered or focused */
/* drawn as a 1px line under the box (not text-decoration, which flex boxes like .d-cnt don't paint) */
:is(.nw-more span, .d-cnt, .cty-go) { padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s cubic-bezier(.2, .8, .2, 1), color .2s ease; }
/* Card link (design system): ink at rest; on hover the site red, underline drawn in */
:is(.nc, .nw-feat, .nw-item, .nw-more, .d-cnt, .cty-go, a):is(:hover, :focus-visible, :focus-within) :is(.nw-more, .nw-more span, .d-cnt, .cty-go) { color: var(--b-primary); }  /* the arrow (currentColor) turns red with the text */
:is(.nw-more, .d-cnt, .cty-go) .ico { transition: transform .2s, color .2s ease; }
:is(.nc, .nw-feat, .nw-item, .nw-more, .d-cnt, .cty-go, a):is(:hover, :focus-visible, :focus-within) :is(.nw-more span, .d-cnt, .cty-go),
:is(.d-cnt, .cty-go):is(:hover, :focus-visible) { background-size: 100% 1px; color: var(--b-primary); }
.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-hero { display: inline-flex; gap: var(--sp-0-5); }
.pd-font select, .pd-plate select, .pd-hero select { max-width: 180px; min-height: 26px; padding: 0 var(--sp-3) 0 var(--sp-1); 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, .pd-hero select:hover { background-color: rgba(255, 255, 255, .22); }
.pd-font select option, .pd-plate select option, .pd-hero 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 var(--sp-1); 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); }
/* A/B strip: sits at the top of every section being tested (see AB in app.js). Built like the dock, so it reads
   as prototype chrome rather than part of the design. V1 is always the current version. */
.ab-bar { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; width: fit-content; max-width: 100%; margin: 0 0 var(--sp-2); padding: 3px; border-radius: 999px; background: rgba(var(--b-shadow), .88); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; }
.ab-k { padding: 0 var(--sp-1) 0 var(--sp-1); color: rgba(255, 255, 255, .66); text-transform: uppercase; }
.ab-bar button { min-width: 34px; min-height: 26px; padding: 0 var(--sp-1); border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .78); font: inherit; letter-spacing: .04em; cursor: pointer; transition: background-color .15s, color .15s; }
.ab-bar button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ab-bar button[aria-pressed="true"] { background: var(--b-accent); color: var(--b-accent-ink); }
.ab-bar button:focus-visible { outline: 2px solid var(--b-accent-on-dark); outline-offset: 2px; }
.ab-bar.ab-on-dark { margin-bottom: var(--sp-3); }
/* Small lettered strip (29 Oct): A, B, C only; the section name is read out but not shown */
.ab-bar .ab-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ab-bar { padding: 2px; }
.ab-bar button { min-width: 22px; min-height: 20px; padding: 0 6px; font: 600 10.5px/1 var(--font-mono); letter-spacing: 0; }
/* pinned to its section's top-left corner, below the floating nav */
.ab-bar.ab-pin { position: absolute; left: var(--page-pad); top: calc(var(--nav-h) + var(--annc-h, 0px) + 28px); z-index: 6; margin: 0; }
.proto-dock { position: fixed; right: 14px; bottom: 14px; z-index: 70; display: flex; align-items: center; gap: var(--sp-1); max-width: calc(100vw - 28px); padding: var(--sp-0-5) var(--sp-0-5) var(--sp-0-5) var(--sp-1-5); 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: var(--sp-1) var(--sp-2); }
.proto-dock button { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 28px; padding: 0 var(--sp-1); 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: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-2); 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: var(--sp-1) 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: var(--sp-1) var(--sp-3) var(--sp-3); overflow: auto; }
/* The numbers the claims rest on */
.a11y-m { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-1-5); border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); }
.a11y-m h3 { margin: 0 0 var(--sp-1); 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: var(--sp-1) 0; font-size: 14px; font-weight: 500; text-align: left; }
.a11y-m td { padding: var(--sp-1) 0 var(--sp-1) var(--sp-1-5); 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: var(--sp-1) 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.a11y-sc { margin-right: var(--sp-1); 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: var(--sp-2); }
.a11y-g h3 { margin: 0 0 var(--sp-1); 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: var(--sp-1-5); padding: var(--sp-1) 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-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: var(--sp-1); height: 28px; padding: 0 var(--sp-1-5); border-bottom: 1px solid rgba(var(--b-shadow), .10); }
.rec-dots { display: inline-flex; gap: var(--sp-0-5); }
.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: var(--sp-1); }
.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: var(--sp-1); height: 199px; overflow: hidden; }
.rr-h { display: grid; grid-template-columns: 14px 34px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1); height: 29px; padding: 0 var(--sp-1); 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 var(--sp-0-5); padding: 3px var(--sp-1) 3px var(--sp-4); display: grid; gap: var(--sp-1); overflow: hidden; }
.rr-sub li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: var(--sp-1); 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; } }

/* The country flag in the header (.hd-flag sets its height). 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-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-flag .tflag { width: 100%; height: 100%; }
.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: var(--sp-1); margin: var(--sp-3) 0 0; padding: 0; }
.ch-en a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--sp-0-5) var(--sp-2); padding: var(--sp-2) var(--sp-2-5) var(--sp-2); 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: var(--sp-1-5); 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: var(--sp-4) var(--sp-9); }
.cty-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.ctyf { position: relative; }
.ctyf > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; padding: 0 var(--sp-2) 0 var(--sp-2); 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: var(--sp-1); 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: var(--sp-1-5); min-height: 40px; padding: 0 var(--sp-1-5); 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 var(--sp-2); 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: var(--sp-3) 0 var(--sp-2); 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: var(--sp-3); }

/* The countries page: one card a country — its flag, its name, what it holds, and its outline in the corner */
.cty-wrap { padding-block: var(--sp-4) var(--sp-10); }
.cty-count { margin: 0 0 var(--sp-2); 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: var(--sp-grid); margin: 0; padding: 0; }
.cty-card > .nc { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: var(--sp-3); 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: var(--sp-2); font: 500 20px/1.2 var(--font-display); letter-spacing: -0.02em; }
.cty-m { margin-top: var(--sp-1); display: inline-flex; align-items: center; gap: var(--sp-1); font: 500 13px/1.4 var(--font-text); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.cty-go { margin-top: var(--sp-4); display: inline-flex; align-items: center; gap: var(--sp-1); 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: var(--sp-3) 0 0; font-size: 16px; color: var(--ink-3); }

/* The live check, while you browse */
.a11y-run { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: var(--sp-2) var(--sp-3) 0; padding: var(--sp-2) var(--sp-2); 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: var(--sp-2) var(--sp-2) var(--sp-2); 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: var(--sp-0-5) var(--sp-1); }
#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: var(--sp-2) 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: var(--sp-1) 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: var(--sp-1-5) 0 0; padding: 0; }
#a11y-live .al-l button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-1); width: 100%; padding: var(--sp-1) var(--sp-1); 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 var(--sp-1); 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: var(--sp-2); padding-top: var(--sp-2); 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: var(--sp-2) var(--sp-2) var(--sp-1-5); 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: var(--sp-1); }
.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: var(--sp-1); 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: var(--sp-1); }
.tune-foot .linkish { color: #fff; }
.tune-foot .btn { min-height: 34px; padding: 0 var(--sp-1-5); 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: var(--sp-1) 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: var(--sp-1); padding: var(--sp-0-5) var(--sp-1) var(--sp-0-5); 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: var(--sp-1-5) var(--sp-1-5); 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: var(--sp-1); min-height: 40px; padding: 0 var(--sp-1-5) 0 var(--sp-1-5); 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 var(--sp-0-5); 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: var(--sp-1); 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: var(--sp-1); width: 100%; min-height: 38px; padding: 0 var(--sp-1); 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: var(--sp-1-5); height: var(--nav-h); padding: 0 var(--sp-1) 0 var(--sp-3); border-radius: 999px; 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: var(--sp-1-5); 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: var(--sp-0-5); }
/* The logo: the colour lockup on light grounds, the mono one wherever the nav sits over a dark zone (the dark hero, the footer) */
.brand-logo { display: block; width: auto; height: 40px; }
.bl-mono { display: none; }
body.nav-dark .head-bar .bl-color { display: none; }
body.nav-dark .head-bar .bl-mono { display: block; }
.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: var(--sp-0-5); list-style: none; }  /* full-pill items, 16px each side (24 Oct) */
.nav-top { display: flex; align-items: center; gap: var(--sp-0-5); min-height: 40px; padding: 0 var(--sp-2); border: 0; border-radius: 999px; 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: var(--sp-1); width: 660px; padding: var(--sp-1); 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: calc(var(--sp-1) * -1); } }
.np-intro { --focus: var(--b-accent-on-dark); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-2); border-radius: 14px; background: var(--nav-surf, var(--b-ink-surface)); color: var(--b-ink-surface-ink); }
.np-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nav-glow, 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(--nav-acc, var(--b-accent-on-dark)); }
.np-lede { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .84); }
/* The overview row: a plain line with the arrow pinned right. The pill tried for 22.2 crowded the card, so
   it is back to this, with the arrow travelling and an underline on hover to say it is a link. */
.np-over { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); margin-top: auto; padding-top: var(--sp-2); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.np-over .ico { flex: none; width: 18px; height: 18px; color: var(--nav-acc, var(--b-accent-on-dark)); transition: transform .18s; }
.np-over:hover, .np-over:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.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: var(--sp-1-5); row-gap: 2px; align-items: center; padding: var(--sp-1) var(--sp-1); 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(--nav-surf, var(--b-ink-surface)); color: var(--nav-acc, 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: var(--sp-1); min-height: 40px; margin-left: var(--sp-1); padding: 0 var(--sp-2-5); 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: var(--sp-section); }
.sec + .sec { padding-top: 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-head-desc) var(--sp-4); margin-bottom: var(--sp-head); }
.sec-head h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--h-section); line-height: 1.1; letter-spacing: -0.012em; margin-top: 0; display: flex; align-items: center; gap: var(--sp-1-5); flex-wrap: wrap; }
.sec-lede { max-width: 34em; color: var(--ink-2); margin: 0; }
.more-link { display: inline-flex; align-items: center; gap: var(--sp-1); 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: var(--sp-1); max-width: 680px; padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-2-5); 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: var(--sp-1); color: var(--ink-3); }
.searchbox input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 18px; padding: var(--sp-1) var(--sp-1); 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 */
/* The switch: one look for every row of buttons that picks one view or one filter (23 Oct): the region map's
   tabs. A slightly darker track with a fine edge and a soft inner shadow; the chosen option a white pill that lifts. .seg, the country filter's .cviews, the
   region's .rv-tabs (its white thumb slides instead), the map components' .mp-seg and .mp-tabs, the overviews'
   .ov-tabs and the events filter all draw from here; their own rules keep only their layout. */
.seg, .cviews, .rv-tabs, .mp-seg, .mp-tabs, .ov-tabs { display: inline-flex; gap: 2px; padding: var(--sp-0-5); border: 0; border-radius: var(--r-pill); background: var(--b-tile); box-shadow: inset 0 0 0 1px var(--rule-2), inset 0 1px 2px rgba(var(--b-shadow), .08); }
.seg button, .cviews button, .rv-tabs button, .mp-seg button, .mp-tabs button, .ov-tabs [role="tab"] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 42px; padding: 0 var(--sp-2);
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: 400 16px/1.2 var(--font-display);
  letter-spacing: -0.015em; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.seg button:hover, .cviews button:hover, .rv-tabs button:hover, .mp-seg button:hover, .mp-tabs button:hover, .ov-tabs [role="tab"]:hover { background: transparent; color: var(--ink); }
.seg button[aria-pressed="true"], .cviews button[aria-pressed="true"], .mp-seg button[aria-pressed="true"], .mp-tabs button[aria-selected="true"], .ov-tabs [role="tab"][aria-selected="true"],
.rv-thumb { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 2px 10px rgba(var(--b-shadow), .16), 0 1px 2px rgba(var(--b-shadow), .12); }
.seg button:focus-visible, .cviews button:focus-visible, .rv-tabs button:focus-visible, .mp-seg button:focus-visible, .mp-tabs button:focus-visible, .ov-tabs [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg .ico, .cviews .ico, .rv-tabs .ico, .mp-seg .ico, .mp-tabs .ico, .ov-tabs .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: var(--sp-1) var(--sp-1) var(--sp-0-5); 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: var(--sp-1) var(--sp-1); 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: var(--sp-1) var(--sp-1-5); margin-top: var(--sp-2); 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: var(--sp-0-5); 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: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); 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: var(--sp-1) 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: var(--sp-1) var(--sp-3);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--sp-card);
  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); }
.card > div { display: flex; flex-direction: column; min-width: 0; } /* the content column: the tag row pins to its bottom */
/* 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: var(--sp-1) var(--sp-2); 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: var(--sp-1) var(--sp-1-5); 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: var(--sp-1); } /* where it is: the flag, then the place */
.cm-c .tflag { width: 15px; height: 15px; }
.cm-c .tflag + .tflag { margin-left: calc(var(--sp-1) * -1); box-shadow: 0 0 0 1.5px var(--surface); }
.cm-l > * + *, .cm-r > * + * { position: relative; padding-left: var(--sp-1-5); }
.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: var(--sp-1); 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: var(--sp-1); }
.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: var(--sp-card-meta) 0 0; 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: var(--sp-card-sum) 0 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: var(--sp-chip-gap); margin-top: auto; padding-top: var(--sp-card-tags); }
.card-when { display: none; margin: var(--sp-card-title) 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 var(--sp-1) 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: var(--sp-card); 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 { font-size: 20px; line-height: 1.22; letter-spacing: -0.02em; }
.lst .list.is-cards .card-s, .rel-grid .card-s { font-size: 15.5px; line-height: 1.5; color: var(--ink-3); }
.lst .list.is-cards .tagbtn, .rel-grid .tagbtn { min-height: 28px; padding: 0 var(--sp-chip-x); font-size: 13.5px; }
.tagmore { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--sp-0-5); font: 500 13.5px/1 var(--font-text); color: var(--ink-3); }
.card-aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); padding-top: 2px; }
.card.compact { grid-template-columns: minmax(0, 1fr); }
.card.compact h3 { font-size: 18.5px; }
.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: var(--sp-0-5); min-height: 28px; padding: 0 var(--sp-chip-x);
  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); }
.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: var(--sp-1); 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: var(--sp-0-5); }
.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: var(--sp-section-lg) 0; }
/* one band's spacing between two plain bands, not two (the homepage wraps some bands in their own .page) */
.blk + .blk, .page + .page > .blk:first-child, .page + .stack > .page:first-child > .blk:first-child { padding-top: 0; }
.sec-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-head-desc) var(--sp-6); }
.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: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-3); }
.kicker-row .kicker { margin: 0; }
.kicker-row .ptag { margin-block: calc(var(--sp-1) * -1); }
.kicker { display: inline-flex; align-items: center; gap: var(--sp-1); 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, .sec-head .eyebrow { color: var(--b-accent-2); }
.sec-head .eyebrow { margin-bottom: var(--sp-3); }
.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(var(--sp-3), 4vw, var(--sp-9)); min-height: max(720px, 100svh); padding: calc(var(--nav-h) + var(--sp-2) + clamp(var(--sp-5), 7vh, var(--sp-11))) var(--page-pad) clamp(var(--sp-6), 8vh, var(--sp-12)); 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 hover: a red gradient sweeps in under the label (picked 22 Oct; it replaced
   the glass sheen). The rules are in ext/buttons.css; these boxes hold its layer.
   --------------------------------------------------------------------------- */
.sub-pill, .hs-go, .btn-arrow, .btn-view, .corner-btn { position: relative; overflow: hidden; isolation: isolate; }
/* The corner button's arrow turns a little instead. */
.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) {
  .corner-btn { transition-duration: .01ms; }
  .corner-btn:hover { transform: 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: var(--sp-2);
  min-height: var(--annc-h, 40px); padding: var(--sp-1) calc(var(--page-pad) + var(--sp-4)) var(--sp-1) 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: var(--sp-1); 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 { padding-top: calc(var(--annc-h) + var(--nav-h) + var(--sp-2) + clamp(var(--sp-5), 7vh, var(--sp-11))); }
@media (max-width: 760px) {
  body.has-annc { --annc-h: 56px; }
  .annc { font-size: 12.5px; flex-wrap: wrap; gap: var(--sp-0-5) var(--sp-1); }
}

/* ---------------------------------------------------------------------------
   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 var(--sp-1-5); 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; }

/* ---------------------------------------------------------------------------
   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(var(--sp-8), 8vw, var(--sp-14)); }
.fbk-bar { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-1-5) 0 0; }
.fbk-f { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 36px; padding: 0 var(--sp-2);
  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: var(--sp-section); }
.fbk-pt { margin: 0 0 var(--sp-1); font: 500 var(--h-section)/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: var(--sp-head); }
.fbk-an { display: flex; align-items: baseline; gap: var(--sp-1-5); margin: 0 0 var(--sp-2); padding-bottom: var(--sp-1);
  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: var(--sp-2); margin: 0; padding: 0; }
.fbk-i { padding: var(--sp-card); border-radius: 18px; background: var(--b-surface); box-shadow: inset 0 0 0 1px var(--rule); }
/* The point a WIP tag opened on: ringed in the accent so it is found at a glance */
.fbk-i.is-hit { box-shadow: inset 0 0 0 2px var(--b-accent), 0 10px 28px rgba(var(--b-shadow), .12); }
.fbk-i.is-hit:focus { outline: none; }
.fbk-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-1-5); }
.fbk-id { font: 500 12px/1.5 var(--font-mono); color: var(--b-primary); }
/* Their request as a quiet quote, then what we did in plain words; each under a small label */
.fbk-k { margin: var(--sp-2) 0 var(--sp-0-5); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.fbk-q { margin: 0; padding-left: var(--sp-2); border-left: 2px solid var(--rule-2); }
.fbk-q p { margin: 0; font-size: 15.5px; line-height: 1.55; font-style: italic; color: var(--ink-2); }
.fbk-a { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.fbk-foot { margin: clamp(var(--sp-6), 5vw, var(--sp-9)) 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--rule); font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

.pill { flex: none; padding: var(--sp-0-5) var(--sp-1-5); 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); }

.fbk-page { padding-top: clamp(var(--sp-4), 3.4vw, var(--sp-6)); }

/* the wipe */
.ba { margin: var(--sp-2) 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: var(--sp-0-5) var(--sp-1); 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: var(--sp-1); font-size: 13px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 680px) {
  .fbk-bar { position: static; }
}

/* A point that changed something visible carries its before/after on the right: both builds split down
   the middle. It is a button; the full wipe opens in the lightbox. Under the text on a phone. */
.fbk-i.has-shot { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 27vw, 320px); gap: var(--sp-1-5) clamp(var(--sp-2), 2.4vw, var(--sp-4)); align-items: start; }
.fbk-th { display: grid; gap: var(--sp-1); width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: zoom-in; }
.fbk-th-w { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px;
  background: var(--surface-2); box-shadow: 0 0 0 1px var(--rule); line-height: 0;
  transition: box-shadow .2s, transform .25s cubic-bezier(.2,.9,.3,1.2); }
.fbk-th-w img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fbk-th-a { clip-path: inset(0 0 0 var(--p, 50%)); transition: clip-path .45s cubic-bezier(.3,.7,.2,1); }
.fbk-th-l { position: absolute; top: 0; bottom: 0; left: var(--p, 50%); width: 2px; margin-left: -1px;
  background: var(--b-accent); transition: left .45s cubic-bezier(.3,.7,.2,1); }
.fbk-th .ba-tag { top: 8px; padding: 3px var(--sp-1); font-size: 9px; }
.fbk-th .ba-tl { left: 8px; } .fbk-th .ba-tr { right: 8px; }
.fbk-th-c { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); transition: color .18s; }
.fbk-th:hover .fbk-th-w { box-shadow: 0 0 0 1px var(--ink-3), 0 10px 24px rgba(var(--b-shadow), .14); transform: translateY(-2px); }
.fbk-th:hover .fbk-th-c { color: var(--ink); }
/* a nudge toward today on hover, so the pair reads as a comparison before it is opened */
.fbk-th:hover .fbk-th-w { --p: 34%; }
.fbk-th:focus-visible { outline: none; }
.fbk-th:focus-visible .fbk-th-w { box-shadow: 0 0 0 3px var(--focus); }
/* Removed: what went, greyed on a grey ground under an angled band. Added: the new section alone, tagged New.
   Neither is a comparison, so neither has the split or the hover nudge. */
.fbk-th-removed .fbk-th-w, .fbk-th-added .fbk-th-w { background: var(--surface-2); }
.fbk-th-removed .fbk-th-w img { object-fit: contain; object-position: center; padding: var(--sp-1);
  filter: grayscale(1) contrast(.55) brightness(1.06); opacity: .62; }
.fbk-band { position: absolute; left: -10%; right: -10%; top: 50%; z-index: 2; transform: translateY(-50%) rotate(-9deg);
  padding: var(--sp-1) 0; text-align: center; background: var(--b-solid); color: var(--b-solid-ink);
  font: 500 11px/1.4 var(--font-mono); letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(var(--b-shadow), .25); pointer-events: none; }
.ba-tag.fbk-new { background: var(--b-primary); }
.fbk-th-added .fbk-th-w img.is-wide { object-fit: contain; object-position: center; padding: var(--sp-1); }
.ba-one.is-removed .ba-w { background: var(--surface-2); }
.ba-one.is-removed .ba-img { filter: grayscale(1) contrast(.55) brightness(1.06); opacity: .62; }
.ba-one .fbk-band { padding: var(--sp-1) 0; font-size: 15px; letter-spacing: .26em; }
.fbk-lb .ba-one .ba-w { width: min(100%, calc((100dvh - 190px) * var(--ar, 1.6)), var(--nw, 100%)); }
/* links in a point's notes go to where the change can be seen */
.p-part { background: none; color: var(--b-ok-ink); outline: 1px dashed var(--b-ok-ink); outline-offset: -1px; }
.fbk-f .p-part { background: linear-gradient(90deg, var(--b-ok-ink) 50%, var(--rule-2) 50%); }
.p-proto { background: none; color: var(--b-ok-ink); box-shadow: inset 0 0 0 1px var(--b-ok-ink); }
.fbk-f .p-proto { background: none; box-shadow: inset 0 0 0 1.5px var(--b-ok-ink); }
@media (max-width: 760px) {
  .fbk-i.has-shot { grid-template-columns: minmax(0, 1fr); }
  .fbk-th { max-width: 480px; }
}

/* The lightbox: as large as the screen allows, with the wipe sized so the whole shot fits without scrolling. */
.fbk-lb { width: min(1240px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; border-radius: 22px; overflow: auto;
  background: var(--b-surface); color: var(--ink); box-shadow: 0 30px 80px rgba(var(--b-shadow), .35); }
.fbk-lb::backdrop { background: rgba(var(--b-shadow), .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fbk-lb[open] { animation: fbk-lb-in .28s cubic-bezier(.2,.8,.2,1); }
@keyframes fbk-lb-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
html:has(.fbk-lb[open]) { overflow: hidden; }
.fbk-lb-h { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); background: var(--b-surface); border-bottom: 1px solid var(--rule); }
.fbk-lb-t { flex: 1 1 auto; min-width: 0; margin: 0; font: 500 16px/1.35 var(--font-display); letter-spacing: -0.01em; }
.fbk-lb-t .fbk-id { margin-right: var(--sp-1); }
.fbk-lb-nav { flex: none; display: flex; align-items: center; gap: var(--sp-1); }
.fbk-lb-n { min-width: 4.5em; text-align: center; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--ink-3); }
.fbk-lb-b { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-2); cursor: pointer;
  transition: color .18s, box-shadow .18s, background .18s; }
.fbk-lb-b:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.fbk-lb-b:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fbk-lb-b .ico { width: 17px; height: 17px; }
.fbk-lb-prev .ico { transform: rotate(180deg); }
.fbk-lb-x { margin-left: var(--sp-1); background: var(--b-solid); color: var(--b-solid-ink); box-shadow: none; }
.fbk-lb-x:hover { background: var(--b-solid); color: var(--b-solid-ink); box-shadow: 0 0 0 3px var(--rule); }
.fbk-lb-body { padding: var(--sp-2) clamp(var(--sp-2), 2vw, var(--sp-3)) var(--sp-2-5); }
.fbk-lb .ba { margin: 0; }
.fbk-lb .ba-w { width: min(100%, calc((100dvh - 190px) * var(--ar, 1.6))); margin-inline: auto; }
.fbk-lb .ba-r { cursor: ew-resize; }
/* the slider has focus from the moment the lightbox opens: ring the wipe's own handle, not the browser's */
.fbk-lb .ba-r:focus-visible { opacity: 0; }
.fbk-lb .ba-w:has(.ba-r:focus-visible) { box-shadow: inset 0 0 0 1px var(--rule), 0 0 0 3px var(--focus); }
.fbk-lb .ba-w:has(.ba-r:focus-visible) .ba-line::after { box-shadow: 0 0 0 3px var(--b-surface), 0 0 0 6px var(--focus); }
.fbk-lb .ba figcaption { text-align: center; }
@media (max-width: 760px) {
  .fbk-lb { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .fbk-lb-h { flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1-5) var(--sp-1-5) var(--sp-1-5) var(--sp-2); }
  .fbk-lb-t { flex-basis: 100%; order: 2; font-size: 14.5px; }
  .fbk-lb-nav { order: 1; width: 100%; justify-content: flex-end; }
  .fbk-lb-n { margin-right: auto; text-align: left; min-width: 0; }
  .fbk-lb .ba-w { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fbk-lb[open] { animation: none; }
  .fbk-th-w, .fbk-th-a, .fbk-th-l { transition: none; }
}

/* ---------------------------------------------------------------------------
   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-intro { margin: var(--sp-2) 0 0; max-width: 40em; font-size: 16.5px; line-height: 1.62; color: var(--ink-2); }

.cat-feat { padding: clamp(var(--sp-6), 5.5vw, var(--sp-10)) 0 clamp(var(--sp-1), 1vw, var(--sp-2)); }
.cat-feat-top { align-items: flex-end; }
.cat-feat .sec-lede { margin-top: var(--sp-1); }
.cat-grid { margin-top: clamp(var(--sp-3), 3vw, var(--sp-5)); }
.cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat-grid > li { grid-column: auto; }
.cat-browse { margin-top: clamp(var(--sp-6), 6vw, var(--sp-11)); padding-top: clamp(var(--sp-4), 3.4vw, var(--sp-6)); border-top: 1px solid var(--rule); }
.cat-browse .h2 { margin: 0; }
.cat-browse .sec-lede { margin: var(--sp-1-5) 0 0; }
.cat-browse + .repo-grid { margin-top: clamp(var(--sp-3), 2.6vw, var(--sp-4)); }
@media (max-width: 900px) { .cat-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   The category intro, four ways (dock: Intro A–D), for an A/B against the build.
   A is the build above. B lifts the featured three into the head; C gives the
   introduction its own band and the head a picture slot; D opens on the
   browser's own two columns. Tokens only, so both themes follow.
   --------------------------------------------------------------------------- */

.cv-feat-note { max-width: 36em; margin: calc(var(--sp-1) * -1) 0 var(--sp-2); font-size: 14px; line-height: 1.5; color: var(--b-ink-2); }
/* What qualifies (19.8): the category's criteria, stated where the introduction is */
.lh-qual { max-width: 40em; margin-top: var(--sp-3); }

/* The featured row's heading ("Start with these") */
.cvb-h { margin: 0 0 var(--sp-2); font: 500 1.3rem/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--b-ink); }

/* Line cards: a featured entry as one line (E's panel, H's row of three) */
.cve-box { list-style: none; margin: 0; padding: var(--sp-1); border-radius: 26px; background: var(--b-surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .04); }
.cve-row:first-child { border-top: 0; }
.cve-row { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; margin: 0 var(--sp-1); padding: var(--sp-2) var(--sp-0-5); border-top: 1px solid var(--b-rule); }
.cve-thumb { height: 72px; border-radius: 12px; }
.cve-thumb .lat-iso { right: 8%; bottom: 6%; width: auto; height: 88%; }
.cve-txt { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.cve-txt .nw-meta { margin: 0; }
.cve-txt h3 { margin: 0; font: 500 1.08rem/1.22 var(--font-display); letter-spacing: -0.015em; color: var(--b-ink); text-wrap: balance; transition: color .2s; }
.cve-txt h3 a { color: inherit; text-decoration: none; }
.cve-txt h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.cve-txt h3 a:focus-visible { outline: none; }
.cve-txt h3 a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.cve-cap { display: inline-flex; align-items: center; gap: var(--sp-0-5); font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--b-ink-3); }
.cve-cap .ico { width: 12px; height: 12px; }
.cve-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--b-neutral-2); color: var(--b-ink); transition: transform .2s, background-color .2s, color .2s; }
.cve-go .ico { width: 16px; height: 16px; }
.cve-row:hover h3 { color: var(--b-primary); }
.cve-row:hover .cve-go { background: var(--b-primary); color: var(--b-accent-ink); transform: translateX(2px); }
@media (max-width: 760px) {
  .cve-row { grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-2); }
  .cve-thumb { height: 64px; }
  .cve-go { display: none; }
}

/* The three line cards across, under the header */
.cvh-feat { margin-top: clamp(var(--sp-4), 4vw, var(--sp-6)); }
.cvh-row { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-grid); margin: 0; padding: 0; }
.cvh-row .cve-row { margin: 0; padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1); border: 0; border-radius: 22px; background: var(--b-surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .04);
  grid-template-columns: 88px minmax(0, 1fr) auto; gap: var(--sp-2); }
.cvh-row .cve-thumb { height: 80px; }
.cvh-row .cve-txt h3 { font-size: 1.02rem; }
@media (max-width: 1240px) { .cvh-row .cve-go { display: none; } .cvh-row .cve-row { grid-template-columns: 88px minmax(0, 1fr); } }
@media (max-width: 960px) { .cvh-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .cvh-row .cve-row { grid-template-columns: 72px minmax(0, 1fr); } .cvh-row .cve-thumb { height: 64px; } }

/* 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 var(--sp-3) 0 var(--sp-3); 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: var(--sp-1); margin: var(--sp-2) 0 0; padding: var(--sp-0-5) var(--sp-1-5) var(--sp-0-5) var(--sp-1);
  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: var(--sp-2); }
.sec-top .wip { margin-top: var(--sp-1-5); }

.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 var(--sp-3); 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: var(--sp-1); width: min(340px, calc(100vw - 2 * var(--page-pad))); padding: var(--sp-1-5) var(--sp-2) var(--sp-1-5); 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: var(--sp-3); }
.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; }
@media (prefers-reduced-motion: reduce) { .sf-label::before, .sf-body.in { animation: none; } }
/* A place named on the globe card and the map tooltip: plain words, no live dot (picked 24 Oct, L4) */
.sf-label { display: flex; align-items: center; gap: var(--sp-1); font: 600 13px/1.2 var(--font-text); color: var(--b-primary); }
@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: var(--sp-0-5); 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 var(--sp-4); 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: var(--sp-1); max-width: 660px; padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); 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: var(--sp-1-5) var(--sp-0-5); 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: var(--sp-1); flex: none; min-height: 48px; padding: 0 var(--sp-3) 0 var(--sp-3); 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: var(--sp-1); margin-top: var(--sp-2); 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 var(--sp-1-5); 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) var(--sp-section-lg);
  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: var(--sp-head-desc) 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: var(--b-rule); }  /* land outside the region: the warm rule tone, so it reads as paper rather than a patch */
/* 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: var(--sp-1); width: 290px; padding: var(--sp-1-5) var(--sp-2) var(--sp-1-5); 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-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: var(--sp-2); width: 404px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); overflow: auto; padding: var(--sp-3); 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: var(--sp-1); padding-right: var(--sp-5); }
.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: var(--sp-1); margin: 0; padding: 0; }
.rm-fam a, .rm-fam .is-zero { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-1); height: 100%; min-height: 60px; padding: var(--sp-1) var(--sp-1); 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: var(--sp-1); }
.rm-sec .rd-label { margin: 0; }
.rm-bars { list-style: none; display: grid; gap: var(--sp-0-5); margin: 0; padding: 0; }
.rm-bars li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 20px; align-items: center; gap: var(--sp-1); 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: var(--sp-1) 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: var(--sp-2) 0 0; }

/* Map view and table view: tabs after the title (Figma 25:2); a white thumb slides between them */
.rv-tabs { position: relative; margin: var(--sp-3) auto 0; }
.rv-tabs button { position: relative; z-index: 1; width: 132px; }
.rv-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 500; 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: var(--r-pill); 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(var(--sp-3), 3.2vw, var(--sp-5)) 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: var(--sp-2); align-items: start; }
/* The table reads as a table: a white card with an edge, flat rows split by hairlines, a faint band on every other row */
.tv-card { padding: var(--sp-2-5) var(--sp-2) var(--sp-1-5); border-radius: 24px; background: var(--b-surface); box-shadow: inset 0 0 0 1px var(--rule), 0 8px 24px rgba(var(--b-shadow), .06); }
.tv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-2); padding: 0 var(--sp-1) var(--sp-1-5); }
.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-2); }
.tvtab { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.tvtab thead th, .tvtab thead td { padding: var(--sp-0-5) var(--sp-1) var(--sp-1); border-bottom: 1px solid var(--rule-2); font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); 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: var(--sp-2); }
.tvtab .tv-go { width: 26px; }
.tvtab tbody tr { cursor: pointer; }
.tvtab tbody th, .tvtab tbody td { padding: var(--sp-1) var(--sp-1); border-bottom: 1px solid var(--rule); background: var(--b-surface); font-weight: 400; vertical-align: middle; transition: background-color .2s; }
.tvtab tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--paper) 55%, var(--b-surface)); }
.tvtab tbody tr:last-child > * { border-bottom: 0; }
.tvtab tbody tr:hover > * { background: color-mix(in srgb, var(--b-accent-200) 45%, var(--b-surface)); }
.tvtab tbody tr.is-sel > * { background: var(--lime-200); }
.tv-rk { font: 500 11px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink-2); }
.tvtab td.tv-rk { padding-left: var(--sp-1-5); }
.tv-c { display: flex; align-items: center; gap: var(--sp-1); 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: var(--sp-1); }
.tv-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); 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: transparent; box-shadow: inset 0 0 0 1.5px var(--b-ink-3); opacity: .45; }  /* empty: an outline, so it never reads as the lightest step */
.tv-sq i:not([data-k="0"]) { box-shadow: none; opacity: 1; }
.tv-sq i[data-k="1"] { background: var(--map-2); }
.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: var(--sp-0-5); width: max-content; max-width: 240px; padding: var(--sp-1-5) var(--sp-2); 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: calc(var(--sp-1) * -1); 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: var(--sp-2); 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: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-2); padding: var(--sp-1-5) var(--sp-2); border-radius: 999px; background: var(--b-surface); box-shadow: inset 0 0 0 1px var(--rule); }
.tv-key-l { font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tv-key ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin: 0; padding: 0; }
.tv-key li { display: inline-flex; align-items: center; gap: var(--sp-1); 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: var(--sp-2) 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: var(--sp-1) var(--sp-2-5); }
.map-foot .legend { margin-top: 0; }
.legend-scale i { border-radius: 3px; }

.rd-label { margin: 0 0 var(--sp-0-5); 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: var(--sp-1) 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(var(--sp-4), 3.5vw, var(--sp-6)) var(--page-pad) clamp(var(--sp-4), 4.5vw, var(--sp-8)); background: var(--b-ground); color: var(--b-on-hero); }
.statcards { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-grid); margin: 0; padding: 0; }

.statcard { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-4); min-width: 0; min-height: 176px; padding: var(--sp-card); 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: var(--sp-1); 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; }
.bento { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(310px, auto) minmax(310px, auto); gap: var(--sp-grid); margin: var(--sp-7) 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: var(--sp-3) var(--sp-3) var(--sp-3); }
.b-text h3 { margin: 0 0 var(--sp-1); 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 var(--sp-2-5) var(--sp-2-5); }
.b-know .b-art, .b-cap .b-art { order: -1; padding: var(--sp-3) var(--sp-2-5) 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: var(--sp-5); }
.doc { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2); 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: var(--sp-0-5) var(--sp-1); 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: var(--sp-1); 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: var(--sp-1); 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: var(--sp-0-5); min-width: 150px; padding: var(--sp-1) var(--sp-1-5); 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: var(--sp-1-5) var(--sp-2) var(--sp-1); 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: var(--sp-0-5) 2px var(--sp-1-5); 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: var(--sp-1); padding: var(--sp-1) 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: var(--sp-1-5); min-height: 430px; margin: var(--sp-6) 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: var(--sp-3); 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: var(--sp-2); }
.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: var(--sp-1-5) 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; }
}
/* Expert role icons (ROLE_ART): the enabler icons' small movements, played while the card is hovered or focused */
.d-ic .r-mv { transform-box: fill-box; transform-origin: center; }
.d-ic .r-sway { transform-box: view-box; transform-origin: 14px 10px; }
.d-ic .r-tilt { transform-box: view-box; transform-origin: 24px 9px; }
.d-ic .r-draw * { stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  :is(.po-card a:hover, .po-card a:focus-visible) .r-sway { animation: dm-sway-r 1.6s ease-in-out infinite; }
  :is(.po-card a:hover, .po-card a:focus-visible) .r-tilt { animation: dm-tilt 2.4s ease-in-out infinite; }
  :is(.po-card a:hover, .po-card a:focus-visible) .r-hop { animation: dm-hop 1.6s ease-in-out infinite; }
  :is(.po-card a:hover, .po-card a:focus-visible) .r-bob { animation: dm-bob 1.6s ease-in-out infinite; }
  :is(.po-card a:hover, .po-card a:focus-visible) .r-pop { animation: dm-pop 1.6s ease-in-out infinite; }
  :is(.po-card a:hover, .po-card a:focus-visible) .r-wave { animation: en-grow 1.2s ease-in-out infinite; }
  :is(.po-card a:hover, .po-card a:focus-visible) .r-draw * { animation: dm-draw 2.4s 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: var(--sp-2); }
.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(var(--sp-10), 9vw, var(--sp-18)) var(--page-pad) clamp(var(--sp-9), 8vw, var(--sp-14)); }
.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; }

/* 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: var(--sp-1-5); }
@media (min-width: 901px) and (max-height: 760px) {
  .defn-sticky { padding-top: var(--sp-16); padding-bottom: var(--sp-4); }
  .defn-h { font-size: clamp(2rem, 3.1vw, 2.8rem); }
}
.d-cnt { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1-5); font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.d-cnt .ico { width: 16px; height: 16px; transition: transform .15s; }
/* 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%); }

/* Our working definition: the statement across the top and five tall tiles in a row beneath it, exactly one screen
   tall at any size. The bottom leaves room for the prototype dock. Each tile flips to its definition (12.2). */
.defn .defn-sticky { min-height: 100svh; padding-block: clamp(var(--sp-12), 10.5vh, var(--sp-18)) clamp(var(--sp-10), 8vh, var(--sp-12)); --focus: var(--b-accent-on-dark); }
.dvc { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(var(--sp-6), 8vh, var(--sp-15)); }
.defn .dv-h { max-width: 21em; font-size: var(--h-display); line-height: 1.02; letter-spacing: -0.012em; }
.dvc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(var(--sp-1-5), 1vw, var(--sp-3)); height: clamp(320px, 50vh, 680px); margin: 0; padding: 0; list-style: none; }
.flt { position: relative; perspective: 1600px; cursor: pointer; }
.fl-in { position: relative; height: 100%; transform-style: preserve-3d; }
.fl-face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--sp-1); padding: clamp(var(--sp-2), 1.2vw, var(--sp-4)) clamp(var(--sp-2), 1.2vw, var(--sp-4)) clamp(var(--sp-2-5), 1.4vw, var(--sp-4)); overflow: hidden; border-radius: clamp(22px, 1.5vw, 34px);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 22px 26px -16px rgba(var(--b-shadow), .55); }
.fl-front { background: var(--b-surface); color: var(--b-ink); --focus: var(--b-accent); }
.fl-n { font: 500 clamp(12px, .72vw, 17px)/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--b-accent); }
.fl-front h3 { margin: 0; font: 500 clamp(1.4rem, 1.9vw, 3.2rem)/1.04 var(--font-display); letter-spacing: -0.024em; text-wrap: balance; }
.fl-back { justify-content: space-between; background: var(--b-primary); color: var(--b-accent-ink); transform: rotateY(180deg); --focus: var(--b-accent-ink); }
.fl-back .fl-n { padding-right: var(--sp-6); color: var(--b-accent-ink); }
.fl-back p { margin: 0; font: 400 clamp(1.08rem, 1.35vw, 2.2rem)/1.32 var(--font-display); letter-spacing: -0.01em; text-wrap: pretty; }
.fl-back .d-cnt { align-self: flex-start; margin: 0; font-size: clamp(11.5px, .7vw, 16px); color: var(--b-accent-ink); text-decoration: none; }
.fl-back .d-cnt:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Each front's Hairline figure (/ext/defn-figures.js): an isometric line object in the site's ink with one accent, the
   red, for whatever it is answering. The colours are the site's own tokens, so a theme or a design system re-skins them. */
.flt-fig { flex: 1; min-height: 0; margin: calc(var(--sp-1) * -1) calc(var(--sp-1) * -1) var(--sp-1); aspect-ratio: auto;
  --hairline-plate: var(--b-surface); --hairline-hi: var(--b-accent); --hairline-edge: var(--b-ink-2);
  --hairline-mid: color-mix(in srgb, var(--b-ink-2) 55%, var(--b-surface)); --hairline-lo: color-mix(in srgb, var(--b-ink-2) 30%, var(--b-surface)); --hairline-stroke: 1.2; }
/* the drawing keeps its 400 × 320 frame but is let out past the tile's padding, since the object sits well inside that frame */
.flt .flt-fig > svg { inset: 0 -16%; width: 132%; max-width: none; }
/* The key line under each title */
.flt-key { max-width: 22em; margin: 2px 0 0; font-size: clamp(.86rem, .9vw, 1.25rem); line-height: 1.35; color: var(--b-ink-2); text-wrap: pretty; }
.fl-btn { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: clamp(40px, 2.4vw, 56px); height: clamp(40px, 2.4vw, 56px); padding: 0; border: 0; border-radius: 999px;
  background: var(--b-paper); color: var(--b-ink); cursor: pointer; --focus: var(--b-accent-on-dark); transition: background-color .2s, color .2s; }
.fl-btn svg { width: 45%; height: 45%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s cubic-bezier(.2, .75, .2, 1); }
.fl-btn:hover { background: var(--b-tint-100); }
.flt.is-flip .fl-btn, .flt:has(.fl-back :focus-visible) .fl-btn { background: color-mix(in srgb, var(--b-accent-ink) 18%, transparent); color: var(--b-accent-ink); }
.flt.is-flip .fl-btn svg { transform: rotate(180deg); }
.flt.is-flip .fl-in, .flt:has(.fl-back :focus-visible) .fl-in { transform: rotateY(180deg); }
.flt:not(.is-flip) .fl-back { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .fl-in { transition: transform .7s cubic-bezier(.2, .75, .2, 1); } }
/* No turning for reduced motion: the back simply fades in over the front */
@media (prefers-reduced-motion: reduce) {
  .fl-in { transform: none !important; }
  .fl-back { transform: none; opacity: 0; transition: opacity .2s; }
  .flt.is-flip .fl-back, .flt:has(.fl-back :focus-visible) .fl-back { opacity: 1; }
}
@media (max-width: 1180px) {
  .dvc-grid { flex: none; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(300px, 36vh, 380px); height: auto; }
  .dvc-grid .flt { grid-column: span 2; }
  .dvc-grid .flt:nth-child(n + 4) { grid-column: span 3; }
}
/* A phone: two tiles to a row, the last across both; the icon stands in for the illustration box */
@media (max-width: 760px) {
  .defn .defn-sticky { min-height: 0; padding-block: var(--sp-11) var(--sp-9); }
  .dvc { gap: var(--sp-4); }
  .dvc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 232px; gap: var(--sp-1); }
  .dvc-grid .flt, .dvc-grid .flt:nth-child(n + 4) { grid-column: auto; }
  .dvc-grid .flt:last-child { grid-column: 1 / -1; }
  .fl-face { gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-2); border-radius: 18px; }
  .flt-fig { margin: calc(var(--sp-1) * -1) calc(var(--sp-1) * -1) 2px; }
  .flt-key { font-size: 12.5px; line-height: 1.3; }
  .fl-front h3 { font-size: 1.22rem; }
  .fl-back p { font: 400 14.5px/1.38 var(--font-text); }
  .fl-lab { display: none; }
  .fl-btn { top: 8px; right: 8px; width: 36px; height: 36px; }
}



/* 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: var(--sp-0-5) 0 var(--sp-1); }
.matrix { border-collapse: separate; border-spacing: 5px; margin: 0 auto; }
.matrix thead th { padding: 0 0 var(--sp-1); 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 var(--sp-1); 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 var(--sp-3) 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: var(--sp-1); 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 var(--sp-1); 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: var(--sp-1) var(--sp-3) 0 0; text-align: left; font: 400 13px/1.2 var(--font-text); color: var(--ink-3); }
.matrix tfoot td { padding-top: var(--sp-1); }
.mx-source { margin: var(--sp-2) 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: var(--sp-head-desc) 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.btn-view { display: inline-flex; flex: none; align-items: center; gap: var(--sp-1); height: 42px; padding: 0 var(--sp-2); border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--b-ink) 16%, transparent); 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: var(--sp-grid); margin-top: var(--sp-head); 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; }
/* The art sits inside the card, inset like the event covers, rather than running to its edges */
.nw-art { flex: none; height: clamp(150px, 13vw, 190px); margin: var(--sp-1) var(--sp-1) 0; border-radius: 16px; }
.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: var(--sp-card-meta); padding: var(--sp-2-5) var(--sp-card) var(--sp-card); }
.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: var(--sp-1) var(--sp-1-5); }
.nw-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); 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: var(--sp-2); }
.nw-item .nw-txt { gap: var(--sp-card-title); align-content: start; }  /* the block grows to the card's height; its rows stay together at the top */
/* Every card title stops at two lines, site-wide (Shajee, 24 Oct) */
.nw-feat h3, .nw-item h3, .card h3, .mcard h3, .pj-card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.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-why { position: relative; z-index: 5; font-size: 14px; line-height: 1.5; color: var(--ink-2); } /* above the card's link overlay */
.nw-why > * { margin: 0; }
.nw-more { display: inline-flex; align-items: center; gap: var(--sp-1-5); margin: var(--sp-2) 0 0; font: 500 14px/1 var(--font-mono); letter-spacing: .082em; text-transform: uppercase; color: var(--ink); }
.nw-more span { text-underline-position: 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: var(--sp-grid); margin: 0; padding: 0; }
.nw-item { display: flex; flex-direction: column; gap: 0; padding: 0; border-radius: 24px; }
.nw-head { display: grid; gap: var(--sp-2); }
.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); }
/* A place on a card's picture: a dark strip across its foot (picked 24 Oct, L4), white on 74% near-black, 13:1 or better */
.lat-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1-5); border-radius: 0; background: linear-gradient(90deg, rgba(20, 10, 11, .82) 0%, rgba(20, 10, 11, .45) 28%, rgba(20, 10, 11, 0) 62%); color: #fff; font: 600 13px/14px var(--font-text); }
.lat-cap .ico { width: 14px; height: 14px; }
/* filled pin (29 Oct): the drop solid, its dot cut out in the strip's dark */
.lat-cap .ico path { fill: currentColor; }
.lat-cap .ico circle { fill: rgb(20, 10, 11); stroke: none; }
/* Editor's pick: a red block with small rounded corners (picked 24 Oct, P2), centred on the meta line beside it. 7.0:1 */
.lat-pick { display: inline-flex; align-items: center; align-self: center; padding: var(--sp-0-5) var(--sp-1); border-radius: 7px; background: var(--b-primary); font: 600 13px/1.2 var(--font-text); color: #fff; }
@supports (corner-shape: squircle) { .lat-pick { border-radius: 9px; corner-shape: squircle; } }  /* smoothed corners (29 Oct) */

/* 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: var(--sp-4); margin-top: var(--sp-4); align-items: start; }
.rt-list { list-style: none; display: grid; gap: var(--sp-0-5); }
.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: var(--sp-2); width: 100%; min-height: 64px; padding: var(--sp-2) var(--sp-2-5); 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 var(--sp-2-5); }
.rt-in::after { content: ""; display: block; height: 22px; }
.rt-desc { max-width: 34em; margin: 0 0 var(--sp-2); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.rt-go { list-style: none; margin: 0 0 var(--sp-2); border-top: 1px solid var(--rule); }
.rt-go a { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: var(--sp-1-5); 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: var(--sp-5) var(--sp-8); 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(var(--sp-3), 3.4vw, var(--sp-6)); 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(--b-accent-on-dark); stroke-width: 3; 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-ink-surface, #2a2223);  /* dark panel: its rows are white text (the deep-800 token went light with Linen) */
  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: var(--sp-2); 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 var(--sp-1-5); 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: var(--sp-3);
  min-height: clamp(300px, 22vw, 400px); padding: var(--sp-4) var(--sp-4) var(--sp-4); 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: var(--sp-1-5) 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: calc(var(--sp-1) * -1) 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: var(--sp-1); 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: var(--sp-3) 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: var(--sp-1); margin-top: var(--sp-2-5); padding: var(--sp-4) 0 0; }
.ro-more .ro-k { margin: 0 var(--sp-1) 0 0; }
.ro-more a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--sp-2); 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: var(--sp-3) var(--sp-3) var(--sp-3); border-radius: 28px; background: var(--surface); color: var(--ink); }
.ro-rh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-1); }
.ro-rh .ro-k { margin: 0; }
.ro-all { display: inline-flex; align-items: center; gap: var(--sp-1); 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: var(--sp-0-5); margin: 0 calc(var(--sp-1-5) * -1); padding: var(--sp-1-5) var(--sp-6) var(--sp-1-5) var(--sp-1-5); 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: calc(var(--sp-1) * -1); 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: var(--sp-1); margin-top: var(--sp-1-5); }
  .ro-read li, .ro-read li a { height: 100%; }
  .ro-read li a { align-content: start; gap: var(--sp-1); margin: 0; padding: var(--sp-2) var(--sp-2) var(--sp-6); 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: var(--sp-3) var(--sp-3) var(--sp-3); border-radius: 24px; }
  .ro-more { padding-top: var(--sp-3); }
  .ro-read { padding: var(--sp-2-5) var(--sp-2-5) var(--sp-2); 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; }
}

/* 9.1: versions of the picker, switched from the section's A/B strip. Each names the section and shows the query a
   role and a goal build, what it matches, and the same search in the repository. */
.ro-box { --ro-ink: var(--b-on-dark); --ro-ink-2: color-mix(in srgb, var(--b-on-dark) 80%, transparent); --ro-ink-3: color-mix(in srgb, var(--b-on-dark) 64%, transparent);
  --ro-line: color-mix(in srgb, var(--b-on-dark) 20%, transparent); --ro-fill: color-mix(in srgb, var(--b-on-dark) 8%, transparent); }
.ro-hd { max-width: 36em; margin: 0 0 clamp(var(--sp-3), 2.8vw, var(--sp-5)); }
.ro-h { margin: 0; font: 600 clamp(1.2rem, 1.75vw, 1.6rem)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ro-ink); }
.ro-sub { margin: var(--sp-head-desc) 0 0; font: 400 15.5px/1.5 var(--font-text); color: var(--ro-ink-2); }
[data-ro-q].swap > * { animation: rs-in .45s cubic-bezier(.2, .8, .2, 1) both; }
/* The result list's label names it as the query's result, so here it is printed in the card's ink, not on-dark white */
.ro-read .ro-k { color: var(--ink-3); }
.rq a:focus-visible { outline: 3px solid var(--b-accent-on-dark); outline-offset: 3px; }
/* B: a heading over the sentence, and under it one line that is the result: the count, what it filters, the search */
.ro-v-b .rq { max-width: 30em; margin-top: clamp(var(--sp-4), 3.2vw, var(--sp-6)); }
.rq-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-1-5) var(--sp-2); padding: var(--sp-2) var(--sp-2-5); border-radius: 22px;
  background: color-mix(in srgb, var(--b-ink-surface) 78%, transparent); box-shadow: inset 0 0 0 1px var(--ro-line); color: var(--ro-ink); text-decoration: none; transition: background-color .2s, box-shadow .2s; }
.rq-card:hover { background: var(--b-ink-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b-accent-on-dark) 70%, transparent); color: var(--ro-ink); }
.rq-num { font: 400 clamp(2.6rem, 3.8vw, 3.6rem)/.86 var(--font-display); letter-spacing: -0.05em; color: var(--b-accent-on-dark); }
.rq-txt { display: grid; gap: var(--sp-1); min-width: 0; }
.rq-l1 { font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ro-ink-2); }
.rq-l2 { font: 500 15px/1.4 var(--font-text); color: var(--ro-ink); }
.rq-go { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-1); padding-top: var(--sp-1-5); border-top: 1px solid var(--ro-line); font: 500 14px/1 var(--font-text); color: var(--ro-ink); }
.rq-go .ico { width: 16px; height: 16px; margin-left: auto; transition: transform .2s; }
.rq-card:hover .rq-go .ico { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  [data-ro-q].swap > * { animation: none; }
}
/* The tabbed versions drop the sentence, and the drawing with it */
:root:not([data-picker="b"]) .ro-ill { display: none; }
.pe-panel.swap > * { animation: rs-in .45s cubic-bezier(.2, .8, .2, 1) both; }
/* E: five role tabs; the chosen one turns to paper, and so does its panel of goals */
.pe .ro-hd { max-width: 40em; }
.pe-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-1); }
.pe-tab { display: grid; align-content: start; gap: var(--sp-1-5); min-height: 148px; padding: var(--sp-2) var(--sp-2) var(--sp-2); border: 0; border-radius: 22px; background: var(--ro-fill); box-shadow: inset 0 0 0 1px var(--ro-line);
  color: var(--ro-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s, box-shadow .2s, color .2s; }
.pe-tab:hover { background: color-mix(in srgb, var(--b-on-dark) 14%, transparent); }
.pe-tab:focus-visible { outline: 3px solid var(--b-accent-on-dark); outline-offset: 3px; }
.pe-ti { width: 28px; height: 28px; color: var(--b-accent-on-dark); }
.pe-tn { font: 500 17px/1.25 var(--font-display); letter-spacing: -0.01em; }
.pe-tc { align-self: end; font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ro-ink-3); }
.pe-tab[aria-selected="true"] { background: var(--surface); box-shadow: 0 24px 40px -30px rgba(var(--b-shadow), .9); color: var(--ink); }
.pe-tab[aria-selected="true"] .pe-ti { color: var(--b-accent); }
.pe-tab[aria-selected="true"] .pe-tc { color: var(--ink-3); }
.pe-panel { margin-top: var(--sp-1); padding: var(--sp-3) var(--sp-4) var(--sp-3); border-radius: 28px; background: var(--surface); color: var(--ink); }
.pe-panel:focus-visible { outline: 3px solid var(--b-accent-on-dark); outline-offset: 3px; }
.pe-q { margin: 0 0 var(--sp-1); font: 500 15px/1.3 var(--font-text); color: var(--ink-3); }
/* J: a full section on the page. Heading centred, the five roles in a row under it, then the role in its own words
   and a card for each goal */
/* The section gets a band of its own, a step darker than the page, run edge to edge from the container */
:root[data-picker="j"] .ro-box { padding: clamp(var(--sp-5), 5vw, var(--sp-10)) 0 clamp(var(--sp-6), 5.5vw, var(--sp-12)); border-radius: 0; background: var(--b-surface-2); box-shadow: 0 0 0 100vmax var(--b-surface-2); clip-path: inset(0 -100vmax); color: var(--ink);
  --ro-ink: var(--ink); --ro-ink-2: var(--ink-2); --ro-ink-3: var(--ink-3); --ro-line: var(--b-rule); --ro-fill: transparent; }
:root[data-picker="j"] .ro-bg { display: none; }
.pj .ro-hd { max-width: 46em; margin: 0 auto clamp(var(--sp-4), 3.4vw, var(--sp-6)); text-align: center; }
.pj .ro-h { font: 500 var(--h-display)/1.04 var(--font-display); letter-spacing: -0.04em; }
.pj .ro-sub { max-width: 50em; margin: var(--sp-head-desc) auto 0; font-size: 17.5px; line-height: 1.55; text-wrap: balance; }
/* Five tabs of one width, each name on one line, its count under it. The row may run wider than the column, since
   the band is full width; with less room it wraps to two centred rows, and on a phone it scrolls */
.pj .pe-tabs { --pj-row: min(calc(100vw - 48px), 1400px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1); width: var(--pj-row); margin: 0 calc((100% - var(--pj-row)) / 2); padding: var(--sp-0-5); }
.pj .pe-tab { flex: 0 0 max(272px, calc((100% - 24px) / 5)); grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; gap: var(--sp-0-5) var(--sp-1); min-height: 0; padding: var(--sp-1-5); border-radius: 18px;
  background: color-mix(in srgb, var(--b-ground-card) 60%, transparent); box-shadow: inset 0 0 0 1px var(--b-rule); }
.pj .pe-tn { white-space: nowrap; }
.pj .pe-tab:hover { background: var(--b-ground-card); }
.pj .pe-tab:focus-visible, .pj .pe-panel:focus-visible { outline-color: var(--b-accent); }
.pj .pe-ti { grid-row: span 2; width: 22px; height: 22px; color: var(--b-accent); }
.pj .pe-tn { font-size: 14.5px; }
.pj .pe-tc { align-self: start; }
.pj .pe-tab[aria-selected="true"] { background: var(--b-ink-surface); box-shadow: none; color: var(--b-ink-surface-ink); }
.pj .pe-tab[aria-selected="true"] .pe-ti { color: var(--b-accent-on-dark); }
.pj .pe-tab[aria-selected="true"] .pe-tc { color: color-mix(in srgb, var(--b-ink-surface-ink) 70%, transparent); }
.pj .pe-panel { margin-top: clamp(var(--sp-4), 3.6vw, var(--sp-6)); padding: 0; border-radius: 0; background: none; }
.pj-intro { max-width: 64em; margin: 0 auto clamp(var(--sp-3), 3vw, var(--sp-5)); text-align: center; }
.pj-role { margin: 0; font: 500 clamp(1.4rem, 2.1vw, 1.9rem)/1.2 var(--font-display); letter-spacing: -0.025em; color: var(--ink); }
.pj-text { margin: var(--sp-1-5) 0 0; font: 400 16px/1.6 var(--font-text); color: var(--ink-2); text-wrap: balance; }
.pj-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-grid); margin: 0; padding: 0; }
.pj-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-1-5); padding: var(--sp-card); border-radius: 28px; background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--b-rule), 0 40px 70px -50px rgba(var(--b-shadow), .5); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.pj-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b-accent) 45%, transparent), 0 46px 80px -50px rgba(var(--b-shadow), .6); }
/* Goal cards are standard .nc cards (24 Oct): the white sheet comes from .nc::before so the corner arrow can cut its
   notch on hover; the count sits above the title as a small meta line; no number, no footer rule */
.pj-card.nc { background: none; box-shadow: none; }
.pj-card.nc:hover { box-shadow: none; filter: drop-shadow(0 16px 16px rgba(var(--b-shadow), .1)); }
.pj-n-top { margin: 0; }
.pj-card .pj-n-top b { margin-right: 3px; font: 600 15px/1 var(--font-text); letter-spacing: 0; color: var(--b-accent); }
.pj-n-top a { color: inherit; text-decoration: none; }
.pj-card.nc .pj-start { padding-right: var(--sp-7); }
.pj-card:has(.pj-main:focus-visible) { outline: 3px solid var(--b-accent); outline-offset: 3px; }
.pj-no { margin: 0; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; color: var(--ink-3); }
.pj-t { margin: 0; font: 500 clamp(1.3rem, 1.8vw, 1.6rem)/1.2 var(--font-display); letter-spacing: -0.02em; }
.pj-main { color: var(--ink); text-decoration: none; outline: none; }
.pj-main:hover { color: var(--ink); }
.pj-main::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.pj-why { margin: 0; font: 400 15.5px/1.55 var(--font-text); color: var(--ink-2); }
/* The filters a goal applies: the key above, its values after it on one line (picked 24 Oct, K4 "Key above") */
.pj-tags { list-style: none; display: grid; gap: var(--sp-1); margin: 0; padding: 0; }
.pj-tags li { display: block; font: 500 14.5px/1.45 var(--font-text); color: var(--ink); }
.pj-f { display: block; margin: 0 0 1px; font: 400 13px/1.3 var(--font-text); color: var(--ink-3); }
.pj-latest { padding-top: var(--sp-2); border-top: 1px solid var(--b-rule); }
.pj-k { margin: 0 0 var(--sp-1); font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pj-latest ol { list-style: none; display: grid; gap: var(--sp-1-5); margin: 0; padding: 0; }
.pj-latest a, .pj-start a { position: relative; z-index: 1; }
.pj-latest a { display: grid; gap: var(--sp-0-5); color: var(--ink); text-decoration: none; }
.pj-latest small { font: 500 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pj-latest span { font: 500 14.5px/1.35 var(--font-text); }
.pj-latest a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.pj-start { margin: auto 0 0; padding-top: var(--sp-0-5); font: 400 14px/1.4 var(--font-text); color: var(--ink-3); }
.pj-start a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 30px; margin-left: var(--sp-0-5); padding: 0 var(--sp-1-5); border-radius: 999px; background: var(--panel); color: var(--ink); font-weight: 500; text-decoration: none; transition: box-shadow .2s; }
.pj-start a:hover { box-shadow: inset 0 0 0 1px var(--b-accent); color: var(--ink); }
.pj-start .ico { width: 14px; height: 14px; }
.pj-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1-5); padding-top: var(--sp-2); border-top: 1px solid var(--b-rule); }
.pj-n { margin: 0; font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pj-n b { margin-right: var(--sp-0-5); font: 400 2.3rem/.9 var(--font-display); letter-spacing: -0.04em; text-transform: none; color: var(--b-accent); }
.pj-arr { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: var(--b-accent-ink); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.pj-arr .ico { width: 20px; height: 20px; }
.pj-card:hover .pj-arr { transform: translateX(3px); }
.pj-all { margin: clamp(var(--sp-3), 3vw, var(--sp-4)) 0 0; text-align: center; }
/* The role's whole share of the repository: the design system's secondary button (btn-quiet), as the cards already
   carry the red */
.pj-all .btn { min-height: 48px; padding: 0 var(--sp-2-5) 0 var(--sp-3); max-width: 100%; white-space: normal; text-align: left; }  /* long audience names wrap on phones instead of widening the page */
.pj-all .btn:focus-visible { outline: 3px solid var(--b-accent); outline-offset: 3px; }
.pj-all .ico { transition: transform .2s; }
.pj-all .btn:hover .ico { transform: translateX(3px); }
@media (max-width: 960px) {
  .pj .pe-tabs { flex-wrap: nowrap; justify-content: flex-start; width: auto; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin: 0 calc(var(--sp-1) * -1); padding: var(--sp-0-5) var(--sp-1) var(--sp-1); }
  .pj .pe-tab { scroll-snap-align: start; }
  .pj-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pj .ro-sub { font-size: 16px; }
  .pj-card { border-radius: 24px; }
}
@media (max-width: 900px) {
  .pe-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(136px, 38%); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--sp-1) * -1); padding: var(--sp-1) var(--sp-1) var(--sp-1); scrollbar-width: none; }
  .pe-tab { min-height: 128px; scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .pe-panel { padding: var(--sp-2) var(--sp-2) var(--sp-2-5); border-radius: 24px; }
}

/* 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: var(--sp-2) var(--sp-2) var(--sp-2); 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: var(--sp-1); margin: 0 0 var(--sp-1) var(--sp-1); 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 var(--sp-1); }
.rt-rows a { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-0-5); 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: var(--sp-0-5); 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: var(--sp-1); width: fit-content; margin-left: auto; padding: var(--sp-1) var(--sp-2); 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: var(--sp-1); margin: 0; padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1-5); 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: var(--sp-1); margin-bottom: var(--sp-2); }
.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: var(--sp-1) var(--sp-1-5); 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: var(--sp-4); 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: var(--sp-1); 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: var(--sp-1); 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: var(--sp-1) 0 0; }
.ok { display: flex; gap: var(--sp-1); align-items: flex-start; background: var(--green-100); border: 1px solid var(--green-200); color: var(--ink); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-2); }
.ok .ico { color: var(--green-700); width: 22px; height: 22px; }
.ok p { margin: 0; }

/* ---------------------------------------------------------------- Repository */
.crumbs { font-size: 14px; color: var(--ink-3); margin: 0 0 var(--sp-2); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.crumbs li + li::before { content: "/"; margin-right: var(--sp-1); color: var(--rule-2); }
.crumbs a { color: var(--ink-2); }
.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 var(--sp-1); color: var(--ink-3); margin-right: var(--sp-1); }

.repo-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--sp-5); padding-block: var(--sp-4) var(--sp-10); align-items: start; }
/* Listing pages (.lst): a filter card, pill tools, notch cards */
.lst.repo-grid { gap: var(--sp-4); padding-block: var(--sp-4) var(--sp-12); }
.lst .facets { padding: var(--sp-2) var(--sp-2) var(--sp-1); border-radius: 26px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .04); }
.lst .facets-head { margin-bottom: var(--sp-1); padding: 0 var(--sp-0-5); }
.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: var(--sp-0-5); }
.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: var(--sp-2); }
.lst .count { font-size: 15px; }
.lst .count b { margin-right: 3px; font: 500 28px/1 var(--font-display); letter-spacing: -0.03em; }
.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: var(--sp-2); }
/* 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: var(--sp-grid); }
.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 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: var(--sp-3); 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: var(--sp-1-5) 0 var(--sp-1); 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: var(--sp-2); padding-right: var(--sp-7); }
.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) {
  .lst .card.nc { padding: var(--sp-2-5); }
  .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 var(--sp-1) var(--sp-1-5) 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: var(--sp-1); height: 42px; margin: 0 0 var(--sp-2); padding: 0 var(--sp-1-5); 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: var(--sp-1); margin-bottom: var(--sp-1); }
.facets-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: var(--sp-1); }
.facets .facets-close { display: none; }
.facet { border-top: 1px solid var(--rule); }
.facet-h button {
  display: flex; width: 100%; align-items: center; gap: var(--sp-1); padding: var(--sp-1-5) 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 var(--sp-1); 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 var(--sp-2); }
.facet-b fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.facet-find { width: 100%; min-height: 38px; margin-bottom: var(--sp-1); padding: var(--sp-1) var(--sp-1); 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: var(--sp-1); }
.fgroup-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: var(--sp-1) var(--sp-0-5) var(--sp-0-5); 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: var(--sp-1); min-height: 34px; padding: var(--sp-0-5) var(--sp-1); 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: var(--sp-0-5); }
.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; margin: 0 0 var(--sp-1); }
.cviews button { flex: 1; padding: 0 var(--sp-1); }
.opt-flag .opt-l { display: inline-flex; align-items: center; gap: var(--sp-1); }
.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: var(--sp-1); }
.opt-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 92px; padding: var(--sp-1) var(--sp-1) var(--sp-1); 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: var(--sp-1); padding: 0 var(--sp-0-5); 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: var(--sp-1-5) var(--sp-2); margin-bottom: var(--sp-2); }
.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: var(--sp-1); 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: var(--sp-1); min-height: 50px; padding: 0 var(--sp-1-5) 0 var(--sp-2); 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); }
/* Label-and-value dropdowns read 'Sort: Best match' (Shajee, 24 Oct) */
:is(.sm-k, .cf-k, .ov-sel > span)::after { content: ':'; }
.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: var(--sp-1); 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: var(--sp-1-5); min-height: 40px; padding: 0 var(--sp-1) 0 var(--sp-1-5); 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; }
/* ext/selects.js: filter selects drawn as this menu; long lists scroll, the menu opens from its left edge */
.sm-wrap { position: relative; display: inline-flex; }
.sm-wrap > .sm-auto { flex: 1 1 auto; }
.sm-wrap > .sm-auto > summary { width: 100%; }  /* when a layout stretches the menu, the × stays inside the pill */
.sm-auto { display: inline-block; }
.sm-auto.is-set > summary { box-shadow: inset 0 0 0 1.5px var(--b-primary); padding-right: 44px; }
.sm-auto.is-set > summary .ico { visibility: hidden; }
.sm-x { position: absolute; right: 8px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--b-primary); cursor: pointer; }
.sm-x:hover { background: var(--b-tile); }
.sm-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sm-x .ico { width: 16px; height: 16px; }
.sm-auto .sm-pop { left: 0; right: auto; width: max-content; min-width: max(100%, 240px); max-width: min(420px, calc(100vw - 32px)); max-height: min(360px, 60vh); overflow-y: auto; }
.sm-auto .sm-pop button { white-space: nowrap; }  /* one line per option; the panel widens to fit */
.sm-auto .sm-v { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-g { margin: var(--sp-1) 0 2px; padding: 0 var(--sp-1-5); font: 500 12px/1.4 var(--font-text); color: var(--ink-3); }
.sm-g:first-child { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: 0 0 var(--sp-2); list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 32px; padding: 0 var(--sp-1) 0 var(--sp-1-5);
  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: var(--sp-1-5); transition: opacity .15s; }
.list.is-busy { opacity: .6; }
.list-more { display: flex; align-items: center; justify-content: center; gap: var(--sp-1-5); margin-top: var(--sp-3); 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: var(--sp-4); }
.empty h2 { font-family: var(--font-display); font-weight: 500; font-size: 26px; margin-bottom: var(--sp-1); }
.empty ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-2) 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: var(--sp-1) var(--sp-1-5); 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: var(--sp-1) var(--sp-1-5); 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: var(--sp-0-5); 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 */
.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: var(--sp-1) var(--sp-1-5); 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); }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-2); font-size: 14.5px; color: var(--ink-3); }
.kicker .type { font-size: 15px; }
/* What the entry is, as chips: a phrase each, two to a list and then a count */
.fchips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-4) 0 0; }
.hf { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-3) 0 0; }
.hf .tflag { width: 17px; height: 17px; }
.fchip { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 38px; padding: 0 var(--sp-2); 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: var(--sp-1); 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: var(--sp-7); padding-block: var(--sp-6) var(--sp-8); align-items: start; }
.dsec { margin-bottom: var(--sp-6); }
.dsec:last-child { margin-bottom: 0; }
.detail-main .dsec { margin-bottom: var(--sp-8); }
.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: var(--sp-grid); margin: var(--sp-3) 0 0; }
.mcard > .nc { display: flex; flex-direction: column; gap: var(--sp-1); height: 100%; padding: var(--sp-3); 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: var(--sp-6); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.mcard > .nc:not(:has(.mcard-go)) { padding-bottom: 64px; }  /* a tile without a count line keeps the corner notch clear of its text */
.mcard .d-ic { width: 48px; height: 48px; margin-bottom: var(--sp-1); }
.mcard-go { margin-top: auto; padding: var(--sp-1-5) var(--sp-6) 0 0; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.en-off { margin: var(--sp-2-5) 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: var(--h-section); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-1-5); flex-wrap: wrap; }
.dsec > .sub { color: var(--ink-3); font-size: 16px; margin: calc(var(--sp-1) * -1) 0 var(--sp-2); max-width: 42em; }
.h-row { display: flex; align-items: center; gap: var(--sp-1-5); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.dsec .h-row h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--h-section); 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: var(--sp-1-5) 0; border-bottom: 1px solid var(--rule); margin: 0; }
.glance dt { font-weight: 700; padding-right: var(--sp-2); }
.glance dd { color: var(--ink-2); }
.findings { list-style: none; counter-reset: f; display: grid; gap: var(--sp-1-5); }
.findings li { counter-increment: f; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-1-5); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-2); }
.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: var(--sp-2); padding: var(--sp-1) 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: var(--sp-2) var(--sp-2); 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: var(--sp-1); }
.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: var(--sp-0-5); }
.assess td.rate { width: 150px; white-space: nowrap; }
.rating { display: inline-flex; align-items: center; gap: var(--sp-1); 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 var(--sp-6); }
.en-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2) 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 var(--sp-0-5); letter-spacing: -0.005em; }
.en-item p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 var(--sp-1); }
.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: var(--sp-1-5); margin-top: var(--sp-3); }
.file > .nc { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; min-height: 168px; padding: var(--sp-3) var(--sp-3) var(--sp-2-5); 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: var(--sp-6); }
.file-t > b { font-size: 17px; font-weight: 500; letter-spacing: -0.008em; }
.file-ico { display: inline-flex; align-items: center; gap: var(--sp-1-5); 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: var(--sp-1); }
.file span .ico { width: 14px; height: 14px; }
.gate { margin-top: var(--sp-2); border: 1px solid var(--indigo-100); background: var(--indigo-50); border-radius: var(--r-lg); padding: var(--sp-2-5) var(--sp-3); }
.gate h3 { font-size: 18px; font-weight: 700; margin-bottom: var(--sp-0-5); display: flex; align-items: center; gap: var(--sp-1); }
.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 var(--sp-2); }
.gate-grid .field:first-child { grid-column: 1 / -1; }
.staff { margin-top: var(--sp-2); border: 1px dashed var(--rule-2); border-radius: var(--r-lg); background: var(--surface); }
.staff > summary { cursor: pointer; padding: var(--sp-1-5) var(--sp-2); font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.staff-body { padding: 0 var(--sp-2) var(--sp-2); }
.staff-body p { font-size: 14px; color: var(--ink-3); }

.cite { padding: var(--sp-3) var(--sp-3) var(--sp-4); border-radius: 24px; background: var(--surface); }
.cite-t { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.55; }
.cite-u { margin: var(--sp-1) 0 var(--sp-2); 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: var(--sp-1); }

.timeline { list-style: none; border-left: 2px solid var(--rule); margin-left: var(--sp-1); }
.timeline li { position: relative; padding: 0 0 var(--sp-2) var(--sp-3); }
.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: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: 24px; background: var(--surface); }
.tmpl-l { margin: 0 0 var(--sp-2); 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 var(--sp-4); margin: 0; padding: 0; counter-reset: none; }
.tmpl-o li { display: flex; align-items: baseline; gap: var(--sp-1-5); padding: var(--sp-1) 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: var(--sp-1) var(--sp-2); counter-reset: s; }
.template-note li { counter-increment: s; display: inline-flex; gap: var(--sp-1); 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: var(--sp-1-5); }
.record { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: var(--sp-2-5); }
.record-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); 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: var(--sp-2); }
.record > p { font-size: 13.5px; color: var(--ink-3); margin: var(--sp-1) 0 var(--sp-0-5); line-height: 1.45; }
.record dl { margin: 0; }
.record dl > div { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1-5) 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: var(--sp-1); border-radius: 20px; background: var(--surface); }
.record-do button { display: grid; grid-template-columns: 27px minmax(0, 1fr) 15px; align-items: center; gap: var(--sp-1-5); width: 100%; min-height: 50px; padding: var(--sp-1) var(--sp-1); 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: var(--sp-1); 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: var(--sp-7) var(--sp-9); }
.rel-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-auto-rows: 1fr; gap: var(--sp-grid); }
.rel-grid .card.nc { grid-template-columns: minmax(0, 1fr); 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 { 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 { padding-right: var(--sp-6); } /* clears the 60px corner */
.why { margin: var(--sp-1-5) 0 0; padding-top: var(--sp-1); 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: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-2); 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: var(--sp-1) 0 0; color: var(--ink-2); font-size: 15.5px; }
.dlg-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-3); }
.dlg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.dlg-col { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-2); }
.dlg-col h3 { margin-bottom: var(--sp-1); }
.dlg-col ul { list-style: none; display: grid; gap: var(--sp-1); font-size: 15px; }
.dlg-col li { padding-left: var(--sp-2); 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: var(--sp-1); }
.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: var(--sp-1-5) var(--sp-2); 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: var(--sp-1); 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: var(--sp-1); max-width: min(470px, calc(100vw - 28px)); min-height: 40px; padding: var(--sp-0-5) var(--sp-0-5) var(--sp-0-5) var(--sp-2); 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: var(--sp-0-5) 0; }
.mt-back { flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 30px; padding: 0 var(--sp-1-5) 0 var(--sp-1); 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: calc(var(--sp-0-5) * -1); 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 var(--sp-2); font-size: 13.5px; }
body.head-tight .head-bar .nav-top { padding: 0 var(--sp-1); font-size: 13.5px; }
body.head-tight .head-bar .nav-list { gap: 0; }
body.head-tighter .head-bar { gap: var(--sp-1); }
body.head-tighter .head-bar .nav-top { padding: 0 var(--sp-0-5); font-size: 13px; }

/* ---------------------------------------------------------------- Footer: in ext/footer.css (a full-width deep red band, picked 24 Oct) */

/* ---------------------------------------------------------------- IA pages: overviews, hubs, directory, profiles, forms */

/* Section overviews and About's sub-pages */
.sub-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-grid); padding-block: var(--sp-4) var(--sp-1-5); }
.sub-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--sp-1); height: 100%; min-height: 220px; padding: var(--sp-2-5) var(--sp-2-5) var(--sp-2); 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: var(--sp-1-5); 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: var(--sp-1); margin-top: var(--sp-1); padding-top: var(--sp-2); 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: var(--sp-0-5); 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: var(--sp-section); }

/* Hub blocks */
.hub-sec { padding-block: var(--sp-section) 0; }
.hub-sec:last-child, .about-more, .nf-links, .net-wrap { padding-bottom: var(--sp-section); }
.hub-sec-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-head-desc) var(--sp-3); margin-bottom: var(--sp-head); }
.hub-sec-h h2 { font: 500 var(--h-section)/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-glyph { display: grid; place-items: center; padding: var(--sp-2) var(--sp-3); border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); }
.hub-glyph .glyph { width: 118px; }
.hub-map { display: inline-block; padding: var(--sp-3); 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: var(--sp-grid); align-items: stretch; }
.hub-rank { display: flex; flex-direction: column; gap: var(--sp-1-5); padding: var(--sp-3) var(--sp-3); 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: var(--sp-0-5); }
.hub-rank ol a { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1-5); min-height: 38px; padding: 0 var(--sp-1-5); 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 .btn-view { margin-top: auto; align-self: flex-start; }
.hub-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.hub-chips .tagbtn { min-height: 32px; padding: 0 var(--sp-1-5); }
.hub-note { margin: 0; padding: var(--sp-2) var(--sp-2-5); border-radius: 16px; border: 1px dashed var(--rule-2); color: var(--ink-3); }
.nf-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding-top: var(--sp-4); }

/* Regional map and countries */
.map-page { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); align-items: start; padding-block: var(--sp-4) clamp(var(--sp-8), 8vw, var(--sp-13)); }
.mp-map { padding: var(--sp-3); 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: var(--sp-grid); }
.po-card a { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); min-height: 196px; height: 100%; padding: var(--sp-2-5); 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.nc { box-shadow: none; }  /* its 1px ring is a rectangle, so it showed round the hover notch; the white layer is the edge */
.po-card a { transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; }
.po-t { margin-top: auto; display: grid; gap: var(--sp-1); padding-right: var(--sp-6); }
.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: var(--sp-1-5) var(--sp-2); padding: var(--sp-3) 0 var(--sp-0-5); }
.net-filters label { display: grid; gap: var(--sp-1); font-size: 14px; font-weight: 700; }
.net-filters .select { min-width: 210px; }
.net-filters .linkish { min-height: 44px; font-size: 15px; }
.net-count { margin: var(--sp-2) 0 0; }
.net-sec { padding-top: var(--sp-section); }
.net-sec h2 { font: 500 var(--h-section)/1.1 var(--font-display); letter-spacing: -0.015em; }
.net-sec > h2 { margin-bottom: var(--sp-head); }
.net-sec .h-row { margin-bottom: var(--sp-2); }

/* Partners */
.partner-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-1-5); }
.partner-card { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-1-5) var(--sp-1-5) var(--sp-2); border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); }
.partner-card > :not(.partner-logo) { margin-inline: var(--sp-1); }
.partner-logo { display: grid; place-items: center; min-height: 120px; margin-bottom: var(--sp-1); padding: 0 var(--sp-2); 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: var(--sp-1); font-size: 15px; }

/* Forms: contact and subscribe */
.form-page { display: grid; grid-template-columns: minmax(0, 720px) minmax(260px, 340px); gap: var(--sp-4); align-items: start; padding-block: var(--sp-4) clamp(var(--sp-8), 8vw, var(--sp-13)); }
.form-card { padding: var(--sp-3) var(--sp-3) var(--sp-4); border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); }
.form-card .h-row { margin-bottom: var(--sp-2-5); }
.form-card h2 { font: 500 var(--h-section)/1.1 var(--font-display); letter-spacing: -0.015em; }
.form-card .field { margin-bottom: var(--sp-2); }
.form-card fieldset.field { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-2); padding: 0; border: 0; }
.form-card legend { margin-bottom: var(--sp-1); 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: var(--sp-0-5); }
.form-card .ok { margin: 0; }
.form-side { display: grid; gap: var(--sp-1); }
.side-card { position: relative; display: grid; gap: var(--sp-0-5); padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-2); 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: var(--sp-1); }
.prose section { max-width: 46em; padding-top: var(--sp-4); }
.prose section h2 { margin-bottom: var(--sp-head-desc); font: 500 var(--h-section)/1.15 var(--font-display); letter-spacing: -0.012em; }
.prose-date { padding: var(--sp-4) 0 clamp(var(--sp-8), 8vw, var(--sp-13)); 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: var(--sp-2); 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: var(--sp-2); }
  .net-filters label, .net-filters .select { width: 100%; min-width: 0; }
  .form-card { padding: var(--sp-2-5) var(--sp-2) var(--sp-3); }
  .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: var(--sp-2-5); }
  .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: var(--sp-1-5); min-height: 0; }
  /* No hover here: every card shows everything */
  .ecard, .ecard.is-on { height: auto; gap: var(--sp-4); 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; }
}
@media (max-width: 900px) {
  .defn { height: auto; }
  .defn-sticky { position: static; height: auto; padding-block: clamp(var(--sp-8), 12vw, var(--sp-12)); }
  .stack-under { position: static; transform: none; opacity: 1; }
  .stack-dwell { display: none; }
  .defn-net { width: 100%; opacity: .7; }
  .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: var(--sp-1); 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: var(--sp-2-5) var(--sp-2-5) var(--sp-3); }
  .nw-item { padding: var(--sp-2-5); }
  .nw-item .nw-art { margin: 0; }  /* the item's own padding already insets it here */
}
@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: var(--sp-1-5); }
  .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)); }
  .statcard { gap: var(--sp-2); min-height: 132px; border-radius: 16px; }
  .statcard .n { font-size: 2.6rem; }
  .rt-in { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .rt-h button { min-height: 58px; padding: var(--sp-1-5) var(--sp-2); 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; }
  .head-bar { gap: var(--sp-1); padding-left: var(--sp-1); }
  .brand-mark { width: 30px; height: 30px; }
  .brand-logo { height: 34px; }
  .bn-2 { font-size: 17px; }
  .pd-note { font-size: 11.5px; }
  .proto-dock { left: 10px; right: 10px; bottom: 10px; gap: var(--sp-1); padding: var(--sp-1) var(--sp-1-5); 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 var(--sp-1); justify-content: center; }
  .pd-q { display: inline; font: 600 13px/1 var(--font-text); }
}
@media (max-width: 380px) {
  .head-bar { gap: var(--sp-0-5); padding: 0 var(--sp-1) 0 var(--sp-1); }
  .brand { gap: var(--sp-1); }
  .brand-mark { width: 27px; height: 27px; }
  .brand-logo { height: 30px; }
  .bn-1 { font-size: 8.5px; }
  .bn-2 { font-size: 16px; }
  .head-bar .icon-link { width: 36px; }
  .head-bar .lang > summary { padding: 0 var(--sp-1); }
  .head-bar .lang-code { display: none; }
  .head-bar .menu-btn { padding: 0 var(--sp-1); }
}

/* ---------------------------------------------------------------- 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: var(--sp-9) var(--sp-2-5) var(--sp-2-5); box-shadow: -20px 0 40px -20px rgba(0,0,0,.4); overflow: auto;
  }
  body.nav-open .nav { width: min(380px, 90vw); padding: var(--sp-9) var(--sp-2) var(--sp-3); 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 var(--sp-1-5); 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 var(--sp-1); padding: 2px 0 2px var(--sp-1); 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: var(--sp-1) var(--sp-1-5); 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: var(--sp-1) var(--sp-1-5); }
  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: var(--sp-2); padding: var(--sp-2) var(--sp-1-5) 0; border-top: 1px solid var(--rule); }
  .nav-foot::before { content: "Language"; display: block; margin-bottom: var(--sp-1); 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 var(--sp-1-5); border: 1px solid var(--rule-2); border-radius: 12px; }
  .nav-foot .lang-pop { position: static; width: 100%; margin-top: var(--sp-1); box-shadow: none; }
  .nav-foot .lang .lang-code { display: inline; }
}
@media (max-width: 480px) {
  .sub-pill { margin-left: 2px; padding: 0 var(--sp-2); 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)); }
}
/* Phones: one card per row, so a card never squeezes into a narrow column with gaps inside it */
@media (max-width: 640px) {
  .rel-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}

@media (max-width: 980px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .record { position: static; }
  .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: var(--sp-2) var(--sp-2) var(--sp-12); 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: var(--sp-1-5) var(--sp-2); 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 var(--sp-1-5); }
  .menu-btn .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .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: var(--sp-0-5) var(--sp-0-5); 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); }
  .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: var(--sp-1) var(--sp-2); width: auto !important; }
  .assess tbody th { padding-top: var(--sp-2); }
  .assess td.note { padding-bottom: var(--sp-2); }
  .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: var(--sp-2); }
  .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: var(--sp-2-5) var(--sp-5); }
.gp-side { display: flex; flex-direction: column; }
.gp-intro { margin: var(--sp-3) 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: var(--sp-4); }
.gp-side .legend-zero i { box-shadow: none; border-color: transparent; }
.gp-side .mx-source { margin: var(--sp-2) 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: var(--sp-1); }
.gs-tag { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-1-5); 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: var(--sp-0-5) var(--sp-1); 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: var(--sp-2) 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: var(--sp-1); vertical-align: 2px; }
.gp-thin { display: inline-flex; padding: var(--sp-0-5) var(--sp-1); 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: var(--sp-2); padding: var(--sp-1-5); 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: var(--sp-1-5); margin: 0 calc(var(--sp-1) * -1); padding: 2px var(--sp-1); 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: var(--sp-2-5); padding-top: 0; }
  .gs-map { max-height: none; }
}
@media (max-width: 640px) {
  .gs-tags { gap: var(--sp-0-5); }
  .gs-tag { padding: var(--sp-0-5) var(--sp-0-5) var(--sp-0-5) var(--sp-1-5); font-size: 13.5px; gap: var(--sp-1); }
  .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 var(--sp-1); }
.who-note { max-width: 44em; margin: var(--sp-2) 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(var(--sp-2-5), 3vw, var(--sp-6)); align-items: stretch; margin-top: var(--sp-head); }
.w3-side { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); }
.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: var(--sp-2) var(--sp-4); margin: 0; padding: 0; }
.w3-logos a { display: grid; place-items: center; min-height: 44px; padding: var(--sp-0-5) var(--sp-1); 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: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-3); 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: var(--sp-1); 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: var(--sp-1-5) 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: var(--sp-1-5); padding: var(--sp-0-5) 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: var(--sp-2-5) var(--sp-2) var(--sp-2); 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: var(--sp-2); padding-top: var(--sp-3); }
.w3-p a:hover, .w3-o a:hover { color: var(--ink); }
.w3-pt { margin-top: auto; display: grid; gap: var(--sp-1); padding-right: var(--sp-5); }
.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: var(--sp-1); }
.w3-hd { display: grid; gap: var(--sp-1); padding-right: var(--sp-1); }
.w3-where { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: auto; padding-right: var(--sp-6); 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: var(--sp-0-5); height: 100%; padding: var(--sp-2-5) var(--sp-2) var(--sp-2); 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: var(--sp-head-desc) 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(3, minmax(0, 1fr)); gap: var(--sp-grid); margin: var(--sp-head) 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: var(--sp-3); 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: var(--sp-1); margin-top: auto; padding: var(--sp-1) var(--sp-7) 0 0; }
.tp-tags span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--sp-1); 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: var(--sp-1) var(--sp-1) 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: var(--sp-1); padding: var(--sp-2-5) var(--sp-3) var(--sp-3); }
/* Open calls: a dial that empties as the deadline nears, the closing day, the call, what it offers and who it is for */
.opc-row { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.opc .nc { gap: var(--sp-1-5); padding: var(--sp-3) var(--sp-3) var(--sp-3); }
.opc-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.opc-dial { position: relative; flex: none; width: 84px; height: 84px; }
.opc-ring { display: block; width: 100%; height: 100%; overflow: visible; }
.opc-tk { fill: none; stroke: var(--b-rule-2); stroke-width: 1; stroke-linecap: round; }
.opc-tr { fill: none; stroke: var(--b-tint-100); stroke-width: 4.5; }
.opc-pr { fill: none; stroke: var(--b-map-2); stroke-width: 4.5; stroke-linecap: round; }
.opc-pr.is-open { stroke: var(--b-map-1); stroke-dasharray: 2 5.2; stroke-linecap: round; }
.opc-kn { fill: var(--b-surface); stroke: var(--b-map-3); stroke-width: 2; }
.opc.is-soon .opc-pr { stroke: var(--b-primary); }
.opc.is-soon .opc-kn { stroke: var(--b-primary); }
.opc-n { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1px; }
.opc-n b { font: 500 27px/1 var(--font-display); letter-spacing: -0.035em; }
.opc-n i { font: 500 9px/1.1 var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--b-ink-3); }
.opc-when { display: grid; gap: var(--sp-0-5); min-width: 0; }
.opc-when i { font: 500 10.5px/1 var(--font-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--b-ink-3); }
.opc.is-soon .opc-when i { color: var(--b-primary); }
.opc-when b { font: 500 21px/1.1 var(--font-display); letter-spacing: -0.02em; }
.opc-when span { font-size: 13px; color: var(--b-ink-2); }
.opc-t { font: 500 clamp(1.15rem, 1.3vw, 1.35rem)/1.2 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.opc-d { font-size: 14.5px; line-height: 1.5; color: var(--b-ink-2); text-wrap: pretty; }
/* what you get: no box, a dotted rule above it with the same space on either side (the card's 12px gap + 2px above, 14px below) */
.opc-get { display: block; margin-top: 2px; padding-top: var(--sp-2); border-top: 1.5px dotted var(--b-rule-2); font-size: 14px; line-height: 1.4; color: var(--b-ink); }
.opc-get i { display: block; margin-bottom: 3px; font: 500 10px/1 var(--font-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--b-ink-3); }
.opc-for { margin-top: auto; padding: var(--sp-1) var(--sp-8) 0 0; font-size: 13px; color: var(--b-ink-3); }
@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); }
}

/* Inner pages: a .h2 section heading takes the section role (overviews and the homepage keep display) */
:root[data-page="inner"] .h2 { font-size: var(--h-section); line-height: 1.1; letter-spacing: -0.015em; }

/* /subscribe (rebuilt 29 Oct, F9): form left in reading order, the latest issue and past issues right; hairlines, no tiles */
.sub-ok { margin-top: var(--sp-2); color: rgba(255, 255, 255, .82); font-size: 14px; }   /* the Insights sign-up card's consent line */
.sub-ok a { color: #fff; }
.sbx { padding-top: var(--sp-4); }
.sbx-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(var(--sp-6), 7vw, var(--sp-12)); align-items: start; }
.sbx-form { display: grid; justify-items: start; max-width: 620px; }
.sbx-h { margin: 0; font: 500 clamp(1.9rem, 3vw, 2.5rem)/1.08 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.sbx-meta { margin: var(--sp-1) 0 0; color: var(--ink-3); font-size: 15px; }
.sbx-in { list-style: none; width: 100%; margin: var(--sp-4) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.sbx-in li { display: grid; grid-template-columns: minmax(9.5em, 13em) minmax(0, 1fr); gap: var(--sp-0-5) var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); }
.sbx-in b { font-weight: 500; color: var(--ink); }
.sbx-in span { color: var(--ink-2); line-height: 1.5; }
.sbx-extra { display: grid; gap: var(--sp-1-5); margin: var(--sp-4) 0 0; padding: 0; border: 0; min-width: 0; }
.sbx-extra legend { margin: 0 0 var(--sp-1-5); padding: 0; font-weight: 500; color: var(--ink); }
.sbx-opt { color: var(--ink-2); }
.sbx-l { margin-top: var(--sp-4); font-weight: 500; color: var(--ink); }
.sbx-email { width: 100%; max-width: none; margin-top: var(--sp-1); box-shadow: inset 0 0 0 1px var(--rule-2, var(--rule)); }
.sbx-email input { flex: 1; min-width: 0; }
.sbx-ok { margin-top: var(--sp-2); color: var(--ink-2); font-size: 14.5px; }
.sbx-form > .ok { width: 100%; padding: var(--sp-4); border-radius: 24px; background: var(--surface); }  /* the thank-you replaces the form */
.sbx-side { display: grid; gap: 0; padding-top: var(--sp-1); }
.sbx-issue { padding: var(--sp-4); border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule); }
.sbx-mast { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1); margin: 0 0 var(--sp-3); padding-bottom: var(--sp-1-5); border-bottom: 2px solid var(--ink); font-size: 13.5px; font-weight: 500; color: var(--ink); }
.sbx-mast span:last-child { color: var(--b-primary); }
.sbx-it { margin: 0; font: 500 clamp(1.3rem, 2vw, 1.6rem)/1.22 var(--font-display); letter-spacing: -0.012em; }
.sbx-it a { color: var(--ink); text-decoration: none; }
.sbx-it a:hover { color: var(--b-primary); }
.sbx-ex { margin: var(--sp-2) 0 0; color: var(--ink-2); line-height: 1.55; }
.sbx-read { display: inline-block; margin-top: var(--sp-3); color: var(--ink); font-weight: 500; text-decoration: none; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.sbx-read:hover { color: var(--b-primary); }
.sbx-ph { margin: var(--sp-5) 0 0; padding-bottom: var(--sp-1-5); border-bottom: 1px solid var(--rule); font: 500 15px/1.3 var(--font-text); color: var(--ink); }
.sbx-past { list-style: none; margin: 0; padding: 0; }
.sbx-past a { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; gap: var(--sp-2); align-items: baseline; padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); text-decoration: none; }
.sbx-past a:hover .sbx-pt { color: var(--b-primary); }
.sbx-no { font-weight: 500; color: var(--ink); white-space: nowrap; }
.sbx-past time { color: var(--ink-3); font-size: 14px; white-space: nowrap; }
.sbx-more { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-2) 0 0; font-size: 14.5px; color: var(--ink-3); }
.sbx-more a { color: var(--ink); }
@media (max-width: 960px) { .sbx-grid { grid-template-columns: minmax(0, 1fr); } }
.sbx-ab { margin-bottom: var(--sp-3); }
.sbx-ab:empty { display: none; }
/* B: one centred column, the email first */
.sbx-b { display: grid; justify-items: center; text-align: center; }
.sbx-b .sbx-form { justify-items: center; max-width: 640px; width: 100%; }
.sbx-b .sbx-l { margin-top: var(--sp-3); }
.sbx-b .sbx-extra { margin-top: var(--sp-3); }
.sbx-b .sbx-extra { justify-items: center; }
.sbx-b .sbx-extra legend { width: 100%; text-align: center; }
.sbx-b .sbx-ok { justify-content: center; text-align: left; }
.sbx-in-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin-top: var(--sp-7); text-align: left; border-bottom: 1px solid var(--rule); }
.sbx-in-row li { grid-template-columns: minmax(0, 1fr); padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: 0; }
.sbx-in-row li + li { padding-left: var(--sp-3); border-left: 1px solid var(--rule); }
.sbx-b-last { max-width: 720px; margin: var(--sp-4) 0 0; color: var(--ink-2); line-height: 1.55; }
.sbx-b-last b { color: var(--ink); font-weight: 500; }
.sbx-b-last a { color: var(--ink); font-weight: 500; }
.sbx-b .sbx-more { justify-content: center; }
/* C: a sample issue on paper, a compact form beside it */
.sbx-c { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.sbx-sheet { padding: var(--sp-5) var(--sp-5) var(--sp-4); border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -40px rgba(var(--b-shadow), .45); }
.sbx-hello { margin: 0 0 var(--sp-3); font: 500 clamp(1.2rem, 1.8vw, 1.45rem)/1.3 var(--font-display); color: var(--ink); text-wrap: balance; }
.sbx-sec { padding: var(--sp-2-5) 0; border-top: 1px solid var(--rule); }
.sbx-sec h3 { margin: 0 0 var(--sp-1); font: 600 12.5px/1.3 var(--font-text); letter-spacing: .02em; color: var(--b-primary); }
.sbx-sk { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.sbx-st { margin: var(--sp-0-5) 0 0; font-weight: 500; }
.sbx-st a { color: var(--ink); text-decoration: none; }
.sbx-st a:hover { color: var(--b-primary); }
.sbx-ss { margin: var(--sp-0-5) 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.sbx-sign { margin: var(--sp-2) 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--rule); color: var(--ink-3); font-style: italic; }
.sbx-side-form { position: sticky; top: calc(var(--nav-h) + var(--sp-3)); }
.sbx-side-form .sbx-past, .sbx-side-form .sbx-ph { width: 100%; }
@media (max-width: 960px) { .sbx-c { grid-template-columns: minmax(0, 1fr); } .sbx-side-form { position: static; } .sbx-in-row { grid-template-columns: minmax(0, 1fr); } .sbx-in-row li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }

@media (max-width: 560px) { .sbx-in li { grid-template-columns: minmax(0, 1fr); } .sbx-past a { grid-template-columns: 3.2em minmax(0, 1fr); } .sbx-past time { grid-column: 2; } }

/* The menu's dark card and active icon square: slate and ember (Shajee picked it from four samples, 24 Oct). Brand slate
   #444751 as a gradient with an orange #f26836 glow and peach labels; no red */
:root { --nav-surf: linear-gradient(150deg, #5a5e6b 0%, #444751 48%, #30323a 100%); --nav-glow: radial-gradient(95% 70% at 100% 118%, rgba(242, 104, 54, .5), transparent 70%); --nav-acc: #ffc9a8; }

/* Every page but the homepage: under the header the ground fades from the paper into a near-white that runs to the
   footer (Shajee, 24 Oct; first on the Atlas pages). --hd-h is the header's height, set by ext/hd-dots.js. */
:root[data-page="inner"] #app { --ground-hi: color-mix(in oklch, var(--paper) 35%, #fff);
  background: linear-gradient(to bottom, var(--paper) 0, var(--paper) var(--hd-h, 420px), var(--ground-hi) calc(var(--hd-h, 420px) + clamp(200px, 26vw, 360px))) var(--ground-hi); }

/* A subtle lift for every white card site-wide (Shajee, 24 Oct). Cards built on .nc (their white layer is a masked
   ::before with the corner notch) take a drop-shadow, which follows the notch; the hover lift replaces it. Plain white
   containers take the same shadow as a box-shadow, keeping their own 1px edge. */
:root { --card-lift: drop-shadow(0 1px 1px rgba(var(--b-shadow), .04)) drop-shadow(0 8px 16px rgba(var(--b-shadow), .06));
  --card-shadow: 0 1px 2px rgba(var(--b-shadow), .04), 0 10px 28px -10px rgba(var(--b-shadow), .14); }
.nc:not(:hover):not(:focus-within):not(.ec-sk):not(.cop-info) { filter: var(--card-lift); }
:root :is(.form-card, .ct-info, .ad-entry, .ad-exc, .at-dlc) { box-shadow: 0 0 0 1px rgba(var(--b-shadow), .05), var(--card-shadow); }
:root .evx-card:not(.nc) { box-shadow: inset 0 0 0 1px var(--rule), var(--card-shadow); }
:root .ptn-card { box-shadow: 0 0 0 1px rgba(var(--b-shadow), .07), var(--card-shadow); }