/* Wealth in Question — paper editorial theme (Stitch design) */
:root {
  --bg: #fcf8fa;            /* paper white */
  --ink: #1b1b1d;
  --black: #000000;
  --secondary: #515f74;     /* steel blue-grey */
  --muted: #76777d;
  --line: rgba(118, 119, 125, 0.22);
  --line-strong: #c6c6cd;
  --surface: #f0edef;       /* container */
  --surface-low: #f6f3f5;
  --surface-high: #eae7e9;
  --white: #ffffff;
  --navy: #131b2e;
  --red: #93000a;
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "Consolas", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* Type utilities */
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}
.chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--surface-high);
  color: var(--secondary);
}
.chip.red { color: var(--red); }
.chip.solid { background: var(--secondary); color: var(--white); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--black); color: var(--white);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500;
  padding: 13px 26px; border: none; cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
}
.btn:hover { opacity: 0.82; }
.btn:active { transform: scale(0.97); }
.btn.ghost { background: var(--white); color: var(--black); border: 1px solid var(--line-strong); }

/* ---------- Header ---------- */
header.site {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  height: 80px;
}
header.site .wrap {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand {
  font-family: var(--serif); font-weight: 700; font-size: 26px;
  letter-spacing: -0.01em; color: var(--black); white-space: nowrap;
}
nav.main { display: flex; align-items: center; gap: 28px; }
nav.main a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--secondary);
  padding-bottom: 4px; border-bottom: 2px solid transparent;
  transition: color .15s ease;
}
nav.main a:hover { color: var(--black); }
nav.main a.active { color: var(--black); border-bottom-color: var(--black); font-weight: 600; }
.header-cta { display: flex; align-items: center; gap: 16px; }
.header-cta .btn { padding: 10px 22px; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 88px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px; align-items: start;
}
.hero-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hero-meta time { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.hero h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 52px); line-height: 1.14; letter-spacing: -0.02em;
  color: var(--black); margin-bottom: 22px;
}
.hero p.dek { font-size: 17px; color: var(--secondary); max-width: 520px; margin-bottom: 32px; }
.quick-take {
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 8px 8px 0 rgba(19, 27, 46, 0.06);
  padding: 26px 28px; max-width: 340px; margin-left: auto;
}
.quick-take .label { color: var(--muted); margin-bottom: 12px; display: block; }
.quick-take blockquote {
  font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.5;
  color: var(--ink);
}
.quick-take .attribution { margin-top: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Section headers ---------- */
section.band { padding: 64px 0 80px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 36px; gap: 24px; flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--serif); font-weight: 700; font-size: 32px; letter-spacing: -0.01em;
  color: var(--black);
}
.section-head .label a { color: var(--secondary); margin-left: 18px; }
.section-head .label a:hover, .section-head .label a.active { color: var(--black); }

/* ---------- Report cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.report-card {
  background: var(--white); border: 1px solid var(--line);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  position: relative; transition: transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s ease;
}
.report-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--navy);
}
.report-card.red::before { background: var(--red); }
.report-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(19,27,46,0.08); }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-meta .read-time { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.report-card h3 {
  font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.3;
  color: var(--black);
}
.report-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.report-card p { font-size: 15px; color: var(--secondary); flex: 1; }
.card-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--black); font-weight: 500;
}

/* ---------- Dossier / dark block ---------- */
.dossier-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; margin-top: 24px; }
.dossier {
  background: var(--black); color: var(--white); padding: 44px 36px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px; align-items: flex-start;
}
.dossier h3 { font-family: var(--serif); font-size: 26px; font-weight: 700; }
.dossier p { font-size: 15px; opacity: 0.75; }
.dossier .btn { background: var(--white); color: var(--black); margin-top: 8px; }
.wide-card { padding: 36px; }

