/* ==========================================================================
   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);
  transition: box-shadow .25s;  /* the header box itself never changes padding */
}
.site-header.scrolled { box-shadow: 0 4px 20px rgb(11 60 93 / .07); }
.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 */
.chart-inline { max-width: 600px; margin: 18px 0 8px; }
.chart-inline .chart-card { margin-top: 12px; }
/* 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 > ul, .report-body > ol { max-width: 860px; }
.chart-card h3 { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 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; }
.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 .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; }
.icon-list li { display: flex; gap: 12px; padding: 10px 0; font-size: 15px; align-items: flex-start; }
.icon-list svg { width: 20px; height: 20px; stroke: var(--blue-primary); flex-shrink: 0; margin-top: 3px; }

/* ---- 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; }
.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; }
.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; }
.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; }
.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; }
.atlas-geo { fill: #CDE0EC; stroke: #fff; stroke-width: 1; transition: stroke .15s; }
.atlas-geo:hover, .atlas-geo:focus-visible { stroke: #0B3C5D; stroke-width: 1.6; outline: none; }
.atlas-river { fill: none; stroke: var(--cyan); stroke-width: 2.4; opacity: .8; }
.js .atlas-river { stroke-dasharray: 8 6; animation: flow 2.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .js .atlas-river { animation: none; } }
@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; }
#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-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; }
@media (max-width: 680px) { .inst-list { grid-template-columns: 1fr; } }
.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; }
sup.fnref + sup.fnref::before { content: ","; color: var(--blue-text); font-size: 11.5px; }
/* 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,
.sr--dark sup.fnref + sup.fnref::before, .story-chapter sup.fnref + sup.fnref::before { 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; }
/* 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); }
.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 .ch-row .bar-rect, .chart-interactive .ch-bar rect { transition: opacity .18s, filter .18s; }
.chart-interactive:hover .ch-row .bar-rect { opacity: .55; }
.chart-interactive .ch-row.ch-active .bar-rect,
.chart-interactive .ch-row:hover .bar-rect { opacity: 1; filter: brightness(1.06); }
.chart-interactive .ch-pt circle:last-child,
.chart-interactive .ch-dot circle:last-child { transition: r .16s var(--ease-out); }
.chart-interactive .ch-pt.ch-active circle:last-child,
.chart-interactive .ch-dot.ch-active circle:last-child { r: 8; }
.chart-interactive .ch-row:focus-visible .bar-rect,
.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; }
/* wide charts scroll inside their card, never the page */
.chart-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.chart-scroll > svg { min-width: 640px; }
/* 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; }
/* 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: 14px 0 0; padding: 0; }
.cal-row { display: grid; grid-template-columns: 200px 1fr auto auto; gap: 16px;
  align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--border);
  font-family: var(--font-ui); font-size: 14px; }
.cal-when { font-weight: 600; color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.cal-main a { font-weight: 600; }
.cal-org { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.cal-check { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 860px) {
  .cal-row { grid-template-columns: 1fr; gap: 4px; }
  .cal-check { order: 5; }
}


/* ---- 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: #071E2E; --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; opacity: .52; }
.vs-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(7 30 46 / .55) 0%, rgb(7 30 46 / .25) 45%, var(--vs-ground) 100%); }
.vs-hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 var(--s4) clamp(44px, 7vw, 86px); }
.vs-hero h1 { font-size: clamp(42px, 8.5vw, 104px); line-height: .96; letter-spacing: -.03em;
  color: #fff; margin: 0 0 20px; max-width: 14ch; }
.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: var(--on-deep-2);
  max-width: 46ch; margin: 0; }

/* ---- Chapter ---- */
.vs-ch { padding-block: clamp(64px, 9vw, 128px); border-top: 1px solid var(--vs-rule); }
.vs-ch:first-of-type { border-top: 0; }
.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: balance; }
.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 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .58; }
.vs-break::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, var(--vs-ground) 0%, rgb(7 30 46 / .15) 32%, rgb(7 30 46 / .2) 68%, var(--vs-ground) 100%); }
.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; color: var(--on-deep-6);
  max-width: 64ch; }

/* ---- 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); }

/* ==== 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%); }
.hero-credit { position: absolute; right: var(--s3); bottom: 14px; z-index: 2; margin: 0;
  font-family: var(--font-ui); font-size: 11.5px; color: rgb(255 255 255 / .78);
  text-shadow: 0 1px 6px rgb(0 0 0 / .6); }

/* 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; }
}

/* Project tracker: plain rows, the way the trade press lays it out. */
.trk { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(255 255 255 / .16); }
.trk-row { display: grid; grid-template-columns: 124px minmax(0, 1fr) 140px 150px 84px; gap: 18px;
  align-items: baseline; padding: 16px 4px; border-bottom: 1px solid rgb(255 255 255 / .12);
  font-family: var(--font-ui); font-size: 14px; color: var(--on-deep-3); }
.trk-sector { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-deep-cyan); }
.trk-main a { display: block; color: #fff; font-family: var(--font-display); font-size: 17.5px;
  font-weight: 600; line-height: 1.3; text-decoration: none; }
.trk-main a:hover { text-decoration: underline; text-underline-offset: 3px; }
.trk-note { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--on-deep-6); }
.trk-country { color: var(--on-deep-2); }
.trk-stage { font-weight: 600; color: var(--on-deep-1); }
.trk-stage::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px; background: var(--on-deep-6); vertical-align: 1px; }
.trk-stage--in-tender::before { background: #E6C987; }
.trk-stage--awarded::before { background: #A9E3C4; }
.trk-stage--under-construction::before { background: var(--on-deep-cyan); }
.trk-stage--planned::before { background: #C7B9E4; }
.trk-stage--stalled::before { background: #F0A387; }
.trk-date { text-align: right; font-variant-numeric: tabular-nums; color: var(--on-deep-6); }
.trk-foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  justify-content: space-between; }
.chip--deep { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .18); color: var(--on-deep-1); }
.chip--deep:hover { background: rgb(255 255 255 / .12); color: #fff; text-decoration: none; }
@media (max-width: 900px) {
  .trk-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 16px; }
  .trk-sector, .trk-main { grid-column: 1 / -1; }
  .trk-main { margin-bottom: 4px; }
}
@media (max-width: 480px) {
  .trk-row { grid-template-columns: minmax(0, 1fr) auto; }
  .trk-date { grid-column: 2; grid-row: 4; }
  .trk-stage { grid-column: 1; grid-row: 4; }
  .trk-country { grid-column: 1 / -1; }
}

/* 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-note { display: block; margin-top: 3px; font-family: var(--font-ui); font-size: 11.5px;
  font-weight: 600; letter-spacing: .02em; color: var(--sand-text); }
.mt-original { grid-column: 1 / -1; }
.mt-original dd[lang="ar"] { font-size: 16px; line-height: 1.6; }
.table-more { margin-top: 16px; }