/* ══════════════════════════════════════════════════════════════════
   DysNet — demo site stylesheet
   Architecture: HDS editorial design system (golden ratio φ = 1.618;
   one background; tick + numbered-eyebrow openers; floating sheets).
   Brand: DysNet purple + green, sampled from the DysNet wordmark
   (#b100ff / #70ff58) and adjusted to WCAG-AA web tones.
   Never hardcode a spacing or heading size — consume the tokens.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Spacing scale — each step ×φ from 1rem. Pick a step, never in between. */
  --space-1: 0.625rem;   /*  10px — icon gaps, chip padding      */
  --space-2: 1rem;       /*  16px — inside cards; tick → label   */
  --space-3: 1.625rem;   /*  26px — card padding, grid gutters   */
  --space-4: 2.625rem;   /*  42px — heading → content            */
  --space-5: 3.4375rem;  /*  55px — section padding (each side)  */
  --space-6: 4.25rem;    /*  68px — sheet inner padding          */
  --space-7: 6.875rem;   /* 110px — section-to-section gap       */

  --section-pad: var(--space-5);
  --grid-gutter: var(--space-3);

  /* The single content column */
  --content-col: 64rem;
  --prose-max: 46rem;
  --heading-max: 48rem;

  /* Type scale — √φ ladder */
  --text-hero:    clamp(2.618rem, 6vw, 4.236rem);
  --text-display: clamp(2.618rem, 5vw, 3.33rem);
  --text-h2-lg:   clamp(2.058rem, 4.5vw, 2.618rem);
  --text-h2:      clamp(1.618rem, 3.5vw, 2.058rem);
  --text-h3:      1.618rem;
  --text-h4:      1.272rem;
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-eyebrow: 0.75rem;
  --leading-body: 1.618;

  /* Section opener */
  --tick-w: 2.618rem;
  --tick-h: 4px;

  /* ── DysNet brand ──────────────────────────────────────────────
     Decorative tokens carry no text; -text tokens are AA on the
     background; -deep carries light text. */
  --dys-bg: #faf7fe;               /* the one background            */
  --dys-ink: #241a33;
  --dys-muted: #5d5470;            /* ≥5:1 on --dys-bg              */
  --dys-line: #e6dcf2;

  --dys-purple: #9333ea;           /* decorative                    */
  --dys-purple-text: #7222c2;      /* text/links, ≥5:1              */
  --dys-purple-deep: #47156e;      /* act-now surfaces              */
  --dys-purple-soft: #f3e8fd;      /* chips, tints                  */

  --dys-green: #4cc42c;            /* decorative (logo green)       */
  --dys-green-text: #2c7a1a;       /* text, ≥5:1                    */
  --dys-green-soft: #e9f9e4;

  /* Register accents — colour identifies each register everywhere
     (tick + eyebrow + card top border only, never backgrounds). */
  --acc-library: #9333ea;   --acc-library-text: #7222c2;
  --acc-studies: #16a34a;   --acc-studies-text: #15803d;
  --acc-research: #2563eb;  --acc-research-text: #1d4ed8;
  --acc-centres: #ea580c;   --acc-centres-text: #c2410c;

  --acc: var(--dys-purple);
  --acc-text: var(--dys-purple-text);

  --radius-sheet: 1.5rem;
  --radius-card: 1rem;
}

/* ── Base ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--dys-bg);
  color: var(--dys-ink);
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--dys-purple-text); }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0 0 var(--space-2); max-width: var(--heading-max); font-weight: 700; letter-spacing: -0.01em; }
p, ul, ol { max-width: var(--prose-max); margin: 0 0 var(--space-2); }
figure { margin: 0; }

.container { max-width: var(--content-col); margin: 0 auto; padding-inline: 1.5rem; }
section { padding-block: var(--section-pad); }

.hero-h1 { font-size: var(--text-hero); line-height: 1.08; }
.display { font-size: var(--text-display); line-height: 1.1; }
.h2-lg { font-size: var(--text-h2-lg); line-height: 1.15; }
.h2 { font-size: var(--text-h2); line-height: 1.2; }
.h3 { font-size: var(--text-h3); line-height: 1.3; }
.h4 { font-size: var(--text-h4); line-height: 1.4; }

/* ── Section opener: tick, numbered eyebrow, heading ───────────── */
.tick { width: var(--tick-w); height: var(--tick-h); background: var(--acc); margin-bottom: var(--space-2); border-radius: 2px; }
.eyebrow {
  font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--acc-text); margin: 0 0 var(--space-3);
}

