@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap");

/* Satoshi — the typeface used in the Figma design (free via Fontshare) */
:root {
  /* Brand palette, sampled from the Figma concentric-ring graphic */
  --c-bg: #0e0e0e;
  --c-surface: #1a1a1a;
  --c-text: #ffffff;
  --c-text-muted: #b8b8b8;
  /* Channel triples so alpha-composited foreground/surface colours can flip
     with the theme while keeping their per-use opacity. */
  --c-fg-rgb: 255, 255, 255;
  --c-surface-rgb: 18, 18, 18;
  /* Recolours the single-tone WHO mark in the footer — white on dark. */
  --illo-filter: brightness(0) invert(1);
  --c-teal: #24aca4;
  --c-teal-light: #63c1c2;
  --c-blue: #4690cd;
  --c-blue-light: #84b9e1;
  --c-purple: #8c6cc6;
  --c-purple-light: #b297c7;

  --maxw: 1440px;
  --pad-x: clamp(24px, 5vw, 96px);

  font-family: "Satoshi", system-ui, -apple-system, sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
}
/* Light theme — flip the base tones; everything else is derived from these. */
:root[data-theme="light"] {
  --c-bg: #ffffff;
  --c-surface: #f4f4f5;
  --c-text: #16181d;
  --c-text-muted: #5b6068;
  --c-fg-rgb: 22, 24, 29;
  --c-surface-rgb: 255, 255, 255;
  --illo-filter: brightness(0);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
/* ---------- Per-module layout ---------- */
html {
  scroll-behavior: smooth;
  /* keep anchored section tops clear of the fixed top bar */
  scroll-padding-top: 64px;
}
.hero,
.section {
  /* ~full screen, but capped so on tall monitors short modules (hero, By
     region) don't over-centre — keeps inter-module spacing even everywhere */
  min-height: min(90vh, 800px);
}
/* ---------- Generic section ---------- */
.section {
  /* caps at 120px each side → ~240px between modules; won't keep growing on
     tall screens (was 14vh, which ballooned the gaps) */
  padding-block: clamp(88px, 12vh, 120px);
  display: flex;
  flex-direction: column;
  /* centre when content fits; fall back to top-aligned when taller than viewport */
  justify-content: safe center;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* ---------- Side-dot navigation ---------- */
/* Hidden for now — the top bar covers section navigation. The markup stays so
   it still drives active-link tracking and keyboard paging; flip to flex/block
   to bring the dots back. */
.dotnav {
  display: none;
  position: fixed;
  /* Hug the right edge of the content column on wide screens instead of the
     far viewport edge, but never sit closer than the min gap on narrow ones. */
  right: max(clamp(14px, 2vw, 30px), calc(50vw - var(--maxw) / 2 - 36px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
}
.dotnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dotnav__dot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  text-decoration: none;
}
.dotnav__dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 6px;
  background: rgba(var(--c-fg-rgb), 0.35);
  flex-shrink: 0;
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease;
}
.dotnav__dot:hover::after {
  background: rgba(var(--c-fg-rgb), 0.7);
}
/* Active marker keeps the dot's width and stretches vertically into a
   rounded capsule, so the transition reads as the dot elongating. */
.dotnav__dot.is-active::after {
  width: 8px;
  height: 26px;
  background: var(--c-text);
}
.dotnav__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: var(--c-text);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.dotnav__dot:hover .dotnav__label {
  opacity: 1;
  transform: none;
}
.dotnav__dot:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (max-width: 640px) {
  .dotnav {
    display: none;
  }
}
.section__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  color: var(--c-text);
}
.section__rule {
  height: 2px;
  background: rgba(var(--c-fg-rgb), 0.25);
  margin-top: 20px;
}
.section__intro {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-muted);
}
/* ---------- Region share ---------- */
.region-share__body {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(40px, 6vw, 96px);
}
.region-share__map {
  position: relative;
}
.region-share__map-svg svg {
  display: block;
  width: 100%;
  height: auto;
}
.map-region {
  cursor: pointer;
}
/* Cursor-following tooltip over the map. */
.region-tooltip {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(var(--c-surface-rgb), 0.6);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(var(--c-fg-rgb), 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font-size: 12px;
  line-height: 1.3;
  color: var(--c-text);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  transition: opacity 0.15s ease;
}
.region-tooltip.is-visible {
  opacity: 1;
}
.region-tooltip__name {
  font-weight: 600;
  border-left: 3px solid var(--accent, var(--c-text));
  padding-left: 7px;
}
.region-tooltip__meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding-left: 10px;
}
.region-tooltip__value {
  font-weight: 600;
  color: var(--accent, var(--c-text));
}
.region-tooltip__rank {
  color: var(--c-text-muted);
}
/* Hover linking: dim everything not under the cursor. */
.map-region {
  transition: opacity 250ms ease;
}
.region-share.is-highlighting .is-dimmed {
  opacity: 0.2;
}
.region-legend {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  /* Column-major: each WHO region pairs top/bottom in a column, so
     "No data" lands in the 4th column — to the right of South-East Asia. */
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: 10px 28px;
  width: fit-content;
}
.region-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
}
.region-legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}
.region-legend__swatch--empty {
  background: transparent;
  border: 1px solid rgba(var(--c-fg-rgb), 0.4);
}
.region-share__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 48px);
}
.region-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 250ms ease;
}
.region-stat__value {
  font-family: "Helvetica Neue", Arial, "Satoshi", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1;
  color: var(--accent);
}
.region-stat__rule {
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}
.region-stat__name {
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--accent);
}
@media (max-width: 860px) {
  .region-share__body {
    grid-template-columns: 1fr;
  }
  .region-legend {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(2, auto);
  }
}
/* ---------- Level 2 bubble matrix ---------- */
.level2__body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(32px, 5vw, 64px);
}
.level2__how {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--c-fg-rgb), 0.25);
}
.level2__howto {
  display: block;
  width: 100%;
  height: auto;
  margin: 28px 0 12px;
}
/* sample bubble separator ring matches the page background in either theme */
.l2-howto-bubble {
  stroke: var(--c-bg);
}
.level2__paragraph {
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 32px 0 0;
}
.level2__matrix-wrap {
  overflow-x: auto;
}
.level2__matrix {
  display: grid;
  grid-template-columns: minmax(180px, auto) repeat(6, minmax(72px, 1fr));
  align-items: center;
  min-width: 620px;
}
.l2-head {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  text-align: center;
  padding: 0 4px 16px;
  line-height: 1.25;
  align-self: end;
}
.l2-cell {
  position: relative;
  height: 40px; /* < max bubble (52px) so large bubbles overlap rows */
  display: flex;
  align-items: center;
  justify-content: center;
}
.l2-cell--label {
  justify-content: flex-end;
  text-align: right;
  padding-right: 16px;
  font-size: 13px;
  color: var(--c-text-muted);
  height: 40px;
}
/* Per-row guide line — spans the plotting cells, behind the marks. */
.l2-cell:not(.l2-cell--label)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0.5px;
  background: rgba(96, 96, 96, 0.2);
  transform: translateY(-50%);
  z-index: 0;
}
/* Endpoint dots at the two ends of each row's guide line. */
.l2-cell--start::after,
.l2-cell--end::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(96, 96, 96, 0.2);
  transform: translateY(-50%);
  z-index: 0;
}
.l2-cell--start::after {
  left: 0;
}
.l2-cell--end::after {
  right: 0;
}
.l2-ring,
.l2-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.l2-bubble {
  z-index: 1;
  border: 1px solid var(--c-bg); /* 1px inside stroke per Figma */
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 250ms ease, box-shadow 250ms ease;
}
/* Hover hit-area is a centred transparent disc (~half the reference ring),
   so small bubbles are easy to target without enlarging the visual bubble. */
