/* Alignment system: two-column compositions share a top rule and a bottom line. */
.path, .split, .cta, .contact { align-items: stretch; }
.path > *, .split > *, .cta > *, .contact > * { border-top: 1px solid var(--ink); padding-top: 22px; min-width: 0; }
.dark .cta > *, .xg .cta > *, .xg .split > * { border-top-color: rgba(255, 255, 255, .7); }
.path-out { border-top: 1px solid var(--ink); padding-top: 0; display: grid; grid-auto-rows: 1fr; }
.path-out a { border-bottom: 1px solid var(--line); }
.path > div:first-child { display: flex; flex-direction: column; }
.path > div:first-child .path-opts { margin-top: auto; padding-top: 30px; }
.path-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.path-opts .chip { justify-content: center; width: 100%; }
.cta { align-items: stretch; }
.cta-r { justify-content: space-between; }
.split > * > .ch:first-child, .split #alChart .ch { border-top: 0; margin-top: 0; padding-top: 0; }
.contact .c-facts { border-top: 0; }
.contact .c-facts div:first-child { padding-top: 0; }
.split .prose p:last-child, .split .prose > a:last-child { margin-bottom: 0; }

/* stories: the list column ends level with the lead story */
.stories { align-items: stretch; }
.story-list { display: grid; grid-auto-rows: 1fr; }
.story-row { align-items: center; }

/* tabs: first tab text sits on the column line */
.tabs button:first-child { padding-left: 0; }
.tabs button:first-child[aria-selected="true"]::after { left: 0; }

/* section heads: title and link share a baseline */
.sec-head { align-items: flex-end; }
.sec-head .link { margin-bottom: 6px; }

@media (max-width: 980px) {
  .path > div:first-child .path-opts { margin-top: 26px; padding-top: 0; }
  .path-out { grid-auto-rows: auto; }
  .story-list { grid-auto-rows: auto; }
  .split > * + *, .cta > * + *, .contact > * + *, .path > * + * { border-top: 0; padding-top: 0; }
}
@media (max-width: 640px) { .path-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* hero tabs: four equal columns spanning the full column width */
.hero-foot.hero-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px; }
.hero-tabs button, .hero-tabs button + button { padding: 0 0 4px; border-left: 0; }
.hero-tabs button + button::before { content: ""; position: absolute; left: -18px; top: 16px; bottom: 0; width: 1px; background: rgba(255, 255, 255, .16); }
@media (max-width: 640px) {
  .hero-foot.hero-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; column-gap: 28px; }
  .hero-tabs button + button::before { left: -14px; }
  .hero-tabs button:nth-child(3)::before { display: none; }
}
.p-hero .rrs-t { max-width: 18ch; margin: 0 0 16px; }