/* ---------- Follow band ---------- */
.follow-band { background: var(--surface); padding: 96px 0; text-align: center; }
.follow-band .label { color: var(--muted); display: block; margin-bottom: 18px; }
.follow-band h2 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.01em; color: var(--black); margin-bottom: 16px;
}
.follow-band p { color: var(--secondary); max-width: 520px; margin: 0 auto 32px; }
.follow-band .fine { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 28px; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.about-grid h2 { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--black); }
.about-grid p { color: var(--secondary); margin-bottom: 14px; font-size: 16px; }
.about-grid strong { color: var(--ink); }

/* ---------- Archive page ---------- */
.page-head { padding: 64px 0 48px; }
.page-head h1 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 5vw, 48px);
  letter-spacing: -0.02em; color: var(--black); margin-bottom: 10px;
}
.page-head p { font-size: 17px; color: var(--secondary); max-width: 640px; }
.filter-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 8px;
  flex-wrap: wrap;
}
.filter-tabs { display: flex; gap: 28px; }
.filter-tab {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--secondary); background: none; border: none; cursor: pointer;
  padding-bottom: 5px; border-bottom: 2px solid transparent;
}
.filter-tab:hover { color: var(--black); }
.filter-tab[data-active="true"] { color: var(--black); border-bottom-color: var(--black); font-weight: 600; }
.group-head {
  color: var(--muted);
  padding: 40px 0 6px;
  border-bottom: 2px solid var(--black);
}
.group-head:first-child { padding-top: 12px; }

/* Regional continent accordion */
.continent-acc { margin-top: 4px; }
.continent { border-bottom: 1px solid var(--line); }
.continent-head {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 28px 0;
}
.continent-head .c-name {
  font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--black);
}
.continent-head:hover:not(:disabled) .c-name { text-decoration: underline; text-underline-offset: 4px; }
.continent-head:disabled { cursor: default; }
.continent-head:disabled .c-name { color: var(--muted); }
.c-meta { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.c-count, .c-soon {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.c-toggle { font-family: var(--mono); font-size: 20px; line-height: 1; color: var(--black); }
.continent-panel { display: none; padding: 0 0 20px; }
.continent[data-open="true"] .continent-panel { display: block; }
.continent[data-open="true"] > .continent-head { padding-bottom: 10px; }
.country-head {
  color: var(--muted);
  padding: 22px 0 6px;
  border-bottom: 1px solid var(--black);
}
.continent-panel .archive-row { padding: 24px 16px; }
.continent-panel .archive-row:last-child { border-bottom: none; }
.archive-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 30px 16px; margin: 0 -16px;
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, transform .25s cubic-bezier(0.16,1,0.3,1);
}
.archive-row:hover { background: var(--white); transform: translateX(4px); }
.archive-row .row-main { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.row-meta { display: flex; align-items: center; gap: 16px; }
.row-meta time { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.archive-row h2 { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.3; color: var(--black); }
.archive-row:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.row-side { display: flex; align-items: center; gap: 28px; }
.row-side .rt { text-align: right; }
.row-side .rt .label { color: var(--muted); display: block; }
.row-side .rt strong { font-size: 15px; font-weight: 600; }
.row-side .arrow { font-size: 20px; color: var(--black); transition: transform .2s ease; }
.archive-row:hover .arrow { transform: translateX(4px); }

/* ---------- Article layout ---------- */
.article-grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 280px;
  gap: 40px;
  padding: 64px 0 80px;
}
.side-meta { position: sticky; top: 110px; align-self: start; }
.side-meta .block { padding: 14px 0; border-top: 1px solid var(--line); }
.side-meta .block:first-child { border-top: none; padding-top: 0; }
.side-meta .label { color: var(--secondary); display: block; margin-bottom: 6px; }
.side-meta .value { font-size: 15px; font-weight: 700; }
.side-meta .value.italic { font-style: italic; font-weight: 700; }
.side-meta a.share {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--secondary);
}
.side-meta a.share:hover { color: var(--black); }

.article-body .head-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.article-body .issue-no { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--secondary); }
.article-body h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(32px, 4.2vw, 46px); line-height: 1.16; letter-spacing: -0.02em;
  color: var(--black); margin-bottom: 26px;
}
.standfirst {
  font-size: 18px; line-height: 1.6; color: var(--secondary); font-style: italic;
  border-left: 4px solid var(--black); padding-left: 24px; margin-bottom: 44px;
}
.article-body section { margin-bottom: 44px; }
.article-body h2 {
  font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.3;
  color: var(--black); margin-bottom: 16px;
}
.article-body h2 .no { color: var(--red); margin-right: 4px; }
.article-body p { font-size: 17px; line-height: 1.7; margin-bottom: 18px; color: var(--ink); }
.article-body ul { margin: 0 0 18px 22px; }
.article-body li { font-size: 17px; line-height: 1.65; margin-bottom: 10px; }
.article-body blockquote {
  font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.5;
  color: var(--secondary); border-left: 4px solid var(--secondary);
  padding-left: 28px; margin: 32px 0;
}