.l2-cell {
  pointer-events: none;
}
.l2-hit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
}
/* Hovering one bubble dims the other colour fills (rings/lines unaffected). */
.level2.is-bubble-hover .l2-bubble:not(.is-active) {
  opacity: 0.2;
}
/* ---------- Bubble tooltip (glass) ---------- */
.l2-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  min-width: 180px;
  max-width: 260px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(var(--c-surface-rgb), 0.72);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(var(--c-fg-rgb), 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.4;
}
.l2-tooltip__cause {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}
.l2-tooltip__region {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--c-text-muted);
  margin-bottom: 10px;
}
.l2-tooltip__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.l2-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0;
}
.l2-tooltip__row span {
  color: var(--c-text-muted);
}
.l2-tooltip__ci {
  color: #e0e0e0;
  font-variant-numeric: tabular-nums;
}
.l2-tooltip__rank {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--c-fg-rgb), 0.12);
  font-size: 12px;
  color: var(--c-text-muted);
}
/* Reference ring always sits above the bubble, larger or smaller. */
.l2-ring {
  border: 1px solid rgba(var(--c-fg-rgb), 0.18);
  z-index: 2;
}
.l2-rank {
  position: absolute;
  right: calc(50% + 30px);
  font-size: 13px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .level2__body {
    grid-template-columns: 1fr;
  }
}
/* ---------- Level 3 top-5 ---------- */
.level3__body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(32px, 4vw, 64px);
  margin-top: clamp(28px, 4vw, 48px);
  align-items: start;
}
/* Focus column stays in view while the matrix scrolls. */
.level3__aside {
  position: sticky;
  top: 24px;
}
/* Intro paragraph sits full-width above the chart. */
.level3__paragraph {
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 20px 0 0;
}
.level3__cta {
  color: var(--c-text);
}
.level3__matrix {
  display: grid;
  grid-template-columns: 32px repeat(6, minmax(0, 1fr));
  align-items: start;
}
.l3-head {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  text-align: center;
  padding: 0 4px 20px;
  line-height: 1.25;
}
.l3-rankcell {
  position: relative;
  font-size: 22px;
  font-weight: 600;
  color: var(--c-text-muted);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 24px;
}
.l3-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 26px;
}
.l3-mark {
  position: relative;
  height: 72px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.l3-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(var(--c-fg-rgb), 0.18);
  border-radius: 50%;
}
.l3-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--c-bg);
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 250ms ease, box-shadow 250ms ease;
}
.l3-label {
  font-size: 12px;
  line-height: 1.3;
  color: var(--c-text-muted);
  text-align: center;
  max-width: 130px;
  margin-top: 4px;
  text-transform: capitalize;
}
/* Selection ring via ::after so it's independent of the hover glow
   (which uses box-shadow) and appears the instant a bubble is clicked. */
