/* Shared styles for every public page and the site chrome (header, footer). */
:root {
  color-scheme: light;
  --bg: #fbfaf7;
  --panel: #f3f1ea;
  --card: #ffffff;
  --line: rgba(17, 26, 38, 0.13);
  --text: #111a26;   /* headline ink */
  --body: #3a4353;   /* 9.6:1 on --bg */
  --muted: #5d6675;  /* 5.7:1 on --bg */
  --gold: #7d5a12;   /* gold for small text: 5.9:1 on --bg */
  --gold-line: #c9a55c;
  --red: #b01e2e;
  --red-dark: #8f1623;
  --green: #14573a;
  --green-dark: #0d2f25;
  --blue: #1f5fbf;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --naskh: 'Noto Naskh Arabic', 'Geeza Pro', 'Noto Sans Arabic', Tahoma, serif;
  --gutter: clamp(16px, 3.4vw, 44px);
  --shadow: 0 1px 2px rgba(17, 26, 38, 0.06), 0 10px 28px rgba(17, 26, 38, 0.1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img { max-width: 100%; }
a { color: var(--text); text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

/* Dari and Pashto: a proper Naskh text face, more leading, right-to-left. */
:lang(fa), :lang(ps) { font-family: var(--naskh); letter-spacing: 0; }
html[dir='rtl'] body { font-size: 19px; line-height: 1.95; }
html[dir='rtl'] h1, html[dir='rtl'] h2, html[dir='rtl'] h3, html[dir='rtl'] dt { font-family: var(--naskh); font-weight: 700; }

.wrap { max-width: 1296px; margin: 0 auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 860px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { flex-shrink: 0; }

/* ---------- one desktop layout, scaled to the screen ----------
   The design is drawn 1280px wide. On laptop screens between 1000px and 1280px the same
   layout is scaled down as a whole, so proportions and margins stay as designed instead of
   the page switching to its tablet arrangement. Below 1000px the tablet and phone layouts apply. */
html { --zoom: 1; }
@media (min-width: 1000px) and (max-width: 1019px) { html { zoom: 0.7812; --zoom: 0.7812; } }
@media (min-width: 1020px) and (max-width: 1039px) { html { zoom: 0.7969; --zoom: 0.7969; } }
@media (min-width: 1040px) and (max-width: 1059px) { html { zoom: 0.8125; --zoom: 0.8125; } }
@media (min-width: 1060px) and (max-width: 1079px) { html { zoom: 0.8281; --zoom: 0.8281; } }
@media (min-width: 1080px) and (max-width: 1099px) { html { zoom: 0.8438; --zoom: 0.8438; } }
@media (min-width: 1100px) and (max-width: 1119px) { html { zoom: 0.8594; --zoom: 0.8594; } }
@media (min-width: 1120px) and (max-width: 1139px) { html { zoom: 0.8750; --zoom: 0.8750; } }
@media (min-width: 1140px) and (max-width: 1159px) { html { zoom: 0.8906; --zoom: 0.8906; } }
@media (min-width: 1160px) and (max-width: 1179px) { html { zoom: 0.9062; --zoom: 0.9062; } }
@media (min-width: 1180px) and (max-width: 1199px) { html { zoom: 0.9219; --zoom: 0.9219; } }
@media (min-width: 1200px) and (max-width: 1219px) { html { zoom: 0.9375; --zoom: 0.9375; } }
@media (min-width: 1220px) and (max-width: 1239px) { html { zoom: 0.9531; --zoom: 0.9531; } }
@media (min-width: 1240px) and (max-width: 1259px) { html { zoom: 0.9688; --zoom: 0.9688; } }
@media (min-width: 1260px) and (max-width: 1279px) { html { zoom: 0.9844; --zoom: 0.9844; } }

/* ---------- buttons, arrow links, tags ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; border-radius: 5px; border: 1.5px solid var(--red);
  background: var(--red); color: #fff;
  font: 600 15.5px/1.2 var(--sans); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn--dark { background: var(--green-dark); border-color: var(--green-dark); }
.btn--dark:hover { background: #164a3a; border-color: #164a3a; }
.btn--light { background: #fff; border-color: #fff; color: var(--text); }
.btn--light:hover { background: #f1efe9; border-color: #f1efe9; color: var(--text); }
.btn--ghost { background: #fff; border-color: rgba(17, 26, 38, 0.4); color: var(--text); }
.btn--ghost:hover { background: var(--panel); border-color: var(--text); color: var(--text); }
.btn--small { padding: 10px 16px; font-size: 14px; }
.btn--arrow::after, .arrow-link::after { content: '\2192'; transition: transform 0.2s; }
html[dir='rtl'] .btn--arrow::after, html[dir='rtl'] .arrow-link::after { content: '\2190'; }
.btn--arrow:hover::after, a:hover > * > .arrow-link::after, .arrow-link:hover::after { transform: translateX(3px); }
html[dir='rtl'] .btn--arrow:hover::after, html[dir='rtl'] .arrow-link:hover::after { transform: translateX(-3px); }
html[dir='rtl'] .btn { font-family: var(--naskh); font-size: 17px; }
.arrow-link { display: inline-flex; gap: 7px; align-items: center; font: 600 14.5px/1.4 var(--sans); color: var(--green); text-decoration: none; }
.arrow-link:hover { color: var(--green); text-decoration: underline; }
.arrow-link--red, .arrow-link--red:hover { color: var(--red); }
html[dir='rtl'] .arrow-link { font: 700 17px/1.6 var(--naskh); }
.tag { display: inline-block; padding: 2px 7px; border-radius: 3px; font: 700 10.5px/1.5 var(--sans); letter-spacing: 0.06em; color: #fff; background: var(--text); }
.tag--red { background: var(--red); }
.tag--blue { background: var(--blue); }
.tag--green { background: var(--green); }
.credit { margin-block-start: 12px; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.credit a { color: inherit; }

/* ---------- header ---------- */
.site-header { background: var(--card); position: relative; z-index: 20; border-block-end: 1px solid var(--line); }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--text); color: var(--bg); padding: 8px 14px; z-index: 30; }
.skip:focus { top: 8px; color: var(--bg); }
.header-row { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex-shrink: 0; }
.brand:hover { color: var(--text); }
.logo { flex-shrink: 0; display: block; }
.brand-name { font: 700 14.5px/1.2 'Quicksand', 'Nunito', 'Varela Round', var(--sans); letter-spacing: 0.01em; white-space: nowrap; }
html[dir='rtl'] .brand-name { font: 700 17px/1.4 var(--naskh); }
@media (max-width: 999px) { .brand { flex: 1 1 auto; min-width: 0; } }
@media (max-width: 999px) { .site-header .logo { width: 38px; height: 38px; } }
@media (max-width: 380px) { .brand-name { font-size: 13px; } .site-header .logo { width: 34px; height: 34px; } }
.site-nav { display: flex; align-items: center; flex: 1; gap: 20px; }
.nav-links { display: flex; align-items: center; justify-content: center; flex: 1; gap: clamp(10px, 1.25vw, 22px); }
.nav-links a {
  color: var(--text); text-decoration: none; font: 500 14px/1.3 var(--sans); white-space: nowrap;
  padding-block: 8px; border-block-end: 2px solid transparent;
}
html[dir='rtl'] .nav-links a { font: 600 16px/1.5 var(--naskh); }
.nav-links a:hover { color: var(--red); }
.nav-links a[aria-current='page'] { border-color: var(--red); color: var(--red); }
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group > a::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-inline-start: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-3px) rotate(45deg); }
.nav-sub {
  display: none; position: absolute; z-index: 40; top: 100%; inset-inline-start: -14px; min-width: 190px; width: max-content; max-width: 320px; flex-direction: column;
  padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
}
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { display: flex; }
.nav-group:hover .nav-sub--wide, .nav-group:focus-within .nav-sub--wide { display: grid; grid-template-columns: 1fr 1fr; width: 440px; max-width: none; }
.nav-sub a { padding: 9px 12px; border: 0; border-radius: 5px; white-space: normal; }
.nav-sub a:hover { background: var(--panel); color: var(--text); }
.nav-sub a[aria-current='page'] { border: 0; }
.nav-tools { display: flex; align-items: center; gap: 8px; }
.nav-search { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--text); }
.nav-search:hover { background: var(--panel); color: var(--text); }
.lang-menu { position: relative; }
.lang-menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font: 500 14px/1 var(--sans); padding: 10px 6px; border-radius: 4px; white-space: nowrap;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); }
.lang-menu[open] summary::after { transform: translateY(2px) rotate(225deg); }
.lang-list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 150px; z-index: 40;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 6px;
  display: flex; flex-direction: column;
}
.lang-list a { padding: 8px 12px; border-radius: 5px; text-decoration: none; font-size: 16px; line-height: 1.5; color: var(--text); }
.lang-list a:hover { background: var(--panel); color: var(--text); }
.lang-list a[aria-current='true'] { color: var(--red); font-weight: 600; }
.lang-list a:lang(en) { font-family: var(--sans); }
.nav-tools .btn { white-space: nowrap; }
.menu-btn { display: none; }

