/* ==========================================================================
   Water in the Middle East — Design System
   Editorial atlas × market-intelligence platform. Static, dependency-free.
   ========================================================================== */

/* ---- Tokens ---------------------------------------------------------- */
:root {
  /* Water blues */
  --blue-deep:    #0B3C5D;
  --blue-primary: #0284C7;
  --cyan:         #06B6D4;
  --aqua-tint:    #F0F9FF;

  /* Desert warmth */
  --sand:         #E8DCC8;
  --sand-tint:    #F6F0E6;
  --terracotta:   #C1653B;
  --terracotta-d: #A2502C;
  --sand-deep:    #8C6D46;

  /* Neutrals */
  --ink:          #10202B;
  --ink-soft:     #4A5B68;
  --paper:        #FDFCFA;
  --border:       #E3E9ED;
  --white:        #FFFFFF;

  /* Pro tier */
  --pro-gold:     #B08A3E;
  --pro-gold-d:   #8F6F2E;

  /* Text-grade accents. The fill-grade tokens above stay for surfaces, rules,
     borders and large numerals; these are the only accent values allowed to
     carry small text, and each clears 4.5:1 on --paper. */
  --blue-text:       #0369A1;   /* 5.79:1 on paper, 5.57:1 on aqua-tint */
  --terracotta-text: #A2502C;   /* 5.51:1 on paper */
  --gold-text:       #7A5F27;   /* 5.86:1 on paper */
  --sand-text:       #6F5636;   /* 6.05:1 on sand-tint */
  --terracotta-dd:   #8A4324;   /* hover for terracotta fills */

  /* Light-on-navy ramp: every text tint used on a --blue-deep band, brightest
     to faintest. All clear 4.5:1 against --blue-deep. */
  --on-deep-1:    #E4EEF5;
  --on-deep-2:    #DCE8F0;
  --on-deep-3:    #C7DBE8;
  --on-deep-4:    #B9CEDD;
  --on-deep-5:    #A9C7DA;
  --on-deep-6:    #9FB8C9;
  --on-deep-7:    #8CA6B7;
  --on-deep-cyan: #86D6E8;

  /* Sequential blue scale (choropleths) */
  --seq-1: #EAF4FA;
  --seq-2: #B7DCEF;
  --seq-3: #6FB6DD;
  --seq-4: #2E85B8;
  --seq-5: #0B3C5D;

  /* Status */
  --ok:      #2E7D57;
  --warn:    #C1653B;
  --danger:  #B0413A;
  --info:    #0284C7;

  /* Type */
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body:    "Source Serif 4", Georgia, serif;
  --font-ui:      "Inter", system-ui, -apple-system, sans-serif;

  /* Spacing scale (8px) */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px;

  --container: 1200px;
  --prose: 760px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 12px rgb(11 60 93 / .06);
  --shadow-lift: 0 14px 40px rgb(11 60 93 / .14);

  /* z-index scale */
  --z-sticky: 10; --z-drop: 40; --z-header: 100; --z-modal: 1000;

  --ease-out: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--blue-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.18; color: var(--blue-deep); margin: 0 0 var(--s2); letter-spacing: -.008em; }
p { margin: 0 0 var(--s3); }
ul, ol { margin: 0 0 var(--s3); }

/* ---- Utility --------------------------------------------------------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--s3); }
.prose { max-width: var(--prose); }
.eyebrow {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-text);
  margin: 0 0 var(--s2);
}
.eyebrow--sand { color: var(--sand-deep); }
.eyebrow--light { color: var(--cyan); }
.section { padding-block: var(--s7); }
.section--tight { padding-block: var(--s6); }
.section--sand { background: var(--sand-tint); }
.section--aqua { background: var(--aqua-tint); }
.section--deep { background: var(--blue-deep); color: var(--on-deep-2); }
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--white); }
.lede { font-size: 21px; line-height: 1.6; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.tabnum { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.section-head { max-width: 820px; margin-bottom: var(--s5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-title { font-size: clamp(28px, 4vw, 40px); }
.grid { display: grid; gap: var(--s3); }

/* ---- Skip link & focus ---------------------------------------------- */
.skip-link {
  position: absolute; left: var(--s2); top: -60px; z-index: var(--z-modal);
  background: var(--blue-deep); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: var(--s2); text-decoration: none; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 3px; }

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: 8px; border: 1px solid transparent;
  transition: background .2s, border-color .2s, color .2s;
  text-decoration: none; cursor: pointer; line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--blue-deep); color: #fff; }
.btn--primary:hover { background: #0E4A72; }
.btn--ghost { background: rgb(8 34 54 / .30); color: #fff; border-color: rgb(255 255 255 / .65); backdrop-filter: blur(3px); }
.btn--ghost:hover { background: rgb(8 34 54 / .5); border-color: #fff; }
.btn--ghost-dark { background: transparent; color: var(--blue-deep); border-color: #C7D3DB; }
.btn--ghost-dark:hover { border-color: var(--blue-deep); background: var(--aqua-tint); }
/* ...but --ghost-dark means "dark ink for light backgrounds". Inside a dark
   band it renders navy-on-navy, so flip it to a light ghost there. */
.section--deep .btn--ghost-dark, .sr--dark .btn--ghost-dark, .hero-compact .btn--ghost-dark {
  color: #fff; border-color: rgb(255 255 255 / .55); background: rgb(255 255 255 / .06); }
.section--deep .btn--ghost-dark:hover, .sr--dark .btn--ghost-dark:hover, .hero-compact .btn--ghost-dark:hover {
  background: rgb(255 255 255 / .14); border-color: #fff; }
/* The section lede inherits ink-soft, which is unreadable on the deep band. */
.section--deep .lede, .section--deep .section-head .lede { color: var(--on-deep-3); }
.section--deep .muted { color: var(--on-deep-6); }
.btn--terracotta { background: var(--terracotta-text); color: #fff; }
.btn--terracotta:hover { background: var(--terracotta-dd); }
.btn--gold { background: var(--pro-gold-d); color: #fff; }
.btn--gold:hover { background: var(--gold-text); }
.btn--sm { padding: 8px 16px; font-size: 13px; }

/* ---- Header ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgb(253 252 250 / .92); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
  /* The compact state trims .header-inner by 12px (2 x 6px padding). The header
     is sticky, so it is in flow: if its height changed, everything below would
     move, Chrome's scroll anchoring would shift scrollY by the same 12px, and near
     the threshold that flips the class back again (header shook on scroll-up).
     margin-bottom gives the 12px back, with the same timing, so the header's
     footprint in the page never changes. */
  transition: box-shadow .25s, margin-bottom .25s var(--ease-out);
}
.site-header.scrolled { box-shadow: 0 4px 20px rgb(11 60 93 / .07); margin-bottom: 12px; }
.header-inner {
  display: flex; align-items: center; gap: var(--s3);
  padding: 14px var(--s3); max-width: var(--container); margin-inline: auto;
  transition: padding .25s var(--ease-out);
}
.site-header.scrolled .header-inner { padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: 34px; transform-origin: left center;
  transition: transform .25s var(--ease-out); }
.site-header.scrolled .brand-mark { transform: scale(.824); }  /* 28/34, composited */
.brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  color: var(--blue-deep); line-height: 1.05; letter-spacing: .01em;
}
.brand-name span { display: block; font-size: 11px; font-family: var(--font-ui); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #52707F; }
.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--ink-soft);
  padding: 8px 4px; margin: 0 8px; position: relative; text-decoration: none;
  white-space: nowrap; letter-spacing: .012em; transition: color .2s;
}
.primary-nav { gap: 4px; }
/* refined underline that grows in on hover / current page */
.nav-link::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 1px; height: 1.5px;
  background: var(--blue-primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ease-out);
}
.nav-link:hover { color: var(--blue-deep); text-decoration: none; background: none; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--blue-deep); font-weight: 600; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); background: var(--cyan); }
/* dropdown */
.nav-item { position: relative; }
.nav-toggle { background: none; border: 0; }
.nav-menu {
  /* Right-aligned to the nav item, not left: the nav sits flush right, so a
     left-anchored 230px panel under a late item (Stories) overhangs the viewport
     and — being absolute but still in layout — adds horizontal scroll. */
  position: absolute; top: calc(100% + 6px); right: 0; left: auto; min-width: 230px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 8px; z-index: var(--z-drop);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-item.open .nav-menu, .nav-item:hover .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-ui); font-size: 14px; color: var(--ink);
  padding: 9px 12px; border-radius: 8px; text-decoration: none;
}
.nav-menu a:hover { background: var(--aqua-tint); color: var(--blue-text); }
.nav-pro-chip { font-size: 11px; font-weight: 700; color: var(--gold-text);
  border: 1px solid var(--gold-text); border-radius: 4px; padding: 1px 5px; letter-spacing: .05em; }
.header-actions { display: flex; align-items: center; gap: var(--s2); margin-left: var(--s2); }
.go-pro { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--pro-gold);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.go-pro:hover { color: var(--pro-gold-d); text-decoration: none; }
.nav-toggle-btn { display: none; }

/* Mobile menu */
.mobile-menu { display: none; }
@media (max-width: 1040px) {
  .primary-nav, .header-actions { display: none; }
  .nav-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px;
    background: #fff; margin-left: auto; color: var(--blue-deep);
  }
  .mobile-menu {
    display: block; position: fixed; inset: 0; z-index: var(--z-modal);
    background: var(--blue-deep); color: #fff; padding: 84px var(--s3) var(--s4);
    overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
  }
  .mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-menu a { display: block; color: #fff; font-family: var(--font-ui); font-weight: 500;
    font-size: 20px; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / .12); text-decoration: none; }
  .mobile-menu a:hover { color: var(--cyan); }
  .mobile-menu .mm-label { font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
    color: var(--cyan); border: 0; padding-bottom: 4px; margin-top: var(--s3); }
  .mm-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px;
    background: none; border: 1px solid rgb(255 255 255 / .3); border-radius: 10px; color: #fff; }
  .mm-reveal { opacity: 0; transform: translateY(10px); }
  .mobile-menu.open .mm-reveal { opacity: 1; transform: translateY(0);
    transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
}

/* ---- Footer ---------------------------------------------------------- */
.site-footer { background: var(--blue-deep); color: var(--on-deep-4); padding-block: var(--s6) var(--s4); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1.3fr 1.2fr; gap: var(--s4); }
.footer-title { color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  line-height: 1.18; letter-spacing: -.008em;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s2); }
.site-footer a { color: var(--on-deep-4); font-family: var(--font-ui); font-size: 14px; text-decoration: none;
  display: block; padding: 5px 0; }
.site-footer a:hover { color: var(--cyan); }
.footer-brand-name { font-family: var(--font-display); font-size: 22px; color: #fff; margin-bottom: 10px; }
.footer-slogan { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--on-deep-6); max-width: 34ch; }
.footer-news { display: flex; gap: 8px; margin-top: 12px; }
.footer-news input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid rgb(255 255 255 / .18);
  background: rgb(255 255 255 / .06); color: #fff; font-family: var(--font-ui); font-size: 14px; }
.footer-news input::placeholder { color: var(--on-deep-7); }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / .12); margin-top: var(--s5); padding-top: var(--s3);
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between;
  font-family: var(--font-ui); font-size: 12.5px; color: var(--on-deep-7); }
.footer-partners { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; opacity: .75; }
.footer-partners span { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--on-deep-5);
  letter-spacing: .02em; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- Reveal animations ---------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1!important; transform: none!important; }
}

/* ---- Hero ------------------------------------------------------------ */
/* Country report hero: text-free cropped image band + title band below */
/* Country report hero: the image now encompasses the title, with a premium scrim */
.report-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; }
.report-hero-media { position: absolute; inset: 0; z-index: -2; }
.report-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.js .report-hero-media img { animation: kenburns 20s ease-out forwards; }
.report-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(6 28 46 / .18) 0%, rgb(6 28 46 / .10) 42%, rgb(6 28 46 / .58) 80%, rgb(6 28 46 / .86) 100%),
    linear-gradient(90deg, rgb(6 28 46 / .50) 0%, rgb(6 28 46 / .16) 55%, rgb(6 28 46 / 0) 85%);
}
.report-hero-inner { display: flex; align-items: flex-end; min-height: clamp(320px, 42vw, 480px); padding-bottom: clamp(28px, 4vw, 48px); }
.report-hero-inner > .container { width: 100%; } /* flex would otherwise shrink-wrap + self-center it */
.report-hero .breadcrumb, .report-hero .breadcrumb a { color: #D6E6F1; }
.report-hero-title { color: #fff; margin: 10px 0 0; font-size: clamp(38px, 5.6vw, 62px);
  text-shadow: 0 2px 34px rgb(0 0 0 / .38); }

.hero { position: relative; overflow: hidden; color: #fff; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.js .hero-media img { animation: kenburns 18s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .js .hero-media img { animation: none; } }
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* left-anchored scrim (text is left-aligned) over a stronger vertical gradient,
     so long intro copy stays legible against busy photography */
  background:
    /* Two gradients MULTIPLY, so pushing both up turns the photo to mud. The
       left scrim carries legibility for the left-aligned copy; the vertical one
       only needs a gentle lift through the 20-60% band where the pale Draa
       mountains sit behind the kicker. */
    linear-gradient(90deg, rgb(8 34 54 / .86) 0%, rgb(8 34 54 / .60) 46%, rgb(8 34 54 / .22) 78%, rgb(8 34 54 / .06) 100%),
    linear-gradient(180deg, rgb(8 34 54 / .46) 0%, rgb(8 34 54 / .50) 26%, rgb(8 34 54 / .44) 60%, rgb(8 34 54 / .78) 100%);
}
.hero h1 { text-shadow: 0 2px 22px rgb(0 0 0 / .45); }
.hero-sub { text-shadow: 0 1px 16px rgb(0 0 0 / .6); }
.hero-inner { position: relative; z-index: 2; max-width: var(--container); margin-inline: auto; padding: clamp(80px, 14vh, 160px) var(--s3); }
.hero h1 { color: #fff; font-size: clamp(34px, 5.6vw, 58px); line-height: 1.08;
  max-width: 22ch; text-shadow: 0 2px 30px rgb(0 0 0 / .25); }
.hero-sub { font-size: clamp(17px, 2.2vw, 22px); line-height: 1.5; color: var(--on-deep-1); max-width: 52ch; margin-bottom: var(--s4); }

/* ---- Home hero: bolder, kicker, animated water-flow motif ------------ */
.hero--home .hero-inner { padding-block: clamp(104px, 18vh, 200px); }
.hero-kicker {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-deep-cyan);
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 var(--s3);
  text-shadow: 0 1px 10px rgb(0 0 0 / .55);
}
.hero-kicker::before { content: ""; width: 34px; height: 2px; background: var(--cyan); border-radius: 2px; }
.hero--home h1 { font-size: clamp(46px, 8vw, 88px); font-weight: 700; letter-spacing: -.022em;
  line-height: 1.0; max-width: none; margin-bottom: var(--s3); text-shadow: 0 3px 40px rgb(0 0 0 / .4); }
.hero--home .hero-sub { font-size: clamp(18px, 2.3vw, 25px); line-height: 1.4; color: #fff;
  font-weight: 500; max-width: 34ch; text-wrap: balance;
  text-shadow: 0 2px 4px rgb(4 18 30 / .55), 0 4px 24px rgb(4 18 30 / .65); }
.hero--home .btn--primary { background: #fff; color: var(--blue-deep); }
.hero--home .btn--primary:hover { background: var(--aqua-tint); }
.hero-flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .42; pointer-events: none; }
.hero-flow path { fill: none; stroke: rgb(255 255 255 / .16); stroke-width: 1.4; stroke-dasharray: 4 10; stroke-linecap: round; }
.js .hero-flow path { animation: flow 3.4s linear infinite; }
.hero-flow path:nth-child(2) { stroke: rgb(6 182 212 / .28); animation-duration: 4.8s; }
.hero-flow path:nth-child(3) { animation-duration: 6.2s; }
@media (prefers-reduced-motion: reduce) { .js .hero-flow path { animation: none; } }

/* ---- Main titles (hero-level h1s only): sober institutional serif --- */
.hero h1, .hero-compact h1, .report-hero-title {
  font-weight: 600;
  letter-spacing: -.014em;
  line-height: 1.08;
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---- Cards & tiles --------------------------------------------------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: transform .2s var(--ease-out), box-shadow .2s; box-shadow: var(--shadow); }
a.card { color: inherit; text-decoration: none; display: block; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); text-decoration: none; }
.card-img { aspect-ratio: 16/10; width: 100%; object-fit: cover; background: var(--aqua-tint); }
.card-body { padding: var(--s3); }
.card h3 { font-size: 20px; margin-bottom: 8px; }
.card p { font-size: 15px; color: var(--ink-soft); margin: 0; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 11.5px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-text);
  background: var(--aqua-tint); padding: 4px 9px; border-radius: 6px; }
.tag--sand { color: var(--sand-text); background: var(--sand-tint); }
.tag--terracotta { color: #fff; background: var(--terracotta); }

/* Source/updated notes sit on the navy compact hero, so the default ink-grey
   .muted is unreadable there — lift it to the same tone the dark sections use. */
.hero-compact .muted { color: var(--on-deep-6); }

/* Hub square tiles — also used for the country grid, so the two read as one system */
/* 12 hubs → a deliberate 3 × 4 grid on desktop, with larger tiles than the old
   auto-fill layout. Steps down to 3, 2 and 1 columns on narrower screens. */
.hub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
@media (max-width: 1180px) { .hub-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .hub-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s2); } }
@media (max-width: 520px)  { .hub-grid { grid-template-columns: 1fr; } }
.hub-tile { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3;
  text-decoration: none; color: #fff; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s3) var(--s2) var(--s2); box-shadow: var(--shadow);
  transition: transform .22s var(--ease-out), box-shadow .22s; }
/* Layers use non-negative z-index so a transform on the tile (hover / scroll
   reveal) never drops the photo behind the tile's own stacking context. */
.hub-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  filter: saturate(.85) brightness(.92); transition: transform .5s var(--ease-out), filter .3s; }
/* Bottom-anchored scrim keeps the photo visible up top but the text crisp below. */
.hub-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; transition: opacity .3s;
  background: linear-gradient(178deg, rgb(6 26 44 / .10) 0%, rgb(6 26 44 / .34) 42%, rgb(6 26 44 / .92) 100%); }
.hub-tile .hub-icon-wrap, .hub-tile .hub-tile-txt { position: relative; z-index: 2; }
.hub-tile .hub-icon { width: 32px; height: 32px; margin-bottom: 10px; stroke: #fff;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / .5)); transition: stroke .2s; }
.hub-tile h3 { color: #fff; font-size: 19px; font-family: var(--font-ui); font-weight: 700; margin: 0;
  line-height: 1.18; letter-spacing: -.01em; text-shadow: 0 1px 3px rgb(0 0 0 / .55), 0 2px 16px rgb(0 0 0 / .5); }
.hub-tile .hub-sub { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: #E6F0F7;
  margin: 6px 0 0; line-height: 1.35; text-shadow: 0 1px 8px rgb(0 0 0 / .7); }
.hub-tile .data-chip { position: absolute; top: 10px; right: 10px; z-index: 2; font-family: var(--font-ui); font-size: 11px;
  font-weight: 600; background: rgb(6 182 212 / .95); color: #062a33; padding: 3px 8px; border-radius: 5px; letter-spacing: .03em; }
/* Hover / focus: the tile lights up — photo brightens and zooms, scrim eases,
   an accent bar slides in and the title turns cyan. */
.hub-tile::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease-out); }
.hub-tile:hover, .hub-tile:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-lift); text-decoration: none; outline: none; }
.hub-tile:hover img, .hub-tile:focus-visible img { transform: scale(1.07); filter: saturate(1) brightness(1.06); }
.hub-tile:hover::after, .hub-tile:focus-visible::after { opacity: .82; }
.hub-tile:hover::before, .hub-tile:focus-visible::before { transform: scaleX(1); }
.hub-tile:hover h3, .hub-tile:focus-visible h3 { color: #7FE0F0; }

/* ---- Stats / count-up ------------------------------------------------ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.stat { text-align: center; }
.stat .num { font-family: var(--font-ui); font-weight: 700; font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1; color: var(--blue-primary); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.section--deep .stat .num { color: var(--cyan); }
.stat .label { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; max-width: 22ch; margin-inline: auto; }
.section--deep .stat .label { color: var(--on-deep-6); }
@media (max-width: 720px) { .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s2); } }

/* ---- Data band (homepage) ------------------------------------------- */
.tool-card { background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .14); border-radius: var(--radius);
  padding: var(--s3); text-decoration: none; color: #fff; display: flex; flex-direction: column; transition: transform .2s var(--ease-out), background .2s; }
.tool-card:hover { transform: translateY(-4px); background: rgb(255 255 255 / .1); text-decoration: none; }
.tool-card .t-icon { width: 26px; height: 26px; stroke: var(--cyan); flex-shrink: 0; }
.tool-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tool-card h3 { color: #fff; font-size: 18px; margin: 0; }
.tool-card p { color: var(--on-deep-5); font-size: 14px; margin: 0; font-family: var(--font-ui); }
.tool-stat { margin-top: auto; padding-top: var(--s3); }
.tool-stat .num { font-family: var(--font-ui); font-weight: 700; font-size: clamp(26px, 3vw, 34px); color: var(--cyan);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; display: block; }
.tool-stat-label { font-family: var(--font-ui); font-size: 12.5px; color: var(--on-deep-6); margin-top: 5px; display: block; }
/* Landing-page variant: a kind label on the left, an "open" affordance on the right */
.tool-card .tool-stat:has(.tool-go) { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgb(255 255 255 / .14); margin-top: auto; }
.tool-go { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--cyan);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tool-go svg { transition: transform .2s var(--ease-out); }
.tool-card:hover .tool-go svg { transform: translateX(3px); }

/* ---- Pull quote ------------------------------------------------------ */
.pullquote { border-left: 3px solid var(--terracotta); padding-left: var(--s3); margin: var(--s4) 0;
  font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.4; color: var(--blue-deep); }
.pullquote cite { display: block; font-family: var(--font-ui); font-style: normal; font-size: 13px;
  font-weight: 600; color: var(--ink-soft); margin-top: 12px; letter-spacing: .02em; }

/* ---- Figures --------------------------------------------------------- */
figure { margin: var(--s4) 0; }
figure img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; }
figcaption { font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); margin-top: 10px; line-height: 1.5; }

/* ---- Reviewer / sponsor chips --------------------------------------- */
.reviewer-chip { display: inline-flex; align-items: center; gap: 10px; }
.reviewer-chip img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--white); box-shadow: var(--shadow); }
.reviewer-chip .rc-name { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--ink); }
.reviewer-chip .rc-role { font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft); }
.reviewer-chip .rc-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); font-weight: 700; }

.sponsor-band { background: var(--sand-tint); border-block: 1px solid var(--sand); }
.sponsor-band .container { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding-block: var(--s2); }
.sponsor-logo { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--sand-deep); white-space: nowrap; }
.sponsor-text { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-soft); max-width: 60ch; }
.sponsor-disclosure { font-family: var(--font-ui); font-size: 11.5px; color: var(--sand-deep); font-style: italic; }

/* ---- Report layout (scrollspy) -------------------------------------- */
.report-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--s5); align-items: start; }
.report-layout > * { min-width: 0; }
.report-nav { position: sticky; top: 90px; }
.report-nav ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border); }
.report-nav a { display: block; font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-soft);
  padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; }