.l3-bubble.is-selected::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(var(--c-fg-rgb), 0.9);
  border-radius: 50%;
  pointer-events: none;
}
/* ---------- Level 3 detail / focus view (lives in the left column) ---------- */
.level3__focus {
  position: relative;
  display: flex;
  justify-content: center;
}
.level3__focus-svg {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
}
.level3__focus-bubble {
  transition: r 0.6s cubic-bezier(0.16, 1, 0.3, 1), fill 0.45s ease;
}
.level3__detail-info {
  margin-top: 24px;
}
.level3__detail-head {
  margin-bottom: 24px;
}
.level3__detail-cause {
  margin: 0 0 14px;
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
  text-transform: capitalize;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Always reserve two lines so the panel below doesn't shift on selection. */
  min-height: 2.6em;
}
.level3__detail-region {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text-muted);
  font-size: 13px;
}
.level3__detail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.level3__detail-stat {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0;
  border-top: 1px solid rgba(var(--c-fg-rgb), 0.1);
  font-size: 14px;
}
.level3__detail-stat span {
  color: var(--c-text-muted);
}
.level3__detail-prev {
  font-size: 16px;
}
.level3__detail-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 16px 0 0;
}
@media (max-width: 900px) {
  .level3__body {
    grid-template-columns: 1fr;
  }
  /* Sticky overlaps the matrix when stacked — only pin on wide screens. */
  .level3__aside {
    position: static;
  }
}
@media (prefers-reduced-motion: reduce) {
  .level3__focus-bubble {
    transition: none;
  }
}
/* ---------- Disparities (tabbed region cards) ---------- */
.disp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(28px, 4vw, 48px) 0 clamp(24px, 3vw, 40px);
}
.disp-tab {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(var(--c-fg-rgb), 0.18);
  border-radius: 999px;
  color: var(--c-text-muted);
  font: inherit;
  font-size: 15px;
  padding: 9px 20px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.disp-tab:hover {
  color: var(--c-text);
  border-color: rgba(var(--c-fg-rgb), 0.4);
}
.disp-tab.is-active {
  color: var(--c-text);
  border-color: var(--tab-color);
  background: color-mix(in srgb, var(--tab-color) 22%, transparent);
}
.disp-card {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(24px, 3vw, 56px);
}
.disp-photo {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 440px;
  transition: opacity 0.25s ease;
}
.disp-photo.is-swapping {
  opacity: 0;
}
/* Alt-text chip — collapsed shows "Alt Text", expands on hover/focus. */
.disp-alt {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 28px);
  background: rgba(var(--c-surface-rgb), 0.7);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid rgba(var(--c-fg-rgb), 0.14);
  border-radius: 8px;
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.35;
  padding: 7px 12px;
  cursor: help;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
}
/* Collapsed shows the label; on hover/focus the label collapses away and the
   description wipes open — both width and opacity transition. */