/* Figure / numbers box */
.fig-box { background: var(--white); border: 1px solid var(--line); padding: 30px 32px; margin: 44px 0; }
.fig-box .fig-head { margin-bottom: 24px; }
.fig-box .fig-head .label { color: var(--black); font-weight: 700; display: block; }
.fig-box .fig-head p { font-size: 14px; color: var(--secondary); margin: 4px 0 0; }
.fig-box dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 22px; }
.fig-box dt { font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--black); }
.fig-box dd { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: 5px; line-height: 1.5; }

/* Sources */
.sources { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 54px; }
.sources h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary); margin-bottom: 12px; }
.sources ul { list-style: none; }
.sources li { font-size: 13.5px; color: var(--secondary); margin-bottom: 7px; }
.sources a { text-decoration: underline; text-underline-offset: 2px; }
.sources a:hover { color: var(--black); }

/* Right rail */
.side-rail { display: flex; flex-direction: column; gap: 24px; }
.takeaways { background: var(--surface); border-top: 4px solid var(--black); padding: 26px 24px; }
.takeaways h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--black); margin-bottom: 18px; }
.takeaways li { display: flex; gap: 12px; list-style: none; margin-bottom: 16px; }
.takeaways li span { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--black); }
.takeaways li p { font-size: 14px; color: var(--secondary); line-height: 1.55; }
.related { border: 1px solid var(--line); padding: 26px 24px; }
.related h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary); margin-bottom: 18px; }
.related a { display: block; margin-bottom: 20px; }
.related a:last-child { margin-bottom: 0; }
.related .label { color: var(--muted); display: block; margin-bottom: 4px; font-size: 10px; }
.related h4 { font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--black); }
.related a:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
.rail-cta { background: var(--black); color: var(--white); padding: 26px 24px; position: sticky; top: 110px; }
.rail-cta h3 { font-family: var(--serif); font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.rail-cta p { font-size: 14px; opacity: 0.75; margin-bottom: 18px; }
.rail-cta .btn { background: var(--white); color: var(--black); width: 100%; justify-content: center; }

.backlink {
  display: inline-flex; align-items: center; gap: 8px; margin: 40px 0 -24px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--secondary);
}
.backlink:hover { color: var(--black); }

/* Progress bar (article pages, via JS) */
#progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--black); z-index: 60; width: 0; transition: width .1s linear; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 72px 0 56px; margin-top: 80px;
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; }
.footer-brand h2 { font-family: var(--serif); font-weight: 700; font-size: 26px; color: var(--black); margin-bottom: 14px; }
.footer-brand p { font-size: 15px; color: var(--secondary); max-width: 380px; margin-bottom: 26px; }
.footer-brand .fine { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--secondary); }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.footer-cols h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; color: var(--black); margin-bottom: 14px; }
.footer-cols a { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--secondary); margin-bottom: 10px; }
.footer-cols a:hover { color: var(--black); }
.disclaimer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); max-width: 720px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .article-grid { grid-template-columns: minmax(0, 1fr) 260px; }
  .side-meta { display: none; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .dossier-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  header.site { height: 64px; }
  .brand { font-size: 20px; }
  nav.main { gap: 16px; }
  nav.main a { font-size: 10px; }
  .header-cta { display: none; }
  .hero { padding: 48px 0 56px; }
  .hero-grid, .about-grid, .footer-grid { grid-template-columns: 1fr; }
  .quick-take { margin: 0; }
  .card-grid { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr; padding-top: 40px; }
  .side-rail { order: 2; }
  .rail-cta { position: static; }
  .row-side .rt { display: none; }
}