.report-nav a:hover { color: var(--blue-text); }
.report-nav a.active { color: var(--blue-deep); font-weight: 600; border-left-color: var(--cyan); }
.report-section { scroll-margin-top: 90px; margin-bottom: var(--s6); }
.report-section h2 { font-size: 30px; margin-bottom: var(--s3); padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.report-body { font-size: 17.5px; }
.report-body h3 { font-size: 21px; margin-top: var(--s4); }
.report-body h4.prose-h { font-size: 17.5px; font-weight: 700; margin: 24px 0 6px; line-height: 1.35; }
.report-body p { margin-bottom: var(--s3); }
@media (max-width: 1024px) {
  .report-layout { grid-template-columns: 1fr; gap: var(--s3); }
  .report-nav { position: sticky; top: 62px; z-index: var(--z-sticky); background: var(--paper);
    margin-inline: calc(-1 * var(--s3)); padding: 10px var(--s3); border-bottom: 1px solid var(--border); }
  .report-nav ul { display: flex; gap: 6px; overflow-x: auto; border-left: 0; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .report-nav a { white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; margin: 0; }
  .report-nav a.active { border-color: var(--cyan); background: var(--aqua-tint); }
}

/* ---- Callout / big number ------------------------------------------- */
.callout { background: var(--aqua-tint); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s3); margin: var(--s4) 0; }
.callout .big { font-family: var(--font-ui); font-weight: 700; font-size: 38px; color: var(--blue-deep);
  line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.callout .big-label { font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); margin-top: 8px; }
.callout-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: var(--s4) 0; }
.callout-row .callout { margin: 0; }
@media (max-width: 640px) { .callout-row { grid-template-columns: 1fr; } }

/* ---- Charts (inline SVG) -------------------------------------------- */
.chart-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); margin: var(--s4) 0; }
/* in-text charts (demand-by-sector, supply mix) kept to a comfortable width on wide pages */
/* batch 3 (18 Oct 2026): the text of a chart block is as wide as the prose around it (860px); the chart card keeps its 600px */
.chart-inline { max-width: 860px; margin: 18px 0 8px; }
.chart-inline .chart-card { margin-top: 12px; max-width: 600px; }
/* keep report prose to a readable measure even on the wide layout; charts/tables span full width */
.report-body > p, .report-body > h3, .report-body > h4, .report-body > ul, .report-body > ol { max-width: 860px; }
.chart-card h3, .chart-card .chart-title, .report-body .chart-card p.chart-title { font-family: var(--font-ui); font-size: 17.5px; font-weight: 600; line-height: 1.35; color: var(--ink); margin: 0 0 4px; }
.chart-card .chart-src { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 0; }
.chart-card .chart-sub { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft); margin-bottom: var(--s2); }
.js .bar-rect { transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--ease-out); }
.js .bar-rect.in { transform: scaleX(1); }
.js .bar-vrect { transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease-out); }
.js .bar-vrect.in { transform: scaleY(1); }
.js .line-path { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.6s var(--ease-out); }
.js .line-path.in { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .bar-rect, .js .bar-vrect { transform: none!important; }
  .js .line-path { stroke-dashoffset: 0!important; }
}

/* ---- Market snapshot -------------------------------------------------- */
.snapshot { background: linear-gradient(180deg, var(--aqua-tint), #fff); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s4); }
.snapshot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); }
.snap-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s3); }
.snap-card h3 { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.snap-list { list-style: none; padding: 0; margin: 0; font-family: var(--font-ui); font-size: 14px; }
.snap-list li { padding: 5px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 10px; }
.snap-list li:last-child { border-bottom: 0; }
.snap-list .role { color: var(--ink-soft); font-size: 12px; }

/* Snapshot dashboard (rich country reports) */
.kpi-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-bottom: var(--s3); }
.kpi-band > * { min-width: 0; }
.kpi-band .callout { margin: 0; padding: 18px 16px; }
.kpi-band .callout .big { font-size: clamp(26px, 3.4vw, 38px); }
.kpi-band .callout .big-label { font-size: 12.5px; margin-top: 6px; line-height: 1.4; }
.kpi-band--2 { grid-template-columns: repeat(2, 1fr); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); }
.dash-grid > * { min-width: 0; margin: 0; }
.dash-grid .chart-card h3, .dash-grid .chart-card .chart-title, .dash-grid .snap-card h3 { margin-bottom: 6px; }
.dash-grid svg { max-width: 100%; height: auto; }
@media (max-width: 860px) { .kpi-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kpi-band { grid-template-columns: 1fr; } }

/* Water-stress gauge */
.gauge { text-align: center; }
.gauge svg { width: 160px; height: 96px; margin-inline: auto; }
.gauge .g-val { font-family: var(--font-ui); font-weight: 700; font-size: 28px; color: var(--blue-deep);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gauge .g-cat { font-family: var(--font-ui); font-size: 13px; font-weight: 600; }

/* Governance indicator cards (political stability / investment climate) */
.wgi-card { display: flex; flex-direction: column; }
.wgi-val { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 12px; }
.wgi-val b { font-family: var(--font-ui); font-weight: 700; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wgi-val span { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft); }
.wgi-track { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.wgi-fill { display: block; height: 100%; border-radius: 999px; }
.js .snapshot.in .wgi-fill { animation: srgrow 1.1s var(--ease-out) both; }
.wgi-cap { font-family: var(--font-ui); font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); margin: 10px 0 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--font-ui); font-size: 13px; color: var(--ink); background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
a.chip:hover { border-color: var(--blue-text); color: var(--blue-text); text-decoration: none; }

.dual-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 640px) { .dual-col { grid-template-columns: 1fr; } }
.icon-list { list-style: none; padding: 0; margin: 0; }
/* Block layout with the icon placed in the gutter: text, links and citation markers stay in one line of
   running prose (a flex row split each marker off as a separate trailing item). */
.icon-list li { position: relative; display: block; padding: 10px 0 10px 32px; font-size: 15px; }
.icon-list li:not(:has(> svg:first-child)) { padding-left: 0; }
.icon-list svg { position: absolute; left: 0; top: 13px; width: 20px; height: 20px; stroke: var(--blue-primary); }

/* ---- Status chips (data) -------------------------------------------- */
.status { font-family: var(--font-ui); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--operational { color: #1E6E4C; background: #E3F3EC; }
.status--construction { color: #2E85B8; background: #E3F1F9; }
.status--tender { color: #A2502C; background: #F7E9E1; }
.status--planned { color: #6B5B8A; background: #EEE9F5; }
.status--in-force { color: #1E6E4C; background: #E3F3EC; }
.status--draft { color: #7A6A2E; background: #F5EFDD; }
.status--revision { color: #A2502C; background: #F7E9E1; }
.status--stopped { color: #5A6570; background: #EDF0F2; }

/* ---- Regulatory matrix ---------------------------------------------- */
.reg-matrix { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 14px; }
.reg-matrix th, .reg-matrix td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.reg-matrix th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 600; }
.reg-matrix td.reg-name { font-weight: 600; color: var(--ink); }

/* ---- Data tables & tools -------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: end; margin-bottom: var(--s3); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; max-width: 100%; }
.field select { max-width: 100%; text-overflow: ellipsis; }
.field label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-soft); letter-spacing: .03em; }
.field select, .field input { font-family: var(--font-ui); font-size: 14px; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; color: var(--ink); min-width: 150px; min-height: 42px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { font-family: var(--font-ui); font-size: 13px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--ink); cursor: pointer; }
.filter-chip[aria-pressed="true"] { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.data-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 13.5px; min-width: 720px; }
.data-table th { text-align: left; padding: 13px 14px; background: var(--aqua-tint); color: var(--blue-deep);
  font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; white-space: nowrap; }
.data-table th[aria-sort] { cursor: pointer; }
.data-table th[aria-sort]:hover { color: var(--blue-text); }
.data-table th[aria-sort] .sort-ind::after { content: "↕"; opacity: .4; margin-left: 4px; }
.data-table th[aria-sort="ascending"] .sort-ind::after { content: "↑"; opacity: 1; }
.data-table th[aria-sort="descending"] .sort-ind::after { content: "↓"; opacity: 1; }
/* sortable static tables (js/tablesort.js): the header text sits in a button so it takes keyboard focus */
.data-table .th-sort { all: unset; box-sizing: border-box; display: inline; cursor: pointer; font: inherit; color: inherit;
  text-align: inherit; letter-spacing: inherit; text-transform: inherit; }
.data-table .th-sort:hover { color: var(--blue-text); }
.data-table .th-sort:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; border-radius: 2px; }
.data-table .th-sort .sort-ind::after { white-space: nowrap; }
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr { transition: background .15s; }
.data-table tbody tr:hover { background: var(--aqua-tint); }
.data-table tbody tr.expandable { cursor: pointer; }
.data-table .num { font-variant-numeric: tabular-nums; text-align: right; }
/* Main-rivers table on the country pages (batch 1, 16 Oct 2026): fits the content width without a scroll bar;
   headers may wrap, padding and the numeric columns are tighter. The scroll frame stays on phones. */
.data-table--rivers { min-width: 0; }
.data-table--rivers th { white-space: normal; padding: 11px 10px; font-size: 11.5px; letter-spacing: .02em; line-height: 1.3; vertical-align: bottom; }
.data-table--rivers td { padding: 10px 10px; }
.data-table--rivers td.tabnum { font-size: 13px; white-space: nowrap; }
@media (max-width: 640px) { .data-table--rivers { min-width: 560px; } }
/* Largest plants and conveyors in the register, country Infrastructure sections (batch 1, step 5b, 16 Oct 2026):
   compact like the rivers table; the rest of the list folds into .infra-more */
.data-table--infra { min-width: 0; }
.data-table--infra th { white-space: normal; padding: 11px 10px; font-size: 11.5px; letter-spacing: .02em; line-height: 1.3; vertical-align: bottom; }
.data-table--infra th:first-child { width: 38%; }
.data-table--infra td { padding: 9px 10px; vertical-align: top; }
.data-table--infra td.yr { white-space: nowrap; }
.infra-wrap { margin-top: 16px; }
.infra-more { margin: 8px 0 0; }
.infra-more > summary { cursor: pointer; font-family: var(--font-ui); font-size: 12.5px; color: var(--blue-primary); font-weight: 600; padding: 4px 2px; }
.infra-more > summary:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; border-radius: 2px; }
.infra-more > .infra-wrap { margin-top: 6px; }
@media (max-width: 640px) { .data-table--infra { min-width: 600px; } .data-table--infra td.reg-name { min-width: 170px; }
  .infra-more > summary { min-height: 44px; padding-block: 10px; } }
.detail-row td { background: var(--sand-tint); padding: var(--s3); }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s2) var(--s4); }
.detail-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 600; }
.detail-grid dd { margin: 2px 0 0; font-size: 14px; color: var(--ink); }

/* The market briefs' "How to bid" table is a label/value list, not a dataset:
   no minimum width, no sticky header, and the label column carries the weight. */
.access-table { min-width: 0; }
.access-table th[scope="row"] { position: static; white-space: normal; width: 34%; vertical-align: top;
  background: var(--sand-tint); text-transform: none; letter-spacing: 0; font-size: 12.5px;
  line-height: 1.45; border-right: 1px solid var(--border); }
.access-table td { vertical-align: top; line-height: 1.55; }
@media (max-width: 560px) {
  .access-table th[scope="row"] { width: 42%; }
}

.result-count { font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); margin-bottom: var(--s2); }

/* ---- Pro locks ------------------------------------------------------- */
.pro-lock { position: relative; }
.pro-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: 10px;
  font-weight: 700; letter-spacing: .05em; color: #fff; background: var(--pro-gold); padding: 2px 7px; border-radius: 5px; }
.pro-badge svg { width: 11px; height: 11px; }
.locked-value { position: relative; }
.locked-value .blurred { filter: blur(5px); user-select: none; pointer-events: none; opacity: .7; }
.lock-btn { background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 5px; color: var(--pro-gold);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; }
.lock-btn svg { width: 13px; height: 13px; }
.pro-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; background: linear-gradient(180deg, rgb(253 252 250 / .4), rgb(253 252 250 / .92));
  border-radius: var(--radius); backdrop-filter: blur(2px); padding: var(--s3); }

/* ---- Dialog ---------------------------------------------------------- */
.dialog-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgb(11 32 43 / .5);
  display: flex; align-items: center; justify-content: center; padding: var(--s3);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.dialog-backdrop.open { opacity: 1; visibility: visible; }
.dialog { background: #fff; border-radius: var(--radius); max-width: 420px; width: 100%; padding: var(--s4);
  box-shadow: var(--shadow-lift); transform: scale(.96); transition: transform .2s var(--ease-out); }
.dialog-backdrop.open .dialog { transform: scale(1); }
.dialog h3 { font-size: 22px; }
.dialog .pro-badge { margin-bottom: var(--s2); }
.dialog-close { position: absolute; }

/* ---- Toast ----------------------------------------------------------- */
.toast { position: fixed; bottom: var(--s3); left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--blue-deep); color: #fff; padding: 12px 20px; border-radius: 999px; font-family: var(--font-ui);
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lift); z-index: var(--z-modal); opacity: 0;
  transition: opacity .25s, transform .25s var(--ease-out); pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Dashboard ------------------------------------------------------- */
.dashboard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); }
.dash-head { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: space-between; margin-bottom: var(--s3); }
.metric-toggle { display: inline-flex; background: var(--aqua-tint); border-radius: 999px; padding: 3px; gap: 2px; }
.metric-toggle button { border: 0; background: none; font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; color: var(--ink-soft); }
.metric-toggle button[aria-pressed="true"] { background: #fff; color: var(--blue-deep); box-shadow: var(--shadow); }
.dash-body { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s4); align-items: start; }
.dash-body > * { min-width: 0; }
@media (max-width: 860px) { .dash-body { grid-template-columns: 1fr; } }
/* map-only variant (homepage sample dashboard) */
.dash-body--map { grid-template-columns: 1fr; }
.dash-body--map .choropleth { width: 100%; max-width: none; margin-inline: auto; }
.dash-body--map .choropleth svg { display: block; width: 100%; }
.choropleth svg { width: 100%; height: auto; }
.choropleth .geo { stroke: #fff; stroke-width: 1.2; transition: fill .3s, opacity .3s; cursor: pointer; }
.choropleth .geo:hover, .choropleth .geo:focus-visible { opacity: .85; stroke: var(--blue-deep); stroke-width: 2; outline: none; }
.legend { display: flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft); margin-top: var(--s2); flex-wrap: wrap; }
.legend .swatch { width: 22px; height: 12px; border-radius: 2px; display: inline-block; }
.map-tooltip { position: fixed; z-index: var(--z-drop); background: var(--blue-deep); color: #fff; font-family: var(--font-ui);
  font-size: 12.5px; padding: 8px 12px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .15s; max-width: 220px; box-shadow: var(--shadow-lift); }
.map-tooltip.show { opacity: 1; }
.map-tooltip strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }

/* ---- Region atlas ---------------------------------------------------- */
.atlas-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--s4); align-items: start; }
.atlas-panel { position: sticky; top: 80px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); }
.layer-group { margin-bottom: var(--s3); }
.layer-group h2 { font-family: var(--font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin-bottom: 10px; }
.layer-toggle { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-family: var(--font-ui); font-size: 14px; cursor: pointer; }
.layer-toggle input { width: 18px; height: 18px; accent-color: var(--blue-primary); }
.layer-toggle.disabled { opacity: .5; cursor: not-allowed; }
.layer-swatch { width: 14px; height: 14px; border-radius: 3px; }
.atlas-stage { background: linear-gradient(180deg, #EAF3F8, #DCEBF3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s2); position: relative; overflow: hidden; }
.atlas-stage svg { width: 100%; height: auto; touch-action: pan-x pan-y; }
/* Region Atlas: the stage hugs the map (no empty band under it), and the SVG lets zoomed content run
   into the stage padding instead of stopping at a hard edge. On a phone the map gets a taller window
   (letterboxed at rest) so there is room to pinch in. js/atlas.js converts with getScreenCTM. */
#atlas-stage > svg { display: block; overflow: visible; }
#atlas-stage:not(:has(> svg)) { min-height: 360px; }
@media (max-width: 640px) { #atlas-stage > svg { height: min(250px, 66vw); } }
.atlas-controls { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.atlas-controls button { width: 38px; height: 38px; border: 1px solid var(--border); background: #fff; border-radius: 8px;
  font-size: 18px; color: var(--blue-deep); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.atlas-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.atlas-stat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; }
.atlas-stat .as-num { font-family: var(--font-ui); font-weight: 700; font-size: 24px; color: var(--blue-primary); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.atlas-stat .as-label { font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft); }
@media (max-width: 640px) { .atlas-stats { grid-template-columns: repeat(2, 1fr); } }
.atlas-marker { cursor: pointer; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.atlas-marker:hover, .atlas-marker:focus-visible { transform: scale(1.4); outline: none; }
/* Countries are fill only; js/atlas.js sets an edge in the fill colour (closes hairline seams).
   Borders are ONE mesh path drawn once per edge, and the hover outline is its own path on top,
   so no neighbour paints over half of it (lessons from the Travel Risk Atlas, batch 2). Both are
   measured in screen pixels and hold their width at any zoom. */
.atlas-geo { fill: #D3E3EC; stroke: #D3E3EC; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.atlas-geo:focus-visible { outline: none; }
.atlas-borders { fill: none; stroke: #fff; stroke-width: .9px; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas-hl { fill: none; stroke: #0B3C5D; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  pointer-events: none; }
.atlas-climate path { pointer-events: none; }
.atlas-lake, .atlas-area { vector-effect: non-scaling-stroke; }
/* wide invisible pointer target over each river, so thin tributaries can be hovered */
.atlas-hit { fill: none; stroke: transparent; stroke-width: 10px; vector-effect: non-scaling-stroke; pointer-events: stroke;
  stroke-linecap: round; cursor: pointer; outline: none; }
.atlas-pop { fill: rgb(11 60 93 / .16); stroke: rgb(11 60 93 / .55); stroke-width: 1px; vector-effect: non-scaling-stroke; cursor: default; }
.atlas-pop:hover, .atlas-pop:focus-visible { fill: rgb(11 60 93 / .3); outline: none; }
/* spiderfied clusters: leader lines from each true position to the fanned-out marker */
.atlas-spider line { stroke: #0B3C5D; stroke-opacity: .55; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.atlas-spider circle { fill: #0B3C5D; fill-opacity: .7; }
.layer-swatch--dam, .legend .swatch.swatch--dam { width: 14px; height: 14px; border: 0; box-shadow: none; background: none; border-radius: 0; }
.legend .swatch.swatch--pop { border-radius: 50%; background: rgb(11 60 93 / .16); border-color: rgb(11 60 93 / .55); }
#atlas-legend { flex-direction: column; align-items: flex-start; gap: 8px; }
.atlas-legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.atlas-legend-row > span { display: inline-flex; align-items: center; gap: 7px; }
.atlas-legend-h { font-weight: 600; color: var(--ink); }
/* non-scaling stroke: widths are screen pixels in the 3110-unit atlas viewBox and stay constant under zoom */
.atlas-river { fill: none; stroke: var(--cyan); stroke-width: 2.4; opacity: .8; vector-effect: non-scaling-stroke; }
/* Natural Earth rivers are surveyed lines and draw solid; the dashed pattern is reserved for the four
   editor-drawn schematic lines (Ruben, 12 Oct 2026), so the two read apart. Rank sets the weight:
   rank 1-3 full, 4-6 mid, 7-9 minor (js/atlas.js). */
.atlas-river--mid { stroke-width: 1.9; }
.atlas-river--minor { stroke-width: 1.4; }
.atlas-river--schematic { stroke-width: 1.8; stroke-dasharray: 5 4; stroke-linecap: round; opacity: .9; }
@keyframes flow { to { stroke-dashoffset: -28; } }
/* rivers and lakes light up under the pointer, on focus or on tap (as on the Shared Waters maps) */
.atlas-river, .atlas-lake { transition: stroke .12s, stroke-width .12s, opacity .12s, filter .12s; }
.atlas-river:focus, .atlas-lake:focus { outline: none; }
.atlas-river[data-hot="1"] { stroke: #0f4d78; stroke-width: 4; opacity: 1; filter: drop-shadow(0 0 2px rgb(15 77 120 / .45)); }
.atlas-lake[data-hot="1"] { filter: brightness(.88); stroke: #0f4d78; stroke-width: 2.2px; }
@media (max-width: 900px) {
  .atlas-layout { grid-template-columns: 1fr; }
  .atlas-panel { position: static; }
}

/* ---- Region map (homepage + country-hubs index) --------------------- */
#region-map:empty { min-height: 42vw; }   /* reserve space before JS renders; hugs the map after */
.regionmap { touch-action: pan-y; }
.regionmap-grat path { fill: none; stroke: #B9D2E2; stroke-width: 1.4; stroke-dasharray: 3 14; opacity: .7; }
/* Fill comes from the water-stress band, set per country in js/regionmap.js;
   declaring it here would override that attribute. */
.regionmap-geo { stroke: #FFFFFF; stroke-width: 1.5; transition: fill .2s, stroke .2s; }
.regionmap-geo:hover, .regionmap-geo.is-hl, .regionmap-geo:focus-visible { fill: var(--blue-deep); stroke: #fff; outline: none; }
.regionmap-leader { fill: none; stroke: #7C97A8; stroke-width: 1.1; stroke-dasharray: 3 3; }
.regionmap-dot { fill: var(--blue-deep); stroke: #fff; stroke-width: 2.4; transition: fill .18s; }
.regionmap-dot.is-hl { fill: var(--cyan); }
.regionmap-hit { fill: transparent; }
/* Premium, tracked map labels with a soft halo so they read on land and sea. */
/* Labels were 30 units in a 3030-unit viewBox — under 10px rendered, which is
   most of why the map read as cheap. Tracked small-caps at 42 units ≈ 13px. */
.regionmap-label { font-family: var(--font-ui); font-weight: 650; font-size: 42px; fill: #2E4C63;
  letter-spacing: .22em; text-transform: uppercase;
  paint-order: stroke; stroke: rgb(250 253 255 / .88); stroke-width: 7px; stroke-linejoin: round;
  -webkit-user-select: none; user-select: none; transition: fill .18s; }
.regionmap-label.pulled { font-size: 40px; letter-spacing: .16em; }
/* On hover the country darkens: inline labels flip to white, pulled labels take the accent. */
.regionmap-label.is-hl:not(.pulled) { fill: #fff; stroke: var(--blue-deep); stroke-width: 5px; }
.regionmap-label.pulled.is-hl { fill: var(--terracotta); }
/* Mobile: the map is a compact overview — keep only the easy-to-miss small
   states labelled (big countries are large enough to tap directly). */
@media (max-width: 700px) {
  .regionmap-label:not(.pulled) { display: none; }
  .regionmap-label.pulled { font-size: 74px; }
  .regionmap-dot { r: 16; }
  .regionmap-leader { stroke-width: 2.4; }
}

/* ---- Country map (per-report) --------------------------------------- */
.country-map-wrap { background: #EAF3F8; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; overflow: hidden; }
/* overflow: clip keeps the rounded card tidy without making the card a scroll
   container, which would stop the layer switch below from sticking. */
@supports (overflow: clip) { .country-map-wrap { overflow: clip; } }
/* Layer switch: a labelled segmented control above the map that stays in view
   (sticky within the map card) while the map is on screen. */
.cmap-switch { position: sticky; top: 72px; z-index: 6; display: flex; align-items: center; gap: 10px 14px;
  flex-wrap: wrap; margin: -12px -12px 12px; padding: 10px 12px;
  background: rgb(255 255 255 / .94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.cmap-switch-label { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue-deep); display: inline-flex; align-items: center; gap: 6px; flex: none; }
.cmap-switch-label svg { flex: none; }
.cmap-switch .metric-toggle { flex-wrap: wrap; background: #E3EEF4; margin: 0; }
.cmap-switch .metric-toggle button { padding: 7px 14px; color: #3A5466; cursor: pointer; }
.cmap-switch .metric-toggle button:hover { color: var(--blue-deep); background: rgb(255 255 255 / .6); }
.cmap-switch .metric-toggle button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.cmap-switch .metric-toggle button[aria-pressed="true"] { background: var(--blue-deep); color: #fff; box-shadow: none; }
.cmap-sep { align-self: center; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #7C8B96; padding: 0 6px 0 12px; margin-left: 4px; border-left: 1px solid #C9D6DE; }
/* Sub-switch (batch 2, 18 Oct 2026): "Water risk" and "Shared waters" each open a
   row of chips, one indicator or layer at a time (js/countryviews.js, js/jordanmap.js). */
.cmap-sub { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px;
  margin-top: -2px; border-top: 1px dashed #D3DEE5; }
.cmap-sub[hidden] { display: none; }
.cmap-sub-label { font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #7C8B96; margin-right: 4px; }
.cmap-chip { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.2; padding: 5px 11px; border-radius: 999px;
  border: 1px solid #C3D2DC; background: #fff; color: #3A5466; cursor: pointer; }
.cmap-chip:hover { border-color: var(--blue-deep); color: var(--blue-deep); }
.cmap-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.cmap-chip[aria-pressed="true"] { background: #DCEBF4; border-color: var(--blue-deep); color: var(--blue-deep); font-weight: 600; }
/* Shared-waters outlines and their name list under the map */
#country-map .cm-area { cursor: pointer; outline: none; transition: fill-opacity .15s ease; }
#country-map .cm-area:hover, #country-map .cm-area.is-hot, #country-map .cm-area:focus-visible {
  fill-opacity: .5; stroke-opacity: 1; stroke-width: 2.5px !important; vector-effect: non-scaling-stroke; }
.cmap-shnames { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.cmap-shname { font-family: var(--font-ui); font-size: 12px; line-height: 1.3; padding: 3px 9px; border-radius: 6px;
  border: 1px solid #D3DEE5; background: #fff; color: #3A5466; cursor: pointer; text-align: left; }
.cmap-shname:hover, .cmap-shname:focus-visible { border-color: var(--blue-deep); color: var(--blue-deep); outline: none; }
@media (max-width: 1024px) { .cmap-switch { top: 122px; } }
@media (max-width: 700px) {
  /* one scrolling row on a phone, so the switch does not eat half the map */
  .cmap-switch { gap: 6px; padding: 8px 10px; }
  .cmap-switch .metric-toggle { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; border-radius: 12px; }
  .cmap-switch .metric-toggle::-webkit-scrollbar { display: none; }
  .cmap-switch .metric-toggle button { white-space: nowrap; flex: none; padding: 7px 12px; }
  .cmap-sep { white-space: nowrap; }
  .cmap-sub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 6px; }
  .cmap-sub::-webkit-scrollbar { display: none; }
  .cmap-chip { white-space: nowrap; flex: none; }
  .cmap-sub-label { display: none; }
}
/* Chart switch (country_depth._chart_switch): one chart at a time, e.g. annual
   rainfall / annual temperature on the country profiles. */
.chart-switch { margin: 0 0 var(--s3); }
.chart-switch-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.chart-switch-label { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue-deep); }
.chart-switch .metric-toggle button { cursor: pointer; }
.chart-switch .metric-toggle button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.chart-switch .metric-toggle button[aria-pressed="true"] { background: var(--blue-deep); color: #fff; box-shadow: none; }
.js .chart-switch-pane[data-off] { display: none; }
/* Rivers and lakes light up on hover, focus or tap, as on the region atlas
   (.atlas-river[data-hot] / .atlas-lake[data-hot] above). --hotw is set by the
   script: 4px, or a little wider than the river already is on screen. */
#country-map .cm-water { cursor: pointer; outline: none; }
#country-map path.cm-wriver.is-hot, #country-map .cm-wriver.is-hot > .cm-wvis {
  stroke: #0f4d78 !important; stroke-opacity: 1 !important; stroke-dasharray: none !important;
  stroke-width: var(--hotw, 4px) !important; vector-effect: non-scaling-stroke; }
#country-map .cm-wlake.is-hot { filter: brightness(.88); stroke: #0f4d78 !important;
  stroke-width: 2.5px !important; stroke-dasharray: none !important; vector-effect: non-scaling-stroke; }
#country-map { min-height: 280px; }
#country-map svg { width: 100%; height: auto; display: block; }
.js .cm-river { stroke-dasharray: 7 5; animation: flow 2.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .js .cm-river { animation: none; } }
/* Country map symbols (js/countryviews.js, js/jordanmap.js, js/countrymap.js).
   --zk is the per-zoom symbol scale set by the zoom handler; icons that overlap
   at the current zoom get .is-ov and turn translucent; hover lifts an icon. */
#country-map .zk, #country-map .cm-pt { transform-box: fill-box; transform-origin: center; }
#country-map .zk { transform: scale(var(--zk, 1)); }
#country-map .cm-pt { transition: transform .18s ease, opacity .18s ease, filter .18s ease; }
#country-map .cm-pt.is-ov { opacity: .66; }
#country-map .cm-pt:hover, #country-map .cm-pt:focus-visible, #country-map .cm-pt.is-hot {
  opacity: 1; transform: scale(calc(var(--zk, 1) * 1.35)); filter: brightness(1.18) saturate(1.15); outline: none; }
#country-map .cm-lab { opacity: .72; transition: opacity .18s ease; }
#country-map .cm-lab text { font-weight: 500; pointer-events: visibleFill; }
#country-map .cm-lab:hover, #country-map .cm-lab.is-hot { opacity: 1; }
#country-map .cm-lab:hover text, #country-map .cm-lab.is-hot text { font-weight: 700; }
#country-map .cm-zooming .cm-pt { transition: none; }
/* Conveyors, pipelines and carriers: <g class="cm-line"> = wide invisible hit
   stroke (screen pixels, so easy to hover and tap at any zoom) + the visible
   line, whose width is --lw (design width) x --zs (the zoom's line scale). */
#country-map .cm-line { cursor: pointer; outline: none; }
#country-map .cm-hit { fill: none; stroke: transparent; stroke-width: 16px; stroke-linecap: round;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: stroke; }
@media (pointer: coarse) { #country-map .cm-hit { stroke-width: 28px; } }
#country-map .cm-line-vis { stroke-width: calc(var(--lw, 2) * var(--zs, 1) * 1px); pointer-events: none;
  transition: stroke-width .18s ease, stroke .18s ease; }
#country-map .cm-line:hover .cm-line-vis, #country-map .cm-line:focus-visible .cm-line-vis,
#country-map .cm-line.is-hot .cm-line-vis { stroke: var(--lh, #B8321C); stroke-width: calc(var(--lw, 2) * var(--zs, 1) * 1.6px); }
#country-map .cm-zooming .cm-line-vis { transition: none; }
@media (prefers-reduced-motion: reduce) { #country-map .cm-pt, #country-map .cm-lab, #country-map .cm-line-vis { transition: none; } }
.country-map-layers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.country-map-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; font-family: var(--font-ui);
  font-size: 12px; color: var(--ink-soft); align-items: center; }
.country-map-legend > span { display: inline-flex; align-items: center; }
/* colour chips for the climate/drought aridity ramp (were unstyled → invisible) */
.country-map-legend .swatch { display: inline-block; flex-shrink: 0; width: 20px; height: 13px;
  border-radius: 3px; margin-right: 7px; border: 1px solid rgb(0 0 0 / .12); }

/* ---- Explorer -------------------------------------------------------- */
.explorer-search { display: flex; flex-wrap: wrap; gap: var(--s2); background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s3); box-shadow: var(--shadow); }
.explorer-search .field { flex: 1; min-width: 180px; }
.answer-panel { margin-top: var(--s4); }
.answer-head { background: var(--blue-deep); color: #fff; border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s3); }
.answer-head h2 { color: #fff; }
.answer-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s3); margin-top: var(--s3); }
.answer-stats .num { font-family: var(--font-ui); font-weight: 700; font-size: 30px; color: var(--cyan); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.answer-stats .label { font-family: var(--font-ui); font-size: 12.5px; color: var(--on-deep-6); }
@media (max-width: 720px) { .answer-stats { grid-template-columns: repeat(2,1fr); gap: var(--s3); } }
.answer-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--s3); }
.example-chip { font-family: var(--font-ui); font-size: 14px; }

/* ---- Story ----------------------------------------------------------- */
.story-chapter { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; }
.story-chapter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.js .story-chapter.in img { animation: kenburns 16s ease-out forwards; }
.story-chapter::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(4 20 32 / .3), rgb(4 20 32 / .85)); }
.story-content { max-width: 640px; padding: var(--s6) var(--s3); }
.story-num { font-family: var(--font-ui); font-size: 14px; letter-spacing: .3em; color: var(--cyan); }
.story-content h2 { color: #fff; font-size: clamp(32px, 6vw, 60px); margin: var(--s2) 0; }
.story-content p { font-size: 18px; color: var(--on-deep-2); }
.story-stat { font-family: var(--font-ui); font-weight: 700; font-size: 36px; color: var(--cyan); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.story-progress { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: var(--z-sticky);
  display: flex; flex-direction: column; gap: 12px; }
.story-progress a { width: 11px; height: 11px; border-radius: 50%; background: rgb(255 255 255 / .4); border: 1px solid rgb(255 255 255 / .6); }
.story-progress a.active { background: var(--cyan); border-color: var(--cyan); transform: scale(1.3); }
@media (max-width: 640px) { .story-progress { display: none; } }
.story-river { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.story-river path { fill: none; stroke: rgb(6 182 212 / .55); stroke-width: 3; stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.js .story-chapter.in .story-river path { transition: stroke-dashoffset 2.4s var(--ease-out); stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .js .story-chapter.in .story-river path { stroke-dashoffset: 0; } .js .story-chapter.in img { animation: none; } }

/* ---- Long-form story (Tigris–Euphrates) ----------------------------- */
.story-chapter::after {
  background:
    linear-gradient(180deg, rgb(4 18 30 / .26) 0%, rgb(4 18 30 / .40) 44%, rgb(4 18 30 / .90) 100%),
    linear-gradient(90deg, rgb(4 18 30 / .55) 0%, rgb(4 18 30 / .12) 58%, rgb(4 18 30 / 0) 100%);
}
.story-content { max-width: 680px; }
.story-content h2 { letter-spacing: -.02em; line-height: 1.04; text-shadow: 0 2px 30px rgb(0 0 0 / .45); text-wrap: balance; }
.story-content p { font-size: 18px; line-height: 1.65; color: #D7E5EF; text-shadow: 0 1px 14px rgb(0 0 0 / .45); }
.story-lede { font-size: clamp(19px, 2.1vw, 23px) !important; line-height: 1.5; color: #EAF2F8 !important; }
.story-statline { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: var(--s4);
  border-top: 1px solid rgb(255 255 255 / .22); padding-top: var(--s3); }
.story-statline .story-stat { margin: 0; }
.story-stat-label { font-family: var(--font-ui); font-size: 14px; line-height: 1.4; color: var(--on-deep-4); max-width: 32ch; }

/* Intro hero */
.story-hero { position: relative; min-height: 94vh; min-height: 94dvh; display: flex; align-items: center;
  color: #fff; overflow: hidden; isolation: isolate; }
.story-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.js .story-hero img { animation: kenburns 24s ease-out forwards; }
.story-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(4 18 30 / .52) 0%, rgb(4 18 30 / .58) 55%, rgb(4 18 30 / .82) 100%); }
.story-hero-inner { max-width: var(--container); margin-inline: auto; padding: var(--s6) var(--s3); width: 100%; }
.story-hero h1 { color: #fff; font-size: clamp(46px, 8.4vw, 96px); font-weight: 700; letter-spacing: -.026em;
  line-height: 1.0; max-width: 15ch; text-shadow: 0 3px 44px rgb(0 0 0 / .5); margin: var(--s3) 0 var(--s3); }
.story-hero-sub { font-size: clamp(18px, 2.3vw, 24px); line-height: 1.5; color: #E7F1F7; max-width: 52ch; }
.story-dateline { font-family: var(--font-ui); font-size: 13px; color: var(--on-deep-6); margin-top: var(--s4);
  border-top: 1px solid rgb(255 255 255 / .18); padding-top: var(--s3); max-width: 52ch; }
.story-scrollcue { font-family: var(--font-ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-deep-cyan); margin-top: var(--s4); display: inline-flex; align-items: center; gap: 10px; }
.story-scrollcue svg { width: 16px; height: 16px; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .story-scrollcue svg { animation: none; } }

/* ---- Long-form editorial chapters (Tigris story: text + data) ------- */
.sr { padding-block: clamp(56px, 8vw, 100px); }
.sr .container { max-width: 940px; }
.sr-label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-primary); margin: 0 0 12px; }
.sr h2 { font-size: clamp(28px, 4.4vw, 44px); letter-spacing: -.02em; line-height: 1.07; margin: 0 0 20px; max-width: 22ch; }
.sr-lead { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.55; color: var(--ink); max-width: 62ch; margin: 0 0 22px; }
.sr p { font-size: 18px; line-height: 1.75; color: var(--ink-soft); max-width: 66ch; margin: 0 0 var(--s3); }
.sr--dark { background: var(--blue-deep); }
.sr--dark .sr-label { color: var(--cyan); }
.sr--dark h2 { color: #fff; }
.sr--dark .sr-lead { color: var(--on-deep-1); }
.sr--dark p { color: var(--on-deep-4); }
.sr--sand { background: var(--sand-tint); }
.sr-note { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
.sr--dark .sr-note { color: var(--on-deep-7); }

.sr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3) var(--s4); margin: var(--s4) 0 var(--s2); }
.sr-stat { border-top: 2px solid var(--border); padding-top: 14px; }
.sr--dark .sr-stat { border-color: rgb(255 255 255 / .2); }
.sr-stat b { display: block; font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; font-size: clamp(26px, 3.4vw, 38px); color: var(--blue-primary); line-height: 1; }
.sr--dark .sr-stat b { color: var(--cyan); }
.sr-stat span { display: block; font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }
.sr--dark .sr-stat span { color: var(--on-deep-6); }
@media (max-width: 620px) { .sr-stats { grid-template-columns: repeat(2, 1fr); } }

.sr-tl { border-left: 2px solid var(--border); margin: var(--s4) 0; padding: 0; list-style: none; }
.sr-tl-item { position: relative; padding: 0 0 26px 28px; }
.sr-tl-item::before { content: ""; position: absolute; left: -8px; top: 4px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--blue-primary); border: 3px solid var(--paper); }
.sr-tl-item .yr { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--terracotta); }
.sr-tl-item h3 { font-family: var(--font-display); font-size: 19px; margin: 3px 0 6px; color: var(--blue-deep); }
.sr-tl-item p { font-size: 15.5px; margin: 0; max-width: 58ch; color: var(--ink-soft); }

.sr-bars { margin: var(--s4) 0; }
.sr-bars .cap { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 16px; text-transform: uppercase; letter-spacing: .05em; }
.sr-bar { display: grid; grid-template-columns: minmax(88px, 128px) 1fr auto; align-items: center; gap: 14px;
  margin-bottom: 12px; font-family: var(--font-ui); }
.sr-bar .lab { font-size: 14px; color: var(--ink); }
.sr-bar .track { height: 16px; background: var(--border); border-radius: 999px; overflow: hidden; }
.sr-bar .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--blue-primary)); }
.js .sr.in .sr-bar .fill { animation: srgrow 1.1s var(--ease-out) both; }
@keyframes srgrow { from { width: 0 !important; } }
.sr-bar .v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--blue-deep); white-space: nowrap; }
.sr--dark .sr-bars .cap { color: var(--on-deep-6); }
.sr--dark .sr-bar .lab { color: var(--on-deep-1); }
.sr--dark .sr-bar .track { background: rgb(255 255 255 / .14); }
.sr--dark .sr-bar .v { color: #fff; }

.sr-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; background: var(--sand-tint);
  border: 1px solid var(--sand); border-radius: var(--radius); padding: var(--s3) var(--s4); margin: var(--s4) 0; }
.sr-strip .big { font-family: var(--font-ui); font-weight: 700; font-size: clamp(34px, 5vw, 52px); color: var(--terracotta);
  line-height: 1; font-variant-numeric: tabular-nums; }
.sr-strip .txt { font-size: 15px; color: var(--ink-soft); max-width: 48ch; line-height: 1.5; }

.sr-gauge { margin: var(--s4) 0 var(--s2); max-width: 640px; }
.sr-gauge .marker { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.sr-gauge .marker b { color: var(--terracotta); }
.sr-gauge .bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; }
.sr-gauge .bar span { flex: 1; }
.sr-gauge .lbls { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: 11px;
  color: var(--on-deep-6); margin-top: 8px; }

/* Dense data figures: rather than shrink the labels to nothing on a phone,
   hold a readable minimum width and let the figure scroll inside itself. */
.lk-fig, .fg-fig, .fg-net { overflow-x: auto; overscroll-behavior-x: contain; }
.lk-fig > svg, .fg-fig > svg { min-width: 700px; }
.fg-net figure svg { min-width: 380px; }
@media (min-width: 780px) {
  .lk-fig > svg, .fg-fig > svg, .fg-net figure svg { min-width: 0; }
  .lk-fig, .fg-fig, .fg-net { overflow-x: visible; }
}

/* ---- Books / partners ------------------------------------------------ */
.book-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
@media (max-width: 860px) { .book-grid { grid-template-columns: repeat(2,1fr); } }
.book { text-decoration: none; color: inherit; }
.book:hover { text-decoration: none; }
.book-cover { aspect-ratio: 2/3; border-radius: 6px; padding: 18px 16px; display: flex; flex-direction: column;
  justify-content: space-between; color: #fff; box-shadow: var(--shadow); transition: transform .2s var(--ease-out); overflow: hidden; }
.book:hover .book-cover { transform: translateY(-5px) rotate(-1deg); }
.book-cover .bc-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.2; }
.book-cover .bc-author { font-family: var(--font-ui); font-size: 11px; opacity: .85; }
.book-meta { font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft); margin-top: 10px; }
.book-meta .amz { color: var(--terracotta); font-weight: 600; }

.partner-logos { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: center; }
.partner-logo { font-family: var(--font-ui); font-weight: 700; font-size: 17px; color: #9FB1BC; letter-spacing: .01em;
  filter: grayscale(1); transition: color .2s, filter .2s; }
.partner-logo:hover { color: var(--blue-primary); filter: none; }

/* ---- Cover (annual report) ------------------------------------------ */
.report-cover { background: radial-gradient(120% 100% at 50% 0%, #14507A 0%, var(--blue-deep) 55%, #06263B 100%); color: #fff; text-align: center; }
.report-cover .year { font-family: var(--font-ui); font-weight: 700; font-size: clamp(80px, 20vw, 200px); line-height: .9;
  color: #fff; letter-spacing: -.02em; }
.report-cover .cyan-rule { width: 90px; height: 3px; background: var(--cyan); margin: var(--s3) auto; }

/* ---- Membership tiers ----------------------------------------------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); align-items: start; }
@media (max-width: 860px) { .tier-grid { grid-template-columns: 1fr; } }
.tier { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); }
.tier.featured { border-color: var(--pro-gold); border-width: 2px; box-shadow: 0 12px 40px rgb(176 138 62 / .15); position: relative; }
.tier.featured::before { content: "Most popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--pro-gold); color: #fff; font-family: var(--font-ui); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.tier h3 { font-size: 22px; }
.tier .price { font-family: var(--font-ui); font-weight: 700; font-size: 38px; color: var(--blue-deep); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tier .price small { font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.tier ul { list-style: none; padding: 0; margin: var(--s3) 0; font-family: var(--font-ui); font-size: 14px; }
.tier li { padding: 8px 0; display: flex; gap: 10px; align-items: flex-start; }
.tier li svg { width: 18px; height: 18px; stroke: var(--ok); flex-shrink: 0; margin-top: 2px; }
.tier li.off { color: var(--ink-soft); }
.tier li.off svg { stroke: var(--border); }

/* ---- Breadcrumb & misc ---------------------------------------------- */
.breadcrumb { font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); margin-bottom: var(--s2); }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--blue-text); }
.notice { background: var(--sand-tint); border: 1px dashed var(--sand-deep); border-radius: var(--radius);
  padding: var(--s3); font-family: var(--font-ui); font-size: 14px; color: var(--sand-deep); }
.two-col-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--s3); }
.related-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--s3); }
.prevnext { display: flex; gap: var(--s3); margin-top: var(--s5); }
.prevnext-link { flex: 1 1 0; display: flex; align-items: center; gap: 14px; padding: 15px 20px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff; text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.prevnext-link:hover { border-color: var(--blue-primary); box-shadow: 0 8px 24px -14px rgb(11 60 93 / .3);
  transform: translateY(-1px); text-decoration: none; }
.prevnext-next { flex-direction: row-reverse; text-align: right; }
.prevnext-link svg { color: var(--blue-primary); flex: none; }
.prevnext-prev svg { transform: rotate(180deg); }
.prevnext-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prevnext-dir { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-soft); }
.prevnext-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--blue-deep); letter-spacing: -.01em; line-height: 1.2; }
@media (max-width: 560px) { .prevnext { flex-direction: column; } }

/* Key sector institutions list (Governance section) */
.inst-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.inst-list li { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid var(--border); }
.inst-name { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--blue-deep); line-height: 1.3; }
.inst-role { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.inst-resp { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin-top: 5px; }
@media (max-width: 680px) { .inst-list { grid-template-columns: 1fr; } }
.inst-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.inst-grid .inst-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px 15px; box-shadow: var(--shadow); transition: transform .18s var(--ease-out), box-shadow .18s; }
.inst-grid .inst-card:hover, .inst-grid .inst-card:focus-within { transform: scale(1.02); box-shadow: var(--shadow-lift); }
.inst-grid .inst-resp { margin: 8px 0 0; }
.inst-link { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; margin-top: auto; padding-top: 10px; color: var(--blue-text); }
@media (max-width: 680px) { .inst-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .inst-grid .inst-card { transition: none; } .inst-grid .inst-card:hover, .inst-grid .inst-card:focus-within { transform: none; } }
.opp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--s3); }
.opp-card { background: #fff; border: 1px solid var(--sand); border-radius: var(--radius); padding: var(--s3); }
.opp-card .opp-icon { width: 34px; height: 34px; stroke: var(--terracotta); margin-bottom: var(--s2); }
.opp-card h3 { font-family: var(--font-ui); font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.opp-card p { font-size: 14px; color: var(--ink-soft); margin: 0; }

.hero-compact { background: var(--blue-deep); color: #fff; padding: var(--s6) 0 var(--s5); position: relative; }
.hero-compact h1 { color: #fff; font-size: clamp(32px, 5vw, 52px); }
.hero-compact .lede { color: var(--on-deep-3); }

.js .no-js-only { display: none; }
.nojs-notice { display: none; }
.no-js .nojs-notice { display: block; }

/* ---- Responsive tweaks ---------------------------------------------- */
@media (max-width: 700px) {
  .book-grid { grid-template-columns: repeat(2, 1fr); }
  .answer-cards { grid-template-columns: 1fr 1fr; }
  .section { padding-block: var(--s6); }
}

/* ---- Charts explainer ------------------------------------------------ */
.chart-block { position: relative; margin: 0 0 var(--s6); padding: var(--s4) var(--s3) var(--s3);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.chart-block .chart-num { position: absolute; top: -14px; left: 20px; font-family: var(--font-ui);
  font-weight: 700; font-size: 12px; letter-spacing: .1em; color: #fff; background: var(--blue-deep);
  padding: 5px 10px; border-radius: 6px; }
.chart-block svg { display: block; width: 100%; height: auto; }
.chart-block figcaption { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); max-width: 68ch;
  margin-top: var(--s3); }
.chart-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--border); }
/* Dense ranked bars stay readable on a phone by scrolling in place. */
@media (max-width: 780px) {
  .chart-block { overflow-x: auto; }
  .chart-block svg { min-width: 640px; }
}

/* ---- Open sponsorship slot (hubs) ------------------------------------ */
.sponsor-slot { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
  justify-content: space-between; background: var(--sand-tint); border: 1px solid var(--sand);
  border-radius: var(--radius); padding: var(--s4); }
.sponsor-slot h2 { font-size: 24px; margin: 6px 0 10px; }
.sponsor-slot p { max-width: 62ch; margin: 0; color: var(--ink-soft); font-size: 15px; }
.sponsor-slot .btn { flex-shrink: 0; }

/* ---- Footnotes / numbered sources ------------------------------------ */
sup.fnref { font-size: 11.5px; line-height: 0; vertical-align: super; margin-left: 1px; }
sup.fnref a { color: var(--blue-text); text-decoration: none; font-weight: 600;
  font-family: var(--font-ui); }
sup.fnref a:hover { text-decoration: underline; }
/* Stories set text on photographs and deep-blue bands: markers need a light ink there. */
.sr--dark sup.fnref a, .story-chapter sup.fnref a, .story-hero sup.fnref a { color: var(--cyan); }
.src-list { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-soft);
  padding-left: 22px; margin: 12px 0 0; }
.src-list li { margin-bottom: 9px; line-height: 1.55; scroll-margin-top: 90px; }
.src-list li:target { background: var(--aqua-tint); border-radius: 4px; padding: 3px 6px; }

/* Folded sources: the section heading itself is the fold control. */
details.src-fold > summary { cursor: pointer; list-style: none; display: flex;
  align-items: baseline; gap: 14px; flex-wrap: wrap; }
details.src-fold > summary::-webkit-details-marker { display: none; }
details.src-fold > summary h2 { margin: 0; display: inline-flex; align-items: baseline; gap: 10px; }
details.src-fold > summary h2::after { content: "▸"; font-size: 0.55em; color: var(--blue-primary);
  transition: transform .18s var(--ease-out); transform: translateY(-2px); }
details.src-fold[open] > summary h2::after { transform: rotate(90deg) translateX(-2px); }
details.src-fold > summary .src-count { font-family: var(--font-ui); font-size: 13px;
  color: var(--ink-soft); }
details.src-fold > summary:hover h2 { color: var(--blue-primary); }
details.src-fold > .report-body { margin-top: 16px; }
.proj-sources { margin-top: 40px; }

/* ---- Foldable hub items ---------------------------------------------- */
/* The claim stays visible; the mechanism is one click away. Same affordance
   as the folded Sources section, so the gesture is learned once. */
.fold-list { margin: 14px 0 4px; border-top: 1px solid var(--border); }
.fold-item { border-bottom: 1px solid var(--border); }
.fold-item > summary { cursor: pointer; list-style: none; display: flex; gap: 12px;
  align-items: baseline; padding: 13px 2px; font-family: var(--font-ui); }
.fold-item > summary::-webkit-details-marker { display: none; }
.fold-item > summary::before { content: "\25B8"; color: var(--blue-primary); font-size: .7em;
  transition: transform .18s var(--ease-out); flex-shrink: 0; }
.fold-item[open] > summary::before { transform: rotate(90deg); }
.fold-item > summary:hover .fold-t { color: var(--blue-primary); }
.fold-t { font-weight: 600; font-size: 15px; color: var(--ink); }
.fold-d { padding: 0 2px 16px 26px; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.fold-d p { margin: 0 0 10px; font-size: inherit; }
.fold-d p:last-child { margin-bottom: 0; }

/* Further reading: the citation is the link, the host is the quiet tail. */
.fr-list li { margin-bottom: 11px; }
.fr-list a { text-decoration: none; }
.fr-list a:hover { text-decoration: underline; }
.fr-host { color: var(--ink-soft); font-size: 12.5px; white-space: nowrap; }
.fr-host::before { content: "\2192\00a0"; }
/* Breadcrumb on a navy hero: tinted, not a literal, so it tracks the ramp. */
.breadcrumb--dark, .breadcrumb--dark a { color: var(--on-deep-6); }

/* ---- Intelligence articles ------------------------------------------- */
.intel-meta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft);
  padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.intel-meta span { display: inline-flex; align-items: center; gap: 6px; }
.intel-body h2 { font-size: 24px; margin: 34px 0 14px; }
.intel-body .lede { font-size: 20px; line-height: 1.6; color: var(--ink); }

/* ---- Data & Tools dashboard ------------------------------------------ */
/* Modules are previews of the full tools: each renders complete at build time
   and ends in a deep link. Two columns from 900px; B and E span both. */
.dash-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-module--wide { grid-column: 1 / -1; }
}
.dash-module { background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s3); display: flex; flex-direction: column; min-width: 0; }
.dash-module-head { margin-bottom: 14px; }
.dash-module-head .eyebrow { margin-bottom: 6px; }
.dash-module-head h3 { font-size: 19px; margin: 0; }
.dash-module-head p { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-soft);
  margin: 6px 0 0; }
.dash-module-body { flex: 1; min-width: 0; }
/* Secondary modules (benchmarks, directory): a smaller card, so the order on the
   page also reads as an order of importance. */
.dash-cols { display: grid; grid-template-columns: 1fr; gap: 0 var(--s4); }
.dash-cols > div { min-width: 0; }
.dash-cols > div + div { margin-top: 18px; }
@media (min-width: 900px) { .dash-cols { grid-template-columns: 1fr 1fr; } .dash-cols > div + div { margin-top: 0; } }
.dash-module--compact { padding: var(--s2) var(--s3); }
.dash-module--compact .dash-module-head { margin-bottom: 8px; }
.dash-module--compact .dash-module-head h3 { font-size: 17px; }
.dash-module--compact .dash-module-foot { margin-top: 10px; padding-top: 10px; }
.dash-module--compact .dash-list li { padding: 5px 0; }
/* Wide content (tables, charts) scrolls inside its module, never the page. */
.dash-module-body > .table-wrap, .dash-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
/* Charts keep a floor width and scroll, matching .lk-fig: scaling a 900-wide
   chart down to a phone makes its labels illegible rather than merely small. */
.dash-chart > svg { min-width: 700px; }
.dash-module-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 13px; }
.dash-module-foot .dash-note { color: var(--ink-soft); }
.dash-module-foot a { font-weight: 600; white-space: nowrap; }
/* Compact tables inside modules */
.dash-module .data-table { font-size: 13.5px; }
.dash-module .data-table th, .dash-module .data-table td { padding: 8px 10px; }
.dash-module .data-table th { white-space: nowrap; }
/* Definition-list modules (league table, latest awards) */
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--border); font-family: var(--font-ui); font-size: 13.5px; }
.dash-list li:last-child { border-bottom: 0; }
.dash-list .dash-rank { color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 18px; }
.dash-list .dash-name { font-weight: 600; color: var(--ink); }
/* On a phone the meta line (winners, dates) wraps under the name instead of
   pushing the card past the screen edge. */
@media (max-width: 560px) {
  .dash-list li { flex-wrap: wrap; gap: 2px 10px; }
  .dash-list .dash-meta { margin-left: 0; white-space: normal; }
}
.dash-list .dash-meta { margin-left: auto; color: var(--ink-soft); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.dash-sub { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .09em; font-weight: 600; margin: 18px 0 6px; }
.dash-sub:first-child { margin-top: 0; }
/* Search input inside a module (project finder, org type-ahead) */
.dash-search { width: 100%; font-family: var(--font-ui); font-size: 14px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--paper); color: var(--ink); }
.dash-search:focus { outline: 2px solid var(--blue-primary); outline-offset: 1px; }
.dash-result-count { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft);
  margin: 10px 0 0; }
/* All-tools strip */
.dash-tools { display: grid; gap: 10px 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none; margin: 0; padding: 0; }
.dash-tools li { font-family: var(--font-ui); font-size: 14px; }
.dash-tools a { font-weight: 600; }
.dash-tools span { color: var(--ink-soft); display: block; font-size: 12.5px; }

/* ---- Breathing room: buttons and source folds ------------------------- */
/* Buttons directly after body text read as cramped at every template.
   One rule instead of per-page margins. */
p + .btn, p + a.btn, .chip-row + .btn, ul + .btn, .intel-body > .btn { margin-top: 20px; }
.card-body p + .btn, .card-body p + a.btn { margin-top: 16px; }
/* The Sources fold sat hard against the chip row above it. */
#sources, .report-section#sources { margin-top: 44px; }
.intel-body + .chip-row { margin-bottom: 12px; }

/* ---- Chart interactivity (js/charthover.js) --------------------------- */
.chart-interactive .ch-row, .chart-interactive .ch-pt,
.chart-interactive .ch-dot, .chart-interactive .ch-bar { cursor: default; outline: none; }
.chart-interactive :is(.ch-row, .ch-dot, .ch-bar, .ch-link),
.chart-interactive .ch-pt circle:last-child { transition: opacity .15s, filter .15s, r .16s var(--ease-out); }
/* one item lit: its siblings step back, the item itself brightens and is outlined */
.chart-interactive.ch-on :is(.ch-row, .ch-dot, .ch-bar):not(.ch-active) { opacity: .42; }
.chart-interactive.ch-on .ch-pt:not(.ch-active) circle:last-child,
.chart-interactive.ch-on .ch-link:not(.ch-active) { opacity: .4; }
.chart-interactive :is(.ch-row, .ch-dot, .ch-bar).ch-active rect:not([fill="transparent"]) {
  filter: brightness(1.1) saturate(1.1); stroke: rgb(16 32 43 / .55); stroke-width: 1.5; }
.chart-interactive .ch-pt.ch-active circle:last-child,
.chart-interactive .ch-dot.ch-active circle:last-child { r: 8; }
.chart-interactive .ch-link { pointer-events: none; }
.chart-interactive .ch-link.ch-active { r: 7.5; }
.chart-interactive .ch-guide { stroke: #7C8B96; stroke-width: 1.2; stroke-dasharray: 3 4; pointer-events: none; }
.chart-interactive :is(.ch-row, .ch-dot, .ch-bar):focus-visible rect:not([fill="transparent"]),
.chart-interactive .ch-pt:focus-visible circle:last-child,
.chart-interactive .ch-dot:focus-visible circle:last-child { stroke: var(--blue-deep); stroke-width: 2.5; }
.chart-interactive svg:has(:focus-visible) { outline: 2px solid var(--blue-primary); outline-offset: 4px; border-radius: 4px; }
/* wide charts scroll inside their card, never the page */
.chart-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.chart-scroll > svg { min-width: 640px; }
/* a hand-labelled chart with a phone layout (components.chart_svg narrow=):
   below 760px the narrow drawing replaces the wide one and fits the card */
.chart-scroll > svg.chart-narrow { display: none; min-width: 0; max-width: 480px; }
@media (max-width: 760px) {
  .chart-scroll.has-narrow > svg.chart-wide { display: none !important; }
  .chart-scroll.has-narrow > svg.chart-narrow { display: block; }
}
/* tooltip */
.chart-tip {
  position: fixed; z-index: var(--z-drop, 60); display: none; pointer-events: none;
  background: var(--blue-deep); color: #fff; border-radius: 8px; padding: 8px 11px;
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.35; max-width: 260px;
  box-shadow: 0 8px 24px rgb(11 60 93 / .28); opacity: 0; transition: opacity .14s;
}
.chart-tip.in { opacity: 1; }
.chart-tip .ct-label { display: block; font-weight: 600; }
.chart-tip .ct-value { display: block; color: #9FD4EC; font-variant-numeric: tabular-nums; }
.chart-tip .ct-note  { display: block; color: var(--on-deep-4); font-size: 11.5px; margin-top: 3px; }
/* month label lit with its column (monthly rain and heat chart) */
.chart-interactive text.ch-lbl.ch-active { font-weight: 700; fill: var(--ink); }

/* ---- Sources and notes (components.sources_fold / source_note) -----
   Long source and method notes under charts, maps and tables fold into one
   small control, as on the Transboundary Waters Atlas. Short notes stay plain. */
.srcnote { margin: 10px 0 24px; font-family: var(--font-ui); }
.chart-card .srcnote { margin: 12px 0 0; }
.report-body .srcnote p, .srcnote p { font-family: var(--font-ui); max-width: 860px; }
.report-body .srcnote-lead, .srcnote-lead { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 4px; }
.srcnote-fold > summary { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px;
  cursor: pointer; list-style: none; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.srcnote-fold > summary::-webkit-details-marker { display: none; }
.srcnote-fold > summary:hover { color: var(--blue-deep); border-color: color-mix(in srgb, var(--blue-primary) 40%, var(--border)); }
.srcnote-fold[open] > summary { color: var(--blue-deep); background: var(--sand-tint); border-color: var(--sand); }
.srcnote-fold > summary:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; }
.srcnote-i { display: inline-grid; place-items: center; color: var(--blue-primary); line-height: 0; }
.srcnote-chev { color: var(--ink-soft); transition: transform .2s var(--ease-out); }
.srcnote-fold[open] .srcnote-chev { transform: rotate(180deg); }
.srcnote-body { margin: 8px 0 2px; padding: 12px 14px; background: var(--sand-tint); border-left: 2px solid var(--sand-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.report-body .srcnote-body p, .srcnote-body p { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.srcnote-body p + p { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .srcnote-fold > summary, .srcnote-chev { transition: none; } }
.srcnote-plain { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin: 8px 0 22px; }
.report-body p.srcnote-plain { margin: 8px 0 22px; }
.chart-card .srcnote-plain, .report-body .chart-card p.srcnote-plain { margin: 8px 0 0; }
/* inside a map legend (js/countrymap.js, js/jordanmap.js): a full-width last row */
.srcnote--legend { flex-basis: 100%; margin: 4px 0 0; }
.srcnote-plain.srcnote--legend { font-size: 11.5px; margin: 0; }
/* A4 — small corner actions on chart figures */
.chart-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; opacity: 0; transition: opacity .18s; }
.fig-wrap:hover .chart-actions, .chart-actions:focus-within { opacity: 1; }
.chart-actions button, .chart-actions a {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--ink-soft);
  cursor: pointer; padding: 0;
}
.chart-actions button:hover, .chart-actions a:hover { color: var(--blue-text); border-color: var(--blue-text); }
.chart-actions svg { width: 14px; height: 14px; }
.fig-wrap { position: relative; }

/* ---- Hub dashboard: ranked bars (replaces the scrolling 20-row table) --- */
.hc-colhead { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.hc-bars { list-style: none; margin: 0; padding: 0; }
.hc-bar { display: grid; grid-template-columns: minmax(88px, 34%) 1fr auto; align-items: center;
  gap: 10px; padding: 5px 0; font-family: var(--font-ui); font-size: 13px; outline: none; }
.hc-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-track { background: var(--aqua-tint); border-radius: 5px; height: 12px; overflow: hidden; }
.hc-fill { display: block; height: 100%; background: var(--blue-primary); border-radius: 5px;
  transition: background .18s, filter .18s; }
.hc-val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-bar.hc-on .hc-fill { background: var(--blue-deep); filter: brightness(1.1); }
.hc-bar:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; border-radius: 4px; }
.hc-more { margin-top: 10px; }
.hc-more > summary { cursor: pointer; font-family: var(--font-ui); font-size: 12.5px;
  color: var(--blue-primary); font-weight: 600; }
.hc-more[open] > summary { margin-bottom: 8px; }
path.hc-on { stroke: var(--blue-deep); stroke-width: 2; }

/* ---- Homepage: featured visual story ---------------------------------- */
.story-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); }
.story-feature-media { display: block; min-height: 320px; position: relative; }
.story-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-feature-body { padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column;
  justify-content: center; min-width: 0; }
.story-feature-body h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -.015em;
  margin: 8px 0 12px; }
.story-feature-body .lede { font-size: 16.5px; color: var(--ink-soft); margin-bottom: 22px; }
.story-feature-body .btn { align-self: flex-start; }
@media (max-width: 860px) {
  .story-feature { grid-template-columns: 1fr; }
  .story-feature-media { min-height: 220px; aspect-ratio: 16/9; }
}

/* Hero kicker: the cyan washed out against sunlit mountains on the Draa photo.
   Brighter tint plus a tighter shadow, so it reads without darkening the image. */
.hero .hero-kicker { color: #C9EAF5; text-shadow: 0 1px 3px rgb(4 20 34 / .85), 0 0 18px rgb(4 20 34 / .55); }
.hero .hero-kicker::before { background: var(--on-deep-cyan); }

/* ---- Nav: dropdown parent is a link, menu opens on hover/focus --------- */
.nav-item > .nav-parent { display: inline-flex; align-items: center; }
.nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---- Intelligence: house mark + topic tags ---------------------------- */
.intel-mark { color: var(--blue-primary); display: block; }
.intel-mark-corner { float: right; margin: -2px 0 0 10px; color: var(--blue-primary); opacity: .5;
  transition: opacity .2s; }
.card--intel:hover .intel-mark-corner { opacity: 1; }
.intel-mark-header { display: block; color: var(--on-deep-cyan); margin-bottom: 14px; }
/* Topic tags: small caps, hairline border, always on one row. */
/* Two topic labels rarely fit beside the corner mark. Let the second wrap to
   its own line rather than collide with it; the gap keeps them apart. */
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  min-width: 0; max-width: calc(100% - 34px); }
.tag--topic {
  background: none; color: var(--blue-deep); border: 1px solid rgb(11 60 93 / .28);
  font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; margin: 0;
}
.tag--date {
  background: none; color: var(--terracotta-text); border: 1px solid rgb(162 80 44 / .45);
  font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}

/* ---- Newsletter capture ------------------------------------------------ */
.subscribe { background: var(--aqua-tint); border: 1px solid #CFE6F2; border-radius: var(--radius);
  padding: var(--s4); margin-top: 44px; }
.subscribe--compact { padding: var(--s3); margin-top: 0; background: none; border: 0; }
.sub-head { font-size: 20px; margin: 0 0 6px; }
.subscribe--compact .sub-head { font-size: 15px; }
.sub-intro { font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; max-width: 56ch; }
.sub-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sub-input { flex: 1 1 260px; min-width: 0; font-family: var(--font-ui); font-size: 15px;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--ink); }
.sub-input:focus { outline: 2px solid var(--blue-primary); outline-offset: 1px; }
.sub-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sub-note { font-family: var(--font-ui); font-size: 13px; margin: 10px 0 0; min-height: 1em; }
.sub-note--ok  { color: var(--ok, #2E7D57); font-weight: 600; }
.sub-note--err { color: #B0413A; font-weight: 600; }

/* ---- Dashboard module footers: pill actions, not bare links ------------ */
.dash-module-foot a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--blue-deep);
  font-weight: 600; letter-spacing: .01em; text-decoration: none;
  box-shadow: 0 1px 2px rgb(11 60 93 / .05);
  transition: border-color .18s, box-shadow .18s, color .18s, transform .18s var(--ease-out);
}
.dash-module-foot a:hover {
  border-color: var(--blue-primary); color: var(--blue-primary);
  box-shadow: 0 6px 18px rgb(11 60 93 / .12); text-decoration: none;
}
.dash-module-foot a svg { transition: transform .18s var(--ease-out); }
.dash-module-foot a:hover svg { transform: translateX(3px); }
.dash-module-foot a:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; }