.disp-alt__label,
.disp-alt__desc {
  display: inline-block;
  overflow: hidden;
  /* simple crossfade — width snaps, text fades (no horizontal wipe) */
  transition: opacity 0.25s ease;
}
.disp-alt__label {
  max-width: 120px;
  opacity: 1;
}
.disp-alt__desc {
  max-width: 0;
  opacity: 0;
}
.disp-alt:hover .disp-alt__label,
.disp-alt:focus-within .disp-alt__label {
  max-width: 0;
  opacity: 0;
}
.disp-alt:hover .disp-alt__desc,
.disp-alt:focus-within .disp-alt__desc {
  max-width: min(88vw, 460px);
  opacity: 1;
}
.disp-alt:focus,
.disp-alt:focus-within {
  box-shadow: 0 0 0 2px rgba(var(--c-fg-rgb), 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .disp-alt__label,
  .disp-alt__desc {
    transition: opacity 0.2s ease;
  }
}
.disp-content {
  display: flex;
  flex-direction: column;
}
.disp-condition {
  margin: 0 0 16px;
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 700;
}
.disp-paragraph {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-muted);
}
.disp-stats {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: 40px;
}
.disp-stat {
  flex: 1;
  max-width: 320px;
}
.disp-stat-value {
  font-family: "Helvetica Neue", Arial, "Satoshi", sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--c-fg-rgb), 0.35);
}
.disp-stat-label {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-text-muted);
}
/* Bar chart with white axes + dashed reference line */
.disp-chart {
  margin-bottom: 18px;
}
.disp-plot {
  position: relative;
  height: 240px;
  margin-left: 42px;
  border-left: 1.5px solid var(--c-text);   /* Y axis */
  border-bottom: 1.5px solid var(--c-text); /* X axis */
}
.disp-axis-label {
  position: absolute;
  left: -38px;
  width: 34px;
  text-align: right;
  font-size: 10px;
  color: var(--c-text);
}
.disp-axis-label--max { top: -6px; }
.disp-axis-label--zero { bottom: -6px; }
/* dashed reference line at the top of the scale, behind the bars */
.disp-ref {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-top: 1px dashed rgba(var(--c-fg-rgb), 0.45);
  z-index: 0;
}
.disp-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1.5vw, 18px);
  z-index: 1;
}
.disp-bar-col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.disp-bar-val {
  font-size: 11px;
  color: var(--c-text-muted);
  margin-bottom: 5px;
  white-space: nowrap;
}
.disp-bar-val.is-focus {
  color: var(--c-text);
}
.disp-bar {
  width: min(72%, 48px);
  height: 0;
  background-repeat: repeat;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  /* no border radius — square-topped bars sitting on the X axis */
}
.disp-xlabels {
  display: flex;
  gap: clamp(6px, 1.5vw, 18px);
  margin: 10px 0 0 42px;
}
.disp-xlabel {
  flex: 1;
  text-align: center;
  font-size: 11px;
  line-height: 1.2;
  color: var(--c-text-muted);
}
.disp-note {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(var(--c-fg-rgb), 0.4);
  margin: 0;
}
@media (max-width: 860px) {
  .disp-card {
    grid-template-columns: 1fr;
  }
  .disp-photo {
    min-height: 260px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .disp-panel,
  .disp-bar {
    transition: none;
  }
}
/* ---------- Why important (vertical tabs + resources) ---------- */
.why__tabs {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  margin-top: clamp(28px, 4vw, 48px);
}
.why-tablist {
  display: flex;
  flex-direction: column;
}
.why-tab {
  position: relative;
  isolation: isolate;
  width: 100%;
  border: 0;
  margin: 0;
  padding: clamp(18px, 2.2vw, 24px) clamp(16px, 2vw, 24px);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-left: 3px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: inset 0 -1px 0 rgba(var(--c-fg-rgb), 0.14);
  transition: border-color 0.45s ease;
}
.why-tab:first-child {
  box-shadow: inset 0 1px 0 rgba(var(--c-fg-rgb), 0.14),
    inset 0 -1px 0 rgba(var(--c-fg-rgb), 0.14);
}
/* Wash runs out of the rail, matching the resource cards. Its own layer so it
   can fade — background-image is not interpolable. */
.why-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c) 32%, transparent) 0%,
    transparent 46%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.why-tab.is-active::before {
  opacity: 1;
}
.why-tab:hover:not(.is-active)::before {
  opacity: 0.4;
}
.why-tab.is-active {
  border-left-color: var(--c);
  cursor: default;
}
.why-tab:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: -2px;
}
.why-tab__num {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--c);
  flex-shrink: 0;
  min-width: 22px;
}
.why-tab__title {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  color: rgba(var(--c-fg-rgb), 0.6);
  transition: color 0.3s ease;
}
.why-tab.is-active .why-tab__title,
.why-tab:hover .why-tab__title {
  color: var(--c-text);
}
/* Panel */
.why-panels {
  /* All five panels occupy the same cell, so the row is always as tall as the
     tallest one and switching tabs cannot move the page. Between ~860 and
     ~1024px the panel is the taller column, and without this the block jumped
     by up to 52px. */
  display: grid;
}
.why-panel {
  grid-area: 1 / 1;
}
.why-panel.is-hidden {
  visibility: hidden;
}
.why-panel:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 4px;
}
.why-panel__rule {
  height: 2px;
  width: 56px;
  background: var(--c);
  margin-bottom: 22px;
}
.why-panel__claim {
  margin: 0;
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text);
}
.why-panel__body {
  margin: 20px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(var(--c-fg-rgb), 0.78);
}
@media (max-width: 860px) {
  .why__tabs {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 36px);
  }
  .why-panels {
    min-height: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .why-tab,
  .why-tab::before,
  .why-tab__title {
    transition: none;
  }
}
/* ---------- Resources ---------- */
.why__resources-head {
  margin-top: clamp(56px, 8vh, 96px);
}
.why__resources-title {
  margin: 0;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 600;
  color: var(--c-text);
}
.why__resources-intro {
  margin: 12px 0 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(var(--c-fg-rgb), 0.82);
}
.why__resources {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(24px, 3vw, 32px);
}
/* Same vocabulary as an accordion row: a 3px rail on the left that saturates
   on hover, and the region-colour gradient washing down from the top. */