/* ── Demo ribbon ───────────────────────────────────────────────── */
.demo-ribbon {
  background: var(--dys-purple-deep); color: #f3e8fd; text-align: center;
  font-size: var(--text-small); padding: 0.45rem 1rem;
}
.demo-ribbon strong { color: #fff; }

/* ── Header ────────────────────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 254, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--dys-line);
}
.site-bar { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); }
.logo { display: flex; align-items: center; gap: var(--space-1); text-decoration: none; }
.logo svg { height: 2.4rem; width: auto; }
nav.main { margin-left: auto; display: flex; align-items: center; gap: clamp(0.6rem, 2vw, var(--space-3)); flex-wrap: wrap; }
nav.main a:not(.btn) {
  text-decoration: none; color: var(--dys-ink); font-weight: 600; font-size: 0.95rem;
  padding: 0.35rem 0.15rem; border-bottom: 3px solid transparent;
}
nav.main a:hover:not(.btn) { color: var(--dys-purple-text); }
nav.main a[aria-current="true"] { border-bottom-color: var(--dys-green); color: var(--dys-purple-text); }

.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: 0.7rem 1.35rem; border-radius: 999px; font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap; flex-shrink: 0;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--dys-purple-deep); color: #fff; }
.btn-ghost { border: 2px solid var(--dys-purple); color: var(--dys-purple-text); }
.btn-light { background: #fff; color: var(--dys-purple-deep); }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero { padding-block: var(--space-5) var(--space-5); }
.hero-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 56rem) { .hero-grid { grid-template-columns: 7fr 5fr; } }
.hero .kicker { color: var(--dys-green-text); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--text-eyebrow); margin-bottom: var(--space-2); }
.hero h1 em { font-style: normal; color: var(--dys-purple-text); }
.hero-photo { border-radius: var(--radius-sheet); overflow: hidden; box-shadow: 0 20px 50px -20px rgba(71, 21, 110, 0.35); }
.hero-photo img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

/* Stat chips */
.stats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); padding: 0; list-style: none; max-width: none; }
.stats li {
  background: #fff; border: 1px solid var(--dys-line); border-radius: var(--radius-card);
  padding: var(--space-1) var(--space-2); font-size: var(--text-small); color: var(--dys-muted);
}
.stats strong { display: block; font-size: var(--text-h4); color: var(--dys-ink); }