/* ---- Atlas / mini-map legend: designed, not default -------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft);
  letter-spacing: .015em; }
.legend > span { display: inline-flex; align-items: center; gap: 7px; }
.legend .swatch { width: 13px; height: 13px; border-radius: 3px; display: inline-block;
  border: 1px solid rgb(11 60 93 / .16); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); }
/* the map tile itself reads as a designed object */
.dash-module .dash-scroll > svg[role="img"] { box-shadow: inset 0 0 0 1px rgb(11 60 93 / .07); border-radius: 10px; }

/* Hub dashboard ranked list: folded by default, styled like the sources fold */
.hc-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline;
  gap: 12px; flex-wrap: wrap; padding: 4px 0; }
.hc-fold > summary::-webkit-details-marker { display: none; }
.hc-fold > summary .hc-colhead { margin: 0; }
.hc-fold > summary .hc-colhead::after { content: " ▸"; color: var(--blue-primary); font-size: .8em; }
.hc-fold[open] > summary .hc-colhead::after { content: " ▾"; }
.hc-fold > summary .hc-count { font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft); }
.hc-fold > summary:hover .hc-colhead { color: var(--blue-primary); }
.hc-fold[open] > summary { margin-bottom: 10px; }

/* Briefing numbers strip */
.qn-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  margin: 26px 0 10px; }
.qn { background: var(--aqua-tint); border: 1px solid #CFE6F2; border-radius: 10px; padding: 14px 16px; }
.qn-num { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 24px;
  color: var(--blue-deep); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.qn-label { display: block; font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.sub-privacy { font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-soft); margin: -8px 0 14px; }

/* Hub dashboard: single column — full-width map, ranked fold beneath */
.dash-body--stack { grid-template-columns: 1fr; }
.dash-body--stack #hc-panel { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 14px; }

/* ---- Premium section heads (homepage) ---------------------------------- */
.sh-rule { width: 46px; height: 3px; border-radius: 2px; margin: 0 0 16px;
  background: linear-gradient(90deg, var(--blue-primary), var(--cyan)); }
.section-head--center .sh-rule { margin-inline: auto; }
.section-head > .section-title { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.018em; }

/* ---- Region-in-numbers band under the hero ----------------------------- */
.section--stats { background: linear-gradient(180deg, var(--aqua-tint), #FDFCFA);
  border-bottom: 1px solid var(--border); padding: 44px 0 36px; }
.section--stats .stat .num { color: var(--blue-deep); }


/* ---- Touch targets ------------------------------------------------------
   Below the tablet breakpoint every control clears the 44px comfort target.
   Desktop keeps the tighter sizes the design was drawn at. */
@media (max-width: 860px) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .chip { padding: 11px 15px; }
  .filter-chip { min-height: 44px; padding: 11px 16px; }
  .layer-toggle { min-height: 44px; padding: 11px 0; }
  .layer-toggle input { width: 20px; height: 20px; }
  [data-choro] { min-height: 44px; padding-inline: 14px; }
  #atlas-zoom-in, #atlas-zoom-out { width: 44px; height: 44px; }
  .nav-menu a { padding-block: 12px; }
  .mobile-menu a { padding-block: 12px; }
  .site-footer a { display: inline-block; padding-block: 5px; }
  .report-nav a { display: inline-block; padding-block: 10px; }
  .chart-actions button, .chart-actions a { min-height: 40px; }
  .field select, .field input, .sub-input, .sub-btn { min-height: 44px; }
  .data-table th[aria-sort] { padding-block: 16px; }
  .hc-fold > summary, .hc-more > summary, .sources-fold > summary { min-height: 44px; padding-block: 10px; }
  .tool-card .tool-go { min-height: 44px; display: inline-flex; align-items: center; }
}


/* ---- Homepage story row -------------------------------------------------
   Four stories of equal weight, side by side. Replaces the oversized lead
   card, which made the band tower over the sections either side of it. */
.story-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.story-row .card-img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 1040px) { .story-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .story-row { grid-template-columns: 1fr; } }


/* ---- Homepage map key ---------------------------------------------------- */
.regionmap-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-top: 14px; font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft); }
.regionmap-key .rk-title { font-weight: 600; color: var(--blue-deep); letter-spacing: .04em;
  text-transform: uppercase; font-size: 11.5px; }