/* Figures */
.fig-box img { width: 100%; height: auto; border: 1px solid var(--line); }

/* MailerLite embed, restyled to match the site */
.ml-embedded { margin: 28px auto 0; max-width: 480px; }
.ml-embedded .ml-form-embedWrapper,
.ml-embedded .ml-form-embedBody { background: transparent !important; padding: 0 !important; }
.ml-embedded .ml-form-embedContainer { max-width: 480px !important; }
.ml-embedded input[type="email"], .ml-embedded input {
  border: 1px solid var(--line-strong) !important; background: var(--white) !important;
  font-family: var(--sans) !important; font-size: 15px !important;
  padding: 13px 18px !important; border-radius: 0 !important; color: var(--ink) !important;
}
.ml-embedded button {
  background: var(--black) !important; color: #ffffff !important;
  font-family: var(--mono) !important; text-transform: uppercase !important;
  letter-spacing: 0.08em !important; font-size: 12px !important; font-weight: 500 !important;
  border-radius: 0 !important; padding: 13px 26px !important; border: none !important;
  height: auto !important;
}
.ml-embedded button:hover { opacity: 0.82 !important; }
.ml-embedded .ml-form-successBody, .ml-embedded .ml-form-successBody p {
  font-family: var(--sans) !important; color: var(--secondary) !important; background: transparent !important;
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  width: 40px; height: 40px; border: 1px solid var(--line-strong); background: transparent;
  color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease;
}
.theme-toggle:hover { border-color: var(--ink); }
@media (max-width: 720px) {
  .header-cta { display: flex; }
  .header-cta .btn { display: none; }
}

/* ---------- Legal pages ---------- */
.legal-body { max-width: 760px; margin: 0 auto; padding: 56px 0 72px; }
.legal-body h2 { font-size: 22px; }
.legal-body section { margin-bottom: 32px; }
.footer-cols { grid-template-columns: repeat(3, 1fr); }

/* ---------- Dark mode ---------- */
:root[data-theme="dark"] {
  --bg: #101216;
  --ink: #e6e1d6;
  --black: #f0ead9;
  --secondary: #a8b0bf;
  --muted: #9a968e;
  --line: rgba(160, 155, 145, 0.16);
  --line-strong: #3a3f49;
  --surface: #171a20;
  --surface-low: #14171d;
  --surface-high: #232834;
  --white: #1b1f26;
  --navy: #7d90c2;
  --red: #e0524d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101216;
    --ink: #e6e1d6;
    --black: #f0ead9;
    --secondary: #a8b0bf;
    --muted: #9a968e;
    --line: rgba(160, 155, 145, 0.16);
    --line-strong: #3a3f49;
    --surface: #171a20;
    --surface-low: #14171d;
    --surface-high: #232834;
    --white: #1b1f26;
    --navy: #7d90c2;
    --red: #e0524d;
  }
}
:root[data-theme="dark"] .btn, 
:root[data-theme="dark"] .dossier .btn, 
:root[data-theme="dark"] .rail-cta .btn { color: #101216; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { color: #101216; }
}
:root[data-theme="dark"] .fig-box img { filter: brightness(0.92); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fig-box img { filter: brightness(0.92); }
}
:root[data-theme="dark"] .ml-embedded input { background: var(--surface-high) !important; color: var(--ink) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ml-embedded input { background: var(--surface-high) !important; color: var(--ink) !important; }
}