.why-res {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2vw, 26px);
  text-decoration: none;
  color: var(--c-text);
  background: rgba(var(--c-fg-rgb), 0.045);
  border-left: 3px solid color-mix(in srgb, var(--c) 55%, transparent);
  transition: border-color 0.45s ease, transform 0.25s ease;
}
/* the gradient is its own layer so it can fade in — background-image itself
   is not interpolable */
.why-res::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* washes out from the rail rather than down from the top edge, so the
     colour reads as coming from the bar itself, and runs the full width
     rather than stopping short of it */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c) 32%, transparent) 0%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.why-res:hover::before,
.why-res:focus-visible::before {
  opacity: 1;
}
.why-res:hover,
.why-res:focus-visible {
  border-left-color: var(--c);
  transform: translateY(-3px);
}
.why-res:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}
.why-res__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text-muted);
}
.why-res__name {
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-text);
}
.why-res__desc {
  /* pushes the CTA to a common baseline across the row */
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(var(--c-fg-rgb), 0.72);
}
.why-res__cta {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c);
}
/* The accent palette was picked for the dark ground; on white it drops to
   ~2.6:1, which fails WCAG AA for the small CTA text. Darken it for text use
   in the light theme only — the rail and the gradient keep the pure hue. */
:root[data-theme="light"] .why-res__cta,
:root[data-theme="light"] .why-tab__num {
  color: color-mix(in srgb, var(--c) 60%, #000);
}
@media (max-width: 1080px) {
  .why__resources {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .why__resources {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .why-res,
  .why-res::before {
    transition: none;
  }
}
/* Back-to-top at the foot of the last module */
.back-to-top-wrap {
  text-align: center;
  margin-top: clamp(40px, 6vh, 72px);
}
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(var(--c-fg-rgb), 0.2);
  background: transparent;
  color: var(--c-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.back-to-top:hover {
  color: var(--c-text);
  border-color: rgba(var(--c-fg-rgb), 0.42);
  background: rgba(var(--c-fg-rgb), 0.06);
}
.back-to-top svg {
  display: block;
}
/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* the landing fills the screen; content is centred and the scroll cue is
     pinned to the bottom (absolute), so the top/bottom stay balanced */
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(80px, 9vh, 120px);
}
/* The composed unit: text + rings together. Lives inside .container so its
   edges align with every other module; aspect ratio matches Figma Frame 121. */
.hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1327 / 620;
}
.hero__scroll {
  position: absolute;
  bottom: clamp(20px, 3.5vh, 40px);
  left: 50%;
  transform: translateX(-50%);
}
.hero__rings {
  position: absolute;
  right: 0;
  top: 0;
  /* 670 / 1327 of the stage width — keeps the SVG's 1:1 (undistorted) ratio */
  width: 50.49%;
  height: auto;
  /* let rotated rings paint past the viewBox rather than clip at its edge */
  overflow: visible;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  animation: ring-in 1.3s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero__content {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 22.9%; /* 142 / 620 */
  width: 66.1%; /* 877 / 1327 */
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 48px);
}
.hero__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.18;
}
.hero__body {
  margin: 0;
  font-weight: 400;
  font-size: clamp(13px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--c-text-muted);
}
.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.hero__scroll:hover {
  color: var(--c-text);
}
.hero__scroll svg {
  animation: scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes ring-in {
  from {
    opacity: 0;
    transform: scale(0.92) rotate(-6deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes scroll-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
/* Each ring spins about its own centre at a different rate, completing a whole
   number of turns so they all come to rest aligned, hold, then loop. */
.hr {
  transform-box: fill-box;
  transform-origin: center;
  /* start after the entrance settles; same duration keeps every ring in sync */
  animation-duration: 15s;
  animation-delay: 1.4s;
  animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  animation-iteration-count: infinite;
}
.hr--1 { animation-name: hr-spin-cw2; }
.hr--2 { animation-name: hr-spin-ccw3; }
.hr--3 { animation-name: hr-spin-cw1; }
.hr--4 { animation-name: hr-spin-ccw4; }
.hr--5 { animation-name: hr-spin-cw1; }
.hr--6 { animation-name: hr-spin-ccw2; }
@keyframes hr-spin-cw1 { 0% { rotate: 0deg; } 70%, 100% { rotate: 360deg; } }
@keyframes hr-spin-cw2 { 0% { rotate: 0deg; } 70%, 100% { rotate: 720deg; } }
@keyframes hr-spin-ccw2 { 0% { rotate: 0deg; } 70%, 100% { rotate: -720deg; } }
@keyframes hr-spin-ccw3 { 0% { rotate: 0deg; } 70%, 100% { rotate: -1080deg; } }
@keyframes hr-spin-ccw4 { 0% { rotate: 0deg; } 70%, 100% { rotate: -1440deg; } }
@media (prefers-reduced-motion: reduce) {
  .hero__rings,
  .hero__scroll svg {
    animation: none;
    opacity: 1;
  }
  .hr {
    animation: none;
  }
}
/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.topbar.is-scrolled {
  background: rgba(var(--c-surface-rgb), 0.62);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom-color: rgba(var(--c-fg-rgb), 0.1);
}
.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 56px;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  gap: 24px;
}
.topbar__brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  margin-left: auto;
}
.topbar__nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
}
.topbar__link {
  padding: 4px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.topbar__link:hover {
  color: var(--c-text);
}
.topbar__link.is-active {
  color: var(--c-text);
}
.topbar__theme {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--c-fg-rgb), 0.2);
  background: transparent;
  color: var(--c-text);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.topbar__theme:hover {
  background: rgba(var(--c-fg-rgb), 0.08);
  border-color: rgba(var(--c-fg-rgb), 0.32);
}
.topbar__theme:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 3px;
}
.topbar__theme svg {
  width: 18px;
  height: 18px;
  display: block;
}
@media (max-width: 720px) {
  .topbar__nav {
    display: none;
  }
}
/* ---------- Partner logos (header credit + footer) ---------- */
/* The VFSG lockup ships in two versions; show the one that fits the theme. */
.vfsg--on-light {
  display: none;
}
.vfsg--on-dark {
  display: block;
}
:root[data-theme="light"] .vfsg--on-dark {
  display: none;
}
:root[data-theme="light"] .vfsg--on-light {
  display: block;
}
/* WHO mark is recoloured to match the theme (black on light, white on dark);
   both logos share a height so they read as a balanced pair. */
.who-logo {
  height: 40px;
  width: auto;
  display: block;
  filter: var(--illo-filter);
}
.vfsg {
  height: 40px;
  width: auto;
}
/* Header credit — sits at the top-left of the hero stage, above the title. */
.hero__credit {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero__credit-sep {
  width: 1px;
  height: 30px;
  background: rgba(var(--c-fg-rgb), 0.25);
}
/* Footer */
.site-footer {
  margin-top: clamp(48px, 9vh, 120px);
  padding-block: clamp(40px, 6vw, 72px);
  border-top: 1px solid rgba(var(--c-fg-rgb), 0.12);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.site-footer__logos {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.5vw, 48px);
}
.site-footer__credit {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text-muted);
  text-wrap: pretty;
}
.site-footer__source {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text-muted);
}
@media (max-width: 620px) {
  .site-footer__logos {
    flex-wrap: wrap;
  }
  .who-logo,
  .vfsg {
    height: 32px;
  }
}