.regionmap-key .rk-item { display: inline-flex; align-items: center; gap: 7px; }
.regionmap-key .rk-sw { width: 22px; height: 11px; border-radius: 3px;
  border: 1px solid rgb(11 60 93 / .18); }
.regionmap-key .rk-src { flex-basis: 100%; font-size: 11.5px; color: var(--ink-soft); }


/* ---- Directory: official-site links -------------------------------------- */
.org-link { display: inline-flex; align-items: baseline; gap: 5px; color: var(--ink);
  text-decoration: none; }
.org-link svg { flex: none; opacity: .45; transform: translateY(1px); transition: opacity .18s; }
.org-link:hover { color: var(--blue-text); text-decoration: none; }
.org-link:hover svg { opacity: 1; }


/* ---- Named reviewer credit ----------------------------------------------
   Rendered only when a reviewer exists; there is no empty state to style. */
.reviewed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 12px 0; margin: 18px 0 0; }
.reviewed-label { font-weight: 600; color: var(--blue-deep); letter-spacing: .04em;
  text-transform: uppercase; font-size: 11.5px; }
.reviewed-one { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.reviewed-name { font-weight: 600; color: var(--ink); }
.reviewed-date { color: var(--ink-soft); }
.reviewed-inline { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft);
  margin: 0 0 10px; }

.meta-twin { display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-weight: 600; color: var(--blue-text); text-decoration: none; }
.meta-twin:hover { text-decoration: underline; }


/* ---- Project pages ------------------------------------------------------ */
.proj-map { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--aqua-tint); }
.proj-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; margin: 0; }
.proj-facts .pf-row { display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--border); }
.proj-facts dt { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft);
  letter-spacing: .03em; }
.proj-facts dd { margin: 0; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
  color: var(--ink); text-align: right; }
@media (max-width: 720px) { .proj-facts { grid-template-columns: 1fr; } }


/* ---- Calendar ------------------------------------------------------------ */
.cal-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
/* One card per row, full width; only the training providers pair up, from 960px. */
@media (min-width: 960px) { .cal-list--cols { grid-template-columns: 1fr 1fr; } }
.cal-list > li { margin: 0; }
/* Whole card is the link (Ruben, 18 Oct 2026); same family as the homepage .event-card */
.cal-card { position: relative; display: flex; align-items: center; gap: 16px; height: 100%;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 44px 16px 16px;
  color: inherit; text-decoration: none; font-family: var(--font-ui);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); }
.cal-card:hover, .cal-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--blue-primary) 35%, var(--border)); text-decoration: none; }
.cal-card:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; }
.cal-date { flex: none; min-width: 76px; padding: 9px 10px; text-align: center; border-radius: var(--radius-sm);
  background: var(--blue-deep); color: #fff; line-height: 1.1; }
.cal-date i { display: block; font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-deep-cyan); margin-bottom: 3px; }
.cal-date b { display: block; white-space: nowrap; font-size: 20px; font-variant-numeric: tabular-nums; }
.cal-date span { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-deep-cyan); white-space: nowrap; }
.cal-date--tbc { background: var(--sand-tint); color: var(--blue-deep); }
.cal-date--tbc span { color: var(--ink-soft); white-space: normal; }
.cal-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-kind { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-primary); }
.cal-name { font-family: var(--font-display, var(--font-serif, inherit)); font-size: 16.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.cal-meta { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.cal-go { position: absolute; right: 16px; top: 50%; margin-top: -8px; color: var(--ink-soft);
  transition: transform .3s var(--ease-out), color .3s var(--ease-out); }
.cal-card:hover .cal-go, .cal-card:focus-visible .cal-go { color: var(--blue-primary); transform: translate(2px, -2px); }
.cal-card--plain { padding-left: 18px; }
@media (prefers-reduced-motion: reduce) {
  .cal-card, .cal-go { transition: none; }
  .cal-card:hover, .cal-card:focus-visible { transform: none; }
  .cal-card:hover .cal-go { transform: none; }
}
@media (max-width: 520px) { .cal-card { gap: 12px; padding: 14px 38px 14px 12px; } .cal-date { min-width: 64px; } }


/* ---- Markets index cards ------------------------------------------------- */
.mk-card h3 { font-size: 18px; margin: 0; }
.mk-card .mk-meta { font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft);
  margin: 6px 0 0; }

/* Reference dashboard cards (scarcity scale, non-conventional supply) */
.scale-track { position: relative; }
.scale-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(16, 32, 43, .38); }
.mini-track-row { display: grid; grid-template-columns: 1fr 44px; gap: 4px 10px; align-items: center; margin-top: 12px; font-family: var(--font-ui); }
.mini-track-row > span { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-soft); }
.mini-track-row > b { font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }

/* Solid market-brief button on the country hero */
.hero-brief-btn { margin-top: 18px; }

/* Major projects: the Open button in each row. */
.proj-open { white-space: nowrap; }
.data-table td .proj-open { padding: 6px 14px; }

/* Major projects: the landmark tier. Cards rather than table rows, because the
   point of the tier is the sentence saying why the scheme matters. */
.landmark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s3); }
.landmark { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  border-top: 3px solid var(--terracotta); padding: var(--s3); }
.landmark-where { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--terracotta-text); margin: 0 0 8px; }
.landmark h3 { font-size: 19px; line-height: 1.3; margin: 0 0 10px; }
.landmark h3 a { color: var(--ink); text-decoration: none; }
.landmark h3 a:hover { color: var(--blue-text); text-decoration: underline; }
.landmark-why { font-size: 15px; color: var(--ink-soft); margin: 0; }
.landmark-meta { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft);
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }

/* Major projects: what the register selects for, stated on the page. */
.scope-note { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s3); background: var(--sand-tint); border: 1px solid var(--sand);
  border-radius: var(--radius); padding: var(--s3); margin-bottom: var(--s4); }
.scope-note h3 { font-family: var(--font-ui); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sand-text); margin: 0 0 10px; }
.scope-note ul { margin: 0; padding-left: 18px; }
.scope-note li { font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.scope-note li:last-child { margin-bottom: 0; }
.proj-landmark { background: var(--sand-tint); border-left: 3px solid var(--terracotta);
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s3);
  font-size: 16px; color: var(--ink); margin: 0 0 28px; }
.proj-landmark .lm-mark { margin-right: 8px; }
.lm-mark { font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--terracotta-text); border: 1px solid var(--sand);
  background: var(--sand-tint); border-radius: 3px; padding: 1px 5px; vertical-align: 2px;
  white-space: nowrap; }

/* ==== Visual stories ================================================== *
   One dark canvas, big numbers, scroll-driven figures. Used by the story
   pages rebuilt in the visual register; the light .sr blocks above stay for
   the text features. Everything here degrades to a complete, legible page
   with no JS: storyviz.js opts figures into the sequence, never out of it.
 * ====================================================================== */

.vs { --vs-ground: var(--blue-deep); --vs-panel: #0B3C5D; --vs-rule: rgb(255 255 255 / .16);
  background: var(--vs-ground); color: var(--on-deep-2); }
.vs .container { max-width: 1060px; }

/* ---- Hero ---- */
.vs-hero { position: relative; min-height: min(92vh, 780px); display: flex; align-items: flex-end;
  overflow: hidden; background: var(--vs-ground); }
.vs-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The photograph shows at full strength. The scrim is confined to the lower
   left, where the title sits, and the rest of the frame is left clear. */
.vs-hero::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(6 28 44 / .22) 0%, rgb(6 28 44 / 0) 22%),
    linear-gradient(0deg, rgb(6 28 44 / .8) 0%, rgb(6 28 44 / .5) 34%, rgb(6 28 44 / 0) 66%),
    linear-gradient(90deg, rgb(6 28 44 / .5) 0%, rgb(6 28 44 / .2) 42%, rgb(6 28 44 / 0) 64%); }
.vs-hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 var(--s4) clamp(44px, 7vw, 86px); }
.vs-hero h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.1; letter-spacing: -.02em;
  color: #fff; margin: 0 0 20px; max-width: 24ch; text-wrap: balance;
  text-shadow: 0 1px 24px rgb(6 28 44 / .45); }
.vs-hero .vs-kicker, .vs-hero .vs-sub { text-shadow: 0 1px 14px rgb(6 28 44 / .55); }
.vs-hero .vs-kicker { color: rgb(255 255 255 / .9); }
@media (max-width: 700px) {
  .vs-hero::after { background:
    linear-gradient(0deg, rgb(6 28 44 / .86) 0%, rgb(6 28 44 / .55) 38%, rgb(6 28 44 / 0) 70%); }
}
.vs-kicker { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--on-deep-cyan); margin: 0 0 18px; }
.vs-sub { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.45; color: #fff;
  max-width: 46ch; margin: 0; }

/* ---- Chapter ---- */
.vs-ch { padding-block: clamp(64px, 9vw, 128px); }
/* A rule only where two chapters of the same ground meet; a change of ground
   is its own divider. tone() in story_visuals.py assigns the grounds. */
.vs-ch--deep { background: var(--blue-deep); }
.vs-ch--deep + .vs-ch--deep, .vs-ch--light + .vs-ch--light { border-top: 1px solid var(--vs-rule); }
.vs-ch h2 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.02em;
  color: #fff; margin: 0 0 22px; max-width: 20ch; }
.vs-ch p { font-size: 17px; line-height: 1.7; color: var(--on-deep-4); max-width: 60ch; margin: 0 0 var(--s3); }
.vs-ch p:last-child { margin-bottom: 0; }
.vs-ch a { color: var(--on-deep-cyan); }

/* The statement: one sentence carrying the chapter's number. */
.vs .vs-say { font-family: var(--font-display); font-size: clamp(26px, 3.9vw, 46px); line-height: 1.24;
  letter-spacing: -.015em; color: #fff; max-width: 34ch; margin: 0 0 30px; text-wrap: pretty; }
.vs .vs-say b { color: var(--on-deep-cyan); font-weight: inherit; font-variant-numeric: tabular-nums; }

/* Two columns: statement and short prose beside the figure. */
.vs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px);
  align-items: start; }
@media (max-width: 860px) { .vs-split { grid-template-columns: 1fr; } }

/* ---- Stat wall ---- */
.vs-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4) var(--s3); margin: var(--s4) 0 0; }
.vs-wall > div { border-top: 2px solid var(--vs-rule); padding-top: 16px; }
.vs-wall b { display: block; font-family: var(--font-ui); font-weight: 700; line-height: 1;
  font-size: clamp(30px, 4.6vw, 54px); letter-spacing: -.03em; color: var(--on-deep-cyan);
  font-variant-numeric: tabular-nums; }
.vs-wall span { display: block; font-family: var(--font-ui); font-size: 13px; line-height: 1.45;
  color: var(--on-deep-6); margin-top: 10px; }
@media (max-width: 860px) { .vs-wall { grid-template-columns: repeat(2, 1fr); } }

/* ---- Figures and captions ---- */
.vs-fig { margin: var(--s4) 0 0; }
.vs-fig svg { display: block; width: 100%; height: auto; }
/* Colour key under a figure whose meaning depends on telling two things apart. */
.vs-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; padding: 0;
  font-family: var(--font-ui); font-size: 13px; color: var(--on-deep-3); }
.vs-key span { display: inline-flex; align-items: center; gap: 8px; }
.vs-key i { width: 13px; height: 13px; border-radius: 3px; flex: none; }

.vs .vs-cap { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.5; color: var(--on-deep-7);
  margin: 14px 0 0; max-width: 62ch; }

/* ---- Stepped figure, driven by its own buttons ---- */
.vs-tabbed { margin: var(--s4) 0 0; }
.vs-tabbed-fig { position: relative; }
.vs-tabbed-fig svg { display: block; width: 100%; height: auto; }

/* One row: back arrow, the numbered steps, forward arrow, and a counter. The
   bare pills did not read as controls and gave no sense of how many there were. */
.vs-tabbed-bar { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.vs-tabbed-ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px;
  height: 34px; flex: none; border-radius: 50%; cursor: pointer; color: var(--on-deep-2);
  background: rgb(255 255 255 / .07); border: 1px solid var(--vs-rule);
  transition: background .18s, color .18s, opacity .18s; }