@media (max-width: 999px) {
  .js .menu-btn {
    display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; margin-inline-start: auto;
    font: 600 15px var(--sans); color: var(--text); background: transparent;
    border: 1px solid rgba(17, 26, 38, 0.4); border-radius: 6px; padding: 9px 14px; cursor: pointer;
  }
  .menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 18px; height: 2px; background: currentColor; }
  .menu-bars { position: relative; }
  .menu-bars::before, .menu-bars::after { content: ''; position: absolute; inset-inline-start: 0; }
  .menu-bars::before { top: -6px; }
  .menu-bars::after { top: 6px; }
  .header-row { flex-wrap: wrap; gap: 12px; min-height: 60px; }
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-block-end: 16px; }
  .js .site-nav { display: none; }
  .js .site-nav[data-open] { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: 13px 2px; border-block-end: 1px solid var(--line); font-size: 17px; }
  .nav-links a[aria-current='page'] { border-color: var(--line); }
  .nav-group { flex-direction: column; align-items: stretch; }
  .nav-group > a::after { display: none; }
  .nav-sub, .nav-group:hover .nav-sub--wide, .nav-group:focus-within .nav-sub--wide { display: flex; width: auto; }
  .nav-sub { display: flex; position: static; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .nav-sub a { padding: 11px 2px 11px 22px; border-block-end: 1px solid var(--line); border-radius: 0; font-size: 16px; color: var(--body); }
  html[dir='rtl'] .nav-sub a { padding: 11px 22px 11px 2px; }
  .nav-tools { flex-wrap: wrap; gap: 10px 16px; padding-block-start: 14px; }
  .nav-tools .btn { order: -1; flex: 1 1 100%; padding: 14px; font-size: 16px; }
  .lang-menu summary { font-size: 16px; padding: 12px 4px; }
  .lang-list { position: static; box-shadow: none; flex-direction: row; flex-wrap: wrap; margin-block-start: 4px; }
}
@media (max-width: 520px) {
  .js .menu-btn { padding: 9px 11px; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- home: hero with the news panel on it, themes, glance, banner ---------- */
.home-top {
  position: relative; max-width: 1296px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27%, 350px); align-items: stretch;
}
.home-hero { grid-column: 1 / -1; grid-row: 1; position: relative; overflow: hidden; background: var(--green-dark); color: #fff; min-height: 440px; display: flex; align-items: flex-end; }
.home-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 24, 19, 0.88) 0%, rgba(7, 24, 19, 0.6) 42%, rgba(7, 24, 19, 0.12) 100%), linear-gradient(0deg, rgba(7, 24, 19, 0.5) 0%, rgba(7, 24, 19, 0) 45%); }
html[dir='rtl'] .home-hero::after { background: linear-gradient(270deg, rgba(7, 24, 19, 0.88) 0%, rgba(7, 24, 19, 0.6) 42%, rgba(7, 24, 19, 0.12) 100%), linear-gradient(0deg, rgba(7, 24, 19, 0.5) 0%, rgba(7, 24, 19, 0) 45%); }
/* The movement's emblem, laid into the photograph as a watermark: the white background drops out
   and the artwork shows as a faint light engraving. */
.hero-mark {
  position: absolute; z-index: 1; top: 50%; inset-inline-end: 33%; height: 86%; width: auto; transform: translateY(-50%);
  filter: grayscale(1) invert(1) contrast(1.15); mix-blend-mode: screen; opacity: 0.2; pointer-events: none; user-select: none;
}
@media (max-width: 899px) { .hero-mark { inset-inline-end: -14%; top: auto; bottom: -8%; transform: none; height: 70%; opacity: 0.14; } }
.home-hero-text { position: relative; z-index: 1; padding: 40px var(--gutter) 44px; max-width: 640px; }
.hero-kicker { font: 500 12px/1.5 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; margin-block-end: 14px; opacity: 0.92; }
html[dir='rtl'] .hero-kicker { letter-spacing: 0; font: 600 16px/1.6 var(--naskh); }
.home-hero h1 { font: 400 clamp(38px, 4.4vw, 56px)/1.05 var(--serif); letter-spacing: -0.012em; max-width: 8.6em; }
html[dir='rtl'] .home-hero h1 { font: 700 clamp(34px, 4.1vw, 54px)/1.4 var(--naskh); }
.lede { font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.5; color: var(--body); max-width: 34em; }
.home-hero .lede { color: rgba(255, 255, 255, 0.94); margin-block-start: 16px; font-size: clamp(16px, 1.35vw, 18px); max-width: 26em; }
html[dir='rtl'] .lede { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.9; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-block-start: 24px; }
.home-hero-credit { position: absolute; z-index: 1; inset-inline-start: var(--gutter); inset-block-end: 6px; margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 11px; }

.latest { grid-column: 2; grid-row: 1; position: relative; z-index: 2; align-self: start; margin: 14px 14px 14px 0; background: var(--card); box-shadow: var(--shadow); padding: 14px 16px 12px; border-radius: 4px; }
html[dir='rtl'] .latest { margin: 14px 0 14px 14px; }
.latest h2 { font: 600 15px/1.3 var(--sans); padding-block-end: 8px; }
html[dir='rtl'] .latest h2 { font: 700 19px/1.5 var(--naskh); }
.update { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-block: 14px; border-block-start: 1px solid var(--line); }
.update--thumb { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding-block: 9px; }
.update--thumb .update-photo, .update--thumb .update-avatar { width: 52px; height: 52px; aspect-ratio: 1; border-radius: 4px; object-fit: cover; }
.update--thumb .update-meta { font-size: 11px; margin-block-end: 1px; }
.update--thumb .update-meta .tag { font-size: 9.5px; padding: 1px 5px; }
.update--thumb .update-title, .update--thumb .update-text { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.update--thumb .update-title + .update-text, .update--thumb .update-source { display: none; }
.update--thumb .arrow-link { font-size: 12px; margin-block-start: 2px; }
.update-avatar { display: block; }
.update-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--muted); margin-block-end: 3px; }
.update-title { font: 600 14px/1.35 var(--sans); }
.update-text { font-size: 13.5px; line-height: 1.42; color: var(--body); }
.update-source { font-size: 12px; color: var(--muted); margin-block-start: 3px; }
.update .arrow-link { font-size: 13px; margin-block-start: 5px; }
.latest-all { display: flex; justify-content: flex-start; padding-block-start: 9px; border-block-start: 1px solid var(--line); font-size: 13px; }

