/* NIIP — National ICT Intelligence Program, and its data system NIIS (National ICT Intelligence System)
   A government statistics / data-hub portal. Original design system —
   not a copy of any organization's actual branding, palette values only.
   Liberian-flag identity (blue · red · white):
   navy #0B2C63 (primary/header) · blue #1C5BB8 (interactive/accent) ·
   red #C8102E (CTA / callouts) · light blue #7FA0CE (secondary / low-value map) ·
   near-white #F5F7FB (background) · dark navy body text.
   Display: Besley (a Clarendon serif, the face of 19th-century public notices) ·
   UI, body and figures: Public Sans (a typeface made for government services) */
/* The data displays' numbers in a seven-segment display face: DSEG7 Classic (SIL Open Font
   Licence, keshikan), for the digits 0-9 only, so letters and punctuation keep their own fonts.
   It is used only in the maps and charts and their legends, read-outs and tips (--digits, below);
   numbers in running text, headings and labels are in the text faces (the owner's choice). */
@font-face { font-family: 'NIIS Digits'; src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff2') format('woff2');
  font-weight: 100 599; unicode-range: U+0030-0039; size-adjust: 88%; font-display: swap; ascent-override: 92%; }
@font-face { font-family: 'NIIS Digits'; src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2') format('woff2');
  font-weight: 600 900; unicode-range: U+0030-0039; size-adjust: 88%; font-display: swap; ascent-override: 92%; }
:root {
  /* Liberian-flag identity: navy primary, blue accents, red CTAs, white surfaces. */
  --navy: #0B2C63;
  --navy-800: #071A3E;
  --navy-600: #1C4C9E;
  --navy-tint: rgba(11, 44, 99, .06);
  --teal: #1C5BB8;
  --teal-dark: #14448A;
  --teal-soft: #E4ECF8;
  --clay: #7FA0CE;
  --clay-soft: #E7EEF8;
  --gold: #C8102E;
  --gold-soft: #FBE4E4;
  --cream: #F5F7FB;
  --canvas: #FFFFFF;        /* the page canvas, behind every element */
  --paper: #FFFFFF;
  --ink: #17233A;
  --muted: #5A6A85;
  --faint: #8A99B3;
  --line: rgba(11, 44, 99, .14);
  --line-soft: rgba(11, 44, 99, .08);
  --green: #1C5BB8;
  --red: #C8102E;
  --nav-h: 3.75rem;
  --serif: 'Besley', Georgia, serif;
  --sans: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --digits: 'NIIS Digits', 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(11,44,99,.06), 0 6px 18px rgba(11,44,99,.07);
  --shadow-lg: 0 4px 10px rgba(11,44,99,.08), 0 16px 40px rgba(11,44,99,.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* The canvas: white, wallpapered with a binary-code watermark. The pattern belongs to
   html, because the root element’s background is the one that propagates to the canvas
   and so covers the whole viewport however short the page is. body must stay transparent
   — an opaque fill there would paint over the watermark across the entire document. */
html {
  background-color: var(--canvas);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27192%27%20viewBox%3D%270%200%20300%20192%27%3E%3Cg%20fill%3D%27%231A1A1A%27%20font-family%3D%27ui-monospace%2CSFMono-Regular%2CMenlo%2CConsolas%2Cmonospace%27%20font-size%3D%2711%27%20text-anchor%3D%27middle%27%3E%3Ctext%20x%3D%276%2018%2030%2042%2054%2066%2078%2090%20102%20114%20126%20138%20150%20162%20174%20186%20198%20210%20222%20234%20246%20258%20270%20282%20294%27%20y%3D%2712%27%20opacity%3D%270.0162%27%3E0000010000101101010000001%3C%2Ftext%3E%3Ctext%20x%3D%276%2018%2030%2042%2054%2066%2078%2090%20102%20114%20126%20138%20150%20162%20174%20186%20198%20210%20222%20234%20246%20258%20270%20282%20294%27%20y%3D%2728%27%20opacity%3D%270.0213%27%3E1100110011101000000100001%3C%2Ftext%3E%3Ctext%20x%3D%276%2018%2030%2042%2054%2066%2078%2090%20102%20114%20126%20138%20150%20162%20174%20186%20198%20210%20222%20234%20246%20258%20270%20282%20294%27%20y%3D%2744%27%20opacity%3D%270.021%27%3E1010001111011010001010000%3C%2Ftext%3E%3Ctext%20x%3D%276%2018%2030%2042%2054%2066%2078%2090%20102%20114%20126%20138%20150%20162%20174%20186%20198%20210%20222%20234%20246%20258%20270%20282%20294%27%20y%3D%2760%27%20opacity%3D%270.0219%27%3E0000000101001111100011010%3C%2Ftext%3E%3Ctext%20x%3D%276%2018%2030%2042%2054%2066%2078%2090%20102%20114%20126%20138%20150%20162%20174%20186%20198%20210%20222%20234%20246%20258%20270%20282%20294%27%20y%3D%2776%27%20opacity%3D%270.0207%27%3E0010011000000100000010111%3C%2Ftext%3E%3Ctext%20x%3D%276%2018%2030%2042%2054%2066%2078%2090%20102%20114%20126%20138%20150%20162%20174%20186%20198%20210%20222%20234%20246%20258%20270%20282%20294%27%20y%3D%2792%27%20opacity%3D%270.0174%27%3E0111011100001001010001100%3C%2Ftext%3E%3Ctext%20x%3D%276%2018%2030%2042%2054%2066%2078%2090%20102%20114%20126%20138%20150%20162%20174%20186%20198%20210%20222%20234%20246%20258%20270%20282%20294%27%20y%3D%27108%27%20opacity%3D%270.0184%27%3E0110110010010100100101010%3C%2Ftext%3E%3Ctext%20x%3D%276%2018%2030%2042%2054%2066%2078%2090%20102%20114%20126%20138%20150%20162%20174%20186%20198%20210%20222%20234%20246%20258%20270%20282%20294%27%20y%3D%27124%27%20opacity%3D%270.0166%27%3E1011100110000110000001110%3C%2Ftext%3E%3Ctext%20x%3D%276%2018%2030%2042%2054%2066%2078%2090%20102%20114%20126%20138%20150%20162%20174%20186%20198%20210%20222%20234%20246%20258%20270%20282%20294%27%20y%3D%27140%27%20opacity%3D%270.0201%27%3E1000110110001101101010110%3C%2Ftext%3E%3Ctext%20x%3D%276%2018%2030%2042%2054%2066%2078%2090%20102%20114%20126%20138%20150%20162%20174%20186%20198%20210%20222%20234%20246%20258%20270%20282%20294%27%20y%3D%27156%27%20opacity%3D%270.0188%27%3E0011000011001000111011000%3C%2Ftext%3E%3Ctext%20x%3D%276%2018%2030%2042%2054%2066%2078%2090%20102%20114%20126%20138%20150%20162%20174%20186%20198%20210%20222%20234%20246%20258%20270%20282%20294%27%20y%3D%27172%27%20opacity%3D%270.0172%27%3E0000110110100101001101101%3C%2Ftext%3E%3Ctext%20x%3D%276%2018%2030%2042%2054%2066%2078%2090%20102%20114%20126%20138%20150%20162%20174%20186%20198%20210%20222%20234%20246%20258%20270%20282%20294%27%20y%3D%27188%27%20opacity%3D%270.0218%27%3E1001010010001100001010101%3C%2Ftext%3E%3Ctext%20x%3D%27138%27%20y%3D%2712%27%20opacity%3D%270.0231%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27234%27%20y%3D%2712%27%20opacity%3D%270.0231%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27258%27%20y%3D%2760%27%20opacity%3D%270.0231%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27246%27%20y%3D%27172%27%20opacity%3D%270.0231%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2730%27%20y%3D%27172%27%20opacity%3D%270.0231%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27102%27%20y%3D%2776%27%20opacity%3D%270.0231%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27282%27%20y%3D%2792%27%20opacity%3D%270.0231%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27162%27%20y%3D%2728%27%20opacity%3D%270.0231%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27114%27%20y%3D%2792%27%20opacity%3D%270.0231%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27150%27%20y%3D%2776%27%20opacity%3D%270.0231%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27150%27%20y%3D%27172%27%20opacity%3D%270.0231%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27114%27%20y%3D%27108%27%20opacity%3D%270.0231%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27234%27%20y%3D%27172%27%20opacity%3D%270.0231%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27294%27%20y%3D%2712%27%20opacity%3D%270.0231%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27162%27%20y%3D%2744%27%20opacity%3D%270.0231%27%3E0%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
}
body { background: transparent; }
body { font-family: var(--sans); color: var(--ink); line-height: 1.55; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); line-height: 1.15; font-weight: 600; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; margin-bottom: .6rem; }
h3 { font-size: 1.1rem; margin-bottom: .4rem; }
p { margin-bottom: .8rem; }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Metadata and figure lines. Was IBM Plex Mono; now the UI sans. The tabular figures are
   what the monospace was really buying here — they keep numeric uses of this class lined
   up in columns. The class name is kept because it is on 65-odd elements in the markup. */
.mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.4rem; }
.narrow { max-width: 820px; }
.section { padding: 3rem 1.4rem; }
main { min-height: 58vh; }
.icn { width: 1em; height: 1em; vertical-align: -0.14em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
ul.plain, ol.plain { list-style: none; }

/* ============ BUTTONS / TAGS ============ */
.btn { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-family: var(--sans); border: 1px solid transparent; border-radius: 7px; font-weight: 600; font-size: .88rem; padding: .58rem 1.3rem; }
.btn:hover { text-decoration: none; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #A50D26; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-dark); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-600); }
.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy-tint); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--navy); }
.btn-ghost:hover { background: var(--navy-tint); }
.btn-sm { padding: .34rem .8rem; font-size: .875rem; border-radius: 6px; }
.btn-icon { padding: .45rem; border-radius: 6px; }
.inline-form { display: inline; }

.tag { display: inline-block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; padding: .18rem .6rem; border-radius: 999px; font-weight: 700; background: var(--teal-soft); color: var(--teal-dark); }
.tag-news { background: var(--teal-soft); color: var(--teal-dark); }
.tag-data_refresh { background: var(--gold-soft); color: #14448A; }
.tag-announcement { background: var(--clay-soft); color: var(--clay); }
.tag-active { background: #E4ECF8; color: var(--green); }
.tag-pending { background: var(--gold-soft); color: #14448A; }
.tag-suspended { background: var(--clay-soft); color: var(--clay); }
.badge { background: var(--clay); color: #fff; font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; font-weight: 700; }
.pill-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; font-weight: 600; padding: .38rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--navy); cursor: pointer; }
.pill-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.pill-chip:hover { text-decoration: none; border-color: var(--teal); }

/* ============ MAIN NAV — light bar, navy icons, blue accents ============ */
.gov-nav { background: #FFFFFF; padding: 0; position: sticky; top: 0; z-index: 100; }
.nav-shell {
  position: relative; max-width: none; margin: 0;
  display: flex; align-items: center; gap: 1.1rem;
  padding: .35rem 1.5rem; border-radius: 0;
  background: #FFFFFF;
  border: 0; border-bottom: 1px solid #CBDCF2;
  box-shadow: 0 2px 10px rgba(11,44,99,.06);
}
.nav-shell::after { content: none; }
.nav-shell > * { position: relative; z-index: 1; }
/* logo */
.nav-mapblock { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: .1rem .5rem .1rem 0; }
.nav-mapblock:hover { text-decoration: none; filter: brightness(1.05); }
.nav-logo { display: block; width: 58px; height: 58px; }   /* the NIIP seal */
.liberia-map { display: block; }
.lmk-land { fill: #E7EFFA; opacity: 1; }
.lmk-outline { fill: none; stroke: #0B2C63; stroke-width: 1.6; }
.lmk-link { stroke: #0B2C63; stroke-width: 1.4; opacity: .55; stroke-dasharray: 4 3; animation: lmkflow 3s linear infinite; }
.lmk-node { fill: #C8102E; filter: none; animation: lmkpulse 2.4s ease-in-out infinite; }
@keyframes lmkflow { to { stroke-dashoffset: -14; } }
@keyframes lmkpulse { 0%,100% { r: 1.4; opacity: .6; } 50% { r: 2.5; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lmk-link, .lmk-node { animation: none; } }
/* search pill: no words in it until the reader types; a clear button appears with the first
   character, then a thin rule and the search button */
.nav-search { flex: 0 1 300px; min-width: 0; display: flex; align-items: center; gap: .2rem;
  background: #FFFFFF; border: 1px solid #D3DAE6; border-radius: 999px; padding: .3rem .45rem .3rem 1.1rem; }
.nav-search:focus-within { border-color: #0B2C63; box-shadow: 0 0 0 3px rgba(11,44,99,.08); }
.nav-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: #17233A; padding: .3rem 0; font-size: .86rem; }
.nav-search input:focus { outline: none; }
.nav-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.nav-search button { background: transparent; border: 0; color: #5A6A85; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: .25rem; flex: 0 0 auto; border-radius: 999px; }
.nav-search button:hover { color: #0B2C63; }
.nav-search button:focus-visible { outline: 2px solid #C8102E; outline-offset: 1px; }
.nav-search button .icn { width: 1.15em; height: 1.15em; stroke-width: 2; }
.nav-search .nav-search-x[hidden] { display: none; }
.nav-search .nav-search-x { color: #6B7385; }
.nav-search .nav-search-x .icn { width: 1.05em; height: 1.05em; }
.nav-search-rule { flex: 0 0 1px; align-self: stretch; margin: .25rem .3rem; background: #D3DAE6; }
.nav-search .nav-search-go { color: #3E4657; }
.nav-search .nav-search-go .icn { width: 1.22em; height: 1.22em; }
/* nav links: a dock (after the macOS dock; ported from a shadcn Dock component to CSS + app.js).
   Each section is a round icon over its name, straight on the bar's white (no panel behind them).
   The icons are glass orbs that hold still (see NAV ICONS: GLASS ORBS below); the bar never changes
   height. */
.gov-navlinks.dock { display: flex; align-items: flex-end; gap: 1.6rem; margin-left: auto; padding: 0 .4rem; }
.dock-item { position: relative; flex: 0 0 auto; }
.dock .nav-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: .32rem; padding: 10px 0 .1rem; color: #17233A; }
.dock .nav-link:hover { text-decoration: none; }
.dock-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #DCE5F2;
  box-shadow: 0 1px 2px rgb(11 44 99 / .08); transform: scale(var(--dock-s, 1)); transform-origin: 50% 100%;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.dock-ic .icn { width: 17px; height: 17px; color: currentColor; stroke-width: 1.8; }
.nav-label { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 700; line-height: 1; white-space: nowrap; transition: color .15s ease; }
.nav-short { display: none; }
.dock .nav-link:hover .dock-ic { border-color: #9DB6DE; color: #0B2C63; }
.dock .nav-link:hover .nav-label { color: #1C5BB8; }
.dock .nav-link:active .dock-ic { filter: brightness(.96); }
.dock .nav-link.active .dock-ic { background: #0B2C63; border-color: #0B2C63; color: #fff; box-shadow: 0 6px 14px -6px rgb(11 44 99 / .55); }
.dock .nav-link.active .nav-label { color: #0B2C63; }
.dock .nav-link:focus-visible { outline: none; }
.dock .nav-link:focus-visible .dock-ic { outline: 2px solid #C8102E; outline-offset: 3px; }
/* a section with a menu: a small chevron after its name, the menu below */
.dock .nav-caret { display: inline-grid; place-items: center; }
.dock .nav-caret .icn { width: 8px; height: 8px; stroke-width: 3; transform: rotate(90deg); color: #5A6A85; }
.dock .nav-link:hover .nav-caret .icn { color: #1C5BB8; }
/* narrower desktops: a shorter search and tighter spacing keep the bar on one line */
@media (max-width: 1240px) {
  .gov-navlinks.dock { gap: 1.05rem; }
  .nav-search { flex-basis: 228px; }
  .nav-label { font-size: .68rem; letter-spacing: .04em; }
}
@media (max-width: 1020px) {
  .gov-navlinks.dock { gap: .75rem; }
  .nav-search { flex-basis: 180px; }
  .nav-full { display: none; }
  .nav-short { display: inline; }
}
.nav-has-sub { position: relative; }
.nav-submenu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, 6px); min-width: 236px; z-index: 120;
  background: #FFFFFF; border: 1px solid #CBDCF2; border-radius: 12px;
  box-shadow: 0 16px 34px rgba(11,44,99,.16); padding: .4rem; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .2s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .2s; }
.nav-has-sub:hover .nav-submenu, .nav-has-sub:focus-within .nav-submenu { opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0); transition-delay: 0s; }
.nav-submenu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-subitem { display: flex; align-items: center; gap: .6rem; padding: .58rem .75rem; border-radius: 8px; color: #17233A; font-size: .82rem; font-weight: 600; }
.nav-subitem .icn { width: 1.1em; height: 1.1em; color: #5A6A85; flex: 0 0 auto; }
.nav-subitem:hover { background: #F0F5FC; color: #0B2C63; text-decoration: none; }
.nav-subitem:hover .icn { color: #1C5BB8; }
.nav-subitem.active { background: #E7EFFA; color: #0B2C63; }
.nav-subitem.active .icn { color: #1C5BB8; }
.nav-subhead { margin-bottom: .25rem; padding-bottom: .65rem; border-bottom: 1px solid #E3EAF5; border-radius: 8px 8px 0 0; color: #0B2C63; font-weight: 700; }
/* Get Started: the Web Shot pill (see THE GET STARTED BUTTON); its wrapper takes the place in the bar */
.nav-cta-wrap { flex: 0 0 auto; margin-left: .7rem; }
/* the phone app bar and its menu sheet: hidden on desktop */
.nav-brand, .nav-icon-btn, .nav-sheet { display: none; }
/* phones and small tablets: an app bar (the flag and name on the left, search and the menu on the
   right); the sections, the search field and Log In live in a full-height sheet under the bar */
@media (max-width: 860px) {
  .nav-shell { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 56px; padding: 0 .4rem; gap: .25rem; }
  .nav-shell > .nav-find { grid-column: 1; grid-row: 1; }
  .nav-shell > .nav-mapblock { grid-column: 2; grid-row: 1; justify-self: center; }
  .nav-shell > .nav-burger { grid-column: 3; grid-row: 1; }
  .nav-search, .gov-navlinks.dock, .shot-wrap.nav-cta-wrap { display: none; }   /* the bar's pill: the menu has its own */
  .nav-mapblock { gap: .6rem; margin: 0; padding: 0; }
  .nav-mapblock .liberia-flag { width: 34px; height: auto; }
  .nav-logo { width: 44px; height: 44px; }
  .nav-brand { display: inline; color: #0B2C63; font: 800 1.02rem/1 var(--sans); letter-spacing: .06em; }
  .nav-icon-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
    background: transparent; color: #0B2C63; cursor: pointer; }
  .nav-icon-btn:active { background: #EEF3FA; }
  .nav-icon-btn:focus-visible { outline: 2px solid #C8102E; outline-offset: -2px; }
  .nav-find .icn { width: 21px; height: 21px; stroke-width: 2; }
  /* three lines; the drawer carries its own round close, so they stay three lines */
  .nav-burger span { position: absolute; left: 50%; width: 20px; height: 2px; margin-left: -10px; border-radius: 2px; background: currentColor;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease; }
  .nav-burger { position: relative; }
  .nav-burger span:nth-child(1) { transform: translateY(-6px); }
  .nav-burger span:nth-child(3) { transform: translateY(6px); }
  /* the menu: a drawer from the left over a dimmed page, the national seal at its head, sections
     as large lines with hairline rules, a + to open a section's pages, a round close at the edge */
  .nav-sheet { position: fixed; inset: 0; z-index: 300; }
  .nav-sheet:not([hidden]) { display: block; }
  /* only the root: locking body as well would make it a scroll box and unstick the bar */
  html.nav-open { overflow: hidden; }
  .nav-scrim { position: absolute; inset: 0; background: rgb(5 12 28 / .48); opacity: 0; transition: opacity .3s ease; }
  .nav-sheet.is-open .nav-scrim { opacity: 1; }
  .nav-drawer { position: absolute; top: 0; bottom: 0; left: 0; width: min(80vw, 340px); background: #fff;
    border-right: 4px solid #0B2C63; box-shadow: 18px 0 40px -18px rgb(5 12 28 / .5);
    transform: translateX(-102%); transition: transform .38s cubic-bezier(.16, 1, .3, 1); }
  .nav-sheet.is-open .nav-drawer { transform: none; }
  .nav-sheet-in { height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)); }
  .nav-drawer-x { position: absolute; z-index: 2; top: calc(14px + env(safe-area-inset-top)); right: -22px; display: grid; place-items: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #0B2C63; color: #fff; cursor: pointer;
    box-shadow: 0 6px 16px -6px rgb(5 12 28 / .6); }
  .nav-drawer-x .icn { width: 18px; height: 18px; stroke-width: 2.2; }
  .nav-drawer-x:focus-visible { outline: 2px solid #C8102E; outline-offset: 2px; }
  .nav-drawer-head { display: grid; place-items: center; padding: calc(1.6rem + env(safe-area-inset-top)) 1.5rem 1.5rem; background: #EAF1FA; }
  .nav-drawer-head img { display: block; width: min(64%, 210px); height: auto; filter: drop-shadow(0 6px 12px rgb(11 44 99 / .18)); }
  .sheet-search { display: flex; align-items: center; gap: .9rem; height: 54px; margin: 1.2rem 1.4rem .4rem; padding: 0 .1rem;
    border: 0; border-bottom: 1.5px solid #0E1A33; border-radius: 0; background: transparent; }
  .sheet-search .icn { width: 23px; height: 23px; color: #1F2D5C; stroke-width: 2.3; flex: 0 0 auto; }
  .sheet-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 1.15rem; color: #0E1A33; }
  .sheet-search input::placeholder { color: #1F2D5C; opacity: 1; }
  .sheet-search input:focus { outline: none; }
  .sheet-search:focus-within { border-bottom-color: #0B2C63; box-shadow: 0 1.5px 0 #0B2C63; }
  .sheet-list { margin: .4rem 1.4rem 0; padding: 0; list-style: none; }
  .sheet-list > li { border-bottom: 1px solid #F3DCE1; }
  .sheet-row { display: flex; align-items: center; gap: .8rem; }
  .sheet-link { flex: 1; display: flex; align-items: center; min-height: 60px; color: #0E1A33; font: 400 1.22rem/1.2 var(--sans); letter-spacing: -.005em; }
  .sheet-link:hover { text-decoration: none; }
  .sheet-link.active { color: #0B2C63; font-weight: 600; }
  .sheet-plus { position: relative; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
    background: #EAF1FA; cursor: pointer; }
  .sheet-plus i::before, .sheet-plus i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px;
    margin: -.8px 0 0 -6px; border-radius: 1px; background: #0E1A33; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
  .sheet-plus i::after { transform: rotate(90deg); }
  .sheet-plus[aria-expanded="true"] i::after { transform: rotate(0deg); }
  .sheet-plus:focus-visible { outline: 2px solid #C8102E; outline-offset: 2px; }
  .sheet-sub { margin: -.3rem 0 .7rem; padding: 0 0 0 .9rem; list-style: none; border-left: 2px solid #EAF1FA; }
  .sheet-sub[hidden] { display: none; }
  .sheet-sub a { display: flex; align-items: center; min-height: 44px; color: #33415A; font-size: 1rem; }
  .sheet-sub a:hover { text-decoration: none; }
  .sheet-sub a.active { color: #0B2C63; font-weight: 600; }
  .shot-wrap.sheet-cta-wrap { display: flex; margin: 1.4rem 1.4rem 0; }   /* full width; outranks .shot-wrap's inline-flex */
  .sheet-cta { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .dock-ic, .nav-label, .nav-burger span, .nav-drawer, .nav-scrim, .sheet-plus i::before, .sheet-plus i::after { transition: none; } }

/* ============ SELECTOR ROW (global + sticky explorer) ============ */
.selector-card { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line-soft); padding: 1.2rem 1.3rem; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: .9rem; align-items: end; }
@media (max-width: 860px) { .selector-card { grid-template-columns: 1fr; } }
.selector-field label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin-bottom: .35rem; }

.sticky-selector { position: sticky; top: var(--nav-h); z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(11,44,99,.05); }
.content .sticky-selector { top: 0; }
.sticky-selector .wrap { display: flex; gap: 1rem; padding: .8rem 1.4rem; align-items: end; flex-wrap: wrap; }
.sticky-selector .selector-field { min-width: 220px; flex: 1; }

/* custom searchable dropdown */
.xdd { position: relative; }
.xdd-trigger { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; background: var(--cream); border: 1px solid var(--line); border-radius: 7px; padding: .55rem .8rem; font-size: .88rem; font-weight: 600; color: var(--navy); cursor: pointer; }
.xdd-trigger:hover { border-color: var(--teal); }
.xdd-trigger .icn { color: var(--muted); flex: 0 0 auto; }
.xdd-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 260px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 50; display: none; overflow: hidden; }
.xdd.open .xdd-panel { display: block; }
.xdd-search { padding: .6rem; border-bottom: 1px solid var(--line); }
.xdd-search input { margin: 0; }
.xdd-list { max-height: 280px; overflow-y: auto; padding: .35rem; }
.xdd-item { padding: .5rem .7rem; border-radius: 6px; font-size: .86rem; cursor: pointer; display: flex; justify-content: space-between; gap: .5rem; }
.xdd-item:hover { background: var(--teal-soft); }
.xdd-item.selected { background: var(--navy); color: #fff; }
.xdd-item .grp { font-size: .75rem; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.xdd-item.selected .grp { color: #B9C7D3; }
.xdd-group-label { padding: .5rem .7rem .2rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 700; }

/* ============ HERO (homepage) ============ */
.hero-dh { background: var(--paper); color: var(--ink); position: relative; overflow: visible; border-bottom: 1px solid var(--line); }
.hero-dh .wrap { position: relative; padding: 3.4rem 1.4rem 5.2rem; z-index: 1; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-dh h1 { color: var(--navy); font-size: clamp(1.9rem, 4vw, 2.9rem); max-width: 16em; margin-bottom: .9rem; }
.hero-dh .lede { color: var(--muted); max-width: 44em; font-size: 1.02rem; }
.hero-selector-wrap { margin-top: 2rem; position: relative; z-index: 2; }
.selector-card { position: relative; z-index: 2; }

/* ===== Scroll-triggered image slider hero (beneath the nav) ===== */
.hero-slider { position: relative; height: 450vh; background: #08131f; }   /* seven slides, about half a screen of scroll each */
.hs-sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow: hidden; display: flex; align-items: flex-end; }
.hs-stage { position: absolute; inset: 0; z-index: 0; }
/* cover = fills the whole hero edge-to-edge; the band sits below the nav so nothing is cut under it */
.hs-slide { position: absolute; inset: 0; background-color: #0B2C63; background-size: cover; background-repeat: no-repeat; background-position: center center;
  opacity: 0; transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1); will-change: opacity; }
.hs-slide.active { opacity: 1; }
/* the slide's 3 s shot over its still (the still is its poster); shown once it is actually playing */
.hs-film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.hs-film.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hs-film { display: none; } }
.hs-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(4,10,26,.74) 0%, rgba(4,10,26,.30) 30%, rgba(4,10,26,.04) 58%, rgba(4,10,26,.28) 100%),
    linear-gradient(to right, rgba(4,10,26,.84) 0%, rgba(4,10,26,.52) 26%, rgba(4,10,26,.10) 52%, rgba(4,10,26,0) 66%); }
.hs-content { position: relative; z-index: 2; width: 100%; padding: 0 1.4rem 5vh; }
.hs-texts { position: relative; min-height: 12.5rem; }
.hs-text { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.hs-text.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hs-text .kicker { color: #FF6076; letter-spacing: .14em; }
/* quote slides */
.hs-quote { position: relative; max-width: 30em; padding-left: 2.4rem; }
.hs-qmark { position: absolute; left: -.1rem; top: -1.6rem; font-family: var(--serif); font-size: 6rem; line-height: 1; color: #FF4155; opacity: .9; }
.hs-quote p { font-family: var(--serif); font-size: clamp(1.5rem, 3.1vw, 2.5rem); line-height: 1.25; color: #fff;
  margin: 0 0 1.1rem; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.hs-quote footer { display: flex; flex-direction: column; gap: .18rem; border-left: 3px solid #C8102E; padding-left: .85rem; }
.hs-who { font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: .01em; }
.hs-role { font-size: .86rem; color: #DCE6EE; }
.hs-qmeta { font-size: .75rem; color: #A9BEDA; margin-top: .15rem; }
.hs-text h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.05; max-width: 15em; margin-bottom: .8rem; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.hs-text .lede { color: #DCE6EE; max-width: 42em; font-size: 1.05rem; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.hs-content .hero-selector-wrap { margin-top: 1.6rem; position: relative; z-index: 3; }
.hv-cue { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .5rem; color: #B9C7D3;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; transition: opacity .3s; }
.hv-cue i { width: 22px; height: 34px; border: 2px solid rgba(185,199,211,.6); border-radius: 12px; position: relative; }
.hv-cue i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; border-radius: 3px;
  background: #FF6076; transform: translateX(-50%); animation: hvcue 1.6s ease-in-out infinite; }
@keyframes hvcue { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-slider { height: auto; }
  .hs-sticky { position: relative; height: auto; min-height: 80vh; }
  .hs-slide { transition: none; } .hs-text { transition: none; }
  .hv-cue { display: none; }
}
@media (max-width: 720px) {
  .hero-slider { height: 380vh; }
  .hs-content { padding-bottom: 8vh; }
}

/* ============ DASHBOARD TILES ============ */
.dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 980px) { .dash-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .dash-tiles { grid-template-columns: 1fr; } }
.dash-tile { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy); color: #fff; padding: 1.4rem 1.5rem; min-height: 148px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: var(--shadow); border: 1px solid var(--navy-600); }
.dash-tile:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-2px); transition: transform .15s, box-shadow .15s; }
.dash-tile::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image:
  radial-gradient(circle at 20% 20%, #fff 1.5px, transparent 1.5px),
  radial-gradient(circle at 60% 55%, #fff 1.5px, transparent 1.5px),
  radial-gradient(circle at 85% 30%, #fff 1.5px, transparent 1.5px),
  radial-gradient(circle at 40% 80%, #fff 1.5px, transparent 1.5px);
  background-size: 70px 70px; }
.dash-tile-icon { width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; margin-bottom: .8rem; color: var(--gold); position: relative; }
.dash-tile-icon .icn { width: 1.3em; height: 1.3em; }
.dash-tile h3 { color: #fff; position: relative; margin-bottom: .25rem; font-size: 1.08rem; }
.dash-tile p { color: #B9C7D3; font-size: .84rem; margin: 0; position: relative; }
.dash-tile.clay { background: var(--clay); border-color: #4E8C65; }
.dash-tile.clay .dash-tile-icon { color: #fff; }
.dash-tile.clay p { color: #F3DCCC; }
.dash-tile.teal { background: var(--teal); border-color: var(--teal-dark); }
.dash-tile.teal .dash-tile-icon { color: #fff; }
.dash-tile.teal p { color: #D8F0EC; }

/* ============ PUBLICATIONS ROW ============ */
.pub-scroll { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .6rem; scroll-snap-type: x proximity; }
.pub-card { flex: 0 0 260px; scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.pub-card-body { padding: .9rem 1rem 1.1rem; }
.pub-card h4 { font-family: var(--serif); font-size: .96rem; margin: .5rem 0 .3rem; line-height: 1.3; }
.pub-card .meta { font-size: .75rem; color: var(--muted); }

/* ============ FEATURED RESEARCH PAPERS (card carousel) ============ */
#featuredPapers .sec-head-dh { display: flex; align-items: center; justify-content: space-between; }
.fp-nav { display: flex; align-items: center; }
.fp-arrow { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: .5rem; transition: background .15s, color .15s, border-color .15s; }
.fp-arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.fp-arrow .icn { width: 1.1em; height: 1.1em; stroke-width: 2.2; }
.fp-arrow .fp-flip, .rc-arrow .fp-flip { transform: scaleX(-1); }
.fp-track { display: flex; gap: 1.25rem; overflow-x: auto; padding: .3rem .2rem 1rem; }
.fp-track::-webkit-scrollbar { height: 6px; }
.fp-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.fp-card { flex: 0 0 300px; scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); color: inherit; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.fp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.fp-thumb { height: 188px; background-size: cover; background-position: center; background-color: var(--navy); }
.fp-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .1rem; }
.fp-body .tag { align-self: flex-start; margin-bottom: .5rem; }
.fp-body h4 { font-family: var(--serif); font-size: 1.06rem; line-height: 1.3; margin: 0 0 .55rem; color: var(--navy); }
.fp-meta { font-size: .875rem; color: var(--muted); margin-top: auto; }
@media (max-width: 620px) { .fp-card { flex-basis: 78vw; } }

/* ============ DASHBOARDS — title-as-filter + home embed ============ */
.dash-title-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: .3rem; }
.dash-title-select { position: relative; display: inline-flex; align-items: center; }
.dash-title-select select {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0; cursor: pointer;
  font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 600; color: var(--navy);
  padding: .1rem 2.4rem .1rem 0; border-bottom: 3px solid var(--gold); line-height: 1.2; max-width: 100%; }
.dash-title-select select:focus { outline: none; }
.dash-title-select .icn { position: absolute; right: .55rem; pointer-events: none; color: var(--gold); width: 1.1em; height: 1.1em; stroke-width: 3; transform: rotate(90deg); }
.hd-chip { display: inline-block; margin-left: .55rem; font-family: var(--sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--gold); padding: .22rem .7rem; border-radius: 999px; vertical-align: middle; }
#homeDash .dash-hero-dh { margin-top: .6rem; }

/* ============ HOME VIDEO — YouTube-style: player left, queue right ============ */
#homeVideo .sec-head-dh { display: flex; align-items: center; gap: .8rem; }
.vid-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
  grid-template-rows: auto auto; column-gap: 1.4rem; row-gap: .85rem; align-items: stretch; }
.vid-frame { grid-column: 1; grid-row: 1; }
.vid-queue { grid-column: 2; grid-row: 1; }
.vid-meta  { grid-column: 1; grid-row: 2; min-width: 0; }
.vid-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: #000; box-shadow: var(--shadow-lg); border: 1px solid var(--line-soft); }
.vid-frame iframe, .vid-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.vid-now { font-family: var(--serif); font-size: 1.15rem; color: var(--navy); margin: 0; }
.vid-queue { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.vq-head { padding: .8rem 1rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line-soft); background: var(--cream); }
.vq-list { list-style: none; margin: 0; padding: .45rem; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .35rem; overflow-y: auto; }
.vq-list li { flex: 1 1 0; min-height: 0; display: flex; }
.vq-item { display: flex; gap: .75rem; align-items: center; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 10px; padding: .5rem; font: inherit; color: inherit; transition: background .15s; }
.vq-item:hover { background: var(--teal-soft); }
.vq-item.active { background: var(--gold-soft); }
.vq-thumb { flex: 0 0 116px; align-self: stretch; min-height: 62px; border-radius: 8px; background-size: cover; background-position: center;
  background-color: var(--navy); }
.vq-meta { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.vq-title { font-size: .86rem; font-weight: 700; color: var(--navy); line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vq-item.active .vq-title { color: var(--gold); }
.vq-sub { font-size: .75rem; color: var(--faint); font-family: var(--sans); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .vid-layout { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .vid-frame, .vid-queue, .vid-meta { grid-column: 1; }
  .vid-frame { grid-row: 1; } .vid-meta { grid-row: 2; } .vid-queue { grid-row: 3; } .vq-list { max-height: 340px; } .vq-list li { flex: 0 0 auto; } .vq-thumb { min-height: 64px; } }

/* ============ LIBERIA ICT TRENDS — squeeze carousel ============
   One update holds the open panel; the rest narrow into slats on the right. Widths are shares
   of the row worked out in CSS, against the width the carousel is given (container units),
   not the window, so nothing is measured. */
.sq-nav { display: flex; align-items: center; gap: 8px; }
.sq-nav .more { margin-right: 10px; }
.sq-arrow { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px;
  background: var(--navy); color: #fff; cursor: pointer; transition: opacity .2s ease, transform .1s ease; }
.sq-arrow:hover { opacity: .86; }
.sq-arrow:active { transform: translateY(1px); }
.sq-arrow:focus-visible, .sq-go:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.sq { container: sq / inline-size; }   /* named: each spine is a container too, and an unnamed query would find the spine first */
.sq-body {
  --sq-h: clamp(200px, 28cqi, 340px);
  --sq-gap: 16px;
  --sq-slat: 8px;
  --sq-slat-gap: 8px;
  --sq-r: 6px;
  --sq-ms: 1000ms;
  --sq-ease: cubic-bezier(.16, 1, .3, 1);            /* easeOutExpo: fast away, long settle */
  /* the open panel starts from a 16:9 block, capped so the other three always keep room */
  --sq-hero: min(calc(var(--sq-h) * 16 / 9), 62cqi);
  --sq-room: calc(100cqi - var(--sq-hero) - var(--sq-slats, 1) * (var(--sq-slat) + var(--sq-slat-gap)) - 3 * var(--sq-gap));
  /* each column's share of the room; the open one gives a little back */
  --s0: -.06; --s1: .61; --s2: .30; --s3: .15;
}
/* the panel under the pointer takes more room and its neighbours pay for it */
.sq[data-hover="0"] .sq-body { --s0: 0;    --s1: .59; --s2: .28; --s3: .13; }
.sq[data-hover="1"] .sq-body { --s0: -.12; --s1: .71; --s2: .28; --s3: .13; }
.sq[data-hover="2"] .sq-body { --s0: -.12; --s1: .59; --s2: .40; --s3: .13; }
.sq[data-hover="3"] .sq-body { --s0: -.12; --s1: .59; --s2: .28; --s3: .25; }
@container sq (max-width: 640px) {
  .sq-body { --sq-h: 220px; --sq-gap: 10px; }
  /* scoped one level deeper than the base rules below, which would otherwise win on source order */
  .sq-body .sq-over { padding: 56px 14px 13px; }
  .sq-body .sq-over-in { white-space: normal; font-size: 13px; line-height: 1.3; }
  .sq-body .sq-title { font-size: 17px; }
  /* phone panels are too narrow for a wrapped spine: one line, cut with an ellipsis */
  .sq-body .sq-spine-in { font-size: 14px; left: 10px; bottom: 12px; max-height: calc(100% - 24px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* the panels animate width (the design's mechanic: a scale would stretch the photos), so the
   layout work each frame is fenced inside the carousel rather than rippling through the page */
.sq-window { height: var(--sq-h); overflow: hidden; contain: layout paint; }
.sq-strip { display: flex; width: max-content; height: 100%;
  transform: translateX(calc(var(--sq-slid, 0) * (var(--sq-slat) + var(--sq-gap)) + var(--sq-drag, 0px)));
  transition: transform var(--sq-ms) var(--sq-ease); }
/* a finger on the strip moves it directly; a swipe then plays out quicker than the autoplay */
.sq.is-dragging .sq-strip { transition: none; }
.sq.is-quick .sq-body { --sq-ms: 560ms; }
/* dragging through the cards: each one turns over fast, and nothing on the strip is selected */
.sq.is-scrub .sq-body { --sq-ms: 260ms; }
.sq-window { user-select: none; -webkit-user-select: none; }
.sq.is-scrubbing, .sq.is-scrubbing .sq-card { cursor: grabbing; }
.sq-card { position: relative; flex: 0 0 auto; height: 100%; width: var(--sq-slat); margin: 0 0 0 var(--sq-gap); padding: 0;
  border: 0; border-radius: calc(var(--sq-slat) / 2); overflow: hidden; isolation: isolate; cursor: pointer; background: var(--cream);
  transition: width var(--sq-ms) var(--sq-ease), margin-left var(--sq-ms) var(--sq-ease), border-radius var(--sq-ms) var(--sq-ease); }
.sq-card:first-child { margin-left: 0; }
.sq-card[data-kind="tail"] { margin-left: var(--sq-slat-gap); }
.sq-card[data-kind="open"], .sq-card[data-kind="panel"] { border-radius: var(--sq-r); }
.sq-card[data-col="0"] { width: calc(var(--sq-hero) + var(--sq-room) * var(--s0)); cursor: default; }
.sq-card[data-col="1"] { width: calc(var(--sq-room) * var(--s1)); }
.sq-card[data-col="2"] { width: calc(var(--sq-room) * var(--s2)); }
.sq-card[data-col="3"] { width: calc(var(--sq-room) * var(--s3)); }
.sq-card:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 5px #fff; }
/* drawn at one 16:9 block and centred, never at the card's width, so a picture keeps one scale
   while its card narrows: the card only changes how much of it shows */
.sq-pic { position: absolute; top: 0; left: 50%; height: 100%; width: var(--sq-hero); min-width: 100%; max-width: none;
  transform: translateX(-50%); object-fit: cover; user-select: none; }
.sq-over { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; padding: 64px 22px 18px;
  background: linear-gradient(to top, rgb(7 26 62 / .72) 0, rgb(7 26 62 / .64) 44px, rgb(7 26 62 / 0) 100%); opacity: 0; pointer-events: none;
  transition: opacity var(--sq-ms) var(--sq-ease); }
.sq-card[data-col="0"] .sq-over { opacity: 1; }
.sq-over-in { color: #fff; font: 500 14px/1.2 var(--sans); letter-spacing: .005em; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Every panel names its update. The open one sets the title under its date at a fixed measure,
   so it never re-wraps while the panel widens; a narrowing panel sets it as a spine, read bottom
   to top, whose length is the panel's height and so never changes as the width does. A click on
   a narrower panel only brings it into focus; the open panel's title opens the story, so only it
   underlines like a link. */
.sq-cap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: min(31rem, calc(var(--sq-hero) - 44px)); }
.sq-title { color: #fff; font: 600 clamp(19px, 2.05cqi, 25px)/1.16 var(--serif); letter-spacing: -.01em; text-align: left; text-wrap: balance;
  text-decoration: underline 1px transparent; text-underline-offset: 4px; transition: text-decoration-color .25s ease; }
.sq-card[data-col="0"] .sq-title { pointer-events: auto; cursor: pointer; }
.sq-card[data-col="0"] .sq-title:hover { text-decoration-color: rgb(255 255 255 / .85); }
.sq-spine { position: absolute; inset: 0; container: spine / inline-size; pointer-events: none; opacity: 0;
  background: linear-gradient(to right, rgb(7 26 62 / .66), rgb(7 26 62 / .3) 64px, rgb(7 26 62 / 0) 150px);
  transition: opacity var(--sq-ms) var(--sq-ease); }
.sq-card[data-kind="panel"] .sq-spine { opacity: 1; }
/* max-height is the spine's line length (its inline size, in vertical text); the lines it wraps
   into stack across the panel, and a panel too narrow for them hides the spine (below) */
.sq-spine-in { position: absolute; left: 14px; bottom: 16px; max-height: calc(100% - 32px); writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg);   /* sideways: quote marks turn with the letters */
  color: #fff; font: 600 16px/1.22 var(--serif); letter-spacing: -.005em; text-align: start; text-wrap: balance;
  text-decoration: underline 1px transparent; text-underline-offset: 4px; transition: text-decoration-color .25s ease; }
@container spine (max-width: 44px) { .sq-spine-in { display: none; } }   /* a sliver too thin to carry a word */

.sq-copy { display: grid; margin-top: 24px; }
.sq-slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  opacity: 0; visibility: hidden; transition: opacity var(--sq-ms) var(--sq-ease), visibility var(--sq-ms); }
.sq-slide.is-open { opacity: 1; visibility: visible; }
.sq-go { display: inline-flex; flex-shrink: 0; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 6px;
  background: var(--navy); color: #fff; font: 500 14px/1 var(--sans); white-space: nowrap; transition: opacity .2s ease, transform .1s ease; }
.sq-go:hover { opacity: .88; text-decoration: none; }
.sq-go:active { transform: translateY(1px); }
.sq-go svg { transition: transform .2s ease; }
.sq-go:hover svg { transform: translateX(2px); }
@container sq (min-width: 640px) {
  .sq-copy { margin-top: 28px; }
  .sq-slide { flex-direction: row; justify-content: space-between; gap: 40px; }
}
/* a re-layout that must not be seen: the script sets this around the trim after each step */
.sq.is-still .sq-strip, .sq.is-still .sq-card, .sq.is-still .sq-over, .sq.is-still .sq-spine { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sq-strip, .sq-card, .sq-over, .sq-spine, .sq-slide { transition: none !important; }
}
/* ============ RISING WORDS ============
   A heading's words rise through their own masks. The mask is padded so descenders and the
   serif's overhangs are not cut, and pulled back by the same amount so the line does not move. */
.rw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .05em .16em; margin: 0 -.05em -.16em; }
.rw-in, .nw-in { display: inline-block; }
.rw-in { animation: rw-rise .95s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 65ms + 60ms); }
@keyframes rw-rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes nn-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nn-uncover { from { clip-path: inset(0 0 100% 0); transform: scale(1.06); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* ============ NEWS & NOTICES (/updates) ============
   The record, newest first. Each entry is ruled into the record, then written: its hairline draws
   left to right, the day and the title's words rise, the text fades up and the photo uncovers.
   Armed by a script only when motion is welcome, so without it everything simply shows. */
.nn { padding-top: 1.6rem; padding-bottom: 5rem; }
.nn a:focus-visible, .nn button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }
.nn .upd-crumbs { margin-bottom: 2.4rem; }
.nn-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: end; padding-bottom: 2.4rem; }
.nn-title { grid-column: 1 / span 8; margin: 0; font-size: clamp(2.8rem, 6vw, 5.2rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.nn-intro { grid-column: 9 / span 4; padding-bottom: .55rem; }
.nn-lede { font-size: 1.1rem; line-height: 1.55; color: var(--ink); margin-bottom: .55rem; animation: nn-fade .8s ease-out .35s both; }
.nn-count { margin: 0; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; animation: nn-fade .8s ease-out .45s both; }

.nn-filter { display: flex; flex-wrap: wrap; gap: .2rem 1.75rem; margin-bottom: .4rem; }
.nn-filter button { position: relative; padding: .6rem 0 .75rem; border: 0; background: none; cursor: pointer;
  font: 500 .95rem/1.2 var(--sans); color: var(--muted); transition: color .2s ease; }
.nn-filter button span { margin-left: .2rem; font-size: .8rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.nn-filter button::after { content: ''; position: absolute; left: 0; right: 0; bottom: .3rem; height: 2px; background: var(--navy);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.nn-filter button:hover { color: var(--ink); }
.nn-filter button[aria-pressed="true"] { color: var(--navy); font-weight: 600; }
.nn-filter button[aria-pressed="true"]::after { transform: scaleX(1); }

.nn-list { list-style: none; border-bottom: 1px solid var(--line); }
.nn-entry { position: relative; scroll-margin-top: calc(var(--nav-h) + 24px); }
.nn-rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left; }
.nn-art { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; padding: 2.3rem 0 2.5rem; }
.nn-rail { grid-column: 1 / span 2; }
.nn-text { grid-column: 3 / span 6; min-width: 0; }
.nn-photo { grid-column: 9 / span 4; align-self: start; display: block; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--radius); background: var(--cream); }
.nn-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }

.nn-date { display: block; color: var(--navy); }
.nn-mask { display: block; overflow: hidden; padding-bottom: .05em; }
.nn-day { display: block; font: 600 clamp(2.9rem, 4.4vw, 3.9rem)/.9 var(--serif); letter-spacing: -.035em; font-variant-numeric: lining-nums; }
.nn-my { display: block; margin-top: .55rem; font-size: .92rem; font-weight: 600; }
.nn-kind { display: block; margin-top: .85rem; padding-top: .65rem; border-top: 1px solid var(--line-soft); font-size: .84rem; color: var(--muted); }

.nn-h { margin: -.15rem 0 .8rem; font-size: clamp(1.45rem, 2.15vw, 1.85rem); font-weight: 600; line-height: 1.17; letter-spacing: -.015em; text-wrap: balance; }
/* the underline is drawn, not switched: it runs in from the left under every line of the title */
.nn-h a { color: var(--navy); padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .55s cubic-bezier(.16, 1, .3, 1); }
.nn-h a:hover, .nn-h a:focus-visible, .nn-art:has(.nn-photo:hover, .nn-read:hover) .nn-h a { background-size: 100% 1.5px; text-decoration: none; }
.nn-art:has(.nn-h a:hover, .nn-read:hover) .nn-photo img, .nn-photo:hover img { transform: scale(1.03); }
.nn-body { max-width: 36rem; margin-bottom: .95rem; font-size: 1.04rem; line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.nn-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.5rem; margin: 0; font-size: .86rem; }
.nn-demo { display: inline-flex; align-items: center; gap: .4rem; color: #A50D26; font-weight: 600; }
.nn-read { display: inline-flex; align-items: center; gap: .4rem; color: var(--teal-dark); font-weight: 600; }
.nn-read:hover { text-decoration: none; }
.nn-read .icn { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.nn-art:has(a:hover) .nn-read .icn { transform: translateX(3px); }
.nn-empty { padding: 2rem 0; color: var(--muted); }

/* the entrance: held states while armed and not yet in view, released in order once it is */
.nn.is-armed .nn-entry:not(.is-in) .nn-rule { transform: scaleX(0); }
.nn.is-armed .nn-entry:not(.is-in) .nn-day,
.nn.is-armed .nn-entry:not(.is-in) .nw-in { transform: translateY(112%); }
.nn.is-armed .nn-entry:not(.is-in) :is(.nn-my, .nn-kind, .nn-body, .nn-foot) { opacity: 0; transform: translateY(10px); }
.nn.is-armed .nn-entry:not(.is-in) .nn-photo { clip-path: inset(0 0 100% 0); }
.nn.is-armed .nn-entry.is-in .nn-photo { clip-path: inset(0 0 0 0); }   /* a clip only animates between two insets, never to none */
.nn.is-armed .nn-entry:not(.is-in) .nn-photo img { transform: scale(1.06); }
.nn.is-armed .nn-rule { transition: transform 1.05s cubic-bezier(.65, 0, .35, 1) var(--d, 0ms); }
.nn.is-armed .nn-day { transition: transform .9s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0ms) + 160ms); }
.nn.is-armed .nw-in { transition: transform .85s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0ms) + 240ms + var(--i, 0) * 32ms); }
.nn.is-armed :is(.nn-my, .nn-kind) { transition: opacity .6s ease-out calc(var(--d, 0ms) + 300ms), transform .6s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0ms) + 300ms); }
.nn.is-armed .nn-body { transition: opacity .7s ease-out calc(var(--d, 0ms) + 420ms), transform .7s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0ms) + 420ms); }
.nn.is-armed .nn-foot { transition: opacity .7s ease-out calc(var(--d, 0ms) + 500ms), transform .7s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0ms) + 500ms); }
.nn.is-armed .nn-photo { transition: clip-path 1.15s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0ms) + 280ms); }
.nn.is-armed .nn-photo img { transition: transform 1.4s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0ms) + 280ms); }
/* once written, an entry answers hover at once */
.nn.is-armed .nn-entry.is-done .nn-photo img { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
::view-transition-group(*.nn-entry) { animation-duration: .45s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

@media (max-width: 860px) {
  .nn-head { display: block; padding-bottom: 1.8rem; }
  .nn-intro { margin-top: 1.1rem; padding: 0; }
  .nn-art { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; padding: 1.6rem 0 1.9rem; }
  .nn-rail, .nn-text, .nn-photo { grid-column: 1; }
  .nn-rail { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
  .nn-date { display: flex; align-items: baseline; gap: .6rem; }
  .nn-day { font-size: 2.5rem; }
  .nn-my { margin: 0; }
  .nn-kind { margin: 0; padding: 0; border: 0; }
  /* one row that scrolls sideways if it must, rather than stranding a choice on a line of its own */
  .nn-filter { flex-wrap: nowrap; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; margin-right: -1.4rem; padding-right: 1.4rem; }
  .nn-filter::-webkit-scrollbar { display: none; }
  .nn-filter button { flex: none; white-space: nowrap; }
}
.nn ::selection, .upd ::selection { background: var(--navy); color: #fff; }
/* print the record as it reads at rest: no held entrance states, no clipped photos */
@media print {
  .nn.is-armed .nn-entry :is(.nn-rule, .nn-day, .nw-in, .nn-my, .nn-kind, .nn-body, .nn-foot, .nn-photo, .nn-photo img) {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .rw-in, .nn-lede, .nn-count, .upd-lead, .upd-demo, .upd-figure img, .upd-figure figcaption { animation: none !important; }
  .upd-rail { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-in { animation: nn-fade .3s ease-out both; }
  .nn-lede, .nn-count { animation-duration: .3s; animation-delay: 0s; }
  .nn-photo img, .nn-h a, .nn-filter button::after, .nn-read .icn { transition: none; }
  ::view-transition-group(*.nn-entry) { animation: none; }
}

/* ============ ONE UPDATE (/updates/<slug>) ============
   A dated entry in the record, read like a changelog: the date holds a pinned rail of its
   own, the entry reads in a column beside it, and the record below marks where it sits.
   Hairlines only: no cards, no pills. On arrival the headline rises and the photo uncovers (see below); hover changes colour and underline. */
.upd { padding-top: 1.6rem; padding-bottom: 4.5rem; }
.upd a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }
.upd-crumbs { display: flex; align-items: baseline; gap: .55rem; min-width: 0; font-size: .84rem; color: var(--muted); margin-bottom: 2.4rem; }
.upd-crumbs a { color: var(--teal-dark); flex: none; }
.upd-crumbs span[aria-hidden] { color: var(--faint); flex: none; }
.upd-crumbs [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
.upd-rail { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-h) + 2rem); padding-right: 1rem; }
/* one measure for the whole entry: the headline, the text and the photo end on the same line */
.upd-main { grid-column: 4 / span 9; min-width: 0; max-width: 44rem; }

.upd-date { display: block; color: var(--navy); }
.upd-day { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(4.5rem, 7.5vw, 6.25rem);
  line-height: .86; letter-spacing: -.035em; font-variant-numeric: lining-nums; font-optical-sizing: auto; }
.upd-my { display: block; margin-top: .7rem; font-size: 1rem; font-weight: 600; color: var(--navy); }
.upd-facts { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.upd-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
.upd-facts dt { font-size: .82rem; color: var(--muted); }
.upd-facts dd { font-size: .88rem; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
/* the neighbouring entries, by their real titles: the rail's way on through the record */
.upd-step { margin-top: .35rem; }
.upd-step a { display: block; padding: .8rem 0 .85rem; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.upd-step a:hover { text-decoration: none; }
.upd-step-dir { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .2rem; }
.upd-step-title { display: block; font-size: .9rem; font-weight: 500; line-height: 1.38; }
.upd-step a:hover .upd-step-title { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.upd-main h1 { font-size: clamp(2rem, 3.5vw, 2.9rem); line-height: 1.1; letter-spacing: -.015em;
  text-wrap: balance; margin: -.2rem 0 1.4rem; }
.upd-lead { font-size: clamp(1.12rem, 1.5vw, 1.28rem); line-height: 1.6; color: var(--ink); text-wrap: pretty; margin-bottom: 0; }
/* a ruled note, not a box: the red belongs to the rule, the icon and the label */
.upd-demo { display: flex; gap: .7rem; align-items: flex-start; margin: 1.5rem 0 0; padding: .8rem 0 0;
  border-top: 1px solid rgba(200, 16, 46, .32); font-size: .9rem; line-height: 1.55; color: var(--ink); }
.upd-demo .icn { flex: none; margin-top: .18rem; color: var(--red); font-size: 1.05rem; }
.upd-demo strong { color: #A50D26; font-weight: 700; }
.upd-figure { margin: 2.2rem 0 0; }
.upd-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--cream); }
.upd-figure figcaption { margin-top: .65rem; font-size: .8rem; color: var(--muted); }
/* on arrival the headline's words rise (.rw), then the text settles and the photo uncovers */
.upd-lead { animation: nn-fade .8s ease-out .4s both; }
.upd-demo { animation: nn-fade .8s ease-out .5s both; }
.upd-figure { overflow: hidden; border-radius: var(--radius); }
.upd-figure img { animation: nn-uncover 1.25s cubic-bezier(.16, 1, .3, 1) .35s both; }
.upd-figure figcaption { animation: nn-fade .8s ease-out .8s both; }
@media (prefers-reduced-motion: reduce) {
  .upd-lead, .upd-demo, .upd-figure figcaption { animation-duration: .3s; animation-delay: 0s; }
  .upd-figure img { animation: nn-fade .3s ease-out both; }
}

/* a story from elsewhere: its paragraphs under the photo in the lead's measure, then a ruled line
   naming the report it comes from, and the way to the original */
.upd-story { margin-top: 2rem; }
.upd-story p { font-size: 1.05rem; line-height: 1.7; color: var(--ink); margin: 0 0 1.1rem; text-wrap: pretty; }
/* the lead, the story and the caption justified to straight margins, as the owner asked, the last line
   flush left; hyphenation (the site's rule for every paragraph) keeps a narrow line from opening up */
.upd-main :is(.upd-lead, .upd-story p, .upd-source, .upd-demo span, .upd-figure figcaption) {
  text-align: justify; text-align-last: left; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 3 3; }
.upd-source { margin: 1.6rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.55; color: var(--muted); }
.upd-orig { margin-top: .6rem; }
/* the way back to the list, over the headline */
.upd-back { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.1rem; font-size: .92rem; font-weight: 600; color: var(--teal-dark); }
.upd-back .icn { width: 1em; height: 1em; }
.upd-back:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.upd-record { margin-top: 4rem; }
.upd-record h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.upd-list { list-style: none; border-top: 1px solid var(--line); }
.upd-list li { border-bottom: 1px solid var(--line); }
.upd-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 11rem; column-gap: 1.5rem; align-items: baseline; padding: 1rem 0; color: var(--ink); }
.upd-row time { font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.upd-row-title { font-size: 1rem; font-weight: 500; line-height: 1.4; text-align: left; }   /* a short title justified opens wide gaps */
.upd-row-cat { font-size: .82rem; color: var(--muted); text-align: right; }
a.upd-row:hover { text-decoration: none; }
a.upd-row:hover .upd-row-title { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* this entry's place: navy rules above and below the row (the shadow covers the row above's hairline) */
.upd-list li.is-here { border-bottom-color: var(--navy); box-shadow: 0 -1px 0 var(--navy); }
.upd-list li.is-here .upd-row-title { color: var(--navy); font-weight: 600; }
.upd-list li.is-here .upd-row-cat { color: var(--navy); font-weight: 600; }
.upd-all { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; font-size: .92rem; font-weight: 600; color: var(--teal-dark); }

@media (max-width: 860px) {
  .upd-grid { display: block; }
  .upd-main { max-width: none; }
  /* the rail folds above the headline, still led by the date set large */
  .upd-rail { position: static; padding: 0; margin-bottom: 1.6rem; }
  .upd-date { display: flex; align-items: baseline; gap: .7rem; }
  .upd-day { font-size: 3.5rem; line-height: .9; }
  .upd-my { margin: 0; }
  .upd-facts { margin-top: .9rem; }
  .upd-facts > div { justify-content: flex-start; gap: .6rem; padding: .6rem 0; border-bottom-color: var(--line); }
  .upd-facts dd { text-align: left; }
  .upd-step { display: none; }   /* the record follows the photo closely on a phone */
  .upd-crumbs { margin-bottom: 1.4rem; }
  .upd-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .3rem; }
  .upd-row-title { grid-column: 1 / -1; grid-row: 2; }
}

/* ============ REPORTS GRID + CAREERS LIST ============ */
.fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; margin-top: 1.4rem; }
.fp-grid .fp-card { flex: none; }

/* ============ NATIONAL ICT REPORTS — facing coverflow carousel ============ */
#natReports .sec-head-dh { display: flex; align-items: center; justify-content: space-between; }
.rc-nav { display: flex; align-items: center; }
.rc-arrow { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: .5rem; transition: background .15s, color .15s, border-color .15s; }
.rc-arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.rc-arrow .icn { width: 1.1em; height: 1.1em; stroke-width: 2.2; }
.rc-stage { position: relative; height: 430px; perspective: 1400px; transform-style: preserve-3d; margin-top: .4rem; }
.rc-card { position: absolute; top: 0; left: 50%; width: min(420px, 82vw); margin-left: calc(min(420px, 82vw) / -2);
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow); cursor: pointer; transform-origin: center center;
  transition: transform .55s cubic-bezier(.22,.7,.3,1), opacity .55s ease, box-shadow .3s ease; }
.rc-card.is-active { box-shadow: 0 18px 44px rgba(6,18,44,.24); cursor: default; }
/* hover — the centre card "comes alive": lifts, glows, image slow-zooms, red rule sweeps in */
.rc-card.is-active:hover { box-shadow: 0 26px 60px rgba(6,18,44,.34), 0 0 0 1px rgba(200,16,46,.35); }
.rc-card.is-active:hover .rc-thumb { transform: scale(1.08); }
.rc-card.is-active:hover .rc-thumb::after { opacity: 1; }
.rc-card.is-active:hover .rc-body h3 { color: var(--gold); }
.rc-card.is-active:hover .rc-body::after { width: 62px; }
.rc-thumb { height: 200px; background-size: cover; background-position: center; background-color: var(--navy);
  transition: transform .7s cubic-bezier(.22,.7,.3,1); position: relative; }
.rc-thumb::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease;
  background: linear-gradient(180deg, rgba(200,16,46,.16), rgba(11,44,99,.42)); }
.rc-card .rc-body::after { content: ""; display: block; width: 0; height: 3px; border-radius: 3px;
  background: var(--gold); margin-top: .7rem; transition: width .45s cubic-bezier(.22,.7,.3,1); }
.rc-body { padding: 1rem 1.2rem 1.3rem; }
.rc-body .tag { margin-bottom: .5rem; }
.rc-body h3 { font-family: var(--serif); font-size: 1.14rem; line-height: 1.28; color: var(--navy); margin: .1rem 0 .45rem; transition: color .3s ease; }
.rc-body p { font-size: .86rem; color: var(--muted); margin: 0 0 .6rem; line-height: 1.45; }
.rc-meta { font-size: .75rem; color: var(--faint); font-family: var(--sans); font-variant-numeric: tabular-nums; }
/* on a phone the side covers reach past the screen edge and widened the whole page (zooming it out);
   clip keeps the 3D perspective, where overflow: hidden would flatten it */
@media (max-width: 720px) { .rc-stage { height: 470px; overflow-x: clip; } }
@media (prefers-reduced-motion: reduce) { .rc-card { transition: none; } }

/* ============ KEY NUMBERS STRIP ============ */
.stat-strip-dh { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 760px) { .stat-strip-dh { grid-template-columns: repeat(2, 1fr); } }
.stat-big-cell { background: var(--paper); padding: 1.5rem 1.3rem; text-align: center; }
.stat-big { font-family: var(--sans); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--navy); }
.stat-label-dh { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; font-weight: 600; }

.sec-head-dh { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.sec-head-dh h2 { margin: 0; }
.sec-head-dh .more { font-size: .84rem; font-weight: 700; color: var(--teal-dark); }

/* ============ DATA EXPLORER ============ */
.explorer-shell { display: grid; grid-template-columns: 270px 1fr; gap: 1.2rem; align-items: start; padding: 1.2rem 1.4rem 3rem; max-width: 1400px; margin: 0 auto; }
@media (max-width: 980px) { .explorer-shell { grid-template-columns: 1fr; } }

.indicator-tree { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem; position: sticky; top: 5.2rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.tree-cat { border-bottom: 1px solid var(--line-soft); }
.tree-cat:last-child { border-bottom: 0; }
.tree-cat-header { display: flex; align-items: center; justify-content: space-between; padding: .65rem .3rem; cursor: pointer; font-weight: 700; font-size: .86rem; color: var(--navy); }
.tree-cat-header .icn { transition: transform .15s; color: var(--muted); }
.tree-cat.open .tree-cat-header .icn { transform: rotate(90deg); }
.tree-items { display: none; padding: 0 .2rem .6rem; }
.tree-cat.open .tree-items { display: block; }
.tree-item { display: flex; align-items: center; gap: .5rem; padding: .38rem .5rem; border-radius: 6px; font-size: .82rem; cursor: pointer; color: var(--ink); }
.tree-item:hover { background: var(--teal-soft); }
.tree-item.selected { background: var(--navy); color: #fff; font-weight: 600; }
.tree-item input { margin: 0; width: auto; accent-color: var(--teal); }

.map-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; }
.map-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
.map-panel-head h3 { margin: 0; }
.choropleth-wrap { position: relative; margin: 0 auto; max-width: 100%; transition: max-width .12s ease-out; }
.map-size-row { display: flex; align-items: center; gap: .7rem; margin: .3rem 0 .7rem; }
.map-size-row label { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; white-space: nowrap; }
.map-size-row input[type=range] { flex: 0 1 160px; accent-color: var(--teal); }
.map-size-row .mono { font-size: .875rem; width: 3.2em; }
.choropleth-wrap svg { width: 100%; height: auto; display: block; }
.choropleth-wrap path { stroke: var(--paper); stroke-width: 1.2; cursor: pointer; transition: opacity .1s; }
.choropleth-wrap path:hover { opacity: .82; stroke: var(--navy); stroke-width: 2; }
.choropleth-wrap path.focus-county { stroke: var(--gold); stroke-width: 3; }
.choropleth-wrap path.compare-county { stroke: var(--clay); stroke-width: 3; stroke-dasharray: 4 2; }
.map-tooltip { position: absolute; pointer-events: none; background: var(--navy); color: #fff; padding: .5rem .7rem; border-radius: 7px; font-size: .875rem; box-shadow: var(--shadow-lg); border-left: 3px solid var(--gold); transform: translate(-50%, -115%); white-space: nowrap; z-index: 20; display: none; }
.map-tooltip strong { display: block; font-size: .84rem; margin-bottom: .1rem; }
/* legend now sits in the panel head, top right, under the year */
.map-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex: 0 0 auto; }
.map-legend { display: flex; align-items: center; gap: .5rem; margin-top: 0; font-size: .75rem;
  color: var(--muted); flex: 0 0 auto; white-space: nowrap; }
.map-legend-bar { width: 96px; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #E1F1E4, #5DB377 50%, #1A5C38); flex: 0 0 auto; }
@media (max-width: 620px) { .map-head-right { align-items: flex-start; } }

.chart-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; margin-top: 1.1rem; }
.chart-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; flex-wrap: wrap; }
.year-range { display: flex; align-items: center; gap: .6rem; font-size: .875rem; color: var(--muted); }
.year-range input[type=range] { width: 160px; accent-color: var(--teal); margin: 0; }
.chart-dh { min-height: 260px; }
.chart-dh svg { display: block; width: 100%; height: auto; }
.compare-stat-row { display: flex; gap: .8rem; margin-top: .8rem; flex-wrap: wrap; }
.compare-stat-card { flex: 1; min-width: 160px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.compare-stat-card .lbl { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.compare-stat-card .val { font-family: var(--sans); font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.compare-stat-card.focus { border-left: 3px solid var(--gold); }
.compare-stat-card.compare { border-left: 3px solid var(--clay); }

.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; flex-wrap: wrap; }
.toolbar-actions { display: flex; gap: .5rem; }
.toolbar-actions button, .toolbar-actions a { display: inline-flex; align-items: center; gap: .4rem; }

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .86rem; box-shadow: var(--shadow); }
.data-table th { text-align: left; background: var(--navy); color: #E7EDF2; padding: .55rem .8rem; font-weight: 700; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; user-select: none; }
.data-table th.sortable:hover { background: var(--navy-600); }
.data-table th .sort-arrow { opacity: .5; margin-left: .3rem; font-size: .7em; }
.data-table td { padding: .5rem .8rem; border-top: 1px solid var(--line-soft); vertical-align: top; }
.data-table tr:hover td { background: var(--cream); }
.data-table .num, .data-table th.num { text-align: right; }
.data-table tr.unread td { background: var(--gold-soft); }
.yoy-up { color: var(--green); font-weight: 700; }
.yoy-down { color: var(--red); font-weight: 700; }
.yoy-flat { color: var(--muted); }
.flag { color: var(--clay); font-size: .8rem; font-weight: 600; }

/* ============ INDICATOR CATALOGUE ============ */
.catalogue-filters { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.catalogue-search { max-width: 340px; margin-bottom: 1rem; }
.cat-row { cursor: pointer; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(11,44,99,.4); z-index: 90; display: none; }
.drawer-overlay.open { display: block; }
.drawer-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); background: var(--paper); box-shadow: -8px 0 30px rgba(11,44,99,.2); z-index: 91; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; }
.drawer-overlay.open .drawer-panel { transform: translateX(0); }
.drawer-head { background: var(--navy); color: #fff; padding: 1.2rem 1.4rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.drawer-head h3 { color: #fff; margin: 0; }
.drawer-close { background: rgba(255,255,255,.12); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem; flex: 0 0 auto; }
.drawer-body { padding: 1.3rem 1.4rem; }
.drawer-meta-row { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--line-soft); font-size: .84rem; }
.drawer-meta-row .k { color: var(--muted); font-weight: 600; }
.drawer-meta-row .v { text-align: right; color: var(--navy); font-weight: 600; }

/* ============ DATA QUERY BUILDER ============ */
.query-layout { display: grid; grid-template-columns: 340px 1fr; gap: 1.4rem; align-items: start; margin-top: 1.2rem; }
@media (max-width: 900px) { .query-layout { grid-template-columns: 1fr; } }
.query-build-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; position: sticky; top: 1.2rem; }
.query-build-panel h3 { margin-bottom: 1rem; }
.query-range-row { display: flex; gap: .8rem; }
.query-range-row .selector-field { flex: 1; }
.format-toggle { display: flex; gap: .5rem; }
.format-opt { flex: 1; }
.format-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.format-opt span { display: block; text-align: center; padding: .5rem .4rem; border: 1px solid var(--line); border-radius: 7px; font-size: .82rem; font-weight: 600; color: var(--navy); cursor: pointer; }
.format-opt input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.query-build-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.3rem; }
.query-build-actions .btn { justify-content: center; }
.query-results-panel { min-width: 0; }
.code-block { background: var(--navy-800); color: #B9E4E4; padding: 1rem 1.1rem; border-radius: var(--radius); font-size: .8rem; overflow-x: auto; white-space: pre-wrap; border-left: 3px solid var(--gold); }
.query-preview-table { max-height: 400px; overflow: auto; }

/* multi-select dropdown additions (Data Query builder) */
.xdd-select-all { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-bottom: 1px solid var(--line); font-size: .84rem; font-weight: 600; color: var(--navy); cursor: pointer; }
.xdd-select-all input { width: auto; margin: 0; accent-color: var(--teal); }
.xdd-ms-item { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.xdd-ms-item input { width: auto; margin: 0; accent-color: var(--teal); flex: 0 0 auto; }
.xdd-footer { border-top: 1px solid var(--line); padding: .5rem .6rem; display: flex; justify-content: flex-end; }

/* ============ DASHBOARD TOPIC PAGE ============ */
.dash-hero-dh { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 1.8rem 2rem; margin-bottom: 1.4rem; }
.dash-hero-dh h1 { color: #fff; margin-bottom: .3rem; }
.dash-hero-dh p { color: #B9C7D3; margin: 0; max-width: 44em; }
.dash-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: rgba(255,255,255,.14); border-radius: var(--radius); overflow: hidden; margin-top: 1.2rem; }
.dash-hero-stats .cell { background: var(--navy-600); padding: .9rem 1rem; }
.dash-hero-stats .val { font-family: var(--sans); font-size: 1.4rem; font-weight: 700; color: var(--gold); }
.dash-hero-stats .lbl { font-size: .75rem; color: #B9C7D3; text-transform: uppercase; letter-spacing: .05em; margin-top: .2rem; }
.narrative-block { max-width: 720px; margin: 1.4rem 0; color: var(--ink); }
.ranking-bars { display: grid; gap: .5rem; }
.rank-row { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: .6rem; font-size: .82rem; }
.rank-bar-track { background: var(--navy-tint); border-radius: 5px; height: 16px; overflow: hidden; }
.rank-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--teal), var(--gold)); }
.rank-row.low .rank-bar-fill { background: linear-gradient(90deg, var(--clay), var(--navy)); }

/* ============ ABOUT ============ */
.faq-accordion { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 1rem .2rem; cursor: pointer; font-weight: 700; color: var(--navy); }
.faq-q .icn { transition: transform .15s; color: var(--muted); flex: 0 0 auto; }
.faq-item.open .faq-q .icn { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 .2rem 1rem; color: var(--muted); }
.faq-item.open .faq-a { display: block; }
.agency-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; margin: 1rem 0; }
.agency-tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; font-size: .84rem; font-weight: 600; color: var(--navy); }
.contact-form { max-width: 520px; }

/* ============ FOOTER ============ */
.footer-dh { background: var(--navy-800); color: #A9BCC9; margin-top: 3rem; }

/* ---- national seal at the head of the footer ----
   Centred above the columns, the way the Executive Mansion site sets it. The footer only
   takes the extra top padding when a seal is actually present, so nothing shifts on a site
   that has not supplied one. */
/* The space above the seal is the footer’s padding, not the image’s margin: the footer has
   no top border or padding of its own, so a margin on the child collapses straight through it
   and lands outside the navy instead of inside it. */
.footer-dh:has(.footer-seal) { padding-top: 2.4rem; }
.footer-dh:has(.footer-seal) .footer-grid { padding-top: 1.5rem; }
.footer-seal {
  display: block; width: 58px; height: auto; margin: 0 auto;
}
@media (max-width: 720px) {
  .footer-dh:has(.footer-seal) { padding-top: 1.9rem; }
  .footer-seal { width: 48px; }
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.4rem; padding: 2.4rem 1.4rem 1.6rem; max-width: 1240px; margin: 0 auto; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-dh h4 { color: #fff; font-family: var(--sans); font-size: .875rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .8rem; }
.footer-dh a { display: block; color: #A9BCC9; font-size: .86rem; margin-bottom: .45rem; }
.footer-dh a:hover { color: #fff; text-decoration: none; }
.footer-dh p { font-size: .84rem; color: #93A6B8; }
.footer-social { display: flex; gap: .6rem; margin-top: .8rem; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; margin: 0;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; }
.footer-social a svg { width: 17px; height: 17px; fill: #fff; display: block; }
.footer-social .s-fb { background: #1877F2; }
.footer-social .s-x { background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.footer-social .s-li { background: #0A66C2; }
.footer-social .s-ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.footer-social a:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 16px -6px rgba(0,0,0,.55); }
.footer-bottom-strip { border-top: 1px solid rgba(255,255,255,.1); padding: 1rem 1.4rem; }
.footer-bottom-inner { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-bottom-strip nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-bottom-strip nav a { font-size: .875rem; color: #93A6B8; }
.footer-credit { font-size: .75rem; color: #6E8194; max-width: 1240px; margin: .6rem auto 0; padding: 0 1.4rem; }

/* ============ INTERIOR CONTENT (public pages) ============ */
.kicker { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: .5rem; font-weight: 700; }
.lede-sm { color: var(--muted); max-width: 52em; margin-bottom: 1.4rem; }
.two-col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.4rem; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.panel, .chart-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; margin: 1rem 0; }
.chart-card { margin: 0; }
.panel h3, .chart-card h3 { display: flex; align-items: center; gap: .45rem; }
.headline { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.15rem; margin-bottom: .9rem; }
.headline-meta { display: flex; gap: .7rem; align-items: center; margin-bottom: .35rem; }
.paper-list { display: grid; gap: 1rem; margin-top: 1rem; }
.paper-card { display: flex; gap: 1.1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; align-items: flex-start; }
.paper-card .authors, .authors { color: var(--muted); font-size: .9rem; margin-bottom: .5rem; }
.paper-actions { display: flex; gap: 1.2rem; }
.pipeline { margin: .6rem 0 1rem 1.2rem; display: grid; gap: .45rem; }

/* report cover graphic + PDF badge */
.paper-cover-wrap { position: relative; flex: 0 0 auto; width: 84px; aspect-ratio: 4/5; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); }
.paper-cover-wrap .paper-cover { width: 100%; height: 100%; display: block; }
.pdf-badge { position: absolute; left: 6px; bottom: 6px; background: var(--gold); color: #fff; font-size: .58rem; font-weight: 800; letter-spacing: .04em; padding: .1rem .35rem; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.paper-card-body { min-width: 0; flex: 1; }
.paper-detail-head { display: flex; gap: 1.4rem; align-items: flex-start; margin-bottom: 1.4rem; }
.paper-cover-lg { flex: 0 0 auto; width: 190px; }
.pub-thumb-dh { position: relative; height: 130px; overflow: hidden; }
.pub-thumb-dh .paper-cover { width: 100%; height: 100%; display: block; }

/* KPI tiles (workspace) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: .9rem; margin: 1rem 0 1.4rem; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); border-top: 3px solid var(--teal); padding: .9rem 1rem; }
.kpi:nth-child(even) { border-top-color: var(--gold); }
.kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.kpi-value { font-size: 1.85rem; color: var(--navy); font-weight: 700; font-family: var(--sans); margin: .15rem 0; }
.kpi-unit { font-size: .875rem; color: var(--muted); }
.kpi-delta { font-size: .875rem; margin-top: .3rem; font-weight: 700; }
.kpi-delta.up, .up { color: var(--green); }
.kpi-delta.down, .down { color: var(--red); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; }
.portal-card { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.05rem 1.15rem; color: var(--ink); }
.portal-card:hover { text-decoration: none; transform: translateY(-2px); transition: transform .15s; box-shadow: var(--shadow-lg); }
.portal-card h3 { display: flex; align-items: center; gap: .55rem; }
.portal-card h3 .icn { color: var(--teal); }
.portal-card p { margin: 0; font-size: .86rem; color: var(--muted); }

/* auth */
.auth-wrap { display: flex; justify-content: center; padding: 3rem 1.4rem; }
.auth-card { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.8rem 2rem; max-width: 470px; width: 100%; }
.auth-card h1 { display: flex; align-items: center; gap: .5rem; font-size: 1.4rem; }
label { display: block; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--navy); margin: .8rem 0 .35rem; }
input, select, textarea { display: block; width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 7px; font-family: var(--sans); font-size: .9rem; background: #fff; color: var(--ink); }
input[type=checkbox] { display: inline-block; width: auto; accent-color: var(--teal); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
.alert { padding: .6rem .8rem; border-radius: 7px; margin: .8rem 0; font-size: .88rem; border: 1px solid; }
.alert-error { background: var(--clay-soft); color: #8a3d1e; border-color: #E3BBA0; }
.alert-ok { background: #E4ECF8; color: #175c3c; border-color: #B7DEC7; }
.demo-creds { margin-top: 1.1rem; font-size: .84rem; color: var(--muted); }
.demo-creds table { margin-top: .5rem; border-collapse: collapse; }
.demo-creds td { padding: .15rem .8rem .15rem 0; }

/* tables generic */
tr.unread td { background: var(--gold-soft); }

/* forms */
.grid-form { display: grid; gap: .1rem; }
.grid-form button { margin-top: .8rem; justify-self: start; }

/* messaging */
.thread { display: flex; flex-direction: column; gap: .7rem; margin: 1.2rem 0; }
.msg { max-width: 85%; padding: .7rem .9rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); }
.msg-user { align-self: flex-end; border-left: 3px solid var(--teal); }
.msg-admin { align-self: flex-start; border-left: 3px solid var(--gold); background: var(--gold-soft); }
.msg-head { font-size: .72rem; color: var(--muted); margin-bottom: .3rem; }
.msg-form { margin-top: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }

/* media */
.media-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 0 .9rem; overflow: hidden; }
.media-card h3, .media-card p, .media-card .media-meta { padding: 0 1rem; }
.media-card h3 { margin-top: .8rem; }
.media-card p { font-size: .86rem; color: var(--muted); }
.media-thumb { background: var(--navy-800); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-thumb.video iframe { width: 100%; height: 100%; border: 0; }
.video-placeholder { color: #7E93B5; text-align: center; }
.video-placeholder p { margin: .3rem 0 0; font-size: .8rem; padding: 0 1rem; }
.media-meta { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; }

/* API docs */
.api-block { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--navy-600); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1.1rem; margin: .9rem 0; }
.api-block pre { background: var(--navy-800); color: #BFD3F2; padding: .7rem .8rem; overflow-x: auto; font-size: .875rem; margin-top: .5rem; border-radius: 7px; white-space: pre-wrap; }

/* explorer legacy controls (data explorer form) */
.explorer-controls { display: flex; gap: 1.2rem; align-items: end; flex-wrap: wrap; margin-bottom: .8rem; }
.explorer-controls label { margin: 0; }
.explorer-controls select { width: auto; min-width: 220px; }

/* ============ APP SHELL (signed-in workspace) ============ */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .app { grid-template-columns: 64px 1fr; } .sb-label, .sb-user-info, .sb-brand-text, .sb-section-label { display: none; } .sb-item { justify-content: center; padding: .6rem; } }
/* sidebar — matches the top nav: navy/red, divided items, pressed active tab */
.sidebar { background: linear-gradient(180deg, #0B2C63 0%, #071A3E 100%); color: #C9D8F2; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 3px solid #C8102E; }
.sb-brand { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(180,205,245,.12); color: #fff; }
.sb-brand:hover { text-decoration: none; }
.sb-brand .mark { color: #C8102E; }
.sb-seal { flex: none; width: 38px; height: 38px; }
.sb-brand-text { line-height: 1.15; }
.sb-brand-text strong { display: block; font-size: .86rem; color: #fff; font-family: var(--serif); }
.sb-brand-text span { font-size: .75rem; letter-spacing: .12em; color: #8FA7CE; font-weight: 700; text-transform: uppercase; }
.sb-nav { flex: 1; padding: .5rem .6rem; display: flex; flex-direction: column; gap: 0; }
.sb-section-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: #6E86AE; padding: .9rem .6rem .3rem; font-weight: 700; }
.sb-item { display: flex; align-items: center; gap: .7rem; padding: .58rem .8rem; border-radius: 8px; color: #C9D8F2; font-size: .86rem; font-weight: 600; position: relative; transition: background .15s, box-shadow .15s; }
/* divider line between tabs */
.sb-item:not(:last-child)::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: -1px; height: 1px; background: rgba(180,205,245,.08); }
.sb-item .icn { width: 1.2em; height: 1.2em; flex: 0 0 auto; opacity: .9; }
.sb-item:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.sb-item:hover .icn { color: #FF6076; }
/* active tab — pressed/recessed with a red accent bar */
.sb-item.active { background: rgba(3,12,30,.55); color: #fff; box-shadow: inset 0 2px 6px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.05); }
.sb-item.active .icn { color: #FF4155; opacity: 1; }
.sb-item.active::before { content: ""; position: absolute; left: -6px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: #C8102E; box-shadow: 0 0 8px rgba(200,16,46,.6); }
.sb-item .badge { margin-left: auto; }
.sb-user { border-top: 1px solid rgba(180,205,245,.12); padding: .8rem .9rem; display: flex; align-items: center; gap: .7rem; }
.sb-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #C8102E; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; }
.sb-user-info { flex: 1; min-width: 0; }
.sb-user-info strong { display: block; font-size: .8rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-info span { font-size: .75rem; color: #8FA7CE; text-transform: capitalize; }
.sb-logout { color: #8FA7CE; background: none; border: 0; cursor: pointer; padding: .3rem; border-radius: 5px; font-size: 1rem; }
.sb-logout:hover { color: #fff; background: rgba(255,255,255,.08); }

.content { min-width: 0; display: flex; flex-direction: column; background: var(--cream); }
.content-topbar { background: #fff; border-bottom: 1px solid var(--line); padding: .7rem 1.6rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 5; }
.crumb { font-size: .875rem; color: var(--muted); }
.crumb strong { display: block; font-size: 1.05rem; color: var(--navy); font-family: var(--serif); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.role-chip { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .2rem .6rem; border-radius: 999px; background: var(--teal-soft); color: var(--teal-dark); }
.role-chip.admin { background: var(--gold-soft); color: #14448A; }
.page-body { padding: 1.5rem 1.6rem 2.5rem; max-width: 1280px; width: 100%; }

/* misc */
.result-block { margin-bottom: 1.6rem; }

/* ============ PAGE HEADER BANNERS ============ */
.page-header { position: relative; width: 100%; min-height: clamp(150px, 22vh, 230px);
  display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center;
  background-color: var(--navy); background-size: cover; background-position: center center; background-repeat: no-repeat;
  border-bottom: 3px solid var(--gold); }
.ph-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,18,44,.58) 0%, rgba(6,18,44,.68) 100%); }
.ph-inner { position: relative; z-index: 2; width: 100%; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.ph-inner h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.1; margin: 0;
  text-shadow: 0 2px 22px rgba(0,0,0,.55); }
.ph-inner p { color: #E4ECF8; margin: .6rem auto 0; max-width: 52em; font-size: .98rem;
  text-shadow: 0 1px 14px rgba(0,0,0,.55); }
@media (max-width: 620px) { .page-header { min-height: 130px; } }

/* header-6 has "CAREERS" baked into the artwork — frame the faces so only our overlay title reads */

/* ============ SUBMIT A PAPER ============ */
.sp-form .panel { margin-bottom: 1.2rem; }
/* .grid-form is single-column site-wide; the submit form pairs its short fields up.
   The full-width fields already carry grid-column:1/-1, which this makes meaningful. */
@media (min-width: 720px) { .sp-form .grid-form { grid-template-columns: 1fr 1fr; column-gap: 1.1rem; } }
.sp-form .panel > h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin-bottom: .3rem; }
.sp-form .panel > h2 .icn { color: var(--teal); width: 20px; height: 20px; }
.sp-form .panel > .muted { margin-bottom: .4rem; font-size: .86rem; }
.sp-req { color: var(--gold); font-weight: 700; }
.sp-hint { display: block; font-size: .72rem; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--muted); margin-top: .25rem; }
.sp-hint-inline { font-size: .75rem; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--muted); }
.sp-form input.has-error, .sp-form textarea.has-error, .sp-form select.has-error {
  border-color: var(--gold); background: var(--gold-soft); }
.sp-consent { border-left: 3px solid var(--gold); }
.sp-check { display: flex; gap: .6rem; align-items: flex-start; text-transform: none;
  letter-spacing: 0; font-size: .88rem; font-weight: 400; color: var(--ink); margin: 0; }
.sp-check input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: .15rem; }
.sp-actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }
.sp-done h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.2rem; margin-bottom: .7rem; }
.sp-done h2 .icn { color: var(--teal); }
.sp-done p { margin-bottom: .7rem; }

/* ============ NUMERALS ============
   One face for every figure on the site: the text face's own tabular figures, so numbers and
   words share one voice. Point --num elsewhere to change it everywhere (and load the family in
   FONT_HEAD in views.js). */
:root { --num: var(--sans); }

/* headline figures */
.stat-big, .kpi-value, .compare-stat-card .val, .dash-hero-stats .val,
.rank-row .val, .career-openings strong {
  font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* tabular figures — numeric cells, year pickers, map read-outs, chart labels */
.data-table .num, .data-table td.num,
.year-range, .year-range span, #year-slider-val, #map-year-label, #map-zoom-val,
#trend-scope, .map-legend, .rank-row, .kpi-delta, .kpi-unit, .headline-meta .mono {
  font-family: var(--num); font-variant-numeric: tabular-nums; }

/* charts render their axis and value labels as SVG <text> */
.chart-dh text, .chart-card text, .chart-panel svg text, #choropleth text {
  font-family: var(--num); }

/* The seven-segment figures belong to the data displays alone: the maps and charts (their SVG, legends,
   read-outs and tips) and the snapshot and landscape figures beside them. Inside these, every figure set
   with --num turns digital; everywhere else a number is set in the words' own face. */
.dx-svg, #choropleth, .chart-dh, .chart-card, .chart-panel, .map-legend, .dx-legend, .dx-readout, .dx-tip,
.dx-stat-val, .dx-stat-cmp, .lsc-svg, .lsc-chart, .lsc-tip, .lsc-card { --num: var(--digits); }
.dx-svg, #choropleth svg, .chart-dh svg, .chart-card svg, .chart-panel svg, .lsc-svg, .lsc-chart svg,
.map-legend, .dx-legend, .dx-tip { font-family: var(--digits); }

/* ============ DATA EXPLORER — black type (the map keeps its own palette) ============ */
.dx-black,
.dx-black h1, .dx-black h2, .dx-black h3, .dx-black h4,
.dx-black p, .dx-black li, .dx-black label, .dx-black span, .dx-black strong,
.dx-black td, .dx-black .muted, .dx-black .kicker, .dx-black .mono,
.dx-black .tree-item, .dx-black .tree-cat-header, .dx-black .selector-field label,
.dx-black .xdd-trigger, .dx-black .xdd-item, .dx-black .xdd-group-label,
.dx-black .toolbar-actions .btn, .dx-black .year-range, .dx-black .map-size-row label {
  color: #000; }

/* Deliberately untouched so the map reads as before: the choropleth SVG (its counties
   are painted with fill, not color), the legend ramp, and the dark hover tooltip.
   Table headers stay white-on-navy — `th` is not in the list above. */
.dx-black .map-tooltip, .dx-black .map-tooltip *,
.dx-black .map-legend, .dx-black .map-legend * { color: revert-layer; }
.dx-black .map-tooltip, .dx-black .map-tooltip strong { color: #fff; }
.dx-black .map-legend { color: var(--muted); }
.dx-black #choropleth text { fill: revert-layer; }

/* keep the state colours that carry meaning */
.dx-black .yoy-up, .dx-black .up { color: var(--green); }
.dx-black .yoy-down, .dx-black .down { color: var(--red); }
.dx-black .tree-item.selected span { color: var(--teal-dark); }
.dx-black a:not(.btn):hover { color: var(--teal-dark); }

/* ============ NAV: bordered bar + flag mark ============ */
.nav-shell { border: 1px solid #000; }
.liberia-flag { display: block; border-radius: 2px; }

/* ============ DATA EXPLORER — extra visuals beneath the trend ============ */
.viz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.1rem; }
@media (max-width: 1100px) { .viz-grid { grid-template-columns: 1fr; } }
.viz-grid .chart-card { margin: 0; }
.viz-grid .chart-panel-head { margin-bottom: .5rem; }
.viz-grid .chart-dh svg { width: 100%; height: auto; display: block; }
.viz-heat-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.viz-heat-wrap svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }

/* ============ SHARED: deep-black page type ============ */
/* Same treatment the About page uses, for the ICT Reports and Research Papers pages.
   Table headers (white on navy) and .tag chips keep their own colours. */
.page-black,
.page-black h1, .page-black h2, .page-black h3, .page-black h4,
.page-black p, .page-black li, .page-black label, .page-black span, .page-black strong,
.page-black td, .page-black .muted, .page-black .lede-sm, .page-black .kicker,
.page-black .authors, .page-black .fp-meta, .page-black .mono,
.page-black .paper-card-body, .page-black .fp-body { color: #000; }
.page-black .tag { color: var(--teal-dark); }
.page-black th { color: #E7EDF2; }
.page-black a:not(.btn) { color: #000; text-decoration: underline; text-underline-offset: 2px; }
.page-black a:not(.btn):hover { color: var(--teal-dark); }
.page-black .btn, .page-black .btn span { text-decoration: none; }
/* card titles are links too; underlining every one of them reads as noise */
.page-black h1 a, .page-black h2 a, .page-black h3 a, .page-black h4 a { text-decoration: none; }
.page-black h1 a:hover, .page-black h2 a:hover, .page-black h3 a:hover, .page-black h4 a:hover { text-decoration: underline; }
.page-black .btn-teal, .page-black .btn-teal span, .page-black .btn-gold, .page-black .btn-gold span { color: #fff; }

/* ============ FILTER BAR ============
   One component wherever the app filters a list. Row one is the controls; row two
   states what is applied and how much of the list survives it, so a filter is never
   silently on. Used on ICT Reports, Research Papers, Careers and Our Partners. */
.fbar { background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(11,44,99,.04), 0 8px 24px rgba(11,44,99,.07);
  padding: .95rem 1.05rem .8rem; margin-bottom: 1.5rem; }
/* flex-end, not center: the facet carries a label above its select, so it is taller than the
   search box and the buttons. Centring pushed the select down against them; aligning the
   bottoms puts every control on one line with the label sitting above. */
.fbar-controls { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }

/* search */
.fbar-search { display: flex; align-items: center; gap: .6rem; flex: 1 1 300px; min-width: 0;
  min-height: 42px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  padding: .1rem .9rem; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.fbar-search:focus-within { background: #fff; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(28,91,184,.12); }
.fbar-search > .icn { flex: 0 0 auto; width: 17px; height: 17px; color: var(--faint); }
.fbar-search input { border: 0; background: transparent; box-shadow: none; flex: 1; min-width: 0;
  padding: .58rem 0; font-size: .89rem; color: var(--ink); }
.fbar-search input:focus { outline: none; }
.fbar-search input::placeholder { color: var(--faint); }

/* facet select */
.fbar-facet { display: flex; flex-direction: column; gap: .18rem; margin: 0; flex: 0 0 auto; }
.fbar-facet-label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; padding-left: .1rem; }
.fbar-select { position: relative; display: block; }
.fbar-select select { appearance: none; -webkit-appearance: none; margin: 0;
  min-width: 168px; padding: .42rem 2.1rem .42rem .8rem; font-size: .85rem; font-weight: 600;
  color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 9px;
  cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; }
.fbar-select select:hover { border-color: var(--teal); }
.fbar-select select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(28,91,184,.12); }
.fbar-caret { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%) rotate(90deg);
  width: .62em; height: .62em; color: var(--muted); pointer-events: none; stroke-width: 3; }

/* buttons */
.fbar-go { display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto; cursor: pointer;
  background: var(--teal); color: #fff; border: 1px solid var(--teal); border-radius: 9px;
  padding: .55rem 1.15rem; font-family: var(--sans); font-size: .85rem; font-weight: 700;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.fbar-go:hover { background: var(--teal-dark); border-color: var(--teal-dark);
  box-shadow: 0 4px 12px rgba(28,91,184,.3); }
.fbar-go:active { transform: translateY(1px); }
.fbar-go .icn { width: 1em; height: 1em; stroke-width: 2.4; }
.fbar-clear { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; cursor: pointer;
  background: none; border: 0; padding: .55rem .5rem; font-family: var(--sans);
  font-size: .82rem; font-weight: 600; color: var(--muted); transition: color .18s ease; }
.fbar-clear:hover { color: var(--gold); }
.fbar-clear .icn { width: .95em; height: .95em; stroke-width: 2.2; transition: transform .4s ease; }
.fbar-clear:hover .icn { transform: rotate(-180deg); }

/* applied-state row */
.fbar-foot { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line-soft); }
.fbar-active { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-width: 0; }
.fbar-funnel { width: .95em; height: .95em; color: var(--faint); flex: 0 0 auto; }
.fbar-active-label { font-size: .72rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.fbar-chip { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: var(--teal-soft); color: var(--teal-dark); border: 1px solid #C9DCF5;
  border-radius: 999px; padding: .22rem .6rem .22rem .7rem; font-family: var(--sans);
  font-size: .75rem; font-weight: 700; max-width: 20rem;
  transition: background .16s ease, border-color .16s ease, color .16s ease; }
.fbar-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbar-chip i { font-style: normal; font-size: 1.05em; line-height: 1; opacity: .65; }
.fbar-chip:hover { background: var(--gold-soft); border-color: #EFC0C0; color: var(--gold); }
.fbar-chip:hover i { opacity: 1; }
.fbar-count { margin-left: auto; font-size: .875rem; color: var(--muted); white-space: nowrap; }
.fbar-count b { font-family: var(--num); color: var(--navy); font-weight: 700; }
.fbar-count.is-empty b { color: var(--gold); }

@media (max-width: 720px) {
  .fbar-controls { gap: .55rem; }
  .fbar-search { flex-basis: 100%; }
  .fbar-facet { flex: 1 1 auto; }
  .fbar-select select { min-width: 0; width: 100%; }
  .fbar-go { flex: 1 1 auto; justify-content: center; }
  .fbar-count { margin-left: 0; width: 100%; }
}

/* ---- the pill variant (Research): one large live search, the year as pills, a live count.
   Interactive things are pills (the shelf's rule); the panel is 20px like the shelf's stages. Navy
   carries state, red only the focus ring. Wins over the thin-black-outline rule further down. */
.fbar.fbar--pills { margin: 0 0 1.6rem; padding: 1.1rem 1.15rem 1rem; border: 0; border-radius: 20px; background: #fff;
  box-shadow: 0 1px 0 rgb(11 44 99 / .06), 0 22px 44px -26px rgb(11 44 99 / .4); }
.fbar--pills .fbar-row { display: flex; align-items: center; gap: 1.25rem; }
.fbar--pills .fbar-search { flex: 1 1 auto; min-height: 54px; padding: 0 .6rem 0 1.15rem; gap: .75rem;
  border: 1px solid rgb(11 44 99 / .16); border-radius: 999px; background: #F4F6FA; }
.fbar--pills .fbar-search:hover { border-color: rgb(11 44 99 / .32); }
.fbar--pills .fbar-search:focus-within { background: #fff; border-color: #0B2C63; box-shadow: 0 0 0 4px rgb(11 44 99 / .1); }
.fbar--pills .fbar-search > .icn { width: 19px; height: 19px; color: #0B2C63; }
.fbar--pills .fbar-search input { padding: .9rem 0; font-size: 1rem; color: #0E1A33; }
.fbar--pills .fbar-search input::placeholder { color: #5A6A85; }
.fbar--pills .fbar-search input::-webkit-search-cancel-button { cursor: pointer; }
.fbar-kbd { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 1.75rem; height: 1.75rem; padding: 0 .45rem;
  border: 1px solid rgb(11 44 99 / .18); border-bottom-width: 2px; border-radius: 8px; background: #fff;
  color: #5A6A85; font: 600 .8rem/1 var(--sans); transition: opacity .2s ease; }
.fbar--pills .fbar-search:focus-within .fbar-kbd { opacity: 0; }
.fbar--pills .fbar-count { flex: 0 0 auto; margin: 0; font-size: .92rem; color: #5A6A85; white-space: nowrap; }
.fbar--pills .fbar-count b { font-size: 1.08rem; color: #0B2C63; font-variant-numeric: tabular-nums; }
.fbar--pills .fbar-count.is-empty b { color: #C8102E; }
.fbar-pills { display: flex; align-items: center; gap: .45rem; margin-top: .9rem; overflow-x: auto; scrollbar-width: none; }
.fbar-pills::-webkit-scrollbar { display: none; }
.fbar-pill { flex: 0 0 auto; height: 2.3rem; padding: 0 1.05rem; border: 1px solid rgb(11 44 99 / .16); border-radius: 999px;
  background: #fff; color: #0B2C63; font: 600 .86rem/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .15s ease; }
.fbar-pill:hover { border-color: #0B2C63; }
.fbar-pill.is-on { background: #0B2C63; border-color: #0B2C63; color: #fff; }
.fbar-pill:active { transform: translateY(1px); }
.fbar-pill:focus-visible, .fbar--pills .fbar-clear:focus-visible { outline: 2px solid #C8102E; outline-offset: 2px; }
.fbar--pills .fbar-clear { margin-left: auto; padding: .5rem .3rem; color: #5A6A85; font-size: .85rem; }
.fbar--pills .fbar-clear:hover { color: #C8102E; }
/* .fbar-clear sets display, which would otherwise override the hidden attribute (here and on the classic bar) */
.fbar-clear[hidden] { display: none; }
@media (hover: none) { .fbar-kbd { display: none; } }
@media (max-width: 720px) {
  .fbar.fbar--pills { padding: .9rem; }
  .fbar--pills .fbar-row { flex-wrap: wrap; gap: .6rem; }
  .fbar--pills .fbar-search { flex-basis: 100%; }
  .fbar--pills .fbar-count { order: 3; width: 100%; margin-top: .1rem; }
  .fbar-pills { flex-wrap: wrap; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .fbar-pill, .fbar-kbd { transition: none; } }

.lib-empty { margin-top: 1rem; padding: 1.1rem; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius); }

/* photographic report covers */
.rp-cover { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* ============ HOME: entry animation + marquee rows + black body text ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* marquee rows: no visible scrollbar, no snapping (it fights the drift) */
.fp-track { scroll-snap-type: none; scrollbar-width: none; -ms-overflow-style: none; }
.fp-track::-webkit-scrollbar { height: 0; width: 0; }
.fp-card { scroll-snap-align: none; }

/* below the hero, body copy on the home page reads black */
#featuredPapers, #natReports, #homeVideo, #latestUpdates { color: #000; }
#featuredPapers h2, #natReports h2, #homeVideo h2, #latestUpdates h2,
#featuredPapers h3, #natReports h3, #homeVideo h3, #latestUpdates h3,
#featuredPapers h4, #natReports h4, #latestUpdates h4,
.fp-body h4, .rc-body h3, .vid-now { color: #000; }
#featuredPapers .muted, #natReports .muted, #homeVideo .muted, #latestUpdates .muted,
.fp-meta, .rc-body p, .rc-meta { color: #3A3A3A; }
#featuredPapers .more, #natReports .more, #latestUpdates .more { color: #000; }
#featuredPapers .more:hover, #natReports .more:hover, #latestUpdates .more:hover { color: var(--gold); }
/* keep the hover transitions, just re-based on black */
.fp-card:hover h4, .rc-card.is-active:hover .rc-body h3 { color: var(--gold); }

/* hero slide 1: lift the block, larger title, smaller supporting line */
.hs-content { padding-bottom: 11vh; }
.hs-text:not(.is-quote) h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.04; margin-bottom: .7rem; }
.hs-sub { color: #E4ECF8; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 500; max-width: 40em;
  margin: 0; text-shadow: 0 1px 14px rgba(0,0,0,.5); }

/* ============ THIN BLACK OUTLINES (Data Explorer + Research library) ============ */
/* Data Explorer: selector row, its three dropdowns, the indicator tree and the map panel */
.dx-black.sticky-selector { border-bottom: 1px solid #000; }
.dx-black .xdd-trigger { border: 1px solid #000; }
.dx-black .map-panel { border: 1px solid #000; }

/* Research library: the filter bar and each paper card carry the thin black outline */
.fbar { border: 1px solid #000; }
.fbar-search { border: 1px solid #000; }
.fbar-select select { border: 1px solid #000; }
.paper-card { border: 1px solid #000; }
/* keep the cover's own outline clear of the card edge */
.paper-card .paper-cover-wrap { border: 1px solid #000; margin: 1px; }
.paper-card .tag { border: 1px solid #000; }

/* ============ CAREERS: a precision instrument (reference: Sharplink, pinned by the user) ============
   Square edges everywhere, light-weight Public Sans headlines, uppercase micro-type for labels and
   buttons, one electric accent. The sections run black, NICTD blue, ice; the chrome star
   (careers.js) is a fixed WebGL layer painted between the section grounds and the content, and
   clip-path keeps it inside the page. Shared by /careers and /careers/apply/<role>. */
.cs { --cs-ink: #0B0F17; --cs-ink2: #3B4759; --cs-black: #05070C; --cs-navy: #0B1E45; --cs-blue: #2F66D8;
  --cs-paper: #F4F6F8; --cs-line-d: rgb(255 255 255 / .14); --cs-line-l: rgb(11 30 69 / .14); --cs-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative; isolation: isolate; clip-path: inset(0); margin-bottom: -3rem;   /* the footer's 3rem top margin, cancelled */
  color: #fff; background: var(--cs-black); font-family: var(--sans); }
.cs h1, .cs h2, .cs h3 { font-family: var(--sans); font-weight: 300; color: inherit; letter-spacing: -.03em; }
.cs h3 { font-weight: 400; }
:where(.cs) p { margin: 0; }
.cs a { color: inherit; }
.cs a:hover { text-decoration: none; }
.cs :focus-visible { outline: 2px solid var(--cs-blue); outline-offset: 3px; }
.cs ::selection { background: var(--cs-blue); color: #fff; }
.cs-star { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; opacity: 0; transition: opacity 1s var(--cs-ease); }
.cs-star.is-ready { opacity: 1; }
.cs-wrap { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 0 clamp(1.15rem, 2.4vw, 1.9rem); }

/* letters arrive in random order: careers.js splits the line and staggers each letter's delay */
.cs-line { display: block; text-wrap: balance; }
.cs-w { display: inline-block; white-space: nowrap; }
.cs-c { opacity: 0; transition: opacity .32s linear; }
.cs-line.is-in .cs-c { opacity: 1; }
.cs-dim { color: rgb(255 255 255 / .52); }
.cs-mark { display: block; width: 6px; height: 6px; margin-bottom: 1.2rem; background: var(--cs-blue); }

/* buttons: a white label with its own blue arrow tab; a translucent dark one; a light one */
.cs-btn { display: inline-flex; align-items: stretch; gap: 3px; height: 2.55rem; font: 500 .72rem/1 var(--sans); letter-spacing: .11em;
  text-transform: uppercase; white-space: nowrap; transition: transform .15s ease; }
.cs-btn > span { display: flex; align-items: center; padding: 0 1.05rem; background: #fff; color: var(--cs-ink); transition: background .25s var(--cs-ease); }
.cs-btn > i { display: grid; place-items: center; width: 2.55rem; overflow: hidden; background: var(--cs-blue); color: #fff; font-style: normal; }
.cs-btn > i .icn { font-size: 1rem; transition: transform .35s var(--cs-ease); }
.cs-btn:hover > span { background: #E2E9F6; }
.cs-btn:hover > i .icn { transform: translateX(3px); }
.cs-btn:active { transform: translateY(1px); }
.cs-btn-dark > span { background: rgb(255 255 255 / .1); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cs-btn-dark:hover > span { background: rgb(255 255 255 / .18); }
.cs-btn-light > span { background: rgb(11 30 69 / .07); color: var(--cs-ink); }
.cs-btn-light:hover > span { background: rgb(11 30 69 / .13); }
.cs-btn-ink > span { background: var(--cs-ink); color: #fff; }
.cs-btn-ink:hover > span { background: #1D2636; }
.cs-btn-sm { height: 2.25rem; }
.cs-btn-sm > i { width: 2.25rem; }
.cs-ctas { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---- opening */
.cs-hero { display: flex; min-height: calc(100svh - var(--nav-h)); background: linear-gradient(180deg, #05070C 0%, #07112A 44%, #0E2A62 80%, #1A438F 100%); }
.cs-hero-in { flex: 1; display: grid; grid-template-rows: auto auto 1fr auto; padding-top: clamp(3rem, 8vh, 5.5rem); padding-bottom: clamp(2rem, 6vh, 3.5rem); }
.cs-h1 { max-width: 15em; margin: 0 0 2.1rem; font-size: clamp(2.3rem, 3.7vw, 3.9rem); line-height: 1.04; letter-spacing: -.035em; }
.cs-hero-sub { align-self: end; max-width: 25rem; margin-top: 3rem; font-size: 1.02rem; line-height: 1.55; color: rgb(255 255 255 / .82); }

/* the careers hero film: the work itself (Monrovia from the air, field interviews, the team) under a
   navy scrim that holds the words on the left and settles into the mission's blue at the foot. The hero
   is positioned for the film, so it covers the seal's canvas; the seal stays hidden here (data-star
   "film" has no pose) and first arrives with the roles. careers.js fades the film in once it plays. */
.cs-hero--film { position: relative; overflow: hidden; background: #05070C; }
.cs-film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%; }
.cs-film-scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(5 7 12 / .8) 0%, rgb(5 7 12 / .5) 36%, rgb(5 7 12 / .12) 66%, rgb(5 7 12 / 0) 100%),
    linear-gradient(180deg, rgb(5 7 12 / .5) 0%, rgb(5 7 12 / 0) 24%, rgb(5 7 12 / 0) 58%, rgb(14 42 98 / .72) 88%, #1A438F 100%); }
.cs-hero--film .cs-dim { color: rgb(255 255 255 / .74); }
.cs-hero--film .cs-hero-sub { color: #fff; text-shadow: 0 1px 14px rgb(5 7 12 / .5); }
.cs.is-armed .cs-film { opacity: 0; transition: opacity 1.6s var(--cs-ease); }
.cs.is-armed .cs-film.is-playing { opacity: 1; }
@media (max-width: 860px) {
  .cs-film-scrim { background: linear-gradient(180deg, rgb(5 7 12 / .72) 0%, rgb(5 7 12 / .45) 45%, rgb(14 42 98 / .7) 82%, #1A438F 100%); }
}

/* ---- the same opening on the two news-style pages (listHero in views.js): a little shorter than a full
   screen, so the list's first story is in reach, and the list starts right under it. A photograph drifts
   under a slow camera move. On a phone the hero is only as tall as its words. */
.cs.lh { margin-bottom: 0; background: none; }
.lh-hero { min-height: calc(86svh - var(--nav-h)); }
.lh-still { background: center / cover no-repeat; transform-origin: 64% 42%; animation: lh-drift 28s ease-in-out infinite alternate; will-change: transform; }
@keyframes lh-drift { from { transform: scale(1.03); } to { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); } }
/* the words sit over busy footage (a city from the air), so the scrim holds a little more on the left */
.lh-hero .cs-film-scrim {
  background:
    linear-gradient(90deg, rgb(5 7 12 / .86) 0%, rgb(5 7 12 / .6) 36%, rgb(5 7 12 / .16) 66%, rgb(5 7 12 / 0) 100%),
    linear-gradient(180deg, rgb(5 7 12 / .5) 0%, rgb(5 7 12 / 0) 24%, rgb(5 7 12 / 0) 58%, rgb(14 42 98 / .72) 88%, #1A438F 100%); }
#rpList, #nuList { scroll-margin-top: calc(var(--nav-h) + 1rem); }
@media (min-width: 1260px) { .lh + .bbc-page { padding-top: .9rem; } }
@media (prefers-reduced-motion: reduce) { .lh-still { animation: none; } }
@media (max-width: 860px) {
  .lh-hero { min-height: 0; }
  .lh-hero .cs-hero-in { padding-bottom: 1.5rem; }
  .lh-hero .cs-hero-sub { margin-top: 1.5rem; }
  .lh-hero .cs-film-scrim { background: linear-gradient(180deg, rgb(5 7 12 / .8) 0%, rgb(5 7 12 / .55) 45%, rgb(14 42 98 / .74) 82%, #1A438F 100%); }
}

/* ---- who the work is for */
.cs-mission { padding: clamp(6rem, 14vh, 9rem) 0 clamp(4rem, 10vh, 7rem); color: var(--cs-ink);
  background: linear-gradient(180deg, #1A438F 0%, #8FADDC 5%, #D3DFEF 11%, #EDF2F7 40%, var(--cs-paper) 100%); }
.cs-h2 { max-width: 20em; margin: 0 0 2.4rem; font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: 1.1; }
/* the people, as the reference sets its portraits: black and white on a blue ground. Only the
   photo's top band is shown: the lower half of this image carries banner words */
.cs-people { position: relative; overflow: hidden; margin: 0 0 3.4rem; aspect-ratio: 5.4 / 1; background: linear-gradient(180deg, #2F66D8 0%, #9DB9E6 100%); }
.cs-people img { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; mix-blend-mode: luminosity; filter: grayscale(1) contrast(1.12) brightness(1.04); }
.cs-people::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgb(255 255 255 / .14) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }
.cs-rows { margin: 0; }
.cs-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); column-gap: 2rem; padding: 2.2rem 0; border-top: 1px solid var(--cs-line-l); }
.cs-row dt { margin-top: .32rem; }
.cs-row dd { max-width: 40rem; margin: 0; font-size: clamp(1.02rem, 1.25vw, 1.16rem); line-height: 1.62; color: var(--cs-ink); }
.cs-tag::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 .45rem .1rem 0; vertical-align: middle; background: var(--cs-blue); }
.cs-tag { display: inline-block; padding: .3rem .45rem; background: var(--cs-ink); color: #fff; font: 500 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

/* ---- the open roles: a pinned-object list, the lit role at the centre of the screen */
.cs-roles { padding: clamp(7rem, 16vh, 10rem) 0 clamp(5rem, 12vh, 8rem);
  background: linear-gradient(180deg, var(--cs-paper) 0%, #9DB6DE 3%, #3563B3 8%, #173A7E 32%, #0A1A3E 62%, var(--cs-black) 88%); }
.cs-roles-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.cs-roles-head .cs-h2 { margin: 0; }
.cs-count { font-size: .95rem; color: rgb(255 255 255 / .62); font-variant-numeric: tabular-nums; }
.cs-list { margin: 0; padding: 0; list-style: none; }
.cs-role { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 5fr); column-gap: 2rem; padding: clamp(2.6rem, 7vh, 4.5rem) 0;
}
.cs-role :is(.cs-role-t, .cs-role-m, .cs-role-r p) { transition: opacity .55s var(--cs-ease); }
.cs.is-armed .cs-role :is(.cs-role-t, .cs-role-m, .cs-role-r p) { opacity: .36; }
.cs.is-armed .cs-role:hover :is(.cs-role-t, .cs-role-m, .cs-role-r p) { opacity: .72; }
.cs.is-armed .cs-role:is(.is-on, :focus-within) :is(.cs-role-t, .cs-role-m, .cs-role-r p) { opacity: 1; }
.cs-role-t { margin: 0 0 .95rem; font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.12; letter-spacing: -.025em; }
.cs-role-m { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font: 500 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .72); }
.cs-role-r p { max-width: 26rem; margin: .3rem 0 1.4rem; font-size: .98rem; line-height: 1.62; color: rgb(255 255 255 / .88); }

/* ---- black: the star turns to a dashed wireframe here */
.cs-dark { padding: clamp(4rem, 10vh, 7rem) 0; background: linear-gradient(180deg, var(--cs-black) 0%, var(--cs-black) 78%, var(--cs-navy) 100%); }
.cs-dark-in { display: flex; flex-direction: column; justify-content: center; gap: 2.4rem; min-height: 72vh; padding-top: 3rem; padding-bottom: 3rem; }
.cs-dark-in > :not(.cs-frame) { margin-left: clamp(1rem, 3vw, 2.6rem); }
.cs-frame { position: absolute; inset: 0 clamp(1.15rem, 2.4vw, 1.9rem); border: 1px dashed rgb(255 255 255 / .12); pointer-events: none; }
.cs-frame::before, .cs-frame::after { content: ''; position: absolute; top: -3px; bottom: -3px; width: 5px; pointer-events: none;
  background: linear-gradient(var(--cs-blue), var(--cs-blue)) top / 5px 5px no-repeat, linear-gradient(var(--cs-blue), var(--cs-blue)) bottom / 5px 5px no-repeat; }
.cs-frame::before { left: -3px; }
.cs-frame::after { right: -3px; }
.cs-h2-lg { max-width: 18em; margin: 0; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1.12; }

/* ---- how joining works */
.cs-join { padding: clamp(7rem, 16vh, 10rem) 0 clamp(4rem, 10vh, 6rem); color: var(--cs-ink);
  background: linear-gradient(180deg, var(--cs-navy) 0%, #6E92CF 5%, #C8D7EB 12%, #EDF2F7 40%, var(--cs-paper) 100%); }
.cs-steps { display: grid; gap: 2.6rem; max-width: 36rem; margin: 0; padding: 0; list-style: none; }
.cs-steps li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.cs-step-ic { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border: 1px dashed rgb(11 30 69 / .4); color: var(--cs-ink); }
.cs-step-ic .icn { font-size: 1.45rem; stroke-width: 1.3; stroke-dasharray: 2.2 1.8; }
.cs-steps h3 { margin: 0 0 .35rem; font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em; }
.cs-steps p { font-size: .97rem; line-height: 1.62; color: var(--cs-ink2); }

/* ---- FAQ */
.cs-faq { padding: clamp(4rem, 10vh, 6.5rem) 0 clamp(5rem, 12vh, 8rem); color: var(--cs-ink); background: var(--cs-paper); }
.cs-faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem; }
.cs-faq-head { display: flex; flex-direction: column; align-items: flex-start; }
.cs-h2-xl { margin: 0 0 1.6rem; font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: 1; }
.cs-faq-more { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; font: 500 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.cs-faq-list { display: grid; gap: 3px; }
.cs-q { background: rgb(11 30 69 / .05); transition: background .25s ease; }
.cs-q:hover, .cs-q[open] { background: rgb(11 30 69 / .075); }
.cs-q summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; min-height: 3.6rem; padding: .7rem .9rem;
  cursor: pointer; list-style: none; }
.cs-q summary::-webkit-details-marker { display: none; }
.cs-q-n { display: inline-flex; align-items: center; gap: .32rem; padding: .28rem .42rem; background: rgb(11 30 69 / .08); color: var(--cs-ink2);
  font: 500 .7rem/1 var(--sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.cs-q-n::before { content: ''; width: 4px; height: 4px; background: currentColor; }
.cs-q-t { font-size: 1rem; line-height: 1.4; }
.cs-q-x { position: relative; width: 1.7rem; height: 1.7rem; background: var(--cs-ink); }
.cs-q-x::before, .cs-q-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1.5px; background: #fff;
  transform: translate(-50%, -50%); transition: transform .35s var(--cs-ease); }
.cs-q-x::after { transform: translate(-50%, -50%) rotate(90deg); }
.cs-q[open] .cs-q-x::after { transform: translate(-50%, -50%); }
.cs-q-a { overflow: hidden; }
.cs-q-a p { max-width: 40rem; padding: .2rem 3.6rem 1.3rem 4.1rem; font-size: .97rem; line-height: 1.62; color: var(--cs-ink2); }

/* ---- the close: the name, large, rising out of the light into the footer's navy */
.cs-outro { position: relative; overflow: hidden; height: clamp(15rem, 32vw, 29rem);
  background: linear-gradient(180deg, var(--cs-paper) 0%, #B5C9E6 34%, #3D69B8 70%, var(--navy-800) 100%); }
.cs-word { position: absolute; left: 50%; bottom: -.16em; transform: translateX(-50%); color: rgb(255 255 255 / .92); white-space: nowrap;
  font: 500 clamp(9rem, 31vw, 30rem)/.8 var(--sans); letter-spacing: -.06em;
  -webkit-mask-image: linear-gradient(180deg, #000 18%, transparent 92%); mask-image: linear-gradient(180deg, #000 18%, transparent 92%);
  transition: transform 1.3s var(--cs-ease), opacity 1.3s var(--cs-ease); }
.cs.is-armed .cs-outro:not(.is-in) .cs-word { opacity: 0; transform: translate(-50%, 22%); }

/* paragraph words fill as they scroll through, where the browser has scroll timelines */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cs [data-fill] { view-timeline: --cs-fill block; }
    .cs .cs-fw { animation: cs-fill linear both; animation-timeline: --cs-fill;
      animation-range: cover calc(14% + var(--p) * 30%) cover calc(22% + var(--p) * 30%); }
  }
}
@keyframes cs-fill { from { opacity: .16; } to { opacity: 1; } }

/* ============ APPLY FOR A ROLE ============ */
.cs-ap { background: var(--cs-paper); }
.cs-ap-hero { padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(2.4rem, 6vh, 3.4rem); background: linear-gradient(180deg, #05070C 0%, #0B1E45 55%, #1A438F 100%); }
.cs-back { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 2.2rem; color: rgb(255 255 255 / .82);
  font: 500 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.cs-back .icn { transform: rotate(180deg); transition: transform .3s var(--cs-ease); }
.cs-back:hover .icn { transform: rotate(180deg) translateX(3px); }
.cs-h1-ap { margin-bottom: 1.8rem; font-size: clamp(2.3rem, 4.4vw, 4.2rem); }
.cs-ap-meta { display: flex; flex-wrap: wrap; margin: 0; border-top: 1px solid var(--cs-line-d); }
.cs-ap-meta > div { padding: .95rem 2.4rem .2rem 0; }
.cs-ap-meta dt { margin-bottom: .45rem; color: rgb(255 255 255 / .66); font: 500 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.cs-ap-meta dd { margin: 0; font-size: 1rem; }
.cs-ap-body { padding: clamp(3.5rem, 9vh, 5.5rem) 0 clamp(4rem, 10vh, 6rem); color: var(--cs-ink);
  background: linear-gradient(180deg, #1A438F 0%, #B9CBE7 3%, #DCE6F1 10%, var(--cs-paper) 40%); }
.cs-ap-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.cs-ap-role { position: sticky; top: calc(var(--nav-h) + 2rem); }
.cs-ap-role h2 { margin: 0 0 .75rem; color: var(--cs-ink2); font: 500 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.cs-ap-role > p { margin: 0 0 2.2rem; font-size: 1.06rem; line-height: 1.66; }
.cs-ap-next { display: grid; gap: .8rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.cs-ap-next li { position: relative; padding-left: 1.15rem; font-size: .97rem; line-height: 1.56; color: var(--cs-ink2); }
.cs-ap-next li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; background: var(--cs-blue); }
.cs-ap-next strong { font-weight: 600; color: var(--cs-ink); }
.cs-ap-note, .cs-ap-other { margin: 0 0 .8rem; font-size: .92rem; line-height: 1.55; color: var(--cs-ink2); }
.cs-ap-other a { color: var(--cs-blue); text-decoration: underline; text-underline-offset: 3px; }
.cs-ap-panel { padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--cs-line-l); background: rgb(255 255 255 / .74); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.cs-part { min-width: 0; margin: 0 0 2rem; padding: 0 0 2rem; border: 0; border-bottom: 1px solid var(--cs-line-l); }
.cs-part legend { margin-bottom: 1.15rem; padding: 0; font-size: 1.25rem; letter-spacing: -.02em; color: var(--cs-ink); }
.cs-part legend::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 .7rem .2rem 0; vertical-align: middle; background: var(--cs-blue); }
.cs-part legend em, .cs-label em { margin-left: .35rem; font-style: normal; font-weight: 400; letter-spacing: .02em; text-transform: none; color: #4A5464; font-size: .8rem; }
.cs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.cs-two:last-child { margin-bottom: 0; }
:where(.cs) label { margin: 0; font-size: inherit; font-weight: inherit; text-transform: none; letter-spacing: 0; color: inherit; }
.cs-field { display: grid; gap: .45rem; align-content: start; }
.cs-label { color: var(--cs-ink2); font: 500 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.cs-form input:not([type="checkbox"]):not([type="file"]), .cs-form select, .cs-form textarea {
  width: 100%; height: 2.95rem; padding: 0 .85rem; border: 1px solid rgb(11 30 69 / .24); border-radius: 0; background: #fff; color: var(--cs-ink);
  font: 400 .97rem/1.3 var(--sans); transition: border-color .2s ease, box-shadow .2s ease; }
.cs-form textarea { height: auto; min-height: 7rem; padding: .75rem .85rem; line-height: 1.56; resize: vertical; }
.cs-form select { appearance: none; padding-right: 2.4rem; background: #fff no-repeat right .9rem center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230B0F17' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cs-form :is(input, select, textarea):hover { border-color: rgb(11 30 69 / .42); }
.cs-form :is(input, select, textarea):focus { outline: none; border-color: var(--cs-blue); box-shadow: 0 0 0 3px rgb(47 102 216 / .2); }
.cs .cs-form :is(input, select, textarea)[aria-invalid="true"] { border-color: #C8102E; }
.cs-err { margin-top: .2rem; font-size: .85rem; line-height: 1.4; color: #A80B24; }
.cs-hint { justify-self: end; font-size: .8rem; color: #4A5464; font-variant-numeric: tabular-nums; }
.cs-drop { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.2rem; border: 1px dashed rgb(11 30 69 / .38); background: rgb(255 255 255 / .65);
  cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.cs-drop:hover, .cs-drop.is-over { border-color: var(--cs-blue); background: rgb(47 102 216 / .06); }
.cs-drop:focus-within { outline: 2px solid var(--cs-blue); outline-offset: 3px; }
.cs-drop.has-file { border-style: solid; border-color: var(--cs-blue); }
.cs-drop.is-invalid { border-color: #C8102E; }
.cs-drop-ic { display: grid; flex: none; place-items: center; width: 2.8rem; height: 2.8rem; background: var(--cs-ink); color: #fff; }
.cs-drop-ic .icn { font-size: 1.15rem; }
.cs-drop-t { display: grid; gap: .28rem; min-width: 0; }
.cs-drop-t strong { font-size: .98rem; font-weight: 500; overflow-wrap: anywhere; }
.cs-drop-t span { font-size: .85rem; color: var(--cs-ink2); }
.cs-drop-clear { margin-top: .7rem; padding: 0; border: 0; background: none; color: var(--cs-blue); cursor: pointer; font: 500 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.cs-consent { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1.25rem; font-size: .93rem; line-height: 1.5; cursor: pointer; }
.cs-consent input { flex: none; appearance: none; border-radius: 0; width: 1.15rem; height: 1.15rem; margin: .12rem 0 0; border: 1px solid rgb(11 30 69 / .5); background: #fff center / .8rem no-repeat; cursor: pointer; }
.cs-consent input:checked { border-color: var(--cs-blue); background-color: var(--cs-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='4.5 12.5 9.5 17.5 19.5 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cs-consent input[aria-invalid="true"] { border-color: #C8102E; }
.cs-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cs-btn-submit { height: 3rem; padding: 0; border: 0; background: none; cursor: pointer; }
.cs-btn-submit > span { padding: 0 1.4rem; background: var(--cs-ink); color: #fff; }
.cs-btn-submit:hover > span { background: #1D2636; }
.cs-btn-submit > i { width: 3rem; }
.cs-btn-submit[disabled] { opacity: .7; cursor: progress; }
.cs-alert { margin: 0 0 1.6rem; padding: .85rem 1rem; border: 1px solid rgb(200 16 46 / .35); background: rgb(200 16 46 / .06); color: #8E0A20; font-size: .93rem; line-height: 1.5; }
.cs-alert a { text-decoration: underline; text-underline-offset: 2px; }

/* ============ APPLICATION SENT ============
   The process ends on one authored moment: the blue square lands, its check draws itself, the
   page's square markers burst out once, then the headline decodes. */
.cs-ok { padding: clamp(3rem, 8vh, 5rem) 0 clamp(2.6rem, 6vh, 3.6rem); background: linear-gradient(180deg, #05070C 0%, #0B1E45 58%, #1A438F 100%); }
.cs-ok-mark { position: relative; width: 4.6rem; height: 4.6rem; margin-bottom: 2.2rem; }
.cs-ok-check { position: relative; z-index: 1; display: block; width: 100%; height: 100%; background: var(--cs-blue);
  fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: square; stroke-linejoin: miter;
  animation: cs-ok-land .55s var(--cs-ease) both; }
.cs-ok-check polyline { stroke-dasharray: 40; stroke-dashoffset: 40; animation: cs-ok-draw .5s var(--cs-ease) .35s forwards; }
.cs-ok-burst { position: absolute; inset: 0; pointer-events: none; }
.cs-ok-burst i { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background: var(--cs-blue); opacity: 0; animation: cs-ok-burst 1.1s var(--cs-ease) calc(.62s + var(--t)) both; }
.cs-ok-burst i:nth-child(3n) { background: #fff; }
@keyframes cs-ok-land { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cs-ok-draw { to { stroke-dashoffset: 0; } }
@keyframes cs-ok-burst {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(1); }
}
.cs-ok-h { margin-bottom: 1.4rem; }
.cs-ok-sub { max-width: 34rem; margin: 0 0 2.2rem; font-size: 1.12rem; line-height: 1.6; color: rgb(255 255 255 / .88); }
.cs-ok-sub strong { color: #fff; font-weight: 600; }
.cs-ok-ref { font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 600; }
.cs-ok-keep { margin: 1.2rem 0 0; font-size: .92rem; color: rgb(255 255 255 / .72); }
.cs-ok-body { color: var(--cs-ink); }
.cs-ok-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.6rem 2.4rem; max-width: 62rem; margin: 0 0 2.6rem; padding: 0; list-style: none; }
.cs-ok-steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.cs-ok-steps li > span { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px dashed rgb(11 30 69 / .4); }
.cs-ok-steps li:first-child > span { border: 0; background: var(--cs-blue); color: #fff; }
.cs-ok-steps .icn { font-size: 1.25rem; stroke-width: 1.5; }
.cs-ok-steps h3 { margin: .1rem 0 .3rem; font-size: 1.06rem; font-weight: 500; letter-spacing: -.01em; }
.cs-ok-steps p { font-size: .96rem; line-height: 1.6; color: var(--cs-ink2); }

@media (prefers-reduced-motion: reduce) {
  .cs-c { opacity: 1 !important; transition: none; }
  .cs-role :is(.cs-role-t, .cs-role-m, .cs-role-r p), .cs-word, .cs-star, .cs-btn > i .icn { transition: none !important; }
  .cs-ok-check, .cs-ok-check polyline { animation: none; stroke-dashoffset: 0; }
  .cs-ok-burst { display: none; }
}
@media (max-width: 860px) {
  .cs-h1 { font-size: 2.35rem; }
  .cs-people { aspect-ratio: 2.6 / 1; }
  .cs-people img { left: -50%; width: 200%; }
  .cs-row, .cs-role { grid-template-columns: minmax(0, 1fr); row-gap: .9rem; }
  .cs-roles .cs-wrap { padding-right: 33%; }
  .cs-roles .cs-role-r p { max-width: none; }
  .cs-faq-in, .cs-ap-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-ap-role { position: static; }
  .cs-two { grid-template-columns: 1fr; }
  .cs-q-a p { padding: .2rem 1rem 1.2rem; }
  .cs-dark-in { min-height: 60vh; }
}
@media print {
  .cs-star { display: none; }
  .cs-c, .cs-word, .cs-role :is(.cs-role-t, .cs-role-m, .cs-role-r p) { opacity: 1 !important; transform: none !important; }
}

/* ============ RESEARCH: the paper shelf (/research, under the filter) ============
   The newest paper leads at full width on a tinted stage; the rest stand on the shelf in a
   grid, each cover a real report board set from the paper's own title, in its series colour,
   with the flag's stripes down the spine. Shape rule: stages and the lead are 20px, covers are
   book-cornered, buttons are pills. Rules sit under .rp-shelf so the page-black text rule
   (which turns every span black) never reaches the covers. */
.rp-shelf { --rp-ease: cubic-bezier(.16, 1, .3, 1); --rp-navy: #0B2C63; --rp-red: #C8102E;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; margin-top: 2.2rem; }
.rp-shelf .rp-item { display: flex; flex-direction: column; min-width: 0; }
:is(.rp-shelf, .bbc-cover) .rp-cover-link { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 1.3rem; border-radius: 20px;
  background: linear-gradient(160deg, #EEF2F8 0%, #E1E8F2 100%); overflow: hidden; perspective: 1100px; }
:is(.rp-shelf, .bbc-cover) .rp-cover-link:hover { text-decoration: none; }

/* the cover board */
:is(.rp-shelf, .bbc-cover) .rp-cover { position: relative; display: flex; flex-direction: column; width: 46%; aspect-ratio: 3 / 4; container-type: inline-size;
  padding: 9% 9% 8% 15%; border-radius: 3px 9px 9px 3px; color: #fff; text-align: left;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 16px 22px 34px -16px rgb(11 44 99 / .55), 2px 3px 6px rgb(11 44 99 / .18);
  transform-origin: 0 50%; transition: transform .7s var(--rp-ease), box-shadow .7s var(--rp-ease); }
:is(.rp-shelf, .bbc-cover) .rp-cover--navy { background: linear-gradient(150deg, #133a7c 0%, #0B2C63 55%, #081f47 100%); }
:is(.rp-shelf, .bbc-cover) .rp-cover--blue { background: linear-gradient(150deg, #2a64c4 0%, #1C4C9E 60%, #163d80 100%); }
:is(.rp-shelf, .bbc-cover) .rp-cover--red  { background: linear-gradient(150deg, #c41a35 0%, #A50D26 60%, #870a1f 100%); }
:is(.rp-shelf, .bbc-cover) .rp-cover--ink  { background: linear-gradient(150deg, #1d2e52 0%, #10203F 60%, #0a162d 100%); }
:is(.rp-shelf, .bbc-cover) .rp-cover-spine { position: absolute; top: 0; bottom: 0; left: 0; width: 9%; border-radius: 3px 0 0 3px;
  background: repeating-linear-gradient(180deg, #C8102E 0 4.545%, #fff 4.545% 9.09%);
  box-shadow: inset -3px 0 4px rgb(0 0 0 / .22); }
:is(.rp-shelf, .bbc-cover) .rp-cover-top { display: flex; justify-content: space-between; gap: .5rem; color: rgb(255 255 255 / .82);
  font: 600 6cqi/1.2 var(--sans); letter-spacing: .04em; }
:is(.rp-shelf, .bbc-cover) .rp-cover-top b { color: #fff; font-weight: 800; letter-spacing: .12em; }
:is(.rp-shelf, .bbc-cover) .rp-cover-title { margin-top: auto; padding-top: 1rem; color: #fff; font: 600 13cqi/1.14 var(--serif); overflow-wrap: break-word; hyphens: auto;
  letter-spacing: -.005em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
:is(.rp-shelf, .bbc-cover) .rp-cover-foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: 12%; padding-top: 7%;
  border-top: 1px solid rgb(255 255 255 / .28); color: rgb(255 255 255 / .78); font: 500 5.4cqi/1.3 var(--sans); }
:is(.rp-shelf, .bbc-cover) .rp-cover-top span, .rp-shelf .rp-cover-foot span { color: inherit; }
:is(.rp-shelf, .bbc-cover) .rp-cover-foot span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-shelf .rp-item:hover .rp-cover, .rp-shelf .rp-item:focus-within .rp-cover {
  transform: rotateY(-16deg) translateY(-6px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 28px 30px 44px -18px rgb(11 44 99 / .6), 2px 3px 6px rgb(11 44 99 / .18); }

/* the words */
.rp-shelf .rp-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; margin: 0 0 .55rem; }
.rp-shelf .rp-tag { color: var(--rp-red); font-size: .84rem; font-weight: 600; }
.rp-shelf time { color: #4A5874; font-size: .84rem; font-variant-numeric: tabular-nums; }
.rp-shelf .rp-title { margin: 0 0 .5rem; font: 600 1.32rem/1.2 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.rp-shelf .rp-title a { color: var(--rp-navy); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .55s var(--rp-ease); }
.rp-shelf .rp-title a:hover, .rp-shelf .rp-title a:focus-visible, .rp-shelf .rp-item:has(.rp-cover-link:hover) .rp-title a {
  background-size: 100% 1.5px; text-decoration: none; }
.rp-shelf .rp-authors { margin: 0 0 .75rem; color: #4A5874; font-size: .92rem; }
.rp-shelf .rp-abstract { margin: 0 0 1.1rem; max-width: 62ch; color: #1E2A3D; font-size: .97rem; line-height: 1.62;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rp-shelf .rp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: auto; }
.rp-shelf .rp-read { display: inline-flex; align-items: center; gap: .45rem; color: var(--rp-navy); font-weight: 600; font-size: .93rem; }
.rp-shelf .rp-read .icn { transition: transform .35s var(--rp-ease); }
.rp-shelf .rp-read:hover { text-decoration: none; }
.rp-shelf .rp-read:hover .icn, .rp-shelf .rp-item:has(.rp-cover-link:hover) .rp-read .icn { transform: translateX(4px); }
.rp-shelf .rp-dl { display: inline-flex; align-items: center; gap: .4rem; color: #4A5874; font-size: .9rem; font-weight: 500; }
.rp-shelf .rp-dl:hover { color: var(--rp-navy); text-decoration: underline; text-underline-offset: 3px; }
.rp-shelf .rp-nodl { color: #4A5874; font-size: .86rem; }
.rp-shelf a:focus-visible { outline: 2px solid var(--rp-red); outline-offset: 3px; border-radius: 4px; }

/* the lead: the newest paper, at full width on its own stage */
.rp-shelf .rp-item--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem);
  align-items: center; padding-bottom: 1rem; }
.rp-shelf .rp-item--lead .rp-cover-link { margin: 0; aspect-ratio: 1 / 1; background: linear-gradient(160deg, #E6ECF5 0%, #D6E0EE 100%); }
.rp-shelf .rp-item--lead .rp-cover { width: 50%; }
.rp-shelf .rp-item--lead .rp-title { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.12; margin-bottom: .7rem; }
.rp-shelf .rp-item--lead .rp-abstract { font-size: 1.04rem; -webkit-line-clamp: unset; display: block; }
.rp-shelf .rp-item--lead .rp-read { padding: .78rem 1.25rem; border-radius: 999px; background: var(--rp-navy); color: #fff; }
.rp-shelf .rp-item--lead .rp-read:hover { background: #12397f; }
.rp-shelf .rp-item--lead .rp-dl { padding: .74rem 1.15rem; border-radius: 999px; border: 1px solid rgb(11 44 99 / .22); color: var(--rp-navy); }
.rp-shelf .rp-item--lead .rp-dl:hover { border-color: var(--rp-navy); text-decoration: none; }

/* the shelf arrives in order: the stage first, the cover a beat later, then the words */
.rp-shelf.is-armed .rp-item:not(.is-in) { opacity: 0; transform: translateY(26px); }
.rp-shelf.is-armed .rp-item:not(.is-in) .rp-cover { transform: translateY(18px) rotateY(-10deg); opacity: 0; }
.rp-shelf.is-armed .rp-item { transition: opacity .8s ease-out calc(min(var(--i), 3) * 90ms), transform .9s var(--rp-ease) calc(min(var(--i), 3) * 90ms); }
.rp-shelf.is-armed .rp-item.is-in .rp-cover { transition: transform 1.1s var(--rp-ease) calc(min(var(--i), 3) * 90ms + 160ms), opacity .8s ease-out calc(min(var(--i), 3) * 90ms + 160ms), box-shadow .7s var(--rp-ease); }

/* the page-black links rule (underline, black, teal on hover) stops at the shelf */
.page-black .rp-shelf a { text-decoration: none; }
.page-black .rp-shelf .rp-title a, .page-black .rp-shelf .rp-title a:hover { color: var(--rp-navy); text-decoration: none; }
.page-black .rp-shelf .rp-read, .page-black .rp-shelf .rp-read:hover { color: var(--rp-navy); }
.page-black .rp-shelf .rp-dl { color: #4A5874; }
.page-black .rp-shelf .rp-dl:hover { color: var(--rp-navy); text-decoration: underline; }
.page-black .rp-shelf .rp-item--lead .rp-read, .page-black .rp-shelf .rp-item--lead .rp-read:hover { color: #fff; }
.page-black .rp-shelf .rp-item--lead .rp-dl, .page-black .rp-shelf .rp-item--lead .rp-dl:hover { color: var(--rp-navy); text-decoration: none; }

/* empty and no-papers states */
.rp-empty { margin-top: 2rem; padding: 2.4rem 1.6rem; border: 1px dashed rgb(11 44 99 / .25); border-radius: 20px; text-align: center; color: #4A5874; }
.rp-empty p { margin: 0 auto; max-width: 46ch; }
.rp-empty .rp-empty-t { margin-bottom: .4rem; color: #0B2C63; font: 600 1.2rem/1.3 var(--serif); }
.page-black .rp-empty p { color: #4A5874; }
.page-black .rp-empty .rp-empty-t { color: #0B2C63; }

@media (max-width: 1100px) { .rp-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .rp-shelf { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .rp-shelf .rp-item--lead { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .rp-shelf .rp-item--lead .rp-cover-link { aspect-ratio: 4 / 3; }
  .rp-shelf .rp-item--lead .rp-cover { width: 42%; }
  .rp-shelf .rp-cover { width: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-shelf .rp-cover, .rp-shelf .rp-item, .rp-shelf .rp-title a, .rp-shelf .rp-read .icn { transition: none !important; }
  .rp-shelf .rp-item:hover .rp-cover { transform: none; }
}

/* ============ ABOUT (/about): the Careers system, after Sharplink's about page (pinned by the user) ============
   Everything .cs gives (square edges, light Public Sans, uppercase micro-type, one electric blue, the
   chrome seal from careers.js) plus what the reference's about page adds: a dashed pull quote, and portrait-style card grids. Photo frames are the reference's
   portrait ground: the picture in black and white on blue, under a fine grid. Logo frames are its
   board ground: white, under the same grid. Grounds run black, ice, blue to black, navy, blue to ice,
   and blue again for the emblem. The hero is a film of the field work; the seal shows beside the
   commitments, in the black band (as a wireframe) and in the emblem. */
.ab { --ab-red: #C8102E; }

/* ---- hero: the film of the field work (public/media/about-hero*.mp4) under the careers scrim
   (.cs-hero--film); the seal waits for the commitments */

/* ---- the story: figures, then the tagged rows */
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0 0 clamp(3.5rem, 8vh, 5rem); }
.ab-stat { padding-top: 1.1rem; border-top: 1px solid var(--cs-line-l); }
.ab-stat-n { font: 300 clamp(2.6rem, 4.2vw, 4rem)/1 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--cs-ink); }
.ab-stat-l { margin-top: 1rem !important; font: 500 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cs-ink); }
.ab-stat-s { margin-top: .35rem !important; font-size: .9rem; line-height: 1.5; color: var(--cs-ink2); }

.ab-sub { max-width: 34rem; margin: -1rem 0 2.8rem !important; font-size: 1.02rem; line-height: 1.6; color: var(--cs-ink2); }

/* ---- the region: the African Regional Report, one glass folder of country slides (styles below) */
.ab-bench { padding: clamp(1.5rem, 4vh, 2.5rem) 0 clamp(4rem, 10vh, 6rem); color: var(--cs-ink); background: var(--cs-paper); }
.ab-faq { padding-top: clamp(3rem, 8vh, 5rem); padding-bottom: clamp(2rem, 4vh, 3rem); }   /* the footer follows straight on */

/* ---- the emblem: the seal alone over the light (as the reference closes), then the closing line */

/* blocks rise as they arrive (careers.js adds .can-rise and .is-in) */
.cs.can-rise [data-rise] { transition: opacity .9s ease-out calc(var(--i, 0) * 90ms), transform 1s var(--cs-ease) calc(var(--i, 0) * 90ms); }
.cs.can-rise [data-rise]:not(.is-in) { opacity: 0; transform: translateY(26px); }

@media (max-width: 860px) {
  .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cs [data-rise] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media print {
  .cs [data-rise] { opacity: 1 !important; transform: none !important; }
}

/* ============ IMAGE LIBRARY (admin) ============ */
.imglib-group { padding: 1.4rem 1.5rem 1.6rem; margin-bottom: 1.4rem; }
.imglib-head h3 { margin: 0 0 .25rem; font-family: var(--serif); font-size: 1.18rem; color: var(--navy); }
.imglib-head p { margin: 0 0 1.1rem; font-size: .87rem; color: var(--muted); }
.imglib-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.imglib-card { border: 1px solid #000; border-radius: 10px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column; }
.imglib-thumb { height: 132px; background-size: cover; background-position: center;
  background-color: var(--navy); border-bottom: 1px solid #000; }
.imglib-info { padding: .7rem .8rem .5rem; display: flex; flex-direction: column; gap: .18rem; }
.imglib-info strong { font-size: .9rem; color: var(--navy); line-height: 1.3; }
.imglib-hint { font-size: .875rem; color: var(--muted); }
.imglib-state { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-top: .2rem; }
.imglib-state.is-custom { color: var(--teal); font-weight: 600; }
.imglib-form { padding: 0 .8rem; display: flex; flex-direction: column; gap: .5rem; margin-top: auto; }
.imglib-pick { position: relative; display: block; border: 1px dashed #8FA3C0; border-radius: 8px;
  padding: .5rem .6rem; cursor: pointer; background: var(--cream); transition: border-color .2s, background .2s; }
.imglib-pick:hover { border-color: var(--teal); background: #fff; }
.imglib-pick.has-file { border-style: solid; border-color: var(--teal); background: #fff; }
.imglib-pick input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.imglib-pick-label { display: block; font-size: .875rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imglib-pick.has-file .imglib-pick-label { color: var(--navy); font-weight: 600; }
.imglib-actions { display: flex; }
.imglib-actions .btn { width: 100%; justify-content: center; }
.imglib-del { padding: .55rem .8rem .8rem; }
.imglib-del .btn { width: 100%; justify-content: center; }
.imglib-del-empty { font-size: .72rem; color: var(--muted); text-align: center; }

/* ---- phones: a compact search in the top bar (the section dock floats at the foot; see MAIN NAV) ---- */
@media (max-width: 620px) {
  .nav-shell { padding: .4rem .7rem; gap: .5rem; }
  .nav-search { padding: .26rem .5rem .26rem .9rem; }
  .nav-search input { font-size: .8rem; }
}

/* ============================================================================
   DATA EXPLORER — an exploration journey, not a card dashboard.
   Loaded last so it wins over the generic panel styles and the .dx-black block.
   Structure: command bar -> rail -> sidebar + main
   main: intro -> snapshot -> 6 views -> data -> related
   ========================================================================== */

/* ---- motion contract ----------------------------------------------------
   Resting state of every element is its FINAL state. The `dx-js` class is added
   by explorer.js, so if the engine never loads nothing is hidden. Entrances are
   CSS animations with `both` fill, driven by an `is-in` class from an
   IntersectionObserver that carries its own timeout fail-safe. */

@keyframes dxRise   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes dxFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes dxGrowX  { from { transform: scaleX(0); }  to { transform: none; } }
@keyframes dxGrowY  { from { transform: scaleY(0); }  to { transform: none; } }
@keyframes dxPop    { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes dxDraw   { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes dxCell   { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

/* ---- command bar --------------------------------------------------------- */
.dx-cmd { z-index: 40; backdrop-filter: saturate(1.4) blur(8px); background: rgba(255,255,255,.92); }
.dx-cmd .wrap { max-width: 1680px; display: grid; gap: .85rem; padding: .85rem 1.6rem;
  /* Six columns: category, indicator, focus, comparison, year, play. The list has to name
     every field or the extra one wraps to a second row and doubles the height of the bar.
     Year and play are narrowest: a slider and a button, not names. */
  grid-template-columns: minmax(150px, 1fr) minmax(178px, 1.3fr) minmax(138px, .92fr) minmax(138px, .92fr) minmax(104px, .48fr) minmax(112px, .46fr);
  align-items: end; }
.dx-cmd .selector-field label { font-size: .75rem; letter-spacing: .17em; color: #5A6A85; margin-bottom: .4rem; }
.dx-cmd .xdd-trigger { background: #fff; border: 1px solid #000; border-radius: 9px; padding: .62rem .9rem; font-size: .92rem; }
.dx-cmd .xdd-trigger:hover { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(28,91,184,.1); }
.dx-cmd-year label { display: flex; align-items: baseline; gap: .45rem; }
.dx-cmd-year label b { font-family: var(--num); font-size: 1rem; color: var(--navy); letter-spacing: 0; }
.dx-cmd-year input[type=range] { width: 100%; accent-color: var(--teal); margin: 0; }

/* ---- section progress rail ---------------------------------------------- */
.dx-rail { position: fixed; right: 1.15rem; top: 50%; transform: translateY(-50%); z-index: 35;
  display: flex; flex-direction: column; gap: .6rem; padding: .6rem .4rem;
  background: rgba(255,255,255,.8); border: 1px solid var(--line-soft); border-radius: 999px;
  backdrop-filter: blur(6px); }
.dx-rail-dot { display: block; padding: .2rem; line-height: 0; }
.dx-rail-dot i { display: block; width: 7px; height: 7px; border-radius: 999px; background: #C3CFE2;
  transition: background .3s ease, transform .3s ease; }
.dx-rail-dot:hover i { background: var(--teal); transform: scale(1.35); }
.dx-rail-dot.is-active i { background: var(--navy); transform: scale(1.5); }
@media (max-width: 1180px) { .dx-rail { display: none; } }

/* ---- shell --------------------------------------------------------------- */
.explorer-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 2.6rem;
  align-items: start; padding: 2rem 2rem 5rem; max-width: 1680px; margin: 0 auto; }
.dx-main { min-width: 0; transition: opacity .25s ease; }
.dx-main.is-loading { opacity: .55; }

/* ---- sidebar: quieter, so it never competes with the visualizations ------ */
.indicator-tree { background: transparent; border: 0; box-shadow: none; padding: 0;
  position: sticky; top: calc(var(--nav-h) + 5.4rem); max-height: calc(100vh - var(--nav-h) - 7rem);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.indicator-tree::-webkit-scrollbar { width: 5px; }
.indicator-tree::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.tree-title { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
  font-weight: 700; margin: 0 0 .7rem .2rem; }
.tree-toggle { display: none; }
.tree-cat { border: 0; border-bottom: 1px solid var(--line-soft); }
.tree-cat:last-child { border-bottom: 0; }
.tree-cat-header { display: flex; align-items: center; gap: .5rem; padding: .62rem .2rem; cursor: pointer;
  font-weight: 600; font-size: .82rem; color: var(--navy); transition: color .2s ease; }
.tree-cat-header:hover { color: var(--teal); }
.tree-cat-header span { flex: 1; }
.tree-count { font-family: var(--num); font-style: normal; font-size: .75rem; color: var(--faint);
  background: var(--cream); border-radius: 999px; padding: .1rem .42rem; }
.tree-cat-header .icn { width: .82em; height: .82em; color: var(--faint); transition: transform .28s cubic-bezier(.22,.72,.28,1); }
.tree-cat.open .tree-cat-header .icn { transform: rotate(90deg); }
/* grid-rows trick gives a real height transition without measuring in JS */
.tree-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.22,.72,.28,1); }
.tree-cat.open .tree-items { grid-template-rows: 1fr; }
.tree-items-inner { overflow: hidden; min-height: 0; }
.tree-item { display: block; padding: .42rem .55rem; border-radius: 7px; font-size: .8rem; cursor: pointer;
  color: var(--ink); position: relative; transition: background .18s ease, color .18s ease, padding-left .18s ease; }
.tree-item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 0; border-radius: 2px; background: var(--teal); transition: height .24s cubic-bezier(.22,.72,.28,1); }
.tree-item:hover { background: var(--teal-soft); padding-left: .75rem; }
.tree-item:hover::before { height: 62%; }
.tree-item.selected { background: transparent; color: var(--navy); font-weight: 700; padding-left: .75rem; }
.tree-item.selected::before { height: 78%; background: var(--gold); width: 3px; }
.tree-item input { display: none; }
.tree-item:last-child { margin-bottom: .5rem; }

/* ---- sections ------------------------------------------------------------ */
.dx-sec { margin: 0 0 6rem; }
.dx-js .dx-sec { opacity: 0; transform: translateY(22px); }
.dx-js .dx-sec.is-in { animation: dxRise .78s cubic-bezier(.22,.72,.28,1) both; }

/* intro */
.dx-intro { margin-bottom: 3rem; max-width: 62rem; }
.explorer-shell .dx-eyebrow { font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0;
  text-transform: none; color: var(--teal-dark); font-weight: 600; margin: 0 0 .7rem; }
.explorer-shell .dx-title { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 1.03;
  letter-spacing: -.02em; color: #000; margin: 0 0 1.1rem; }
.explorer-shell .dx-statement { font-size: clamp(1.02rem, 1.5vw, 1.3rem); line-height: 1.55; color: #2A3446;
  max-width: 44em; margin: 0 0 1.6rem; }
/* One line. Each label travels with its value as a single .dx-fact item, so the row can never
   break between "Coverage" and "15 of 15 counties". The source name is the long, variable part,
   so it is the only item allowed to shrink, ending in an ellipsis with the full text on hover. */
.dx-source { display: flex; flex-wrap: nowrap; gap: 1.3rem; align-items: baseline; min-width: 0;
  padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .82rem; }
.dx-fact { display: inline-flex; align-items: baseline; gap: .45rem; flex: 0 0 auto;
  min-width: 0; white-space: nowrap; }
.dx-fact i { font-style: normal; color: var(--faint); text-transform: uppercase;
  letter-spacing: .1em; font-size: .75rem; font-weight: 700; flex: 0 0 auto; }
.dx-fact-source { flex: 0 1 auto; }
.dx-fact-source b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.explorer-shell .dx-source b { color: #000; font-family: var(--serif); font-weight: 600; white-space: nowrap; }
/* Narrow screens cannot hold one line honestly, so wrap there, still pair by pair. */
@media (max-width: 900px) {
  .dx-source { flex-wrap: wrap; gap: .45rem 1.1rem; }
  .dx-fact-source { flex: 1 1 100%; }
}

/* snapshot */
.dx-snapshot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 6rem; }
.dx-stat { background: #fff; padding: 1.7rem 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .3rem; }
.dx-stat-lbl { font-size: .63rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.explorer-shell .dx-stat-val { font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.02em; color: var(--navy); font-weight: 700; }
.explorer-shell .dx-stat-val.is-up { color: var(--teal); }
.explorer-shell .dx-stat-val.is-down { color: var(--gold); }
.dx-stat-sub { font-size: .875rem; color: var(--muted); }
@media (max-width: 900px) { .dx-snapshot { grid-template-columns: repeat(2, 1fr); } }

/* view headers */
.dx-view-head { max-width: 52rem; margin-bottom: 2rem; }
.dx-view-num { display: inline-block; font-family: var(--num); font-size: .75rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--teal-dark); font-weight: 700; margin-bottom: .8rem;
  padding-bottom: .45rem; border-bottom: 2px solid var(--gold); }
.explorer-shell .dx-view-head h2 { font-family: var(--serif); font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  line-height: 1.12; letter-spacing: -.015em; color: #000; margin: 0 0 .7rem; }
.explorer-shell .dx-view-sub { font-size: .97rem; line-height: 1.6; color: #3A4557; margin: 0; max-width: 46em; }

/* ---- visualization frames ------------------------------------------------ */
.dx-viz { width: 100%; min-height: 220px; position: relative; }
.dx-viz-tall { min-height: 300px; }
.dx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dx-empty { color: var(--muted); font-size: .9rem; padding: 2.4rem 0; text-align: center;
  border: 1px dashed var(--line); border-radius: 12px; }

/* shared chart type */
.dx-svg .dx-axis { font-family: var(--num); font-size: 13px; fill: #6B7A91; }
.dx-svg .dx-grid { stroke: rgba(11,44,99,.1); stroke-width: 1; }
.dx-svg .dx-grid.is-base { stroke: rgba(11,44,99,.28); stroke-width: 1.4; }
.dx-svg .dx-rank-name { font-family: var(--sans); font-size: 14px; fill: #000; font-weight: 500; }
.dx-svg .dx-rank-val { font-family: var(--num); font-size: 14px; fill: #1E2A3D; font-weight: 700; }
.dx-svg .dx-rank-val.is-inside { fill: #fff; }
.dx-svg .dx-rank-num { font-family: var(--num); font-size: 12px; fill: #A9B6CA; font-weight: 700; }

/* ---- 01 geography: sticky map + scrolling steps -------------------------- */
.dx-map-stage { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.dx-steps { display: flex; flex-direction: column; }
.dx-step { min-height: 58vh; display: flex; flex-direction: column; justify-content: center;
  padding: 1.6rem 0; opacity: .34; transition: opacity .5s ease, transform .5s ease; transform: translateX(-6px); }
.dx-step.is-active { opacity: 1; transform: none; }
.dx-step-n { font-family: var(--num); font-size: .75rem; letter-spacing: .2em; color: var(--gold);
  font-weight: 700; margin-bottom: .7rem; }
.explorer-shell .dx-step h3 { font-family: var(--serif); font-size: 1.42rem; line-height: 1.2; color: #000; margin: 0 0 .6rem; }
.explorer-shell .dx-step p { font-size: .93rem; line-height: 1.62; color: #3A4557; margin: 0; }
@media (prefers-reduced-motion: reduce) { .dx-step { opacity: 1; transform: none; min-height: 0; } }

.dx-map-sticky { position: sticky; top: calc(var(--nav-h) + 6rem); }
.dx-map-frame { background: linear-gradient(168deg, #FBFCFE, #F2F6FC); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.4rem 1.5rem 1.1rem; box-shadow: 0 2px 4px rgba(11,44,99,.04), 0 22px 50px rgba(11,44,99,.09); }
.dx-map { position: relative; }
.dx-map-wrap { position: relative; margin: 0 auto; max-width: 100%; transition: width .18s ease-out; }
.dx-map-wrap svg { width: 100%; height: auto; display: block; overflow: visible;
  /* never let the hero map grow taller than the screen it is sticky inside */
  max-height: calc(100vh - var(--nav-h) - 15rem); }
.dx-county { stroke: #fff; stroke-width: 1.1; cursor: pointer; outline: none;
  transition: fill .55s cubic-bezier(.22,.72,.28,1), opacity .4s ease, stroke .2s ease, stroke-width .2s ease; }
.dx-js .dx-map-wrap:not(.is-in) .dx-county { opacity: 0; }
.dx-map-wrap.is-in .dx-county { animation: dxFade .5s ease both; animation-delay: calc(var(--i) * 34ms); }
.dx-county:hover { stroke: var(--navy); stroke-width: 2.4; }
.dx-county:focus-visible { stroke: var(--gold); stroke-width: 3; }
.dx-county.is-focus { stroke: var(--gold); stroke-width: 3; }
.dx-county.is-compare { stroke: var(--navy-600); stroke-width: 3; stroke-dasharray: 5 3; }
/* Highlighting must survive being applied to the PALEST counties (the 'where it is lowest'
   step), so the signal is a heavy stroke and a lift, not brightness. Dimming stays gentle
   enough that the choropleth itself still reads. */
.dx-county.is-dim { opacity: .42; }
.dx-county.is-lit { stroke: var(--navy); stroke-width: 2.6;
  filter: drop-shadow(0 2px 9px rgba(11,44,99,.45)); }
.dx-map-wrap.is-in .dx-county.is-dim { animation: none; opacity: .42; }

.dx-map-foot { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  flex-wrap: wrap; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.dx-readout { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.dx-readout-lbl { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.explorer-shell .dx-readout b { font-size: .95rem; color: #000; font-weight: 700; }
.dx-readout-val { font-family: var(--num); font-size: .88rem; color: var(--teal-dark); font-weight: 600; }
.dx-map-foot .map-size-row { margin: 0; }
.dx-map-foot .map-size-row input[type=range] { flex-basis: 96px; }

/* ---- 02 ranking ---------------------------------------------------------- */
.dx-rank-track { fill: rgba(11,44,99,.05); }
.dx-rank-bar { transform-origin: left center; }
.dx-js .dx-viz:not(.is-in) .dx-rank-bar { transform: scaleX(0); }
.dx-viz.is-in .dx-rank-bar { animation: dxGrowX .82s cubic-bezier(.22,.72,.28,1) both; animation-delay: calc(var(--i) * 42ms); }
.dx-js .dx-viz:not(.is-in) .dx-rank-val,
.dx-js .dx-viz:not(.is-in) .dx-rank-num { opacity: 0; }
.dx-viz.is-in .dx-rank-val, .dx-viz.is-in .dx-rank-num {
  animation: dxFade .5s ease both; animation-delay: calc(var(--i) * 42ms + 380ms); }
.dx-rank-row { transition: opacity .2s ease; }
.dx-rank-row:hover .dx-rank-bar { filter: brightness(1.08); }
.dx-rank-row:hover .dx-rank-name { font-weight: 700; }
.dx-rank-row.is-focus .dx-rank-name { font-weight: 800; fill: var(--gold); }
.dx-rank-row.is-compare .dx-rank-name { font-weight: 700; fill: var(--navy-600); }

/* ---- 03 trend ------------------------------------------------------------ */
.dx-line { stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; }
.dx-line.is-thin { stroke-width: 2.2; }
.dx-line.is-dashed { stroke-dasharray: 7 5; }
.dx-line.dx-draw { stroke-dasharray: var(--len); stroke-dashoffset: 0; }
.dx-viz.is-in .dx-line.dx-draw { animation: dxDraw 1.5s cubic-bezier(.3,.7,.3,1) both; }
.dx-area { opacity: 1; }   /* the fill is a gradient; its own stops carry the fade */
.dx-js .dx-viz:not(.is-in) .dx-area { opacity: 0; }
.dx-viz.is-in .dx-area { animation: dxFade .9s ease .5s both; }
.dx-dot { stroke: #fff; stroke-width: 2.4; }
.dx-js .dx-viz:not(.is-in) .dx-dot { opacity: 0; }
.dx-viz.is-in .dx-dot { animation: dxPop .45s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--i) * 130ms + 380ms); }
.dx-svg .dx-line-label { font-family: var(--num); font-size: 17px; font-weight: 700; }
.dx-svg .dx-line-sub { font-family: var(--sans); font-size: 11.5px; font-weight: 600; opacity: .8; }
.dx-cross { stroke: rgba(11,44,99,.3); stroke-width: 1.2; stroke-dasharray: 4 4; pointer-events: none; }
.dx-legend { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 1rem; }
.dx-key { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: #2A3446; font-weight: 600; }
.dx-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---- 04 change ----------------------------------------------------------- */
.dx-zero { stroke: rgba(11,44,99,.35); stroke-width: 1.4; }
.dx-change-bar { transform-origin: left center; }
.dx-change-bar.is-down { transform-origin: right center; }
.dx-js .dx-viz:not(.is-in) .dx-change-bar { transform: scaleX(0); }
.dx-viz.is-in .dx-change-bar { animation: dxGrowX .7s cubic-bezier(.22,.72,.28,1) both; animation-delay: calc(var(--i) * 38ms); }
.dx-svg .dx-change-val { font-family: var(--num); font-size: 13.5px; font-weight: 700; }
.dx-js .dx-viz:not(.is-in) .dx-change-val { opacity: 0; }
.dx-viz.is-in .dx-change-val { animation: dxFade .45s ease both; animation-delay: calc(var(--i) * 38ms + 300ms); }
.dx-change-row.is-focus .dx-rank-name { font-weight: 800; fill: var(--gold); }

/* ---- 05 comparison ------------------------------------------------------- */
.dx-cmp-bar { transform-origin: center bottom; }
.dx-js .dx-viz:not(.is-in) .dx-cmp-bar { transform: scaleY(0); }
.dx-viz.is-in .dx-cmp-bar { animation: dxGrowY .62s cubic-bezier(.22,.72,.28,1) both; animation-delay: calc(var(--i) * 26ms); }
.dx-svg .dx-cmp-legend { font-family: var(--sans); font-size: 13px; fill: #1E2A3D; font-weight: 600; }
.compare-stat-row { margin-top: 1.6rem; }
.compare-stat-card { border: 1px solid var(--line); border-left-width: 3px; border-radius: 12px; padding: 1rem 1.2rem; }
.explorer-shell .compare-stat-card .val { font-size: 1.9rem; }
.compare-stat-card .sub { font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.compare-stat-card.gap { border-left-color: var(--navy); }
.explorer-shell .compare-stat-card .val.is-up { color: var(--teal); }
.explorer-shell .compare-stat-card .val.is-down { color: var(--gold); }

/* ---- 06 matrix ----------------------------------------------------------- */
/* overflow-x:auto also clips overflow-y, so reserve headroom for the hover tooltip
   (which sits above the cursor) and pull the box back so layout is unchanged. */
.viz-heat-wrap { overflow-x: auto; padding: 3.2rem 0 .5rem; margin-top: -3.2rem; }
.viz-heat-wrap .dx-svg { min-width: 760px; }
.dx-cell { transform-origin: center; transition: stroke .15s ease, stroke-width .15s ease; stroke: transparent; stroke-width: 0; }
.dx-js .dx-viz:not(.is-in) .dx-cell { opacity: 0; }
.dx-viz.is-in .dx-cell { animation: dxCell .42s cubic-bezier(.22,.72,.28,1) both; animation-delay: calc(var(--i) * 26ms); }
.dx-cell:not(.is-empty):hover { stroke: var(--navy); stroke-width: 2.4; }

/* ---- data table ---------------------------------------------------------- */
.dx-table-wrap { overflow-x: auto; border-radius: 12px; }
.dx-table-wrap .data-table { border: 1px solid #000; font-size: .9rem; }
.dx-table-wrap .data-table th { padding: .7rem 1rem; font-size: .75rem; }
.dx-table-wrap .data-table td { padding: .66rem 1rem; }
.dx-table-wrap .data-table tr.is-focus td { background: var(--gold-soft); font-weight: 600; }
.dx-data .table-toolbar { margin: 0 0 1rem; }

/* ---- tooltip ------------------------------------------------------------- */
.dx-tip { position: absolute; pointer-events: none; z-index: 30; display: none;
  background: rgba(7,26,62,.97); color: #fff; padding: .7rem .9rem; border-radius: 10px;
  font-size: .8rem; line-height: 1.45; white-space: nowrap; transform: translate(-50%, -122%);
  box-shadow: 0 10px 30px rgba(7,26,62,.32); border-left: 3px solid var(--gold); }
.dx-tip strong { display: block; font-size: .92rem; font-weight: 700; margin-bottom: .1rem; color: #fff; }
.dx-tip .dx-tip-rank { display: block; font-family: var(--num); font-size: .75rem; color: #A9C0E6; letter-spacing: .06em; }
.dx-tip .dx-tip-val { display: block; font-family: var(--num); font-size: 1.15rem; font-weight: 700; margin-top: .3rem; color: #fff; }
.dx-tip .dx-tip-val i { font-style: normal; font-size: .72rem; font-weight: 400; color: #A9C0E6; }
.dx-tip .dx-tip-yoy { display: block; font-family: var(--num); font-size: .72rem; margin-top: .25rem; }
.dx-tip .dx-tip-yoy.up { color: #7FE0B0; }
.dx-tip .dx-tip-yoy.down { color: #FF9B9B; }
.dx-tip .dx-tip-line { display: flex; align-items: center; gap: .4rem; font-size: .875rem; margin-top: .3rem; color: #DCE6F5; }
.dx-tip .dx-tip-line i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.dx-tip .dx-tip-line b { margin-left: auto; font-family: var(--num); color: #fff; padding-left: .7rem; }

/* ---- size control (one per visualization) -------------------------------- */
.dx-viz-bar { display: flex; justify-content: flex-end; margin-bottom: .6rem; }
.dx-size { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .7rem;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.dx-size label { margin: 0; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; white-space: nowrap; }
.dx-size input[type=range] { width: 108px; accent-color: var(--teal); margin: 0; }
.dx-size-val { font-family: var(--num); font-size: .72rem; color: var(--muted); width: 3.2em; text-align: right; }
.dx-map-foot .dx-size { border: 0; padding: 0; background: none; }

/* Every visualization is scaled to sit inside the viewport, so nothing is cut off.
   preserveAspectRatio keeps the drawing complete and centred as it shrinks. */
.dx-viz { margin-left: auto; margin-right: auto; transition: width .18s ease-out; }
.dx-viz > .dx-svg { max-height: calc(100vh - 11rem); }
.viz-heat-wrap > .dx-svg { max-height: none; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1240px) {
  .explorer-shell { grid-template-columns: 210px minmax(0, 1fr); gap: 1.8rem; padding: 1.6rem 1.3rem 4rem; }
  .dx-map-stage { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 1000px) {
  .explorer-shell { grid-template-columns: 1fr; gap: 1.2rem; }
  .indicator-tree { position: static; max-height: none; overflow: visible;
    border: 1px solid var(--line); border-radius: 12px; padding: .5rem .8rem; background: #fff; }
  .tree-toggle { display: flex; align-items: center; gap: .6rem; width: 100%; background: none; border: 0;
    padding: .7rem .2rem; font-size: .86rem; font-weight: 700; color: var(--navy); cursor: pointer; }
  .tree-toggle .icn { width: 1.1em; height: 1.1em; }
  .tree-body { display: none; padding-bottom: .6rem; }
  .indicator-tree.is-open .tree-body { display: block; }
  .dx-map-stage { grid-template-columns: 1fr; gap: 1.4rem; }
  .dx-map-sticky { position: sticky; top: calc(var(--nav-h) + .5rem); z-index: 5; }
  .dx-step { min-height: 0; padding: 1rem 0; opacity: 1; transform: none; }
  .dx-steps { order: 2; }
  .dx-sec { margin-bottom: 4rem; }
}
@media (max-width: 760px) {
  .dx-cmd .wrap { grid-template-columns: 1fr 1fr; padding: .7rem 1rem; gap: .7rem; }
  .dx-cmd .selector-field:first-child { grid-column: 1 / -1; }
  .explorer-shell { padding: 1.2rem .9rem 3rem; }
  .dx-snapshot { grid-template-columns: 1fr 1fr; }
  .dx-stat { padding: 1.2rem 1rem; }
  .dx-map-frame { padding: 1rem .9rem .8rem; border-radius: 14px; }
  .dx-map-foot { gap: .7rem; }
  .dx-map-foot .map-size-row { display: none; }
  .dx-viz { overflow-x: auto; }
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .dx-js .dx-sec, .dx-js .dx-sec.is-in { opacity: 1; transform: none; animation: none; }
  .dx-js .dx-viz:not(.is-in) .dx-rank-bar,
  .dx-js .dx-viz:not(.is-in) .dx-change-bar { transform: none; }
  .dx-js .dx-viz:not(.is-in) .dx-cmp-bar { transform: none; }
  .dx-js .dx-viz:not(.is-in) .dx-cell,
  .dx-js .dx-viz:not(.is-in) .dx-dot,
  .dx-js .dx-viz:not(.is-in) .dx-area,
  .dx-js .dx-viz:not(.is-in) .dx-rank-val,
  .dx-js .dx-viz:not(.is-in) .dx-rank-num,
  .dx-js .dx-viz:not(.is-in) .dx-change-val,
  .dx-js .dx-map-wrap:not(.is-in) .dx-county { opacity: 1; }
  .dx-viz.is-in *, .dx-map-wrap.is-in * { animation: none !important; }
  .dx-county, .dx-step, .dx-viz { transition: none; }
}

/* Placeholder-data label, shown on the source bar directly under the indicator definition.
   Driven by the is_mock flag on indicator_catalog, which reads the source stamp on the data
   itself, so it disappears on its own once real submissions replace the placeholders. */
.dx-mock { display: inline-flex; align-items: center; gap: .3rem;
  background: var(--gold); color: #fff; font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; padding: .2rem .55rem;
  border-radius: 4px; margin-right: .3rem; white-space: nowrap; cursor: help; }
.dx-mock::before { content: "▲"; font-size: .78em; line-height: 1; }
.dx-mock.is-partial { background: #B4711A; }
.explorer-shell .dx-source .dx-mock { color: #fff; }

/* ============================================================================
   OUR PARTNERS
   The institutions by logo and name only: a wall of tiles under the book. Logos
   are supplied by the partners through the Image Library; a partner without one
   is not shown, so no logo is ever invented.
   ========================================================================== */
.pt-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.pt-wall > li { display: flex; min-width: 0; }
.pt-tile { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; min-height: 13.5rem;
  padding: 1.6rem 1.2rem; text-align: center; background: #fff; border: 1px solid #000; border-radius: 14px; color: #000;
  transition: box-shadow .28s ease, transform .28s cubic-bezier(.22,.72,.28,1); }
a.pt-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(11,44,99,.12); text-decoration: none; }
a.pt-tile:active { transform: translateY(0); }
.pt-tile-logo { display: flex; align-items: center; justify-content: center; height: 96px; }
.pt-tile-logo img { max-width: 168px; max-height: 96px; width: auto; height: auto; object-fit: contain; }
.pt-tile-name { font-family: var(--serif); font-size: 1.02rem; line-height: 1.3; color: #000; text-wrap: balance; }
@media (max-width: 1080px) { .pt-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .pt-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .pt-tile { min-height: 10.5rem; padding: 1.2rem .75rem; gap: .8rem; }
  .pt-tile-logo { height: 70px; }
  .pt-tile-logo img { max-width: 120px; max-height: 70px; }
  .pt-tile-name { font-size: .86rem; }
}

/* ============================================================================
   SCROLL-SCRUBBED VIDEO HERO
   The section is tall; the frame inside it is sticky. That height difference is
   the scroll distance the playhead is mapped onto, so scrolling down runs the
   footage forward and scrolling back runs it in reverse.
   Text sits bottom-left, matching the home page hero.
   ========================================================================== */
.vhero { position: relative; height: 260vh; }
.vhero-sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h));
  overflow: hidden; display: flex; align-items: flex-end; background: var(--navy-800); }
.vhero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; pointer-events: none; }
/* same two-axis wash as the home hero, so the type holds on any frame */
.vhero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(to top, rgba(4,10,26,.94) 0%, rgba(4,10,26,.55) 34%, rgba(4,10,26,.12) 64%, rgba(4,10,26,.35) 100%),
  linear-gradient(to right, rgba(4,10,26,.6) 0%, rgba(4,10,26,0) 58%); }
.vhero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: 5vh; }
.vhero-kicker { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: #FF6076; font-weight: 700; margin: 0 0 .7rem; }
.explorer-shell .vhero-title, .vhero-title { font-family: var(--serif); color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.05; max-width: 15em;
  margin: 0 0 .8rem; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.vhero-sub { color: #DCE6EE; max-width: 42em; font-size: 1.05rem; margin: 0;
  text-shadow: 0 1px 14px rgba(0,0,0,.45); }
/* thin progress rule so the scrub reads as deliberate rather than as a stutter */
.vhero-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255,255,255,.16); z-index: 3; }
.vhero-progress i { display: block; height: 100%; width: 100%; transform: scaleX(0);
  transform-origin: left center; background: linear-gradient(90deg, var(--teal), var(--gold)); }

@media (max-width: 820px) {
  .vhero { height: 200vh; }
  .vhero-sub { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  /* no scroll distance to scrub: collapse to a single stationary frame */
  .vhero { height: auto; }
  .vhero-sticky { position: relative; top: 0; height: clamp(320px, 56vh, 560px); }
  .vhero-progress { display: none; }
}

/* ============================================================================
   RESEARCH PROMO BAND
   Sits under the video hero. Copy and calls to action on the left, a circular
   portrait ringed by a gradient arc on the right, with three chips naming what
   the page is for. The circle alternates between two pictures every 3 seconds.
   ========================================================================== */
.rp { padding: 4.5rem 0 4rem; background: #fff; }
.rp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: 3.5rem; align-items: center; }

/* ---- left ---- */
.rp .rp-title { font-family: var(--sans); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(2rem, 4.1vw, 3.35rem); line-height: 1.12; color: #131A2E; margin: 0 0 1.2rem; }
.rp .rp-title em { font-style: normal; color: #0B2C63; }
.rp-sub { font-size: 1.02rem; line-height: 1.62; color: #5C6784; max-width: 30em; margin: 0 0 1.9rem; }

.rp-cta { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.rp-btn { display: inline-flex; align-items: center; gap: .6rem; border-radius: 999px;
  padding: .85rem 1.6rem; font-size: .92rem; font-weight: 700; white-space: nowrap;
  transition: transform .2s cubic-bezier(.22,.72,.28,1), box-shadow .25s ease, background .25s ease; }
.rp-btn:hover { text-decoration: none; transform: translateY(-2px); }
.rp-btn-ico { width: 1.05em; height: 1.05em; stroke-width: 2.2; }
.rp-btn-go { width: .95em; height: .95em; stroke-width: 2.4; transition: transform .25s ease; }
.rp-btn:hover .rp-btn-go { transform: translateX(4px); }
.rp-btn-primary { background: #0B2C63; color: #fff; box-shadow: 0 8px 22px rgba(11,44,99,.26); }
.rp-btn-primary:hover { color: #fff; background: #0E3577; box-shadow: 0 12px 30px rgba(11,44,99,.34); }
.rp-btn-ghost { background: #fff; color: #0B2C63; border: 1.5px solid rgba(11,44,99,.28); }
.rp-btn-ghost:hover { color: #0B2C63; border-color: #0B2C63; box-shadow: 0 8px 22px rgba(11,44,99,.14); }

/* ---- right: circle ---- */
.rp-right { display: flex; justify-content: center; }
.rp-circle { position: relative; width: min(100%, 420px); aspect-ratio: 1; }
.rp-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rp-ring-track { fill: none; stroke: rgba(11,44,99,.12); stroke-width: 2; }
/* two opposing arcs, matching the reference: the ring is open at the sides */
.rp-ring-arc { fill: none; stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 232 239; stroke-dashoffset: 116; transform-origin: 50% 50%;
  animation: rpSpin 26s linear infinite; }
@keyframes rpSpin { to { transform: rotate(360deg); } }
.rp-photo { position: absolute; inset: 7.5%; border-radius: 50%; overflow: hidden;
  background: #EEF1F8; box-shadow: 0 18px 44px rgba(19,26,46,.16); }
.rp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .9s ease, transform 3.4s ease; }
.rp-photo img.is-on { opacity: 1; transform: scale(1); }

.rp-chip { position: absolute; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .3rem; width: 104px; height: 104px; border-radius: 50%;
  background: #fff; box-shadow: 0 10px 26px rgba(19,26,46,.14); text-align: center;
  animation: rpFloat 6s ease-in-out infinite; }
.rp-chip b { font-size: .72rem; font-weight: 700; color: #131A2E; line-height: 1.25; }
.rp-chip-ico { width: 1.5em; height: 1.5em; color: #0B2C63; stroke-width: 1.7; }
.rp-chip-a { top: 6%;  left: -6%; animation-delay: 0s; }
.rp-chip-b { top: 4%;  right: -8%; animation-delay: -2s; }
.rp-chip-c { bottom: 4%; right: -4%; animation-delay: -4s; }
@keyframes rpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (max-width: 1000px) {
  .rp-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .rp-right { order: -1; }
  .rp-circle { width: min(100%, 340px); }
  .rp-chip { width: 88px; height: 88px; }
}
@media (max-width: 560px) {
  .rp { padding: 3rem 0 2.6rem; }
  .rp-cta { gap: .6rem; }
  .rp-btn { flex: 1 1 100%; justify-content: center; }
  .rp-chip-a { left: -2%; } .rp-chip-b { right: -2%; } .rp-chip-c { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-ring-arc, .rp-chip { animation: none; }
  .rp-photo img { transition: opacity .3s ease; transform: none; }
}

/* ============================================================================
   SPONSORS: BOOK ON A DESK
   The section is tall, the frame inside it sticky, so scrolling turns the pages.
   Logos are real artwork drawn over the photographed desk rather than generated,
   which keeps every emblem accurate and crisp at any size.
   ========================================================================== */
.pt-note { max-width: 720px; margin: 2rem auto 0; text-align: center; font-size: .875rem;
  line-height: 1.6; color: var(--muted); }

.bk { position: relative; height: 240vh;
  --bk-pad-t: max(4vh, 22px); --bk-pad-b: max(20vh, 158px); }
.bk-sticky { position: sticky; top: var(--bk-nav, var(--nav-h));
  height: calc(100vh - var(--bk-nav, var(--nav-h)));
  overflow: hidden; background: #14100D; }
.bk-desk { position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.04); }
.bk-scrim { position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(10,7,5,.86) 0%, rgba(10,7,5,.30) 42%, rgba(10,7,5,.55) 100%); }

.bk-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  perspective: 2200px; padding: var(--bk-pad-t) 1.4rem var(--bk-pad-b); }
/* The book has to be capped by the height it is actually given, not only by width. Sized from
   width alone it grew taller than the sticky frame and the frame's overflow:hidden sheared its
   top edge off under the nav. The third term is the widest the book can be and still fit
   between the nav and the title block. */
.bk-book { position: relative;
  --bk-fit: calc((100vh - var(--bk-nav, var(--nav-h)) - var(--bk-pad-t) - var(--bk-pad-b)) * 1.62);
  width: min(94vw, 940px, var(--bk-fit)); aspect-ratio: 1.62 / 1;
  transform-style: preserve-3d; }
.bk-leaf { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr;
  transform-origin: left center; transform-style: preserve-3d; backface-visibility: hidden;
  transition: opacity .25s linear; will-change: transform; }
.bk-page { background: linear-gradient(180deg, #FCFAF4, #F2EDE1); padding: 1.6rem 1.8rem;
  display: flex; flex-direction: column; box-shadow: inset 0 0 60px rgba(90,70,40,.14); }
.bk-page-l { border-radius: 6px 2px 2px 6px; box-shadow: inset -22px 0 34px -22px rgba(60,42,20,.5); }
.bk-page-r { border-radius: 2px 6px 6px 2px; box-shadow: inset 22px 0 34px -22px rgba(60,42,20,.5); }
.bk-page-label { font-family: var(--serif); font-size: .95rem; color: #6B5836; margin: 0 0 .8rem;
  padding-bottom: .5rem; border-bottom: 1px solid rgba(107,88,54,.26); min-height: 1.5em; }
.bk-page-no { margin: auto 0 0; text-align: right; font-family: var(--num); font-size: .75rem;
  color: #9B8760; letter-spacing: .08em; }

/* One plate per row. Partner marks range from a tall 0.49 to a very wide 4.81, so a
   multi-column grid always left one orphan and made narrow marks look shrunken. A single
   column gives every mark the same box and the page reads like a printed plate index. */
.bk-plates { display: flex; flex-direction: column; justify-content: center; gap: .2rem; flex: 1; }
.bk-plate { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .85rem .4rem; }
.bk-plate + .bk-plate { border-top: 1px solid rgba(107,88,54,.16); }
.bk-plate-img { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 64px; }
.bk-plate-img img { max-width: 74%; max-height: 100%; object-fit: contain; }
.bk-plate-word { font-family: var(--serif); font-size: .95rem; color: #4A3D24; text-align: center; line-height: 1.2; }
.bk-plate figcaption { font-family: var(--serif); font-size: .875rem; line-height: 1.3;
  color: #5B4A2C; text-align: center; letter-spacing: .01em; max-width: 92%; }

.bk-copy { position: absolute; left: 0; right: 0; bottom: 4.5vh; z-index: 4; text-align: center; }
.bk-kicker { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: #E8B84B; font-weight: 700; margin: 0 0 .4rem; }
.bk .bk-title { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: #fff;
  margin: 0 0 .3rem; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.bk-sub { color: #E5DCCB; font-size: .98rem; margin: 0; text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.bk-hint { position: absolute; left: 0; right: 0; bottom: 2.2vh; z-index: 4; text-align: center;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6);
  transition: opacity .4s ease; }
.bk-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255,255,255,.16); z-index: 5; }
.bk-progress i { display: block; height: 100%; width: 100%; transform: scaleX(0);
  transform-origin: left center; background: linear-gradient(90deg, #E8B84B, var(--gold)); }

@media (max-width: 820px) {
  .bk { height: 200vh; --bk-pad-t: max(3vh, 16px); --bk-pad-b: max(22vh, 148px); }
  .bk-book { --bk-fit: calc((100vh - var(--bk-nav, var(--nav-h)) - var(--bk-pad-t) - var(--bk-pad-b)) * 1.3);
    width: min(94vw, var(--bk-fit)); aspect-ratio: 1.3 / 1; }
  .bk-page { padding: 1rem 1rem; }
  .bk-plates { gap: 0; }
  .bk-plate { padding: .45rem .2rem; gap: .3rem; }
  .bk-plate-img { height: 38px; }
  .bk-plate figcaption { font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bk { height: auto; }
  .bk-sticky { position: relative; height: clamp(360px, 60vh, 620px); }
  .bk-leaf:not(:last-child) { display: none; }
}

/* ============================================================================
   ABOUT PAGE — editorial studio idiom
   Oversized uppercase display type on tight negative tracking, parenthesised
   section markers, a near-black/white ground with one red accent, marquee
   strips and scroll-driven reveals. Everything is scoped under .m so none of
   it leaks into the rest of the application.
   ========================================================================= */
.m {
  /* Headings on this page are set in the site serif; the sans carries the body only. */
  --m-head: var(--serif);
  --m-bg: #FFFFFF;
  --m-ink: #0D0D0D;
  --m-accent: #C8102E;        /* Liberian flag red, standing in as the accent */
  --m-grey: #0D0D0D;          /* body copy now matches the headings rather than sitting grey */
  --m-faint: #5A5A5A;         /* small labels: #BCBCBC on white was far below readable contrast */
  --m-line: rgba(13, 13, 13, .13);
  --m-soft: #F4F4F4;
  --m-pad: clamp(1.15rem, 4vw, 4.5rem);
  background: var(--m-bg);
  color: var(--m-ink);
  font-family: var(--sans);
  overflow-x: clip;
}
.m ::selection { background: var(--m-accent); color: #fff; }
/* 1400 left barely 12px of margin on a 1425 viewport, which read as edge-to-edge.
   1240 puts real air on both sides at every desktop width. */
.m-wrap { width: min(1240px, 100%); margin: 0 auto; padding-inline: var(--m-pad); }

/* ---- shared type ---- */
.m .m-display, .m .m-title, .m .m-statement {
  font-family: var(--m-head);
  text-transform: uppercase; font-weight: 700;
  letter-spacing: -.022em; color: var(--m-ink); margin: 0;
}
.m .m-display { font-size: clamp(3.4rem, 13vw, 11.5rem); line-height: .84; font-weight: 700; }
.m .m-title   { font-size: clamp(1.9rem, 5.2vw, 4rem); line-height: .98; font-weight: 700; }
.m .m-statement { font-size: clamp(1.05rem, 2.05vw, 1.85rem); line-height: 1.25; max-width: 44ch; }
.m-body { font-size: clamp(.94rem, 1.05vw, 1.02rem); line-height: 1.62; color: var(--m-ink);
  max-width: 62ch; text-transform: none; letter-spacing: -.01em; margin: 0; }
.m-body + .m-body { margin-top: .9rem; }
.m-body strong { color: var(--m-ink); font-weight: 700; }

/* ---- section marker: (01) ABOUT ————————— ---- */
.m-sec { padding: clamp(3.5rem, 9vh, 8rem) 0; border-top: 1px solid var(--m-line); }
.m-sec-plain { border-top: 0; }
.m-eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(1.6rem, 4vh, 3.2rem);
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.m-eyebrow i { font-style: normal; color: var(--m-accent); font-variant-numeric: tabular-nums; }
.m-eyebrow span { color: var(--m-ink); }
.m-eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--m-line); }

/* ---- marquee ---- */
.m-marquee { overflow: hidden; border-block: 1px solid var(--m-line); padding: .85rem 0; }
.m-marquee-track { display: flex; width: max-content; gap: 2.6rem;
  animation: m-scroll 38s linear infinite; will-change: transform; }
.m-marquee:hover .m-marquee-track { animation-play-state: paused; }
.m-marquee b { font-size: clamp(.82rem, 1.5vw, 1.05rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.01em; white-space: nowrap; display: flex; align-items: center; gap: 2.6rem; }
.m-marquee b::after { content: '\2014'; color: var(--m-accent); }
@keyframes m-scroll { to { transform: translate3d(-50%, 0, 0); } }

/* ---- buttons ---- */
.m .m-btn { display: inline-flex; align-items: center; gap: .7rem; padding: .95rem 1.7rem;
  border-radius: 100px; background: var(--m-ink); color: #fff; font-size: .875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--m-ink);
  text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.m .m-btn:hover { background: var(--m-accent); border-color: var(--m-accent); color: #fff;
  text-decoration: none; }
.m .m-btn svg { width: 15px; height: 15px; flex: none;
  transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.m .m-btn:hover svg { transform: translateX(4px); }
.m .m-btn-ghost { background: transparent; color: var(--m-ink); border-color: var(--m-line); }
.m .m-btn-ghost:hover { background: var(--m-ink); border-color: var(--m-ink); color: #fff; }
.m-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }

/* ---- hero: pinned, and covered by the page as it scrolls ----
   The wrapper is twice the hero's height, so the hero stays put for exactly one viewport
   of scroll while the layer above travels its full height across it. No transform, no fade
   on the hero itself: it simply sits still and is covered. */
.m-hero-pin { position: relative; height: calc((100vh - var(--m-nav, var(--nav-h))) * 2); }
.m-hero { position: sticky; top: var(--m-nav, var(--nav-h)); z-index: 0;
  height: calc(100vh - var(--m-nav, var(--nav-h)));
  display: flex; flex-direction: column;
  padding-top: clamp(1rem, 3vh, 2.4rem); padding-bottom: clamp(1rem, 3vh, 2.4rem); }
/* The covering layer has to begin exactly one viewport down, not two. Left in normal flow
   it would start at the wrapper's full height, which is the same instant sticky releases, so
   it would never travel across the hero. Pulling it up by (100vh - 2*nav) puts its top edge on
   the viewport's bottom edge at rest: from there it rises the hero's full height and lands on
   the hero's top edge at precisely the scroll position where the pin ends. */
.m-over { position: relative; z-index: 1; background: var(--m-bg);
  margin-top: calc(var(--m-nav, var(--nav-h)) * 2 - 100vh); }
.m .m-display sup { font-size: .26em; font-weight: 700; color: var(--m-accent);
  top: -1.55em; }
/* One line under the wordmark, in place of the four-column meta row. The picture below takes
   the height this gives back. */
.m-hero-tag { flex: none; margin: .55rem 0 0; max-width: 54ch;
  font-size: clamp(.875rem, 1.35vw, 1rem); font-weight: 700; line-height: 1.45;
  letter-spacing: .045em; text-transform: uppercase; color: var(--m-ink); }
.m-hero-fig { position: relative; margin: clamp(1rem, 2.5vh, 2rem) 0 0; border-radius: 14px;
  overflow: hidden; flex: 1; min-height: 0; background: var(--m-soft); }
.m-hero-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-hero-fig figcaption { position: absolute; left: 1.2rem; bottom: 1.1rem; color: #fff;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,.75); }

/* ---- two-column layouts ---- */
.m-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 4.5rem); align-items: start; }
.m-split-tight { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 900px) { .m-split, .m-split-tight { grid-template-columns: 1fr; } }

/* ---- quote ---- */
.m-quote { border-block: 1px solid var(--m-line);
  padding: clamp(2rem, 5vh, 3.4rem) 0; margin: clamp(2rem, 5vh, 3.4rem) 0; }
.m-quote blockquote { margin: 0; font-size: clamp(1.25rem, 2.6vw, 2.1rem); line-height: 1.22;
  text-transform: uppercase; letter-spacing: -.022em; font-weight: 500; }
.m-quote blockquote em { font-style: normal; color: var(--m-accent); }
.m-quote figcaption { margin-top: 1.4rem; display: flex; gap: .8rem; align-items: center;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.m-quote figcaption em { font-style: normal; color: var(--m-faint); }

/* ---- stats ---- */
/* ---- numbered alternating list ---- */
.m-zig { border-top: 1px solid var(--m-line); }
.m-zig-row { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem); align-items: start;
  padding: clamp(1.6rem, 3.4vh, 2.8rem) 0; border-bottom: 1px solid var(--m-line); }
.m-zig-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) auto;
  direction: rtl; }
.m-zig-row:nth-child(even) > * { direction: ltr; }
.m-zig-row:nth-child(even) .m-zig-panel { text-align: right; margin-left: auto; }
.m-zig-num { font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--m-accent);
  font-variant-numeric: tabular-nums; border: 1px solid var(--m-line); border-radius: 100px;
  padding: .45rem .8rem; line-height: 1; }
.m-zig-panel { max-width: 62ch; }
.m-zig-meta { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--m-faint); }
.m .m-zig-panel h3 { font-family: var(--m-head); margin: 0 0 .6rem;
  font-size: clamp(1.25rem, 2.8vw, 2.1rem); font-weight: 500; line-height: 1.05;
  letter-spacing: -.022em; text-transform: uppercase; color: var(--m-ink); }
.m-zig-text { margin: 0; font-size: clamp(.88rem, 1.05vw, .98rem); line-height: 1.6;
  color: var(--m-grey); }
@media (max-width: 700px) {
  .m-zig-row, .m-zig-row:nth-child(even) { grid-template-columns: 1fr; direction: ltr; gap: .8rem; }
  .m-zig-row:nth-child(even) .m-zig-panel { text-align: left; margin-left: 0; }
  .m-zig-num { justify-self: start; }
}

/* ---- benchmark list ---- */
.m-list { border-top: 1px solid var(--m-line); }
.m-row { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 2.2fr) auto;
  gap: 1.4rem; align-items: center; padding: 1.15rem .9rem;
  border-bottom: 1px solid var(--m-line); transition: background .3s; }
.m-row:hover { background: var(--m-soft); }
.m-row strong { font-size: .92rem; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; }
.m-row p { margin: 0; font-size: .85rem; color: var(--m-ink); line-height: 1.5; }
.m-tag { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: .35rem .7rem; border-radius: 100px; border: 1px solid var(--m-line); color: var(--m-grey);
  white-space: nowrap; }
.m-row.is-gap { background: var(--m-ink); color: #fff; }
.m-row.is-gap:hover { background: var(--m-ink); }
.m-row.is-gap p { color: rgba(255,255,255,.66); }
.m-row.is-gap .m-tag { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }
@media (max-width: 760px) { .m-row { grid-template-columns: 1fr auto; }
  .m-row p { grid-column: 1 / -1; } }

/* ---- agency logos ---- */
.m-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--m-line); border: 1px solid var(--m-line); border-radius: 12px; overflow: hidden; }
.m-logo { background: var(--m-bg); padding: 1.5rem 1rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .8rem; text-align: center; min-height: 132px;
  transition: background .35s; }
.m-logo:hover { background: var(--m-soft); }
.m-logo img { max-width: 68%; max-height: 46px; object-fit: contain; filter: grayscale(1);
  opacity: .72; transition: filter .35s, opacity .35s; }
.m-logo:hover img { filter: none; opacity: 1; }
.m-logo span { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--m-grey); line-height: 1.35; }

/* ---- dark band ---- */
.m-dark { background: var(--m-ink); color: #fff; border-radius: 16px;
  padding: clamp(1.8rem, 4.5vw, 3.6rem); }
.m .m-dark .m-title, .m .m-dark .m-statement { color: #fff; }
.m-dark .m-body { color: rgba(255,255,255,.68); }
.m-dark .m-body strong { color: #fff; }
.m-dark .m-eyebrow span { color: #fff; }
.m-dark .m-eyebrow::after { background: rgba(255,255,255,.18); }
.m .m-dark .m-btn { background: #fff; color: var(--m-ink); border-color: #fff; }
.m .m-dark .m-btn:hover { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }
.m .m-dark .m-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.m .m-dark .m-btn-ghost:hover { background: #fff; color: var(--m-ink); border-color: #fff; }
.m-checks { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.m-checks li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  padding: .9rem 0; border-top: 1px solid rgba(255,255,255,.14); font-size: .88rem; line-height: 1.5;
  color: rgba(255,255,255,.78); }
.m-checks li i { font-style: normal; color: var(--m-accent); font-weight: 700; font-size: .75rem;
  padding-top: .25rem; font-variant-numeric: tabular-nums; }

/* ---- figures ---- */
.m-fig { margin: 0; border-radius: 12px; overflow: hidden; background: var(--m-soft);
  aspect-ratio: 4 / 3; }
.m-fig img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(.2,.7,.25,1); }
.m-fig:hover img { transform: scale(1.04); }

/* ---- accordion ---- */
.m-acc { border-top: 1px solid var(--m-line); }
.m-acc-item { border-bottom: 1px solid var(--m-line); }
.m-acc-q { width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 1.4rem;
  padding: 1.35rem .2rem; font-family: var(--m-head); font-size: clamp(.94rem, 1.5vw, 1.12rem);
  font-weight: 600; text-transform: uppercase; letter-spacing: -.018em; color: var(--m-ink); }
.m-acc-q:hover { color: var(--m-accent); }
.m-acc-q b { flex: none; width: 26px; height: 26px; border: 1px solid var(--m-line);
  border-radius: 50%; display: grid; place-items: center; font-size: 1rem; font-weight: 400;
  transition: transform .35s cubic-bezier(.2,.7,.25,1), background .3s, color .3s, border-color .3s; }
.m-acc-item.is-open .m-acc-q b { transform: rotate(45deg); background: var(--m-accent);
  border-color: var(--m-accent); color: #fff; }
/* The 0fr -> 1fr grid trick did not resolve to the content height in Chrome here, so the
   panel animates an explicit pixel height that the script sets from the content, then hands
   back to auto so the text can rewrap. */
.m-acc-a { height: 0; overflow: hidden;
  transition: height .42s cubic-bezier(.2,.7,.25,1); }
.m-acc-a p { margin: 0; padding: 0 3rem 1.5rem .2rem; font-size: .9rem; line-height: 1.62;
  color: var(--m-ink); max-width: 78ch; }

/* ---- contact ---- */
.m-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px;
  background: var(--m-line); border: 1px solid var(--m-line); border-radius: 12px; overflow: hidden; }
.m-contact div { background: var(--m-bg); padding: 1.5rem 1.4rem; }
.m-contact h4 { font-family: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--m-faint); margin: 0 0 .6rem; }
.m-contact p { margin: 0; font-size: .92rem; font-weight: 600; letter-spacing: -.01em; }
.m-contact a { color: var(--m-ink); }
.m-contact a:hover { color: var(--m-accent); text-decoration: none; }

/* ---- image reveal: the frame wipes up and the picture settles out of an overscale,
   so a photograph arrives with weight instead of simply fading in ---- */
.m-js .m-shot { overflow: hidden; }
.m-js .m-shot img { transform: scale(1.14); transition: transform 1.4s cubic-bezier(.16,.8,.24,1); }
.m-js .m-shot.is-revealed img { transform: scale(1); }
.m-js .m-shot:hover img { transform: scale(1.04); }

/* ---- scroll reveal ---- */
.m-js .m-up { opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity .8s cubic-bezier(.2,.7,.25,1), transform .8s cubic-bezier(.2,.7,.25,1); }
.m-js .m-up.is-revealed { opacity: 1; transform: none; }
.m-js .m-up-d1 { transition-delay: .08s; }
.m-js .m-up-d2 { transition-delay: .16s; }
.m-js .m-up-d3 { transition-delay: .24s; }

/* line-by-line reveal for the big statements */
/* The display faces run at line-height .84, so glyphs overflow their line box and a
   bare overflow:hidden shears them. The padding pushes the clip edge clear of the glyphs
   and the matching negative margin keeps the layout metrics identical. */
.m-js .m-clip > span { display: block; overflow: hidden;
  padding-block: .18em; margin-block: -.18em; }
.m-js .m-clip > span > span { display: block; transform: translate3d(0, 105%, 0);
  transition: transform .9s cubic-bezier(.2,.75,.2,1); }
.m-js .m-clip.is-revealed > span > span { transform: none; }
.m-js .m-clip.is-revealed > span:nth-child(2) > span { transition-delay: .07s; }
.m-js .m-clip.is-revealed > span:nth-child(3) > span { transition-delay: .14s; }
.m-js .m-clip.is-revealed > span:nth-child(4) > span { transition-delay: .21s; }
.m-js .m-clip.is-revealed > span:nth-child(5) > span { transition-delay: .28s; }

@media (max-width: 820px) {
  .m-hero-pin { height: auto; }
  .m-hero { position: static; height: auto; }
  .m-hero-fig { flex: none; aspect-ratio: 16 / 10; }
  .m-over { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .m-hero-pin { height: auto; }
  .m-hero { position: static; height: auto; }
  .m-hero-fig { flex: none; aspect-ratio: 16 / 9; }
  .m-over { margin-top: 0; }
  .m-js .m-up, .m-js .m-clip > span > span { opacity: 1; transform: none; transition: none; }
  .m-marquee-track { animation: none; }
  .m-bar i { transition: none; }
}

/* ============ DATA EXPLORER PRE-LOADER ============
   A full-bleed curtain over the page, nav included, running a fixed four-second sequence:
   three messages each riding up as the next arrives, under a progress line. It is removed
   from the DOM after it fades so it can never intercept a click, and it is dismissed by a
   hard stop as well as by load, so a stalled asset cannot strand the reader behind it. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.dxload { position: fixed; inset: 0; z-index: 9999; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .58s cubic-bezier(.4,0,.2,1); }
.dxload.is-out { opacity: 0; pointer-events: none; }
.dxload-inner { width: min(78vw, 520px); display: grid; place-items: center; }
.dxload-vid, .dxload-still { width: 100%; height: auto; display: block; }
.dxload-still { display: none; }

/* The line reads "Loading <subject>". Only the subject rolls: it sits in a clipping window
   sized by an invisible copy of the longest one, so the word "Loading" holds still while the
   subjects ride up through the space beside it. */
.dxload-line { display: flex; align-items: baseline; justify-content: center; gap: .42em;
  margin: .5rem 0 0; padding: 0;
  font-family: var(--sans);
  font-size: clamp(.875rem, 1.5vw, .95rem); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #E9EDF2; white-space: nowrap; }
.dxload-lead { flex: none; }
.dxload-roll { position: relative; display: inline-block; overflow: hidden;
  height: 1.75em; }
.dxload-sizer { visibility: hidden; display: block; }
.dxload-msg { position: absolute; left: 0; top: 0; display: block;
  transform: translateY(115%); opacity: 0;
  transition: transform .66s cubic-bezier(.22,.78,.2,1), opacity .4s ease; }
.dxload-msg.is-live { transform: translateY(0); opacity: 1; }
.dxload-msg.is-past { transform: translateY(-115%); opacity: 0; }

.dxload-dots { font-style: normal; display: inline-flex; margin-left: .12em; }
.dxload-dots span { opacity: .22; animation: dxdot 1.5s infinite steps(1, end); }
.dxload-dots span:nth-child(1) { animation-delay: 0s; }
.dxload-dots span:nth-child(2) { animation-delay: .12s; }
.dxload-dots span:nth-child(3) { animation-delay: .24s; }
.dxload-dots span:nth-child(4) { animation-delay: .36s; }
.dxload-dots span:nth-child(5) { animation-delay: .48s; }
.dxload-dots span:nth-child(6) { animation-delay: .60s; }
@keyframes dxdot { 0%, 55% { opacity: .22; } 12%, 42% { opacity: 1; } }

.dxload-bar { width: min(62vw, 300px); height: 2px; margin-top: 1.6rem; border-radius: 2px;
  background: rgba(255, 255, 255, .13); overflow: hidden; }
.dxload-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0);
  transform-origin: left center;
  background: #E9EDF2; }
.dxload.is-go .dxload-bar i { transform: scaleX(1); transition: transform 4s linear; }

@media (prefers-reduced-motion: reduce) {
  /* Hold a frame and cross-fade the messages rather than animate anything. */
  .dxload-vid { display: none; }
  .dxload-still { display: block; }
  .dxload, .dxload-msg { transition: opacity .3s linear; }
  .dxload-msg, .dxload-msg.is-live, .dxload-msg.is-past { transform: none; }
  .dxload-dots span { animation: none; opacity: .7; }
  .dxload.is-go .dxload-bar i { transition: none; transform: scaleX(1); }
}

/* ============ DATA EXPLORER: category filter, compact year, full screen ============ */

/* The bar now carries five fields, so the year control gives up its slack: it is the only one
   that does not have to hold a name. */
.dx-cmd .dx-cmd-year { min-width: 0; }
.dx-cmd .dx-cmd-year #year-slider { width: 100%; }
.dx-cmd .selector-field { min-width: 0; }

/* Second line on a snapshot card, shown only when a comparison area is set. */
.dx-stat-cmp { display: block; margin-top: .35rem; padding-top: .35rem;
  border-top: 1px dashed var(--line); font-size: .875rem; line-height: 1.35; color: var(--muted); }
.dx-stat-cmp b { font-family: var(--num); font-variant-numeric: tabular-nums;
  color: var(--gold); font-weight: 700; }

/* Full screen control at the right of each visual's bar. */
.dx-viz-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dx-expand { flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--muted);
  display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; }
.dx-expand:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.dx-expand svg { width: 15px; height: 15px; }

/* The stage. */
.dx-fs { position: fixed; inset: 0; z-index: 9998; background: var(--paper);
  display: flex; flex-direction: column; opacity: 0; transition: opacity .28s ease; }
.dx-fs.is-open { opacity: 1; }
.dx-fs[hidden] { display: none; }
.dx-fs-bar { flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .8rem clamp(.9rem, 3vw, 1.8rem);
  border-bottom: 1px solid var(--line); background: var(--paper); }
.dx-fs-title { font-family: var(--serif); font-size: 1.02rem; color: var(--navy); font-weight: 600; }
.dx-fs-close { width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; }
.dx-fs-close:hover { background: var(--red); border-color: var(--red); color: #fff; }
.dx-fs-close svg { width: 17px; height: 17px; }
.dx-fs-body { flex: 1; min-height: 0; overflow: auto; padding: clamp(.9rem, 2.5vw, 2rem); }
/* Expanded, the visual ignores its size-slider width and uses the room it has. */
.dx-fs-body > .dx-viz, .dx-fs-body > .dx-map-wrap { width: 100% !important; max-width: none; }
body.dx-fs-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .dx-fs { transition: none; } }

/* ---- comparison marks on the views that did not carry them ----
   Same convention as the map and the ranking already use: the focus location in gold, the
   comparison area in navy with a dashed edge, so the pair reads the same way everywhere. */
.dx-change-row.is-compare .dx-rank-name { font-weight: 700; fill: var(--navy-600); }
.dx-change-row.is-compare .dx-change-bar { stroke: var(--navy-600); stroke-width: 1.5; stroke-dasharray: 4 3; }

.dx-heat-row { fill: none; stroke-width: 2; }
.dx-heat-row.is-focus { stroke: var(--gold); }
.dx-heat-row.is-compare { stroke: var(--navy-600); stroke-dasharray: 5 3; }
.dx-rank-name.is-focus { font-weight: 800; fill: var(--gold); }
.dx-rank-name.is-compare { font-weight: 700; fill: var(--navy-600); }

.dx-table-wrap .data-table tr.is-compare td { background: var(--teal-soft); font-weight: 600; }

/* Below this the five columns cannot hold their minimums, so the bar folds deliberately
   rather than overflowing. */
@media (max-width: 1080px) {
  .dx-cmd .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dx-cmd .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .dx-cmd .wrap { grid-template-columns: 1fr; }
}

/* ---- selected rows have to stay readable on their own highlight ----
   .dx-black repaints every .xdd-item and .tree-item to #000 at equal specificity but later in
   the file, so it was overriding the white the .selected rules already set: black text on a
   navy fill. The tree's selected span was worse, painted --teal-dark on --navy. These win it
   back for the one state where the background is dark. */
.dx-black .xdd-item.selected,
.dx-black .xdd-item.selected * { color: #fff; }
.dx-black .xdd-item.selected .grp { color: #C3D2E6; }
/* hovering the selected row must not drop it back to a light fill with white text */
.xdd-item.selected:hover, .dx-black .xdd-item.selected:hover { background: var(--navy-600); color: #fff; }

/* ============ VIEW 01: pinned map stage ============
   The section holds still for the length of its three readings. Previously the map was sticky
   while three 58vh steps scrolled past it, which meant the map competed with the steps for
   height and never sat wholly in the viewport. Now the whole stage pins, the map fills the
   space left under the heading, and the readings cross-fade in place. */
.dx-geo-pin { position: relative; height: calc((100vh - var(--dx-nav, var(--nav-h))) * 2.8); }
.dx-geo-sticky { position: sticky; top: var(--dx-nav, var(--nav-h));
  height: calc(100vh - var(--dx-nav, var(--nav-h)));
  display: flex; flex-direction: column; gap: .8rem; padding: .9rem 0 1.1rem; }
.dx-geo-sticky .dx-view-head { flex: none; margin-bottom: 0; }
.dx-geo-sticky .dx-map-stage { flex: 1; min-height: 0; align-items: stretch; }

/* left column: the readings stack in one place, with a progress marker beneath */
.dx-steps-col { position: relative; display: flex; flex-direction: column; min-height: 0; }
.dx-geo-sticky .dx-steps { position: relative; flex: 1; min-height: 0; display: block; }
.dx-geo-sticky .dx-step { position: absolute; inset: 0; min-height: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .45s ease, transform .5s cubic-bezier(.22,.72,.28,1); }
.dx-geo-sticky .dx-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.dx-step-dots { flex: none; display: flex; gap: .38rem; padding-top: .9rem; }
.dx-step-dots i { width: 26px; height: 3px; border-radius: 2px; background: var(--line);
  transition: background .35s ease; }
.dx-step-dots i.is-active { background: var(--gold); }

/* the map takes every pixel the heading and footer leave, and fits whole inside it */
.dx-geo-sticky .dx-map-sticky { position: static; min-height: 0; display: flex; }
.dx-geo-sticky .dx-map-frame { flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 1rem 1.1rem .7rem; }
.dx-geo-sticky .dx-map { flex: 1; min-height: 0; display: flex;
  align-items: center; justify-content: center; }
.dx-geo-sticky .dx-map-wrap { height: 100%; display: flex; align-items: center; }
/* preserveAspectRatio is xMidYMid meet, so the whole map letterboxes inside this box
   rather than being cropped by it */
.dx-geo-sticky .dx-map-wrap svg { width: 100%; height: 100%; max-height: none; }
.dx-geo-sticky .dx-map-foot { flex: none; }

/* Short screens, narrow screens and reduced motion all opt out: no pin, readings stacked. */
@media (max-width: 1000px), (max-height: 620px) {
  .dx-geo-pin { height: auto; }
  .dx-geo-sticky { position: static; height: auto; display: block; }
  .dx-geo-sticky .dx-steps { position: static; }
  .dx-geo-sticky .dx-step { position: static; opacity: 1; transform: none; pointer-events: auto;
    padding: 1rem 0; }
  .dx-geo-sticky .dx-map-wrap { height: auto; }
  .dx-geo-sticky .dx-map-wrap svg { height: auto; max-height: 62vh; }
  .dx-step-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-geo-pin { height: auto; }
  .dx-geo-sticky { position: static; height: auto; display: block; }
  .dx-geo-sticky .dx-steps { position: static; }
  .dx-geo-sticky .dx-step { position: static; opacity: 1; transform: none; pointer-events: auto;
    padding: 1rem 0; transition: none; }
  .dx-geo-sticky .dx-map-wrap { height: auto; }
  .dx-geo-sticky .dx-map-wrap svg { height: auto; max-height: 62vh; }
}

/* ============ ABOUT: the three reference layouts ============
   A warm accent block, a soft organic mask and an offset picture card, reused down the page so
   the sections read as one family rather than ten separate ideas. */
.m { --m-peach: #F7DCD3; --m-peach-ink: #E9B7A6; }

/* ---- Style A: statement beside a three-picture collage ---- */
.m-collage { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
.m-collage-copy .m-body { margin-top: 1.1rem; }
.m-collage-grid { display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(.6rem, 1.1vw, 1rem); aspect-ratio: 1 / .95; }
.m-collage-grid figure { margin: 0; border-radius: 16px; overflow: hidden;
  background: var(--m-soft); }
.m-collage-grid figure:nth-child(1) { grid-column: 1; grid-row: 1; }
.m-collage-grid figure:nth-child(2) { grid-column: 1; grid-row: 2; }
/* the tall plate, holding both rows on the right, as in the reference */
.m-collage-grid figure:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
.m-collage-grid img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(.2,.7,.25,1); }
.m-collage-grid figure:hover img { transform: scale(1.05); }

/* ---- Style B: a picture card offset over an accent block, with a floating note ---- */
.m-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.m-flow-flip .m-flow-media { order: -1; }
.m-flow-copy .m-body { margin-top: 1.1rem; }
.m-flow-media { position: relative; padding: 0 0 clamp(1rem, 2.6vw, 2.2rem)
  clamp(1rem, 2.6vw, 2.2rem); }
/* the block sits under and behind, offset down-left, exactly as the reference stacks them */
.m-flow-block { position: absolute; left: 0; bottom: 0; width: 62%; height: 62%;
  background: var(--m-peach); border-radius: 16px; z-index: 0; }
.m-flow-fig { position: relative; z-index: 1; margin: 0; border-radius: 16px; overflow: hidden;
  aspect-ratio: 3 / 3.6; background: var(--m-soft);
  box-shadow: 0 24px 60px rgba(13, 13, 13, .13); }
.m-flow-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-flow-chip { position: absolute; z-index: 2; right: -.4rem; top: 12%;
  display: flex; flex-direction: column; gap: .1rem;
  background: #fff; border-radius: 12px; padding: .6rem .85rem;
  box-shadow: 0 14px 38px rgba(13, 13, 13, .16);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--m-grey); }
.m-flow-chip b { font-family: var(--num); font-size: 1.02rem; letter-spacing: -.02em;
  color: var(--m-accent); text-transform: none; }

/* ---- Style C: the organic mask ---- */
.m-blob { position: relative; }
.m-blob::before { content: ''; position: absolute; left: -6%; bottom: -5%; width: 62%; height: 58%;
  background: var(--m-peach); z-index: 0;
  border-radius: 52% 48% 43% 57% / 46% 54% 46% 54%; }
.m-blob-fig { position: relative; z-index: 1; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 3.2; background: var(--m-soft);
  /* eight-value radius reads as a hand-drawn blob without needing an SVG mask */
  border-radius: 56% 44% 47% 53% / 44% 51% 49% 56%; }
.m-blob-fig img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s cubic-bezier(.2,.7,.25,1); }
.m-blob-fig:hover img { transform: scale(1.05); }

/* ---- the six cards, rounded and roomy rather than a hairline grid ---- */
.m-grid6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.7rem, 1.2vw, 1rem); }
.m-grid6 .m-card { border: 1px solid var(--m-line); border-radius: 14px;
  transition: transform .4s cubic-bezier(.2,.7,.25,1), box-shadow .4s ease, background .35s ease; }
.m-grid6 .m-card:hover { transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(13, 13, 13, .09); background: var(--m-bg); }

@media (max-width: 900px) {
  .m-collage, .m-flow { grid-template-columns: 1fr; }
  .m-flow-flip .m-flow-media { order: 0; }
  .m-collage-grid { aspect-ratio: 1 / .8; }
  .m-grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .m-grid6 { grid-template-columns: 1fr; }
  .m-flow-chip { right: 0; top: 6%; }
}
@media (prefers-reduced-motion: reduce) {
  .m-collage-grid figure:hover img, .m-blob-fig:hover img { transform: none; }
  .m-grid6 .m-card:hover { transform: none; }
}

/* ---- policy commitments: an emblem card per row, alternating ---- */
.m-pol { border-top: 1px solid var(--m-line); }
.m-pol-row { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center;
  padding: clamp(1.6rem, 3.6vh, 2.8rem) 0; border-bottom: 1px solid var(--m-line); }
.m-pol-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, .42fr); }
.m-pol-row:nth-child(even) .m-pol-media { order: 2; }
.m-pol-row:nth-child(even) .m-pol-copy { text-align: right; }
.m-pol-row:nth-child(even) .m-pol-block { left: auto; right: 0; }

.m-pol-media { position: relative; padding: 0 0 .9rem .9rem; }
.m-pol-block { position: absolute; left: 0; bottom: 0; width: 68%; height: 68%;
  background: var(--m-peach); border-radius: 12px; z-index: 0; }
.m-pol-emblem { position: relative; z-index: 1; display: grid; place-items: center;
  aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--m-line); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(13, 13, 13, .10); overflow: hidden; padding: 1rem; }
.m-pol-emblem img { max-width: 62%; max-height: 62%; object-fit: contain; }
.m-pol-emblem .liberia-flag { width: 62%; height: auto; border-radius: 2px; }
.m-pol-mono { font-family: var(--sans);
  font-size: clamp(.9rem, 1.9vw, 1.35rem); font-weight: 700; letter-spacing: -.02em;
  color: var(--m-ink); }

.m-pol-num { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  color: var(--m-accent); font-variant-numeric: tabular-nums; margin-bottom: .5rem; }
.m-pol-meta { margin: 0 0 .45rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--m-faint); }
.m .m-pol-copy h3 { font-family: var(--m-head); margin: 0 0 .55rem;
  font-size: clamp(1.15rem, 2.4vw, 1.85rem); font-weight: 700; line-height: 1.08;
  letter-spacing: -.022em; text-transform: uppercase; color: var(--m-ink); }
.m-pol-text { margin: 0; font-size: clamp(.86rem, 1.02vw, .96rem); line-height: 1.6;
  color: var(--m-ink); max-width: 60ch; }
.m-pol-row:nth-child(even) .m-pol-text { margin-left: auto; }

@media (max-width: 760px) {
  .m-pol-row, .m-pol-row:nth-child(even) { grid-template-columns: 1fr; gap: 1rem; }
  .m-pol-row:nth-child(even) .m-pol-media { order: 0; }
  .m-pol-row:nth-child(even) .m-pol-copy { text-align: left; }
  .m-pol-row:nth-child(even) .m-pol-text { margin-left: 0; }
  .m-pol-media { max-width: 190px; }
}

/* The card headings had no rule of their own and were falling through to the global h3, which
   is set in the display serif; the accordion question sat a weight light of the others. */
.m .m-card h3 { font-family: var(--m-head); font-weight: 700; }
.m .m-acc-q { font-weight: 700; }

/* ---- restored: hero row, the two-column split, and the reveal transitions ---- */
/* ---- hero: wordmark and line on one row ---- */
.m-hero-line { display: flex; align-items: flex-end; gap: clamp(.9rem, 2.4vw, 2.4rem);
  flex-wrap: wrap; }
.m-hero-line .m-display { flex: 0 0 auto; }
.m-hero-quote { flex: 1 1 260px; min-width: 0; margin: 0 0 .55em;
  font-size: clamp(.82rem, 1.28vw, 1.06rem); font-weight: 600; line-height: 1.45;
  letter-spacing: -.005em; color: var(--m-ink); max-width: 34ch; text-wrap: balance; }

/* ---- half and half: argument left, picture holding the right ---- */
/* The copy column takes the larger share and the gap narrows, so the three-line heading
   sets on exactly three lines and the text may run close to the picture. */
.m-halves { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  gap: clamp(1rem, 2.2vw, 2.2rem); align-items: start; }
.m-halves-text .m-title { font-size: clamp(1.7rem, 3.5vw, 2.9rem); }
.m-halves-text .m-title > span > span { white-space: nowrap; }
.m-halves-fig { margin: 0; border-radius: 14px; overflow: hidden; background: var(--m-soft);
  /* rides with the column rather than ending early, and holds while the text scrolls past */
  position: sticky; top: calc(var(--m-nav, var(--nav-h)) + 2rem);
  height: min(74vh, 640px); }
.m-halves-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .m-halves { grid-template-columns: 1fr; }
  .m-halves-fig { position: static; height: auto; aspect-ratio: 4 / 3; order: -1; }
}

/* ---- exits: the counterpart to the entry reveal ----
   Deliberately lighter than the entrance. A block that is on its way past the top edge lifts
   and softens instead of simply vanishing at the boundary; it is restored the moment it comes
   back into view, so scrolling up replays rather than leaving holes. */
.m-js .m-up.is-leaving,
.m-js .m-clip.is-leaving { opacity: .18; transform: translate3d(0, -20px, 0); }
.m-js .m-up, .m-js .m-clip { transition: opacity .8s cubic-bezier(.2,.7,.25,1),
  transform .8s cubic-bezier(.2,.7,.25,1); }

@media (prefers-reduced-motion: reduce) {
  .m-js .m-up.is-leaving, .m-js .m-clip.is-leaving { opacity: 1; transform: none; }
}

/* ============ ABOUT: sections stack ============
   Each section pins under the nav and the next slides up over it. Sticky does the work, so
   there is no scroll maths to drift: what makes it read is that every section carries an
   opaque ground and stands at least one screen tall, so nothing shows through the seam. */
.m-over .m-sec {
  position: sticky;
  top: var(--m-nav, var(--nav-h));
  min-height: calc(100vh - var(--m-nav, var(--nav-h)));
  background: var(--m-bg);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(1.2rem, 3.5vh, 2.6rem);
  border-top: 1px solid var(--m-line);
}
/* the seam reads as a card edge lifting over the one beneath */
.m-over .m-sec::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 22px;
  background: linear-gradient(to bottom, rgba(13,13,13,.06), transparent);
  pointer-events: none;
}

/* pictures are capped against the screen so a pinned section never hides part of one */
.m-over .m-flow-fig { aspect-ratio: auto; height: min(52vh, 430px); }
.m-over .m-blob-fig { aspect-ratio: auto; height: min(54vh, 440px); }
.m-over .m-collage-grid { aspect-ratio: auto; height: min(48vh, 400px); }
.m-over .m-fig { max-height: min(42vh, 340px); }
.m-over .m-fig img { height: 100%; object-fit: cover; }

/* ---- commitments as a six-box grid ---- */
.m-polgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.6rem, 1vw, .9rem); }
.m-polbox { border: 1px solid var(--m-line); border-radius: 14px;
  padding: clamp(.85rem, 1.4vw, 1.15rem); display: flex; flex-direction: column;
  background: var(--m-bg);
  transition: transform .4s cubic-bezier(.2,.7,.25,1), box-shadow .4s ease; }
.m-polbox:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(13,13,13,.09); }
.m-polbox-top { display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .6rem; }
.m-polbox-emblem { display: grid; place-items: center; width: 54px; height: 40px;
  border-radius: 8px; background: var(--m-peach); overflow: hidden; flex: none; }
.m-polbox-emblem img { max-width: 74%; max-height: 74%; object-fit: contain; }
.m-polbox-emblem .liberia-flag { width: 70%; height: auto; border-radius: 2px; }
.m-polbox-emblem .m-pol-mono { font-size: .75rem; font-weight: 700; color: var(--m-ink); }
.m-polbox-num { font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  color: var(--m-accent); font-variant-numeric: tabular-nums; }
.m-polbox-meta { margin: 0 0 .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--m-faint); }
.m .m-polbox h3 { font-family: var(--m-head); font-weight: 700; margin: 0 0 .45rem;
  font-size: clamp(.95rem, 1.25vw, 1.1rem); line-height: 1.15; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--m-ink); }
.m-polbox-text { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--m-ink); }

@media (max-width: 900px) { .m-polgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .m-polgrid { grid-template-columns: 1fr; } }

/* Under a short screen or reduced motion the stack unpins and the page simply scrolls. */
@media (max-height: 620px), (prefers-reduced-motion: reduce) {
  .m-over .m-sec { position: static; min-height: 0; display: block; }
  .m-over .m-sec::before { display: none; }
  .m-over .m-flow-fig, .m-over .m-blob-fig, .m-over .m-collage-grid { height: auto; }
}

/* Three sections ran 7-46px past one screen, which a pinned stack would clip. These pull the
   overflow back rather than letting the covering section cut them: the peer table and the FAQ
   tighten their rows, and the collage gives back a little height. */
.m-over .m-list .m-row { padding-block: .85rem; }
.m-over .m-list .m-row p { font-size: .78rem; line-height: 1.45; }
.m-over .m-acc-q { padding-block: 1.05rem; }
.m-over .m-acc-a p { padding-bottom: 1.1rem; }
.m-over .m-collage-grid { height: min(42vh, 350px); }
.m-over .m-grid6 .m-card { padding: clamp(1rem, 1.7vw, 1.5rem); }
.m-over .m-grid6 .m-card p { font-size: .78rem; line-height: 1.45; }

/* Pinned sections get a tighter vertical rhythm than free-scrolling ones: the gaps between
   marker, block and grid are what pushed "What we do" past a screen, not the picture, whose
   row is set by the taller copy column beside it. */
.m-over .m-sec > .m-eyebrow { margin-bottom: clamp(.7rem, 1.8vh, 1.3rem); }
.m-over .m-sec > .m-collage,
.m-over .m-sec > .m-flow,
.m-over .m-sec > .m-split { margin-bottom: clamp(.9rem, 2vh, 1.5rem) !important; }
.m-over .m-grid6 .m-card { padding: clamp(.8rem, 1.3vw, 1.15rem); }
.m-over .m-grid6 .m-card h3 { font-size: clamp(.9rem, 1.2vw, 1.05rem); }

/* ---- a section head that sets its title on one line with the note beneath ---- */
.m-sechead { margin-bottom: clamp(.9rem, 2vh, 1.5rem); }
.m .m-title-1l { font-size: clamp(1.4rem, 3.4vw, 2.9rem); line-height: 1.06; }
.m-sechead .m-body { margin-top: .5rem; max-width: 70ch; }

/* the peer table rides in the column beside the picture, so it has to be compact */
.m-list-tight { border-top: 1px solid var(--m-line); }
.m-list-tight .m-row { grid-template-columns: minmax(96px, .8fr) minmax(0, 1.9fr) auto;
  gap: .7rem; padding: .5rem .5rem; }
.m-list-tight .m-row strong { font-size: .78rem; }
.m-list-tight .m-row p { font-size: .75rem; line-height: 1.4; font-weight: 500; }
.m-list-tight .m-tag { font-size: .75rem; padding: .18rem .45rem; font-weight: 700; }
.m-list-tight .m-row { padding: .42rem .45rem; }

/* "What we do" carries a collage and six cards in one pinned screen and was the last section
   still running past it; the collage gives back the remaining height. */
.m-over .m-collage-grid { height: min(36vh, 300px); }
.m-over .m-grid6 { gap: clamp(.5rem, .8vw, .7rem); }

/* Headings that sit in a half-width column need a size set against that column, not the page.
   At the full display size "Providing Liberia ICT" was wider than its ~570px column, so each
   written line wrapped into two and the heading stood four lines tall — which is what pushed
   the section past one screen, not the collage. */
.m-collage-copy .m-title,
.m-flow-copy .m-title { font-size: clamp(1.35rem, 2.5vw, 2.25rem); line-height: 1.08; }
.m-over .m-collage-grid { height: min(42vh, 340px); }

/* ---- small type: deeper black and a heavier weight so it reads at 12px ---- */
.m { --m-faint: #3A3A3A; }
.m-eyebrow, .m-polbox-meta, .m-polbox-num, .m-pol-meta, .m-stat h4,
.m-hero-meta h4, .m-tag, .m-card-meta, .m-card-top, .m-collage-copy .m-body,
.m-list .m-row p, .m-polbox-text, .m-card p, .m-acc-a p, .m-body {
  color: var(--m-ink); font-weight: 500;
}
.m-eyebrow, .m-polbox-meta, .m-pol-meta, .m-card-top, .m-stat h4, .m-hero-meta h4 { font-weight: 700; }
.m-body strong, .m-polbox-text strong { font-weight: 800; }

/* ---- peer flags ---- */
.m-peer-mark { display: inline-flex; margin-right: .45rem; vertical-align: -2px; }
.m-peer-flag, .m-peer-mark .liberia-flag { width: 20px; height: auto; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(13,13,13,.18); }
.m-list-tight .m-row strong { display: flex; align-items: center; }

/* ---- headings in UN blue ----
   #009EDB is the UN's own brand blue. Applied to the heading family only: body copy stays the
   deep black it was set to, so the contrast between the two is what carries the hierarchy. */
.m { --m-head-blue: #009EDB; }
.m .m-display,
.m .m-title,
.m .m-statement,
.m .m-card h3,
.m .m-polbox h3,
.m .m-pol-copy h3,
.m .m-zig-panel h3,
.m .m-acc-q,
.m .m-collage-copy .m-title,
.m .m-flow-copy .m-title,
.m .m-halves-text .m-title { color: var(--m-head-blue); }

/* the accordion's open/close control follows its question */
.m .m-acc-q:hover { color: var(--m-accent); }


/* ============================================================
   DATA LANDSCAPE  (/landscape, engine: public/landscape.js)
   Liberia's counties as a floor, one tower per county sized by the selected indicator.
   ============================================================ */

/* the bar carries four fields here, not the Explorer's five */
.dx-cmd.lsc-cmd .wrap {
  grid-template-columns: minmax(168px, 1fr) minmax(220px, 1.6fr) minmax(120px, .6fr) minmax(128px, .5fr);
}
.lsc-cmd-play { display: flex; align-items: flex-end; }
.lsc-play { display: inline-flex; align-items: center; gap: .45rem; width: 100%; justify-content: center;
  background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 9px;
  padding: .62rem .8rem; font: 700 .82rem/1 var(--sans); letter-spacing: .04em; cursor: pointer;
  transition: background .18s ease, transform .18s ease; }
.lsc-play:hover { background: var(--navy-600); }
.lsc-play:active { transform: translateY(1px); }
.lsc-play svg { width: 15px; height: 15px; }
.lsc-play.is-playing { background: var(--gold); border-color: var(--gold); }
.lsc-play.is-playing svg { animation: lscSpin 1.8s linear infinite; }
@keyframes lscSpin { to { transform: rotate(360deg); } }

.lsc-wrap { padding-top: 1.6rem; }
.lsc-head { max-width: 62rem; margin-bottom: 1.4rem; }

/* ---- stage: the map, and the ranked column beside it ---- */
.lsc-stage { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 1.5rem; align-items: start; }
.lsc-map { position: relative; background: linear-gradient(#FCFDFF, #EEF2F9);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: .5rem .4rem .2rem; }
.lsc-map.is-loading { opacity: .45; }
.lsc-svg { display: block; width: 100%; height: auto; }

.lsc-tile { cursor: pointer; transition: fill .18s ease; }
.lsc-tile.is-nodata { cursor: default; }
.lsc-tower { cursor: pointer; }
.lsc-tower:focus { outline: none; }
.lsc-tower:focus-visible .lsc-f-t { stroke: var(--gold); stroke-width: 3; stroke-opacity: 1; }

/* ---- the national reference tag, pinned to the floating outline ---- */
.lsc-nat { position: absolute; transform: translateY(-50%); pointer-events: none;
  display: flex; flex-direction: column; gap: .1rem; white-space: nowrap; }
.lsc-nat i { font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); }
.lsc-nat b { font: 800 .84rem/1 var(--num); color: var(--teal); }

/* ---- the card that follows the county you are pointing at ---- */
.lsc-card { position: absolute; z-index: 5; width: 178px; pointer-events: none;
  background: var(--navy-800); color: #fff; border-radius: 10px; padding: .6rem .7rem .65rem;
  box-shadow: 0 14px 30px rgba(7,26,62,.34); transform: translate(12px, -104%); }
.lsc-card.flip { transform: translate(calc(-100% - 12px), -104%); }
.lsc-card h4 { margin: 0; font: 700 .92rem/1.2 var(--serif); letter-spacing: .01em; }
.lsc-card-v { font: 800 1.5rem/1 var(--num); color: #9FD0FF; margin: .3rem 0 .1rem; }
.lsc-card-u { font-size: .66rem; color: #A9B8D2; font-weight: 600; }
.lsc-card-cmp { display: inline-block; margin-top: .4rem; font-size: .66rem; font-weight: 800;
  letter-spacing: .03em; padding: .15rem .38rem; border-radius: 4px; }
.lsc-card-cmp.up { background: rgba(159,208,255,.18); color: #9FD0FF; }
.lsc-card-cmp.down { background: rgba(255,158,158,.16); color: #FFB3B3; }
.lsc-card-none { margin: .3rem 0 0; font-size: .7rem; color: #A9B8D2; }

.lsc-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); margin: 0;
  font-size: .85rem; color: var(--muted); font-weight: 600; text-align: center; max-width: 24rem; }
.lsc-status:empty { display: none; }
.lsc-empty { padding: 3rem 1.5rem; text-align: center; color: var(--muted); }

/* ---- ranked column ---- */
.lsc-side { position: sticky; top: calc(var(--nav-h) + 5.4rem); }
.lsc-side-head h2 { margin: 0 0 .2rem; font: 700 1.02rem/1.2 var(--serif); }
.lsc-side-head p { margin: 0 0 .7rem; font-size: .74rem; color: var(--muted); line-height: 1.45; }
.lsc-rank { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  overflow: hidden; }
.lsc-rank-row { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline;
  padding: .42rem .7rem; font-size: .8rem; font-weight: 500; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; transition: background .14s ease, color .14s ease; }
.lsc-rank-row:last-child { border-bottom: 0; }
.lsc-rank-row:hover { background: var(--teal-soft); }
.lsc-rank-row.is-on { background: var(--gold-soft); color: var(--gold); font-weight: 800; }
.lsc-rank-v { font-family: var(--num); font-weight: 700; color: var(--muted); }
.lsc-rank-row.is-on .lsc-rank-v { color: var(--gold); }
.lsc-go { display: block; margin-top: .8rem; text-align: center; background: var(--navy); color: #fff;
  border-radius: 8px; padding: .72rem .8rem; font: 700 .78rem/1.2 var(--sans); letter-spacing: .06em;
  text-decoration: none; transition: background .18s ease; }
.lsc-go:hover { background: var(--navy-600); }

/* ---- how to read this ---- */

@media (max-width: 1080px) {
  .lsc-stage { grid-template-columns: 1fr; }
  .lsc-side { position: static; }
  .lsc-rank { max-height: 320px; overflow-y: auto; }
}
@media (max-width: 760px) {
  .dx-cmd.lsc-cmd .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lsc-card { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .lsc-tile, .lsc-rank-row, .lsc-go, .lsc-play { transition: none; }
  .lsc-play.is-playing svg { animation: none; }
}


/* ---- Data Landscape: fit, hover behaviour and full screen ----
   The map is capped to the viewport so the whole country and its tallest tower are on
   screen at once; the SVG letterboxes inside that cap rather than being cut off. */
.lsc-svg { max-height: calc(100vh - 15rem); }
.lsc-map { display: flex; flex-direction: column; justify-content: center; }

/* the control sits over the top-right corner of the map */
.lsc-fs { position: absolute; top: .6rem; right: .6rem; z-index: 7;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 8px;
  color: var(--navy); cursor: pointer; box-shadow: 0 1px 3px rgba(11,44,99,.12);
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.lsc-fs:hover { background: var(--navy); color: #fff; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11,44,99,.22); }
.lsc-fs svg { width: 17px; height: 17px; display: block; }
.lsc-ico { display: inline-flex; }
.lsc-ico-out { display: none; }
.lsc-map.is-fs .lsc-ico-in { display: none; }
.lsc-map.is-fs .lsc-ico-out { display: inline-flex; }

/* full screen, as a class rather than the Fullscreen API so it also works inside a frame */
/* full screen now lives in .lsc-deck, below */
body.lsc-locked { overflow: hidden; }

/* ---- hover: the county you point at steps forward and the rest step back ---- */
.lsc-tower, .lsc-tile { transition: opacity .22s ease, filter .22s ease; }
.lsc-tower.is-dim, .lsc-tile.is-dim { opacity: .38; }
.lsc-tower.is-on { filter: drop-shadow(0 6px 10px rgba(191,10,48,.34)); }
.lsc-tile.is-on { filter: drop-shadow(0 0 4px rgba(200,16,46,.35)); }
.lsc-tower:hover { filter: drop-shadow(0 6px 12px rgba(11,44,99,.30)); }

/* the plumb line from the apex of the selected tower down to its own county tile */
.lsc-drop line { stroke: var(--gold); stroke-opacity: .75; }
.lsc-drop circle { fill: var(--gold); }

/* ---- the national row, stated beside the county list ---- */
.lsc-natnote { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 .7rem;
  padding: .5rem .6rem; background: var(--teal-soft); border-radius: 7px; }
.lsc-natnote i { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.lsc-natnote b { font: 800 .95rem/1 var(--num); color: var(--navy); font-variant-numeric: tabular-nums; }
.lsc-natnote span { font-size: .66rem; color: var(--muted); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .lsc-tower, .lsc-tile, .lsc-fs { transition: none; }
}


/* A class sets display on these, which outranks the [hidden] attribute's own rule, so
   hidden alone left them on screen. State it explicitly. */
.lsc-nat[hidden], .lsc-natnote[hidden], .lsc-card[hidden] { display: none; }

/* With the frame fitted tightly, a tall county's apex sits near the top edge, so the card
   would hang off it. Drop the card below the apex in that case. */
.lsc-card.flip-y { transform: translate(12px, 10px); }
.lsc-card.flip.flip-y { transform: translate(calc(-100% - 12px), 10px); }

/* The global heading colour was winning here, putting navy text on the navy card. */
.lsc-card h4 { color: #fff; }


/* ============================================================
   DATA EXPLORER · play the years, and race the ranking bars
   ============================================================ */

/* the Play control, matching the one on the Data Landscape */
.dx-cmd-play { display: flex; flex-direction: column; }
.dx-play { display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  width: 100%; background: var(--navy); color: #fff; border: 1px solid var(--navy);
  border-radius: 9px; padding: .62rem .7rem; font: 700 .8rem/1 var(--sans); letter-spacing: .04em;
  cursor: pointer; white-space: nowrap;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.dx-play:hover { background: var(--navy-600); box-shadow: 0 3px 10px rgba(11,44,99,.2); }
.dx-play:active { transform: translateY(1px); }
.dx-play svg { width: 15px; height: 15px; flex: none; }
.dx-play.is-playing { background: var(--gold); border-color: var(--gold); }
.dx-play.is-playing svg { animation: dxPlaySpin 1.8s linear infinite; }
@keyframes dxPlaySpin { to { transform: rotate(360deg); } }

/* the year readout takes the accent while the run is going */
.dx-playing .dx-cmd-year label b { color: var(--gold); }

/* ---- the race ----
   Each rank position is a translated slot and each bar a transitioned width, so a county
   that overtakes another slides past it. The value label rides in its own wrapper so it
   travels with its bar rather than jumping to the new position. */
.dx-rank-slot { transition: transform .82s cubic-bezier(.34,.9,.3,1); }
.dx-rank-bar { transition: width .82s cubic-bezier(.34,.9,.3,1), fill .5s ease; }
.dx-rank-vwrap { transition: transform .82s cubic-bezier(.34,.9,.3,1); }
.dx-rank-num { transition: opacity .3s ease; }

/* the choropleth and the change bars settle rather than snap as the years advance */
.dx-playing .dx-map-county { transition: fill .55s ease; }

@media (prefers-reduced-motion: reduce) {
  .dx-rank-slot, .dx-rank-bar, .dx-rank-vwrap, .dx-play { transition: none; }
  .dx-play.is-playing svg { animation: none; }
}


/* ============================================================
   Controls docked at the top of full screen.
   The command bar is moved, not copied, so these rules only restate how it sits.
   ============================================================ */

/* ---- Data Explorer ---- */
.dx-fs .dx-cmd.is-docked {
  position: static; flex: none; z-index: auto; border-radius: 0;
  background: var(--paper); border-bottom: 1px solid var(--line);
  backdrop-filter: none; box-shadow: 0 1px 0 rgba(11,44,99,.04);
}
.dx-fs .dx-cmd.is-docked .wrap { max-width: none; padding: .7rem clamp(.9rem, 2.5vw, 2rem); gap: .7rem; }
.dx-fs .dx-cmd.is-docked .selector-field label { margin-bottom: .3rem; }
.dx-fs .dx-cmd.is-docked .xdd-trigger { padding: .52rem .8rem; font-size: .88rem; }
.dx-fs .dx-cmd.is-docked .dx-play { padding: .54rem .7rem; font-size: .76rem; }
/* the title bar is redundant above a full control bar, so it thins out */
.dx-fs .dx-fs-bar { padding-block: .55rem; }

/* ---- Data Landscape ---- */
/* The drawing and everything floating over it share one box, so the hover card and the
   national tag stay locked to their towers however the panel is laid out. */
.lsc-canvas { position: relative; width: 100%; }
.lsc-map.is-fs { padding: 0; justify-content: flex-start; }
.lsc-map.is-fs .lsc-canvas { margin: auto; width: 100%; }
.lsc-map.is-fs .lsc-svg { max-height: calc(100vh - 9.5rem); }
.dx-cmd.lsc-cmd.is-docked {
  position: static; flex: none; width: 100%; border-radius: 0;
  background: var(--paper); border-bottom: 1px solid var(--line); backdrop-filter: none;
}
.dx-cmd.lsc-cmd.is-docked .wrap { max-width: none; padding: .7rem 1.1rem; gap: .7rem; }
.lsc-map.is-fs .lsc-fs { top: .75rem; right: 1rem; }

@media (max-width: 860px) {
  .dx-fs .dx-cmd.is-docked .wrap,
  .dx-cmd.lsc-cmd.is-docked .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The close control keeps the top-right corner it is looked for in, so the docked bar
   stops short of it rather than running underneath. */
.dx-cmd.lsc-cmd.is-docked .wrap { padding-right: 3.9rem; }
.lsc-cmd-play { flex-direction: column; align-items: stretch; justify-content: flex-end; }


/* ============================================================
   DATA LANDSCAPE · analysis grid (engine: public/lsc-charts.js)
   Nine cards below the landscape, so the 3D view stays the hero and the statistics sit
   under it rather than crowding it.
   ============================================================ */
.lsc-analysis { margin-top: 2.6rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.lsc-an-head { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end;
  justify-content: space-between; margin-bottom: 1.3rem; }
.lsc-an-head h2 { margin: .1rem 0 .3rem; font: 700 1.28rem/1.2 var(--serif); }
.lsc-an-sub { margin: 0; font-size: .86rem; color: var(--muted); max-width: 56ch; line-height: 1.5; }
.lsc-an-pair { min-width: 260px; flex: 0 1 320px; }
.lsc-an-pair label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.lsc-an-pair .xdd-trigger { background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: .58rem .85rem; font-size: .9rem; }

/* One per row, each the full width of the reading column, directly under the landscape. */
.lsc-an-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.lsc-an-card { margin: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1rem 1.05rem 1.1rem; min-width: 0; }
.lsc-an-card figcaption { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .7rem; }
.lsc-an-n { flex: none; width: 23px; height: 23px; border-radius: 50%; background: var(--navy);
  color: #fff; font: 800 .66rem/23px var(--num); text-align: center; letter-spacing: 0; }
.lsc-an-card figcaption b { display: block; font: 700 .98rem/1.25 var(--serif); color: var(--ink); }
.lsc-an-card figcaption em { display: block; font-style: normal; font-size: .76rem;
  color: var(--muted); line-height: 1.4; margin-top: .12rem; }
.lsc-an-plot { min-height: 380px; }
.lsc-chart { display: block; width: 100%; height: auto; }
.lsc-c-t { font-family: var(--sans); }
.lsc-c-empty { margin: 0; padding: 4.5rem 1rem; text-align: center; font-size: .82rem;
  color: var(--muted); font-weight: 500; }

/* every mark is hoverable and carries a native tooltip with the county behind it */
.lsc-c-pt { cursor: default; transition: opacity .16s ease; }
.lsc-c-pt:hover { opacity: .78; }
.lsc-c-pt:focus { outline: none; }
.lsc-c-pt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 720px) {
  .lsc-an-pair { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .lsc-c-pt { transition: none; } }


/* ---- per-card expand ---- */
.lsc-an-card { position: relative; }
.lsc-an-card figcaption { padding-right: 2.6rem; }
.lsc-an-fs { position: absolute; top: .85rem; right: .9rem; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--navy);
  cursor: pointer; transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.lsc-an-fs:hover { background: var(--navy); color: #fff; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11,44,99,.2); }
.lsc-an-fs svg { width: 16px; height: 16px; display: block; }
.lsc-an-card.is-fs .lsc-ico-in { display: none; }
.lsc-an-card.is-fs .lsc-ico-out { display: inline-flex; }

/* full screen now lives in .lsc-deck, below */

@media (prefers-reduced-motion: reduce) { .lsc-an-fs { transition: none; } }


/* ============================================================
   DATA LANDSCAPE · the deck
   Every visual on the page on one full-screen surface: the map first, the nine analysis
   charts after it. Slide with the arrows, the dots, the arrow keys, or Play all.
   ============================================================ */
.lsc-deck { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: linear-gradient(#FCFDFF, #E9EEF7); }
.lsc-deck[hidden] { display: none; }
.lsc-deck .dx-cmd.lsc-cmd.is-docked { order: -1; }

.lsc-deck-bar { flex: none; display: flex; align-items: center; gap: .9rem;
  padding: .7rem clamp(.9rem, 2.4vw, 1.6rem); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.72); }
.lsc-deck-n { font: 800 .74rem/1 var(--num); color: var(--gold); letter-spacing: .04em;
  background: var(--gold-soft); padding: .38rem .55rem; border-radius: 5px; flex: none; }
.lsc-deck-title { font: 700 1.02rem/1.25 var(--serif); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.lsc-deck-tools { display: flex; align-items: center; gap: .6rem; flex: none; }
.lsc-deck-play { display: inline-flex; align-items: center; gap: .42rem; background: var(--navy);
  color: #fff; border: 1px solid var(--navy); border-radius: 8px; padding: .5rem .8rem;
  font: 700 .76rem/1 var(--sans); letter-spacing: .05em; cursor: pointer; white-space: nowrap;
  transition: background .16s ease; }
.lsc-deck-play:hover { background: var(--navy-600); }
.lsc-deck-play svg { width: 14px; height: 14px; }
.lsc-deck-play.is-playing { background: var(--gold); border-color: var(--gold); }
.lsc-deck-play.is-playing svg { animation: dxPlaySpin 1.8s linear infinite; }
.lsc-deck-x { width: 38px; height: 38px; display: inline-flex; align-items: center;
  justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 50%;
  color: var(--navy); cursor: pointer; transition: background .16s ease, color .16s ease; }
.lsc-deck-x:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.lsc-deck-x svg { width: 17px; height: 17px; }

.lsc-deck-stage { flex: 1; min-height: 0; display: flex; align-items: center; gap: .5rem;
  padding: .6rem clamp(.5rem, 1.6vw, 1.2rem); }
.lsc-deck-body { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center;
  justify-content: center; position: relative; }
.lsc-deck-body > * { width: 100%; }
.lsc-deck-body .lsc-svg, .lsc-deck-body .lsc-chart { max-height: calc(100vh - 13rem); width: 100%; }

.lsc-deck-nav { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center;
  justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 50%;
  color: var(--navy); cursor: pointer; box-shadow: 0 2px 8px rgba(11,44,99,.1);
  transition: background .16s ease, color .16s ease, transform .16s ease; }
.lsc-deck-nav:hover { background: var(--navy); color: #fff; transform: scale(1.06); }
.lsc-deck-nav svg { width: 20px; height: 20px; }
.lsc-deck-nav.is-prev svg { transform: rotate(180deg); }


@media (max-width: 700px) {
  .lsc-deck-nav { width: 36px; height: 36px; }
  .lsc-deck-title { font-size: .88rem; }
  .lsc-deck-play span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lsc-deck-nav, .lsc-deck-play, .lsc-deck-x { transition: none; }
  .lsc-deck-play.is-playing svg { animation: none; }
}


/* ============================================================
   DATA LANDSCAPE · chart materials, entrance and hover card
   ============================================================ */

/* Solids grow out of the floor; ribbons and ghosts settle in. Both run on the compositor,
   and both are skipped outright when the visitor asks for less motion. */
@keyframes lscRise { from { transform: scaleY(0); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }
@keyframes lscFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.lsc-c-rise { animation: lscRise .58s cubic-bezier(.2,.8,.25,1) backwards; }
.lsc-c-fade { animation: lscFade .5s cubic-bezier(.2,.8,.25,1) backwards; }

/* the county under the pointer steps forward and the rest step back */
.lsc-chart .lsc-c-pt { cursor: pointer; transition: opacity .18s ease, filter .18s ease; }
.lsc-chart.is-hovering .lsc-c-pt { opacity: .34; }
.lsc-chart.is-hovering .lsc-c-pt.is-hot { opacity: 1; filter: drop-shadow(0 6px 10px rgba(11,44,99,.28)); }
.lsc-chart .lsc-c-pt.is-on { filter: drop-shadow(0 5px 9px rgba(200,16,46,.30)); }
.lsc-chart .lsc-c-pt:focus { outline: none; }
.lsc-chart .lsc-c-pt:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lsc-chart .lsc-c-floor, .lsc-chart .lsc-c-shadow { pointer-events: none; }
.lsc-chart .lsc-c-t { font-family: var(--sans); pointer-events: none; }
.lsc-chart .lsc-c-t.is-num { font-family: var(--num); }

/* the card that follows the pointer */
.lsc-tip { position: absolute; z-index: 8; pointer-events: none; width: max-content; max-width: 15rem;
  background: var(--navy-800); color: #fff; border-radius: 9px; padding: .55rem .7rem .6rem;
  box-shadow: 0 14px 30px rgba(7,26,62,.34); }
.lsc-tip[hidden] { display: none; }
.lsc-tip b { display: block; font: 700 .84rem/1.25 var(--serif); margin-bottom: .3rem; }
.lsc-tip span { display: flex; justify-content: space-between; gap: 1rem; font-size: .68rem; line-height: 1.6; }
.lsc-tip i { font-style: normal; color: #A9B8D2; }
.lsc-tip em { font-style: normal; font-weight: 700; font-family: var(--num); color: #9FD0FF; }

@media (prefers-reduced-motion: reduce) {
  .lsc-c-rise, .lsc-c-fade { animation: none; }
  .lsc-chart .lsc-c-pt { transition: none; }
}


/* ============================================================
   DATA EXPLORER · legible small text, a foot row that cannot clip,
   and a pin that folds the filter bar away
   ============================================================ */

/* The explanatory paragraphs were mid-grey. They are the text people actually read on this
   page, so they get near-black and a touch more weight. */
.explorer-shell .dx-view-sub,
.explorer-shell .dx-step p,
.explorer-shell .dx-statement,
.explorer-shell .dx-sec p.muted,
.explorer-shell .dx-map-desc { color: #0E1726; font-weight: 500; }
.explorer-shell .dx-view-sub { font-weight: 500; }

/* the map foot: the readout is what gives way when the row runs out of width */
.dx-map-foot .dx-readout { min-width: 0; flex: 1 1 auto; }
.dx-map-foot .dx-readout b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-map-foot .dx-size { flex: 0 0 auto; }

/* ---- the pin ---- */
.dx-cmd .wrap { position: relative; }
.dx-cmd-pin { position: absolute; top: -.55rem; right: .35rem; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 50%; color: var(--navy);
  cursor: pointer; box-shadow: 0 1px 4px rgba(11,44,99,.12); z-index: 2;
  transition: background .16s ease, color .16s ease, transform .2s ease; }
.dx-cmd-pin:hover { background: var(--navy); color: #fff; }
.dx-cmd-pin svg { width: 14px; height: 14px; transform: rotate(180deg); }
.dx-cmd.is-folded .dx-cmd-pin svg { transform: none; }

/* folded: every field steps out and a single summary line takes their place */
.dx-cmd-peek { display: none; }
.dx-cmd.is-folded .wrap { grid-template-columns: 1fr; padding-block: .42rem; }
.dx-cmd.is-folded .selector-field { display: none; }
.dx-cmd.is-folded .dx-cmd-peek { display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: .1rem 2rem .1rem 0; font: 600 .82rem/1.4 var(--sans);
  color: var(--navy); letter-spacing: .01em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.dx-cmd.is-folded .dx-cmd-peek:hover { color: var(--gold); }
.dx-cmd.is-folded .dx-cmd-pin { top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) { .dx-cmd-pin { transition: none; } }


/* ============================================================
   DATA EXPLORER · button text, an elevated sidebar over a recessed page,
   and a real pressed state
   ============================================================ */

/* The page-wide "everything is black" rule reaches inside buttons too, so a span sitting on
   a navy button was being painted black on navy. A span takes its button's colour. */
.dx-black button span,
.dx-black button strong,
.dx-black .dx-play span,
.dx-black .dx-cmd-peek { color: inherit; }

/* ---- the sidebar lifts, the data column sinks ---- */
.dx-black .indicator-tree { border: 0; }
.explorer-shell .indicator-tree {
  background: var(--paper);
  border: 0;
  border-radius: 14px;
  padding: 1rem .8rem 1.1rem;
  box-shadow: 0 1px 2px rgba(11,44,99,.06), 0 14px 30px -10px rgba(11,44,99,.22);
}
.explorer-shell .tree-title { margin-left: .45rem; }

/* the visualizations sit in a shallow well, so the raised sidebar reads as being in front */
.explorer-shell .dx-main {
  background: rgba(11,44,99,.030);
  border-radius: 18px;
  padding: 1.5rem 1.7rem 2rem;
  box-shadow: inset 0 2px 7px rgba(11,44,99,.07), inset 0 0 0 1px rgba(11,44,99,.045);
}
@media (max-width: 980px) {
  .explorer-shell .dx-main { padding: 1.1rem 1rem 1.4rem; border-radius: 14px; }
}

/* ---- pressed ----
   Controls depress into the surface rather than just changing colour, so a tap reads as a
   tap on a touchscreen where there is no hover to fall back on. */
.explorer-shell .tree-item,
.explorer-shell .tree-cat-header,
.dx-cmd .xdd-trigger,
.dx-cmd .dx-play,
.dx-cmd .dx-cmd-pin,
.explorer-shell .dx-expand,
.dx-fs-close {
  transition: transform .09s ease, box-shadow .09s ease, background .16s ease, color .16s ease;
}
.explorer-shell .tree-item:active,
.explorer-shell .tree-cat-header:active,
.dx-cmd .xdd-trigger:active,
.dx-cmd .dx-play:active,
.dx-cmd .dx-cmd-pin:active,
.explorer-shell .dx-expand:active,
.dx-fs-close:active {
  transform: translateY(1.5px);
  box-shadow: inset 0 3px 7px rgba(11,44,99,.24);
}
/* on a light control the inset needs to be softer or it reads as a smudge */
.dx-cmd .xdd-trigger:active,
.explorer-shell .tree-item:active,
.explorer-shell .tree-cat-header:active {
  box-shadow: inset 0 2px 5px rgba(11,44,99,.14);
}

@media (prefers-reduced-motion: reduce) {
  .explorer-shell .tree-item, .explorer-shell .tree-cat-header, .dx-cmd .xdd-trigger,
  .dx-cmd .dx-play, .dx-cmd .dx-cmd-pin, .explorer-shell .dx-expand, .dx-fs-close {
    transition: none;
  }
}


/* A hero slide carrying reported speech rather than a direct quotation: no quote mark, and
   a rule instead, so the page never puts words in a head of state's mouth typographically. */
.hs-quote.is-reported p { font-style: normal; }
.hs-quote.is-reported { border-left: 3px solid rgba(255,255,255,.55); padding-left: 1.1rem; }
@media (max-width: 700px) { .hs-quote.is-reported { padding-left: .8rem; } }

/* ============ PHONES: an app, not a shrunken website ============
   Last in the file so it wins over each page's own phone rules.
   - The page never pans sideways: nothing may widen it past the screen (clip, unlike hidden, keeps
     sticky positioning working), and a sideways swipe does not drag or bounce the page.
   - Taps answer at once (no double-tap zoom delay) and without the grey flash.
   - Video heroes are a short box, a little taller than 16:9 (4:3), instead of a full screen; the
     home slider's quotes and the Research hero's long scroll distance give way to the same box. */
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
@media (max-width: 860px) {
  body { overscroll-behavior-x: none; }
  a, button, input, select, textarea, summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}
@media (max-width: 760px) {
  /* home: the slider is a 4:3 picture with its words in a band beneath it */
  .hero-slider { height: auto; }
  .hero-slider .hs-sticky { position: relative; top: auto; height: auto; display: block; overflow: visible; }
  .hero-slider .hs-stage { position: relative; inset: auto; aspect-ratio: 4 / 3; overflow: hidden; }
  .hero-slider .hs-scrim { background: linear-gradient(to top, rgba(8,19,31,.85) 0%, rgba(8,19,31,0) 38%); }
  .hero-slider .hs-content { padding: .4rem 1rem 1.5rem; background: #08131f; }
  .hero-slider .hs-texts { display: grid; min-height: 0; }
  .hero-slider .hs-text { position: relative; grid-area: 1 / 1; bottom: auto; transform: translateY(8px); }
  .hero-slider .hs-text.active { transform: none; }
  .hero-slider .hs-quote { padding-left: 1.5rem; }
  .hero-slider .hs-qmark { top: -.5rem; font-size: 3.2rem; }
  .hero-slider .hs-quote p { font-size: 1.16rem; line-height: 1.32; margin-bottom: .8rem; }
  .hero-slider .hs-who { font-size: .9rem; }
  .hero-slider .hs-role { font-size: .8rem; }
  .hero-slider .hs-qmeta { font-size: .7rem; }
  .hero-slider .hs-text h1 { font-size: 1.6rem; margin-bottom: .5rem; }
  .hero-slider .hv-cue { display: none; }
  /* careers and about: the film is a 4:3 box (it grows only if the words need more) */
  .cs .cs-hero.cs-hero--film { min-height: 0; aspect-ratio: 4 / 3; }
  .cs .cs-hero--film .cs-hero-in { padding: 1.3rem 1.1rem 1.15rem; }
  .cs .cs-hero--film .cs-h1 { margin-bottom: .9rem; font-size: 1.62rem; line-height: 1.08; }
  .cs .cs-hero--film .cs-ctas { gap: .45rem; }
  .cs .cs-hero--film .cs-btn { height: 2.25rem; font-size: .64rem; }
  .cs .cs-hero--film .cs-btn > span { padding: 0 .8rem; }
  .cs .cs-hero--film .cs-btn > i { width: 2.25rem; }
  .cs .cs-hero--film .cs-hero-sub { margin-top: .9rem; max-width: 24rem; font-size: .84rem; line-height: 1.45; }
  .cs .cs-film-scrim { background: linear-gradient(180deg, rgb(5 7 12 / .68) 0%, rgb(5 7 12 / .42) 55%, rgb(5 7 12 / .7) 100%); }
  /* research: the same 4:3 box, looping instead of scrubbing */
  .vhero { height: auto; }
  .vhero-sticky { position: relative; top: auto; height: auto; aspect-ratio: 4 / 3; }
  .vhero-inner { padding: 0 1rem 1.2rem; }
  .explorer-shell .vhero-title, .vhero-title { font-size: 1.7rem; margin-bottom: .45rem; }
  .vhero-kicker { margin-bottom: .45rem; font-size: .68rem; }
  .vhero-sub { font-size: .88rem; }
  .vhero-progress { display: none; }
  /* careers and about: the desktop-sized gaps where one section's colour runs into the next */
  .cs .cs-mission { padding-top: 3.2rem; padding-bottom: 3rem; }
  .cs .cs-roles, .cs .cs-join { padding-top: 4rem; }
}

/* phones only: the Browse indicators button in the filter bar and the indicator sheet's header */
.dx-cmd-browse, .tree-sheet-head { display: none; }
.tree-sheet-head { position: sticky; top: 0; z-index: 1; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 -1rem .4rem; padding: calc(.8rem + env(safe-area-inset-top)) 1rem .8rem; background: #fff; border-bottom: 1px solid #E3EAF5; }
.tree-sheet-head p { margin: 0; color: #0B2C63; font: 700 1.15rem/1.2 var(--serif); }
.tree-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #0B2C63; color: #fff; cursor: pointer; }
.tree-close .icn { width: 17px; height: 17px; stroke-width: 2.2; }
@media (max-width: 760px) {
  /* data explorer: Browse indicators lives in the filter drop-down; the list opens as a full sheet */
  .explorer-shell .tree-toggle { display: none; }
  .explorer-shell .indicator-tree:not(.is-sheet) { display: none; }
  .dx-cmd-browse { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .55rem; height: 44px;
    border: 1px solid #0B2C63; border-radius: 10px; background: #fff; color: #0B2C63; font: 700 .9rem/1 var(--sans); cursor: pointer; }
  .dx-cmd-browse .icn { width: 18px; height: 18px; }
  .dx-cmd.is-folded .dx-cmd-browse { display: none; }
  .explorer-shell .indicator-tree.is-sheet { position: fixed; inset: 0; z-index: 250; display: block; max-height: none; margin: 0;
    padding: 0 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 0; box-shadow: none; background: #fff;
    overflow-y: auto; overscroll-behavior: contain; }
  .indicator-tree.is-sheet .tree-body { display: block; }
  .indicator-tree.is-sheet .tree-title { display: none; }
  .indicator-tree.is-sheet .tree-sheet-head { display: flex; }
  html.tree-open { overflow: hidden; }
  /* the source line: two lines, edge to edge, in the title's serif. Coverage repeats the
     Locations figure just below it, so it steps out on phones */
  .explorer-shell .dx-source { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mock unit years" "source source source";
    column-gap: .55rem; row-gap: .4rem; align-items: center; padding-top: .9rem; font-size: .86rem; }
  .explorer-shell .dx-source .dx-mock { grid-area: mock; margin: 0; font-size: .64rem; padding: .18rem .45rem; }
  .explorer-shell .dx-fact i { display: none; }
  .explorer-shell .dx-fact-unit { grid-area: unit; }
  .explorer-shell .dx-fact-years { grid-area: years; justify-self: end; }
  .explorer-shell .dx-fact-source { grid-area: source; }
  .explorer-shell .dx-fact-coverage { display: none; }
  .explorer-shell .dx-source b { font-weight: 500; }
  /* the filter bar is six controls tall on a phone: open, it scrolls away with the page; folded, its
     one-line summary is what stays pinned. Solid white either way, nothing showing through */
  .dx-cmd.sticky-selector { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dx-cmd.sticky-selector:not(.is-folded) { position: relative; top: auto; }
  /* plain white behind the charts and tables too: the tinted well steps out */
  .explorer-shell .dx-main { background: #fff; box-shadow: none; padding: .4rem 0 1.4rem; border-radius: 0; }
  /* CSV, JSON, PNG, Share link: an even two-by-two, every label on one line */
  .explorer-shell .toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
  .explorer-shell .toolbar-actions .btn { justify-content: center; white-space: nowrap; background: #fff; }
}

/* back to the top (phones): lower right, dark blue, its ring filling in Liberia red as the page scrolls */
.to-top { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: calc(1.1rem + env(safe-area-inset-bottom)); z-index: 90;
  display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%;
  background: #0B2C63; color: #fff; cursor: pointer; box-shadow: 0 10px 24px -8px rgba(5,12,28,.55);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .3s; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
.to-top:hover { background: #0E3577; }
.to-top:active { transform: scale(.95); }
.to-top:focus-visible { outline: 2px solid #C8102E; outline-offset: 3px; }
.to-top-ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); }
.to-top-ring circle { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 3; }
.to-top-ring .to-top-fill { stroke: #8A94A3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.to-top-arrow { position: relative; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top.is-on { transition: none; } }
@media print { .to-top { display: none; } }
/* phones only: on desktop the page is short to scroll back with the wheel or the keyboard */
@media (min-width: 861px) { .to-top { display: none; } }

/* a research paper's page: every line of text in black */
.paper-page, .paper-page h1, .paper-page h2, .paper-page p, .paper-page .muted, .paper-page .authors,
.paper-page .mono, .paper-page .kicker, .paper-page .kicker a { color: #000; }
/* on a phone the cover sits above the title, so a long title has the full width and never runs off the edge */
@media (max-width: 600px) {
  .paper-detail-head { flex-direction: column; gap: 1.1rem; }
  .paper-detail-head h1 { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.08; overflow-wrap: anywhere; margin-bottom: .5rem; }
  .paper-cover-lg { width: 150px; }
}


/* ---- drop-downs never push their row wider than the screen: a long name ends in an ellipsis ---- */
.xdd, .selector-field { min-width: 0; }
.xdd-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- National ICT Reports: a finger drags the cards ---- */
.rc-stage { touch-action: pan-y; }
.rc-stage.is-dragging .rc-card { transition: none !important; }

/* ---- Data Landscape on a phone: an app screen like the rest ---- */
@media (max-width: 760px) {
  /* the filters scroll away with the page, on white, inside the page's side margins */
  .dx-cmd.lsc-cmd.sticky-selector { position: relative; top: auto; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dx-cmd.lsc-cmd .wrap { padding: .9rem 1rem; gap: .75rem; }
  .dx-cmd.lsc-cmd .selector-field:first-child { grid-column: 1 / -1; }
  .dx-cmd.lsc-cmd .lsc-cmd-play { grid-column: 1 / -1; }
  .lsc-wrap { padding-top: 1.2rem; }
  .lsc-head .dx-title { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .lsc-stage { gap: 1.1rem; }
  .lsc-map { border-radius: 14px; }
  .lsc-an-head { gap: .8rem; }
  .lsc-an-pair { min-width: 0; flex: 1 1 100%; }
  .lsc-an-card { padding: .9rem .8rem 1rem; border-radius: 14px; }
  .lsc-an-card figcaption em { font-size: .8rem; }
  .lsc-an-plot { min-height: 0; }
  /* a chart wider than the screen scrolls sideways inside its card, with a hint and a fade */
  .lsc-an-plot.is-wide { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
  .lsc-an-plot.is-wide::-webkit-scrollbar { display: none; }
  .lsc-an-card:has(.lsc-an-plot.is-wide)::after { content: 'Swipe the chart sideways'; display: block; margin-top: .4rem; font-size: .72rem; font-weight: 600; color: var(--muted); text-align: right; }
}


/* ===================== Submit a Paper: the form =====================
   Trust-first and calm: one white sheet, three real steps, labels above fields, one accent (navy)
   with Liberia red kept for what is required or wrong. Radius rule: sheet 18px, inputs 10px,
   chips and buttons fully round. Motion only says something: focus, done, wrong, sending, arriving. */
.sp2-wrap { --sp2-p: 0; max-width: 1080px; padding-top: 2.2rem; padding-bottom: 4rem; }
.sp2-lede { max-width: 60ch; margin: 0 0 1.6rem; font-size: 1.04rem; line-height: 1.6; color: #33415A; }
.sp2-alert { margin: 0 0 1.4rem; padding: 1rem 1.2rem; border-radius: 14px; background: #FFF4F5; border: 1px solid #F3C5CC; color: #7A1626; }
.sp2-alert ul { margin: .4rem 0 0 1.1rem; padding: 0; }
.sp2 { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2.4rem; align-items: start; }
/* the step rail (desktop): where you are, what is done, how much is left */
.sp2-rail { position: sticky; top: calc(var(--nav-h, 76px) + 1.6rem); padding: 1.2rem 1.1rem; border-radius: 18px; background: #fff; border: 1px solid #E3E9F2; }
.sp2-rail ol { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .25rem; }
.sp2-rail li { display: flex; align-items: center; gap: .7rem; padding: .5rem .55rem; border-radius: 10px; color: #5A6A85; font-weight: 600; font-size: .92rem; transition: background .3s ease, color .3s ease; }
.sp2-rail li.is-here { background: #EEF3FA; color: #0B2C63; }
.sp2-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #C9D4E5; font: 700 .78rem/1 var(--sans); color: #5A6A85; background: #fff; flex: none;
  transition: background .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, color .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.sp2-rail li.is-done .sp2-dot { background: #0B2C63; border-color: #0B2C63; color: #fff; transform: scale(1.06); }
.sp2-meter { height: 6px; border-radius: 99px; background: #E8EDF5; overflow: hidden; }
.sp2-meter i { display: block; height: 100%; width: 100%; border-radius: inherit; background: #0B2C63; transform-origin: left; transform: scaleX(var(--sp2-p)); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.sp2-left { margin: .6rem 0 0; font-size: .82rem; color: #5A6A85; font-variant-numeric: tabular-nums; }
/* the sheet */
.sp2-sheet { min-width: 0; background: #fff; border: 1px solid #E3E9F2; border-radius: 18px; box-shadow: 0 1px 2px rgba(11,44,99,.04), 0 24px 48px -32px rgba(11,44,99,.22); }
.sp2-sec { padding: 2rem 2.2rem; }
.sp2-sec + .sp2-sec { border-top: 1px solid #EDF1F7; }
.sp2-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.sp2-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #EEF3FA; color: #0B2C63; font: 700 .9rem/1 var(--sans); flex: none; margin-top: .15rem; }
.sp2-head h2 { margin: 0; font: 700 1.4rem/1.2 var(--serif); color: #0E1A33; }
.sp2-head p { margin: .3rem 0 0; color: #5A6A85; font-size: .95rem; }
.sp2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.2rem; }
.sp2-field { min-width: 0; display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; }
.sp2-field.is-wide, .sp2-chips, .sp2-consent { grid-column: 1 / -1; }
.sp2-field { align-content: start; }
.sp2-field > label, .sp2-chips legend { display: block; margin: 0; font: 600 .92rem/1.3 var(--sans); color: #17233A; padding: 0; text-transform: none; letter-spacing: 0; transition: color .2s ease; }
.sp2-chip, .sp2-check { text-transform: none; letter-spacing: 0; font-size: 1rem; margin: 0; }
.sp2-check { font-weight: 400; color: #17233A; }
.sp2-field:focus-within > label { color: #0B2C63; }
.sp2-req { color: #C8102E; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp2-control { position: relative; }
.sp2-control input, .sp2-control select, .sp2-control textarea {
  width: 100%; min-height: 48px; padding: .75rem 2.6rem .75rem .9rem; border: 1px solid #CAD4E3; border-radius: 10px; background: #fff;
  font: 400 1rem/1.45 var(--sans); color: #0E1A33; box-shadow: 0 1px 0 rgba(11,44,99,.03);
  transition: border-color .2s ease, box-shadow .25s cubic-bezier(.16,1,.3,1), background .2s ease; }
.sp2-control textarea { resize: vertical; min-height: 96px; }
.sp2-control select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #5A6A85 50%), linear-gradient(135deg, #5A6A85 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.sp2-control input:hover, .sp2-control select:hover, .sp2-control textarea:hover { border-color: #A9B8CF; }
.sp2-control input:focus, .sp2-control select:focus, .sp2-control textarea:focus { outline: none; border-color: #0B2C63; box-shadow: 0 0 0 4px rgba(11,44,99,.12); }
.sp2-ok { position: absolute; right: .8rem; top: 14px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #0B2C63; color: #fff;
  opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .35s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.sp2-ok .icn { width: 12px; height: 12px; stroke-width: 3; }
.sp2-field.is-valid .sp2-ok { opacity: 1; transform: none; }
.sp2-control select ~ .sp2-ok { right: 2.4rem; }
.sp2-under { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; min-height: 0; }
.sp2-under:not(:has(p, .sp2-count)) { display: none; }
.sp2-help { margin: 0; font-size: .84rem; color: #5A6A85; line-height: 1.45; }
.sp2-count { font: 500 .8rem/1 var(--sans); color: #6B7A93; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp2-count.is-near { color: #C8102E; }
.sp2-err { display: none; margin: 0; font-size: .86rem; font-weight: 600; color: #B00E2A; }
.sp2-field.is-invalid .sp2-err { display: block; animation: sp2In .3s cubic-bezier(.16,1,.3,1); }
.sp2-field.is-invalid .sp2-control input, .sp2-field.is-invalid .sp2-control textarea, .sp2-field.is-invalid .sp2-control select { border-color: #C8102E; box-shadow: 0 0 0 4px rgba(200,16,46,.1); }
/* category: chips you tap */
.sp2-chiprow { display: flex; flex-wrap: wrap; gap: .5rem; }
.sp2-chip { position: relative; cursor: pointer; }
.sp2-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sp2-chip span { display: inline-flex; align-items: center; min-height: 42px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid #CAD4E3; background: #fff; color: #33415A; font-weight: 600; font-size: .92rem;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
.sp2-chip:hover span { border-color: #0B2C63; }
.sp2-chip input:checked + span { background: #0B2C63; border-color: #0B2C63; color: #fff; }
.sp2-chip input:focus-visible + span { outline: 2px solid #C8102E; outline-offset: 2px; }
.sp2-chip input:active + span { transform: scale(.97); }
/* consent: a checkbox you can see */
.sp2-check { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid #CAD4E3; background: #FAFBFD; cursor: pointer; line-height: 1.55; color: #17233A;
  transition: border-color .25s ease, background .25s ease; }
.sp2-check:hover { border-color: #0B2C63; }
.sp2-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp2-box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: .1rem; border-radius: 7px; border: 1.5px solid #9AA9C2; background: #fff; color: #fff;
  transition: background .25s ease, border-color .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.sp2-box .icn { width: 14px; height: 14px; stroke-width: 3; transform: scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.sp2-check input:checked + .sp2-box { background: #0B2C63; border-color: #0B2C63; }
.sp2-check input:checked + .sp2-box .icn { transform: none; }
.sp2-check input:focus-visible + .sp2-box { outline: 2px solid #C8102E; outline-offset: 2px; }
.sp2-consent.is-invalid .sp2-check { border-color: #C8102E; background: #FFF6F7; }
.sp2-note { display: flex; gap: .55rem; align-items: flex-start; margin: .2rem 0 0; font-size: .86rem; color: #5A6A85; line-height: 1.5; }
.sp2-note .icn { width: 16px; height: 16px; flex: none; margin-top: .15rem; color: #0B2C63; }
/* sending */
.sp2-actions { display: flex; align-items: center; gap: 1.2rem; padding: 0 2.2rem 2.2rem; }
.sp2-send { position: relative; display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: 0 1.6rem; border: 0; border-radius: 999px; background: #0B2C63; color: #fff; cursor: pointer;
  font: 700 1rem/1 var(--sans); box-shadow: 0 10px 22px -12px rgba(11,44,99,.65); transition: background .2s ease, transform .15s ease, box-shadow .25s ease; }
.sp2-send:hover { background: #0E3577; box-shadow: 0 14px 28px -12px rgba(11,44,99,.7); }
.sp2-send:active { transform: scale(.98); }
.sp2-send:focus-visible { outline: 2px solid #C8102E; outline-offset: 3px; }
.sp2-send-i { display: inline-flex; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.sp2-send-i .icn { width: 18px; height: 18px; }
.sp2-send:hover .sp2-send-i { transform: translateX(4px); }
.sp2-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: sp2Spin .8s linear infinite; }
.sp2-send.is-sending { pointer-events: none; background: #23467F; }
.sp2-send.is-sending .sp2-send-i { display: none; }
.sp2-send.is-sending .sp2-spin { display: inline-block; }
.sp2-cancel { color: #33415A; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* the phone bar is off on desktop */
.sp2-bar { display: none; }
/* arriving, and the shake when something is missing */
.sp2.is-live .sp2-sec.will-rise { opacity: 0; transform: translateY(18px); }
.sp2.is-live .sp2-sec.will-rise.is-risen { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.sp2.is-shaking .sp2-sheet { animation: sp2Shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes sp2In { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes sp2Spin { to { transform: rotate(360deg); } }
@keyframes sp2Shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (max-width: 900px) {
  .sp2 { grid-template-columns: 1fr; gap: 1rem; }
  .sp2-rail { display: none; }
}
/* phones: one column, big targets, and an app-style bar at the foot with progress and Submit */
@media (max-width: 760px) {
  .sp2-wrap { padding-top: 1.4rem; padding-bottom: 7rem; }
  .sp2-lede { font-size: .98rem; margin-bottom: 1.1rem; }
  .sp2-sheet { border-radius: 16px; }
  .sp2-sec { padding: 1.4rem 1.1rem; }
  .sp2-head { margin-bottom: 1.1rem; gap: .8rem; }
  .sp2-head h2 { font-size: 1.25rem; }
  .sp2-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .sp2-actions { padding: 0 1.1rem 1.4rem; flex-wrap: wrap; }
  .sp2-actions .sp2-send { width: 100%; justify-content: center; }
  .sp2-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #E3E9F2;
    transform: translateY(110%); transition: transform .4s cubic-bezier(.16,1,.3,1); }
  .sp2-bar.is-on { transform: none; }
  .sp2-bar-in { display: flex; align-items: center; gap: 1rem; }
  .sp2-bar-p { flex: 1; min-width: 0; display: grid; gap: .35rem; font-size: .8rem; color: #5A6A85; font-variant-numeric: tabular-nums; }
  .sp2-send-sm { min-height: 46px; padding: 0 1.2rem; font-size: .95rem; }
  body:has(.sp2-bar.is-on) .to-top { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sp2 *, .sp2-bar { transition: none !important; animation: none !important; }
  .sp2.is-live .sp2-sec.will-rise { opacity: 1; transform: none; }
}

/* ---- home on a phone: less empty space under the reports carousel and the video section ---- */
@media (max-width: 760px) {
  #natReports { padding-bottom: 1.4rem; }
  #homeVideo { padding-top: 1.6rem; padding-bottom: 1.4rem; }
  #latestUpdates .sec-head-dh { margin-top: .4rem; }
}
@media (max-width: 720px) { .rc-stage { height: 436px; } }
/* the news carousel takes a sideways swipe; upright swipes still scroll the page */
#sqTrends, .sq-window { touch-action: pan-y; }

/* ---- section headings arrive (app.js wraps the words; with reduced motion nothing is wrapped) ----
   Each word rises out of its own mask, sharpening from a blur, one after another; a short red rule
   draws in under the heading; the heading's links and arrows follow; the block below lifts in. */
.hx .hw { display: inline-block; overflow: clip; overflow-clip-margin: .2em; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hx .hw > span { display: inline-block; opacity: 0; transform: translateY(70%); filter: blur(8px);
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .7s ease, filter .8s ease; transition-delay: calc(var(--i, 0) * 75ms); }
.hx.is-in .hw > span { opacity: 1; transform: none; filter: blur(0); }
.hx-head h2.hx { position: relative; }
.hx-head > :not(h2) { opacity: 0; transform: translateY(10px); transition: opacity .6s ease .45s, transform .7s cubic-bezier(.16,1,.3,1) .45s; }
.hx-head.is-in > :not(h2) { opacity: 1; transform: none; }
.hx-block { opacity: 0; transform: translateY(28px) scale(.985); transition: opacity .8s ease .15s, transform 1s cubic-bezier(.16,1,.3,1) .15s; }
.hx-block.is-in { opacity: 1; transform: none; }
/* the reports carousel keeps its own 3D transforms on the cards; it rises as one piece */
#rcStage.hx-block { transform: translateY(28px); }
#rcStage.hx-block.is-in { transform: none; }
.sec-head-dh .more { display: inline-flex; align-items: center; gap: .35rem; }
.sec-head-dh .more .icn { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.sec-head-dh .more:hover .icn { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .hx .hw > span, .hx-head > :not(h2), .hx-block { transition: none; opacity: 1; transform: none; filter: none; }
}

/* ==========================================================================
   Product pages: Indicator Catalogue, Data Query, ICT Reports, Our Team, Log in
   One shape rule across them: panels 16px, rows and option cards 12px,
   inputs 10px, buttons and chips fully round. Navy carries the interface;
   Liberia red is kept to small marks (the eyebrow, the latest release, open roles).
   ========================================================================== */
:root { --ui-r: 16px; --ui-r-in: 10px; --ui-ease: cubic-bezier(.2,.8,.2,1); --ui-spring: cubic-bezier(.34,1.4,.64,1); }
html.ui-locked { overflow: hidden; }
.ic [hidden], .qb [hidden], .rx [hidden], .tm [hidden], .lg [hidden], .ic-sheet[hidden], .ic-sheet [hidden] { display: none !important; }
.ui-flip { transform: scaleX(-1); }

/* shared pieces */
.ui-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-600); margin: 0; }
.ui-eyebrow i { width: 7px; height: 7px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 0 4px rgba(200,16,46,.12); animation: uiBlink 2.8s ease-in-out infinite; }
@keyframes uiBlink { 50% { box-shadow: 0 0 0 7px rgba(200,16,46,0); } }
.ui-lede { font-size: 1.04rem; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.ui-k { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ui-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--ui-r); overflow: hidden; margin: 0; }
.ui-stats > div { padding: .95rem 1.1rem 1rem; border-left: 1px solid var(--line-soft); min-width: 0; }
.ui-stats > div:first-child { border-left: 0; }
.ui-stats dt { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.ui-stats dd { margin: .3rem 0 0; font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.05; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ui-search { position: relative; display: flex; align-items: center; gap: .55rem; height: 46px; padding: 0 .5rem 0 .9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--ui-r-in); transition: border-color .2s, box-shadow .2s; }
.ui-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(28,91,184,.12); }
.ui-search > .icn { flex: none; font-size: 1.05rem; color: var(--faint); }
.ui-search input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; font-size: .95rem; color: var(--ink); }
.ui-search input:focus { outline: none; }
.ui-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ui-search-x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--cream); color: var(--muted); cursor: pointer; font-size: .85rem; }
.ui-search-x:hover { background: var(--teal-soft); color: var(--navy); }
.ui-search kbd { flex: none; font: 600 .74rem/1 var(--sans); color: var(--faint); background: #fff; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: .28rem .45rem; }
.ui-search:focus-within kbd { display: none; }
@media (hover: none) { .ui-search kbd { display: none; } }

.ui-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: #EDF1F7; border-radius: 999px; }
.ui-seg button { border: 0; background: transparent; border-radius: 999px; padding: .45rem .85rem; font: 600 .8rem var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s; }
.ui-seg button b { font-weight: 600; color: var(--faint); margin-left: .15rem; }
.ui-seg button:hover { color: var(--navy); }
.ui-seg button.is-on { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(11,44,99,.12), 0 2px 8px rgba(11,44,99,.08); }

.ui-chip { display: inline-flex; align-items: center; gap: .35rem; height: 34px; padding: 0 .85rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font: 600 .8rem var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s, transform .15s; }
.ui-chip:hover { border-color: var(--teal); text-decoration: none; }
.ui-chip:active { transform: scale(.97); }
.ui-chip b { font-weight: 600; color: var(--faint); }
.ui-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ui-chip.is-on b { color: #A9BEE0; }

.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 44px; padding: 0 1.25rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font: 650 .9rem var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s; }
.ui-btn:hover { border-color: var(--navy-600); text-decoration: none; }
.ui-btn:active { transform: translateY(1px) scale(.98); }
.ui-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.ui-btn .icn { font-size: 1rem; transition: transform .25s var(--ui-ease); }
.ui-btn:not(:disabled):hover .icn { transform: translateX(2px); }
.ui-btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(7,26,62,.2), inset 0 1px 0 rgba(255,255,255,.12); }
.ui-btn-primary:hover { background: #12397D; border-color: #12397D; color: #fff; }
.ui-btn-light { background: #fff; border-color: #fff; color: var(--navy); }
.ui-btn-light:hover { background: #EAF0FA; border-color: #EAF0FA; }
.ui-btn.is-busy { pointer-events: none; opacity: .75; }

.ui-empty { display: grid; justify-items: center; gap: .45rem; padding: 3rem 1.2rem; text-align: center; background: #fff; border: 1px dashed var(--line); border-radius: var(--ui-r); }
.ui-empty-art { display: grid; grid-template-columns: repeat(3, 14px); gap: 5px; margin-bottom: .7rem; }
.ui-empty-art i { width: 14px; height: 14px; border-radius: 3px; background: var(--teal-soft); animation: uiCell 2.6s ease-in-out infinite; }
.ui-empty-art i:nth-child(2) { animation-delay: .35s; } .ui-empty-art i:nth-child(4) { animation-delay: .7s; } .ui-empty-art i:nth-child(6) { animation-delay: 1.05s; }
.ui-empty-art i:nth-child(8) { animation-delay: 1.4s; } .ui-empty-art i:nth-child(9) { animation-delay: .2s; } .ui-empty-art i:nth-child(1) { animation-delay: .9s; }
@keyframes uiCell { 0%, 100% { background: var(--teal-soft); } 40% { background: var(--navy-600); } }
.ui-empty h3 { font-size: 1.15rem; margin: 0; }
.ui-empty p { margin: 0 0 .5rem; font-size: .9rem; color: var(--muted); }

/* page titles */
.ic-hero h1, .qb-hero h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); line-height: 1.07; letter-spacing: -.015em; margin: .6rem 0 .8rem; max-width: 19ch; }

/* ---------------- Indicator Catalogue ---------------- */
.ic { padding: 2.6rem 0 4.5rem; }
.ic-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: end; }
.ic-hero-r { display: grid; gap: .9rem; min-width: 0; }
.ic-spark { margin: 0; padding: 1rem 1rem .75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--ui-r); }
.ic-spark-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 78px; align-items: end; }
.ic-spark-bar { position: relative; height: 100%; display: flex; align-items: flex-end; padding: 0; border: 0; background: none; cursor: pointer; }
.ic-spark-bar i { display: block; width: 100%; height: calc(var(--h) * 100%); min-height: 4px; border-radius: 4px 4px 2px 2px; background: var(--navy-600); transform-origin: bottom; transform: scaleY(0); transition: transform .7s var(--ui-ease) calc(var(--i) * 35ms), background-color .2s; }
.ic-spark.is-in .ic-spark-bar i { transform: scaleY(1); }
.ic-spark-bar:hover i, .ic-spark-bar:focus-visible i { background: var(--gold); }
.ic-spark-bar:focus-visible { outline: none; }
.ic-spark-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 3; padding: .3rem .55rem; border-radius: 6px; background: var(--navy-800); color: #fff; font-size: .72rem; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .18s, transform .18s; }
.ic-spark-tip b { margin-left: .4rem; color: #9DB7E0; }
.ic-spark-bar:nth-child(-n+4) .ic-spark-tip { left: 0; transform: translateY(4px); }
.ic-spark-bar:nth-last-child(-n+4) .ic-spark-tip { left: auto; right: 0; transform: translateY(4px); }
.ic-spark-bar:hover .ic-spark-tip, .ic-spark-bar:focus-visible .ic-spark-tip { opacity: 1; transform: translate(-50%, 0); }
.ic-spark-bar:nth-child(-n+4):hover .ic-spark-tip, .ic-spark-bar:nth-child(-n+4):focus-visible .ic-spark-tip,
.ic-spark-bar:nth-last-child(-n+4):hover .ic-spark-tip, .ic-spark-bar:nth-last-child(-n+4):focus-visible .ic-spark-tip { transform: none; }
@media (hover: none) { .ic-spark-tip { display: none; } }
.ic-spark figcaption { margin-top: .55rem; font-size: .74rem; color: var(--faint); }
.ic-note { display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem; font-size: .84rem; color: var(--muted); }
.ic-note span { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); }

.ic-tools-band { position: sticky; top: calc(var(--nav-h) + 15px); z-index: 20; margin-top: 1.6rem; background: rgba(255,255,255,.9); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-block: 1px solid var(--line-soft); }
.app .ic-tools-band { top: 3.1rem; }
.ic-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; padding-block: .7rem; }
.ic-tools .ui-search { flex: 1 1 320px; max-width: 520px; }
.ic-count { margin-left: auto; font-size: .84rem; color: var(--muted); white-space: nowrap; }
.ic-count b { color: var(--navy); font-variant-numeric: tabular-nums; }

.ic-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.2rem; align-items: start; margin-top: 1.8rem; }
.ic-rail { position: sticky; top: calc(var(--nav-h) + 100px); display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - var(--nav-h) - 110px); overflow: auto; padding: .6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--ui-r); scrollbar-width: thin; }
.ic-rail-h { margin: 0; padding: .3rem .55rem .45rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ic-cat { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .6rem; border: 0; border-radius: 10px; background: transparent; font: 500 .86rem/1.3 var(--sans); color: var(--ink); text-align: left; cursor: pointer; transition: background-color .18s, color .18s; }
.ic-cat b { font-size: .75rem; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.ic-cat:hover { background: var(--cream); }
.ic-cat.is-on { background: var(--navy); color: #fff; }
.ic-cat.is-on b { color: #A9BEE0; }

.ic-group + .ic-group { margin-top: 2.2rem; }
.ic-group-head { display: flex; align-items: baseline; gap: .75rem; padding: 0 .2rem .7rem; margin-bottom: .7rem; border-bottom: 1px solid var(--line); }
.ic-idx { font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--gold); font-variant-numeric: tabular-nums; }
.ic-group-head h2 { margin: 0; font-size: 1.22rem; }
.ic-group-n { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--faint); }
.ic-rows { display: grid; gap: 6px; }
.ic-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "main meta go" "src meta go"; align-items: center; column-gap: 1.2rem; row-gap: .25rem; width: 100%; padding: .85rem 1rem .85rem 1.1rem; background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; font-family: var(--sans); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .25s, transform .25s var(--ui-ease); }
.ic-row:hover { border-color: rgba(28,91,184,.35); box-shadow: 0 1px 2px rgba(11,44,99,.05), 0 8px 24px rgba(11,44,99,.08); transform: translateY(-1px); }
.ic-row:active { transform: scale(.995); }
.ic-row:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ic-row-main { grid-area: main; display: grid; gap: .15rem; min-width: 0; }
.ic-row-name { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .97rem; font-weight: 650; color: var(--navy); }
.ic-row-t mark { background: rgba(28,91,184,.16); color: inherit; border-radius: 3px; padding: 0 1px; }
.ic-row-desc { font-size: .86rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-row-src { grid-area: src; min-width: 0; font-size: .76rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-row-meta { grid-area: meta; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; max-width: 300px; }
.ic-row-meta span { padding: .22rem .55rem; border-radius: 999px; background: var(--cream); border: 1px solid var(--line-soft); font-size: .72rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ic-row-meta .ic-meta-unit { background: #fff; color: var(--navy); }
.ic-row-go { grid-area: go; display: grid; color: var(--faint); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s var(--ui-ease), color .25s; }
.ic-row:hover .ic-row-go, .ic-row:focus-visible .ic-row-go { opacity: 1; transform: none; color: var(--teal); }
.ic-flag { padding: .15rem .45rem; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-size: .64rem; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ic-flag.is-warn { background: var(--teal-soft); color: var(--navy-600); }
.ic-row.is-enter { animation: icIn .45s var(--ui-ease) both; animation-delay: var(--d, 0ms); }
@keyframes icIn { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* the record sheet */
.ic-sheet { position: fixed; inset: 0; z-index: 400; }
.ic-sheet-scrim { position: absolute; inset: 0; background: rgba(7,26,62,.38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .28s; }
.ic-sheet-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); display: flex; flex-direction: column; background: #fff; box-shadow: -20px 0 60px rgba(7,26,62,.18); outline: none; transform: translateX(104%); transition: transform .42s cubic-bezier(.32,.72,0,1); }
.ic-sheet.open .ic-sheet-scrim { opacity: 1; }
.ic-sheet.open .ic-sheet-panel { transform: none; }
.ic-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem .85rem 1.5rem; border-bottom: 1px solid var(--line-soft); }
.ic-sheet-cat { margin: 0; min-width: 0; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-sheet-nav { display: flex; gap: .35rem; flex: none; }
.ic-sheet-nav button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); cursor: pointer; transition: background-color .2s, border-color .2s; }
.ic-sheet-nav button:hover:not(:disabled) { background: var(--cream); border-color: var(--navy-600); }
.ic-sheet-nav button:disabled { opacity: .35; cursor: default; }
.ic-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem 1.5rem 2rem; }
.ic-sheet-body.is-swap { animation: icSwap .32s var(--ui-ease); }
@keyframes icSwap { from { opacity: 0; transform: translateY(6px); } }
.ic-sheet-body h2 { margin: 0 0 .5rem; font-size: 1.7rem; line-height: 1.15; }
.ic-flags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.ic-sheet-desc { margin-bottom: 1.3rem; font-size: .98rem; color: var(--muted); }
.ic-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 12px; }
.ic-facts > div { min-width: 0; padding: .7rem .85rem; background: #fff; }
.ic-facts dt { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.ic-facts dd { margin: .2rem 0 0; font-size: .92rem; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.ic-code { display: flex; align-items: center; gap: .35rem; }
.ic-code code { min-width: 0; padding: .1rem .35rem; border-radius: 5px; background: var(--cream); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-copy { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.ic-copy:hover { background: var(--cream); color: var(--navy); }
.ic-cov { margin-top: 1.2rem; }
.ic-cov p { display: flex; justify-content: space-between; margin-bottom: .45rem; font-size: .85rem; color: var(--muted); }
.ic-cov p b { color: var(--navy); }
.ic-cov-dots { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; }
.ic-cov-dots i { height: 10px; border-radius: 3px; background: var(--line-soft); }
.ic-cov-dots i.on { background: var(--navy-600); animation: icDot .4s var(--ui-ease) both; animation-delay: calc(var(--i) * 25ms); }
@keyframes icDot { from { opacity: 0; transform: scaleY(.2); } }
.ic-src { margin-top: 1.2rem; }
.ic-src p { margin-top: .2rem; font-weight: 600; color: var(--navy); }
.ic-method { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line-soft); }
.ic-method h3 { margin-bottom: .75rem; font-size: 1.1rem; }
.ic-method > p { font-size: .92rem; color: var(--muted); }
.ic-method ol { list-style: none; display: grid; gap: .85rem; margin: 0; padding: 0; }
.ic-method li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: .8rem; }
.ic-method li span { padding-top: .2rem; font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.ic-method li p { font-size: .9rem; color: var(--ink); }
.ic-method-note { margin-top: 1rem; padding: .7rem .85rem; border-radius: 10px; background: var(--cream); font-size: .84rem; color: var(--muted); }
.ic-sheet-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }

/* ---------------- Data Query ---------------- */
.qb { padding: 2.6rem 0 4.5rem; }
.qb-layout { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 1.6rem; align-items: start; margin-top: 2rem; }
.qb-steps { display: grid; gap: .8rem; min-width: 0; }
.qb-step { padding: 1rem 1.1rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--ui-r); transition: border-color .3s, box-shadow .3s; }
.qb-step.is-done { border-color: rgba(28,91,184,.32); }
.qb-step:focus-within { box-shadow: 0 10px 30px rgba(11,44,99,.08); }
.qb-step-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .85rem; }
.qb-step-head > div { min-width: 0; }
.qb-num { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); color: var(--navy); font-size: .85rem; transition: background-color .3s, border-color .3s; }
.qb-num b, .qb-num .icn { grid-area: 1 / 1; transition: transform .35s var(--ui-spring), opacity .2s; }
.qb-num .icn { opacity: 0; transform: scale(.4); color: #fff; font-size: 1rem; stroke-width: 2.6; }
.qb-step.is-done .qb-num { background: var(--navy); border-color: var(--navy); }
.qb-step.is-done .qb-num b { opacity: 0; transform: scale(.4); }
.qb-step.is-done .qb-num .icn { opacity: 1; transform: none; }
.qb-step-head h2 { margin: 0; font-family: var(--sans); font-size: 1.02rem; font-weight: 700; color: var(--navy); }
.qb-step-head p { font-size: .8rem; color: var(--faint); }
.qb-state { margin-left: auto; flex: none; padding: .25rem .6rem; border-radius: 999px; background: var(--cream); font-size: .74rem; font-weight: 600; color: var(--faint); white-space: nowrap; transition: background-color .3s, color .3s; }
.qb-step.is-done .qb-state { background: var(--teal-soft); color: var(--navy-600); }
.qb .xdd-trigger { height: 46px; padding: 0 .9rem; background: #fff; border-radius: var(--ui-r-in); }
.qb .xdd.open .xdd-trigger { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(28,91,184,.12); }
.qb .xdd-panel { border-radius: 12px; }
.qb .xdd-ms-item, .qb .xdd-select-all { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink); }
.qb .xdd-done { border-radius: 999px; }
.qb-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.qb-chips:empty { display: none; }
.qb-chip { display: inline-flex; align-items: center; gap: .2rem; max-width: 100%; padding: .25rem .3rem .25rem .65rem; border-radius: 999px; background: var(--teal-soft); font-size: .78rem; font-weight: 600; color: var(--navy); animation: qbChip .3s var(--ui-spring) both; }
.qb-chip.is-all, .qb-chip.is-more { padding-right: .65rem; }
.qb-chip.is-more { background: var(--cream); color: var(--muted); }
.qb-chip button { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--navy-600); font-size: .8rem; cursor: pointer; }
.qb-chip button:hover { background: rgba(11,44,99,.1); }
@keyframes qbChip { from { opacity: 0; transform: scale(.85); } }
.qb-quick { display: flex; gap: .4rem; margin-top: .6rem; }
.qb-quick .ui-chip { height: 30px; font-size: .76rem; }
.qb-years { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.qb-field label, .qb-save label { display: block; margin: 0 0 .3rem; font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.qb-field select { height: 46px; margin: 0; padding: 0 2.2rem 0 .85rem; border-radius: var(--ui-r-in); -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6A85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right .8rem center / 14px; font-weight: 600; color: var(--navy); cursor: pointer; }
.qb-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-top: .85rem; }
.qb-track span { display: grid; justify-items: center; gap: .3rem; cursor: pointer; }
.qb-track i { width: 100%; height: 8px; border-radius: 3px; background: var(--line-soft); transition: background-color .3s, transform .3s var(--ui-spring); }
.qb-track span.on i { background: var(--navy-600); }
.qb-track span.edge i { background: var(--navy); transform: scaleY(1.45); }
.qb-track span:hover i { background: var(--teal); }
.qb-track em { font-size: .66rem; font-style: normal; color: var(--faint); font-variant-numeric: tabular-nums; }
.qb-track span.on em { font-weight: 600; color: var(--navy); }
.qb-fmts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.qb-fmt { position: relative; display: block; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer; }
.qb-fmt input { position: absolute; opacity: 0; pointer-events: none; }
.qb-fmt span { display: grid; gap: .1rem; height: 100%; padding: .7rem .75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--ui-r-in); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.qb-fmt b { font-size: .9rem; color: var(--navy); }
.qb-fmt em { font-size: .72rem; font-style: normal; color: var(--faint); }
.qb-fmt:hover span { border-color: var(--teal); }
.qb-fmt input:checked + span { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--navy-tint); }
.qb-fmt input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.qb-result { position: sticky; top: calc(var(--nav-h) + 15px + 1rem); min-width: 0; }
.app .qb-result { top: 4rem; }
.qb-panel { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--ui-r); box-shadow: var(--shadow); }
.qb-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line-soft); }
.qb-summary { margin-top: .2rem; font-size: .98rem; font-weight: 650; color: var(--navy); }
.qb-count { font-size: .84rem; color: var(--muted); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.qb-count.is-on { opacity: 1; transform: none; }
.qb-count b { margin-right: .2rem; font-family: var(--serif); font-size: 1.5rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.qb-table-wrap { max-height: 430px; overflow: auto; }
.qb-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.qb-table th { position: sticky; top: 0; z-index: 1; padding: .6rem 1.2rem; background: #F7F9FC; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.qb-table td { padding: .55rem 1.2rem; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.qb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.qb-table tbody tr:not(.qb-skel):not(.qb-none) { animation: icIn .35s var(--ui-ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
.qb-table tbody tr:not(.qb-skel):not(.qb-none):hover td { background: #F7F9FC; }
.qb-unit { color: var(--faint); }
.qb-skel td i { display: block; width: 80%; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #EDF1F7 0%, #F8FAFD 50%, #EDF1F7 100%); background-size: 200% 100%; animation: qbShimmer 1.2s linear infinite; animation-delay: calc(var(--i) * 60ms); }
.qb-skel td.num i { width: 50%; margin-left: auto; }
@keyframes qbShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.qb-none td { padding: 1.4rem 1.2rem; color: var(--muted); }
.qb-retry { border: 0; background: none; color: var(--teal-dark); font-weight: 600; text-decoration: underline; cursor: pointer; }
.qb-empty { border: 0; border-radius: 0; background: transparent; padding: 3.4rem 1rem; }
.qb-more { padding: .6rem 1.2rem; background: #F7F9FC; border-top: 1px solid var(--line-soft); font-size: .8rem; color: var(--muted); }
.qb-api { padding: 1rem 1.2rem; border-top: 1px solid var(--line-soft); }
.qb-api-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; }
.qb-copy { display: inline-flex; align-items: center; gap: .35rem; height: 30px; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 600 .76rem var(--sans); color: var(--navy); cursor: pointer; transition: background-color .2s, color .2s; }
.qb-copy:disabled { opacity: .4; cursor: default; }
.qb-copy.is-done { background: var(--navy); border-color: var(--navy); color: #fff; }
.qb-api code { display: block; padding: .75rem .85rem; border-radius: var(--ui-r-in); background: var(--navy-800); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; line-height: 1.55; color: #DCE6F5; word-break: break-all; }
.qb-api code.is-idle { color: #8FA3C4; }
.qb-actions { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0 1.2rem 1.2rem; }
.qb-save { padding: 0 1.2rem 1.2rem; }
.qb-save-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.qb-save-row input { flex: 1 1 200px; height: 44px; margin: 0; border-radius: var(--ui-r-in); }
.qb-hint { margin-top: -.4rem; padding: 0 1.2rem 1.1rem; font-size: .8rem; color: var(--muted); }

/* ---------------- ICT Reports ---------------- */
.rx { padding: 2.6rem 0 4.5rem; }
.rx-feat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-top: .9rem; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--ui-r); box-shadow: var(--shadow); }
.rx-feat-img { position: relative; min-height: 380px; background-size: cover; background-position: center; transform: scale(1.06); transition: transform 1.6s var(--ui-ease); }
.rx-feat.is-in .rx-feat-img { transform: none; }
.rx-feat-date { position: absolute; top: 1rem; left: 1rem; padding: .35rem .75rem; border-radius: 999px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: .78rem; font-weight: 700; color: var(--navy); }
.rx-feat-body { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: 2.2rem 2.4rem; background: #fff; }
.rx-feat-body h2 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.12; letter-spacing: -.01em; }
.rx-feat-desc { font-size: 1rem; color: var(--muted); }
.rx-tag { display: inline-flex; align-items: center; align-self: flex-start; gap: .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.rx-tag::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: currentColor; }
.rx-related { padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.rx-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.rx-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }
.rx-stats-band { margin-top: 2rem; }
.rx-lib { margin-top: 3.6rem; }
.rx-lib-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.rx-lib-head h2, .rx-time h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.rx-lib-head .ui-search { width: min(360px, 100%); }
.rx-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.1rem 0 1.3rem; }
.rx-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.rx-grid > .rx-card { grid-column: span 2; }
/* the full set of five sits as a bento: two wide over three */
.rx-grid.is-all > .rx-card:nth-child(-n+2) { grid-column: span 3; }
.rx-grid.is-all > .rx-card:nth-child(-n+2) .rx-card-img { aspect-ratio: 16 / 8; }
.rx-card { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--ui-r); transition: transform .35s var(--ui-ease), box-shadow .35s, border-color .35s; }
.rx-card::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(28,91,184,.11), transparent 60%); opacity: 0; pointer-events: none; transition: opacity .3s; }
.rx-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(28,91,184,.3); }
.rx-card:hover::after { opacity: 1; }
.rx-card-hit { position: absolute; inset: 0; z-index: 2; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.rx-card-hit:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.rx-card-img { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; transition: transform .8s var(--ui-ease); }
.rx-card:hover .rx-card-img { transform: scale(1.04); }
.rx-card-n { position: absolute; top: .8rem; left: .8rem; padding: .25rem .5rem; border-radius: 999px; background: rgba(7,26,62,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: .74rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.rx-card-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: .45rem; padding: 1.05rem 1.15rem 1.2rem; background: #fff; }
.rx-card-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .78rem; color: var(--faint); }
.rx-card h3 { margin: 0; font-size: 1.12rem; line-height: 1.25; }
.rx-card-body > p:not(.rx-card-meta) { font-size: .88rem; color: var(--muted); }
.rx-card-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .4rem; font-size: .84rem; font-weight: 650; color: var(--teal-dark); }
.rx-card-go .icn { transition: transform .25s var(--ui-ease); }
.rx-card:hover .rx-card-go .icn { transform: translateX(3px); }
.rx-time { margin-top: 4rem; }
.rx-tl { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 1.8rem 0 0; padding: 0; list-style: none; }
.rx-tl::before, .rx-tl::after { content: ''; position: absolute; left: 0; right: 0; top: calc(1.85rem + 6px); height: 2px; background: var(--line); }
.rx-tl::after { background: var(--navy); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ui-ease); }
.rx-tl.is-in::after { transform: scaleX(1); }
.rx-tl li { position: relative; display: grid; align-content: start; gap: .45rem; padding-right: 1rem; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ui-ease); transition-delay: calc(var(--k) * 180ms + 200ms); }
.rx-tl.is-in li { opacity: 1; transform: none; }
.rx-tl-date { height: 1.4rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--navy-600); }
.rx-tl-dot { position: relative; z-index: 1; width: 14px; height: 14px; border: 3px solid var(--navy); border-radius: 999px; background: #fff; }
.rx-tl li:last-child .rx-tl-dot { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(200,16,46,.14); }
.rx-tl-t { padding: 0; border: 0; background: none; font: 600 .95rem/1.3 var(--serif); color: var(--navy); text-align: left; cursor: pointer; }
.rx-tl-t:hover { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; }
.rx-tl-tag { font-size: .74rem; color: var(--faint); }
.rx-modal { margin: auto; width: min(640px, calc(100% - 2rem)); max-height: calc(100dvh - 3rem); padding: 0; overflow: auto; border: 0; border-radius: var(--ui-r); background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(7,26,62,.35); }
.rx-modal::backdrop { background: rgba(7,26,62,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rx-modal[open] { animation: rxPop .38s var(--ui-ease); }
@keyframes rxPop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.rx-m-img { height: 220px; background-size: cover; background-position: center; }
.rx-m-x { position: absolute; top: .8rem; right: .8rem; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--navy); cursor: pointer; box-shadow: var(--shadow); }
.rx-m-body { display: grid; gap: .7rem; padding: 1.4rem 1.6rem 1.6rem; }
.rx-m-body h2 { margin: 0; font-size: 1.6rem; line-height: 1.15; }
#rx-m-desc { color: var(--muted); }
.rx-m-cat { margin-top: .5rem; padding: .75rem .9rem; border: 1px solid var(--line-soft); border-radius: 12px; }
.rx-m-cat a { display: flex; justify-content: space-between; gap: 1rem; font-weight: 650; color: var(--navy); text-decoration: none; }
.rx-m-cat a:hover span { text-decoration: underline; }
.rx-m-cat a b { font-size: .78rem; font-weight: 600; color: var(--teal-dark); white-space: nowrap; }
.rx-m-cat p { margin-top: .3rem; font-size: .82rem; color: var(--muted); }

/* ---------------- Our Team ---------------- */
.tm { padding: 2.8rem 0 4.5rem; }
/* the members carousel: two rows of four cut-out portraits on white cards. On hover a card turns
   grey: the photo drops away, and the person (a round photo and the name, top left), what they do
   and their links take its place. A click (a tap on phones) opens their full profile. */
.tc-panel { position: relative; overflow: hidden; padding: clamp(1.3rem, 3vw, 2.6rem); background: #E8EBEF; border-radius: var(--ui-r); }
.tc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; }
.tc-eyebrow { display: flex; align-items: center; gap: .3rem; margin: 0 0 1rem; color: #0E1420; }
.tc-laptop { width: 36px; height: auto; margin-right: .35rem; filter: drop-shadow(0 2px 3px rgba(14,20,32,.22)); }
.tc-eyebrow b { padding: .14rem .55rem; border: 1.5px solid #0E1420; border-radius: 999px; font: 700 .64rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.tc-title { margin: 0; font-family: var(--sans); font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem); font-weight: 900; line-height: .94; letter-spacing: -.035em; text-transform: uppercase; color: #0E1420; }
.tc-ctrl, .tp-ctrl { display: flex; align-items: center; gap: .7rem; }
.tc-count, .tp-count { margin-right: .4rem; font: 600 .82rem var(--sans); color: #5A6575; font-variant-numeric: tabular-nums; }
.tc-count b, .tp-count b { color: #0E1420; }
.tc-track { --tc-gap: 14px; display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--tc-gap)) / 4); gap: var(--tc-gap); margin: 2rem -4px 0; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; cursor: grab; outline: none; }
.tc-track::-webkit-scrollbar, .tp-track::-webkit-scrollbar { display: none; }
.tc-track.is-drag, .tp-track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.tc-card { position: relative; display: flex; flex-direction: column; gap: .85rem; min-width: 0; padding: 10px 10px 14px; background: #fff; border-radius: 12px; color: #0E1420; cursor: pointer; scroll-snap-align: start; outline: none; opacity: 0; transform: translateY(16px);
  transition: background-color .45s var(--ui-ease), color .45s, box-shadow .3s, opacity .6s calc(var(--k, 0) * 60ms), transform .6s var(--ui-ease) calc(var(--k, 0) * 60ms); }
.tc-panel.is-in .tc-card { opacity: 1; transform: none; }
.tc-card:focus-visible { box-shadow: 0 0 0 3px #E8EBEF, 0 0 0 5px #464B53; }
.tc-media { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #fff; transition: background-color .45s; }
.tc-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 100%; user-select: none; -webkit-user-drag: none; transition: transform .55s var(--ui-ease), opacity .4s; }
.tc-info { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; min-width: 0; padding: 0 4px; transition: opacity .3s; }
.tc-name { max-width: 100%; padding: .2rem .6rem; border: 1.5px solid currentColor; border-radius: 999px; font: 700 .68rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.tc-role { font-size: .76rem; color: #5A6575; }
.tc-bio { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .85rem; padding: 14px; color: #fff; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .5s var(--ui-ease); }
.tc-bio-head { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.tc-avatar { flex: none; width: 54px; height: 54px; border: 2px solid #fff; border-radius: 999px; object-fit: cover; object-position: 50% 28%; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25); opacity: 0; transform: scale(.6); transition: opacity .25s, transform .5s var(--ui-spring); }
.tc-bio-head span { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.tc-bio-head b { font: 700 .74rem/1.25 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.tc-bio-head em { font-size: .74rem; font-style: normal; color: #D5D9DF; }
.tc-bio p { font-size: .9rem; font-weight: 500; line-height: 1.5; }
.tc-social { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
.tc-social a, .pm-social a { display: grid; place-items: center; border-radius: 999px; transition: transform .2s, background-color .2s, color .2s; }
.tc-social a { width: 32px; height: 32px; background: #fff; color: #3A3F47; }
.tc-social a:hover { transform: translateY(-2px); }
.tc-social svg, .pm-social svg { width: 15px; height: 15px; fill: currentColor; }
.tc-card.is-open, .tc-card:focus-visible { background: #464B53; color: #fff; }
.tc-card.is-open .tc-media, .tc-card:focus-visible .tc-media { background-color: transparent; }
.tc-card.is-open .tc-photo, .tc-card:focus-visible .tc-photo { opacity: 0; transform: translateY(42%) scale(.9); }
.tc-card.is-open .tc-info, .tc-card:focus-visible .tc-info { opacity: 0; }
.tc-card.is-open .tc-bio, .tc-card:focus-visible .tc-bio { opacity: 1; transform: none; pointer-events: auto; transition-delay: .08s, .08s; }
.tc-card.is-open .tc-avatar, .tc-card:focus-visible .tc-avatar { opacity: 1; transform: none; transition-delay: .12s; }
@media (hover: hover) and (min-width: 761px) {
  .tc-card:hover { background: #464B53; color: #fff; }
  .tc-card:hover .tc-media { background-color: transparent; }
  .tc-card:hover .tc-photo { opacity: 0; transform: translateY(42%) scale(.9); }
  .tc-card:hover .tc-info { opacity: 0; }
  .tc-card:hover .tc-bio { opacity: 1; transform: none; pointer-events: auto; transition-delay: .08s, .08s; }
  .tc-card:hover .tc-avatar { opacity: 1; transform: none; transition-delay: .12s; }
}
.tc-foot, .tp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin-top: 1.4rem; }
.tc-progress, .tp-progress { flex: 1 1 200px; max-width: 360px; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(14,20,32,.12); }
.tc-progress i, .tp-progress i { display: block; width: 33%; height: 100%; border-radius: inherit; background: #0E1420; }
.tc-note, .tp-note-s { font-size: .76rem; color: #5A6575; }

/* ============ NATIONAL ICT TALENT POOL ============
   The team's structure in a different key: a darker grey panel, a serif title with a red accent,
   full-bleed candid photos in four rows of four instead of studio cut-outs, field and county instead
   of a name pill. Hover runs a red line across the top and slides up the person's work and skills. */
.tp { margin-top: 1.4rem; }
.tp-panel { position: relative; overflow: hidden; padding: clamp(1.3rem, 3vw, 2.6rem); border-radius: var(--ui-r); color: #0E1420; background: #DCE0E5; }
.tp-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(14,20,32,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,20,32,.05) 1px, transparent 1px); background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(70% 60% at 85% 10%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 85% 10%, #000, transparent 75%); }
.tp-panel > * { position: relative; }
.tp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; }
.tp-eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font: 700 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #4A5160; }
.tp-eyebrow i { width: 7px; height: 7px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 0 4px rgba(200,16,46,.16); }
.tp-title { margin: .9rem 0 0; font-family: var(--serif); font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); font-weight: 600; line-height: 1.02; letter-spacing: -.015em; color: #0E1420; }
.tp-title em { font-style: italic; color: var(--gold); }
/* "National ICT Talent Pool" on one line (owner, 3 Nov 2026): the line is 12.6em wide and a phone's panel is 100vw - 54px
   inside, so on a narrow screen the size steps down to fit; wider screens keep the clamp */
.tp-title { white-space: nowrap; font-size: min(clamp(2rem, 1.3rem + 2.8vw, 3.4rem), calc((100vw - 60px) / 13.1)); }
.tp-lede { max-width: 46ch; margin-top: .8rem; color: #4A5160; text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.tp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.5rem; }
.tp-chips button { height: 32px; padding: 0 .85rem; border: 1px solid rgba(14,20,32,.2); border-radius: 999px; background: rgba(255,255,255,.55); font: 600 .78rem var(--sans); color: #2B2F36; cursor: pointer; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.tp-chips button b { font-weight: 600; opacity: .5; }
.tp-chips button:hover { border-color: rgba(14,20,32,.5); }
.tp-chips button.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }
.tp-chips button.is-on b { opacity: .8; }
.tp-track { --tp-gap: 14px; display: grid; grid-auto-columns: calc((100% - 3 * var(--tp-gap)) / 4); gap: var(--tp-gap); margin: 1.4rem -4px 0; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; cursor: grab; outline: none; }
.tp-card { position: relative; isolation: isolate; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 14px; background: #2B2F36; color: #fff; cursor: pointer; scroll-snap-align: start; outline: none; opacity: 0; transform: translateY(16px);
  transition: opacity .6s calc(var(--k, 0) * 50ms), transform .6s var(--ui-ease) calc(var(--k, 0) * 50ms), box-shadow .3s; }
.tp-card[hidden] { display: none; }
.tp-panel.is-in .tp-card { opacity: 1; transform: none; }
.tp-card:focus-visible { box-shadow: 0 0 0 3px #DCE0E5, 0 0 0 5px #0E1420; }
.tp-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; user-select: none; -webkit-user-drag: none; transition: transform .9s var(--ui-ease), filter .5s; }
.tp-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,12,16,0) 38%, rgba(10,12,16,.5) 62%, rgba(10,12,16,.92) 100%); transition: background .5s; }
.tp-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ui-ease); }
.tp-field { position: absolute; top: .7rem; left: .7rem; padding: .28rem .6rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(10,12,16,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 .58rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.tp-body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .2rem; padding: .9rem .9rem 1rem; }
.tp-name { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.15; color: #fff; }
.tp-role { font-size: .8rem; font-weight: 600; color: #E3E6EA; }
.tp-place { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: #C3C9D2; }
.tp-place .icn { flex: none; font-size: .82rem; }
.tp-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ui-ease); }
.tp-more > div { min-height: 0; overflow: hidden; }
.tp-note { margin-top: .55rem; font-size: .8rem; line-height: 1.42; color: #fff; opacity: 0; transition: opacity .3s; }
.tp-skills { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 0; padding: 0; list-style: none; opacity: 0; transition: opacity .3s; }
.tp-skills li { padding: .16rem .48rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.12); font-size: .66rem; font-weight: 600; color: #fff; }
.tp-card:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) {
  .tp-card:hover::before { transform: scaleX(1); }
  .tp-card:hover .tp-photo { transform: scale(1.07); filter: brightness(.7); }
  .tp-card:hover::after { background: linear-gradient(180deg, rgba(10,12,16,.1) 10%, rgba(10,12,16,.7) 45%, rgba(10,12,16,.95) 100%); }
  .tp-card:hover .tp-more { grid-template-rows: 1fr; }
  .tp-card:hover .tp-note, .tp-card:hover .tp-skills { opacity: 1; transition-delay: .15s; }
}

/* ============ A PERSON'S PROFILE ============
   Its own layer over the page (not the browser's dialog element), so it opens the same on every phone. */
.pm-wrap { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; }
.pm-wrap[hidden] { display: none; }
.pm-scrim { position: absolute; inset: 0; background: rgba(14,20,32,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; }
.pm { position: relative; display: flex; flex-direction: column; width: min(880px, 100%); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: hidden; border-radius: 18px; background: #fff; color: var(--ink); outline: none;
  box-shadow: 0 30px 90px rgba(14,20,32,.35); opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .3s, transform .38s var(--ui-ease); }
.pm-wrap.is-open .pm-scrim { opacity: 1; }
.pm-wrap.is-open .pm { opacity: 1; transform: none; }
.pm-in { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); min-height: 0; flex: 1; overflow: hidden; }
.pm-in.is-swap { animation: icSwap .35s var(--ui-ease); }
.pm-photo { position: relative; min-height: 0; background: #ECEEF1; }
.pm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
#pm[data-kind="team"] .pm-photo img { object-position: 50% 0%; }   /* the team's photographs keep their heads */
.pm-body { display: flex; flex-direction: column; gap: .4rem; min-height: 0; overflow-y: auto; padding: 2rem 2.2rem 1.6rem; }
.pm-kind { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.pm-body h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.1; }
.pm-role { font-weight: 650; color: #464B53; }
.pm-bio { margin-top: .3rem; color: var(--muted); }
.pm-sec { margin-top: 1rem; }
.pm-sec[hidden] { display: none; }
.pm-sec h3 { margin: 0 0 .55rem; font: 700 .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pm-edu, .pm-skills { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.pm-edu li { position: relative; padding-left: 1rem; font-size: .92rem; }
.pm-edu li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 2px; background: #464B53; }
.pm-exp { display: grid; gap: .75rem; margin: 0; padding: 0 0 0 1.1rem; list-style: none; border-left: 2px solid #E1E4E9; }
.pm-exp li { position: relative; display: grid; gap: .05rem; }
.pm-exp li::before { content: ''; position: absolute; left: calc(-1.1rem - 6px); top: .35em; width: 10px; height: 10px; border: 2px solid #464B53; border-radius: 999px; background: #fff; }
.pm-exp li:first-child::before { border-color: var(--gold); }
.pm-exp b { font-size: .94rem; color: var(--ink); }
.pm-exp span { font-size: .86rem; color: var(--muted); }
.pm-exp em { font-size: .78rem; font-style: normal; color: var(--faint); }
.pm-skills { display: flex; flex-wrap: wrap; gap: .35rem; }
.pm-skills li { padding: .22rem .6rem; border: 1px solid #DDE1E6; border-radius: 999px; background: #F4F6F8; font-size: .78rem; font-weight: 600; color: #3A3F47; }
.pm-social { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #ECEEF1; }
.pm-social a { width: 40px; height: 40px; background: #ECEEF1; color: #3A3F47; }
.pm-social a:hover { background: #3A3F47; color: #fff; }
.pm-x { position: absolute; top: .8rem; right: .8rem; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: #23262B; cursor: pointer; box-shadow: 0 4px 14px rgba(14,20,32,.18); }
.pm-nav { display: flex; align-items: center; justify-content: center; gap: 1.1rem; padding: .8rem; border-top: 1px solid #ECEEF1; background: #F2F4F6; }
.pm-count { min-width: 4.5rem; text-align: center; font: 600 .82rem var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .pm-wrap { padding: .5rem; }
  .pm { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); border-radius: 16px; }
  .pm-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow-y: auto; }
  .pm-photo { height: 240px; }
  .pm-body { padding: 1.3rem 1.2rem 1.2rem; overflow: visible; }
}

/* ============ SKIP BUTTONS ============
   Every carousel's previous and next: a soft raised disc with a double chevron, its rim the colour
   of the chevron. Pressed, it sinks. */
button.skip { width: 48px; height: 48px; display: inline-grid; place-items: center; padding: 0; border: 1.5px solid #464B53; border-radius: 999px;
  background: linear-gradient(145deg, #F8F9FB, #E2E5EA); color: #464B53; cursor: pointer; opacity: 1;
  box-shadow: -5px -5px 12px rgba(255,255,255,.95), 6px 6px 14px rgba(143,153,170,.42);
  transition: box-shadow .2s, transform .15s, color .2s, border-color .2s, opacity .2s; }
button.skip .icn { width: 20px; height: 20px; stroke-width: 2.8; }
button.skip:hover:not(:disabled) { background: linear-gradient(145deg, #F8F9FB, #E2E5EA); border-color: #23262B; color: #23262B; opacity: 1;
  box-shadow: -3px -3px 9px rgba(255,255,255,.95), 4px 4px 11px rgba(143,153,170,.5); }
button.skip:active:not(:disabled) { transform: scale(.96); box-shadow: inset 3px 3px 7px rgba(143,153,170,.45), inset -3px -3px 7px rgba(255,255,255,.9); }
button.skip:disabled { opacity: .38; cursor: default; }
button.skip:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* the National ICT Reports carousel: a thin black edge on every card, so what is behind and what
   is in front read clearly */
#rcStage .rc-card { border: 1px solid #111; }

/* Our Team's banner: taller, and framed on the two faces, with the title at the foot */
/* a slim band: the rope crosses its upper part and the title sits on the empty navy under it */
.page-header.ph-team { min-height: clamp(220px, 22vw, 340px); align-items: flex-end; background-position: center 48%; }
.ph-team .ph-scrim { background: linear-gradient(180deg, rgba(6,18,44,.04) 0%, rgba(6,18,44,.12) 50%, rgba(6,18,44,.78) 100%); }
@media (max-width: 1100px) { .tp-track { grid-auto-columns: calc((100% - 2 * var(--tp-gap)) / 3); } }
/* phones: the team stays two rows of four and the talent pool four rows of four, so each card is
   just the photo and the name; a tap opens the full profile */
@media (max-width: 760px) {
  button.skip { width: 40px; height: 40px; }
  button.skip .icn { width: 17px; height: 17px; }
  .tc.wrap, .tp.wrap { padding-inline: .7rem; }
  .tc-panel, .tp-panel { padding: 1.4rem 1rem 1.2rem; }
  .tc-head { align-items: flex-start; }
  .tc-track { --tc-gap: 7px; margin: 1.4rem -1rem 0; padding: 3px 1rem; scroll-padding-inline: 1rem; }
  .tc-card { gap: .4rem; padding: 4px 4px 7px; border-radius: 9px; }
  .tc-media { border-radius: 6px; }
  .tc-card .tc-bio, .tc-card .tc-role { display: none; }
  .tc-info { padding: 0 2px; }
  .tc-card .tc-name { padding: 0; border: 0; font-size: .54rem; line-height: 1.25; letter-spacing: .05em; white-space: normal; overflow-wrap: anywhere; }
  .tc-card.is-open .tc-photo, .tc-card:focus-visible .tc-photo { opacity: 1; transform: none; }
  .tc-card.is-open .tc-info, .tc-card:focus-visible .tc-info { opacity: 1; }
  .tp-chips { flex-wrap: nowrap; margin-inline: -1rem; padding-inline: 1rem; overflow-x: auto; scrollbar-width: none; }
  .tp-chips::-webkit-scrollbar { display: none; }
  .tp-track { --tp-gap: 7px; grid-auto-columns: calc((100% - 3 * var(--tp-gap)) / 4); margin: 1.2rem -1rem 0; padding: 3px 1rem; scroll-padding-inline: 1rem; }
  .tp-card { aspect-ratio: 3 / 4; border-radius: 9px; }
  .tp-field, .tp-role, .tp-place, .tp-more { display: none; }
  .tp-body { padding: .35rem .35rem .4rem; }
  .tp-name { font-family: var(--sans); font-size: .54rem; font-weight: 700; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; }
  .tp-card::after { background: linear-gradient(180deg, rgba(10,12,16,0) 50%, rgba(10,12,16,.85) 100%); }
  .page-header.ph-team { min-height: 230px; background-position: center 14%; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-card, .tc-photo, .tc-bio, .tc-avatar, .tc-info, .tp-card, .tp-photo, .tp-more, .tp-note, .tp-skills, .tp-card::before, .tp-card::after { transition: none !important; }
  .pm, .pm-scrim { transition: none; }
  .pm-in.is-swap { animation: none; }
}

/* ---------------- Log in ---------------- */
.lg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - var(--nav-h)); min-height: calc(100dvh - var(--nav-h)); }
.lg-brand { position: relative; display: flex; align-items: flex-end; overflow: hidden; padding: 3rem clamp(1.6rem, 4vw, 4rem); background: radial-gradient(120% 80% at 0% 0%, #1C4C9E 0%, var(--navy) 45%, var(--navy-800) 100%); color: #fff; }
.lg-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); -webkit-mask-image: radial-gradient(90% 70% at 70% 20%, #000 20%, transparent 78%); mask-image: radial-gradient(90% 70% at 70% 20%, #000 20%, transparent 78%); }
.lg-cells i { border-right: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); transition: background-color 1.4s ease; }
.lg-cells i.on { background: rgba(255,255,255,.08); transition-duration: .5s; }
.lg-cells i.on:nth-child(7n) { background: rgba(200,16,46,.32); }
.lg-brand-in { position: relative; z-index: 1; display: grid; gap: 1.4rem; max-width: 480px; }
.lg-seal { display: flex; align-items: center; gap: .85rem; color: #fff; text-decoration: none; }
.lg-seal:hover { text-decoration: none; }
.lg-seal img, .lg-seal svg { flex: none; width: 54px; height: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,.3)); }
.lg-seal strong { display: block; font: 700 1.25rem var(--serif); letter-spacing: .04em; color: #fff; }
.lg-seal span span { font-size: .82rem; color: #B9C9E6; }
.lg-brand h2 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.12; letter-spacing: -.01em; color: #fff; }
.lg-list { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.lg-list li { display: flex; align-items: flex-start; gap: .85rem; }
.lg-list .icn { flex: none; width: 38px; height: 38px; padding: 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; }
.lg-list b { display: block; font-size: .95rem; color: #fff; }
.lg-list li > span { font-size: .88rem; color: #C2D0EA; }
.lg-note { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .8rem; color: #93A8CC; }
.lg-side { display: grid; place-items: center; padding: 3rem 1.4rem; background: #fff; }
.lg-card { width: min(420px, 100%); }
.lg-card h1 { margin: .55rem 0 .3rem; font-size: 2.2rem; letter-spacing: -.01em; }
.lg-sub { margin-bottom: 1.4rem; color: var(--muted); }
.lg-alert { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1rem; padding: .7rem .85rem; border: 1px solid rgba(200,16,46,.25); border-radius: var(--ui-r-in); background: var(--gold-soft); font-size: .88rem; color: #8E0B21; animation: icIn .4s var(--ui-ease); }
.lg-alert .icn { flex: none; margin-top: .2rem; }
.lg-form { display: grid; gap: 1rem; }
.lg-form.is-shake { animation: lgShake .4s; }
@keyframes lgShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.lg-field label { display: block; margin: 0 0 .35rem; font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.lg-field input { height: 48px; margin: 0; padding: 0 .95rem; background: #fff; border: 1px solid var(--line); border-radius: var(--ui-r-in); font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
.lg-field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(28,91,184,.14); }
.lg-field.is-invalid input { border-color: var(--red); box-shadow: 0 0 0 4px rgba(200,16,46,.1); }
.lg-err { margin-top: .35rem; font-size: .8rem; color: var(--red); }
.lg-pass { position: relative; }
.lg-pass input { padding-right: 3rem; }
.lg-eye { position: absolute; top: 50%; right: .35rem; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; transform: translateY(-50%); }
.lg-eye:hover { background: var(--cream); color: var(--navy); }
.lg-eye .icn { grid-area: 1 / 1; transition: opacity .2s, transform .25s var(--ui-ease); }
.lg-eye .lg-eye-off, .lg-eye.is-on .lg-eye-on { opacity: 0; transform: scale(.6); }
.lg-eye.is-on .lg-eye-off { opacity: 1; transform: none; }
.lg-field input.is-filled { animation: lgFill .8s var(--ui-ease); }
@keyframes lgFill { from { background: var(--teal-soft); } to { background: #fff; } }
.lg-submit { position: relative; display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; height: 50px; margin-top: .4rem; overflow: hidden; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: 700 .98rem var(--sans); cursor: pointer; box-shadow: 0 1px 2px rgba(7,26,62,.25), 0 8px 22px rgba(11,44,99,.22); transition: background-color .2s, transform .15s; }
.lg-submit:hover { background: #12397D; }
.lg-submit:active { transform: scale(.985); }
.lg-submit::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.2) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; }
.lg-submit:hover::after { transform: translateX(100%); transition: transform .9s ease; }
.lg-submit i { display: grid; transition: transform .3s var(--ui-ease); }
.lg-submit:hover i { transform: translateX(3px); }
.lg-spin { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 999px; animation: lgSpin .7s linear infinite; }
.lg-submit.is-busy .lg-spin { display: block; }
.lg-submit.is-busy i { display: none; }
@keyframes lgSpin { to { transform: rotate(360deg); } }
.lg-alt { margin-top: 1.2rem; text-align: center; font-size: .9rem; color: var(--muted); }
.lg-alt a { font-weight: 650; color: var(--teal-dark); }

/* ---------------- smaller screens ---------------- */
@media (max-width: 1000px) {
  .rx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-grid > .rx-card, .rx-grid.is-all > .rx-card:nth-child(-n+2) { grid-column: auto; }
  .rx-grid.is-all > .rx-card:nth-child(-n+2) .rx-card-img { aspect-ratio: 16 / 10; }
  .qb-layout { grid-template-columns: minmax(0, 1fr); }
  .qb-result { position: static; }
}
@media (max-width: 900px) {
  .ic-hero, .tm-head-split { grid-template-columns: minmax(0, 1fr); }
  .ic-tools-band { position: static; }
  .ic-body { grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: 1rem; }
  .ic-rail { position: static; flex-direction: row; gap: .4rem; max-height: none; margin: 0 -1.4rem; padding: .2rem 1.4rem .6rem; overflow-x: auto; background: transparent; border: 0; border-radius: 0; scrollbar-width: none; }
  .ic-rail::-webkit-scrollbar { display: none; }
  .ic-rail-h { display: none; }
  .ic-cat { flex: none; padding: .45rem .85rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
  .ic-cat.is-on { border-color: var(--navy); }
  .rx-feat { grid-template-columns: minmax(0, 1fr); }
  .rx-feat-img { min-height: 230px; }
  .rx-feat-body { padding: 1.4rem 1.3rem 1.5rem; }
  .lg { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .lg-brand { align-items: center; padding: 1.4rem; }
  .lg-brand h2, .lg-list, .lg-note { display: none; }
  .lg-side { place-items: start center; padding: 2rem 1.4rem 3rem; }
}
@media (max-width: 760px) {
  .ui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-stats > div:nth-child(odd) { border-left: 0; }
  .ui-stats > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .ui-stats dd { font-size: 1.6rem; }
  .ic-tools .ui-search { flex-basis: 100%; max-width: none; }
  .ic-tools .ui-seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ic-count { margin-left: 0; }
  .ic-row { grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: "main go" "meta meta" "src src"; row-gap: .5rem; padding: .85rem .95rem; }
  .ic-row-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ic-row-meta { justify-content: flex-start; max-width: none; }
  .ic-row-go { opacity: 1; transform: none; }
  .ic-sheet-panel { top: auto; height: 92%; width: 100%; border-radius: 18px 18px 0 0; transform: translateY(104%); }
  .ic-sheet-body { padding: 1.2rem 1.2rem 2rem; }
  .ic-method li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .qb-fmts { grid-template-columns: minmax(0, 1fr); }
  .qb-table th, .qb-table td { padding-inline: .8rem; }
  .qb-table .qb-unit, .qb-table th:last-child { display: none; }
  .qb-panel-head { flex-direction: column; gap: .3rem; }
  .rx-grid { grid-template-columns: minmax(0, 1fr); }
  .rx-lib-head .ui-search { width: 100%; }
  .rx-tl { grid-auto-flow: row; grid-auto-columns: auto; gap: 1.3rem; padding-left: 1.7rem; }
  .rx-tl::before, .rx-tl::after { left: 6px; right: auto; top: .3rem; bottom: .3rem; width: 2px; height: auto; }
  .rx-tl::after { transform-origin: top; transform: scaleY(0); }
  .rx-tl.is-in::after { transform: scaleY(1); }
  .rx-tl li { padding-right: 0; gap: .2rem; }
  .rx-tl-date { height: auto; }
  .rx-tl-dot { position: absolute; top: .1rem; left: -1.7rem; }
  .rx-m-img { height: 170px; }
  .rx-m-body { padding: 1.2rem 1.2rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-eyebrow i, .ui-empty-art i, .ic-row.is-enter, .ic-sheet-body.is-swap, .ic-cov-dots i.on, .qb-chip, .qb-skel td i,
  .qb-table tbody tr, .rx-modal[open], .lg-alert, .lg-form.is-shake, .lg-field input.is-filled { animation: none !important; }
  .ic-sheet-panel, .ic-sheet-scrim, .ic-spark-bar i, .rx-feat-img, .rx-tl::after, .rx-tl li, .tc-card, .tc-photo, .tc-bio, .tm-grid li, .tm-stack, .lg-cells i, .lg-submit::after { transition: none !important; }
  .rx-card:hover, .ic-row:hover { transform: none; }
}

/* ============ THE CLOSE ABOVE THE FOOTER ============
   The Careers and About ending (.cs-outro) for every other public page: the name, large, rising
   out of the page into the footer's navy. It takes over the footer's top margin. */
.site-outro { position: relative; overflow: hidden; height: clamp(10rem, 21vw, 19rem); margin-top: 1rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #C4D4EC 20%, #3D69B8 64%, var(--navy-800) 100%); }
.site-outro + .footer-dh { margin-top: 0; }
.site-word { position: absolute; left: 50%; bottom: -.16em; transform: translateX(-50%); color: rgb(255 255 255 / .92); white-space: nowrap;
  font: 500 clamp(8rem, 27vw, 26rem)/.8 var(--sans); letter-spacing: -.06em; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 18%, transparent 92%); mask-image: linear-gradient(180deg, #000 18%, transparent 92%);
  transition: transform 1.3s cubic-bezier(.16, 1, .3, 1), opacity 1.3s cubic-bezier(.16, 1, .3, 1); }
.site-outro.is-armed:not(.is-in) .site-word { opacity: 0; transform: translate(-50%, 22%); }
@media (prefers-reduced-motion: reduce) { .site-word { transition: none; } }

/* ============ NATIONAL ICT PATRONS ============
   The team's studio cards on a slightly deeper grey; each card names whether the person is an
   ambassador or a patron. */
.tc + .tc { margin-top: 1.4rem; }   /* the patrons come first, the team after them */
.tc.is-patrons .tc-panel { background: #E2E5EA; }
.tc.is-patrons .tc-card:focus-visible { box-shadow: 0 0 0 3px #E2E5EA, 0 0 0 5px #464B53; }
.tc-badge { position: absolute; top: 8px; left: 8px; z-index: 1; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .24rem .58rem; border-radius: 999px; background: var(--gold); font: 700 .58rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; transition: opacity .3s; }
.tc-card.is-open .tc-badge, .tc-card:focus-visible .tc-badge { opacity: 0; }
@media (hover: hover) and (min-width: 761px) { .tc-card:hover .tc-badge { opacity: 0; } }
@media (max-width: 760px) { .tc-badge { top: 3px; left: 3px; max-width: calc(100% - 6px); padding: .12rem .3rem; font-size: .42rem; letter-spacing: .04em; } }

/* "See more", "All papers", "All updates" and "Read update": grey, to sit with the skip buttons */
.sec-head-dh .more, #featuredPapers .more, #natReports .more, #latestUpdates .more {
  display: inline-flex; align-items: center; gap: .4rem; height: 40px; padding: 0 1rem; border: 1.5px solid #464B53; border-radius: 999px;
  background: linear-gradient(145deg, #F8F9FB, #E2E5EA); color: #464B53; font-size: .84rem; font-weight: 700; text-decoration: none;
  box-shadow: -4px -4px 10px rgba(255,255,255,.95), 5px 5px 12px rgba(143,153,170,.4); transition: color .2s, border-color .2s, box-shadow .2s; }
.sec-head-dh .more:hover, #featuredPapers .more:hover, #natReports .more:hover, #latestUpdates .more:hover { color: #23262B; border-color: #23262B; text-decoration: none; box-shadow: -3px -3px 8px rgba(255,255,255,.95), 4px 4px 10px rgba(143,153,170,.5); }
.sq-go { background: #464B53; }
.sq-go:hover { background: #23262B; opacity: 1; }
@media (max-width: 760px) { .sec-head-dh .more, #featuredPapers .more, #natReports .more, #latestUpdates .more { height: 36px; padding: 0 .8rem; font-size: .8rem; } }

/* the About menu's ICT Patrons and ICT Talent Pool land on their sections below the sticky bar */
#team, #patrons, #talent { scroll-margin-top: calc(var(--nav-h) + 30px); }

/* home: a thin black edge on each featured paper, each news card and the "Up next" box */
#fpTrack .fp-card { border: 1px solid #111; }
#sqTrends .sq-card { border: 1px solid #111; }
#homeVideo .vid-queue { border: 1px solid #111; box-shadow: none; }

/* The About page alone wears the carved-mask wallpaper (a seamless tile cut from the artwork) in
   place of the binary canvas. Its sections each have their own ground, so the masks are laid over
   every one of them except the film hero: the line work (public/img/brand/mask-lines.webp, the masks
   as transparency) is tinted pale grey on the light sections and faint white on the dark and blue
   ones, behind the content. The partner logo tiles carry it too. */
html:has(.ab-hero) { background-image: linear-gradient(rgb(255 255 255 / .5), rgb(255 255 255 / .5)), url("/img/brand/mask-pattern-light.webp"); background-size: auto, 185px auto; }
.cs .ab-story, .cs .ab-bench, .cs .ab-faq { position: relative; isolation: isolate; }
.cs .ab-story::after, .cs .ab-bench::after, .cs .ab-faq::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--mask-ink, #5B6470); opacity: var(--mask-op, .085);
  -webkit-mask: url("/img/brand/mask-lines.webp") 0 0 / 185px auto repeat; mask: url("/img/brand/mask-lines.webp") 0 0 / 185px auto repeat;
  filter: blur(1.6px); }

/* ============ TYPE: LABELS AND BYLINES ============
   Category labels ("Report", "Sector report", "Assessment"...) are set in Marvin Visions as plain
   text, with no pill behind them; bylines and dates ("by ... · Jun 2025") in Kazimir. Both are
   licensed faces loaded from public/fonts when present (views.js); Righteous and Spectral stand in. */
:root { --font-label: 'Marvin Visions', 'Righteous', 'Public Sans', system-ui, sans-serif; --font-byline: 'Kazimir', 'Spectral', Georgia, serif; }
.tag, .rx-tag, .rp-tag, .rx-tl-tag { font-family: var(--font-label); font-weight: 400; letter-spacing: .07em; }
.tag { padding: 0; border-radius: 0; background: none; }
.fp-meta, .rc-meta, .rx-card-meta, .rp-meta, .rp-authors, .authors, .media-meta { font-family: var(--font-byline); font-size: 1.04em; }
.rc-meta { font-size: .8rem; }

/* ============ THE RED RULE UNDER A SECTION HEADING ============
   Five segments that read as one line. Now and then (app.js) they round into dots, run a loading
   wave for three seconds, and close back into the line. */
.hx-rule { position: absolute; left: 0; bottom: calc(-.42rem - 2px); display: flex; align-items: center; gap: 0; width: 2.6rem; height: 7px; pointer-events: none;
  transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.16,1,.3,1) .35s, width .5s cubic-bezier(.16,1,.3,1), gap .5s cubic-bezier(.16,1,.3,1); }
.hx-head.is-in .hx-rule { transform: scaleX(1); }
.hx-rule i { flex: 1 1 0; height: 3px; min-width: 0; border-radius: 0; background: #C8102E;
  transition: flex-grow .5s cubic-bezier(.16,1,.3,1), flex-basis .5s cubic-bezier(.16,1,.3,1), height .5s cubic-bezier(.16,1,.3,1), border-radius .5s ease; }
.hx-rule i:first-child { border-radius: 3px 0 0 3px; }
.hx-rule i:last-child { border-radius: 0 3px 3px 0; }
.hx-rule.is-dots { gap: 5px; width: calc(5 * 7px + 4 * 5px); }
.hx-rule.is-dots i { flex: 0 0 7px; height: 7px; border-radius: 50%; animation: hxDot 1.1s ease-in-out 2 both; animation-delay: calc(var(--d, 0) * 110ms + .4s); }
@keyframes hxDot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .hx-rule, .hx-rule i { transition: none; animation: none !important; } }

/* ============ THE BIRD'S SLIP ============
   bird.js wraps the two letters under the bird's feet for three seconds: one shakes, the one it
   stands on drops a little and tips, then springs back. */
.slip-l { display: inline-block; transform-origin: 50% 100%; will-change: transform; }
.slip-shake { animation: slipShake 1.5s cubic-bezier(.36,.07,.19,.97) .45s both; }
.slip-drop { animation: slipDrop 3s cubic-bezier(.3,.7,.2,1) both; }
@keyframes slipShake {
  0%, 100% { transform: none; }
  8% { transform: translateX(-1.6px) rotate(-3deg); }
  16% { transform: translateX(1.6px) rotate(3deg); }
  24% { transform: translateX(-1.2px) rotate(-2deg); }
  32% { transform: translateX(1px) rotate(2deg); }
  42% { transform: translateX(-.6px) rotate(-1deg); }
  55% { transform: translateX(.3px) rotate(.5deg); }
  70% { transform: none; }
}
@keyframes slipDrop {
  0% { transform: none; }
  10% { transform: translateX(.8px) rotate(1.5deg); }
  15% { transform: translateX(-.8px) rotate(-1.5deg); }
  20% { transform: none; }
  32% { transform: translateY(.16em) rotate(7deg); }
  38% { transform: translateY(.12em) rotate(5deg); }
  45% { transform: translateY(.17em) rotate(7.5deg); }
  70% { transform: translateY(.16em) rotate(7deg); }
  84% { transform: translateY(-.03em) rotate(-1.5deg); }
  93% { transform: translateY(.01em) rotate(.4deg); }
  100% { transform: none; }
}

/* the hero quotes' source line ("State House, Nairobi · president.go.ke") in Righteous */
.hs-qmeta { font-family: 'Righteous', var(--sans); letter-spacing: .03em; }

/* ============ PROGRAMS ============ */
.pg { padding: 2.6rem 0 4.5rem; }
.pg-sec + .pg-sec { margin-top: 4.2rem; }
.pg-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: end; gap: 1rem 3rem; margin-bottom: 1.6rem; }
.pg-head h2 { margin: .55rem 0 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; letter-spacing: -.01em; }
.pg-head > p { color: var(--muted); }
.pg-note { margin-top: 1rem; font-size: .8rem; color: var(--faint); }
.pg-stages { display: grid; gap: .5rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.pg-stages li { display: grid; grid-template-columns: 3rem minmax(0, 1.4fr) minmax(0, 1fr) 9.5rem; align-items: center; gap: 1rem; padding: .85rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  opacity: 0; transform: translateY(10px); transition: opacity .5s calc(var(--k) * 60ms), transform .5s var(--ui-ease) calc(var(--k) * 60ms); }
.pg-stages.is-in li { opacity: 1; transform: none; }
.pg-stage-n { font: 700 1.5rem/1 var(--sans); color: var(--gold); }
.pg-stage-t { font-weight: 650; color: var(--navy); }
.pg-stage-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--line-soft); }
.pg-stage-bar i { display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: inherit; background: var(--navy-600); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ui-ease) calc(var(--k) * 60ms + .2s); }
.pg-stages.is-in .pg-stage-bar i { transform: scaleX(1); }
.pg-stage-d { font-size: .86rem; color: var(--muted); text-align: right; }
.pg-stage-d b { font-size: 1.05rem; color: var(--navy); }
.pg-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.pg-event { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); background: #fff; border: 1px solid #111; border-radius: 14px; overflow: hidden;
  opacity: 0; transform: translateY(12px); transition: opacity .5s calc(var(--k) * 60ms), transform .5s var(--ui-ease) calc(var(--k) * 60ms), box-shadow .3s; }
.pg-events.is-in .pg-event { opacity: 1; transform: none; }
.pg-event:hover { box-shadow: var(--shadow-lg); }
.pg-date { display: grid; align-content: center; justify-items: center; gap: .35rem; padding: 1rem .5rem; background: #0E1420; color: #fff; text-align: center; }
.pg-date b { font: 700 2.1rem/1 var(--sans); color: #FF4D5E; text-shadow: 0 0 12px rgba(255,77,94,.45); }
.pg-date span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #C3C9D2; }
.pg-event-in { display: grid; gap: .35rem; align-content: start; padding: 1rem 1.15rem 1.1rem; }
.pg-event-in h3 { margin: 0; font-size: 1.12rem; }
.pg-event-in p { font-size: .88rem; color: var(--muted); }
.pg-where { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .2rem; font-size: .8rem !important; color: var(--navy) !important; font-weight: 600; }
.pg-dot { color: var(--faint); }
.pg-train { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.pg-course { display: flex; flex-direction: column; gap: .55rem; padding: 1.2rem 1.25rem 1.3rem; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  opacity: 0; transform: translateY(12px); transition: opacity .5s calc(var(--k) * 60ms), transform .5s var(--ui-ease) calc(var(--k) * 60ms), box-shadow .3s, border-color .3s; }
.pg-train.is-in .pg-course { opacity: 1; transform: none; }
.pg-course:hover { border-color: #464B53; box-shadow: var(--shadow-lg); }
.pg-course-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pg-course h3 { margin: 0; font-size: 1.15rem; }
.pg-course > p { font-size: .9rem; color: var(--muted); }
.pg-facts { display: grid; gap: .35rem; margin: .3rem 0 .4rem; padding: .7rem 0 0; border-top: 1px solid var(--line-soft); }
.pg-facts > div { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: .5rem; font-size: .86rem; }
.pg-facts dt { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding-top: .15rem; }
.pg-facts dd { margin: 0; color: var(--ink); }
.pg-facts dd b { font-size: 1rem; color: var(--navy); }
.pg-course .ui-btn { align-self: flex-start; margin-top: auto; }
.pg-status { padding: .2rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.pg-status.is-open { background: #E3F4E8; color: #1E6B3A; }
.pg-status.is-opening-soon { background: #EEF1F5; color: #464B53; }
.pg-status.is-by-invitation { background: var(--gold-soft); color: var(--gold); }
.pg-films { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.pg-film { display: flex; flex-direction: column; gap: .35rem; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.pg-film-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid #111; border-radius: 14px; background-size: cover; background-position: center; transition: transform .4s var(--ui-ease); }
.pg-film:hover .pg-film-img { transform: translateY(-3px); }
.pg-play { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: transform .3s var(--ui-spring); }
.pg-play svg { width: 22px; height: 22px; margin-left: 3px; fill: #0E1420; }
.pg-film:hover .pg-play { transform: scale(1.1); }
.pg-film-t { margin-top: .3rem; font: 600 1rem/1.25 var(--serif); color: var(--navy); }
.pg-film-b { font-size: .82rem; color: var(--muted); }
.pg-film:focus-visible .pg-film-img, .pg-photo:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.pg-photos { columns: 4 220px; column-gap: .8rem; }
.pg-photo { display: block; width: 100%; margin: 0 0 .8rem; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #EEF1F5; cursor: zoom-in; break-inside: avoid; }
.pg-photo img { display: block; width: 100%; height: auto; transition: transform .6s var(--ui-ease), filter .4s; }
.pg-photo:hover img { transform: scale(1.04); filter: saturate(1.1); }
/* the viewer */
.lb-wrap { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; }
.lb-wrap[hidden] { display: none; }
.lb-scrim { position: absolute; inset: 0; background: rgba(8,10,14,.86); opacity: 0; transition: opacity .25s; }
.lb { position: relative; display: flex; flex-direction: column; gap: .8rem; width: min(1100px, 100%); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); outline: none; opacity: 0; transform: scale(.97); transition: opacity .3s, transform .35s var(--ui-ease); }
.lb-wrap.is-open .lb-scrim { opacity: 1; }
.lb-wrap.is-open .lb { opacity: 1; transform: none; }
.lb-stage { display: grid; place-items: center; min-height: 0; flex: 1; }
.lb-stage.is-swap { animation: icSwap .35s var(--ui-ease); }
.lb-stage img, .lb-stage video { display: block; max-width: 100%; max-height: calc(100dvh - 9rem); border-radius: 12px; background: #000; }
.lb-foot { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.lb-cap { max-width: 46rem; text-align: center; font-size: .9rem; color: #E3E6EA; }
.lb-x { position: absolute; top: -.4rem; right: -.4rem; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: #fff; color: #0E1420; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
@media (max-width: 1000px) { .pg-train { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-films { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pg-head { grid-template-columns: minmax(0, 1fr); }
  .pg-stages li { grid-template-columns: 2.2rem minmax(0, 1fr); row-gap: .4rem; }
  .pg-stage-bar { grid-column: 2; }
  .pg-stage-d { grid-column: 2; text-align: left; }
  .pg-events, .pg-train { grid-template-columns: minmax(0, 1fr); }
  .pg-event { grid-template-columns: 5rem minmax(0, 1fr); }
  .pg-date b { font-size: 1.7rem; }
  .pg-photos { columns: 2; }
  .lb-x { top: .3rem; right: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-stages li, .pg-stage-bar i, .pg-event, .pg-course { transition: none !important; opacity: 1; transform: none; }
}

/* ============ CAREERS IN BLUE ============
   The careers pages (not About, which shares their styles) trade the near-black for the flag's
   blues, so every section reads clearly. */
.cs:not(.ab) { --cs-black: #123B80; --cs-navy: #1A438F; }
.cs:not(.ab) .cs-hero, .cs:not(.ab) .cs-hero--film { background: #123B80; }
.cs:not(.ab) .cs-film-scrim { background:
    linear-gradient(90deg, rgb(11 44 99 / .72) 0%, rgb(11 44 99 / .42) 36%, rgb(11 44 99 / .1) 66%, rgb(11 44 99 / 0) 100%),
    linear-gradient(180deg, rgb(11 44 99 / .35) 0%, rgb(11 44 99 / 0) 24%, rgb(11 44 99 / 0) 58%, rgb(26 67 143 / .7) 88%, #1A438F 100%); }
.cs:not(.ab) .cs-hero--film .cs-hero-sub { text-shadow: 0 1px 14px rgb(11 44 99 / .55); }
.cs:not(.ab) .cs-roles { background: linear-gradient(180deg, var(--cs-paper) 0%, #9DB6DE 3%, #3563B3 8%, #22519F 40%, #1A458F 70%, #123B80 100%); }
.cs:not(.ab) .cs-dark { background: linear-gradient(180deg, #123B80 0%, #16408A 70%, #1A438F 100%); }
.cs:not(.ab) .cs-ap-hero, .cs:not(.ab) .cs-ok { background: linear-gradient(180deg, #0F3577 0%, #1A438F 55%, #2A5BB0 100%); }
@media (max-width: 860px) {
  .cs:not(.ab) .cs-film-scrim { background: linear-gradient(180deg, rgb(11 44 99 / .62) 0%, rgb(11 44 99 / .38) 45%, rgb(26 67 143 / .7) 82%, #1A438F 100%); }
}

/* ============ JUSTIFIED TEXT ============
   Paragraphs and list items are set flush on both edges, with hyphenation so narrow columns do
   not open up gaps. Display-sized quotes and anything inside a deliberately centred block keep
   their own alignment. */
p, li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 3 3; }
:is(.page-header, .stat-big-cell, .video-placeholder, .lib-empty, .rp-empty, .dx-empty, .pt-note, .pt-logo-note, .pt-focal,
  .bk-copy, .bk-hint, .bk-plate, .m-logo, .lsc-empty, .lsc-c-empty, .lsc-status, .ui-empty, .pg-date, .imglib-del-empty,
  .m-zig-panel, .m-pol-copy, [style*="text-align:center"], [style*="text-align: center"]) :is(p, li),
.hs-quote p { text-align: inherit; -webkit-hyphens: manual; hyphens: manual; }
nav li, .nav-sheet li, .sheet-list li, .tm-legend li, .ui-stats li, .rx-tl li { text-align: inherit; }

/* ============ SELECTOR BOXES, PLAY BUTTONS, LABELS AND SLIDERS ============
   Dropdown boxes everywhere: flat white fields with a thin grey edge, square corners and a solid
   black caret. "Play years" is a flat gold block. The command-bar labels are in the label face
   (Righteous standing in for Marvin Visions). Range sliders: a deep track that fills in gold up to
   the value, cut into one segment per year where there are a dozen steps or fewer, and a white
   thumb with a dark centre. */
.xdd .xdd-trigger.xdd-trigger { position: relative; height: 38px; padding: 0 2.2rem 0 .8rem; background: #fff; border: 1px solid #BFC4CC; border-radius: 2px;
  box-shadow: none; font: 500 .92rem var(--sans); color: #1E2430; transition: border-color .15s, box-shadow .15s; }
.xdd .xdd-trigger.xdd-trigger > .icn { display: none; }
.xdd .xdd-trigger.xdd-trigger::after { content: ''; position: absolute; top: 50%; right: .8rem; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #111; transform: translateY(-35%); transition: transform .2s; }
.xdd.open .xdd-trigger.xdd-trigger::after { transform: translateY(-60%) rotate(180deg); }
.xdd .xdd-trigger.xdd-trigger:hover { border-color: #7F8794; box-shadow: none; }
.xdd.open .xdd-trigger.xdd-trigger, .xdd .xdd-trigger.xdd-trigger:focus-visible { border-color: #1E2430; outline: none; box-shadow: 0 0 0 3px rgba(255,204,0,.5); }
.xdd .xdd-trigger.xdd-trigger .xdd-trigger-label { color: #1E2430; }
.selector-field select, .qb-field select { height: 38px; padding: 0 2.2rem 0 .8rem; border: 1px solid #BFC4CC; border-radius: 2px; -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 7z' fill='%23111'/%3E%3C/svg%3E") no-repeat right .8rem center / 12px 8px;
  font-weight: 500; color: #1E2430; }
.selector-field select:focus, .qb-field select:focus { outline: none; border-color: #1E2430; box-shadow: 0 0 0 3px rgba(255,204,0,.5); }
.dx-play.dx-play, .lsc-play.lsc-play { height: 38px; border: 0; border-radius: 2px; background: #FFCC00; color: #10141C; font: 800 .86rem var(--sans); letter-spacing: .03em;
  box-shadow: none; transition: background-color .15s, transform .1s; }
.dx-play.dx-play span, .lsc-play.lsc-play span { color: #10141C; }
.dx-play.dx-play svg, .lsc-play.lsc-play svg { stroke: #10141C; }
.dx-play.dx-play:hover, .lsc-play.lsc-play:hover { background: #F2C000; box-shadow: none; }
.dx-play.dx-play:active, .lsc-play.lsc-play:active { transform: translateY(1px); }
.dx-play.dx-play.is-playing, .lsc-play.lsc-play.is-playing { background: #10141C; }
.dx-play.dx-play.is-playing span, .lsc-play.lsc-play.is-playing span { color: #FFCC00; }
.dx-play.dx-play.is-playing svg, .lsc-play.lsc-play.is-playing svg { stroke: #FFCC00; }
.dx-cmd .selector-field label { font-family: var(--font-label); font-weight: 400; font-size: .8rem; letter-spacing: .14em; color: #2B2F36; }
.dx-cmd .selector-field label b { font-family: var(--num); }
input[type=range] { -webkit-appearance: none; appearance: none; height: 24px; margin: 0; padding: 0; background: transparent; cursor: pointer; --p: 50%; --seg: 100%; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #FFCC00 0 var(--p), #E2E6EC var(--p) 100%); box-shadow: inset 0 1px 2px rgba(16,20,28,.22), 0 1px 0 rgba(255,255,255,.8); }
input[type=range]::-moz-range-track { height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #FFCC00 0 var(--p), #E2E6EC var(--p) 100%); box-shadow: inset 0 1px 2px rgba(16,20,28,.22); }
input[type=range].has-steps::-webkit-slider-runnable-track {
  background: repeating-linear-gradient(90deg, transparent 0 calc(var(--seg) - 2px), #fff calc(var(--seg) - 2px) var(--seg)), linear-gradient(90deg, #FFCC00 0 var(--p), #E2E6EC var(--p) 100%); }
input[type=range].has-steps::-moz-range-track {
  background: repeating-linear-gradient(90deg, transparent 0 calc(var(--seg) - 2px), #fff calc(var(--seg) - 2px) var(--seg)), linear-gradient(90deg, #FFCC00 0 var(--p), #E2E6EC var(--p) 100%); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -6px; border: 0; border-radius: 50%;
  background: radial-gradient(circle, #10141C 0 3.5px, #fff 4px); box-shadow: 0 0 0 2px #10141C, 0 3px 8px rgba(16,20,28,.35); transition: transform .15s, box-shadow .15s; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: radial-gradient(circle, #10141C 0 3.5px, #fff 4px); box-shadow: 0 0 0 2px #10141C, 0 3px 8px rgba(16,20,28,.35); }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.08); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(.94); }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #10141C, 0 0 0 6px rgba(255,204,0,.55); }
input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px #10141C, 0 0 0 6px rgba(255,204,0,.55); }

/* ============ THE GET STARTED BUTTON: WEB SHOT ============
   A red glass pill that shoots silk at the pointer (after the owner's "Web Shot Button" component, ported
   from React to this stylesheet and app.js). Bring the cursor near and thin threads leave the edge facing
   it and hang at the pointer; move away and they spring back. The threads are a canvas behind the pill
   (.shot-threads, drawn in the wrapper's colour) and only the pill takes the click. No backdrop blur: the
   bar is solid white, and a blur on it repaints the animated pages beneath every frame. */
.shot-wrap { position: relative; isolation: isolate; display: inline-flex; color: #0B2C63; }
.shot-threads { position: absolute; z-index: -1; pointer-events: none; }
.shot { --shot-tint: #C8102E; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 44px; padding: 0 1.5rem; border: 0; border-radius: 999px; white-space: nowrap; user-select: none; -webkit-user-select: none; cursor: pointer;
  touch-action: none;   /* a drag that starts on the pill draws threads instead of scrolling the menu; a tap still opens */
  background: rgba(200,16,46,.92); background: color-mix(in oklab, var(--shot-tint) 92%, transparent); color: #fff;
  font: 600 14px/1 var(--sans); letter-spacing: -.01em; text-transform: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.3),
    inset 0 -12px 18px -10px rgba(0,0,0,.14), inset 0 10px 16px -8px rgba(255,255,255,.55), 0 12px 28px -12px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.1);
  transition: transform .2s cubic-bezier(.3,1.3,.5,1); }
.shot:hover { text-decoration: none; }
.shot:active { transform: scale(.96); }
.shot:focus-visible { outline: 2px solid #0B2C63; outline-offset: 2px; }
.shot-hl, .shot-lo { position: absolute; border-radius: 999px; pointer-events: none; }
.shot-hl { left: 7%; right: 7%; top: 2px; height: 48%; background: linear-gradient(to bottom, rgba(255,255,255,.75), rgba(255,255,255,0)); }
.shot-lo { left: 20%; right: 20%; bottom: 2px; height: 34%; background: linear-gradient(to top, rgba(255,255,255,.45), rgba(255,255,255,0)); filter: blur(2px); }
.shot-label { position: relative; display: inline-flex; align-items: center; gap: .5rem; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.shot .icn { width: 1.1em; height: 1.1em; flex: none; }
.shot-lg { height: 56px; padding: 0 2rem; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .shot { transition: none; } .shot:active { transform: none; } }

/* ============ THE PEARL BUTTON (sign-in and send) ============
   A logo-navy glossy pill: inner highlights above and below, a soft sheen across the top and a curved
   glare behind it, the label fading out toward its foot. On hover the sheen lifts, the glare drops;
   pressed, it sinks. (After the "Pearl Button" component the owner chose,
   scaled from its poster size to the nav bar.) */
:is(.lg-submit, .sp2-send).pearl { --pearl-bg: #0B2C63; position: relative; padding: 0; border: 0; border-radius: 100px; background: var(--pearl-bg); filter: none; cursor: pointer;
  box-shadow: inset 0 .18rem .55rem rgba(255,255,255,.3), inset 0 -.06rem .2rem rgba(0,0,0,.7), inset 0 -.25rem .55rem rgba(255,255,255,.5),
    0 .7rem .9rem rgba(11,44,99,.22), 0 .35rem .35rem -.22rem rgba(11,44,99,.7);
  transition: box-shadow .2s ease, transform .2s ease; }
:is(.lg-submit, .sp2-send).pearl .pearl-wrap { position: relative; display: block; overflow: hidden; padding: .58rem 1.05rem; border-radius: inherit;
  color: rgba(255,255,255,.92); font: 600 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
:is(.lg-submit, .sp2-send).pearl .pearl-wrap::before, :is(.lg-submit, .sp2-send).pearl .pearl-wrap::after { content: ''; position: absolute; transition: all .3s ease; pointer-events: none; }
:is(.lg-submit, .sp2-send).pearl .pearl-wrap::before { left: -15%; right: -15%; bottom: 25%; top: -100%; border-radius: 50%; background: rgba(255,255,255,.12); }
:is(.lg-submit, .sp2-send).pearl .pearl-wrap::after { left: 6%; right: 6%; top: 12%; bottom: 40%; border-radius: 12px 12px 0 0;
  box-shadow: inset 0 6px 5px -6px rgba(255,255,255,.8); background: linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%); }
:is(.lg-submit, .sp2-send).pearl .pearl-p { position: relative; display: flex; align-items: center; gap: .5rem; transform: translateY(2%); transition: transform .2s ease;
  -webkit-mask-image: linear-gradient(to bottom, #fff 40%, transparent); mask-image: linear-gradient(to bottom, #fff 40%, transparent); }
:is(.lg-submit, .sp2-send).pearl:hover { text-decoration: none;
  box-shadow: inset 0 .18rem .3rem rgba(255,255,255,.4), inset 0 -.06rem .2rem rgba(0,0,0,.7), inset 0 -.25rem .55rem rgba(255,255,255,.7),
    0 .7rem .9rem rgba(11,44,99,.22), 0 .35rem .35rem -.22rem rgba(11,44,99,.7); }
:is(.lg-submit, .sp2-send).pearl:hover .pearl-wrap::before { transform: translateY(-5%); }
:is(.lg-submit, .sp2-send).pearl:hover .pearl-wrap::after { opacity: .4; transform: translateY(5%); }
:is(.lg-submit, .sp2-send).pearl:hover .pearl-p { transform: translateY(-4%); }
:is(.lg-submit, .sp2-send).pearl:active { transform: translateY(2px);
  box-shadow: inset 0 .18rem .3rem rgba(255,255,255,.5), inset 0 -.06rem .2rem rgba(0,0,0,.8), inset 0 -.25rem .55rem rgba(255,255,255,.4),
    0 .5rem .7rem rgba(11,44,99,.2), 0 .28rem .28rem -.2rem rgba(11,44,99,.7); }
:is(.lg-submit, .sp2-send).pearl:focus-visible { outline: 2px solid #FFCC00; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { :is(.lg-submit, .sp2-send).pearl, :is(.lg-submit, .sp2-send).pearl .pearl-p, :is(.lg-submit, .sp2-send).pearl .pearl-wrap::before, :is(.lg-submit, .sp2-send).pearl .pearl-wrap::after { transition: none; } }

/* ============ THE PAGE ARRIVES WHOLE ============
   Nothing waits to be scrolled to: every section, card, chart, heading and number is in its
   finished state from the first paint (the owner's call). The scripts no longer arm entrances;
   these rules hold the final state even where an old class or a cached script still asks for one.
   Motion that answers the reader stays: hovers, carousels, the bird, the red rule's dots. */
.reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
.hx .hw > span { opacity: 1; transform: none; filter: none; transition: none; }
.hx-head > :not(h2) { opacity: 1; transform: none; transition: none; }
.hx-block, .hx-block.is-in, #rcStage.hx-block { opacity: 1; transform: none; transition: none; }
.hx-rule { transform: scaleX(1); transition: width .5s cubic-bezier(.16,1,.3,1), gap .5s cubic-bezier(.16,1,.3,1); }
.cs-c { opacity: 1; transition: none; }
.cs.can-rise [data-rise], .cs.can-rise [data-rise]:not(.is-in) { opacity: 1; transform: none; transition: none; }
.cs-word, .cs.is-armed .cs-outro:not(.is-in) .cs-word { opacity: 1; transform: translateX(-50%); transition: none; }
.site-word, .site-outro.is-armed:not(.is-in) .site-word { opacity: 1; transform: translateX(-50%); transition: none; }
.cs.is-armed .cs-role :is(.cs-role-t, .cs-role-m, .cs-role-r p) { opacity: 1; }
.cs .cs-fw { animation: none !important; opacity: 1; }
.rp-shelf.is-armed .rp-item, .rp-shelf.is-armed .rp-item:not(.is-in), .rp-shelf.is-armed .rp-item:not(.is-in) .rp-cover { opacity: 1; transform: none; transition: none; }
.nn.is-armed .nn-entry :is(.nn-rule, .nn-day, .nw-in, .nn-my, .nn-kind, .nn-body, .nn-foot, .nn-photo, .nn-photo img) { opacity: 1; transform: none; clip-path: none; transition: none; }
.rw-in, .nn-lede, .nn-count, .upd-lead, .upd-demo, .upd-figure img, .upd-figure figcaption { animation: none !important; }
.sp2.is-live .sp2-sec.will-rise { opacity: 1; transform: none; transition: none; }
/* explorer: sections stand in place; the charts are drawn from the start */
.dx-js .dx-sec, .dx-js .dx-sec.is-in { opacity: 1; transform: none; animation: none; }
.dx-js .dx-viz:not(.is-in) :is(.dx-rank-bar, .dx-change-bar, .dx-cmp-bar) { transform: none; }
.dx-js .dx-viz:not(.is-in) :is(.dx-cell, .dx-dot, .dx-area, .dx-rank-val, .dx-rank-num, .dx-change-val),
.dx-js .dx-map-wrap:not(.is-in) .dx-county { opacity: 1; }
/* drawn parts and cards that used to wait for .is-in */
.ic-spark-bar i { transform: scaleY(1); transition: background-color .2s; }
.rx-feat-img { transform: none; transition: none; }
.rx-tl::after { transform: scaleX(1); transition: none; }
.rx-tl li { opacity: 1; transform: none; transition: none; }
.tc-card { opacity: 1; transform: none; transition: background-color .45s var(--ui-ease), color .45s, box-shadow .3s; }
.tp-card { opacity: 1; transform: none; transition: box-shadow .3s; }
.pg-stages li { opacity: 1; transform: none; transition: none; }
.pg-stage-bar i { transform: scaleX(1); transition: none; }
.pg-event { opacity: 1; transform: none; transition: box-shadow .3s; }
.pg-course { opacity: 1; transform: none; transition: box-shadow .3s, border-color .3s; }
@media (max-width: 760px) { .rx-tl::after { transform: scaleY(1); } }

/* ============ NAV DROPDOWN: WHITE GLASS ============
   A pane of frosted white glass: the page shows through, blurred, behind words alone (no icons),
   each link ruled off from the next by a hairline. Hover warms the row and nudges the word; the
   current page is marked in navy with a short gold tick. */
.nav-submenu { min-width: 228px; padding: .35rem 0; border: 1px solid rgba(255,255,255,.75); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.64) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.25), 0 1px 2px rgba(11,44,99,.06), 0 18px 44px -10px rgba(11,44,99,.28); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav-submenu { background: rgba(255,255,255,.97); } }
.nav-subitem { position: relative; display: block; margin: 0 .35rem; padding: .8rem 1rem; border-radius: 10px; color: #1B2333; font-size: .84rem; font-weight: 550; letter-spacing: .01em;
  transition: background-color .18s ease, color .18s ease; }
.nav-subitem > span { display: inline-block; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.nav-subitem + .nav-subitem::before { content: ''; position: absolute; top: 0; left: .65rem; right: .65rem; height: 1px; background: rgba(17,27,46,.10); }
.nav-subitem:hover, .nav-subitem:focus-visible { background: rgba(255,255,255,.85); color: #0B2C63; text-decoration: none; outline: none; }
.nav-subitem:hover > span, .nav-subitem:focus-visible > span { transform: translateX(3px); }
.nav-subitem:hover::before, .nav-subitem:hover + .nav-subitem::before,
.nav-subitem:focus-visible::before, .nav-subitem:focus-visible + .nav-subitem::before { opacity: 0; }
.nav-subitem.active { background: rgba(255,255,255,.7); color: #0B2C63; font-weight: 700; }
.nav-subitem.active::after { content: ''; position: absolute; left: .35rem; top: 50%; width: 3px; height: 14px; margin-top: -7px; border-radius: 2px; background: #FFCC00; }
.nav-subhead { margin-bottom: 0; padding-bottom: .8rem; border-bottom: 0; border-radius: 10px; color: #0B2C63; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .nav-subitem, .nav-subitem > span { transition: none; } }

/* ============ LOG IN: THE PRESIDENT BEHIND THE BRAND PANEL ============
   H.E. Joseph Nyuma Boakai, Sr. (Executive Mansion photograph, the home slider's first slide)
   fills the top of the navy text side under a light navy wash, and fades into the navy where the
   text sits, so his face stays clear of the words. On a phone the panel is a short band and the
   photo fills it. */
.lg-brand::before { content: ''; position: absolute; inset: 0 0 34% 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,44,99,.18) 0%, rgba(11,44,99,.38) 100%), url('/img/hero/slide-1.jpg') 56% 26% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%); }
.lg-cells { opacity: .55; }
.lg-brand-in { text-shadow: 0 1px 12px rgba(4,16,40,.45); }
@media (max-width: 900px) {
  .lg-brand { min-height: 230px; align-items: flex-end; }
  .lg-brand::before { inset: 0; background: linear-gradient(180deg, rgba(11,44,99,.15) 0%, rgba(11,44,99,.4) 45%, rgba(7,28,68,.92) 100%), url('/img/hero/slide-1.jpg') 60% 22% / cover no-repeat;
    -webkit-mask-image: none; mask-image: none; }
}

/* ============ LOG IN: THE FORM ============
   Centred, without a label above it or the demonstration accounts. "Welcome back" and the field
   labels are in the label face (Righteous standing in for Marvin Visions); the button is the same
   navy pearl as Get Started, full width. The navy panel runs straight into the footer: no white
   gap between them. */
.lg-card { text-align: center; }
.lg-card h1 { margin: 0 0 .45rem; font-family: var(--font-label); font-weight: 400; font-size: 2.3rem; letter-spacing: .02em; }
.lg-sub, .lg-alt, .lg-err { text-align: center; }
.lg-alert { justify-content: center; text-align: left; }
.lg-field label { font-family: var(--font-label); font-weight: 400; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #2B2F36; }
.lg-field input { text-align: left; }
.lg-submit.pearl { display: block; width: 100%; height: auto; margin-top: .6rem; padding: 0; overflow: visible; color: #fff; }
.lg-submit.pearl::after { display: none; }
.lg-submit.pearl .pearl-wrap { padding: 1.05rem 1.4rem; font-size: .8rem; letter-spacing: .14em; }
.lg-submit.pearl .pearl-p { justify-content: center; gap: .6rem; }
.lg-submit.pearl:disabled { cursor: progress; }
.lg-submit.pearl .lg-spin { width: 14px; height: 14px; }
body:has(.lg-brand) .footer-dh { margin-top: 0; }

/* ============ PROGRAMS: EVENTS AS TICKETS ============
   Each event is a printed ticket: a main part with a photograph, the kind, the title, and the date,
   venue and time; and a stub along a perforation, with "admit one", the day, the ticket number and
   a real Code 39 barcode of it. Half-round notches are cut where the stub tears off. Three styles
   take turns (after the owner's references): paper with a navy stub, the blue-to-green pass, and the
   navy pass with a red stub. On hover the ticket lifts and the stub starts to tear away. */
.pg-tickets .tk, .pg-tickets .tk :is(h3, p, dd) { text-align: left; hyphens: manual; }
.pg-tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.tk { --r: 13px; --rad: 18px;
  position: relative; display: flex; min-height: 262px; color: #0E1420;
  filter: drop-shadow(0 16px 20px rgba(7,26,62,.16)) drop-shadow(0 2px 3px rgba(7,26,62,.12)); transition: transform .45s var(--ui-ease); }
.tk-main, .tk-stub { position: relative; isolation: isolate; overflow: hidden; }
.tk-main { flex: 1 1 auto; min-width: 0; display: flex; border-radius: var(--rad) 0 0 var(--rad);
  -webkit-mask: radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) bottom / 100% 51% no-repeat; }
.tk-stub { flex: 0 0 160px; display: grid; grid-template-columns: minmax(0, 1fr) 36px; grid-template-rows: auto 1fr auto auto; column-gap: .75rem;
  padding: 1.15rem .95rem 1.1rem 1.2rem; border-radius: 0 var(--rad) var(--rad) 0; transform-origin: 0 100%; transition: transform .55s var(--ui-ease);
  -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--r), #000 calc(var(--r) + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, #0000 var(--r), #000 calc(var(--r) + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) bottom / 100% 51% no-repeat; }
/* the perforation: a column of punched dots down the stub's edge */
.tk-stub::before { content: ''; position: absolute; left: 0; top: calc(var(--r) + 7px); bottom: calc(var(--r) + 7px); width: 3px; z-index: 1;
  background: radial-gradient(circle, var(--perf) 1.3px, transparent 1.7px) center top / 3px 9px repeat-y; }
/* a fine grain over the card stock */
.tk-main::after, .tk-stub::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--grain, .2); mix-blend-mode: overlay;
  background-image: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tk-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background-size: cover; background-position: center 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 52%); mask-image: linear-gradient(90deg, transparent 0%, #000 52%); }
.tk-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .5rem; width: 64%; padding: 1.2rem 1.1rem 1.15rem 1.35rem; }
.tk-top { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin: 0; }
.tk-org { font-family: var(--font-label); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.tk-kind { padding: .22rem .6rem .2rem; border: 1.5px solid currentColor; border-radius: 999px; font-family: var(--font-label); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.tk-title { margin: .15rem 0 0; font: 800 clamp(1.15rem, .95rem + .55vw, 1.45rem)/1 var(--sans); letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; color: inherit; }
.tk-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: .78rem; line-height: 1.45; text-align: left; hyphens: manual; opacity: .78; }
.tk-info { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: auto 0 0; padding-top: .7rem; border-top: 1px dashed var(--rule); }
.tk-info div { display: grid; gap: .15rem; }
.tk-info dt { font-family: var(--font-label); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; opacity: .65; }
.tk-info dd { margin: 0; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.tk-admit { grid-column: 1; font-family: var(--font-label); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.tk-day { grid-column: 1; align-self: end; font: 400 3.1rem/1 var(--num); letter-spacing: .02em; }
.tk-mon { grid-column: 1; margin-top: .35rem; font-family: var(--font-label); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.tk-no { grid-column: 1; margin-top: .7rem; font: 600 .66rem var(--sans); letter-spacing: .08em; opacity: .75; }
.tk-code { grid-column: 2; grid-row: 1 / -1; display: grid; padding: 6px 5px; border-radius: 4px; background: #fff; }
.tk-bars { display: block; width: 100%; height: 100%; fill: #0E1420; }
.tk-bars.is-across { display: none; }
/* the three styles */
.tk.is-paper .tk-main { --rule: rgba(11,44,99,.28); background: #FBFBF9; color: #0E1420; }
.tk.is-paper .tk-main::after { mix-blend-mode: multiply; opacity: .1; }
.tk.is-paper .tk-title, .tk.is-paper .tk-kind { color: #0B2C63; }
.tk.is-paper .tk-stub { --perf: rgba(255,255,255,.55); background: #0B2C63; color: #fff; }
.tk.is-vip .tk-main { --rule: rgba(255,255,255,.35); background: linear-gradient(118deg, #0B2C63 0%, #1747A6 46%, #13A27E 100%); color: #fff; }
.tk.is-vip .tk-photo { mix-blend-mode: luminosity; opacity: .55; }
.tk.is-vip .tk-kind { background: #fff; border-color: #fff; color: #0B2C63; }
.tk.is-vip .tk-stub { --perf: rgba(7,42,58,.45); background: linear-gradient(165deg, #17B88B 0%, #7FE3BF 100%); color: #072A3A; }
.tk.is-pass .tk-main { --rule: rgba(255,255,255,.3); color: #fff;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px), radial-gradient(120% 90% at 0% 0%, #163E86 0%, #0B2C63 45%, #071A3E 100%); }
.tk.is-pass .tk-photo { opacity: .75; }
.tk.is-pass .tk-kind { color: #FFCC00; }
.tk.is-pass .tk-stub { --perf: rgba(255,255,255,.55); background: linear-gradient(165deg, #D7193A 0%, #A30B24 100%); color: #fff; }
/* lift, and the stub starts to tear */
.tk:hover, .tk:focus-within { transform: translateY(-4px); }
.tk:hover .tk-stub, .tk:focus-within .tk-stub { transform: rotate(2.6deg) translate(3px, -2px); }
@media (max-width: 1180px) { .pg-tickets { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .tk { flex-direction: column; min-height: 0; }
  .tk-main { flex-direction: column; border-radius: var(--rad) var(--rad) 0 0;
    -webkit-mask: radial-gradient(circle at 0 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) right / 51% 100% no-repeat; }
  .tk-photo { position: relative; width: auto; height: 150px; flex: none; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
  .tk-content { width: auto; margin-top: -2.4rem; padding: 0 1.15rem 1.1rem; }
  .tk-stub { flex: none; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 1rem; padding: 1rem 1.15rem 1.05rem; border-radius: 0 0 var(--rad) var(--rad); transform-origin: 0 0;
    -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--r), #000 calc(var(--r) + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + .5px)) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 0, #0000 var(--r), #000 calc(var(--r) + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + .5px)) right / 51% 100% no-repeat; }
  .tk-stub::before { left: calc(var(--r) + 7px); right: calc(var(--r) + 7px); top: 0; bottom: auto; width: auto; height: 3px; background: radial-gradient(circle, var(--perf) 1.3px, transparent 1.7px) left center / 9px 3px repeat-x; }
  .tk-admit { grid-column: 1; grid-row: 1; }
  .tk-day { grid-column: 1; grid-row: 2; font-size: 2.6rem; }
  .tk-mon { grid-column: 1; grid-row: 3; }
  .tk-no { grid-column: 2; grid-row: 3; margin-top: .35rem; text-align: right; }
  .tk-code { grid-column: 2; grid-row: 1 / 3; height: 64px; align-self: center; }
  .tk-bars.is-down { display: none; }
  .tk-bars.is-across { display: block; }
  .tk:hover .tk-stub, .tk:focus-within .tk-stub { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tk, .tk-stub { transition: none; } .tk:hover, .tk:hover .tk-stub, .tk:focus-within, .tk:focus-within .tk-stub { transform: none; } }


/* ============ NAV ICONS: GLASS ORBS WITH WATER INSIDE ============
   Every section's icon sits in a glossy blue orb (after the owner's reference): a deep blue sphere,
   brighter at its foot, a thin bright rim, a glassy highlight over the top half, the icon in white,
   and a soft shadow under it. The orb itself never moves or changes shape: on hover water fills it,
   rolling in two waves, and the icon pops up and bobs on it. The current page's orb holds its water
   at rest. */
.dock-ic { position: relative; transform: none; isolation: isolate; overflow: hidden; width: 36px; height: 36px; border: 0; color: #fff;
  background: radial-gradient(120% 95% at 50% 108%, #3D9BFF 0%, #1167E3 32%, #0A47B8 58%, #072F86 82%, #051F5C 100%);
  box-shadow: inset 0 0 0 1px rgba(110,175,255,.75), inset 0 -3px 6px rgba(120,190,255,.35), 0 0 0 1px #0A3A94, 0 5px 7px -3px rgba(5,31,92,.55), 0 9px 10px -8px rgba(5,31,92,.5);
  transition: box-shadow .25s ease; }
.dock-ic::before { content: ''; position: absolute; z-index: 2; left: 11%; right: 11%; top: 4%; height: 50%; pointer-events: none;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.42) 45%, rgba(255,255,255,.08) 100%); }
.dock-ic .icn { position: relative; z-index: 1; width: 17px; height: 17px; color: #fff; stroke-width: 2; filter: drop-shadow(0 1px 1px rgba(3,20,60,.45)); }
.dock-water { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 50%; pointer-events: none; }
.dock-water::before, .dock-water::after { content: ''; position: absolute; left: 50%; top: 108%; width: 230%; height: 230%; margin-left: -115%;
  transition: top .8s cubic-bezier(.2,.8,.2,1); animation: dockWave 3.6s linear infinite paused; }
.dock-water::before { border-radius: 43%; background: rgba(150,210,255,.38); }
.dock-water::after { border-radius: 39%; background: linear-gradient(180deg, rgba(64,160,255,.75), rgba(14,92,220,.85)); animation-duration: 5.4s; animation-direction: reverse; }
@keyframes dockWave { to { transform: rotate(360deg); } }
@keyframes dockIconPop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-3px) scale(1.18) rotate(-8deg); } 70% { transform: translateY(1px) scale(.96) rotate(4deg); } 100% { transform: translateY(-1px) scale(1.06) rotate(0); } }
@keyframes dockIconBob { 0%, 100% { transform: translateY(-1px) scale(1.06) rotate(0); } 50% { transform: translateY(1.5px) scale(1.06) rotate(-3deg); } }
.dock .nav-link:hover .dock-ic, .dock .nav-link:focus-visible .dock-ic {
  box-shadow: inset 0 0 0 1px rgba(150,205,255,.9), inset 0 -3px 8px rgba(150,210,255,.5), 0 0 0 1px #0A3A94, 0 5px 7px -3px rgba(5,31,92,.55), 0 0 14px rgba(40,140,255,.45); }
.dock .nav-link:hover .dock-ic .icn, .dock .nav-link:focus-visible .dock-ic .icn { animation: dockIconPop .55s cubic-bezier(.3,.7,.3,1) both, dockIconBob 2.2s ease-in-out .55s infinite; }
.dock .nav-link:hover .dock-water::before, .dock .nav-link:focus-visible .dock-water::before { top: 46%; animation-play-state: running; }
.dock .nav-link:hover .dock-water::after, .dock .nav-link:focus-visible .dock-water::after { top: 52%; animation-play-state: running; }
.dock .nav-link:hover .dock-ic, .dock .nav-link.active .dock-ic { color: #fff; border-color: transparent; }
.dock .nav-link:active .dock-ic { filter: brightness(.94); }
/* the current page: the orb holds water, gently moving (no ring) */
.dock .nav-link.active .dock-ic { background: radial-gradient(120% 95% at 50% 108%, #3D9BFF 0%, #1167E3 32%, #0A47B8 58%, #072F86 82%, #051F5C 100%);
  box-shadow: inset 0 0 0 1px rgba(110,175,255,.75), inset 0 -3px 6px rgba(120,190,255,.35), 0 0 0 1px #0A3A94, 0 5px 7px -3px rgba(5,31,92,.55), 0 9px 10px -8px rgba(5,31,92,.5); }
.dock .nav-link.active .dock-water::before { top: 58%; animation-play-state: running; animation-duration: 6s; }
.dock .nav-link.active .dock-water::after { top: 63%; animation-play-state: running; animation-duration: 8s; }
@media (prefers-reduced-motion: reduce) {
  .dock .nav-link:hover .dock-ic .icn, .dock .nav-link:focus-visible .dock-ic .icn { animation: none; }
  .dock-water::before, .dock-water::after { animation: none; transition: none; }
}

/* ============ SMALL CAPITAL LABELS IN THE LABEL FACE ============
   Every small all-caps label across the site (eyebrows such as "Discovered across Liberia",
   kickers, stat and field labels, tags, table heads, form labels, the profile's labels and the
   footer's headings) is set in the label face: Marvin Visions when its files are in public/fonts,
   Righteous standing in until then. The nav names, the buttons and the big display titles keep
   their own faces. */
.tag, .selector-field label, .xdd-item .grp, .xdd-group-label, .vq-head, .stat-label-dh, .map-size-row label, .compare-stat-card .lbl,
.data-table th, .dash-hero-stats .lbl, .footer-dh h4, .kicker, .kpi-label, .sb-brand-text span, .sb-section-label, .role-chip,
.fbar-facet-label, .hd-chip, .hv-cue, .cs-tag, .cs-role-m, .cs-faq-more, .cs-back, .cs-ap-meta dt, .cs-ap-role h2, .cs-label, .cs-drop-clear,
.ab-stat-l, .imglib-state, .tree-title, .dx-fact i, .dx-stat-lbl, .dx-readout-lbl,
.dx-size label, .dx-mock, .pt-stat-lbl, .pt-logo-note, .pt-cat, .pt-status, .pt-contrib span, .pt-focal-label, .vhero-kicker, .bk-kicker,
.bk-hint, .m-eyebrow, .m-hero-fig figcaption, .m-quote figcaption, .m-zig-meta, .m-tag, .m-logo span, .m-contact h4, .m-flow-chip,
.m-pol-meta, .m-polbox-meta, .lsc-nat i, .lsc-natnote i, .lsc-an-pair label, .ui-eyebrow, .ui-k, .ui-stats dt, .ic-rail-h, .ic-flag,
.ic-sheet-cat, .ic-facts dt, .ic-method li span, .qb-table th, .rx-tag, .tc-eyebrow b, .tc-name, .tc-bio-head b, .tp-eyebrow, .tp-field,
.pm-kind, .pm-sec h3, .tc-badge, .pg-date span, .pg-facts dt { font-family: var(--font-label); font-weight: 400; }

/* the profile hides an empty section (a patron with no education on record) and the social links of a real person */
.pm-sec[hidden], .pm-social[hidden] { display: none; }

/* each orb sits centred over its section's name: the menu arrow after a name hangs just past it
   instead of widening the label, and the item keeps the arrow's room on its right */
.dock .nav-label { position: relative; }
.dock .nav-caret { position: absolute; left: calc(100% + .22rem); top: 50%; transform: translateY(-50%); }
.dock-item.nav-has-sub { margin-right: .7rem; }

/* ============ RESEARCH: SQUARE BUTTONS, "SUBMIT PAPERS" CIRCLED IN RED MARKER ============
   The two calls to action have square corners. The headline's "Submit Papers" is ringed by hand
   in red marker: one loop that overshoots where it closes, with a fainter second pass for the
   marker's texture (the stroke keeps its weight however the ring stretches). */
.rp-btn { border-radius: 0; }
.rp-mark { position: relative; display: inline-block; }
.rp-mark-ring { position: absolute; left: -6%; top: -24%; width: 112%; height: 152%; overflow: visible; pointer-events: none; }
.rp-mark-ring path { fill: none; stroke: #D7192F; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .92; }
.rp-mark-ring .rp-mark-2 { stroke-width: 1.6; opacity: .45; }
@media (max-width: 640px) { .rp-mark-ring { left: -5%; width: 113%; } .rp-mark-ring path { stroke-width: 3.2; } .rp-mark-ring .rp-mark-2 { stroke-width: 1.2; } }

/* Programs: "Upcoming Events" centred on two lines, the title in the label face (bold), the line
   under it in the regular face */
.pg-head.is-center { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .45rem; text-align: center; }
.pg-head.is-center h2 { margin: 0; font-family: var(--font-label); font-weight: 700; letter-spacing: .01em; }
.pg-head.is-center > p { margin: 0; font-family: var(--sans); font-weight: 400; text-align: center; hyphens: manual; }

/* ============ SUBMIT A PAPER, IN THE LOG IN STYLE ============
   The same two halves as Log In: a navy panel on the left (the Coat of Arms of Liberia, large, the seal, one line and the step tracker, which stays in view as the form scrolls)
   and the form centred on white on the right: the title in the label face, labels in capitals in
   the label face, one column, and the navy pearl button. The panel runs into the footer. */
.sp2-wrap.sp-page { max-width: none; padding: 0; }
.sp-brand { align-items: flex-start; padding-top: clamp(14rem, 34vh, 21rem); }
.sp-brand::before { inset: 0 0 auto 0; height: min(640px, 74vh);
  background: url('/img/brand/niip-seal-512.png') center top 2.6rem / auto min(330px, 36vh) no-repeat; filter: drop-shadow(0 18px 30px rgba(3,12,32,.45)); }
.sp-brand .lg-cells { bottom: auto; height: min(900px, 100%); }
.sp-brand-in { position: sticky; top: calc(var(--nav-h, 76px) + 1.6rem); }
.sp-rail { position: static; padding: 0; border: 0; border-radius: 0; background: none; text-shadow: none; }
.sp-rail li { color: rgba(255,255,255,.72); }
.sp-rail li.is-here { background: rgba(255,255,255,.1); color: #fff; }
.sp-rail .sp2-dot { border-color: rgba(255,255,255,.5); background: transparent; color: #fff; }
.sp-rail li.is-done .sp2-dot { background: #fff; border-color: #fff; color: #0B2C63; }
.sp-rail .sp2-meter { background: rgba(255,255,255,.18); }
.sp-rail .sp2-meter i { background: #fff; }
.sp-rail .sp2-left { color: #B9C9E6; }
.sp-side { place-items: start center; padding: 3.4rem 1.6rem 4rem; }
.lg-card.sp-card { width: min(560px, 100%); }
.sp-lg .sp2 { display: block; }
.sp-lg .sp2-alert { text-align: left; }
.sp-lg .sp2-sheet { background: none; border: 0; border-radius: 0; box-shadow: none; }
.sp-lg .sp2-sec { padding: 1.6rem 0; }
.sp-lg .sp2-sec + .sp2-sec { border-top: 1px solid var(--line); }
.sp-lg .sp2-head { flex-direction: column; align-items: center; gap: .55rem; margin-bottom: 1.2rem; text-align: center; }
.sp-lg .sp2-head h2 { font-family: var(--font-label); font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; color: #0B2C63; }
.sp-lg .sp2-head p { text-align: center; }
.sp-lg .sp2-grid { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
.sp-lg .sp2-field > label, .sp-lg .sp2-chips legend { width: 100%; font-family: var(--font-label); font-weight: 400; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #2B2F36; text-align: center; }
.sp-lg .sp2-under { justify-content: center; gap: .8rem; text-align: center; }
.sp-lg .sp2-help, .sp-lg .sp2-err { text-align: center; }
.sp-lg .sp2-chiprow { justify-content: center; }
.sp-lg .sp2-check, .sp-lg .sp2-note { text-align: left; }
.sp-lg .sp2-actions { flex-direction: column; align-items: stretch; gap: .9rem; padding: .4rem 0 0; }
.sp-lg .sp2-cancel { align-self: center; }
.sp2-send.pearl { display: block; width: 100%; min-height: 0; margin-top: .2rem; color: #fff; }
.sp2-send.pearl .pearl-wrap { padding: 1.05rem 1.4rem; font-size: .8rem; letter-spacing: .14em; }
.sp2-send.pearl .pearl-p { justify-content: center; gap: .6rem; }
.sp2-send.pearl .sp2-spin { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .sp-brand { min-height: 230px; padding-top: 1.4rem; align-items: flex-end; }
  .sp-brand::before { inset: 0; height: auto; background: url('/img/brand/niip-seal-512.png') right 7% center / auto 74% no-repeat; }
  .sp-brand-in { position: static; }
  .sp-side { padding: 2rem 1.2rem 6rem; }
}

/* ============ RESEARCH: THE PROMO SECTION ============
   The two buttons are lettered in the label face. The section alone wears the carved masks of the
   About page in faint grey on white (in place of the binary canvas). The search and the year
   filter sit further down, after the flagship paper, across the shelf. */
.rp-btn { font-family: var(--font-label); font-weight: 400; letter-spacing: .05em; }
section.rp { position: relative; isolation: isolate; overflow: hidden; background: #fff; }
/* the masks in light grey: the line work itself (black on clear, mask-lines.webp), let through at a
   low opacity so the faces read without competing with the headline */
section.rp::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/img/brand/mask-lines.webp") 0 0 / 185px auto repeat; opacity: .14; }
.rp-shelf .rp-search-row { grid-column: 1 / -1; scroll-margin-top: calc(var(--nav-h, 76px) + 1.2rem); }
.rp-shelf .rp-search-row .fbar { margin: 0; }
/* the consent line stays a sentence beside its checkbox (it is a label too, so it opts out) */
.sp-lg .sp2-field > label.sp2-check { display: flex; width: auto; font: 400 .95rem/1.55 var(--sans); letter-spacing: 0; text-transform: none; text-align: left; color: #17233A; }

/* ============ REQUEST ACCESS, IN THE LOG IN STYLE ============
   Log In's fields carry the select and the note box too; the done state is a short line and the
   pearl button home. */
.rg-form { display: grid; gap: 1rem; }
.lg-field select, .lg-field textarea { width: 100%; margin: 0; padding: .7rem .95rem; background: #fff; border: 1px solid var(--line); border-radius: var(--ui-r-in);
  font: 400 .95rem/1.45 var(--sans); color: #0E1A33; text-align: left; transition: border-color .2s, box-shadow .2s; }
.lg-field select { height: 48px; padding-right: 2.4rem; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 7z' fill='%23111'/%3E%3C/svg%3E") no-repeat right .9rem center / 11px 7px; }
.lg-field textarea { min-height: 96px; resize: vertical; }
.lg-field select:focus, .lg-field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(28,91,184,.14); }
.rg-done { display: grid; justify-items: center; gap: .6rem; margin: .4rem 0 1.4rem; color: #0B2C63; }
.rg-done .icn { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: #0B2C63; color: #fff; stroke-width: 2.6; }
.rg-done p { margin: 0; text-align: center; color: var(--muted); }
a.lg-submit.pearl { text-decoration: none; }

/* ============ SUBMIT A PAPER: THE SHORT FORM ============ */
.sp-lg .sp2-sec { padding: .4rem 0 1.2rem; }
.sp2-fine { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--muted); text-align: center; hyphens: manual; }

/* ============ PATRONS: THREE TO A ROW ============
   The three patrons (the President, the Vice President, Morocco's Chargé d'Affaires) in a plain grid, three
   across at every width, in list order; nothing to scroll, so no arrows or count */
.tc.is-patrons .tc-track { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto;
  overflow: visible; scroll-snap-type: none; cursor: default; }
.tc.is-patrons .tc-card { order: var(--o); }
.tc.is-patrons .tc-ctrl, .tc.is-patrons .tc-progress { display: none; }
.tc.is-patrons .tc-title { white-space: nowrap; }   /* "National ICT Patrons" on one line (owner, 3 Nov 2026) */
@media (max-width: 640px) {
  .tc.is-patrons .tc-title { font-size: calc((100vw - 60px) / 12.1); }   /* the line is 11.65em wide; the panel's inside is 100vw - 54px */
  .tc.is-patrons .tc-card .tc-name { font-size: .62rem; }
}
/* names and titles are never hyphenated or justified (owner, 3 Nov 2026): the team's cards sit in list items, which
   the site sets justified and hyphenated, and the profile window's lines are paragraphs */
.tw-slot { -webkit-hyphens: manual; hyphens: manual; }
#pm :is(p, li) { -webkit-hyphens: manual; hyphens: manual; text-align: left; }

/* ============ NEWS & UPDATES, IN THE BBC NEWS FORMAT ============
   After the BBC News front page the owner chose: white, near-black text, a serif close to BBC Reith
   Serif (Source Serif 4) for headlines and the summary, a plain sans for the meta line, BBC red for
   the marker. The lead runs a full-width photograph; the rest are rows under a dark rule, a 16:9
   thumbnail beside the headline, hairlines between. Numbers here stay in the text faces, as the
   reference has them. */
html:has(.bbc):not(:has(.rs)) { background-image: none; background-color: #fff; }
.bbc { --bbc-ink: #141414; --bbc-grey: #545658; --bbc-line: #E6E8EA; --bbc-red: #B80000;
  --bbc-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --bbc-sans: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  max-width: 840px; margin: 0 auto; padding: 0 0 3rem; background: #fff; color: var(--bbc-ink); }
.bbc a { color: inherit; text-decoration: none; }
/* the lead */
.bbc-lead-img { display: block; }
.bbc-lead-img > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #EEF0F2; }
.bbc-lead-in { padding: 1.4rem 15px 0; }
.bbc-lead-h { margin: 0; font: 600 2.25rem/1.15 var(--bbc-serif); letter-spacing: -.005em; color: var(--bbc-ink); text-align: left; hyphens: manual; }
.bbc-lead-h a:hover, .bbc-lead-h a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bbc-flag { display: inline-flex; align-items: center; gap: .18em; margin-right: .12em; font-family: var(--bbc-sans); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; color: var(--bbc-red); }
.bbc-flag i { position: relative; width: .74em; height: .74em; border: .1em solid var(--bbc-red); border-radius: 50%; }
.bbc-flag i::after { content: ''; position: absolute; inset: .12em; border-radius: 50%; background: var(--bbc-red); }
.bbc-lead-p { margin: .9rem 0 0; font: 400 1.125rem/1.4 var(--bbc-serif); color: var(--bbc-ink); text-align: left; hyphens: manual;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* the rows */
.bbc-list { margin: 2.6rem 15px 0; padding: 0; list-style: none; border-top: 1px solid var(--bbc-grey); }
.bbc-item { margin: 0; text-align: left; border-bottom: 1px solid var(--bbc-line); }
.bbc-row { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.4rem 0; }
.bbc-thumb > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #EEF0F2; }
.bbc-txt { display: grid; gap: 1rem; min-width: 0; }
.bbc-h { font: 600 1.5rem/1.2 var(--bbc-serif); color: var(--bbc-ink); }
.bbc-row:hover .bbc-h, .bbc-row:focus-visible .bbc-h { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bbc-row:focus-visible { outline: 2px solid var(--bbc-ink); outline-offset: 4px; }
.bbc-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: .35rem; white-space: nowrap; margin-top: .2rem; font: 400 .95rem/1.2 var(--bbc-sans); color: var(--bbc-grey); }
.bbc-lead-in .bbc-meta { margin-top: 1rem; }
.bbc-sep { width: 1px; height: 1.25em; margin: 0 .75rem; background: var(--bbc-grey); }
.bbc-empty { padding: 3rem 15px; font: 400 1.1rem var(--bbc-serif); color: var(--bbc-grey); }
@media (min-width: 841px) {
  .bbc { padding-top: 1.6rem; }
  .bbc-lead-in, .bbc-list { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
  .bbc-lead-h { font-size: 2.6rem; }
  .bbc-row { grid-template-columns: 240px minmax(0, 1fr); gap: 1.4rem; }
}
@media (max-width: 640px) {
  .bbc-lead-h { font-size: 1.75rem; line-height: 1.17; }
  .bbc-lead-p { font-size: 1.05rem; }
  .bbc-list { margin-top: 2.2rem; }
  .bbc-row { gap: .9rem; padding: 1.25rem 0; }
  .bbc-h { font-size: 1.25rem; line-height: 1.2; }
  .bbc-txt { gap: .8rem; }
  .bbc-meta { font-size: .82rem; }
  .bbc-sep { margin: 0 .5rem; }
}

/* ============ NEWS & REPORTS: ADVERTISEMENTS ============
   Six adverts, every box the same size. On wide screens three stand in each rail beside the column,
   one under another; on narrower screens they come in pairs after every four headlines, two side by
   side. Each is labelled, links to the advertiser's own site and has a close button at its top right
   (closed for the rest of the visit). They move: the artwork pans slowly across the window (so the
   whole flyer passes by), a sheen sweeps the card, a timer bar fills along its foot and the arrow
   nudges, all four out of step. Still with reduced motion. */
.bbc-page { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; }
.bbc-page > .bbc { width: 100%; }
.bbc-rail { display: none; }
.bbc-noimg { display: block; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(150deg, #0B2C63, #1C4C9E 55%, #7c0a1c); }
.bbc-lead-img .bbc-noimg { aspect-ratio: 16 / 9; }
/* the pairs between the headlines (narrower screens) */
.bbc-adrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 1.3rem 0; border-bottom: 1px solid var(--bbc-line, #E6E8EA); list-style: none; }
.bbc-adrow[hidden] { display: none; }
/* one advert */
.ad-slot { --ad-h: 372px; --ad-media: 150px; display: grid; gap: .4rem; align-content: start; min-width: 0; }
.ad-slot[hidden] { display: none; }
.ad-tag { margin: 0; font: 600 .6rem/1 'Public Sans', Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8A8D91; text-align: center; }
.ad-box { position: relative; }
.ad { --bg: #000; --ink: #fff; --acc: #FF7900; --soft: rgba(255,255,255,.72);
  position: relative; isolation: isolate; display: flex; flex-direction: column; height: var(--ad-h); overflow: hidden; border-radius: 4px; background: var(--bg); color: var(--ink);
  text-decoration: none; text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 24px -14px rgba(0,0,0,.45); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.ad:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 18px 34px -16px rgba(0,0,0,.5); text-decoration: none; }
.ad:focus-visible { outline: 3px solid #0B2C63; outline-offset: 3px; }
.ad-brand { flex: none; display: flex; align-items: center; gap: .5rem; padding: .65rem 2.4rem .55rem .75rem; font: 800 .78rem/1.1 'Public Sans', Arial, sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-brand i { flex: none; width: 13px; height: 13px; background: var(--acc); }
.ad-media { flex: none; position: relative; display: block; height: var(--ad-media); overflow: hidden; background: rgba(127,127,127,.15); }
.ad-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%;
  animation: adPan 13s ease-in-out calc(var(--d, 0) * -3.1s) infinite alternate, adZoom 13s ease-in-out calc(var(--d, 0) * -2.3s) infinite alternate; }
.ad-copy { flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: .35rem; padding: .75rem .75rem 0; overflow: hidden; }
.ad-h { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 700 .98rem/1.2 'Source Serif 4', Georgia, serif; color: var(--ink); }
.ad-p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 400 .74rem/1.42 'Public Sans', Arial, sans-serif; color: var(--soft); }
.ad-cta { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .6rem .75rem .9rem; padding: .55rem .65rem; border-radius: 3px;
  background: var(--acc); color: var(--bg); font: 700 .7rem/1 'Public Sans', Arial, sans-serif; letter-spacing: .02em; overflow: hidden; }
.ad-cta span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ad-cta .icn { flex: none; width: 14px; height: 14px; stroke-width: 2.4; animation: adNudge 2.4s ease-in-out calc(var(--d, 0) * -.6s) infinite; }
.ad-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--acc); transform-origin: left; animation: adTimer 6s linear calc(var(--d, 0) * -1.5s) infinite; }
.ad::after { content: ''; position: absolute; inset: -40% auto -40% -60%; z-index: 2; width: 45%; pointer-events: none; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: adSheen 6s ease-in-out calc(var(--d, 0) * -1.5s) infinite; }
/* the close button, top right of every box */
.ad-x { position: absolute; top: 6px; right: 6px; z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(16,20,28,.62); color: #fff; cursor: pointer; transition: background-color .2s, transform .2s; }
.ad-x .icn { width: 13px; height: 13px; stroke-width: 2.6; }
.ad-x:hover { background: #10141C; transform: scale(1.08); }
.ad-x:focus-visible { outline: 2px solid #FFCC00; outline-offset: 2px; }
/* each advertiser in its own colours */
.ad--orange { --bg: #000; --ink: #fff; --acc: #FF7900; --soft: rgba(255,255,255,.74); }
.ad--lonestar { --bg: #FFCB05; --ink: #111; --acc: #111; --soft: rgba(17,17,17,.78); }
.ad--lonestar .ad-cta { color: #FFCB05; }
.ad--arcelormittal { --bg: #fff; --ink: #1E1E1E; --acc: #F37021; --soft: #55585C; box-shadow: inset 0 0 0 1px #E3E5E8, 0 10px 24px -14px rgba(0,0,0,.35); }
.ad--arcelormittal .ad-cta { color: #fff; }
.ad--arcelormittal::after { background: linear-gradient(90deg, transparent, rgba(243,112,33,.16), transparent); }
.ad--globalpharm { --bg: #0B3E8C; --ink: #fff; --acc: #E8336D; --soft: rgba(255,255,255,.78); }
.ad--globalpharm .ad-cta { color: #fff; }
/* the NIIP boxes: an open space for an advertiser, its words slowly lit */
.ad--house { --bg: #0B2C63; --ink: #fff; --acc: #FFCC00; --soft: rgba(255,255,255,.76); }
.ad--house.is-alt { --bg: #10141C; --acc: #C8102E; }
.ad--house.is-alt .ad-cta { color: #fff; }
.ad-house { display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px), linear-gradient(120deg, #123C82, #1C5BB8 45%, #0B2C63);
  background-size: 200% 200%, 200% 200%; animation: adHouse 9s ease-in-out calc(var(--d, 0) * -2s) infinite alternate; }
.ad--house.is-alt .ad-house { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px), linear-gradient(120deg, #2A0A12, #A30B24 50%, #10141C); background-size: 200% 200%, 200% 200%; }
.ad-house b { padding: .5rem .7rem; border: 1.5px dashed rgba(255,255,255,.55); font: 400 1.15rem/1.15 var(--font-label); letter-spacing: .04em; color: #fff; text-transform: uppercase; }
@keyframes adPan { from { object-position: 0% 50%; } to { object-position: 100% 50%; } }
@keyframes adZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes adTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes adSheen { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes adNudge { 0%, 60%, 100% { transform: none; } 75% { transform: translateX(4px); } }
@keyframes adHouse { from { background-position: 0% 0%, 0% 50%; } to { background-position: 100% 100%, 100% 50%; } }
@media (min-width: 600px) { .bbc-adrow .ad-slot { --ad-h: 420px; --ad-media: 210px; } .bbc-adrow { gap: 16px; } }
/* wide screens: three to a rail beside the news column, one under another; no pairs in the list */
@media (min-width: 1260px) {
  .bbc-page { grid-template-columns: minmax(0, 1fr) 190px minmax(0, 840px) 190px minmax(0, 1fr); column-gap: 26px; padding-top: 1.6rem; }
  .bbc-page > .bbc { grid-column: 3; grid-row: 1; padding-top: 0; }
  .bbc-rail { grid-row: 1; display: flex; flex-direction: column; gap: 1.4rem; margin: 0 0 3rem; }
  .bbc-rail.is-left { grid-column: 2; }
  .bbc-rail.is-right { grid-column: 4; }
  .bbc-rail .ad-slot { --ad-h: 440px; --ad-media: 205px; }
  .bbc-adrow { display: none; }
}
@media (min-width: 1360px) { .bbc-page { grid-template-columns: minmax(0, 1fr) 215px minmax(0, 840px) 215px minmax(0, 1fr); } }
@media (max-width: 420px) { .ad-h { font-size: .9rem; } .ad-p { font-size: .7rem; } .ad-brand { font-size: .72rem; } .ad-house b { font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { .ad, .ad *, .ad::after { animation: none !important; transition: none !important; } .ad-timer { transform: scaleX(1); } }
/* a long name or address never widens a box: every advert keeps its column's width */
.ad-slot { grid-template-columns: minmax(0, 1fr); }
.ad-box, .ad { min-width: 0; width: 100%; }

/* Submit a Paper: the form reads from the left (title, labels, help lines, the fine print); the
   large NIIP seal above the panel's words stands in for the small one beside "NIIP" */
.lg-card.sp-card, .sp-card h1, .sp-card .lg-sub, .sp-lg .sp2-field > label, .sp-lg .sp2-help, .sp-lg .sp2-err, .sp2-fine { text-align: left; }
.sp-lg .sp2-under { justify-content: space-between; text-align: left; }
/* the seal, "National ICT Intelligence Program" and the line share the panel's centre */
.sp-brand { justify-content: center; }
.sp-brand-in { justify-items: center; text-align: center; }
.sp-brand .lg-seal { justify-content: center; }
.sp-brand .lg-seal span span { font-size: .95rem; letter-spacing: .02em; color: #D5E0F3; }
.sp-brand-in h2 { text-align: center; text-wrap: balance; }
@media (max-width: 900px) {
  .sp-brand { min-height: 0; padding-top: calc(min(170px, 42vw) + 2rem); align-items: center; }
  .sp-brand::before { background: url('/img/brand/niip-seal-512.png') center top 1.2rem / auto min(170px, 42vw) no-repeat; }
  .sp-brand .lg-brand-in h2 { display: block; font-size: 1.45rem; }
}

/* ============ SOURCE NOTES UNDER THE CHARTS ============
   Set as the statistical press and journals set them: small, grey, left-aligned under the figure, a
   hairline above, "Source:" and "Note:" in bold, then a quiet "Copy citation". */
.fig-src { display: grid; gap: .2rem; margin: .8rem 0 0; padding-top: .6rem; border-top: 1px solid #E3E7EC; font: 400 .74rem/1.45 'Public Sans', Arial, sans-serif; color: #5A6273; text-align: left; }
.fig-src:empty { display: none; }
.fig-src-l { margin: 0; text-align: left; hyphens: manual; }
.fig-src-l b { font-weight: 700; color: #2B3240; }
.fig-cite { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; padding: .2rem .45rem; border: 1px solid #D5DAE1; border-radius: 3px;
  background: #fff; font: 600 .7rem/1.2 'Public Sans', Arial, sans-serif; color: #2B3240; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.fig-cite .icn { width: 12px; height: 12px; }
.fig-cite:hover { border-color: #0B2C63; color: #0B2C63; }
.fig-cite.is-done { border-color: #1E6B3A; background: #E3F4E8; color: #1E6B3A; }
.fig-cite:focus-visible { outline: 2px solid #0B2C63; outline-offset: 2px; }
.dx-map-frame .fig-src { padding-left: .2rem; padding-right: .2rem; }
.lsc-an-card .fig-src { margin-top: .6rem; }

/* ============ SHARE LINKS (papers, news) ============
   A row of round buttons: WhatsApp, Facebook, X, LinkedIn, email, copy the link, and the phone's own
   share sheet. Grey at rest, each in its network's colour on hover. */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1.2rem 0; }
.share-l { margin-right: .2rem; font: 400 .74rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: #4A5160; }
.share-b { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #D5DAE1; border-radius: 50%; background: #fff; color: #2B3240; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.share-b svg { width: 16px; height: 16px; fill: currentColor; }
.share-b .icn { width: 16px; height: 16px; fill: none; }
.share-b:hover, .share-b:focus-visible { transform: translateY(-2px); color: #fff; text-decoration: none; }
.share-b:focus-visible { outline: 2px solid #0B2C63; outline-offset: 2px; }
.share-b.is-wa:hover, .share-b.is-wa:focus-visible { background: #25D366; border-color: #25D366; }
.share-b.is-fb:hover, .share-b.is-fb:focus-visible { background: #1877F2; border-color: #1877F2; }
.share-b.is-x:hover, .share-b.is-x:focus-visible { background: #000; border-color: #000; }
.share-b.is-in:hover, .share-b.is-in:focus-visible { background: #0A66C2; border-color: #0A66C2; }
.share-b.is-mail:hover, .share-b.is-mail:focus-visible, .share-b.is-copy:hover, .share-b.is-copy:focus-visible, .share-b.is-native:hover, .share-b.is-native:focus-visible { background: #0B2C63; border-color: #0B2C63; }
.share-b.is-done { background: #1E6B3A; border-color: #1E6B3A; color: #fff; }
.share-b[hidden] { display: none; }
.share-done { font: 600 .74rem/1 'Public Sans', Arial, sans-serif; color: #1E6B3A; }
.paper-detail-head .share { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .share-b, .fig-cite { transition: none; } .share-b:hover { transform: none; } }

/* share buttons in their own colours at rest (white marks), a shade deeper on hover; email, copy
   and the phone's share sheet in the site navy */
.share-b { border: 0; color: #fff; box-shadow: 0 1px 2px rgba(16,20,28,.14); }
.share-b.is-wa { background: #25D366; }
.share-b.is-fb { background: #1877F2; }
.share-b.is-x { background: #000; }
.share-b.is-in { background: #0A66C2; }
.share-b.is-mail, .share-b.is-copy, .share-b.is-native { background: #0B2C63; }
.share-b.is-wa:hover, .share-b.is-wa:focus-visible { background: #1EBE5A; }
.share-b.is-fb:hover, .share-b.is-fb:focus-visible { background: #0F65D8; }
.share-b.is-x:hover, .share-b.is-x:focus-visible { background: #2B2B2B; }
.share-b.is-in:hover, .share-b.is-in:focus-visible { background: #08549F; }
.share-b.is-mail:hover, .share-b.is-mail:focus-visible, .share-b.is-copy:hover, .share-b.is-copy:focus-visible, .share-b.is-native:hover, .share-b.is-native:focus-visible { background: #123B80; }
.share-b:hover, .share-b:focus-visible { box-shadow: 0 6px 12px -4px rgba(16,20,28,.35); }
.share-b.is-done { background: #1E6B3A; }

/* ============ RESEARCH: THE PAPER LIBRARY ============
   The Explorer's filter bar (labels in the label face, flat white fields with a grey edge and a
   black caret), held under the nav while the library is in view; then the news-page format, a
   paper's cover standing in for the photograph. */
.rs { position: relative; padding-bottom: 1rem; background: #fff; }
.rs-cmd.dx-cmd { position: sticky; top: var(--nav-h, 76px); z-index: 30;
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* solid: a blur here re-renders the animated page under it every frame */
/* the bar is as wide as the library under it (the news column, and on wide screens its two advert
   rails), so it stops short of the screen's edges and leaves a margin either side; ruled on all four
   sides, its edges line up with the edges of the adverts and the fields sit inside them */
.rs-cmd-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr) minmax(170px, 1fr) auto; align-items: end; gap: .85rem 1.1rem;
  width: calc(100% - 30px); max-width: 840px; margin: 0 auto; padding: .85rem 1.1rem; border: 1px solid #000; }
@media (min-width: 1260px) { .rs-cmd-in { width: calc(100% - 52px); max-width: calc(840px + 2 * (190px + 26px)); } }   /* the rails keep a 26px gap from the edge */
@media (min-width: 1360px) { .rs-cmd-in { max-width: calc(840px + 2 * (215px + 26px)); } }
/* the list never folds up under the bar while a filter narrows it, so the page holds still */
#rsLib { min-height: calc(100vh - var(--nav-h, 76px)); }
.rs-cmd .selector-field { margin: 0; min-width: 0; }
.rs-cmd .selector-field label { display: block; margin: 0 0 .4rem; font-family: var(--font-label); font-weight: 400; font-size: .75rem; letter-spacing: .17em; text-transform: uppercase; color: #5A6A85; }
.rs-q-box { position: relative; }
.rs-q-box .icn { position: absolute; left: .7rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #5A6273; pointer-events: none; }
.rs-q-box input { width: 100%; height: 38px; margin: 0; padding: 0 .8rem 0 2.2rem; border: 1px solid #BFC4CC; border-radius: 2px; background: #fff;
  font: 500 .92rem var(--sans); color: #1E2430; box-shadow: none; }
.rs-q-box input:hover { border-color: #7F8794; }
.rs-q-box input:focus { outline: none; border-color: #1E2430; box-shadow: 0 0 0 3px rgba(255,204,0,.5); }
.rs-count { min-width: 8.4em; margin: 0 0 .55rem; font: 500 .82rem/1 var(--sans); color: #5A6273; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }   /* a fixed width, so "1 of 11" and "11 of 11" never shift the fields */
.rs-count b { font-family: var(--num); font-weight: 400; color: #0B2C63; }
.rs .bbc-page { padding-top: 1.6rem; }
.rs-empty { display: grid; justify-items: center; gap: .8rem; max-width: 840px; margin: 0 auto 2.4rem; padding: 2.4rem 15px; text-align: center; color: #545658; }
.rs-empty[hidden] { display: none; }
.rs-empty p { margin: 0; font: 400 1.1rem 'Source Serif 4', Georgia, serif; text-align: center; }
.bbc-adrow.is-filtered { display: none; }
/* a paper's cover where the news has a photograph */
.bbc-cover { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(160deg, #EEF2F8 0%, #E1E8F2 100%); overflow: hidden; }
.bbc-cover .pc { height: 86%; transition: transform .6s cubic-bezier(.16,1,.3,1); transform-origin: 0 50%; }
.bbc-row:hover .bbc-cover .pc, .bbc-lead:hover .bbc-cover .pc { transform: rotateY(-12deg) translateY(-4px); }
.bbc-cover { perspective: 900px; }
@media (max-width: 900px) {
  .rs-cmd-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: .75rem 12px; }
  .rs-q { grid-column: 1 / -1; }
  .rs-count { grid-column: 1 / -1; margin: 0; text-align: left; }
  .rs-cmd.dx-cmd { position: static; }
}
@media (prefers-reduced-motion: reduce) { .bbc-cover .pc { transition: none; } .bbc-row:hover .bbc-cover .pc, .bbc-lead:hover .bbc-cover .pc { transform: none; } }

/* ============ CHART TOOLTIPS: A ROUND PANE OF GLASS ============
   The hover reading on every chart (Data Explorer and Data Landscape) is a circle of frosted white
   glass like the nav dropdown, with a gloss across its top; its words in the label face (digits in
   the site's digit face), centred. It floats above the pointer. */
.dx-tip, .lsc-tip { width: 172px; height: 172px; max-width: none; padding: 1.5rem 1.1rem; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255,255,255,.85); border-left: 1px solid rgba(255,255,255,.85);
  background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.78) 48%, rgba(222,232,248,.74) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -10px 22px rgba(11,44,99,.06), 0 1px 2px rgba(11,44,99,.08), 0 18px 40px -12px rgba(11,44,99,.38);
  color: #10172A; font-family: var(--font-label); text-align: center; white-space: normal; }
.dx-tip { transform: translate(-50%, -108%); align-content: center; }
.dx-tip[style*="block"] { display: grid !important; }
.lsc-tip:not([hidden]) { display: grid; align-content: center; justify-items: center; }
.dx-tip::before, .lsc-tip::before { content: ''; position: absolute; left: 16%; right: 16%; top: 5%; height: 34%; border-radius: 50%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); }
.dx-tip > *, .lsc-tip > * { position: relative; }
.dx-tip strong, .lsc-tip b { display: block; margin: 0 0 .25rem; font: 400 1.02rem/1.15 var(--font-label); letter-spacing: .03em; color: #0B2C63; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; }
.dx-tip .dx-tip-rank { display: block; font: 400 .66rem/1.3 var(--font-label); letter-spacing: .08em; color: #5A6273; text-transform: uppercase; }
.dx-tip .dx-tip-val { display: block; margin-top: .2rem; font: 400 1.4rem/1.1 var(--font-label); color: #0B2C63; }
.dx-tip .dx-tip-val i { font-size: .62rem; letter-spacing: .06em; color: #5A6273; text-transform: uppercase; }
.dx-tip .dx-tip-yoy { display: block; margin-top: .2rem; font: 400 .7rem/1.2 var(--font-label); }
.dx-tip .dx-tip-yoy.up { color: #1E7A45; }
.dx-tip .dx-tip-yoy.down { color: #C8102E; }
.dx-tip .dx-tip-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .35rem; margin-top: .25rem;
  font: 400 .64rem/1.2 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: #2B3240; text-align: left; }
.dx-tip .dx-tip-line i { width: 8px; height: 8px; border-radius: 50%; }
.dx-tip .dx-tip-line b { margin: 0; padding: 0; font: 400 .86rem/1 var(--font-label); color: #0B2C63; }
.lsc-tip span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; width: 100%; font: 400 .62rem/1.5 var(--font-label); letter-spacing: .05em; text-transform: uppercase; text-align: left; }
.lsc-tip i { color: #5A6273; }
.lsc-tip em { font: 400 .8rem/1.3 var(--font-label); color: #0B2C63; }

/* the nav dropdown in capitals */
.nav-subitem { text-transform: uppercase; letter-spacing: .07em; font-size: .76rem; }
.dx-tip .dx-tip-val i { display: block; margin-top: .2rem; line-height: 1.25; }

/* ---- Our Team: the members ride a bicycle tyre (app.js turns it). Every size is a share of the
   stage's width (cqw), so the wheel keeps its shape from a phone to a wide screen. The geometry:
   card width, the cards' arc radius, the lift of the card at the top, the angle between cards,
   the hub's height, the tyre's radius and the stage's height, all as fractions of the width. */
.tc + .tw { margin-top: 1.4rem; }
.tw-panel { position: relative; overflow: hidden; border-radius: var(--ui-r);
  background: radial-gradient(130% 95% at 50% 16%, #FCFCFD 0%, #F2F3F5 46%, #E2E5E9 100%); }
/* the team's heading (owner, 3 Nov 2026): "Program Management Team" on one line, in the patrons' heading style, set
   in the panel's top left with the patrons' padding. The line is 15.6em wide and its box is 100vw - 87px inside on a
   phone, so on a narrow screen the size steps down to fit; wide screens keep the patrons' clamp */
.tw-head { padding: clamp(1.3rem, 3vw, 2.6rem) clamp(1.3rem, 3vw, 2.6rem) 0; }
.tw-title { white-space: nowrap; font-size: min(clamp(2.2rem, 1.4rem + 3.2vw, 4rem), calc((100vw - 95px) / 16.3)); }
.tw-stage { --tw-cw: .18; --tw-rc: .472; --tw-lift: .038; --tw-step: 27; --tw-cy: .655; --tw-rt: .345; --tw-h: .57;
  container-type: inline-size; position: relative; overflow: hidden; aspect-ratio: 1 / var(--tw-h);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.tw-stage.is-drag { cursor: grabbing; }
.tw-hub { position: absolute; left: 50%; top: calc(var(--tw-cy) * 100cqw); width: 0; height: 0; }
.tw-tyre { position: absolute; left: 0; top: 0; width: calc(var(--tw-rt) * 212cqw); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.tw-tyre svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tw-spin { will-change: transform; }
.tw-cards { margin: 0; padding: 0; list-style: none; }
.tw-card { --s: 0; --k: 1; --up: 0; position: absolute; left: 0; top: 0; display: flex; flex-direction: column;
  width: calc(var(--tw-cw) * 100cqw); padding: 0; border: 0; border-radius: calc(var(--tw-cw) * 5.6cqw); overflow: hidden;
  background: #fff; color: #0E1116; font: inherit; text-align: center; cursor: inherit; outline: none;
  transform: translate(-50%, -50%) rotate(calc(var(--s) * var(--tw-step) * 1deg)) translateY(calc((var(--tw-rc) + var(--up)) * -100cqw)) scale(var(--k));
  box-shadow: 0 calc(var(--tw-cw) * 6cqw) calc(var(--tw-cw) * 13cqw) calc(var(--tw-cw) * -3cqw) rgba(22, 30, 44, .28), 0 1px 3px rgba(22, 30, 44, .1);
  will-change: transform, opacity; -webkit-tap-highlight-color: transparent; }
.tw-card.is-off { opacity: 0; pointer-events: none; }
.tw-card:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0B2C63, 0 calc(var(--tw-cw) * 6cqw) calc(var(--tw-cw) * 13cqw) calc(var(--tw-cw) * -3cqw) rgba(22, 30, 44, .28); }
.tw-ph { display: block; aspect-ratio: 1 / .9; overflow: hidden; isolation: isolate; background: linear-gradient(158deg, #F6F7F8 0%, #E3E6EA 60%, #D5D9DE 100%); }
/* the real team's photographs: held from the top, so no head is cut, and in their own colour */
.tw-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; pointer-events: none; -webkit-user-drag: none; transition: scale .5s var(--ui-ease); }
.tw-card:hover .tw-ph img { scale: 1.04; }
.tw-lab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--tw-cw) * 1.8cqw);
  height: calc(var(--tw-cw) * 34cqw); padding: 0 calc(var(--tw-cw) * 6cqw); }
.tw-lab small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 600 max(.5rem, calc(var(--tw-cw) * 4.1cqw))/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #3B4048; }
.tw-lab b { font: 600 max(.72rem, calc(var(--tw-cw) * 7.4cqw))/1.15 var(--sans); letter-spacing: -.01em; color: #0E1116; }
.tw-words { position: absolute; left: 50%; top: calc((var(--tw-cy) - var(--tw-rt) - .012) * 100cqw); translate: -50% -50%;
  display: flex; align-items: center; gap: 1.1cqw; margin: 0; white-space: nowrap; pointer-events: none;
  font: 600 max(.55rem, .74cqw)/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: #2A2E35; }
.tw-words i { width: max(3px, .3cqw); aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.tw .tw-note { margin: .8rem 0 0; font-size: .76rem; line-height: 1.45; text-align: left; color: #5A6575; }
@media (max-width: 1000px) {
  .tw-stage { --tw-cw: .22; --tw-rc: .52; --tw-lift: .035; --tw-step: 28; --tw-cy: .72; --tw-rt: .365; --tw-h: .64; }
}
@media (max-width: 640px) {
  /* five still ride the arc: three whole, the outer two cut by the screen's edges */
  .tw-stage { --tw-cw: .3; --tw-rc: .6; --tw-lift: .03; --tw-step: 30; --tw-cy: .856; --tw-rt: .362; --tw-h: .79; }
  .tw-ph { aspect-ratio: 1 / .82; }
  .tw-lab { height: calc(var(--tw-cw) * 50cqw); gap: .9cqw; padding: 0 1.2cqw; }
  .tw-lab small { font-size: max(.4rem, 2.05cqw); letter-spacing: .08em; }
  .tw-lab b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: max(.6rem, 3.05cqw); line-height: 1.12; }
  .tw-words { display: none; }   /* no room for it between the cards on a phone */
}
@media (prefers-reduced-motion: reduce) { .tw-ph img { transition: none; } }

/* ---- a paper's cover page (rpCover in views.js): an A4 page, every size a share of its width, so the
   same cover reads the same as a thumbnail, the lead and on the paper's own page. A second sheet
   shows behind it, as a printed report would. */
.pc { position: relative; display: flex; flex-direction: column; aspect-ratio: 1 / 1.414; container-type: inline-size; overflow: hidden;
  background: #fff; color: #0B2C63; text-align: left; border-radius: 2px;
  box-shadow: 0 1px 2px rgb(11 44 99 / .14), 0 16px 28px -14px rgb(11 44 99 / .5), 4px 4px 0 -1px #FBFCFD, 4px 4px 0 0 rgb(11 44 99 / .16); }
.pc > * { position: relative; }
.pc .pc-art, .pc .pc-photo, .pc .pc-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc .pc-photo { display: block; object-fit: cover; }
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 4cqi; padding: 7cqi 7cqi 0; }
.pc-logo { flex: 0 0 auto; width: 15cqi; height: auto; }   /* the NIIP seal */
.pc-kicker { font: 700 3.2cqi/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #C8102E; text-align: right; }
.pc-words { display: flex; flex-direction: column; align-items: flex-start; gap: 2.6cqi; margin-top: auto; padding: 0 7cqi; }
.pc-rule { width: 12cqi; height: 1.1cqi; background: #C8102E; }
.pc-title { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  font: 800 8.2cqi/1.04 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.pc-by { font: 500 3.4cqi/1.3 var(--sans); color: #4A5568; }
.pc-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqi; padding: 5cqi 7cqi 7cqi;
  font: 600 2.7cqi/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #5A6575; }
.pc-foot b { font: 800 5cqi/1 var(--sans); letter-spacing: -.01em; color: #0B2C63; }
/* flagship: a photograph cut by diagonal bands of red and navy */
.pc--photo .pc-photo { object-position: 50% 22%; }
.pc--photo .pc-title { font-size: 7.4cqi; }
/* working paper: a network of nodes on navy */
.pc--net { background: radial-gradient(125% 80% at 88% 6%, #1E56B0 0%, #0B2C63 46%, #061A3D 100%); color: #fff; }
.pc--net .pc-kicker { color: #8CBBFF; }
/* brief: fine lines sweeping round a round photograph */
.pc--lines { background: linear-gradient(180deg, #fff 0%, #F2F5FA 100%); }
.pc--lines .pc-words { margin-top: 9cqi; }
.pc--lines .pc-foot { margin-top: auto; }
.pc-disc { position: absolute; top: 70cqi; right: 6cqi; width: 44cqi; aspect-ratio: 1; overflow: hidden; border-radius: 50%;
  border: 1.6cqi solid #fff; box-shadow: 0 0 0 .7cqi #C8102E, 0 8cqi 12cqi -6cqi rgb(11 44 99 / .45); }
.pc-disc .pc-photo { object-position: 40% 30%; }
/* report: a dark photograph, full bleed, in a thin frame */
.pc--dark { background: #061228; color: #fff; }
.pc--dark .pc-photo { object-position: 50% 35%; }
.pc .pc-shade { background: linear-gradient(180deg, rgb(6 18 40 / .72) 0%, rgb(6 18 40 / .12) 26%, rgb(6 18 40 / .3) 48%, rgb(6 18 40 / .93) 74%, #061228 100%); }
.pc .pc-frame { position: absolute; inset: 3.4cqi; border: max(1px, .3cqi) solid rgb(255 255 255 / .36); }
.pc--dark .pc-kicker { color: #FFCC00; }
.pc--dark .pc-title { font-family: var(--serif); font-weight: 600; font-size: 9cqi; letter-spacing: -.01em; line-height: 1.06; }
/* the light words on the two dark covers, and a white logo */
:is(.pc--net, .pc--dark) .pc-by { color: rgb(255 255 255 / .74); }
:is(.pc--net, .pc--dark) .pc-foot { color: rgb(255 255 255 / .6); }
:is(.pc--net, .pc--dark) .pc-foot b { color: #fff; }
.paper-cover-lg .pc { width: 100%; }
/* a journal's paper: the journal named in the foot, the kicker on the left */
.pc--journal .pc-head { justify-content: flex-start; }
.pc--journal .pc-kicker { text-align: left; }
.pc--journal .pc-foot span { font-weight: 700; }
.paper-venue { margin: -.2rem 0 1rem; font-size: .92rem; font-style: italic; color: #2A3446; }
.paper-cite { font-size: .88rem; line-height: 1.6; overflow-wrap: anywhere; }
.paper-note { margin-top: 1.6rem; font-size: .8rem; color: #5A6575; }

/* ---- About: the mission, the problem and the answer as kinetic type (initKinetic in app.js), set as
   the reference film sets its words: Montserrat ExtraBold, near-black with the page's blue, on light grey.
   The stage holds still under the bar while the reader scrolls the box around it; app.js sets the
   box's height to the length of the path. */
/* The box is grey too, so nothing of the page shows under the stage while it is held, even as a phone's
   browser bar slides away (the stage follows the screen's height as it changes: dvh). */
.kt-scroll { position: relative; margin-top: clamp(2.5rem, 6vh, 4rem); background: #EEEEEE; }
.kt { position: sticky; top: var(--kt-top, 64px); overflow: hidden; height: calc(100vh - var(--kt-top, 64px)); height: calc(100dvh - var(--kt-top, 64px));
  background: #EEEEEE; user-select: none; -webkit-user-select: none; }
.kt-cam { position: absolute; inset: 0; perspective-origin: 50% 50%; }
.kt-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; }
.kt-world[hidden] { display: none; }
.kt-w { position: absolute; left: 0; top: 0; transform-origin: 0 0; white-space: pre; font-family: 'Montserrat', var(--sans); font-weight: 800; line-height: .86; letter-spacing: 0; color: #262626; }
.kt-w b { font-weight: inherit; color: #2F66D8; }
/* the section ends with the stage: the slides follow straight under it, on the same grey */
.cs .cs-mission.ab-story { padding-bottom: 0; }

/* ---- About: the slides (public/img/about/slides). Each card holds still in the middle of the screen
   while the next rises over it; the one beneath sinks back a little and darkens (app.js sets --p).
   16:9 slides on a wide screen, 4:5 flyers on a phone. --sl-nav is the bar's height (app.js). */
.ab-slides { --sl-nav: 64px; --sl-ar: .5625; --sl-w: min(100vw - 2.8rem, 1180px, (100vh - var(--sl-nav) - 56px) / var(--sl-ar));
  padding: clamp(1.5rem, 4vh, 2.5rem) 0 clamp(3rem, 8vh, 5rem); background: #EEEEEE; }
@supports (height: 100dvh) { .ab-slides { --sl-w: min(100vw - 2.8rem, 1180px, (100dvh - var(--sl-nav) - 56px) / var(--sl-ar)); } }
.sl { display: grid; justify-items: center; align-items: start; gap: 14vh; margin: 0; padding: 0; list-style: none; }
.sl-card { --p: 0; position: sticky; top: calc(var(--sl-nav) + (100vh - var(--sl-nav) - var(--sl-w) * var(--sl-ar)) / 2);
  width: var(--sl-w); aspect-ratio: 1 / var(--sl-ar); transform-origin: 50% 0; transform: scale(calc(1 - .06 * var(--p)));
  border-radius: 14px; overflow: hidden; background: #04235C; box-shadow: 0 30px 60px -28px rgb(4 35 92 / .55), 0 2px 6px rgb(4 35 92 / .18); }
@supports (height: 100dvh) { .sl-card { top: calc(var(--sl-nav) + (100dvh - var(--sl-nav) - var(--sl-w) * var(--sl-ar)) / 2); } }
.sl-card::after { content: ''; position: absolute; inset: 0; background: #021233; opacity: calc(.5 * var(--p)); pointer-events: none; }
.sl-card :is(picture, img) { display: block; width: 100%; height: 100%; }
.sl-card img { object-fit: cover; }
.sl-link { display: block; height: 100%; }
.sl-link:focus-visible { outline: 3px solid #A6D930; outline-offset: -3px; }
@media (max-width: 760px) {
  .ab-slides { --sl-ar: 1.25; --sl-w: min(100vw - 32px, (100vh - var(--sl-nav) - 32px) / var(--sl-ar)); }
  @supports (height: 100dvh) { .ab-slides { --sl-w: min(100vw - 32px, (100dvh - var(--sl-nav) - 32px) / var(--sl-ar)); } }
  .sl { gap: 10vh; }
  /* a flyer is shorter than a phone's screen: it holds just under the bar, not in the middle */
  .sl-card { top: calc(var(--sl-nav) + 14px); border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .sl-card { transform: none; } .sl-card::after { opacity: 0; } }

/* ---- About: the African Regional Report (initRegionReport in app.js; the folder is public/glass-folder.js).
   Room above the folder for its slides to rise into when it opens. */
.rr { display: grid; justify-items: center; margin-top: 1rem; }
.rr-stage { display: flex; justify-content: center; width: 100%; min-height: 360px; padding-top: clamp(56px, 9vh, 96px); }
.rr-hint { margin: 1.6rem 0 0 !important; font: 500 .66rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cs-ink2); text-align: center; }
/* the viewer: a slide full size over a dark shade, with its count, its name and the skip buttons under it */
.rv { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; }
.rv[hidden] { display: none; }
.rv-shade { position: absolute; inset: 0; background: rgb(3 12 32 / .88); opacity: 0; transition: opacity .3s ease; }
.rv.is-open .rv-shade { opacity: 1; }
.rv-dlg { position: relative; width: min(1180px, 100%, (100vh - 120px) * 16 / 9); outline: none; opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.rv.is-open .rv-dlg { opacity: 1; transform: none; }
.rv-dlg picture, .rv-dlg img { display: block; width: 100%; height: auto; }
.rv-dlg img { border-radius: 12px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7); background: #04235C; aspect-ratio: 16 / 9; }
.rv-bar { display: flex; align-items: center; gap: .6rem; margin-top: 14px; color: #fff; }
.rv-count { font: 600 .74rem/1 var(--sans); letter-spacing: .16em; color: #A6D930; font-variant-numeric: tabular-nums; }
.rv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .95rem/1.2 var(--sans); }
.rv-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(255 255 255 / .28); border-radius: 50%;
  background: rgb(255 255 255 / .08); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.rv-btn:hover { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .5); }
.rv-btn:focus-visible { outline: 2px solid #A6D930; outline-offset: 2px; }
.rv-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .rv-dlg { width: min(100%, (100vh - 130px) * .8); }
  .rv-dlg img { aspect-ratio: 4 / 5; }
  .rr-stage { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .rv-shade, .rv-dlg { transition: none; } }

/* ---- About: the About NIIP section (the hero's first button leads here) and its words over the numbers.
   The anchors land just under the bar; the page glides to them. */
html:has(#about-niip) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(#about-niip) { scroll-behavior: auto; } }
#about-niip, #what-we-do { scroll-margin-top: var(--nav-real, var(--nav-h)); }   /* the bar's own height (app.js) */
.ab-about-h { margin: 0 0 clamp(2rem, 5vh, 3rem); text-align: center; font: 600 clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem)/1.05 var(--sans); letter-spacing: -.02em; color: var(--cs-ink); }
/* the photo band shows the middle of its picture (the analysts), not the top; the rows sit over the numbers */
.cs-people--mid img { top: 50%; transform: translateY(-50%); }
.ab-rows { margin-bottom: clamp(2.5rem, 6vh, 3.5rem); }
.ab-rows dd { text-align: left; hyphens: manual; }
.ab-rows b { font-weight: 600; }
.ab-stat p { text-align: left; hyphens: manual; }   /* the labels under the numbers stay flush left on a phone */

/* ---- Our Team: the talent pool on the map of Liberia (talentMap in app.js lays a honeycomb of faces over the
   country, sets each face's place, size and depth and tilts the map under them; --ts-node is a face's size).
   The land is drawn beneath, and a talent's county is outlined over the faces while their face is lifted.
   A finger tilts it sideways only, so the page still scrolls. */
.ts { display: grid; justify-items: center; margin-top: 1.4rem; }
.ts-stage { --ts-node: 56px; position: relative; width: min(100%, 720px); aspect-ratio: 812 / 828; perspective: 1400px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.ts-stage.is-drag { cursor: grabbing; }
.ts-plane, .ts-mark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform: rotateX(22deg); will-change: transform; }
.ts-shade path { fill: rgb(11 44 99 / .2); }
.ts-land path { fill: #F2F4F7; stroke: #C9D1DC; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ts-mark { z-index: 2000; }
.ts-mark path { fill: color-mix(in srgb, var(--mc, #0B2C63) 14%, transparent); stroke: var(--mc, #0B2C63); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: 0; transition: opacity .2s ease; }
.ts-mark.is-on path { opacity: 1; }
.ts-node { position: absolute; left: 50%; top: 50%; width: var(--ts-node); height: var(--ts-node); padding: 0; overflow: hidden; border: 2px solid #fff; border-radius: 50%;
  background: #E3E7EC; cursor: pointer; visibility: hidden; transform: translate(-50%, -50%) scale(0);
  box-shadow: 0 6px 12px -7px rgb(11 30 69 / .6), 0 0 0 1px rgb(11 30 69 / .06); will-change: transform; transition: box-shadow .2s ease, filter .3s ease; -webkit-tap-highlight-color: transparent; }
.ts-node img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ts-node.is-lift { box-shadow: 0 0 0 3px var(--c), 0 18px 32px -12px rgb(11 30 69 / .6); }
.ts-node.is-match { box-shadow: 0 0 0 2.5px var(--c), 0 6px 12px -7px rgb(11 30 69 / .6); }
.ts-node.is-dim { filter: grayscale(1); pointer-events: none; }
.ts-cap { display: grid; justify-items: center; gap: .2rem; min-height: 2.8rem; margin: .6rem 0 0 !important; text-align: center; }
.ts-cap b { font: 700 1.02rem/1.2 var(--sans); color: #0E1420; }
.ts-cap span { font-size: .8rem; color: #5A6575; }
.ts-cap:not(.is-on) span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
/* the list is for keyboards and screen readers: out of sight until a talent in it takes focus */
.ts-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0; list-style: none; }
.ts-list:focus-within { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin-top: .4rem; }
.ts-list li:not(:has(:focus)) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ts-list li[hidden] { display: none; }
.ts-list button { padding: .4rem .8rem; border: 0; border-radius: 999px; background: #0B2C63; color: #fff; font: 600 .82rem/1.2 var(--sans); }
.ts-note { margin-top: .4rem !important; text-align: center; }

/* ---- Home: the featured papers on a 3D cylinder (initPaperRing in app.js sizes it to its section: --cw the
   ring's width, --fw a card's width, --rad its radius, --pr-ar a card's shape, --pr-foot the room for the
   hint, and the section's height and perspective). It stands on the page itself and reaches the section's
   edges; the card at the front is drawn at 1:1 so its words are sharp, those round the back fade away; on a
   phone it is a six-sided drum small enough to stay whole on screen, so it is seen to turn. A chosen card
   opens large over the page (.prv). */
.pr { position: relative; height: 560px; margin-top: .6rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); }
.pr-stage { position: absolute; inset: 0 0 var(--pr-foot, 40px); display: flex; align-items: center; justify-content: center; perspective: 1400px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.pr-stage.is-drag { cursor: grabbing; }
.pr-ring { position: relative; flex: none; width: var(--cw, 1800px); height: 100%; transform-style: preserve-3d; }
.pr-face { position: absolute; top: 0; left: 50%; display: flex; align-items: center; justify-content: center; width: var(--fw, 150px); height: 100%;
  margin-left: calc(var(--fw, 150px) / -2); padding: 8px; transform: rotateY(var(--a)) translateZ(var(--rad, 286px)); color: #fff; text-decoration: none;
  -webkit-tap-highlight-color: transparent; backface-visibility: hidden; }
.pr-face:hover, .pr-face:focus { text-decoration: none; }
.pr-face:focus-visible { outline: none; }
.pr-face:focus-visible .pr-card { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #C8102E; }
.pr-card { position: relative; display: block; width: 100%; aspect-ratio: var(--pr-ar, .68); overflow: hidden; -webkit-font-smoothing: antialiased; border-radius: 12px; background: #0B2C63;
  box-shadow: 0 22px 34px -18px rgb(11 30 69 / .45), 0 2px 6px rgb(11 30 69 / .12); transition: filter .4s ease, opacity .4s ease; }
.pr-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pr-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .3rem; padding: 2.2rem .7rem .7rem;
  background: linear-gradient(180deg, transparent, rgb(4 12 32 / .9)); transition: opacity .3s ease; }
.pr-tag { font: 600 .62rem/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: #FFCC00; }
.pr-t { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font: 600 .9rem/1.28 var(--sans); color: #fff; }
.pr-face { transition: opacity .35s ease; }
.pr-face.is-back { opacity: 0; pointer-events: none; }   /* the far side of the cylinder: on the white page only the front arc shows */
.pr-hint { position: absolute; left: 0; right: 0; bottom: .55rem; margin: 0; text-align: center; pointer-events: none;
  font: 500 .64rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #5A6575; }
@media (max-width: 640px) {
  .pr { height: 340px; -webkit-mask-image: none; mask-image: none; }
  .pr-face { padding: 5px; }
  .pr-t { -webkit-line-clamp: 4; font-size: .68rem; }
  .pr-tag { font-size: .52rem; }
  .pr-cap { padding: 1.4rem .4rem .45rem; gap: .2rem; }
}
/* the card, opened large */
.prv { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; padding: 16px; }
.prv[hidden] { display: none; }
.prv-shade { position: absolute; inset: 0; background: rgb(3 10 28 / .62); opacity: 0; transition: opacity .5s cubic-bezier(.32,.72,0,1); }
.prv.is-open .prv-shade { opacity: 1; }
.prv-dlg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); width: min(900px, 100%); max-height: calc(100vh - 32px);
  overflow: hidden; border-radius: 22px; background: #fff; outline: none; box-shadow: 0 40px 90px -30px rgb(0 0 0 / .6);
  opacity: 0; transform: scale(.6); transition: opacity .5s cubic-bezier(.32,.72,0,1), transform .5s cubic-bezier(.25,.1,.25,1); }
.prv.is-open .prv-dlg { opacity: 1; transform: none; }
.prv-img { min-height: 360px; background: #0B2C63 center / cover no-repeat; }
.prv-body { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: clamp(1.5rem, 4vw, 2.6rem); }
.prv-body h3 { margin: 0; font: 600 clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.15 var(--serif); color: #0B2C63; text-align: left; }
.prv-meta { margin: 0; font-size: .9rem; color: #4A5568; }
.prv-go { display: inline-flex; align-items: center; gap: .6rem; margin-top: auto; padding: .8rem 1.3rem; border-radius: 999px; background: #0B2C63; color: #fff;
  font: 600 .86rem/1 var(--sans); text-decoration: none; }
.prv-go:hover { background: #C8102E; text-decoration: none; }
.prv-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.prv-x { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / .5); color: #fff; cursor: pointer; }
.prv-x:hover { background: rgb(0 0 0 / .72); }
.prv-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 640px) {
  .prv-dlg { grid-template-columns: minmax(0, 1fr); }
  .prv-img { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .prv-shade, .prv-dlg { transition: none; } }

/* ---- the PDF viewer (pdfviewer.js) under every research paper and report, after the owner's pdf-viewer
   component: the page list on the left (it folds away; on a phone it opens over the pages), the toolbar
   over the pages, the pages on a grey ground. It runs wider than the text around it. */
.pv { --pv-line: rgb(11 30 69 / .14); position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr);
  height: min(86vh, 940px); margin: 1.6rem calc(50% - min(560px, 50vw - 16px)) .6rem; overflow: hidden;
  border: 1px solid #000; border-radius: 14px; background: #fff; }
.pv.is-side-off { grid-template-columns: 0 minmax(0, 1fr); }
#paper-pdf { scroll-margin-top: calc(var(--nav-h) + 1.2rem); }
html:has(#paper-pdf) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(#paper-pdf) { scroll-behavior: auto; } }
.paper-ctas { display: flex; flex-wrap: wrap; gap: .6rem; }
.pv-side { min-width: 0; overflow: hidden; border-right: 1px solid var(--pv-line); background: #F6F8FB; }
.pv.is-side-off .pv-side { border-right: 0; }
.pv-thumbs { position: relative; display: flex; flex-direction: column; align-items: center; gap: .8rem; height: 100%; overflow-y: auto; padding: 1.3rem 0; }
.pv-thumb { display: grid; justify-items: center; gap: .35rem; width: 172px; padding: .55rem; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.pv-thumb:hover { background: #E7ECF3; }
.pv-thumb.is-on { background: #DCE5F1; }
.pv-thumb-img { display: block; width: 150px; background: #fff; box-shadow: 0 0 0 1px var(--pv-line), 0 1px 3px rgb(11 30 69 / .12); }
.pv-thumb-img canvas { display: block; width: 100%; height: 100%; }
.pv-thumb-n { font-size: .8rem; color: #5A6575; }
.pv-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pv-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem .6rem; padding: .45rem .6rem; border-bottom: 1px solid var(--pv-line); background: #fff; }
.pv-grp { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.pv-btn { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; color: #1E2A3D; cursor: pointer; }
.pv-btn:hover { background: #EEF2F7; text-decoration: none; }
.pv-btn:disabled { opacity: .35; cursor: default; background: none; }
.pv-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-btn[aria-pressed="true"], .pv-btn[aria-expanded="true"] { background: #E4ECF8; color: #0B2C63; }
.pv-btn:focus-visible, .pv-zoom:focus-visible, .pv-thumb:focus-visible { outline: 2px solid #1C5BB8; outline-offset: 1px; }
.pv-count { font-size: .85rem; color: #5A6575; white-space: nowrap; }
.pv-count b { font-weight: 600; color: #1E2A3D; }
.pv-sep { width: 1px; height: 20px; margin: 0 .2rem; background: var(--pv-line); }
.pv-zoom { height: 30px; padding: 0 .4rem; border: 1px solid var(--pv-line); border-radius: 6px; background: #fff; font: 500 .8rem var(--sans); color: #1E2A3D; cursor: pointer; }
.pv-findwrap { position: relative; }
.pv-find { position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; display: grid; gap: .4rem; width: min(260px, 80vw); padding: .7rem;
  border: 1px solid var(--pv-line); border-radius: 10px; background: #fff; box-shadow: 0 14px 30px -12px rgb(11 30 69 / .35); }
.pv-find[hidden] { display: none; }
.pv-find input { width: 100%; height: 34px; padding: 0 .65rem; border: 1px solid var(--pv-line); border-radius: 6px; font: 400 .9rem var(--sans); }
.pv-hits { font-size: .78rem; color: #5A6575; }
.pv-hits:empty { display: none; }
.pv-scroll { position: relative; flex: 1; min-height: 0; overflow: auto; background: #EEF1F5; overscroll-behavior: contain; }
.pv-pages { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: max-content; min-width: 100%; padding: 32px; }
.pv-page { position: relative; flex: none; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--pv-line), 0 2px 8px rgb(11 30 69 / .12); }
.pv-page canvas { display: block; }
.pv-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; margin: 0; font-size: .85rem; color: #5A6575; }
.pv-load[hidden], .pv-msg[hidden] { display: none; }
.pv-spin svg { width: 22px; height: 22px; fill: none; stroke: #0B2C63; stroke-width: 2; stroke-linecap: round; animation: pv-spin 1s linear infinite; }
@keyframes pv-spin { to { transform: rotate(360deg); } }
.pv-msg { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; padding: 2rem; text-align: center; font-size: .92rem; }
.pv-note { margin: 0 calc(50% - min(560px, 50vw - 16px)) 2.2rem; font-size: .8rem; line-height: 1.5; color: #5A6575; }
/* the text over each page, from PDF.js's own viewer styles: invisible but selectable; the search marks it */
.textLayer { position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none;
  forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 0;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer span[role="img"] { user-select: none; cursor: default; }
.textLayer ::selection { background: rgb(28 91 184 / .28); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer mark { color: transparent; background: rgb(255 204 0 / .5); border-radius: 2px; }
@media (max-width: 760px) {
  .pv { grid-template-columns: minmax(0, 1fr); height: 78vh; border-radius: 12px; }
  .pv.is-side-off { grid-template-columns: minmax(0, 1fr); }
  .pv-side { position: absolute; z-index: 4; top: var(--pv-bar-h, 47px); bottom: 0; left: 0; width: 200px; box-shadow: 12px 0 30px -18px rgb(11 30 69 / .5); }
  .pv.is-side-off .pv-side { display: none; }
  .pv-thumb { width: 170px; }
  .pv-bar { padding: .35rem .4rem; }
  .pv-grp { gap: .1rem; }
  .pv-sep { display: none; }
  .pv-pages { gap: 1rem; padding: 16px; }
}

/* a report's page: the catalogue categories its subject draws on */
.rp-rel { display: grid; gap: .7rem; margin: .4rem 0 2.2rem; }
.rp-rel-cat { display: grid; gap: .35rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 12px; color: inherit; }
.rp-rel-cat:hover { border-color: #0B2C63; text-decoration: none; }
.rp-rel-cat span { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rp-rel-cat b { color: #0B2C63; }
.rp-rel-cat em { font-style: normal; font-size: .82rem; font-weight: 600; color: #1C5BB8; white-space: nowrap; }
.rp-rel-cat small { font-size: .84rem; line-height: 1.5; color: #5A6575; }
.rc-link { color: inherit; }
.rc-link:hover { text-decoration: underline; }

/* ---- home: a tighter rhythm between the sections (the owner found the white space too wide and the page
   empty). About 40-55px of white between one section's last line and the next section's heading. */
#featuredPapers { padding-top: 1.75rem; padding-bottom: 1rem; }      /* its hint row already gives room under the cards */
#natReports { padding-bottom: 1rem; }
.rc-stage { height: 414px; }                                          /* the tallest report card, and its shadow */
#homeVideo { padding-top: 1.5rem; padding-bottom: 2.5rem; }      /* the news section under it has no top padding of its own */
#latestUpdates { padding-bottom: 1.5rem; }
@media (max-width: 760px) {
  #featuredPapers { padding-top: 1.5rem; padding-bottom: .75rem; }
  #natReports { padding-bottom: 1rem; }
  #homeVideo { padding-top: 1.25rem; padding-bottom: 2.25rem; }
  #latestUpdates { padding-bottom: 1.25rem; }
}
@media (max-width: 720px) { .rc-stage { height: 436px; } }

/* ---- home on a phone: the carousels' arrows on the right. The heading takes the first line and the
   buttons wrap to the next; that line spans the column, the "All" link on the left, the arrows on the right. */
@media (max-width: 760px) {
  .fp-nav, .rc-nav, .sq-nav { flex: 1 0 100%; }
  .fp-nav .more, .rc-nav .more, .sq-nav .more { margin-right: auto !important; }
}

/* ---- ICT News & Updates: every card a clear glass key (the owner's call), the open one and the ones
   waiting beside it alike. A keycap's thick rounded rim in clear glass frames the photo: a bright lip
   along the top, darker glass in the skirt at the foot, light caught on the left, and a sheen across the
   top corner. The rim and the rounding scale with the card, so a narrower card is a smaller key and a
   slat a glass rod, and both follow a card as it opens or closes. No backdrop blur: the page around it
   animates, and a blur would repaint it every frame. */
#sqTrends .sq-card { --rim: 10px; --rim-foot: 16px; --face: .8; --glow: 1;
  border-color: rgb(11 30 69 / .55); box-shadow: 0 1px 0 rgb(255 255 255 / .9), 0 14px 26px -14px rgb(11 30 69 / .55); }
#sqTrends .sq-card[data-col="0"] { border-radius: 18px; }
#sqTrends .sq-card[data-col="1"] { --rim: 9px; --rim-foot: 14px; border-radius: 16px; }
#sqTrends .sq-card[data-col="2"] { --rim: 7px; --rim-foot: 11px; border-radius: 14px; }
#sqTrends .sq-card[data-col="3"] { --rim: 5px; --rim-foot: 8px; border-radius: 12px; }
#sqTrends .sq-card[data-kind="tail"] { --rim: 1.5px; --rim-foot: 2px; --face: .5; --glow: 0; }
#sqTrends .sq-card::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  /* the rim, seen from above: lit glass on the top and sides, the skirt at the front taller and darker */
  border-style: solid; border-width: var(--rim) var(--rim) var(--rim-foot);
  border-color: rgb(230 239 255 / .46) rgb(215 228 252 / .3) rgb(20 44 92 / .5) rgb(222 234 255 / .38);
  background:
    linear-gradient(128deg, rgb(255 255 255 / calc(.3 * var(--glow))) 0%, rgb(255 255 255 / calc(.08 * var(--glow))) 18%, rgb(255 255 255 / 0) 36%),
    linear-gradient(to top, rgb(4 12 32 / calc(.18 * var(--glow))), rgb(4 12 32 / 0) 20%);
  box-shadow:
    inset 0 0 0 1.5px rgb(255 255 255 / var(--face)),   /* the edge of the key's top face */
    inset 0 3px 8px rgb(255 255 255 / calc(.35 * var(--glow))),
    inset 0 -6px 12px rgb(4 12 32 / calc(.22 * var(--glow)));
  transition: border-width var(--sq-ms) var(--sq-ease), box-shadow var(--sq-ms) var(--sq-ease); }
/* the photo's own edge, inside the rim */
.sq-card[data-col="0"] .sq-pic { border-radius: 18px; }
/* the caption sits on the key's face, clear of the rim; so does a waiting card's spine */
.sq-card[data-col="0"] .sq-over { z-index: 3; padding-left: 30px; padding-bottom: 30px; }
#sqTrends .sq-spine-in { left: calc(var(--rim) + 9px); bottom: calc(var(--rim-foot) + 8px); max-height: calc(100% - var(--rim) - var(--rim-foot) - 24px); }
@container sq (max-width: 640px) {
  /* a phone's waiting cards are slivers: the first a slim key, the rest glass rods */
  #sqTrends .sq-card[data-col="0"] { --rim: 7px; --rim-foot: 11px; border-radius: 14px; }
  #sqTrends .sq-card[data-col="1"] { --rim: 3px; --rim-foot: 5px; --glow: .6; border-radius: 10px; }
  #sqTrends .sq-card[data-col="2"] { --rim: 2px; --rim-foot: 3px; --face: .6; --glow: .3; border-radius: 8px; }
  #sqTrends .sq-card[data-col="3"] { --rim: 1.5px; --rim-foot: 2px; --face: .5; --glow: 0; border-radius: 4px; }
  .sq-body .sq-card[data-col="0"] .sq-over { padding-left: 20px; padding-bottom: 22px; }
}
.sq.is-still .sq-card::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .sq-card::after { transition: none !important; } }

/* ---- Featured Research Papers: smoked-glass keys, backlit (a sibling of the news carousel's clear glass key,
   each section its own). Every tile on the cylinder is a key of tinted glass: a rim lit pale blue at the top,
   dark smoke in the skirt at the front, a soft dish of light on the key's face, and the keyboard's backlight
   glowing along the face's edge and spilling out around the key. */
.pr-card { border-radius: 16px;
  box-shadow: 0 0 0 1px rgb(140 187 255 / .55), 0 0 18px -3px rgb(28 91 184 / .6), 0 22px 30px -18px rgb(11 30 69 / .6); }
.pr-card::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  border-style: solid; border-width: 8px 8px 14px;
  border-color: rgb(150 188 245 / .45) rgb(64 104 172 / .48) rgb(4 14 38 / .74) rgb(96 136 204 / .48);
  background:
    radial-gradient(120% 70% at 50% 16%, rgb(255 255 255 / .17), rgb(255 255 255 / 0) 55%),   /* the dish of the key */
    linear-gradient(180deg, rgb(11 44 99 / .08), rgb(11 44 99 / .22));                           /* the smoke in the glass */
  box-shadow:
    inset 0 0 0 1.5px rgb(170 205 255 / .9),         /* the face's edge, lit from below */
    inset 0 0 14px rgb(95 162 255 / .5),
    inset 0 2px 0 rgb(255 255 255 / .4); }
.pr-card .pr-cap { z-index: 3; padding: 2.2rem 1.05rem 1.35rem; }
@media (max-width: 640px) {
  .pr-card { border-radius: 12px; }
  .pr-card::after { border-width: 5px 5px 9px; }
  .pr-card .pr-cap { padding: 1.4rem .6rem .85rem; }
}

/* ---- National ICT Reports: milky-white keys with height (the third of the set). Each report card is a
   white keycap: a frosted ice rim, a crisp face edge, light across the top corner, and the key's side
   standing below it; the card in front presses down a little under the pointer. */
#rcStage .rc-card { border: 1px solid rgb(11 30 69 / .45); border-radius: 22px;
  box-shadow: 0 7px 0 #D3DBE7, 0 8px 0 rgb(11 30 69 / .28), 0 20px 28px -14px rgb(11 30 69 / .45);
  transition: transform .55s cubic-bezier(.22,.7,.3,1), opacity .55s ease, box-shadow .2s ease, top .2s ease; }
#rcStage .rc-card::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  border: 7px solid rgb(226 235 248 / .55);
  background: linear-gradient(135deg, rgb(255 255 255 / .4) 0%, rgb(255 255 255 / .06) 22%, rgb(255 255 255 / 0) 36%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .95),           /* the face's edge */
    inset 0 0 0 2px rgb(140 160 195 / .35),
    inset 0 -10px 14px -10px rgb(11 30 69 / .2); }
#rcStage .rc-card.is-active { box-shadow: 0 7px 0 #D3DBE7, 0 8px 0 rgb(11 30 69 / .3), 0 24px 36px -16px rgb(6 18 44 / .5); }
#rcStage .rc-card.is-active:hover { top: 4px;
  box-shadow: 0 3px 0 #D3DBE7, 0 4px 0 rgb(11 30 69 / .3), 0 14px 24px -14px rgb(6 18 44 / .5), 0 0 0 1px rgb(200 16 46 / .35); }
#rcStage .rc-body { padding-left: 1.45rem; padding-right: 1.45rem; padding-bottom: 1.5rem; }
@media (max-width: 720px) {
  #rcStage .rc-card { border-radius: 18px; }
  #rcStage .rc-card::after { border-width: 5px; }
}
@media (prefers-reduced-motion: reduce) { #rcStage .rc-card { transition: none; } }

/* ---- Data sovereignty in focus (the home video): navy keys on a keyboard deck, the fourth of the set.
   The Up next list is the deck. Every video waiting in it is a raised navy key, with a lit lip along the
   top and the key's darker side standing below it; the one playing is pressed down, its red light on
   like a caps-lock key. The player sits in a bezel of the same navy keycap, the rim inside its frame so
   nothing covers the player's controls. */
#homeVideo .vid-queue { background: linear-gradient(180deg, #0E2250, #0A1A3F); border: 1px solid #06122E; border-radius: 18px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -3px 8px rgb(0 0 0 / .35), 0 18px 30px -18px rgb(6 18 44 / .6); }
#homeVideo .vq-head { background: transparent; color: #A9C1EC; border-bottom: 1px solid rgb(255 255 255 / .1); }
#homeVideo .vq-list { padding: .6rem .65rem .9rem; gap: .6rem; }   /* room below each key for its side */
#homeVideo .vq-item { position: relative; padding: .42rem .55rem .42rem .42rem; border-radius: 12px;
  background: linear-gradient(180deg, #21438C 0%, #1A3878 55%, #16306A 100%);
  box-shadow: inset 0 1px 0 rgb(180 208 255 / .5), inset 0 0 0 1px rgb(130 168 235 / .22),
    0 5px 0 #10285C, 0 6px 0 #030A1C, 0 10px 14px -6px rgb(0 0 0 / .6);   /* the key's side, a shade under its face */
  transition: transform .14s ease, box-shadow .14s ease, background .15s ease; }
#homeVideo .vq-item:hover { background: linear-gradient(180deg, #284E9E 0%, #1F4085 55%, #1A3676 100%); }
#homeVideo .vq-item:active, #homeVideo .vq-item.active { transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgb(180 208 255 / .4), inset 0 0 0 1px rgb(130 168 235 / .2),
    0 1px 0 #10285C, 0 2px 0 #030A1C, 0 4px 8px -4px rgb(0 0 0 / .6); }
#homeVideo .vq-item.active { background: linear-gradient(180deg, #1A3878 0%, #16306A 100%); }
/* the red light of the key that is playing */
#homeVideo .vq-item.active::after { content: ''; position: absolute; top: 9px; right: 10px; width: 6px; height: 6px; border-radius: 50%;
  background: #FF4458; box-shadow: 0 0 0 1px rgb(255 255 255 / .3), 0 0 9px 2px rgb(255 40 64 / .7); }
#homeVideo .vq-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#homeVideo .vq-thumb { border-radius: 8px; box-shadow: 0 0 0 1px rgb(0 0 0 / .45), 0 1px 0 rgb(255 255 255 / .12); }
#homeVideo .vq-title, #homeVideo .vq-item.active .vq-title { color: #fff; padding-right: 14px; }
#homeVideo .vq-sub { color: #A9C1EC; }
/* the player's bezel: the navy key's rim, lit along the top, the skirt at the foot taller and darker */
#homeVideo .vid-frame { border: 1px solid #06122E; border-radius: 18px;
  background: linear-gradient(180deg, #284E9E 0%, #1A3878 8%, #14306A 92%, #0B1F4A 100%);
  box-shadow: inset 0 1px 0 rgb(180 208 255 / .55), 0 6px 0 #071433, 0 7px 0 rgb(0 0 0 / .35), 0 22px 30px -16px rgb(6 18 44 / .55); }
#homeVideo .vid-frame iframe, #homeVideo .vid-frame video { inset: 9px 9px 14px; width: calc(100% - 18px); height: calc(100% - 23px);
  border-radius: 10px; background: #000; box-shadow: 0 0 0 1px rgb(0 0 0 / .6); }
#homeVideo .vid-meta { margin-top: 6px; }   /* clear of the bezel's side */
@media (max-width: 900px) {
  #homeVideo .vid-frame { border-radius: 14px; }
  #homeVideo .vid-frame iframe, #homeVideo .vid-frame video { inset: 6px 6px 10px; width: calc(100% - 12px); height: calc(100% - 16px); border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) { #homeVideo .vq-item { transition: none; } }

/* ---- the home page banner (the owner's, 1 Nov 2026): edge to edge, shown whole at its own height, the
   tall picture on a phone; the reports below it get back the top room they had given up to the papers */
.home-banner { margin: 1.5rem 0 0; padding: 0; line-height: 0; background: #f4f4f5; }
.home-banner picture, .home-banner img { display: block; inline-size: 100%; block-size: auto; }
.home-banner + #natReports { padding-top: 2.5rem !important; }
.home-banner + #homeVideo { padding-top: 2.5rem; }   /* the Hope banner (3 Nov 2026), above the video */
@media (max-width: 760px) { .home-banner { margin-top: 1rem; } .home-banner + #natReports, .home-banner + #homeVideo { padding-top: 1.75rem !important; } }