.vs-arrow:hover:not(:disabled) { background: var(--on-deep-cyan); border-color: var(--on-deep-cyan);
  color: #06212F; }
.vs-arrow:disabled { opacity: .3; cursor: default; }
.vs-arrow:focus-visible { outline: 2px solid var(--on-deep-cyan); outline-offset: 3px; }
.vs-count { font-family: var(--font-ui); font-size: 12.5px; color: var(--on-deep-7);
  white-space: nowrap; margin-left: 2px; }
.vs-count b { color: var(--on-deep-cyan); font-weight: 700; }
.vs-tabno { display: inline-block; min-width: 1.15em; margin-right: 7px; font-variant-numeric: tabular-nums;
  color: var(--on-deep-7); }
.vs-tabbed-ctl button[aria-selected="true"] .vs-tabno { color: #06212F; opacity: .65; }
.no-js .vs-tabbed-bar { display: none; }
.vs-tabbed-ctl button { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: var(--on-deep-4); background: rgb(255 255 255 / .05); border: 1px solid var(--vs-rule);
  border-radius: 999px; padding: 8px 15px; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.vs-tabbed-ctl button:hover { background: rgb(255 255 255 / .1); color: #fff; }
.vs-tabbed-ctl button[aria-selected="true"] { background: var(--on-deep-cyan); border-color: var(--on-deep-cyan);
  color: #06212F; }
.vs-tabbed-ctl button:focus-visible { outline: 2px solid var(--on-deep-cyan); outline-offset: 3px; }


.vs-tabbed-caps { margin-top: 16px; min-height: 3.4em; }
.vs-tabbed-caps > * { font-size: 16px; line-height: 1.6; color: var(--on-deep-3); max-width: 70ch; margin: 0; }
/* Every caption shows until JS takes over, then one at a time. */
.vs-live .vs-tabbed-caps > * { display: none; }
.vs-live .vs-tabbed-caps > *.on { display: block; }
.vs-live .vs-tabbed-caps > *.on { animation: vsfade .35s var(--ease-out) both; }
@keyframes vsfade { from { opacity: 0; transform: translateY(5px); } }

.vs-live .vs-tabbed-fig [data-from] { opacity: 0; transition: opacity .45s var(--ease-out); }
.vs-live .vs-tabbed-fig [data-from].on { opacity: 1; }

@media (max-width: 700px) {
  .vs-tabbed-ctl button { font-size: 12.5px; padding: 7px 12px; }
  .vs-tabbed-caps { min-height: 5em; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-live .vs-tabbed-fig [data-from] { transition: none; }
  .vs-live .vs-tabbed-caps > *.on { animation: none; }
}

/* ---- Chart furniture on the dark canvas ---- */
.vs-axis { stroke: rgb(255 255 255 / .18); stroke-width: 1; }
.vs-grid { stroke: rgb(255 255 255 / .09); stroke-width: 1; }
.vs-tick { font-family: var(--font-ui); font-size: 11px; fill: var(--on-deep-7); }
.vs-lbl { font-family: var(--font-ui); font-size: 13px; fill: var(--on-deep-3); }
.vs-val { font-family: var(--font-ui); font-size: 13px; font-weight: 700; fill: #fff;
  font-variant-numeric: tabular-nums; }
.vs-ink-cyan { fill: var(--on-deep-cyan); }
.vs-ink-terra { fill: #E08B5C; }
.vs-ink-sand { fill: var(--sand); }

/* Map: a plant names itself when pointed at or focused, rather than carrying a
   standing label. Thirty standing labels at this scale were unreadable. */
.vs-dot { cursor: pointer; }
.vs-dot-lbl { font-family: var(--font-ui); font-size: 19px; font-weight: 600; fill: #fff;
  paint-order: stroke; stroke: #061A26; stroke-width: 6; stroke-linejoin: round;
  opacity: 0; pointer-events: none; transition: opacity .15s; }
.vs-dot-halo { fill: #86D6E8; opacity: 0; transform-box: fill-box; transform-origin: center;
  transition: opacity .15s, transform .15s; }
.vs-dot:hover .vs-dot-lbl, .vs-dot:focus .vs-dot-lbl,
.vs-dot:focus-visible .vs-dot-lbl { opacity: 1; }
.vs-dot:hover .vs-dot-halo, .vs-dot:focus .vs-dot-halo { opacity: .3; transform: scale(2.4); }
.vs-dot:focus { outline: none; }
.vs-dot:focus-visible .vs-dot-halo { opacity: .45; transform: scale(2.4); }

/* The shipping lane reads as a lane in use. */
.js .vs-lane { animation: vslane 3.2s linear infinite; }
@keyframes vslane { to { stroke-dashoffset: -32; } }

/* The 2026 markers are the point of that view, so they keep moving. */
.js .vs-pulse { transform-box: fill-box; transform-origin: center;
  animation: vspulse 2.4s ease-out infinite; }
@keyframes vspulse { 0% { transform: scale(1); opacity: .85; }
  70% { transform: scale(3.2); opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .js .vs-lane, .js .vs-pulse { animation: none; }
  .js .vs-pulse { opacity: 0; }
}

/* Motion inside a live step: things that open, things that fall, things that
   seep. Scoped to .on so each plays when its own step is reached. */
.vs-live [data-from].on .vs-pop { animation: vspop .75s var(--ease-out) both; }
.vs-live [data-from].on .vs-drop { animation: vsdrop .65s cubic-bezier(.55,0,.9,.45) both; }
.vs-live [data-from].on .vs-crack { animation: vscrack .5s var(--ease-out) both .25s; }
.vs-pop, .vs-drop { transform-box: fill-box; transform-origin: center; }
.vs-crack { transform-box: fill-box; transform-origin: top; }
@keyframes vspop { from { transform: scale(.15); opacity: 0; } }
@keyframes vsdrop { from { transform: translateY(-46px); opacity: 0; } }
@keyframes vscrack { from { transform: scaleY(0); opacity: 0; } }
/* A rule or shaft that draws itself out from one end. */
.vs-live [data-from].on .vs-drawx { animation: vsdrawx .7s var(--ease-out) both; }
.vs-drawx { transform-box: fill-box; transform-origin: left center; }
@keyframes vsdrawx { from { transform: scaleX(0); } }

/* A centre-pivot arm walking round its circle, which is why the fields are round. */
.js .vs-spin { animation: vsspin 14s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes vsspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .js .vs-spin { animation: none; } }

/* Rain, and rain soaking in. */
.js .vs-rain { animation: vsrain 2.2s linear infinite; }
@keyframes vsrain { 0% { transform: translateY(0); opacity: 0; }
  10% { opacity: .9; } 85% { opacity: .9; }
  100% { transform: translateY(var(--d)); opacity: 0; } }

/* A piston working, and a piston that has stopped. */
.js .vs-piston { animation: vspiston 1.1s ease-in-out infinite; }
@keyframes vspiston { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
.js .vs-piston--halt { animation: vspumpd 6s ease-in-out infinite; }
@keyframes vspumpd { 0% { transform: translateY(0px); } 5% { transform: translateY(9px); } 10% { transform: translateY(0px); } 15% { transform: translateY(9px); } 20% { transform: translateY(0px); } 25% { transform: translateY(9px); } 30% { transform: translateY(0px); } 35% { transform: translateY(9px); } 40% { transform: translateY(0px); } 45% { transform: translateY(9px); } 50% { transform: translateY(0px); } 55%, 100% { transform: translateY(0); } }

/* A tank draining, and a sun crossing. */
.js .vs-drain { animation: vsdrain 6s linear infinite; }
.vs-drain { transform-box: fill-box; transform-origin: bottom; }
@keyframes vsdrain { 0% { transform: scaleY(1); } 55%, 100% { transform: scaleY(.04); } }
.js .vs-sun { animation: vssun 6s ease-in-out infinite; }
@keyframes vssun { 0%,100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
.vs-sun { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .js .vs-rain, .js .vs-piston, .js .vs-piston--halt, .js .vs-drain, .js .vs-sun { animation: none; }
  .vs-live [data-from].on .vs-drawx { animation: none; }
}

/* Groundwater seeping toward the salt. */
.js .vs-seep { animation: vsseep 3.4s linear infinite; }
@keyframes vsseep { 0% { transform: translateX(0); opacity: 0; }
  12% { opacity: .95; } 80% { opacity: .95; }
  100% { transform: translateX(var(--d)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .vs-seep { animation: none; opacity: .8; }
  .vs-live [data-from].on .vs-pop, .vs-live [data-from].on .vs-drop,
  .vs-live [data-from].on .vs-crack { animation: none; }
}

/* A line draws itself along its own measured length. */
.js .reveal .vs-line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.js .reveal.in .vs-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.9s var(--ease-out); }
.js .reveal .vs-area { opacity: 0; }
.js .reveal.in .vs-area { opacity: 1; transition: opacity 1.2s var(--ease-out) .5s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal .vs-line { stroke-dashoffset: 0; }
  .js .reveal .vs-area { opacity: 1; }
}

/* The donut's arc sweeps round once, from --arc (its own length) to 0. */
.js .reveal .vs-arc { stroke-dashoffset: var(--arc); }
.js .reveal.in .vs-arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js .reveal .vs-arc { stroke-dashoffset: 0; } }

/* Horizontal bars, drawn in SVG so labels and values sit on one baseline. */
.js .vs-bar { transform-origin: left center; }
.vs-barrow { cursor: default; }
/* A bead travels each arrow of the plant schematic, so the diagram reads as flow. */
.js .vs-flow { animation: vsflow 2.6s linear infinite; }
@keyframes vsflow { from { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; } 85% { opacity: 1; }
  to { transform: translateX(var(--d)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .js .vs-flow { animation: none; opacity: 0; } }
.vs-barrow:hover .vs-bar, .vs-barrow:focus-within .vs-bar { filter: brightness(1.18); }
.vs-barrow:hover .vs-val, .vs-barrow:focus-within .vs-val { fill: var(--on-deep-cyan); }
.js .reveal .vs-bar { transform: scaleX(0); }
.js .reveal.in .vs-bar { transform: scaleX(1); transition: transform 1s var(--ease-out); }
.js .reveal.in .vs-bar:nth-child(2) { transition-delay: .08s; }
.js .reveal.in .vs-bar:nth-child(3) { transition-delay: .16s; }
.js .reveal.in .vs-bar:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js .reveal .vs-bar { transform: none; } }

/* ---- Photo break ---- */
.vs-break { position: relative; min-height: min(72vh, 620px); overflow: hidden; background: var(--vs-ground); }
.vs-break { margin: 0; }
.vs-break img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border: 0; border-radius: 0; background: none; }
/* Only the caption strip at the foot is shaded; the photograph above it is clear. */
.vs-break::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(0deg, rgb(6 28 44 / .74) 0%, rgb(6 28 44 / .32) 22%, rgb(6 28 44 / 0) 42%); }
.vs-break figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: var(--s4); font-family: var(--font-ui); font-size: 12.5px; line-height: 1.5;
  color: rgb(255 255 255 / .92); max-width: 64ch; text-shadow: 0 1px 8px rgb(6 28 44 / .6); }
@media (max-width: 700px) {
  .vs-break::after { background:
    linear-gradient(0deg, rgb(6 28 44 / .82) 0%, rgb(6 28 44 / .4) 34%, rgb(6 28 44 / 0) 60%); }
  .vs-break figcaption { padding: var(--s3) 16px; }
}

/* ---- Incident rail ---- */
.vs-inc { list-style: none; margin: var(--s4) 0 0; padding: 0; border-left: 2px solid var(--vs-rule); }
.vs-inc li { position: relative; padding: 0 0 26px 26px; transition: color .2s; }
/* The entries use main.js's own reveal, one observer per item, and only
   change which way they come in from. */
.js .vs-inc li.reveal { transform: translateX(-14px); }
.js .vs-inc li.reveal.in { transform: none; }
.vs-inc li:hover::before { transform: scale(1.35); }
.vs-inc li::before { transition: transform .2s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js .vs-inc li.reveal { transform: none; } }
.vs-inc li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--on-deep-cyan); border: 3px solid var(--vs-ground); }
.vs-inc li.hit::before { background: #E08B5C; }
.vs-inc .yr { font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; letter-spacing: .06em;
  color: #E08B5C; }
.vs-inc h3 { font-family: var(--font-display); font-size: 18px; margin: 3px 0 5px; color: #fff; }
.vs-inc p { font-size: 15px; line-height: 1.6; margin: 0; max-width: 56ch; color: var(--on-deep-5); }

/* ---- Sources fold on the dark canvas ---- */
.vs .story-sources, .vs details.sources { border-top: 1px solid var(--vs-rule); }

/* ---- Light chapters ----
   The paper ground of the report pages, alternating with the deep band. Only
   chapters without a dark-canvas drawing are given it (see tone() in
   story_visuals.py), so what needs restyling here is type, the stat wall, the
   incident rail and the two adaptive charts, bars and donut. */
/* The ground never fades, only the content on it, so a chapter does not show
   the other ground through itself while it reveals. */
.js .vs-ch.reveal { opacity: 1; transform: none; }
.js .vs-ch.reveal > .container { opacity: 0; transform: translateY(16px); }
.js .vs-ch.reveal.in > .container { opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js .vs-ch.reveal > .container { opacity: 1; transform: none; } }
.vs-ch--light { --vs-ground: var(--paper); --vs-rule: var(--border);
  background: var(--paper); color: var(--ink); }
/* The closing chips block leads straight into the sources band. */
.vs > .vs-ch:last-child { padding-block: var(--s6) var(--s2); }
.vs-ch--light h2 { color: var(--ink); }
.vs-ch--light p { color: var(--ink); }
.vs-ch--light a { color: var(--blue-text); }
.vs .vs-ch--light .vs-say { color: var(--ink); }
.vs .vs-ch--light .vs-say b { color: var(--blue-text); }
.vs-ch--light .vs-wall > div { border-top-color: var(--blue-deep); }
.vs-ch--light .vs-wall b { color: var(--blue-text); }
.vs-ch--light .vs-wall span { color: var(--ink-soft); }
.vs .vs-ch--light .vs-cap, .vs-ch--light .vs-key { color: var(--ink-soft); }
/* Folded figure notes in the visual stories: lead sentence reads as the caption, the
   rest sits under the closed "Sources and notes" control (story_visuals.caption). */
.vs .vs-srcnote { margin: 14px 0 0; max-width: 62ch; }
.vs .vs-srcnote .srcnote-lead { font-size: 12.5px; line-height: 1.5; color: var(--on-deep-7); margin: 0 0 2px; }
.vs .vs-srcnote .srcnote-fold > summary { color: var(--on-deep-7); background: transparent; border-color: var(--vs-rule, rgba(255,255,255,.22)); }
.vs .vs-srcnote .srcnote-i, .vs .vs-srcnote .srcnote-chev { color: var(--on-deep-3); }
.vs .vs-srcnote .srcnote-fold[open] > summary { background: rgba(255,255,255,.06); }
.vs .vs-srcnote .srcnote-fold > summary:hover { color: var(--on-deep-3); }
.vs .vs-srcnote .srcnote-body { margin-bottom: 14px; background: rgba(255,255,255,.05); border-left-color: var(--vs-rule, rgba(255,255,255,.2)); }
.vs .vs-srcnote .srcnote-body p { color: var(--on-deep-7); }
.vs .vs-ch--light .vs-srcnote .srcnote-lead, .vs .vs-ch--light .vs-srcnote .srcnote-fold > summary,
.vs .vs-ch--light .vs-srcnote .srcnote-body p { color: var(--ink-soft); }
.vs .vs-ch--light .vs-srcnote .srcnote-fold > summary:hover { color: var(--blue-primary); }
.vs .vs-ch--light .vs-srcnote .srcnote-fold > summary { background: #fff; border-color: var(--border); }
.vs .vs-ch--light .vs-srcnote .srcnote-i, .vs .vs-ch--light .vs-srcnote .srcnote-chev { color: var(--blue-primary); }
.vs .vs-ch--light .vs-srcnote .srcnote-body { background: var(--sand-tint); border-left-color: var(--sand-deep); }
.vs-ch--light .vs-inc li::before { background: var(--blue-primary); }
.vs-ch--light .vs-inc li.hit::before { background: var(--terracotta); }
.vs-ch--light .vs-inc .yr { color: var(--terracotta-text); }
.vs-ch--light .vs-inc h3 { color: var(--ink); }
.vs-ch--light .vs .vs-inc p, .vs-ch--light .vs-inc p { color: var(--ink-soft); }
/* Adaptive charts: CSS fill beats the dark-canvas presentation attributes. */
.vs-ch--light .vs-lbl { fill: var(--ink); }
.vs-ch--light .vs-val { fill: var(--ink); }
.vs-ch--light .vs-tick { fill: var(--ink-soft); }
.vs-ch--light .vs-ink-cyan { fill: var(--blue-text); }
.vs-ch--light rect.vs-track { fill: rgb(11 60 93 / .09); }
.vs-ch--light circle.vs-track { stroke: rgb(11 60 93 / .09); }
.vs-ch--light .vs-bar { fill: var(--seq-4); }
.vs-ch--light .vs-bar--x { fill: var(--terracotta); }
.vs-ch--light .vs-arc { stroke: var(--seq-4); }
.vs-ch--light .vs-barrow:hover .vs-val, .vs-ch--light .vs-barrow:focus-within .vs-val { fill: var(--blue-text); }

/* ==== Homepage showbill (September 2026) ================================
   Light bands carry the knowledge side, the deep band the intelligence side.
   Plan: HOMEPAGE-PLAN.md. */

/* Hero: slimmer than before, anchored on the falaj channel (bottom right of
   the frame) so a wide crop keeps the water in view. */
.hero--home .hero-inner { padding-block: clamp(92px, 14vh, 156px) clamp(84px, 12vh, 132px); }
.hero--home .hero-media img { object-position: 64% 72%; }
/* The Ken Burns transform gives the image its own stacking layer, which lifts it
   over a z-index:-1 scrim; on a bright photograph that leaves the masthead
   unprotected. Put the scrim explicitly above the image here. The falaj photo is
   bright on the left (sky, sunlit palms), so the left scrim does the work and the
   channel on the right stays clear. */
.hero--home .hero-media::after { z-index: 1;
  background:
    linear-gradient(90deg, rgb(6 28 44 / .84) 0%, rgb(6 28 44 / .66) 34%, rgb(6 28 44 / .28) 62%, rgb(6 28 44 / .04) 86%),
    linear-gradient(180deg, rgb(6 28 44 / .30) 0%, rgb(6 28 44 / .10) 40%, rgb(6 28 44 / .42) 100%); }

/* Type kickers: a coloured rule and a label, never a glowing pill. */
.pick-kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui);
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--k, var(--blue-text)); }
.pick-kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.pick-kicker--story   { --k: #F0A387; }
.pick-kicker--country { --k: #9FD9EC; }
.pick-kicker--hub     { --k: #A9E3C4; }
.pick-kicker--market  { --k: #E6C987; }
.pick-kicker--intel   { --k: var(--on-deep-cyan); }

/* "Our picks": a bento, one lead and four supporting cards. */
.picks-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 18px; }
.pick { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none;
  isolation: isolate; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.pick:hover, .pick:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lift);
  text-decoration: none; }
.pick--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; transition: transform .6s var(--ease-out); }
.pick--photo:hover img, .pick--photo:focus-visible img { transform: scale(1.05); }
.pick--photo::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(6 26 40 / .05) 20%, rgb(6 26 40 / .55) 55%, rgb(6 26 40 / .9) 100%); }
.pick-txt { padding: 20px 20px 22px; }
.pick h3 { color: #fff; font-size: 19px; line-height: 1.22; margin: 8px 0 6px; }
.pick p { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.45; color: rgb(255 255 255 / .86);
  margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick--lead { grid-column: span 2; grid-row: span 2; }
.pick--lead .pick-txt { padding: 32px; max-width: 34em; }
.pick--lead h3 { font-size: clamp(26px, 3vw, 36px); margin: 12px 0 10px; }
.pick--lead p { font-size: 16px; -webkit-line-clamp: 3; }
.pick-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-family: var(--font-ui);
  font-size: 14px; font-weight: 600; color: #fff; }
.pick--intel { background: var(--blue-deep); padding: 22px 22px 24px; justify-content: flex-start; }
.pick--intel h3 { margin-top: 12px; }
.pick--intel p { color: var(--on-deep-3); -webkit-line-clamp: 3; }
.pick--intel .pick-more { margin-top: auto; padding-top: 12px; color: var(--on-deep-cyan); }
.pick-mark { position: absolute; top: 18px; right: 18px; color: var(--on-deep-cyan); opacity: .7; }
.pick-date { display: block; margin-top: 6px; font-family: var(--font-ui); font-size: 12px; color: var(--on-deep-6); }
@media (max-width: 1000px) {
  .picks-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
  .pick--lead { grid-row: span 2; }
}
@media (max-width: 620px) {
  .picks-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .pick { min-height: 230px; }
  .pick--lead { grid-column: auto; grid-row: auto; min-height: 380px; }
  .pick--lead .pick-txt { padding: 22px; }
}

/* Homepage Data & Tools: six static cards, each with its own line icon. */
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.tool-card { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 22px; border-radius: var(--radius);
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .14); color: var(--on-deep-2);
  text-decoration: none; transition: background .2s, border-color .2s, transform .2s var(--ease-out); }
.tool-card:hover, .tool-card:focus-visible { background: rgb(255 255 255 / .10); border-color: rgb(134 214 232 / .55);
  transform: translateY(-2px); text-decoration: none; }
.tool-icon { width: 44px; height: 44px; color: var(--on-deep-cyan); margin-bottom: 6px; transition: transform .2s var(--ease-out); }
.tool-card:hover .tool-icon { transform: scale(1.06); }
.tool-card h3 { margin: 0; font-size: 21px; color: #fff; }
.tool-card p { margin: 0; font-family: var(--font-ui); font-size: 14.5px; line-height: 1.5; color: var(--on-deep-3); }
.tool-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--on-deep-cyan); }
@media (max-width: 1000px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tool-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tool-card, .tool-card:hover, .tool-icon { transition: none; transform: none; } }

/* Featured countries and hubs: four photo cards, then complete navigation. */
.place-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.place-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; color: #fff; isolation: isolate;
  text-decoration: none; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.place-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform .6s var(--ease-out); }
.place-card::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(6 26 40 / 0) 35%, rgb(6 26 40 / .6) 62%, rgb(6 26 40 / .92) 100%); }
.place-card:hover, .place-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lift);
  text-decoration: none; }
.place-card:hover img, .place-card:focus-visible img { transform: scale(1.05); }
.place-txt { padding: 20px; }
.place-card h3 { color: #fff; font-size: 22px; margin: 0 0 6px; }
.place-card p { margin: 0; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.45;
  color: rgb(255 255 255 / .86); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.place-card--hub .hub-icon { width: 26px; height: 26px; stroke: #fff; margin-bottom: 10px; }
.place-card--hub h3 { font-size: 19px; }
.country-chips { margin-top: 26px; }
@media (max-width: 1000px) { .place-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .place-row { grid-template-columns: 1fr; }
  .place-card { aspect-ratio: 16 / 11; }
}

/* Upcoming events: a date block and the essentials. */
.event-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.event-card { display: flex; gap: 18px; align-items: flex-start; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; color: inherit;
  text-decoration: none; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.event-card:hover, .event-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lift);
  text-decoration: none; }
.event-date { flex: none; min-width: 84px; padding: 10px 12px; text-align: center; border-radius: var(--radius-sm);
  background: var(--blue-deep); color: #fff; font-family: var(--font-ui); }
.event-date b { display: block; white-space: nowrap; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.event-date span { display: block; margin-top: 4px; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--on-deep-cyan); }
.event-txt h3 { font-size: 17.5px; line-height: 1.3; margin: 0 0 6px; }
.event-txt p { margin: 0; font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-soft); }
.event-txt .event-org { margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); opacity: .85; }
@media (max-width: 900px) { .event-row { grid-template-columns: 1fr; } }

/* Intelligence: the monthly briefing as the house's flagship edition. */
.intel-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; }
.card--flagship { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--on-deep-2); }
.card--flagship .card-body { padding: 28px; height: 100%; display: flex; flex-direction: column; }
.card--flagship h3 { color: #fff; font-size: 23px; margin: 12px 0 10px; }
.card--flagship p { color: var(--on-deep-3); }
.card--flagship .pick-more { margin-top: auto; padding-top: 18px; color: var(--on-deep-cyan); }
.flag-issue { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #E6C987; }
@media (max-width: 1000px) { .intel-row { grid-template-columns: 1fr; } }

/* Live tenders: machine-translation marker and the original title. */
.mt-info { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 3px; vertical-align: 1px; border-radius: 50%;
  border: 1px solid var(--sand-text); color: var(--sand-text); font: italic 700 10px/1 Georgia, serif;
  cursor: help; }
.mt-info:hover, .mt-info:focus-visible, .mt-info.is-open { background: var(--sand-text); color: #fff; outline: none; }
.mt-info::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%); width: max-content; max-width: 240px; padding: 7px 10px; border-radius: 6px;
  background: var(--ink, #10202c); color: #fff; font: 500 12px/1.4 var(--font-ui); letter-spacing: 0;
  text-align: left; white-space: normal; opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 20;
  pointer-events: none; }
.mt-info:hover::after, .mt-info:focus-visible::after, .mt-info.is-open::after { opacity: 1; visibility: visible; }
/* the pop-up is now one fixed element placed by js/tools.js, so the clipped ::after is switched off */
.mt-info::after, .mt-info:hover::after, .mt-info:focus-visible::after, .mt-info.is-open::after { display: none; }
.mt-pop { position: fixed; z-index: var(--z-modal); width: max-content; max-width: 280px; padding: 8px 11px;
  border-radius: 6px; background: var(--ink, #10202c); color: #fff; font: 500 12.5px/1.45 var(--font-ui);
  text-align: left; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 6px 20px rgb(11 60 93 / .25);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; }
.mt-pop.show { opacity: 1; visibility: visible; }
.mt-original { grid-column: 1 / -1; }
.mt-original dd[lang="ar"] { font-size: 16px; line-height: 1.6; }
.table-more { margin-top: 16px; }

/* Batch 1 (16 Oct 2026): the Morocco hero keeps its photo, re-cropped lower (Ruben's choice) */
.report-hero-media img[src$="country-morocco.jpg"] { object-position: center 92%; }

/* ---- Glossary (i): short definitions (scripts/glossary.py, js/main.js) ---- */
/* Same pattern as the Minorities site's note markers: a drawn circled i after
   the term, a balloon over the text on hover, focus or tap. Kept apart from the
   footnotes on purpose: footnotes are blue, bold, superscript numerals; the (i)
   sits on the text line, outlined, in the text's own colour at reduced
   strength, so it reads as "explain this word", not "see source n". */
.gl-anchor { position: relative; white-space: nowrap; }
.gl-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0 0 0 .18em; border: 0; background: none;
  line-height: 0; vertical-align: -.12em;
  color: inherit; opacity: .65; cursor: pointer;
  transition: opacity .15s ease, color .15s ease;
}
.gl-btn svg {
  width: .9em; height: .9em;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
/* A 32px tap target without moving a single glyph of the line. */
.gl-btn::after { content: ""; position: absolute; inset: -9px -7px; }
.gl-btn:hover, .gl-btn:focus-visible, .gl.open .gl-btn { opacity: 1; color: var(--blue-text); }
.gl-btn:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; border-radius: 50%; }
.sr--dark .gl-btn:hover, .story-chapter .gl-btn:hover, .story-hero .gl-btn:hover,
.sr--dark .gl.open .gl-btn, .story-chapter .gl.open .gl-btn, .story-hero .gl.open .gl-btn { color: var(--cyan); }

.gl-tip {
  /* display, not visibility: a hidden balloon must take no room at all, or one
     near the right margin widens the page into sideways scroll on a phone. */
  display: none;
  position: absolute; z-index: var(--z-drop);
  bottom: calc(100% + 10px); left: 50%;
  transform: translateX(calc(-50% + var(--gl-shift, 0px)));
  width: max-content; max-width: min(320px, calc(100vw - 32px));
  padding: 11px 14px 12px;
  background: var(--blue-deep); color: var(--on-deep-1);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lift);
  font: 400 13.5px/1.5 var(--font-ui); letter-spacing: 0;
  text-align: left; white-space: normal; text-transform: none;
  font-style: normal;
}
/* invisible bridge over the gap, so the pointer can travel into the balloon */
.gl-tip::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.gl.below .gl-tip { bottom: auto; top: calc(100% + 10px); }
.gl.below .gl-tip::before { top: auto; bottom: 100%; }
.gl-term { display: block; font-weight: 600; color: #fff; margin-bottom: 3px; }
.gl-src { display: block; margin-top: 7px; font-size: 12px; color: var(--on-deep-5); }
.gl-src a { color: var(--on-deep-cyan); text-decoration: underline; text-underline-offset: 2px; }
.gl-src a:hover { color: #fff; }

.gl.open .gl-tip { display: block; animation: gl-in .14s var(--ease-out); }
/* Without JavaScript the balloon still opens on hover and keyboard focus. */
.no-js .gl:hover .gl-tip, .no-js .gl:focus-within .gl-tip { display: block; }
@keyframes gl-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gl-btn { transition: none; }
  .gl.open .gl-tip { animation: none; }
}
@media print { .gl-btn, .gl-tip { display: none !important; } }

/* ==== Home hero video (October 2026) ====================================
   Poster = first frame of the first clip, a normal <img> that paints at once
   and stays the LCP element. js/main.js (setupHeroVideo) fills the <video>s
   after the load event and crossfades them (300 ms) in a loop. Rules and
   measurements: factcheck/hero-video.md. */
.hero--video .hero-media img { object-position: center 55%; }
/* The poster is a still frame the video takes over from, so no Ken Burns:
   a scaled poster would jump when the unscaled video fades in. */
.js .hero--video .hero-media img { animation: none; }
/* The clips stop 1px short of the bottom edge on purpose. Chrome counts a
   playing <video> as a Largest Contentful Paint candidate; at exactly the
   poster's size, pixel snapping made the first clip a hair larger, which moved
   LCP from the poster (~0.1 s) to the first video frame (after the load event).
   One pixel less keeps the poster the LCP element. Once a clip shows, the
   poster is hidden, so the 1px strip is the dark media background. */
.hero--video .hero-media { background: #061C2C; }
.hero-clips { position: absolute; inset: 0 0 1px 0; }
.hero--video.is-playing .hero-media picture { visibility: hidden; }
.hero-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 55%; opacity: 0; transition: opacity .3s linear; pointer-events: none; }
.hero-clip.is-on { opacity: 1; }
/* The scrim (hero-media::after, z-index 1) sits over image and clips alike.
   The clips run brighter than the old falaj photo on the left (white salt crust,
   pale desert, hazy city), so the left band is a touch denser. */
.hero--video .hero-media::after {
  background:
    linear-gradient(90deg, rgb(6 28 44 / .86) 0%, rgb(6 28 44 / .72) 34%, rgb(6 28 44 / .34) 62%, rgb(6 28 44 / .08) 86%),
    linear-gradient(180deg, rgb(6 28 44 / .30) 0%, rgb(6 28 44 / .12) 40%, rgb(6 28 44 / .46) 100%); }
@media (max-width: 640px) {
  /* On a phone the copy spans the full width, so the scrim does too. */
  .hero--video .hero-media::after {
    background: linear-gradient(180deg, rgb(6 28 44 / .52) 0%, rgb(6 28 44 / .56) 55%, rgb(6 28 44 / .72) 100%); }
}
/* Pause/play (WCAG 2.2.2): small, quiet, bottom right; full contrast on focus. */
.hero-toggle { position: absolute; right: 14px; bottom: 12px; z-index: 3; display: inline-flex;
  align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid rgb(255 255 255 / .38); border-radius: 50%; background: rgb(6 28 44 / .38);
  color: rgb(255 255 255 / .85); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.hero-toggle:hover { background: rgb(6 28 44 / .7); color: #fff; border-color: rgb(255 255 255 / .7); }
.hero-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; color: #fff; }
.hero-toggle[hidden] { display: none; }
.hero-toggle .i-play { display: none; }
.hero-toggle[aria-pressed="true"] .i-play { display: block; }
.hero-toggle[aria-pressed="true"] .i-pause { display: none; }
/* Credit for the hero video, at the foot of the homepage above the footer. */
.home-media-credit { margin-block: var(--s5) var(--s3); font-family: var(--font-ui); font-size: 12px;
  line-height: 1.5; color: var(--ink-soft); }
.hero-clip.is-top { z-index: 1; }

/* ---- Live tenders: page navigation, budget slider, channel list (Oct 2026) ---- */
.page-nav { position: sticky; top: 60px; z-index: var(--z-sticky); background: rgb(253 252 250 / .94);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.page-nav ol { list-style: none; margin: 0 auto; padding: 0 var(--s3); max-width: var(--container);
  display: flex; gap: 6px 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.page-nav ol::-webkit-scrollbar { display: none; }
.page-nav a { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; padding: 13px 0 11px;
  font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); text-decoration: none;
  border-bottom: 2px solid transparent; }
.page-nav a .pn-n { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--sand-deep); font-weight: 600; }
.page-nav a:hover { color: var(--blue-text); }
.page-nav a[aria-current="true"] { color: var(--blue-deep); font-weight: 600; border-bottom-color: var(--blue-deep); }
.tn-section { scroll-margin-top: 120px; }

.budget-wrap { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: end; padding-top: 6px; }
.budget-filter { display: flex; flex-direction: column; gap: 6px; width: 330px; max-width: 100%; }
.budget-note { flex: 1 1 260px; margin-bottom: 2px; }
.bf-label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-soft); letter-spacing: .03em; }
.brange { position: relative; height: 28px; }
.brange-track { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--border); }
.brange-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--blue-deep); }
.brange input[type="range"] { position: absolute; left: 0; top: 0; width: 100%; height: 28px; margin: 0; padding: 0;
  min-width: 0; min-height: 0; border: 0; background: none; pointer-events: none;
  -webkit-appearance: none; appearance: none; }
.brange input[type="range"]::-webkit-slider-runnable-track { background: none; height: 28px; }
.brange input[type="range"]::-moz-range-track { background: none; height: 28px; }
.brange input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: #fff; border: 2px solid var(--blue-deep);
  box-shadow: 0 1px 3px rgb(11 60 93 / .25); cursor: grab; }
.brange input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue-deep); box-shadow: 0 1px 3px rgb(11 60 93 / .25); cursor: grab; }
.brange input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--cyan); outline-offset: 2px; }
.brange input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--cyan); outline-offset: 2px; }
.bf-readout { display: flex; gap: 8px; align-items: baseline; font-family: var(--font-ui); font-size: 14px; color: var(--ink);
  font-variant-numeric: tabular-nums; font-weight: 600; }