/* ── Cards ─────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--grid-gutter); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: #fff; border: 1px solid var(--dys-line); border-top: 4px solid var(--acc);
  border-radius: var(--radius-card); padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.card h3 a { text-decoration: none; color: inherit; }
.card h3 a:hover { color: var(--acc-text); }
.card p { font-size: var(--text-small); color: var(--dys-muted); margin: 0; }
.card .meta { margin-top: auto; font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; color: var(--acc-text); font-weight: 700; }
.card.acc-library  { --acc: var(--acc-library);  --acc-text: var(--acc-library-text); }
.card.acc-studies  { --acc: var(--acc-studies);  --acc-text: var(--acc-studies-text); }
.card.acc-research { --acc: var(--acc-research); --acc-text: var(--acc-research-text); }
.card.acc-centres  { --acc: var(--acc-centres);  --acc-text: var(--acc-centres-text); }

/* ── Sheets ────────────────────────────────────────────────────── */
.sheet {
  background: #fff; border-radius: var(--radius-sheet);
  padding: clamp(2rem, 5vw, var(--space-6));
  width: min(var(--content-col), calc(100% - 3rem)); margin-inline: auto;
  box-shadow: 0 12px 40px -24px rgba(36, 26, 51, 0.25);
}
.sheet-cta {
  background: linear-gradient(135deg, var(--dys-purple-deep), #6d21a8);
  color: #f3e8fd;
}
.sheet-cta h2, .sheet-cta h3 { color: #fff; }
.sheet-cta a:not(.btn) { color: #d8fcc8; }
.sheet-cta .eyebrow { color: #c4f7ae; }

/* ── Register entry lists ──────────────────────────────────────── */
.entry {
  background: #fff; border: 1px solid var(--dys-line); border-left: 4px solid var(--acc);
  border-radius: var(--radius-card); padding: var(--space-3); margin-bottom: var(--space-2);
}
.entry h3 { font-size: var(--text-h4); margin-bottom: 0.35rem; }
.entry .src { font-size: var(--text-small); color: var(--dys-muted); }
.badge {
  display: inline-block; font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: 999px; padding: 0.15rem 0.7rem; margin-left: 0.4rem;
  background: var(--dys-purple-soft); color: var(--dys-purple-text); vertical-align: middle;
}
.badge.example { background: #fef3c7; color: #92400e; }
.badge.live { background: var(--dys-green-soft); color: var(--dys-green-text); }

.register-note {
  display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap;
  font-size: var(--text-small); color: var(--dys-muted);
  border-top: 1px dashed var(--dys-line); padding-top: var(--space-2); margin-top: var(--space-4);
}

/* ── People ────────────────────────────────────────────────────── */
.person { text-align: left; }
.person .avatar {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--text-h4); color: #fff; background: var(--acc);
  margin-bottom: var(--space-1);
}
.person .role { color: var(--acc-text); font-weight: 700; font-size: var(--text-small); }

/* ── Country directory ─────────────────────────────────────────── */
.country { margin-bottom: var(--space-3); }
.country h3 { font-size: var(--text-h4); margin-bottom: var(--space-1); }
.country ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); max-width: none; }
.country li { background: #fff; border: 1px solid var(--dys-line); border-radius: 999px; padding: 0.25rem 0.9rem; font-size: var(--text-small); }

/* ── Reports feed ──────────────────────────────────────────────── */
.report { border-bottom: 1px solid var(--dys-line); padding-block: var(--space-3); max-width: var(--prose-max); }
.report time { font-size: var(--text-small); color: var(--dys-muted); }
.report .seat { font-size: var(--text-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dys-purple-text); }

/* ── Figures ───────────────────────────────────────────────────── */
figure.photo { border-radius: var(--radius-sheet); overflow: hidden; background: #fff; border: 1px solid var(--dys-line); }
figure.photo img { width: 100%; }
figure.photo figcaption { font-size: var(--text-small); color: var(--dys-muted); padding: var(--space-1) var(--space-2); }

/* ── Footer ────────────────────────────────────────────────────── */
footer.site {
  margin-top: var(--space-5); background: var(--dys-purple-deep); color: #e9d8fb;
  padding-block: var(--space-5);
}
footer.site h2 { color: #fff; font-size: var(--text-h4); }
footer.site a { color: #d8fcc8; }
footer.site .cols { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 48rem) { footer.site .cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 0.4rem; font-size: var(--text-small); }
footer.site .legal { border-top: 1px solid rgba(255,255,255,0.2); margin-top: var(--space-4); padding-top: var(--space-3); font-size: var(--text-small); color: #c9b3e6; }

/* ── Breadcrumb ────────────────────────────────────────────────── */
.crumbs { font-size: var(--text-small); color: var(--dys-muted); padding-top: var(--space-3); }
.crumbs a { color: var(--dys-muted); }
.crumbs span[aria-current] { color: var(--dys-ink); font-weight: 600; }

/* ── Accessibility ─────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 100;
  background: var(--dys-purple-deep); color: #fff; padding: 0.6rem 1rem;
  border-radius: 0 0 0.5rem 0.5rem; font-size: var(--text-small); font-weight: 600;
  text-decoration: none; transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--dys-green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* ══ Ideas ported from the HDS website ══════════════════════════ */

/* ── Site search (⌘K modal) ────────────────────────────────────── */
.search-trigger {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: #fff; border: 1px solid var(--dys-line); border-radius: 999px;
  padding: 0.45rem 0.9rem; font: inherit; font-size: var(--text-small);
  color: var(--dys-muted); cursor: pointer;
}
.search-trigger:hover { border-color: var(--dys-purple); color: var(--dys-purple-text); }
.search-trigger kbd {
  font-family: inherit; font-size: var(--text-eyebrow); border: 1px solid var(--dys-line);
  border-radius: 0.3rem; padding: 0 0.3rem; background: var(--dys-bg);
}
.search-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(36, 26, 51, 0.55);
  backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 1rem 1rem;
}
.search-modal {
  background: #fff; border-radius: var(--radius-card); width: min(38rem, 100%);
  box-shadow: 0 30px 80px -20px rgba(36, 26, 51, 0.5); overflow: hidden;
}
.search-row { display: flex; align-items: center; gap: 0.6rem; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--dys-line); }
.search-row input { flex: 1; border: 0; outline: 0; font: inherit; font-size: var(--text-h4); color: var(--dys-ink); background: transparent; }
.search-close { border: 0; background: var(--dys-purple-soft); color: var(--dys-purple-text); border-radius: 0.4rem; font: inherit; font-size: var(--text-eyebrow); font-weight: 700; padding: 0.25rem 0.55rem; cursor: pointer; }
.search-results { list-style: none; margin: 0; padding: var(--space-1); max-height: 50vh; overflow-y: auto; }
.search-results a { display: block; text-decoration: none; padding: var(--space-1) var(--space-2); border-radius: 0.6rem; }
.search-results a:hover, .search-results a:focus { background: var(--dys-purple-soft); }
.search-results strong { display: block; color: var(--dys-ink); }
.search-results span { font-size: var(--text-small); color: var(--dys-muted); }
.search-empty { padding: var(--space-2) var(--space-3); color: var(--dys-muted); font-size: var(--text-small); }

/* ── "On this page" contents box ───────────────────────────────── */
.onpage {
  background: #fff; border: 1px solid var(--dys-line); border-left: 4px solid var(--dys-green);
  border-radius: var(--radius-card); padding: var(--space-2) var(--space-3);
  margin-block: var(--space-3); max-width: var(--prose-max);
}
.onpage p { font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dys-green-text); margin: 0 0 var(--space-1); }
.onpage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.onpage a { font-size: var(--text-small); text-decoration: none; }
.onpage a:hover { text-decoration: underline; }

/* ── Back to top ───────────────────────────────────────────────── */
.back-to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--dys-purple-deep); color: #fff; font-size: var(--text-h4);
  box-shadow: 0 10px 24px -10px rgba(71, 21, 110, 0.6);
}
.back-to-top:hover { background: var(--dys-purple); }

/* ── Audience quick-paths (HDS stakeholder switcher) ───────────── */
.aud-grid .card { position: relative; }
.aud-grid .card .go { margin-top: auto; font-weight: 700; font-size: var(--text-small); color: var(--acc-text); }
.aud-grid .card a.cover { position: absolute; inset: 0; border-radius: inherit; }
.aud-grid .card:hover { box-shadow: 0 12px 30px -18px rgba(36, 26, 51, 0.35); }

/* ── Flip person cards (HDS PersonCard) ────────────────────────── */
.person-flip { perspective: 1200px; }
.person-flip .faces { position: relative; transition: transform 0.5s; transform-style: preserve-3d; min-height: 15rem; }
.person-flip:hover .faces, .person-flip:focus-within .faces { transform: rotateY(180deg); }
.person-flip .face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; gap: var(--space-1); }
.person-flip .face.back { transform: rotateY(180deg); overflow-y: auto; }
.person-flip .face.back p { font-size: var(--text-small); color: var(--dys-muted); }
.person-flip .chip {
  display: inline-block; font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; background: var(--dys-green-soft); color: var(--dys-green-text);
  border-radius: 999px; padding: 0.15rem 0.7rem; margin-right: 0.3rem;
}
@media (prefers-reduced-motion: reduce) {
  .person-flip .faces { transition: none; }
  .person-flip:hover .faces, .person-flip:focus-within .faces { transform: none; }
  .person-flip .face.back { display: none; }
  .person-flip:hover .face.back, .person-flip:focus-within .face.back { display: flex; position: static; transform: none; }
}

/* ── Donate / bank transfer ────────────────────────────────────── */
.bank {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--text-small);
  background: #fff; border: 1px dashed var(--dys-purple); border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-3); max-width: var(--prose-max);
}