.themes { display: grid; grid-template-columns: repeat(8, 1fr); border-block-end: 1px solid var(--line); }
.themes a { display: flex; align-items: center; gap: 10px; padding: 22px 6px; text-decoration: none; font: 500 13px/1.25 var(--sans); height: 100%; }
html[dir='rtl'] .themes a { font: 700 15px/1.5 var(--naskh); }
.themes .icon { color: var(--red); }
.themes li:nth-child(even) .icon { color: var(--text); }
.themes a:hover { color: var(--red); }

.glance { padding-block: 30px 44px; }
.glance-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-block-end: 18px; }
.glance-head h2 { font: 400 clamp(24px, 2.4vw, 30px)/1.15 var(--serif); }
html[dir='rtl'] .glance-head h2 { font: 700 clamp(24px, 2.3vw, 29px)/1.5 var(--naskh); }
.glance-head p { color: var(--muted); font-size: 13.5px; margin-block-start: 4px; max-width: 46em; }
html[dir='rtl'] .glance-head p { font-size: 16px; }
.glance-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.glance-cards li { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 18px 18px 16px; display: flex; flex-direction: column; align-items: flex-start; }
.glance-top { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; margin-block-end: 8px; }
.glance-cards .icon { color: var(--green); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.spark i { display: block; width: 6px; height: var(--h); background: #e58a95; border-radius: 1px; }
.spark i:last-child { background: var(--red); }
.glance-value { font: 500 clamp(22px, 2.1vw, 29px)/1.1 var(--serif); color: var(--red); white-space: nowrap; }
html[dir='rtl'] .glance-value { font: 700 24px/1.5 var(--naskh); }
.glance-cards h3 { font: 600 14px/1.35 var(--sans); margin-block: 6px 8px; }
html[dir='rtl'] .glance-cards h3 { font: 700 16px/1.6 var(--naskh); }
.glance-line { font-size: 13px; line-height: 1.45; color: var(--muted); }
html[dir='rtl'] .glance-line { font-size: 15px; line-height: 1.8; }
.glance-cards .arrow-link { margin-block-start: auto; padding-block-start: 12px; font-size: 13px; }

.banner { position: relative; overflow: hidden; background: var(--green-dark); color: #fff; }
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 24, 19, 0.86) 0%, rgba(7, 24, 19, 0.55) 55%, rgba(7, 24, 19, 0.2) 100%); }
.banner .wrap { position: relative; z-index: 1; padding-block: clamp(40px, 6vw, 84px) clamp(30px, 4vw, 52px); }
.banner h2 { font: 400 clamp(28px, 3.4vw, 44px)/1.1 var(--serif); max-width: 16em; }
html[dir='rtl'] .banner h2 { font: 700 clamp(26px, 3vw, 38px)/1.5 var(--naskh); }
.banner p:not(.credit):not(.actions) { margin-block: 12px 22px; font-size: clamp(16px, 1.4vw, 18px); max-width: 34em; color: rgba(255, 255, 255, 0.93); }
.banner .actions { margin-block-start: 0; }
.banner .credit { color: rgba(255, 255, 255, 0.7); margin-block-start: 22px; font-size: 11px; }
.btn--outline { background: transparent; border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.btn--outline:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

@media (max-width: 999px) {
  .themes { grid-template-columns: repeat(4, 1fr); }
  .themes li:nth-child(n + 5) { border-block-start: 1px solid var(--line); }
  .themes a { padding: 16px 6px; }
}
@media (max-width: 999px) { .glance-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .home-top { display: block; }
  .home-hero { min-height: 0; }
  .home-hero-text { padding-block: 56px 48px; }
  .latest, html[dir='rtl'] .latest { margin: -18px var(--gutter) 8px; }
}
@media (max-width: 620px) {
  .themes { grid-template-columns: 1fr 1fr; }
  .themes li { border-block-start: 1px solid var(--line); }
  .themes li:nth-child(-n + 2) { border-block-start: 0; }
  .themes li:nth-child(odd) a { padding-inline-end: 10px; }
  .themes a { padding: 14px 4px; }
  .glance-cards { grid-template-columns: 1fr; }
  .actions .btn { flex: 1 1 auto; }
}

/* "Explore Afghanistan" photo cards: phones and small tablets only */
.explore-mobile { display: none; padding-block: 4px 32px; }
.explore-mobile h2 { font: 400 24px/1.2 var(--serif); margin-block-end: 14px; }
@media (max-width: 900px) {
  .explore-mobile { display: block; }
  .explore-mobile .topic-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .explore-mobile .topic-grid a { position: relative; border: 0; }
  .explore-mobile .topic-grid img { aspect-ratio: 4 / 3; }
  .explore-mobile .topic-body { position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px; background: linear-gradient(0deg, rgba(7, 24, 19, 0.92), rgba(7, 24, 19, 0)); color: #fff; }
  .explore-mobile .topic-name { font: 600 14.5px/1.25 var(--sans); }
  .explore-mobile .topic-sub { display: none; }
}

/* ---------- sections, resource cards ---------- */
.section { padding-block: clamp(32px, 4.4vw, 56px); border-block-end: 1px solid var(--line); }
.featured { background: var(--panel); border-block-start: 1px solid var(--line); }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.resource { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; text-decoration: none; color: var(--text); transition: transform 0.2s, box-shadow 0.2s; }
.resource:hover { color: var(--text); transform: translateY(-3px); box-shadow: var(--shadow); }
.resource img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--panel); }
.resource-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.resource-title { font: 500 18px/1.25 var(--serif); }
.resource-text { font-size: 14px; line-height: 1.45; color: var(--body); margin-block: 6px 10px; }
.resource-meta { font-size: 12.5px; color: var(--muted); margin-block-end: 8px; }
.resource .arrow-link { margin-block-start: auto; font-size: 13.5px; }