.bf-readout span { font-weight: 400; color: var(--ink-soft); }
.bf-check { display: flex; gap: 8px; align-items: center; font-family: var(--font-ui); font-size: 13.5px; color: var(--ink); cursor: pointer; }
.bf-check input { min-width: 0; min-height: 0; width: 16px; height: 16px; padding: 0; accent-color: var(--blue-deep); }
.budget-note { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-soft); margin: 0; }
.bf-link { font: inherit; background: none; border: 0; padding: 0; color: var(--blue-text); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; }
.bf-link:hover { color: var(--blue-deep); }
@media (max-width: 640px) {
  .brange { height: 40px; } .brange-track { top: 18px; }
  .brange input[type="range"] { height: 40px; }
  .brange input[type="range"]::-webkit-slider-runnable-track, .brange input[type="range"]::-moz-range-track { height: 40px; }
  .brange input[type="range"]::-webkit-slider-thumb { margin-top: 9px; }
  .brange input[type="range"]::-moz-range-thumb { margin-top: 0; }
  .bf-check { min-height: 44px; }
  .budget-wrap { order: -1; }
  .page-nav a { padding: 12px 0 10px; }
  .page-nav ol { gap: 4px 20px; }
}

.tsrc-group { margin: 40px 0 0; }
.tsrc-group > h3 { margin: 0 0 4px; }
.tsrc-group > p { max-width: 70ch; margin: 0 0 14px; }
.tsrc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.tsrc > li { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(0, 1.4fr); gap: 6px 28px;
  padding: 16px 0; border-bottom: 1px solid var(--border); font-family: var(--font-ui); font-size: 14px;
  line-height: 1.55; color: var(--ink-soft); }
.tsrc h4 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; }
.tsrc h4 a { color: var(--blue-deep); }
.tsrc .tsrc-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tsrc .tsrc-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tsrc > li.tsrc-head { padding: 10px 0; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); }
.tsrc .tsrc-feed { font-weight: 600; color: var(--ink); }
.tsrc .tsrc-state { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.tsrc p { margin: 0; }
@media (max-width: 860px) {
  .tsrc > li { grid-template-columns: 1fr; gap: 8px; }
  .tsrc > li.tsrc-head { display: none; }
  .tsrc .tsrc-k { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; font-size: 11.5px;
    font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
}

/* Fold-out rows inside one table (batch 2, 18 Oct 2026; js/morerows.js). Without JS every row shows. */
.data-table.is-collapsed tbody tr.row-more { display: none; }
.more-rows-bar { margin: 6px 0 0; }
.more-rows-btn { appearance: none; background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--blue-primary); }
.more-rows-btn::before { content: "\25B8"; display: inline-block; font-size: .8em; margin-right: 6px; transition: transform .15s; }
.more-rows-btn[aria-expanded="true"]::before { transform: rotate(90deg); }
.more-rows-btn:hover { color: var(--blue-deep); }
.more-rows-btn:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 720px) { .more-rows-btn { min-height: 44px; padding-block: 10px; } }
@media (prefers-reduced-motion: reduce) { .more-rows-btn::before { transition: none; } }

/* Shared waters lists (joint bodies, aquifers) and the lead line above the agreements table (batch 2, 18 Oct 2026).
   The name and the detail line sit in two fixed columns, so rows line up however long the member list runs;
   below 720px they stack, name above detail. */
.snap-list--rows li { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4px 24px; align-items: baseline; }
.snap-list--rows li > span:first-child { overflow-wrap: anywhere; }
.snap-list--rows .role { text-align: left; font-size: 13px; line-height: 1.45; }
@media (max-width: 720px) { .snap-list--rows li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; } }
.table-lead { margin: 14px 0 8px; font-family: var(--font-ui); font-size: 14px; }

/* Donut chart with an HTML legend, and bar charts that fit the card (batch 2, 18 Oct 2026; components.donut, bar_chart fit=) */
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 12px 28px; flex-wrap: wrap; }
.donut-svg { display: block; width: 100%; max-width: 280px; height: auto; flex: 0 1 280px; margin: 0 auto; }
.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 220px; min-width: 0; font-family: var(--font-ui); }
.donut-legend li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 1px 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--border); }
.donut-legend li:last-child { border-bottom: 0; }
.donut-legend .dl-sw { width: 14px; height: 14px; border-radius: 3px; align-self: center; grid-row: 1 / span 2; }
.donut-legend .dl-name { font-size: 14px; line-height: 1.35; color: var(--ink); }
.donut-legend .dl-val { grid-column: 2; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }

/* HTML ranked bars (components.hbars), the in-text supply mix */
.hbars { list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); }
.hbars li { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 4px 12px; align-items: center; padding: 8px 0; }
.hbars .hb-lab { grid-column: 1 / -1; font-size: 14px; line-height: 1.35; color: var(--ink); }
.hbars .hb-track { height: 14px; border-radius: 4px; background: var(--sand-tint, #F2EFE9); overflow: hidden; }
.hbars .hb-fill { display: block; height: 100%; border-radius: 4px; }
.hbars .hb-val { text-align: right; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ==== Market briefing, monthly template (October 2026 on) ================
   Rendered by pages_intel.briefing_hero / briefing_body. Photo hero with the
   edition line, frozen key-numbers strip, contents with one Lucide line icon
   per section, dated "In brief" and "What to watch" lists, print styles. */
.brf-wrap { max-width: 1000px; }
.brf-hero .report-hero-inner { min-height: clamp(400px, 44vw, 560px); }
.js .brf-hero .report-hero-media img { animation: none; }
.brf-kicker { display: flex; align-items: center; gap: 10px; margin: 16px 0 0;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-deep-cyan); text-shadow: 0 1px 10px rgb(0 0 0 / .4); }
.brf-kicker-mark svg { display: block; }
.brf-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .75; }
.brf-title { max-width: 21ch; }
.brf-dek { color: var(--on-deep-1); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; max-width: 60ch;
  margin: 16px 0 0; text-shadow: 0 1px 18px rgb(0 0 0 / .45); }
.brf-credit { position: absolute; right: 16px; bottom: 10px; margin: 0; max-width: 64ch; text-align: right;
  font-family: var(--font-ui); font-size: 11px; line-height: 1.4; color: var(--on-deep-3);
  text-shadow: 0 1px 6px rgb(0 0 0 / .6); }
.brf-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.brf-edition { background: var(--blue-deep); color: var(--on-deep-3); font-family: var(--font-ui); font-size: 13px;
  border-top: 1px solid rgb(255 255 255 / .1); }
.brf-edition .container { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-block: 12px; }
.brf-edition span { display: inline-flex; align-items: center; gap: 7px; }
.brf-edition .brf-edition-links { margin-left: auto; gap: 16px; }
.brf-edition a { color: var(--on-deep-1); }
.brf-print { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font: inherit;
  color: var(--on-deep-1); background: none; border: 1px solid rgb(255 255 255 / .3); border-radius: 999px; }
.brf-print:hover, .brf-print:focus-visible { border-color: var(--on-deep-cyan); color: #fff; }
.brf-main { padding-top: var(--s5); }
.brf-top { display: grid; gap: 22px; margin-bottom: var(--s3); }
.brf-nums { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--blue-deep);
  border-bottom: 1px solid var(--border); }
.brf-num { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; border-left: 1px solid var(--border); }
.brf-num:first-child { border-left: 0; padding-left: 0; }
.brf-num-v { font-family: var(--font-ui); font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1.1;
  letter-spacing: -.01em; color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.brf-num-l { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.brf-num-b { margin-top: auto; padding-top: 6px; font-family: var(--font-ui); font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); }
.brf-toc { background: var(--sand-tint); border-radius: var(--radius); padding: 18px 22px; }
.brf-toc-h { margin: 0 0 8px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sand-text); }
.brf-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 24px; }
.brf-toc a { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-family: var(--font-ui); font-size: 14.5px;
  color: var(--ink); text-decoration: none; }
.brf-toc a:hover { color: var(--blue-text); }
.brf-body { max-width: 780px; }
.brf-body > .lede { margin-top: var(--s3); }
.brf-ico { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--blue-text); background: var(--aqua-tint); border: 1px solid #CFE6F2; }
.brf-ico svg { display: block; }
.brf-ico--sm { width: 28px; height: 28px; color: var(--sand-text); background: #fff; border-color: var(--sand); }
.intel-body .brf-h { display: flex; align-items: center; gap: 14px; margin: 44px 0 16px; padding-top: 24px;
  border-top: 1px solid var(--border); font-size: 25px; scroll-margin-top: 96px; }
.brf-sec { break-inside: auto; }
.brf-quote { position: relative; margin: 36px 0; padding: 22px 0 20px; border-top: 2px solid var(--terracotta);
  border-bottom: 1px solid var(--border); }
.brf-quote-ico { color: var(--terracotta); display: block; }
.brf-quote blockquote { margin: 8px 0 0; padding: 0; border: 0; }
.brf-quote blockquote p { margin: 0; font-family: var(--font-display); font-size: clamp(21px, 2.3vw, 26px); line-height: 1.4;
  color: var(--blue-deep); }
.brf-quote figcaption { margin-top: 12px; font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); }
.brf-brief { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.brf-brief li { display: grid; grid-template-columns: 84px 112px 1fr; gap: 14px; padding: 13px 0; margin: 0;
  border-bottom: 1px solid var(--border); font-size: 16px; line-height: 1.5; }
.brf-brief--watch li { grid-template-columns: 196px 1fr; }
.brf-when { padding-top: 2px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--blue-text);
  font-variant-numeric: tabular-nums; }
.brf-cc { padding-top: 3px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sand-text); }
.brf-note { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft); }
.brf-credit-foot { margin: 10px 0 0; font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft); }
.brf-credit-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.brf-wrap-chips .chip-row { margin-bottom: 8px; }
@media (max-width: 760px) {
  .brf-nums { grid-template-columns: 1fr 1fr; }
  .brf-num:nth-child(3) { border-left: 0; padding-left: 0; }
  .brf-num:nth-child(n+3) { border-top: 1px solid var(--border); }
  .brf-brief li, .brf-brief--watch li { grid-template-columns: 1fr; gap: 2px; }
  .brf-edition .brf-edition-links { margin-left: 0; }
  .brf-credit { position: static; text-align: left; padding: 8px 16px; background: var(--blue-deep); text-shadow: none; }
}
@media print {
  .site-header, .site-footer, .skip-link, .brf-toc, .brf-print, .subscribe, .brf-wrap-chips { display: none !important; }
  .brf-hero { color: var(--ink); }
  .brf-hero::after, .brf-hero .report-hero-media { display: none; }
  .brf-hero .report-hero-inner { min-height: 0; padding: 0 0 12px; }
  .brf-hero .breadcrumb, .brf-hero .breadcrumb a, .brf-kicker, .brf-title, .brf-dek, .brf-credit
    { color: var(--ink) !important; text-shadow: none !important; }
  .brf-credit { position: static; text-align: left; padding: 0 0 8px; }
  .brf-edition { background: none; color: var(--ink-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .brf-edition a { color: var(--ink); }
  .brf-main { padding-top: 16px; }
  .brf-h, .brf-quote, .brf-num, .brf-brief li { break-inside: avoid; }
  .brf-h { break-after: avoid; }
  .brf-body { max-width: none; }
  a[href^="http"]::after { content: ""; }
}
.hbars--pair li { grid-template-columns: minmax(0, 1fr) 118px; row-gap: 3px; }
.hbars--pair .hb-lab { grid-column: 1; }
.hbars--pair .hb-tag { grid-column: 2; text-align: right; font-size: 12.5px; color: var(--ink-soft); line-height: 1.3; }
.hbars--pair .hb-val--soft { font-weight: 400; color: var(--ink-soft); }
.hb-key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 6px; font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft); }
.hb-key i { display: inline-block; width: 14px; height: 12px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }

/* ---- Number cards, site-wide (approved 18 Oct 2026): every .stat-grid strip; .callout tiles get the same card */
.stat-grid { gap: 16px; margin-bottom: 40px; }
.stat-grid .stat { text-align: left; padding: 18px 20px 16px; background: #fff;
  border: 1px solid var(--border); border-top: 2px solid var(--blue-primary); border-radius: var(--radius-sm);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out); }
.stat-grid .stat:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(11 60 93 / .09);
  border-color: color-mix(in srgb, var(--blue-primary) 35%, var(--border)); border-top-color: var(--blue-primary); }
@media (prefers-reduced-motion: reduce) { .stat-grid .stat { transition: none; } .stat-grid .stat:hover { transform: none; } }
.stat-grid .stat .num { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; color: var(--blue-deep);
  font-variant-numeric: tabular-nums; }
.stat-grid .stat .label { margin: 8px 0 0; max-width: none; font-size: 11.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-grid .stat { padding: 14px 14px 12px; } }

.stat-grid .stat .num { text-align: left; }
.section--deep .stat-grid .stat .num { color: var(--blue-deep); }
.section--deep .stat-grid .stat .label { color: var(--ink-soft); }
.callout, .kpi-band .callout { background: #fff; border: 1px solid var(--border); border-top: 2px solid var(--blue-primary);
  border-radius: var(--radius-sm);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out); }
.callout:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(11 60 93 / .09);
  border-color: color-mix(in srgb, var(--blue-primary) 35%, var(--border)); border-top-color: var(--blue-primary); }
.callout .big { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .callout { transition: none; } .callout:hover { transform: none; } }

/* ---- State of the region: topic icons before item headings (18 Oct 2026) */
.state-ic { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: color-mix(in srgb, var(--blue-primary) 8%, #fff); color: var(--blue-primary);
  border: 1px solid color-mix(in srgb, var(--blue-primary) 16%, transparent); }
.state-ic svg { width: 16px; height: 16px; }
.report-body h4.prose-h--ic { display: flex; align-items: center; gap: 12px; margin-top: 30px;
  padding-top: 18px; border-top: 1px solid var(--border); }
.report-body h4.prose-h--ic:first-of-type { border-top: 0; padding-top: 0; }
.fold-item > summary .state-ic { width: 26px; height: 26px; border-radius: 7px; margin-top: -3px; }
.fold-item > summary .state-ic svg { width: 14px; height: 14px; }
.fold-item[open] > summary .state-ic, .fold-item > summary:hover .state-ic {
  background: var(--blue-primary); color: #fff; border-color: var(--blue-primary); }
.state-ic { transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }

/* ---- Hub case cards ("Deployments to watch", "Case files" ...): premium + hover (18 Oct 2026) */
.two-col-cards > .opp-card { position: relative; display: flex; flex-direction: column; padding: 22px 22px 20px;
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgb(11 60 93 / .04);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s var(--ease-out); }
.two-col-cards > .opp-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--blue-primary)); transform: scaleY(.18); transform-origin: top;
  transition: transform .35s var(--ease-out); }
.two-col-cards > .opp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--blue-primary) 28%, var(--border)); }
.two-col-cards > .opp-card:hover::before { transform: scaleY(1); }
.two-col-cards > .opp-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.3;
  color: var(--blue-deep); margin-bottom: 8px; }
.two-col-cards > .opp-card h3 a { color: inherit; text-decoration: none; }
.two-col-cards > .opp-card h3 a:hover { color: var(--blue-primary); }
.two-col-cards > .opp-card p { font-size: 14.5px; line-height: 1.6; }
.two-col-cards > .opp-card .chip-row { margin-top: auto !important; padding-top: 14px; }
@media (prefers-reduced-motion: reduce) { .two-col-cards > .opp-card, .two-col-cards > .opp-card::before { transition: none; }
  .two-col-cards > .opp-card:hover { transform: none; } }

/* Monthly highlight tag on the first homepage country and hub cards (scripts/weekly.py). */
.place-tag { display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: 3px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #fff;
  background: rgb(6 28 44 / .55); border: 1px solid rgb(255 255 255 / .35); }

/* Hub country tables without a scroll bar (batch 3-E, 18 Oct 2026): headers wrap, cells are tight, and on phones
   each row becomes a small card whose cells carry their column label (data-label, set in hub_data._table). */
.data-table--stack { min-width: 0; table-layout: auto; }
.data-table--stack th { white-space: normal; padding: 11px 10px; font-size: 11.5px; letter-spacing: .02em; line-height: 1.3; vertical-align: bottom; }
.data-table--stack td { padding: 10px; }
.data-table--stack td.tabnum { white-space: nowrap; }
@media (max-width: 640px) {
  .data-table--stack, .data-table--stack tbody, .data-table--stack tr, .data-table--stack td { display: block; width: 100%; }
  .data-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table--stack tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .data-table--stack td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border: 0; text-align: right; }
  .data-table--stack td::before { content: attr(data-label); color: var(--ink-soft); text-align: left; font-size: 12.5px; }
  .data-table--stack td.reg-name { display: block; text-align: left; font-weight: 600; padding-bottom: 6px; }
  .data-table--stack td.reg-name::before { content: none; }
}

/* ==== Visual stories: batch 3-D fixes (Oct 2026) ======================== */
/* Hero: a band, not a full screen. The title and standfirst sit inside it,
   so the band grows if they need more room. Per-image focus is set inline
   from story_visuals.HERO_POS. */
.vs-hero { min-height: min(64vh, 620px); }
@media (max-width: 700px) { .vs-hero { min-height: 76svh; } }

/* Stories index: the featured card puts its image beside the text from
   tablet width up, so the title is visible without scrolling. */
.card--feature .card-img { aspect-ratio: 16 / 9; max-height: 42vh; }
@media (min-width: 900px) {
  a.card.card--feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
  .card--feature .card-img { aspect-ratio: auto; height: 100%; min-height: 340px; max-height: min(62vh, 520px); }
  .card--feature .card-body { align-self: center; }
}

/* KPI strip: proportionate numerals, tighter rhythm. */
.vs-wall { gap: 22px 28px; margin-top: 28px; }
.vs-wall > div { padding-top: 12px; }
.vs-wall b { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.02em; }
.vs-wall span { font-size: 12.5px; margin-top: 7px; }

/* Ring charts: capped, so the ring does not swell to fill a wide column. */
.vs-donut { max-width: 280px; margin-inline: auto; }
@media (max-width: 860px) { .vs-donut { max-width: 250px; } }

/* Stepped figures: controls that read as controls. */
.vs-hint { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--on-deep-cyan); }
.vs-hint svg { flex: none; }
.no-js .vs-hint { display: none; }
.vs-tabbed-bar { margin-top: 10px; padding: 10px; gap: 10px; border-radius: 14px;
  background: rgb(255 255 255 / .05); border: 1px solid var(--vs-rule); }
.vs-tabbed-ctl button { color: #E6F2F8; background: rgb(255 255 255 / .1); border: 1.5px solid rgb(255 255 255 / .34);
  min-height: 38px; }
.vs-tabbed-ctl button:hover { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .6); }
.vs-tabbed-ctl button[aria-selected="true"] { background: var(--on-deep-cyan); border-color: #fff; color: #06212F;
  box-shadow: 0 0 0 2px rgb(134 214 232 / .35); }