/* type scale, calmer: one display size for heroes, one for sections */
.h-xl { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.02; }
.h-l { font-size: clamp(1.75rem, 2.9vw, 2.6rem); line-height: 1.08; }
.h-m { font-size: clamp(1.35rem, 1.9vw, 1.75rem); }
.hero-c .h-xl, .xg-hero .h-xl { max-width: 15ch; }
.p-hero .h-xl { max-width: 16ch; }
.p-hero .rrs-t { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.lede { font-size: clamp(1rem, 1.15vw, 1.12rem); }
.story-lead h3 { font-size: clamp(1.45rem, 2.1vw, 2rem); }
@media (max-width: 640px) {
  .h-xl { font-size: clamp(2.05rem, 9.2vw, 2.6rem); }
  .h-l { font-size: clamp(1.6rem, 7vw, 2rem); }
  .p-hero .rrs-t { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
}
@media (max-width: 980px) { .path > .path-out { border-top: 1px solid var(--ink); margin-top: 36px; } }

/* header over photography: frosted glass; solid white once scrolled */
.hdr.on-dark:not(.solid) { background: rgba(12, 14, 20, .22); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.hdr.solid { background: rgba(255, 255, 255, .96); }
:root[data-theme="dark"] .hdr.solid { background: rgba(11, 12, 17, .94); }
.hdr { transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s, transform .4s var(--ease); }
.p-hero .rrs-hero { width: 76px; height: auto; margin: 0 0 26px; display: block; }
@media (max-width: 640px) { .p-hero .rrs-hero { width: 60px; margin-bottom: 20px; } }
@media (max-width: 980px) { .p-hero .wrap, .xg-hero .wrap { padding-bottom: 92px; } }
.sheet ul.ticks.plain li { padding-left: 0; } .sheet ul.ticks.plain li::before { display: none; }
/* views arrive with a short fade rather than a hard cut */
.view.on { animation: vin .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes vin { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .view.on { animation: none; } }
.hub .cap .tzh { display: none; }
.band .rrs-mark + .h-l { margin-top: 26px; }

/* article audio: a slim dock pinned to the foot of the reader */
.ld { position: sticky; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 6; width: min(720px, calc(100% - 2 * var(--gut))); margin: 0 auto; display: grid; grid-template-columns: 44px auto minmax(0, 1fr) auto auto 36px; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; background: color-mix(in srgb, var(--ink) 94%, transparent); color: var(--paper); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 18px 40px -18px rgba(5, 7, 12, .55); animation: ldin .35s cubic-bezier(.2, .7, .2, 1); }
.ld.out { opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; }
@keyframes ldin { from { opacity: 0; transform: translateY(14px); } }
.ld button { color: inherit; display: grid; place-items: center; height: 36px; }
.ld-pp { width: 44px; height: 44px !important; background: var(--paper); color: var(--ink) !important; border-radius: 50%; }
.ld-i { width: 18px; height: 18px; fill: currentColor; }
.ld .pa { display: none; } .ld .pl { display: block; }
.ld.on .pa { display: block; } .ld.on .pl { display: none; }
.ld-sk, .ld-sp { font: 500 .78rem/1 var(--f-text); padding: 0 6px; opacity: .8; font-variant-numeric: tabular-nums; }
.ld-sk:hover, .ld-sp:hover, .ld-x:hover { opacity: 1; }
.ld-sp { min-width: 44px; border: 1px solid rgba(255, 255, 255, .25); }
.ld-x { opacity: .7; }
.ld-mid { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ld-t { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; }
.ld-t b { font: 400 .85rem/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-t span { opacity: .65; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ld-t em { font-style: normal; }
.ld-bar { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; margin: 0; background: linear-gradient(90deg, var(--paper) var(--p, 0%), rgba(255, 255, 255, .22) var(--p, 0%)); cursor: pointer; }
.ld-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); }
.ld-bar::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--paper); }
.ld-note { grid-column: 1 / -1; margin: -2px 0 0 54px; font-size: .66rem; opacity: .5; letter-spacing: .02em; }
.rd-body [data-bi] { transition: color .4s, background-color .4s, box-shadow .4s; }
.rd-body .speaking { box-shadow: -14px 0 0 -12px var(--navy); }
.rd-body p.speaking { color: var(--ink); }
.reader:has(.ld) .rd-body p:not(.speaking) { color: color-mix(in srgb, var(--ink-2) 78%, transparent); }
.reader:has(.ld) .rd-body p { cursor: pointer; }
@media (max-width: 640px) {
  .ld { grid-template-columns: 44px minmax(0, 1fr) auto 32px; bottom: max(12px, env(safe-area-inset-bottom)); gap: 10px; }
  .ld .ld-sk { display: none; }
  .ld-t b { display: none; }
  .ld-note { margin-left: 54px; }
}
/* Exchange is a dark page: its frames are glass, not paper */
.xg-sec .frame { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .14); color: #fff; }
.xg-sec .frame::before, .xg-sec .frame::after { border-color: #fff; }
.xg-sec .frame:hover { border-color: rgba(255, 255, 255, .4); }
.xg-tiers b { color: #a3a8b5; }
/* "Start here" opens straight after the network section: no rule above it */
.path > div:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 981px) { .path > .path-out { border-top: 0; padding-top: 0; } }
/* questionnaire bar: mark, title and close on one symmetric line */
.qz-top { display: grid; grid-template-columns: 1fr auto 1fr; height: 72px; }
.qz-top .rrs-mark { width: 54px; height: auto; justify-self: start; }
.qz-top .eyebrow { justify-self: center; }
.qz-top .ico-btn { justify-self: end; }
.qz-prog { top: 71px; }
@media (max-width: 980px) { .qz-top { height: 64px; } .qz-top .rrs-mark { width: 46px; } .qz-prog { top: 63px; } }
@media (max-width: 640px) { .qz-top .eyebrow { font-size: .62rem; letter-spacing: .14em; } }
/* SDG icons: the official UN squares, unmodified, in an even row */
.sdg { gap: 8px; margin-top: 4px; }
.sdg img { width: 72px; height: 72px; display: block; }
@media (max-width: 640px) { .sdg img { width: 64px; height: 64px; } }
@media (min-width: 641px) { .goals > div { display: flex; flex-direction: column; } .goals > div > p { flex: 1; } }
@media (max-width: 640px) { .goals > div { padding-bottom: 26px; } }

/* ---------- Arabic: right to left, joined script, Arabic typefaces ---------- */
.lang-ar body, .lang-ar input, .lang-ar textarea, .lang-ar select, .lang-ar button { font-family: "IBM Plex Sans Arabic", Inter, system-ui, sans-serif; }
.lang-ar .h-xl, .lang-ar .h-l, .lang-ar .h-m, .lang-ar .h-s, .lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4, .lang-ar .hero-tabs b, .lang-ar .nl b, .lang-ar .cal b, .lang-ar .sum b { font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", Saira, sans-serif; letter-spacing: 0; }
/* letter-spacing and capitals break Arabic joining, so labels lose them */
.lang-ar .eyebrow, .lang-ar .tag, .lang-ar .cal i, .lang-ar .cd span, .lang-ar .net-figs > div > span, .lang-ar .sum-d, .lang-ar .qz-top .eyebrow, .lang-ar .tabbar a { letter-spacing: 0 !important; text-transform: none; }
.lang-ar .h-xl { line-height: 1.3; } .lang-ar .h-l { line-height: 1.35; } .lang-ar .lede, .lang-ar p { line-height: 1.75; }
/* arrows point the way Arabic reads */
html[dir="rtl"] .arr, html[dir="rtl"] .i.arr { transform: scaleX(-1); }
html[dir="rtl"] .ev:hover .ev-go, html[dir="rtl"] .ev-next:hover .ev-next-go .arr { transform: scaleX(-1) translateX(4px); }
/* maps, charts, numbers and the brand stay left to right */
html[dir="rtl"] .net-map, html[dir="rtl"] .ch, html[dir="rtl"] svg[role="img"], html[dir="rtl"] .brand, html[dir="rtl"] .cd b, html[dir="rtl"] .tr-map { direction: ltr; }
/* machine-translation chrome never shows */
iframe.skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font { font: inherit !important; color: inherit !important; }
/* the language list scrolls rather than running off a phone screen */
.pop { max-height: calc(100svh - var(--hdr) - 16px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 980px) { .pop { max-height: calc(100svh - var(--hdr) - var(--tab) - 16px); } }
.lang-ar .h-xl { font-size: .86em; } @media (max-width: 640px) { .lang-ar .h-xl { font-size: 1.7rem; } .lang-ar .h-l { font-size: 1.4rem; } }

/* footer: contact line, privacy and back to top (checklist.design footer) */
.ftr-c { margin-top: 14px; font-size: .86rem; line-height: 1.7; color: rgba(255, 255, 255, .72); }
.ftr-c a { color: inherit; } .ftr-c a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ftr-l { margin-left: 14px; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
/* 404 */
.nf { min-height: 64vh; display: flex; align-items: center; padding-top: 140px; }

/* fixed chrome (user, 2026-10-25): the header never slides away, and on mobile the tab bar stays on screen on every page,
   above articles, sheets, the paper viewer and the Exchange application, which now stop short of it */
.hdr.hide { transform: none; }
@media (max-width: 980px) {
  .tabbar { position: fixed; z-index: 115; transform: none; }
  .ovl, .qz { bottom: var(--tab); }
}