/* ---------- bands: label column + content column ---------- */
.band { border-block-end: 1px solid var(--line); padding-block: clamp(40px, 6vw, 72px); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 20px 56px; align-items: start; }
.label { font: 600 13px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
html[dir='rtl'] .label { font: 700 20px/1.6 var(--naskh); letter-spacing: 0; }
.label.big { font: 500 clamp(28px, 3.6vw, 40px)/1.15 var(--serif); letter-spacing: -0.01em; text-transform: none; color: var(--text); }
html[dir='rtl'] .label.big { font: 700 clamp(28px, 3.6vw, 40px)/1.5 var(--naskh); }
.label .count { font-variant-numeric: tabular-nums; }
.art-no { display: block; color: var(--muted); letter-spacing: 0.14em; margin-block-end: 4px; }
html[dir='rtl'] .art-no { letter-spacing: 0; font-weight: 400; font-size: 17px; }
.statement-text { font: 400 clamp(22px, 2.5vw, 30px)/1.42 var(--serif); }
html[dir='rtl'] .statement-text { font: 400 clamp(22px, 2.4vw, 28px)/1.9 var(--naskh); }
.intro, .prose { color: var(--body); max-width: 68ch; }
.prose p + p { margin-block-start: 14px; }
.band p + p { margin-block-start: 18px; }
.more { font-weight: 600; color: var(--green); text-decoration: none; border-block-end: 1px solid var(--gold-line); padding-block-end: 2px; }
.more::after { content: ' \2192'; }
html[dir='rtl'] .more::after { content: ' \2190'; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

.deflist > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 4px 32px; padding-block: 18px; border-block-start: 1px solid var(--line); }
.deflist > div:first-child { border-block-start: 0; padding-block-start: 0; }
.deflist dt { font: 500 21px/1.3 var(--serif); }
html[dir='rtl'] .deflist dt { font-size: 22px; line-height: 1.6; }
.deflist dd { color: var(--body); }
@media (max-width: 560px) { .deflist > div { grid-template-columns: 1fr; } }

.provinces { columns: 4 150px; column-gap: 32px; color: var(--body); }
.provinces li { padding-block: 5px; border-block-end: 1px solid rgba(23, 23, 26, 0.1); break-inside: avoid; }

/* ---------- statements ---------- */
.statement-list { margin-block: 20px; border-block-start: 1px solid var(--line); }
.statement-list li { border-block-end: 1px solid var(--line); }
.statement-list a { display: block; padding-block: 18px; text-decoration: none; }
.s-meta { display: block; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-family: var(--sans); }
.s-title { display: block; font: 500 23px/1.3 var(--serif); margin-block-start: 4px; }
.statement-list a:hover .s-title { color: var(--red); }
.s-summary { display: block; color: var(--body); margin-block-start: 6px; }
.statement-body { padding-block: 8px 72px; font-size: 19px; line-height: 1.7; color: var(--body); }
.statement-body p + p { margin-block-start: 20px; }
.statement-body .signature { margin-block-start: 36px; font: 600 19px var(--serif); color: var(--text); }
.statement-body .permalink { margin-block-start: 28px; padding-block-start: 18px; border-block-start: 1px solid var(--line); font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- inside pages: hero ---------- */
.page-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #f5f3ed 0%, var(--bg) 100%); border-block-end: 1px solid var(--line); }
.page-hero-text { position: relative; z-index: 1; padding-block: clamp(30px, 4vw, 56px) clamp(32px, 4.4vw, 60px); max-width: 600px; }
.page-hero--plain .page-hero-text { max-width: 860px; }
.page-hero-media { position: absolute; inset-block: 0; inset-inline-end: 0; width: 56%; }
.page-hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%);
}
html[dir='rtl'] .page-hero-media img { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 34%); mask-image: linear-gradient(270deg, transparent 0, #000 34%); }
.hero-quote {
  position: absolute; inset-block-start: clamp(16px, 3vw, 36px); inset-inline-end: var(--gutter); max-width: 15.5em;
  padding: 14px 16px; background: rgba(9, 28, 22, 0.78); color: #fff;
  font: 500 12px/1.6 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
}
.hero-credit { position: absolute; z-index: 1; inset-inline-end: var(--gutter); inset-block-end: 8px; margin: 0; padding: 2px 8px; background: rgba(9, 28, 22, 0.6); color: #fff; font-size: 11px; border-radius: 3px; }
.page-hero > .wrap:last-child { position: static; }
.crumbs { font: 400 13px/1.5 var(--sans); color: var(--muted); margin-block-end: 22px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--red); }
.crumbs i { font-style: normal; margin-inline: 0.35em; opacity: 0.7; }
.page-hero h1, .doc-head h1 { font: 400 clamp(34px, 4.3vw, 58px)/1.06 var(--serif); letter-spacing: -0.012em; }
html[dir='rtl'] .page-hero h1, html[dir='rtl'] .doc-head h1 { font: 700 clamp(32px, 4vw, 50px)/1.5 var(--naskh); }
.hero-sub { font: 400 clamp(19px, 1.9vw, 24px)/1.3 var(--serif); color: var(--body); margin-block-start: 14px; }
html[dir='rtl'] .hero-sub { font: 400 clamp(20px, 1.9vw, 24px)/1.9 var(--naskh); }
.page-hero .lede { margin-block-start: 16px; font-size: 16px; line-height: 1.55; }
@media (max-width: 860px) {
  .page-hero { display: flex; flex-direction: column; }
  .page-hero-text { max-width: none; padding-block: 26px 24px; }
  .page-hero-media { position: relative; order: 2; width: 100%; aspect-ratio: 16 / 9; }
  .page-hero-media img, html[dir='rtl'] .page-hero-media img { -webkit-mask-image: none; mask-image: none; }
  .hero-quote { inset-block-start: auto; inset-block-end: 14px; inset-inline: var(--gutter) auto; font-size: 11px; max-width: min(17em, 74%); }
  .page-hero > .wrap:last-child { order: 3; position: relative; }
  .hero-credit { position: static; display: inline-block; margin-block: 8px; background: none; color: var(--muted); padding: 0; }
}

/* The older text pages (About, Charter, Statements, Press, Privacy, Terms) use this header. */
.doc-head { background: linear-gradient(180deg, #f5f3ed 0%, var(--bg) 100%); border-block-end: 1px solid var(--line); padding-block: clamp(34px, 4.6vw, 62px) clamp(30px, 4vw, 52px); }
.doc > .band:first-of-type { border-block-start: 0; }
.doc-head h1 { margin-block-end: 16px; max-width: 16em; }
.doc-head .lede { max-width: 38em; }
.doc-head .s-meta { margin-block-end: 10px; }
.doc-foot { padding-block: 36px 72px; }
.draft, .draft-tag { border: 1px dashed var(--gold); color: var(--gold); border-radius: 4px; }
.draft { padding: 14px 16px; max-width: 68ch; }
.draft-tag { display: inline-block; padding: 2px 10px; font-size: 14px; margin-block-end: 16px; }

/* ---------- tabs and "In This Section" ---------- */
.tabs { border-block-end: 1px solid var(--line); background: var(--card); }
.tabs .wrap { display: flex; gap: clamp(18px, 3vw, 40px); overflow-x: auto; scrollbar-width: none; }
.tabs .wrap::-webkit-scrollbar { display: none; }
.tabs a { flex-shrink: 0; padding-block: 15px 13px; border-block-end: 2px solid transparent; text-decoration: none; font: 500 14.5px/1.3 var(--sans); color: var(--body); }
.tabs a:hover { color: var(--red); }
.tabs a[aria-current='true'] { color: var(--text); border-color: var(--red); }
.with-toc { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.toc { position: sticky; top: 16px; margin-block: 32px; padding-inline-start: 24px; border-inline-start: 1px solid var(--line); max-height: calc(100vh / var(--zoom) - 32px); overflow-y: auto; }
.toc h2 { font: 500 19px/1.3 var(--serif); margin-block-end: 12px; }
.toc a { display: flex; gap: 14px; padding-block: 7px; text-decoration: none; font-size: 14px; line-height: 1.35; color: var(--body); }
.toc a span { color: var(--muted); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--red); }
@media (max-width: 999px) { .with-toc { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }

/* ---------- report text, tables, charts ---------- */
.report > section { padding-block: clamp(28px, 3.6vw, 44px); border-block-end: 1px solid var(--line); scroll-margin-top: 12px; }
.report > section:last-of-type { border-block-end: 0; }
.report h2 { font: 400 clamp(25px, 2.6vw, 32px)/1.15 var(--serif); margin-block-end: 16px; }
.report .sub { font: 500 20px/1.3 var(--serif); margin-block: 30px 12px; scroll-margin-top: 12px; }
.report p { color: var(--body); max-width: 76ch; font-size: 16.5px; }
.report p + p, .report ul + p, .report .table-wrap + p, .report figure + p { margin-block-start: 14px; }
.report a:not(.btn):not(.arrow-link):not(.next-topic) { color: var(--green); }
.dots { margin-block: 12px; max-width: 76ch; }
.dots li { position: relative; padding-inline-start: 20px; margin-block: 9px; color: var(--body); font-size: 16.5px; }
.dots li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.cite { font-size: 0.68em; line-height: 0; margin-inline-start: 1px; }
.cite a { color: var(--green); text-decoration: none; padding: 0 1px; }
.cite a:hover { text-decoration: underline; }
.table-wrap { overflow-x: auto; margin-block: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; line-height: 1.45; }
.table-wrap th, .table-wrap td { padding: 10px 14px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); }
.table-wrap thead th { background: var(--panel); font: 600 12.5px/1.4 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--body); white-space: nowrap; }
.table-wrap tbody th { font-weight: 600; color: var(--text); min-width: 9em; }
.table-wrap td { color: var(--body); }
.table-wrap tbody tr:last-child > * { border-block-end: 0; }
.bars { margin-block: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); max-width: 760px; }
.bars figcaption { font: 600 14px/1.4 var(--sans); margin-block-end: 12px; }
.bars dl > div { display: grid; grid-template-columns: minmax(5.5em, 8.5em) minmax(0, 1fr); gap: 4px 12px; align-items: center; padding-block: 4px; font-size: 13.5px; }
.bars dt { color: var(--muted); }
.bars dd { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bar { display: block; height: 14px; width: calc(var(--w) * 0.62); min-width: 2px; background: var(--green); border-radius: 2px; flex-shrink: 0; }
.bar-value { color: var(--text); font-weight: 600; font-size: 13px; }
@media (max-width: 560px) { .bars dl > div { grid-template-columns: 1fr; } .bar { width: calc(var(--w) * 0.5); } }

/* ---------- indicators ---------- */
.indicator-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.indicator { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 16px; display: flex; flex-direction: column; --tone: var(--green); }
.tone-red { --tone: #d9475a; }
.tone-blue { --tone: #2f72d6; }
.indicator h3 { font: 500 13px/1.35 var(--sans); color: var(--muted); }
.ind-value { font: 500 21px/1.2 var(--serif); margin-block: 6px 4px; color: var(--text) !important; }
.tone-red .ind-value { color: var(--red) !important; }
.tone-green .ind-value { color: var(--green) !important; }
.ind-note { font-size: 12.5px !important; line-height: 1.4; color: var(--muted) !important; }
.cols { display: flex; align-items: flex-end; gap: 8px; height: 132px; margin-block-start: auto; padding-block-start: 16px; }
.cols li { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.col { display: block; width: 100%; max-width: 44px; height: var(--h); background: var(--tone); border-radius: 2px 2px 0 0; }
.col-value { font: 600 10.5px/1.2 var(--sans); color: var(--text); text-align: center; overflow-wrap: anywhere; }
.col-label { font: 400 11px/1.2 var(--sans); color: var(--muted); }
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-block-start: 18px; padding: 24px 26px; background: var(--panel); border: 1px solid var(--line); }
.callout > div:first-child { flex: 1 1 320px; }
.callout-title { font: 500 clamp(20px, 2vw, 25px)/1.25 var(--serif) !important; color: var(--red) !important; margin-block-end: 6px; }
.callout-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.callout-side p { font-size: 13px !important; color: var(--muted) !important; }
.position { background: none; }
.position p:not(:last-child) { font: 400 21px/1.45 var(--serif); color: var(--text); max-width: 34em; }
.position p + p { margin-block-start: 18px; }
.next-topic { display: flex; flex-direction: column; gap: 2px; margin-block: 8px 44px; padding: 20px 22px; background: var(--green-dark); color: #fff; border-radius: 6px; text-decoration: none; }
.next-topic:hover { color: #fff; background: #164a3a; }
.next-topic span { font: 500 12px/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.next-topic strong { font: 400 23px/1.25 var(--serif); }
@media (max-width: 999px) { .indicator-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .indicator-grid { grid-template-columns: 1fr; } .cols { height: 112px; } }

/* ---------- topic index ---------- */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.topic-grid a { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; text-decoration: none; color: var(--text); transition: transform 0.2s, box-shadow 0.2s; }
.topic-grid a:hover { color: var(--text); transform: translateY(-3px); box-shadow: var(--shadow); }
.topic-grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.topic-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.topic-name { font: 500 21px/1.2 var(--serif); }
.topic-sub { font-size: 14.5px; line-height: 1.45; color: var(--body); margin-block: 6px 14px; }
.topic-figure { font: 500 20px/1.2 var(--serif); color: var(--red); margin-block: auto 12px; }
.topic-figure small { display: block; font: 400 12.5px/1.4 var(--sans); color: var(--muted); margin-block-start: 3px; }

/* ---------- knowledge center ---------- */
.k-hero { position: relative; overflow: hidden; background: var(--green-dark); color: #fff; }
.k-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 24, 19, 0.88) 0%, rgba(7, 24, 19, 0.6) 55%, rgba(7, 24, 19, 0.35) 100%); }
.k-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 40px; align-items: end; padding-block: clamp(44px, 7vw, 96px) clamp(30px, 4vw, 52px); }
.k-hero h1 { font: 400 clamp(34px, 4.3vw, 56px)/1.06 var(--serif); max-width: 8.5em; }
.k-hero p { margin-block-start: 14px; font-size: 16px; line-height: 1.5; max-width: 30em; color: rgba(255, 255, 255, 0.92); }
.k-search { display: flex; background: #fff; border-radius: 5px; overflow: hidden; scroll-margin-top: 90px; }
.k-search input { flex: 1; min-width: 0; border: 0; padding: 15px 16px; font: 16px var(--sans); color: var(--text); background: transparent; }
.k-search input:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
.k-search button { border: 0; background: var(--green-dark); color: #fff; width: 54px; display: grid; place-items: center; cursor: pointer; }
.pills { display: flex; gap: 8px; padding-block: 22px 6px; overflow-x: auto; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pills button { flex-shrink: 0; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font: 500 14px/1.2 var(--sans); color: var(--text); cursor: pointer; }
.pills button:hover { border-color: var(--text); }
.pills button[aria-pressed='true'] { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.k-title { font: 400 26px/1.2 var(--serif); margin-block: 18px 16px; }
.k-empty { padding: 28px; background: var(--panel); border-radius: 6px; color: var(--body); }
.knowledge > .wrap { padding-block-end: 44px; }
@media (max-width: 800px) { .k-hero-inner { grid-template-columns: 1fr; } }

/* ---------- updates ---------- */
.update-list { margin-block-start: 10px; }
.update--full { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding-block: 22px; }
.update--full:first-child { border-block-start: 0; }
.update--full .update-avatar { width: 44px; height: 44px; justify-self: end; }
.update-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.update--full .update-meta { font-size: 13px; }
.update--full .update-title { font: 500 20px/1.25 var(--serif); }
.update--full .update-text { font-size: 16.5px; line-height: 1.5; color: var(--text); }
.update--full .update-source { font-size: 13.5px; }
.update--full .update-source a { color: var(--green); }
.update--full .arrow-link { font-size: 14px; }
.update-credit { font-size: 11.5px; color: var(--muted); margin-block-start: 8px; }
.update-credit a { color: inherit; }
@media (max-width: 620px) {
  .update--full { grid-template-columns: 1fr; gap: 12px; }
  .update--full .update-avatar { display: none; }
}

/* ---------- timeline and sources ---------- */
.timeline { border-inline-start: 2px solid var(--line); margin-inline-start: 6px; }
.timeline li { position: relative; display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 2px 18px; padding: 10px 0 10px 22px; }
html[dir='rtl'] .timeline li { padding: 10px 22px 10px 0; }
.timeline li::before { content: ''; position: absolute; inset-inline-start: -6px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--bg); }
.timeline time { font: 600 14px/1.5 var(--sans); color: var(--text); }
.timeline p { font-size: 15.5px; }
@media (max-width: 620px) { .timeline li { grid-template-columns: 1fr; } }
.source-list { list-style: decimal; padding-inline-start: 2.2em; }
.source-list li { padding: 8px 6px; border-block-end: 1px solid var(--line); font-size: 15.5px; scroll-margin-top: 20px; overflow-wrap: anywhere; }
.source-list li::marker { color: var(--muted); font-size: 13px; }
.source-list li:target { background: #fff3c4; }
.source-list a { color: var(--green); }

/* ---------- join wizard ---------- */
.join-steps { display: flex; gap: clamp(8px, 3vw, 40px); padding-block: 26px 22px; border-block-end: 1px solid var(--line); }
.join-steps li { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--muted); min-width: 0; }
.join-steps li > span { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font: 600 13.5px var(--sans); }
.join-steps strong { font: 500 14px/1.3 var(--sans); }
.join-steps li.is-current { color: var(--text); }
.join-steps li.is-current strong { font-weight: 700; }
.join-steps li.is-current > span { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.join-steps li.is-done > span { background: var(--green); border-color: var(--green); color: #fff; }
.join-layout { padding-block: 26px 40px; }
.join-flow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
.join-step legend, .join-side legend { font: 500 clamp(21px, 2.1vw, 26px)/1.25 var(--serif); }
.join-side legend { font-size: 19px; margin-block-end: 12px; }
.step-hint { color: var(--muted); font-size: 14.5px; margin-block: 4px 16px; }
.ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ways--list { grid-template-columns: 1fr; gap: 8px; }
.ways--list .way { padding: 10px 12px; }
.levels { display: grid; gap: 12px; }
.way { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.way input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.way .icon { color: var(--green); margin-block-start: 2px; }
.way strong { display: block; font: 600 14.5px/1.3 var(--sans); }
.way small { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); margin-block-start: 2px; }
.way:hover { border-color: var(--green); }
.way:has(input:checked) { border-color: var(--green); background: #eef6f1; box-shadow: inset 0 0 0 1px var(--green); }
.way:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields label, .field-wide { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--body); }
.field-wide { grid-column: 1 / -1; }
.fields input, .fields textarea { font: 16px var(--sans); color: var(--text); background: var(--card); border: 1px solid rgba(17, 26, 38, 0.35); border-radius: 6px; padding: 11px 13px; width: 100%; }
.fields textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.fields select {
  font: 16px var(--sans); color: var(--text); background: var(--card); border: 1px solid rgba(17, 26, 38, 0.35); border-radius: 6px;
  padding: 11px 38px 11px 13px; width: 100%; min-height: 46px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}
html[dir='rtl'] .fields select { padding: 11px 13px 11px 38px; background-position: 13px 50%, 19px 50%; }
.fields select:invalid { color: var(--muted); }
.phone-row { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr); gap: 10px; }
.field-wide small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.checks legend { font: 14px/1.5 var(--sans) !important; color: var(--body); margin-block-end: 6px; padding: 0; }
.checks > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 12px; }
.checks label { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 14.5px !important; color: var(--text) !important; padding-block: 5px; cursor: pointer; }
.checks input { width: 18px !important; height: 18px; margin: 0; padding: 0 !important; accent-color: var(--green); flex-shrink: 0; }
.checks .other-lang { flex-direction: column !important; align-items: stretch; gap: 6px !important; margin-block-start: 8px; max-width: 320px; color: var(--body) !important; }
.checks .other-lang input { width: 100% !important; height: auto; padding: 11px 13px !important; }
@media (max-width: 420px) { .phone-row { grid-template-columns: 1fr; } }
.choices { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.choice { position: relative; flex-direction: row !important; align-items: center; gap: 8px !important; padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; color: var(--text) !important; }
.choice input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--green); }
.choice:has(input:checked) { border-color: var(--green); background: #eef6f1; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.review { border: 1px solid var(--line); border-radius: 6px; background: var(--card); margin-block: 14px 16px; }
.review > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 4px 16px; padding: 11px 16px; border-block-end: 1px solid var(--line); font-size: 15px; }
.review > div:last-child { border-block-end: 0; }
.review dt { color: var(--muted); }
.review dd { overflow-wrap: anywhere; }
.join-actions { display: flex; justify-content: space-between; gap: 12px; margin-block: 22px 8px; }
.join-actions [data-next] { margin-inline-start: auto; min-width: 130px; }
.fineprint { font-size: 14px; color: var(--muted); }
.form-error { color: var(--red-dark); margin-block-start: 14px; }
.join-done { padding: 26px 28px; border: 1px solid var(--line); background: var(--card); max-width: 680px; }
.join-done h2 { font: 500 25px/1.25 var(--serif); margin-block-end: 8px; }
.join-done p { color: var(--body); margin-block-end: 12px; }
.join-strip { position: relative; }
.join-strip img { display: block; width: 100%; height: clamp(110px, 14vw, 190px); object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%); mask-image: linear-gradient(180deg, transparent 0, #000 55%); }
.join-strip .credit { position: absolute; inset-inline-end: var(--gutter); inset-block-end: 6px; margin: 0; padding: 2px 8px; background: rgba(9, 28, 22, 0.6); color: #fff; font-size: 11px; border-radius: 3px; }
@media (max-width: 900px) { .join-flow { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .join-steps { gap: 4px; }
  .join-steps li { flex-direction: column; text-align: center; gap: 6px; }
  .join-steps strong { font-size: 11.5px; }
  .fields { grid-template-columns: 1fr; }
  .join-actions .btn { flex: 1; }
}


/* ---------- cover hero: photograph across the top, title over its faded lower edge ---------- */
.page-hero--cover { background: var(--bg); display: block; }
.page-hero--cover .page-hero-media { position: relative; width: 100%; height: clamp(230px, 30vw, 400px); inset: auto; aspect-ratio: auto; }
.page-hero--cover .page-hero-media img, html[dir='rtl'] .page-hero--cover .page-hero-media img { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 96%); mask-image: linear-gradient(180deg, #000 45%, transparent 96%); }
.page-hero--cover .page-hero-text { margin-block-start: clamp(-64px, -5vw, -36px); padding-block: 0 clamp(24px, 3vw, 36px); max-width: 760px; }
.page-hero--cover .crumbs { margin-block-end: 12px; color: var(--text); }
.page-hero--cover .crumbs a { color: var(--text); }
.page-hero--cover .hero-credit { position: absolute; inset-block-start: 8px; inset-block-end: auto; }
.page-hero--dark.page-hero--cover { background: var(--green-dark); color: #fff; }
.page-hero--dark .page-hero-media img, html[dir='rtl'] .page-hero--dark .page-hero-media img { -webkit-mask-image: none; mask-image: none; }
.page-hero--dark .page-hero-media { height: clamp(300px, 34vw, 440px); }
.page-hero--dark .page-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 24, 19, 0.92) 0%, rgba(7, 24, 19, 0.45) 45%, rgba(7, 24, 19, 0) 80%); }
.page-hero--dark .page-hero-text { position: absolute; inset-block-end: 0; margin: 0; padding-block-end: clamp(20px, 3vw, 36px); }
.page-hero--dark > .wrap:first-of-type { position: absolute; inset: 0; pointer-events: none; }
.page-hero--dark .page-hero-text > * { pointer-events: auto; }
.page-hero--dark .hero-sub { color: rgba(255, 255, 255, 0.94); }
.page-hero--dark .crumbs { display: none; }
@media (max-width: 860px) {
  .page-hero--cover .page-hero-media { order: 0; }
  .page-hero--cover .hero-credit { position: static; }
  .page-hero--dark .hero-credit { color: rgba(255, 255, 255, 0.75); padding-inline: var(--gutter); }
}

/* ---------- overview and topic pages ---------- */
.topic .report { padding-block-end: 28px; }
.history { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 40px; align-items: start; }
.history figure img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; display: block; }
.history figure .credit { margin-block-start: 6px; font-size: 11.5px !important; }
.eras { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.eras a { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 18px; background: var(--panel); border-radius: 6px; text-decoration: none; color: var(--text) !important; }
.eras a:hover { background: #ebe8df; }
.eras .icon { color: var(--green); }
.eras li:nth-child(2) .icon { color: var(--red); }
.eras strong { display: block; font: 500 20px/1.2 var(--serif); }
.eras em { display: block; font: 600 14px/1.4 var(--sans); font-style: normal; }
.eras small { display: block; font-size: 13.5px; line-height: 1.45; color: var(--body); margin-block-start: 6px; }
.eras .arrow-link { margin-inline-start: auto; align-self: flex-end; }
.more-row { margin-block-start: 18px; text-align: end; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.facts li { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.facts strong { font: 500 clamp(20px, 2vw, 25px)/1.15 var(--serif); color: var(--red); }
.facts .tone-green strong { color: var(--green); }
.facts .tone-blue strong { color: var(--text); }
.facts span { font: 600 13.5px/1.35 var(--sans); }
.facts small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.situation { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-block-start: 16px; }
.situation .indicator .cols { height: 200px; }
.situation .indicator .col { max-width: 72px; }
.situation .indicator h3 { font: 500 19px/1.3 var(--serif); color: var(--text); }
.situation aside { background: var(--panel); border-radius: 6px; padding: 18px 20px; }
.situation aside h3 { font: 500 19px/1.3 var(--serif); margin-block-end: 6px; }
.situation .dots li { font-size: 14.5px; margin-block: 8px; }
.topic-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.topic-name { font-size: 18px; }
.topic-sub { margin-block: 4px 0; font-size: 13.5px; }
@media (max-width: 900px) {
  .history, .situation { grid-template-columns: 1fr; }
  .eras { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } }

/* ---------- data explorer ---------- */
.explorer { margin-block-start: 36px; padding-block-start: 22px; border-block-start: 1px solid var(--line); }
.explorer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.explorer-head .k-title { margin-block: 0; }
.explorer-head .pills { padding-block: 12px; flex: 1; min-width: 0; }
.explorer-panel { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.indicator { min-width: 0; }
.cols li { overflow: hidden; }
.explorer-panel .indicator .cols { height: 230px; }
.explorer-panel .indicator h3 { font: 500 18px/1.3 var(--serif); color: var(--text); }
.explorer-panel > div:last-child { background: var(--panel); border-radius: 6px; padding: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.explorer-panel p { color: var(--body); font-size: 15.5px; }
.explorer-source { font-size: 13px !important; color: var(--muted) !important; }
@media (max-width: 800px) { .explorer-panel { grid-template-columns: minmax(0, 1fr); } .explorer-panel .cols { gap: 4px; } .explorer-panel .col-label { font-size: 9.5px; } .explorer-panel .indicator .cols { height: 180px; } .explorer-panel .col-value { font-size: 9.5px; } }

/* ---------- core principles ---------- */
.core { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.core li { display: flex; }
.core a { display: flex; flex: 1; gap: 12px; align-items: flex-start; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; }
.core a:hover { border-color: var(--green); box-shadow: var(--shadow); color: var(--text); }
.core a[aria-current='page'] { border-color: var(--green); background: #eef6f1; }
.facts-note { margin-block-start: 14px; font-size: 14px !important; color: var(--muted) !important; }
.core .icon { color: var(--green); }
.core strong { display: block; font: 600 15px/1.3 var(--sans); }
.core span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--body); margin-block-start: 3px; }
@media (max-width: 999px) { .core { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .core { grid-template-columns: 1fr; } }

/* ---------- blocks added from the website editor ---------- */
.afm-block { padding-block: clamp(32px, 4.4vw, 56px); border-block-end: 1px solid var(--line); }
.afm-block .wrap { display: grid; gap: 22px 44px; align-items: center; }
.afm-block .wrap:has(img) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.afm-block img { width: 100%; height: auto; border-radius: 6px; display: block; }
.afm-block h2 { font: 400 clamp(25px, 2.8vw, 34px)/1.15 var(--serif); margin-block-end: 12px; }
.afm-block p { color: var(--body); max-width: 70ch; }
.afm-block p + p { margin-block-start: 12px; }
.afm-block--tint { background: var(--panel); }
.afm-block--dark { background: var(--green-dark); color: #fff; }
.afm-block--dark p { color: rgba(255, 255, 255, 0.9); }
.report > .afm-block .wrap { padding-inline: 0; }
@media (max-width: 760px) { .afm-block .wrap:has(img) { grid-template-columns: 1fr; } }

/* ---------- tiles and call-to-action band ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.tile-grid li { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.tile-grid h2 { font: 500 20px/1.25 var(--serif); }
.tile-grid p { color: var(--body); overflow-wrap: anywhere; font-size: 15.5px; }
.cta-band { background: var(--green-dark); color: #fff; }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-block: clamp(30px, 4vw, 48px); }
.cta-band h2 { font: 400 clamp(24px, 2.6vw, 32px)/1.15 var(--serif); margin-block-end: 6px; }
html[dir='rtl'] .cta-band h2 { font: 700 clamp(24px, 2.5vw, 30px)/1.5 var(--naskh); }
.cta-band p { color: rgba(255, 255, 255, 0.88); max-width: 40em; }

/* ---------- footer ---------- */
.site-footer { background: var(--panel); border-block-start: 1px solid var(--line); font-size: 15px; }
.site-header + main:last-child { min-height: 60vh; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; padding-block: 44px 30px; }
.footer-brand { display: flex; gap: 14px; align-items: flex-start; }
.footer-brand strong { display: block; font: 500 19px/1.25 var(--serif); }
html[dir='rtl'] .footer-brand strong { font: 700 20px/1.6 var(--naskh); }
.footer-brand span { display: block; color: var(--muted); font-size: 17px; text-align: start; unicode-bidi: plaintext; }
html[dir='ltr'] .footer-brand span { text-align: left; }
.site-footer nav { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.site-footer h2 { font: 600 12.5px/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-block-end: 6px; }
html[dir='rtl'] .site-footer h2 { font: 700 17px/1.6 var(--naskh); letter-spacing: 0; }
.site-footer nav a { color: var(--body); text-decoration: none; overflow-wrap: anywhere; }
.site-footer nav a:hover { color: var(--red); text-decoration: underline; }
.footer-base { border-block-start: 1px solid var(--line); padding-block: 18px 26px; color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-base a { color: var(--muted); }
@media (max-width: 999px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-block: 34px 24px; } }
@media (max-width: 380px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- scroll story: one photograph per principle ---------- */
.story { border-block-end: 1px solid var(--line); background: #f3f1ea; }
.story-label { font: 600 13px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); padding: 28px var(--gutter) 12px; max-width: 1296px; margin: 0 auto; }
html[dir='rtl'] .story-label { font: 700 20px/1.6 var(--naskh); letter-spacing: 0; }
.scene { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: cover; background: #1a1a1d; }
.caption { max-width: 1296px; margin: 0 auto; padding: 22px var(--gutter) 44px; }
.caption h3 { font: 400 clamp(32px, 5vw, 64px)/1.04 var(--serif); letter-spacing: -0.015em; margin-block-end: 14px; }
html[dir='rtl'] .caption h3 { font: 700 clamp(30px, 4.6vw, 58px)/1.4 var(--naskh); letter-spacing: 0; }
.caption p { font-size: clamp(17px, 1.6vw, 21px); color: var(--body); max-width: 46ch; }
.story-ticks { display: none; }

/* Pinned mode (script running, motion allowed): the stage fills the screen and stays put while
   the page scrolls through one screen-height per photograph. The photograph zooms slowly. */
.story.is-pinned { height: calc((var(--scenes) * 100vh + 100vh) / var(--zoom)); }
.is-pinned .story-stage { position: sticky; top: 0; height: calc(100vh / var(--zoom)); height: calc(100svh / var(--zoom)); overflow: hidden; background: #101114; }
.is-pinned .story-label { position: absolute; z-index: 3; inset: 0 0 auto 0; max-width: none; padding: 28px max(var(--gutter), calc((100vw - 1296px) / 2 + var(--gutter))) 56px; color: #f7f1e3; background: linear-gradient(to bottom, rgba(12, 12, 14, 0.62), rgba(12, 12, 14, 0)); }
.is-pinned .scene-item { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0s linear 0.8s; --p: 0.5; }
.is-pinned .scene-item.is-active { opacity: 1; visibility: visible; transition: opacity 0.8s ease; }
.is-pinned .scene { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; transform: scale(calc(1.02 + var(--p) * 0.07)); transform-origin: 50% 45%; will-change: transform; }
.is-pinned .credit { color: rgba(247, 241, 227, 0.72); }
.is-pinned .caption {
  position: absolute; z-index: 2; inset: auto 0 0 0; max-width: none; margin: 0;
  padding: 110px max(var(--gutter), calc((100vw - 1296px) / 2 + var(--gutter))) clamp(28px, 6vh, 64px);
  background: linear-gradient(to top, rgba(12, 12, 14, 0.92) 0%, rgba(12, 12, 14, 0.66) 55%, rgba(12, 12, 14, 0) 100%);
  color: #f7f1e3;
}
.is-pinned .caption p:not(.credit) { color: #e9e2d2; }
.is-pinned .caption h3, .is-pinned .caption p { transform: translateY(24px); opacity: 0; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s, opacity 0.6s ease 0.15s; }
.is-pinned .caption p { transition-delay: 0.28s; }
.is-pinned .is-active .caption h3, .is-pinned .is-active .caption p { transform: none; opacity: 1; }
.is-pinned .story-ticks { display: flex; gap: 8px; position: absolute; z-index: 3; inset-block-start: 34px; inset-inline-end: max(var(--gutter), calc((100vw - 1296px) / 2 + var(--gutter))); }
.story-ticks span { width: 34px; height: 4px; background: rgba(247, 241, 227, 0.42); transition: background 0.4s; }
.story-ticks span.is-active { background: #f7f1e3; }
@media (max-width: 760px) {
  .is-pinned .scene { inset: 0 0 auto 0; height: 58svh; }
  .is-pinned .caption { background: linear-gradient(to top, #101114 0%, #101114 80%, rgba(16, 17, 20, 0) 100%); padding-block-start: 64px; min-height: calc(42svh + 64px); }
  .is-pinned .story-ticks span { width: 20px; }
  .is-pinned .story-ticks { inset-block-start: 64px; inset-inline-start: var(--gutter); inset-inline-end: auto; }
}
@media (prefers-reduced-motion: reduce) { .scene-item, .caption h3, .caption p { transition: none !important; } }

/* ---------- cookie banner ---------- */
.cookie-banner {
  position: fixed; z-index: 60; inset: auto 16px 16px 16px; max-width: 760px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 16px 18px; border-radius: 14px; background: var(--text); color: var(--bg);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32); font-size: 15px; line-height: 1.5;
}
.cookie-banner p { flex: 1 1 320px; margin: 0; }
.cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.forum-app ~ .cookie-banner, body:has(.tabbar) .cookie-banner { inset-block-end: 16px; }
@media (max-width: 820px) {
  body:has(.tabbar) .cookie-banner { inset-block-end: calc(80px + env(safe-area-inset-bottom)); }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1 1 0; }
}

/* ---------- colour rules ----------
   One rule for every component: a light surface carries dark text, a dark or coloured surface
   carries light text. These come last so no earlier, more local rule can break them.
   --on-accent and --on-dark are the text colours for the accent and dark surfaces; the website
   editor recalculates them if an administrator picks new colours. */
:root { --on-accent: #fff; --on-dark: #fff; }

/* Light surfaces: dark text, in every state. */
.btn--light, .btn--light:hover, .btn--light:focus-visible,
.btn--ghost, .btn--ghost:hover, .btn--ghost:focus-visible,
.pills button:not([aria-pressed='true']),
.menu-btn, .lang-menu summary, .lang-list a, .nav-sub a,
.way, .choice, .fields input, .fields textarea, .fields select:valid, .k-search input,
.latest, .resource, .indicator, .facts li, .glance-cards li, .tile-grid li, .core li, .eras a,
.topic-grid a, .core a, .review, .join-done, .empty-note, .table-wrap, .bars { color: var(--text); }
.btn--light, .btn--ghost { background: #fff; }
.btn--light:hover, .btn--ghost:hover { background: var(--panel); }

/* Accent surfaces (the red button, tags): light text. */
.btn:not(.btn--light):not(.btn--ghost):not(.btn--dark):not(.btn--outline),
.btn:not(.btn--light):not(.btn--ghost):not(.btn--dark):not(.btn--outline):hover,
.tag--red { color: var(--on-accent); }

/* Dark surfaces: light text, and links inside them follow. */
.btn--dark, .btn--dark:hover, .btn--outline, .btn--outline:hover,
.pills button[aria-pressed='true'], .k-search button, .skip, .tag,
.join-steps li.is-current > span, .join-steps li.is-done > span { color: var(--on-dark); }
.home-hero, .banner, .k-hero, .cta-band, .cookie-banner, .afm-block--dark, .page-hero--dark, .hero-quote { color: var(--on-dark); }
:is(.home-hero, .banner, .k-hero, .cta-band, .cookie-banner, .afm-block--dark, .page-hero--dark) :is(h1, h2, h3, p, li, a:not(.btn)) { color: inherit; }
.cookie-banner { background: #101a26; }