/* ── 404 ───────────────────────────────────────────────────────── */
.e404 { text-align: center; padding-block: var(--space-7); }
.e404 .code { font-size: var(--text-hero); font-weight: 800; color: var(--dys-purple); line-height: 1; margin: 0; }
.e404 h1 { margin-top: var(--space-2); }
.e404 p, .e404 h1 { max-width: none; }
.e404 .links { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-top: var(--space-3); }
.search-overlay[hidden] { display: none; }

/* ── Donate page (HDS DonateWidget pattern, DysNet skin) ────────── */
.don-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 56rem) { .don-grid { grid-template-columns: 6fr 5fr; } }
.don-photo { border-radius: var(--radius-sheet); overflow: hidden; margin-top: var(--space-3); }
.don-photo img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }

.donate-box {
  background: linear-gradient(150deg, var(--dys-purple-deep) 0%, #6d21a8 100%);
  color: #f3e8fd; border-radius: var(--radius-sheet);
  padding: var(--space-4); box-shadow: 0 24px 60px -24px rgba(71, 21, 110, 0.55);
  position: sticky; top: 7.5rem;
}
.donate-box h2 { color: #fff; margin-bottom: var(--space-1); }
.donate-box .sub { color: #d9c2f5; font-size: var(--text-small); margin-bottom: var(--space-3); }
.freq { display: inline-flex; background: rgba(255,255,255,0.12); border-radius: 999px; padding: 0.25rem; margin-bottom: var(--space-3); }
.freq button {
  border: 0; background: transparent; color: #e9d8fb; font: inherit; font-weight: 700;
  font-size: var(--text-small); padding: 0.45rem 1.1rem; border-radius: 999px; cursor: pointer;
}
.freq button[aria-pressed="true"] { background: #fff; color: var(--dys-purple-deep); }
.amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1); margin-bottom: var(--space-3); }
.amounts button {
  border: 2px solid rgba(255,255,255,0.35); background: transparent; color: #fff;
  font: inherit; font-weight: 700; font-size: var(--text-h4);
  padding: 0.65rem 0.25rem; border-radius: 0.8rem; cursor: pointer;
}
.amounts button:hover { border-color: var(--dys-green); }
.amounts button[aria-pressed="true"] { background: var(--dys-green); border-color: var(--dys-green); color: #0c2a05; }
.amounts button small { display: block; font-size: var(--text-eyebrow); font-weight: 600; color: inherit; opacity: 0.85; }
.donate-box .btn-go {
  display: block; width: 100%; text-align: center; border: 0; cursor: pointer; font: inherit;
  background: var(--dys-green); color: #0c2a05; font-weight: 800; font-size: var(--text-h4);
  padding: 0.85rem 1rem; border-radius: 999px;
}
.donate-box .btn-go:hover { filter: brightness(1.07); }
.donate-box .fine { font-size: var(--text-eyebrow); color: #cdb0ec; margin: var(--space-2) 0 0; }
.donate-box .bank-reveal { display: none; margin-top: var(--space-3); background: rgba(255,255,255,0.1); border: 1px dashed rgba(255,255,255,0.4); border-radius: 0.8rem; padding: var(--space-2); font-size: var(--text-small); }
.donate-box .bank-reveal.open { display: block; }
.donate-box .bank-reveal a { color: #d8fcc8; }
.don-carry { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); padding: 0; list-style: none; max-width: none; }
.don-carry li { background: #fff; border: 1px solid var(--dys-line); border-radius: 999px; padding: 0.35rem 1rem; font-size: var(--text-small); }
.don-carry li strong { color: var(--dys-purple-text); }

/* ── Official logo (replaces the interim SVG wordmark) ──────────── */
.logo img { height: 3.4rem; width: auto; }
@media (max-width: 40rem) { .logo img { height: 2.6rem; } }

/* ── Header donate button (act-now green, pairs with Join us) ───── */
.btn-donate { background: var(--dys-green); color: #0c2a05; }
.btn-donate:hover { filter: brightness(1.07); }
.nav-ctas { display: inline-flex; gap: var(--space-1); flex-shrink: 0; }

/* ── Condition finder ──────────────────────────────────────────── */
.finder {
  background: #fff; border: 1px solid var(--dys-line); border-left: 4px solid var(--dys-purple);
  border-radius: var(--radius-card); padding: var(--space-3); margin-bottom: var(--space-4);
}
.finder-title { font-weight: 700; font-size: var(--text-h4); margin-bottom: 0.35rem; }
.finder-sub { font-size: var(--text-small); color: var(--dys-muted); }
.finder fieldset { border: 0; padding: 0; margin: var(--space-2) 0 0; }
.finder legend { font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dys-purple-text); margin-bottom: var(--space-1); }
.finder-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.finder-chips button {
  border: 1.5px solid var(--dys-line); background: var(--dys-bg); color: var(--dys-ink);
  font: inherit; font-size: var(--text-small); font-weight: 600;
  padding: 0.4rem 0.95rem; border-radius: 999px; cursor: pointer;
}
.finder-chips button:hover { border-color: var(--dys-purple); }
.finder-chips button[aria-pressed="true"] { background: var(--dys-purple-deep); border-color: var(--dys-purple-deep); color: #fff; }
.finder-count { font-size: var(--text-small); color: var(--dys-muted); margin: var(--space-2) 0 0; }
.finder-count button { border: 0; background: none; color: var(--dys-purple-text); font: inherit; font-size: var(--text-small); text-decoration: underline; cursor: pointer; padding: 0; }

/* ── Harmonized in-page section separation ───────────────────────
   Every tick-opener that FOLLOWS other content in the column gets the
   full section-to-section gap (space-7 = 110px, per the φ scale).
   Page-top openers and one-opener sections (e.g. homepage) are
   untouched because they are first in their container. */
.container > * + .tick,
.container > * + div:has(> .tick) { margin-top: var(--space-7); }

/* ── Click-to-play YouTube facade (loads nocookie iframe on demand) ── */
.yt-embed {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius-card);
  overflow: hidden; background: #000; max-width: var(--prose-max); cursor: pointer;
}
.yt-embed img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.yt-embed button {
  position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem;
  border: 0; border-radius: 50%; background: var(--dys-purple-deep); cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.6); transition: transform 0.15s ease, background 0.15s ease;
}
.yt-embed button span {
  display: block; margin: 0 auto; width: 0; height: 0; transform: translateX(3px);
  border-style: solid; border-width: 0.85rem 0 0.85rem 1.4rem;
  border-color: transparent transparent transparent #fff;
}
.yt-embed:hover button { transform: scale(1.08); background: var(--dys-purple); }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ══ Landing map: the network on the world (Mission 2 participants) ══ */
.map-hero {
  position: relative; overflow: hidden;
  height: calc(100vh - 8.75rem); min-height: 36rem;
  background: radial-gradient(120% 90% at 50% 40%, #3b1463 0%, #2a0d47 60%, #1e0836 100%);
  color: #f3e8fd;
}
#worldmap { position: absolute; inset: 0; }
#worldmap svg { width: 100%; height: 100%; display: block; }
#worldmap path { fill: #5a2f86; stroke: rgba(255,255,255,0.14); stroke-width: 0.5; transition: fill 0.2s ease; }
#worldmap path.st-member    { fill: #c084fc; cursor: pointer; }
#worldmap path.st-candidate { fill: var(--dys-green); cursor: pointer; }
#worldmap path.st-contact   { fill: #fbbf24; cursor: pointer; }
#worldmap path.st-member:hover, #worldmap path.st-member:focus { fill: #e9d5ff; outline: none; }
#worldmap path.st-candidate:hover, #worldmap path.st-candidate:focus { fill: #86efac; outline: none; }
#worldmap path.st-contact:hover, #worldmap path.st-contact:focus { fill: #fde68a; outline: none; }
#worldmap .office circle { fill: #fff; stroke: var(--dys-green); stroke-width: 1.2; }
#worldmap .office text { fill: #fff; font-size: 5px; font-weight: 700; paint-order: stroke; stroke: #2a0d47; stroke-width: 1.5px; }

.map-panel {
  position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 3;
  width: min(30rem, calc(100% - 3rem));
  background: rgba(255,255,255,0.94); color: var(--dys-ink);
  border-radius: var(--radius-sheet); padding: var(--space-3) var(--space-4);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6); backdrop-filter: blur(8px);
}
.map-panel .kicker { color: var(--dys-green-text); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--text-eyebrow); margin: 0 0 var(--space-1); }
.map-panel h1 { font-size: var(--text-h2-lg); line-height: 1.1; margin-bottom: var(--space-1); }
.map-panel h1 em { font-style: normal; color: var(--dys-purple-text); }
.map-panel p { font-size: var(--text-small); color: var(--dys-muted); margin-bottom: var(--space-2); }
.map-stats { display: flex; gap: var(--space-3); margin: 0 0 var(--space-2); padding: 0; list-style: none; max-width: none; }
.map-stats li { font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: 0.06em; color: var(--dys-muted); }
.map-stats strong { display: block; font-size: var(--text-h3); color: var(--dys-ink); letter-spacing: 0; text-transform: none; }
.map-panel .hero-actions { margin-top: var(--space-1); }

.map-views {
  position: absolute; right: 1.5rem; top: 1.5rem; z-index: 3;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); max-width: calc(100% - 3rem);
}
.map-views button {
  border: 1.5px solid rgba(255,255,255,0.35); background: rgba(42,13,71,0.55); color: #f3e8fd;
  font: inherit; font-size: var(--text-small); font-weight: 600; padding: 0.4rem 0.95rem;
  border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px);
}
.map-views button:hover { border-color: #fff; }
.map-views button[aria-pressed="true"] { background: #fff; color: var(--dys-purple-deep); border-color: #fff; }
.map-guess { position: absolute; right: 1.5rem; top: 4.2rem; z-index: 3; font-size: var(--text-eyebrow); color: #d9c2f5; }

.map-legend {
  position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 3;
  display: grid; gap: 0.35rem; font-size: var(--text-eyebrow); color: #e9d8fb;
  background: rgba(42,13,71,0.55); border-radius: var(--radius-card); padding: var(--space-2) var(--space-3); backdrop-filter: blur(6px);
}
.map-legend span::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.5rem; vertical-align: -1px; }
.map-legend .l-member::before { background: #c084fc; }
.map-legend .l-candidate::before { background: var(--dys-green); }
.map-legend .l-contact::before { background: #fbbf24; }
.map-legend .l-office::before { background: #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--dys-green); }

.map-tip {
  position: absolute; z-index: 4; display: none;
  background: #fff; color: var(--dys-ink); border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-3); box-shadow: 0 16px 40px -16px rgba(0,0,0,0.5);
  max-width: 18rem; font-size: var(--text-small);
}
.map-tip strong { display: block; font-size: var(--text-body); }
.map-tip .status { color: var(--dys-purple-text); font-weight: 700; font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: 0.06em; }
.map-tip ul { margin: 0.35rem 0 0; padding-left: 1rem; }
.map-tip li { margin: 0; }

@media (max-width: 48rem) {
  .map-hero { height: auto; min-height: 0; }
  #worldmap { position: relative; height: 52vw; min-height: 14rem; }
  .map-panel, .map-views, .map-legend, .map-guess { position: static; width: auto; max-width: none; }
  .map-views { justify-content: flex-start; padding: 1rem 1.5rem 0; }
  .map-guess { padding: 0.4rem 1.5rem 0; }
  .map-panel { margin: 1rem 1.5rem; }
  .map-legend { margin: 0 1.5rem 1.5rem; grid-template-columns: 1fr 1fr; }
}

/* Landing map: view chips, guess line and legend stacked bottom-right (out of the sticky header's way) */
.map-side { position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 3; display: grid; gap: var(--space-1); justify-items: end; max-width: calc(100% - 3rem); }
.map-side .map-views, .map-side .map-guess, .map-side .map-legend { position: static; }
.map-side .map-guess { margin: 0; text-align: right; }
@media (max-width: 48rem) {
  .map-side { position: static; display: block; padding: 0 1.5rem 1.5rem; }
  .map-side .map-views { padding: 0; }
  .map-side .map-guess { padding: 0.4rem 0 0.6rem; text-align: left; }
  .map-side .map-legend { margin: 0; }
}

/* Landing map, below laptop width: controls flow under the map instead of overlaying it */
@media (max-width: 70rem) {
  .map-hero { height: auto; min-height: 0; display: grid; grid-template-columns: 1fr; align-items: start; }
  #worldmap { position: relative; grid-column: 1 / -1; height: 56vw; min-height: 16rem; max-height: 62vh; }
  .map-panel { position: static; width: auto; max-width: none; margin: var(--space-3) 1.5rem 0; box-shadow: none; backdrop-filter: none; background: #fff; }
  .map-side { position: static; display: grid; gap: var(--space-2); justify-items: start; max-width: none; padding: var(--space-3) 1.5rem; }
  .map-side .map-views { justify-content: flex-start; padding: 0; }
  .map-side .map-guess { text-align: left; padding: 0; }
  .map-side .map-legend { margin: 0; }
}
@media (min-width: 48rem) and (max-width: 70rem) {
  .map-hero { grid-template-columns: 3fr 2fr; }
  .map-panel { grid-column: 1; }
  .map-side { grid-column: 2; padding-left: 0; }
}

/* ── Landing map, WebGL edition (MapLibre + self-hosted PMTiles) ─────── */
#glmap { position: absolute; inset: 0; }
.map-hero.gl #worldmap { display: none; }
.map-hero .maplibregl-canvas { outline: none; }
.map-hero .maplibregl-ctrl-top-right { top: 1.5rem; right: 1.5rem; }
.map-hero .maplibregl-ctrl-group { background: rgba(42,13,71,0.55); backdrop-filter: blur(6px); border-radius: 999px; box-shadow: none; border: 1.5px solid rgba(255,255,255,0.35); }
.map-hero .maplibregl-ctrl-group button { width: 2.2rem; height: 2.2rem; }
.map-hero .maplibregl-ctrl-group button + button { border-top: 1px solid rgba(255,255,255,0.25); }
.map-hero .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.6); }
.map-hero .maplibregl-ctrl-group button:hover { background: rgba(255,255,255,0.15); }
.map-credit { font-size: 0.65rem; color: #b79fd6; margin-top: 0.2rem; }
@media (max-width: 70rem) {
  #glmap { position: relative; grid-column: 1 / -1; height: 56vw; min-height: 16rem; max-height: 62vh; }
}

/* ── Map card: dismissible ─────────────────────────────────────────── */
.map-panel { padding-right: var(--space-5); }
.map-panel-close {
  position: absolute; top: 0.9rem; right: 0.9rem; width: 2.2rem; height: 2.2rem;
  border: 0; border-radius: 50%; background: var(--dys-purple-soft); color: var(--dys-purple-text);
  font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.map-panel-close:hover { background: var(--dys-purple-deep); color: #fff; }
.map-panel[hidden] { display: none; }
.map-panel-reopen {
  position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 3;
  border: 1.5px solid rgba(255,255,255,0.35); background: rgba(42,13,71,0.55); color: #f3e8fd;
  font: inherit; font-size: var(--text-small); font-weight: 600; padding: 0.5rem 1.1rem;
  border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px);
}
.map-panel-reopen:hover { border-color: #fff; }
.map-panel-reopen[hidden] { display: none; }
@media (max-width: 70rem) {
  .map-panel-reopen { position: static; margin: var(--space-3) 1.5rem 0; }
}

/* ── Annex table (prevalence) ──────────────────────────────────────── */
.annex-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--dys-line); border-radius: var(--radius-card); margin-top: var(--space-3); }
table.annex { border-collapse: collapse; width: 100%; min-width: 56rem; font-size: var(--text-small); }
table.annex th, table.annex td { text-align: left; vertical-align: top; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--dys-line); }
table.annex thead th { background: var(--dys-purple-soft); color: var(--dys-purple-text); font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; }
table.annex tbody th { font-weight: 700; white-space: nowrap; }
table.annex tbody tr:first-child th, table.annex tbody tr:first-child td { background: var(--dys-green-soft); }
table.annex sup a { text-decoration: none; font-weight: 700; color: var(--dys-purple-text); padding: 0 0.1rem; }
.annex-note { font-size: var(--text-small); color: var(--dys-muted); margin-top: var(--space-2); }
ol.sources { font-size: var(--text-small); color: var(--dys-muted); padding-left: 1.4rem; max-width: var(--prose-max); }
ol.sources li { margin-bottom: 0.45rem; scroll-margin-top: 8rem; }
ol.sources a { word-break: break-all; }

/* ── Estimated-people dots: selector + legend ───────────────────────── */
.map-dots { background: rgba(42,13,71,0.6); border-radius: var(--radius-card); padding: var(--space-2) var(--space-3); backdrop-filter: blur(6px); color: #e9d8fb; max-width: 22rem; }
.map-dots label { display: block; font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #c4f7ae; margin-bottom: 0.3rem; }
.map-dots select { width: 100%; font: inherit; font-size: var(--text-small); color: var(--dys-ink); background: #fff; border: 0; border-radius: 0.5rem; padding: 0.4rem 0.6rem; }
.dot-legend { font-size: var(--text-small); margin: 0.5rem 0 0; color: #fff; }
.dot-legend::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #d7d0e0; margin-right: 0.45rem; vertical-align: 1px; }
.dot-caption { font-size: 0.68rem; color: #c9b3e6; margin: 0.4rem 0 0; }
.map-dots[hidden] { display: none; }
.map-legend .l-dot { max-width: 20rem; line-height: 1.35; color: #e9d8fb; }
.map-legend .l-dot::before { background: #d7d0e0; border-radius: 50%; width: 0.55rem; height: 0.55rem; }
.map-legend .l-dot::before, .dot-legend::before { background: #fbf8ff; box-shadow: 0 0 0 1.5px #2a0d47; }

/* ── Dot popup (what a dot stands for) ─────────────────────────────── */
.dot-popup .maplibregl-popup-content { background: #fff; color: var(--dys-ink); border-radius: var(--radius-card); padding: var(--space-2) var(--space-3); box-shadow: 0 16px 40px -16px rgba(0,0,0,0.5); font-family: inherit; font-size: var(--text-small); line-height: 1.45; }
.dot-popup .maplibregl-popup-tip { border-top-color: #fff; border-bottom-color: #fff; }
.dot-popup .maplibregl-popup-close-button { font-size: 1.2rem; color: var(--dys-muted); padding: 0.2rem 0.5rem; }
.dot-popup .maplibregl-popup-close-button:hover { background: var(--dys-purple-soft); color: var(--dys-purple-text); border-radius: 0.4rem; }
.dot-popup .dp-main { margin: 0 0 0.4rem; font-size: var(--text-body); max-width: none; }
.dot-popup .dp-main strong { color: var(--dys-purple-text); }
.dot-popup .dp-sub { margin: 0 0 0.4rem; color: var(--dys-ink); max-width: none; }
.dot-popup .dp-foot { margin: 0; color: var(--dys-muted); font-size: var(--text-eyebrow); max-width: none; }