/* ---------- Dark mode button fixes ---------- */
:root[data-theme="dark"] .btn { background: var(--black); color: #101216; }
:root[data-theme="dark"] .dossier .btn,
:root[data-theme="dark"] .rail-cta .btn { background: #101216; color: #f0ead9; }
:root[data-theme="dark"] .theme-toggle { color: var(--ink); }
:root[data-theme="dark"] .ml-embedded button { color: #101216 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { background: var(--black); color: #101216; }
  :root:not([data-theme="light"]) .dossier .btn,
  :root:not([data-theme="light"]) .rail-cta .btn { background: #101216; color: #f0ead9; }
  :root:not([data-theme="light"]) .ml-embedded button { color: #101216 !important; }
}

/* ---------- Native subscribe form ---------- */
.subscribe-form {
  margin: 28px auto 0; max-width: 520px;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.subscribe-form input[type="email"] {
  flex: 1; min-width: 240px;
  padding: 13px 18px; border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--white); color: var(--ink);
  font-family: var(--sans); font-size: 15px;
}
.subscribe-form input[type="email"]::placeholder { color: var(--muted); }
.subscribe-form input[type="email"]:focus { outline: 2px solid var(--black); outline-offset: -1px; }
#wiq-subscribe-msg { display: none; margin-top: 16px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}


/* ---------- Mobile header fit + overflow safety (July 5) ---------- */
html, body { overflow-x: clip; }
@media (max-width: 720px) {
  header.site .wrap { gap: 12px; }
  .brand { font-size: 17px; }
  nav.main { gap: 13px; }
  nav.main a { font-size: 10px; }
  .header-cta { gap: 10px; }
  .theme-toggle { width: 34px; height: 34px; font-size: 15px; }
}
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .brand { font-size: 15px; }
  nav.main { gap: 10px; }
  nav.main a { font-size: 9px; letter-spacing: 0.03em; }
  .theme-toggle { width: 32px; height: 32px; }
}


/* ============================================================
   THE ATLAS (globe.html)  — added July 14, 2026
   ============================================================ */
.atlas-head { padding-bottom: 28px; }
.atlas-head p { max-width: 680px; }
.atlas-head strong { color: var(--ink); }

/* stage: globe + hub */
.atlas-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: stretch;
  padding-bottom: 24px;
}
.globe-panel {
  background: var(--surface-low);
  border: 1px solid var(--line);
  position: relative;
  display: flex; flex-direction: column;
  min-height: 460px;
}
#globe {
  flex: 1;
  position: relative;
  min-height: 420px;
  cursor: grab;
  overflow: hidden;
}
#globe:active { cursor: grabbing; }
#globe canvas { display: block; }
#globe.no-webgl::after {
  content: "Your browser could not start the globe. Browse the map below.";
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 40px; color: var(--muted); font-family: var(--mono); font-size: 12px;
}
.globe-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color: var(--muted); padding: 24px; text-align:center; }

/* globe country labels overlay */
#globe-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.globe-label {
  position: absolute; transform: translate(10px, -50%);
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--secondary); white-space: nowrap; padding: 2px 4px;
  text-shadow: 0 1px 2px var(--bg), 0 0 2px var(--bg);
  display: none;
}
.globe-label::before {
  content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
}
.globe-label.live { color: var(--ink); font-weight: 600; }
.globe-label.live::before { background: var(--red); box-shadow: 0 0 6px var(--red); }
.globe-label:hover { color: var(--red); }