.vs-tabbed-ctl button[aria-selected="true"] .vs-tabno { color: #06212F; opacity: 1; }
.vs-tabno { display: inline-grid; place-items: center; width: 20px; height: 20px; min-width: 0; margin-right: 7px;
  border-radius: 50%; font-size: 11.5px; background: rgb(255 255 255 / .14); color: #E6F2F8; }
.vs-tabbed-ctl button[aria-selected="true"] .vs-tabno { background: #06212F; color: var(--on-deep-cyan); }
.vs-tabbed-ctl button:focus-visible, .vs-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.vs-arrow { width: 38px; height: 38px; color: #fff; background: rgb(255 255 255 / .12); border: 1.5px solid rgb(255 255 255 / .4); }
.vs-arrow:disabled { opacity: .35; }
.vs-count { color: var(--on-deep-4); font-size: 13px; }
.vs-tabbed-caps { border-left: 3px solid var(--on-deep-cyan); padding-left: 14px; }
@media (max-width: 700px) {
  .vs-tabbed-bar { padding: 8px; }
  .vs-tabbed-ctl button { min-height: 40px; }
}

/* Notes fold label, a touch clearer on the dark ground. */
.vs .vs-srcnote .srcnote-fold > summary { color: var(--on-deep-4); border-color: rgb(255 255 255 / .3); }
.vs .vs-srcnote .srcnote-lead { color: var(--on-deep-6); }

/* ---- Knowledge-hub maps (batch 3, js/hubmap.js) ---------------------------------------------
   The Region Atlas lessons on every hub map: countries fill only, ONE border mesh, lines in
   screen pixels at any zoom, a hover outline of its own, and a soft animated lift on the
   hovered country. Zoom buttons sit top right; pinch and ctrl+scroll zoom too. */
.hm-stage { position: relative; overflow: hidden; border-radius: var(--radius-sm); }
.hm-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.hm-geo { fill: #D3E3EC; stroke: #D3E3EC; stroke-width: 1px; vector-effect: non-scaling-stroke; outline: none;
  transition: fill .35s ease, stroke .35s ease, filter .35s ease; }
.hm-geo.hm-on { fill: #BCD4E3; stroke: #BCD4E3; filter: brightness(1.05) saturate(1.15); }
.hm-geo.hm-glow { fill: #C6DAE7; stroke: #C6DAE7; filter: brightness(1.03) saturate(1.1); }
.hm-borders { fill: none; stroke: #fff; stroke-width: .9px; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; pointer-events: none; }
.hm-hl { fill: none; stroke: #0B3C5D; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  pointer-events: none; }
.hm-zoom { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.hm-zoom button { width: 32px; height: 32px; border: 1px solid #C9D4DC; border-radius: 8px; background: #fff;
  font-size: 17px; line-height: 1; cursor: pointer; color: #10202B; box-shadow: 0 1px 4px rgb(11 60 93 / .12);
  display: flex; align-items: center; justify-content: center; padding: 0; }
.hm-zoom button:hover { border-color: var(--blue-deep); color: var(--blue-deep); }
.hm-zoom button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
/* on a phone the buttons sit in a row in the band under the letterboxed map, off the land */
@media (max-width: 640px) { .hm-zoom { top: auto; bottom: 6px; right: 6px; gap: 6px; flex-direction: row; }
  .hm-zoom button { width: 36px; height: 36px; } }
.hm-marker { cursor: pointer; outline: none; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.hm-marker:hover, .hm-marker:focus-visible { transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) { .hm-geo, .hm-marker { transition: none; } }

/* Shared-waters maps (Groundwater, Conflict & Diplomacy hubs) */
.sw-map { background: #EAF3F8; border: 1px solid var(--border); padding: 8px; border-radius: var(--radius); }
.sw-map .notice { margin: 24px 8px; }
.sw-area { fill-opacity: .26; stroke-opacity: .85; stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  cursor: pointer; outline: none; transition: fill-opacity .15s ease; }
.sw-area:hover, .sw-area.is-hot, .sw-area:focus-visible { fill-opacity: .5; stroke-opacity: 1; stroke-width: 2.5px; }
.sw-toggle { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.sw-toggle button { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 13px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--ink-soft); cursor: pointer; }
.sw-toggle button[aria-pressed="true"] { border-color: var(--blue-deep); color: var(--blue-deep); font-weight: 600; }
.sw-toggle button[aria-pressed="false"] .swatch { opacity: .3; }
.sw-toggle button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.sw-toggle .swatch, .sw-legend .swatch { width: 14px; height: 12px; border-radius: 2px; display: inline-block; opacity: .75; }
.sw-legend { margin: 0 0 10px; }
.sw-fold { margin-top: 10px; font-family: var(--font-ui); }
.sw-fold > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--blue-deep); padding: 4px 0; }
.sw-hint { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 8px; }
.sw-list { list-style: none; margin: 0; padding: 0; columns: 2 300px; column-gap: 24px; }
.sw-list li { break-inside: avoid; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; line-height: 1.35; }
.sw-item { font: inherit; font-weight: 600; color: var(--blue-deep); background: none; border: 0; padding: 0; text-align: left;
  cursor: pointer; display: block; }
.sw-item:hover, .sw-item:focus-visible { text-decoration: underline; outline: none; }
.sw-who { color: var(--ink-soft); display: block; }

/* TFDD agreement table (Conflict & Diplomacy hub) */
.tt-block { margin-top: 28px; }
.tt-block h3 { margin-bottom: 6px; }
.tt-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0; }
.tt-q { flex: 1 1 280px; max-width: 460px; font-family: var(--font-ui); font-size: 15px; padding: 9px 12px;
  border: 1px solid #C9D4DC; border-radius: 8px; background: #fff; color: var(--ink); min-width: 0; }
.tt-q:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--blue-deep); }
.tt-count { font-family: var(--font-ui); font-size: 12.5px; margin: 0; }
.tt-table td { vertical-align: top; font-size: 13.5px; }
.tt-table td:first-child { white-space: nowrap; }
.tt-meta { font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
.tt-more { margin-top: 10px; }
@media (max-width: 640px) { .tt-table td:nth-child(4), .tt-table th:nth-child(4) { display: none; } }
@media (max-width: 640px) { .tt-table { min-width: 0; } }
/* A stepped figure never outgrows the screen, so its controls stay in reach. */
.vs-tabbed-fig svg { max-height: min(74vh, 660px); }
/* hub maps on a phone: a taller window (letterboxed at rest) so there is room to pinch in, as on the Region Atlas */
@media (max-width: 640px) { .hm-stage > .hm-svg { height: min(250px, 66vw); } }
.card--feature > picture { display: block; min-width: 0; }
@media (min-width: 900px) { .card--feature > picture { height: 100%; } }
.tt-m { display: none; }
@media (max-width: 640px) {
  .tt-table td:nth-child(3), .tt-table th:nth-child(3) { display: none; }
  .tt-table td, .tt-table th { padding: 10px 8px; }
  .tt-table td:first-child { white-space: normal; width: 74px; font-size: 12.5px; }
  .tt-m { display: block; font-size: 12px; color: var(--ink); margin-top: 6px; line-height: 1.4; }
}
.vs-ch .vs-tabbed .vs-hint { font-size: 12.5px; line-height: 1.4; max-width: none; margin: 16px 0 0; color: var(--on-deep-cyan); }
@media (max-width: 700px) {
  /* Steps first, full width; the arrows and the counter share the row below. */
  .vs-tabbed-ctl { order: -1; flex-basis: 100%; }
}
/* Note text at note size: .vs-ch p would otherwise set it as body copy. */
.vs .vs-ch .vs-srcnote .srcnote-body p { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6; max-width: none; margin: 0; }
.vs .vs-ch .vs-srcnote .srcnote-lead { font-family: var(--font-ui); font-size: 13px; line-height: 1.5; margin: 0 0 6px; }
/* Hub stat bands carry sentence-long labels: capitals would shout, so these stay in normal case. */
.section--aqua .stat-grid .stat .label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; line-height: 1.45; }
/* merged agreements table: source badges (TFDD / principal instrument / added by this site) */
.tt-src { display: inline-block; font-family: var(--font-ui); font-size: 11px; font-weight: 600; line-height: 1.3;
  padding: 2px 7px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.tt-src--tfdd { color: #3A5466; border-color: #B9C8D2; background: #F3F7FA; }
.tt-src--mwr { color: var(--blue-deep); border-color: var(--blue-deep); background: #fff; }
.tt-src--add { color: #7A3E1F; border-color: #D9A27F; background: #FBF1EA; white-space: normal; }
.tt-id { display: block; font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.tt-srccell { min-width: 150px; font-size: 12.5px; }
.tt-srccell a { font-family: var(--font-ui); font-size: 12px; }
.tt-title .status { margin-left: 6px; vertical-align: 1px; }
.tt-note { font-size: 12.5px; color: var(--ink); margin-top: 4px; line-height: 1.45; }
.tt-intro { margin-bottom: 4px; }
@media (max-width: 640px) { .tt-table td:nth-child(5), .tt-table th:nth-child(5) { display: none; } }

/* Hero "Sources and notes" folds sit at the end of the page, above the footer (batch 4) */
.srcnote-end { padding-block: 8px 40px; }
.srcnote-end .srcnote { margin: 0; }

/* Number cards: the thin top line is the same blue as the header and hero bands (--blue-deep) */
.stat-grid .stat, .stat-grid .stat:hover, .callout, .callout:hover, .kpi-band .callout { border-top-color: var(--blue-deep); }

/* Major projects: the scope note folds (batch 4) */
.scope-fold { margin-bottom: var(--s4); }
.scope-fold > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sand-text); padding: 8px 12px; background: var(--sand-tint); border: 1px solid var(--sand);
  border-radius: var(--radius-sm); }
.scope-fold > summary::-webkit-details-marker { display: none; }
.scope-fold > summary::after { content: "\25B8"; font-size: 11px; transition: transform .2s var(--ease-out); }
.scope-fold[open] > summary::after { transform: rotate(90deg); }
.scope-fold > summary:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; }
.scope-fold .scope-note { margin: 10px 0 0; }


/* ==== Batch 4-A2 (19 Oct 2026) ============================================ */
/* Dated rows (watch list, briefing archive, "what to watch"): the date as a small label, then the text,
   then the source line, never run together. */
.cal-list > li.cal-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 4px 20px;
  padding: 14px 0; border-top: 1px solid var(--border); }
.cal-list > li.cal-row:last-child { border-bottom: 1px solid var(--border); }
.cal-row .cal-when { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue-primary); padding-top: 3px; }
.cal-row .cal-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cal-row .cal-org { display: block; font-size: 14px; color: var(--ink-soft); }
.cal-row .cal-from { font-family: var(--font-ui); font-size: 12.5px; color: var(--blue-text); }
@media (max-width: 600px) { .cal-list > li.cal-row { grid-template-columns: 1fr; } }

/* A table (or its scroll wrapper) followed directly by text: room below it, site-wide. */
.table-wrap + p, .table-wrap + h2, .table-wrap + h3, .table-wrap + h4, .table-wrap + ul, .table-wrap + ol,
.table-wrap + .srcnote, .table-wrap + .chip-row { margin-top: 20px; }
table.data-table + p, table.data-table + h3, table.data-table + h4, table.data-table + ul { margin-top: 20px; }

/* Snapshot cards (Key institutions, Financing & PPP): one alignment for every row, label then value, both
   left-aligned in two fixed columns (no right-aligned short values beside left-aligned long ones). */
.snap-card .snap-list li { display: grid; grid-template-columns: minmax(0, 11.5em) minmax(0, 1fr); gap: 4px 16px;
  align-items: baseline; justify-content: start; }
.snap-card .snap-list .role { text-align: left; font-size: 13px; line-height: 1.45; }
@media (max-width: 520px) { .snap-card .snap-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Tariffs page: running text spans the same width as the charts and the table (batch 4) */
.bm-prose { max-width: 860px; }   /* the site's prose measure; charts and table stay full width */

/* Market-brief map (js/countryviews.js, data-mode="market"): stage entries in the legend
   switch a stage off and on (batch 4, Oct 2026) */
.cmap-stage { display: inline-flex; align-items: center; font-family: var(--font-ui); font-size: 12px; line-height: 1.3;
  padding: 3px 9px 3px 6px; border-radius: 6px; border: 1px solid #D3DEE5; background: #fff; color: #3A5466;
  cursor: pointer; }
.cmap-stage:hover, .cmap-stage:focus-visible { border-color: var(--blue-deep); outline: none; }
.cmap-stage[aria-pressed="false"] { opacity: .5; text-decoration: line-through; background: transparent; }
.cmap-stage-n { margin-left: 5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---- Key challenges / Developments to watch / Opportunities: premium panels (draft, 19 Oct 2026) */
.cw-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .cw-grid { grid-template-columns: 1fr 1fr; } }
.cw { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px 10px; overflow: hidden; }
.cw::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cw, var(--blue-deep)); }
.cw--chal { --cw: var(--terracotta, #B5532F); --cw-tint: color-mix(in srgb, var(--cw) 8%, #fff); }
.cw--watch, .cw--opp { --cw: var(--blue-primary); --cw-tint: color-mix(in srgb, var(--cw) 8%, #fff); }
.cw-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cw-ic { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--cw-tint); color: var(--cw); }
.cw-ic svg { width: 19px; height: 19px; }
.cw-eyebrow { margin: 0 0 2px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cw); }
.cw-head h3 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--blue-deep); }
.cw-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.cw-list li { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--border);
  transition: background-color .2s var(--ease-out); }
.cw-n { flex: none; font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--cw);
  font-variant-numeric: tabular-nums; letter-spacing: .04em; min-width: 20px; }
.cw-t { font-size: 15px; line-height: 1.55; color: var(--ink); }
.cw--watch .cw-list { position: relative; }
.cw--watch .cw-list li { position: relative; }
@media (hover: hover) { .cw-list li:hover .cw-n { color: var(--blue-deep); } }

/* ---- Story flow layout (approved 19 Oct 2026, all stories): one reading column. Hero title, intro, statements
   and prose share one measure and left edge; a figure that sat beside the text sits between paragraphs. Exception:
   the circle diagram stays beside its text, slightly smaller. */
.vs .vs-split { display: block; }
.vs .vs-split > div + div { margin-top: 28px; }
.vs .vs-split .vs-fig, .vs .vs-ch .container > .vs-fig { max-width: 760px; }
.vs .vs-say, .vs .vs-ch p, .vs .vs-ch h2, .vs .vs-hero h1, .vs .vs-hero .vs-sub, .vs .vs-hero p { max-width: 760px; }
.vs .vs-ch p:not(.vs-say) { font-size: 18px; }
@media (min-width: 861px) {
  .vs .vs-split:has(.vs-donut) { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; align-items: center;
    max-width: 1068px; }
  .vs .vs-split:has(.vs-donut) > div + div { margin-top: 0; }
}
.vs .vs-split .vs-fig.vs-donut, .vs .vs-fig.vs-donut { max-width: 260px; margin-inline: auto; }


/* ---- News (local draft, Oct 2026): homepage strip, index, item pages ------- */
.picks-band:has(+ .news-strip) { padding-bottom: var(--s5); }
.news-strip { padding-top: 0; padding-bottom: var(--s6); }
.ns-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; }
.ns-label { margin: 0; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-deep); }
.ns-all { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--blue-text); text-decoration: none; }
.ns-all:hover, .ns-all:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ns-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.ns-item { display: block; padding: 14px 0 6px; border-top: 1px solid var(--border); color: inherit;
  text-decoration: none; transition: border-color .2s var(--ease-out); }
.ns-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--font-ui);
  font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ns-country { font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--terracotta-text); }
.ns-title { margin: 8px 0 0; font-size: 18.5px; line-height: 1.3; font-weight: 600; color: var(--blue-deep);
  transition: color .2s var(--ease-out); }
.ns-item:hover, .ns-item:focus-visible { border-top-color: var(--blue-text); }
.ns-item:hover .ns-title, .ns-item:focus-visible .ns-title { color: var(--blue-text); }
@media (max-width: 960px) { .ns-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; } }
@media (max-width: 560px) {
  .ns-row { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 0 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--s3) * -1); padding-inline: var(--s3);
    scroll-padding-inline: var(--s3); -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .ns-item { scroll-snap-align: start; }
}

.news-index { max-width: 860px; }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-row { border-top: 1px solid var(--border); }
.news-row:last-child { border-bottom: 1px solid var(--border); }
.news-row a { display: block; padding: 22px 0 20px; color: inherit; text-decoration: none; }
.news-row-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-family: var(--font-ui);
  font-size: 12.5px; color: var(--ink-soft); }
.news-country { font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--terracotta-text); }
.news-topic { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.news-row h2 { margin: 8px 0 6px; font-size: 24px; line-height: 1.25; transition: color .2s var(--ease-out); }
.news-row p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); }
.news-row a:hover h2, .news-row a:focus-visible h2 { color: var(--blue-text); }
.news-meta { row-gap: 8px; }
.news-meta .news-topic { margin-left: auto; }
.news-why { padding-top: 4px; }
.news-sources, .news-related { margin-top: 36px; }
.news-sources h2, .news-related h2 { font-size: 22px; margin-bottom: 14px; }
.news-sources .src-list { margin: 0; padding-left: 20px; }
.news-back { margin-top: 36px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; }
@media (max-width: 560px) {
  .news-row h2 { font-size: 21px; }
  .news-meta .news-topic { margin-left: 0; flex-basis: 100%; }
}

/* ---- Snapshot reference panels (Key institutions, Financing & PPP): same language as the panels above (B5, 19 Oct 2026).
   Thin navy/blue top rule, icon tile, serif title, then label/value rows left-aligned in two columns. */
@media (min-width: 760px) { .cw-grid--ref { grid-template-columns: 1fr 1fr; } }
.cw--inst { --cw: var(--blue-deep); --cw-tint: color-mix(in srgb, var(--cw) 8%, #fff); }
.cw--fin { --cw: var(--blue-primary); --cw-tint: color-mix(in srgb, var(--cw) 8%, #fff); }
.cw-rows { list-style: none; margin: 0; padding: 0; }
.cw-rows li { display: grid; grid-template-columns: minmax(0, 10.5em) minmax(0, 1fr); gap: 4px 20px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid var(--border); }
.cw-k { font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--blue-deep);
  overflow-wrap: anywhere; }
.cw-v { font-size: 15px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.cw-v a { color: var(--blue-text); }
@media (max-width: 520px) {
  .cw { padding: 20px 18px 6px; }
  .cw-rows li { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 12px 0; }
  .cw-k { font-size: 13px; letter-spacing: .01em; }
}

/* ---- Company profile pages: link under a directory name -------------------- */
.org-prof { font-family: var(--font-ui); font-size: 12px; color: var(--blue-text); }

/* ---- Funding landscape (data/funding-landscape.html; draft 19 Oct 2026) ---- */
.fl-stack { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 22px 0 8px; }
.fl-card .cw-head { flex-wrap: wrap; row-gap: 8px; }
.fl-card .cw-head > div { flex: 1 1 14em; min-width: 0; }
.fl-chip { margin-left: auto; }
.fl-table { min-width: 0; }
.fl-table td, .fl-table th { white-space: normal; }
.fl-table td .status { white-space: normal; }
.fl-notes ul { margin: 8px 0 12px 1.1em; padding: 0; }
.fl-notes li { margin: 4px 0; }
@media (max-width: 620px) { .fl-chip { margin-left: 0; } .fl-card { padding-inline: 18px; } }
@media (max-width: 620px) {
  .fl-table { display: block; }
  .fl-table thead { display: none; }
  .fl-table tbody, .fl-table tr, .fl-table td { display: block; }
  .fl-table tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .fl-table tr:last-child { border-bottom: 0; }
  .fl-table td { border: 0; padding: 3px 14px; }
  .fl-table td.reg-name { font-weight: 600; color: var(--blue-deep); }
}

/* ui-batch7: footer contact line */
.footer-contact a { color: var(--on-deep-5); text-decoration: underline; text-underline-offset: 2px; }
.footer-contact a:hover, .footer-contact a:focus-visible { color: #fff; }

/* ui-batch7: clickable number cards (Data & Tools overview) */
a.stat.stat--link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.stat.stat--link:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 3px; transform: translateY(-2px);
  box-shadow: 0 8px 22px rgb(11 60 93 / .09); }
.dash-module[id] { scroll-margin-top: 96px; }

/* ui-batch7: country hero market-brief line (plain text + button) */
.hero-brief-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 0;
  font-family: var(--font-ui); font-size: 16px; color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / .45); }
.hero-brief-line .hero-brief-btn { margin-top: 0; text-shadow: none; }

/* ---- Region Atlas, batch 7 (20 Oct 2026) ------------------------------------
   Water-stress and "not rated" legend swatch; the one-at-a-time note under the land-shading
   layers; and the LAYOUT TEST: with class "atlas-layout--wide" on .atlas-layout (set in
   scripts/pages_tools.py by ATLAS_WIDE_TEST) the map spans the full content width and the layer
   controls and legends sit in a band below it. Remove the class (ATLAS_WIDE_TEST = False) to get
   the left-hand panel back. */
.legend .swatch.swatch--nodata { background: repeating-linear-gradient(135deg, #E9ECEE 0 3px, #B3BCC2 3px 5px); }
.layer-note { font-family: var(--font-ui); font-size: 12px; line-height: 1.45; color: var(--ink-soft); margin: 2px 0 0; }
.atlas-panel-actions { display: flex; flex-direction: column; gap: 10px; }
.atlas-panel-actions .btn { width: 100%; }
.atlas-layout--wide { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); }
.layer-toggle input, .layer-swatch { flex: none; }
.atlas-layout--wide .atlas-main { display: contents; }
.atlas-layout--wide .atlas-main > * { order: 6; }
.atlas-layout--wide .atlas-stage { order: 1; }
.atlas-layout--wide .atlas-panel { order: 2; position: static; display: grid; gap: 4px var(--s4);
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; padding: var(--s3); }
.atlas-layout--wide .atlas-panel .layer-group { margin-bottom: 0; }
.atlas-layout--wide .atlas-panel .layer-group:first-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
.atlas-layout--wide .atlas-panel .layer-group:first-child h2 { grid-column: 1 / -1; }
.atlas-layout--wide .atlas-panel .layer-toggle { padding: 5px 0; }
.atlas-layout--wide .atlas-panel-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; padding-top: var(--s2);
  border-top: 1px solid var(--border); margin-top: 8px; }
.atlas-layout--wide .atlas-panel-actions .btn { width: auto; }
.atlas-layout--wide #atlas-legend { order: 3; margin-top: 0 !important; }
.atlas-layout--wide .atlas-key { order: 4; margin-top: 0 !important; }
.atlas-layout--wide #atlas-list { order: 5; }
@media (max-width: 900px) {
  .atlas-layout--wide .atlas-panel { grid-template-columns: 1fr; gap: var(--s2); }
  .atlas-layout--wide .atlas-panel .layer-group:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .atlas-layout--wide .atlas-panel .layer-group:first-child { grid-template-columns: 1fr; }
}

/* ui-batch7: Live tenders, "What this list covers" fold under the hero; public channel list in two columns */
.tn-covers { padding-top: 22px; }
.tn-covers-fold { margin-bottom: 0; }
.tn-covers-body { margin-top: 10px; max-width: 760px; font-family: var(--font-ui); font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.tn-covers-body ul { margin: 0; padding-left: 20px; }
.tn-covers-body li { margin: 0 0 6px; }
.tn-covers-body strong { color: var(--ink); }
.tsrc.tsrc--public > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
@media (max-width: 860px) { .tsrc.tsrc--public > li { grid-template-columns: 1fr; } }

/* ---- News cards (20 Oct 2026): white card, thin navy top rule, small-caps meta, serif headline, subtle lift.
   Same language as the .cw panels and number cards. Overrides the first News block above. */
.ns-row { gap: 20px; }
.ns-item, .news-row a { position: relative; display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 20px 18px; overflow: hidden; color: inherit; text-decoration: none;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out); }
.ns-item::before, .news-row a::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--blue-deep); }
.ns-item:hover, .ns-item:focus-visible, .news-row a:hover, .news-row a:focus-visible { border-color: var(--border); }
.ns-item:focus-visible, .news-row a:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 3px; }
@media (hover: hover) {
  .ns-item:hover, .news-row a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
}
.ns-meta { gap: 2px 10px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ns-meta time { font-variant-numeric: tabular-nums; }
.ns-title { margin: 12px 0 0; font-family: var(--font-display); font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--blue-deep); }
.ns-item:hover .ns-title, .ns-item:focus-visible .ns-title { color: var(--blue-deep); }
.ns-topic { margin-top: auto; padding-top: 16px; font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue-text); }
.ns-topic::after { content: " \2192"; transition: margin-left .2s var(--ease-out); }
@media (hover: hover) { .ns-item:hover .ns-topic::after { margin-left: 3px; } }
@media (max-width: 960px) { .ns-row { gap: 20px; } }
@media (max-width: 560px) {
  .ns-row { grid-auto-columns: 82%; gap: 14px; padding-top: 6px; padding-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-item, .news-row a { transition: none; }
  .ns-item:hover, .news-row a:hover { transform: none; }
}

.news-index { max-width: none; }
.news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.news-row, .news-row:last-child { border: 0; }
.news-row a { padding: 24px 24px 22px; }
.news-row-meta { gap: 2px 12px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.news-row-meta time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.news-row-meta .news-topic { margin-left: auto; }
.news-row h2 { margin: 12px 0 10px; font-size: 22px; line-height: 1.27; color: var(--blue-deep); }
.news-row a:hover h2, .news-row a:focus-visible h2 { color: var(--blue-deep); }
.news-row p { font-size: 15.5px; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden; }
@media (max-width: 760px) {
  .news-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .news-row a { padding: 22px 20px 20px; }
  .news-row-meta .news-topic { margin-left: 0; flex-basis: 100%; }
}

/* ---- Live tenders: condensed filter area (20 Oct 2026) ---- */
.toolbar .tb-break { flex-basis: 100%; height: 0; margin: 0; }
.toolbar .budget-wrap { flex: 0 1 auto; padding-top: 0; order: 0; }
.budget-filter { width: auto; display: grid; grid-template-columns: 260px auto; gap: 2px 20px; align-items: center; }
.bf-head { grid-column: 1 / -1; display: flex; gap: 14px; align-items: baseline; justify-content: space-between; }
.bf-acts { display: inline-flex; gap: 12px; font-family: var(--font-ui); font-size: 12.5px; }
.bf-acts [hidden] { display: none; }
.budget-filter .bf-readout { grid-column: 1; }
.budget-filter .bf-check { grid-column: 2; grid-row: 3; }
.budget-filter .brange { grid-column: 1; }
@media (max-width: 640px) {
  .budget-filter { grid-template-columns: 1fr; width: 100%; }
  .toolbar .budget-wrap { flex: 1 1 100%; }
  .budget-filter .bf-check { grid-column: 1; grid-row: auto; min-height: 40px; }
  .budget-filter .brange { max-width: none; }
}

/* About page photograph with its credit line (20 Oct 2026) */
.about-photo { margin: var(--s4, 32px) 0; }
.about-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius, 6px); }

/* News index: one full-width card per row (20 Oct 2026) */
.news-list { grid-template-columns: minmax(0, 1fr); }
.news-row p { -webkit-line-clamp: 4; max-width: 90ch; }
#tenders-table .field select#f-source { width: 170px; min-width: 0; }
@media (max-width: 640px) { #tenders-table .field select#f-source { width: 100%; } }

/* News strip as a sideways carousel (20 Oct 2026): four cards in view on desktop,
   two on tablets, one and a bit on phones; the arrows come from js/main.js
   (no autoplay, Ruben's call). Without JS it is a plain swipe/scroll row. */
.ns-head { align-items: center; }
.ns-ctrl { display: inline-flex; gap: 6px; margin-left: auto; }
.ns-ctrl[hidden] { display: none; }
.ns-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--blue-deep); cursor: pointer;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out); }
.ns-btn:hover { border-color: var(--blue-text); }
.ns-btn:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 2px; }
.ns-btn:disabled { opacity: .4; cursor: default; }
.ns-row { display: grid; grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  margin: -6px -6px 0; padding: 6px 6px 16px; scroll-padding-inline: 6px; }
.ns-row::-webkit-scrollbar { display: none; }
.ns-row:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 2px; }
.ns-item { scroll-snap-align: start; }
@media (max-width: 960px) { .ns-row { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 560px) {
  .ns-row { grid-auto-columns: 82%; gap: 14px; margin-inline: calc(var(--s3) * -1); padding-inline: var(--s3);
    scroll-padding-inline: var(--s3); }
}
@media (prefers-reduced-motion: reduce) { .ns-row { scroll-behavior: auto; } }