.globe-legend {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.globe-legend .label { color: var(--secondary); }
.dot-key { display: inline-flex; align-items: center; gap: 7px; }
.dot-key i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-key i.k-live { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dot-key i.k-soon { background: var(--muted); }

/* report hub */
.hub {
  background: var(--white); border: 1px solid var(--line);
  padding: 26px 26px 30px; display: flex; flex-direction: column;
  box-shadow: 8px 8px 0 rgba(19,27,46,0.06);
}
.hub-eyebrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.hub-eyebrow .label { color: var(--muted); }
.hub-region-link { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--secondary); cursor: pointer; }
.hub-region-link:hover { color: var(--red); }
.hub-title { font-family: var(--serif); font-weight: 700; font-size: 27px; line-height: 1.15; color: var(--black); margin-bottom: 10px; }
.hub-blurb { font-size: 14px; color: var(--secondary); margin-bottom: 20px; }
.hub-cards { display: flex; flex-direction: column; gap: 12px; }
.hub-card {
  border: 1px solid var(--line); padding: 14px 16px; background: var(--surface-low);
  display: block; transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.hub-card:hover { transform: translateX(3px); border-color: var(--line-strong); background: var(--white); }
.hub-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.scope-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.scope-tag.fallback { opacity: 0.85; }
.hub-card h4 { font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--black); margin-bottom: 8px; }
.hub-card-link { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.hub-note { font-size: 12.5px; color: var(--muted); margin-top: 16px; line-height: 1.5; }
.hub-follow { margin-top: 20px; align-self: flex-start; padding: 11px 22px; }

/* browse controls */
.browse .section-head { margin-bottom: 20px; }
.browse-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.region-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--secondary); background: var(--surface-low); border: 1px solid var(--line);
  padding: 7px 13px; cursor: pointer; transition: all .15s ease;
}
.rchip:hover { color: var(--black); border-color: var(--line-strong); }
.rchip[data-active="true"] { background: var(--black); color: var(--white); border-color: var(--black); }
.country-search {
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line-strong);
  padding: 10px 14px; min-width: 220px;
}
.country-search:focus { outline: 2px solid var(--black); outline-offset: -1px; }

/* flat map */
.map-wrap { background: var(--surface-low); border: 1px solid var(--line); padding: 10px; margin-bottom: 28px; }
#worldmap { width: 100%; height: auto; display: block; }
#worldmap path.cc {
  fill: var(--surface-high); stroke: var(--bg); stroke-width: 0.5;
  transition: fill .12s ease; cursor: pointer;
}
#worldmap path.cc:hover { fill: var(--secondary); }
#worldmap path.cc.live { fill: #d9a9ac; }
#worldmap path.cc.live:hover { fill: var(--red); }
#worldmap path.cc.sel { fill: var(--red); }
#worldmap[data-dim="true"] path.cc:not(.sel) { fill: var(--surface-high); opacity: 0.4; }

/* directory */
.directory { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 40px; }
.dir-group { border-top: 1px solid var(--line); padding-top: 14px; }
.dir-region {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left; padding: 0 0 10px;
  font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--black);
}
.dir-region span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.dir-region.live span { color: var(--red); }
.dir-region:hover { color: var(--red); }
.dir-countries { display: flex; flex-wrap: wrap; gap: 6px; }
.dir-c {
  font-family: var(--sans); font-size: 12.5px; color: var(--secondary);
  background: var(--surface-low); border: 1px solid var(--line); cursor: pointer;
  padding: 4px 9px; transition: all .12s ease;
}
.dir-c:hover { color: var(--black); border-color: var(--line-strong); }
.dir-c.live { color: var(--ink); border-color: var(--line-strong); }
.dir-c.live::before { content: "•"; color: var(--red); margin-right: 5px; }
.dir-c.flag { font-weight: 600; }

/* responsive */
@media (max-width: 900px) {
  .atlas-stage { grid-template-columns: 1fr; }
  .hub { box-shadow: none; }
  .directory { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  #globe { min-height: 340px; }
  .globe-panel { min-height: 380px; }
  .country-search { min-width: 0; width: 100%; }
  .browse-controls { flex-direction: column; align-items: stretch; }
}

/* dark-mode map tweaks */
:root[data-theme="dark"] #worldmap path.cc { fill: #26314a; stroke: #131b2e; }
:root[data-theme="dark"] #worldmap path.cc.live { fill: #7a2b30; }
:root[data-theme="dark"] #worldmap path.cc:hover { fill: #48587a; }
:root[data-theme="dark"] #worldmap path.cc.sel { fill: var(--red); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #worldmap path.cc { fill: #26314a; stroke: #131b2e; }
  :root:not([data-theme="light"]) #worldmap path.cc.live { fill: #7a2b30; }
}


/* ---------- Atlas map pan + zoom (July 14, 2026) ---------- */
.map-wrap { position: relative; }
#worldmap { touch-action: none; cursor: grab; }
#worldmap:active { cursor: grabbing; }
.map-zoom {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
}
.map-zoom button {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 16px; line-height: 1;
  background: var(--white); color: var(--ink); border: 1px solid var(--line-strong);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.map-zoom button:hover { border-color: var(--ink); }
.map-zoom button:active { background: var(--surface-high); }
.map-zoom button[data-z="reset"] {
  width: auto; height: 28px; padding: 0 10px; font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
}


/* ---------- Atlas: only covered countries invite a click (July 14, 2026) ---------- */
#worldmap path.cc:not(.live) { cursor: default; }
.globe-label:not(.live) { cursor: default; }


/* ---------- Atlas v2: continents, majors, in-development (July 14, 2026) ---------- */
.rchip.live::before { content: "\2022"; color: var(--red); margin-right: 6px; }
.rchip[data-active="true"].live::before { color: #ff8a8f; }

.browse-index { margin-top: 28px; }
.idx-block h3 { font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--black); margin-bottom: 14px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cchip {
  font-family: var(--sans); font-size: 13px; color: var(--secondary);
  background: var(--surface-low); border: 1px solid var(--line); cursor: pointer;
  padding: 7px 12px; transition: color .12s ease, border-color .12s ease;
}
.cchip:hover { color: var(--black); border-color: var(--line-strong); }
.cchip.live { color: var(--ink); border-color: var(--line-strong); font-weight: 600; }
.cchip.live::before { content: "\2022"; color: var(--red); margin-right: 6px; }

/* in-development hub card (no link, clearly inert) */
.hub-card.dev { background: var(--surface-low); opacity: 0.75; cursor: default; }
.hub-card.dev:hover { transform: none; border-color: var(--line); background: var(--surface-low); }
.hub-card.dev h4 { color: var(--secondary); font-weight: 400; font-style: italic; font-size: 15px; }

/* ---------- Mobile header: wrap nav to its own row so nothing overflows (July 14, 2026) ---------- */
header.site .wrap { min-width: 0; }
nav.main { min-width: 0; }
@media (max-width: 620px) {
  header.site { height: auto; }                       /* let the header grow when nav wraps */
  header.site .wrap { flex-wrap: wrap; gap: 6px 16px; padding-top: 11px; padding-bottom: 11px; }
  .brand { font-size: 18px; }
  .brand { order: 1; }
  .header-cta { order: 2; margin-left: auto; gap: 10px; }   /* toggle stays top-right */
  .header-cta .btn { display: none; }                       /* Follow lives in the footer on mobile */
  nav.main { order: 3; width: 100%; gap: 20px; justify-content: flex-start; margin-top: 2px; }
  nav.main a { font-size: 11px; }
  /* keep the archive filter tabs from overflowing the right edge */
  .filter-bar { gap: 12px 20px; }
  .filter-tabs { flex-wrap: wrap; gap: 12px 20px; width: 100%; }
  .filter-tab { white-space: nowrap; }
}

/* ---------- Atlas: mirrored desk panel under the map (July 15, 2026) ---------- */
.hub-below { margin-top: 24px; box-shadow: none; border-top: 3px solid var(--black); }
@media (min-width: 720px) {
  .hub-below .hub-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
  .hub-below .hub-follow { grid-column: 1 / -1; }
}