/* ============================================================
   THE QATAR PLOT — ink restyle
   One stylesheet, linked from every page AFTER the page's own
   <style> token block, so it can override it.

   The blocks below are layered, and later blocks deliberately
   override earlier ones (the palette was revised three times, the
   halftone twice). Don't reorder them.

   Colour lives in two token blocks — :root (dark) and
   :root[data-theme="light"] — so the existing theme toggle keeps
   working. Everything else reads from those tokens.
   ============================================================ */

/* ================= INK LAYER =================
     Pen-and-ink restyle over the page's own rules: one typeface (Archivo),
     hatched fills instead of platform colours, hairline modular grid, 2px
     section rules. Colour comes only from the token blocks above, so the
     dark/light toggle keeps working. */
:root { --hatch-fine:repeating-linear-gradient(45deg,var(--fg) 0 1.6px,transparent 1.6px 4px);
        --hatch-mid:repeating-linear-gradient(45deg,var(--fg) 0 1.1px,transparent 1.1px 5px);
        --hatch-wide:repeating-linear-gradient(-45deg,var(--fg) 0 1px,transparent 1px 7px);
        --rule-dash:repeating-linear-gradient(90deg,var(--fg) 0 1px,transparent 1px 4px); }

body { font-feature-settings:"tnum" 1; letter-spacing:-.002em; }
:focus-visible { outline:2px solid var(--fg); outline-offset:2px; }
svg text, svg tspan { font-family:Archivo,sans-serif; }

/* --- one typeface: the display cuts carry the weight Archivo Black used to --- */
.hero h1, .hero-section h1, .moment-number, .moment-title, .closing h2,
.phase-divider .phase-num, .phase-divider .phase-name,
.stat-hero .stat-val, .stat-card .stat-val, .section-hdr .num, .section-hdr h2,
.method-box h3, .cost-box h3, .cost-line .cl-val, .phase-card h3,
.phase-card .phase-total, .spend-hero .sh-val, .tile .v, #counter-value,
.grp-t, .bk-total > div { font-weight:900; }
.tip .t { font-weight:900; }

/* --- nav: flush left on a double rule, no blur --- */
.nav { background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:2px solid var(--fg);
  box-shadow:0 3px 0 -1px var(--bg), 0 4px 0 -1px var(--fg); }
.nav-in { padding:15px 40px; gap:12px 26px; align-items:center; }
.theme-toggle { margin-left:14px; }
@media (max-width:1000px) { .nav-in { padding:12px 20px; gap:10px 18px; }
  .nav .nav-date { display:none; } .theme-toggle { margin-left:auto; } }
.nav a { font-size:11px; letter-spacing:.15em; }
.nav a.on { border-bottom:2px solid var(--fg); padding-bottom:1px; }
.theme-toggle { border:1px solid var(--rule3); font-family:Archivo,sans-serif; }
/* the press link: boxed so it reads as a way out of the site, not another tab */
.nav a.nav-media { border:1px solid #fff; padding:5px 9px; line-height:1; }
.nav a.nav-media:hover { border-color:var(--ac); }

/* --- density: wider gutters, more air at the section breaks --- */
.hero { padding:84px 40px 0; }
.hero p { font-size:20px; line-height:1.58; max-width:62ch; margin-bottom:56px; }
.section-hdr { padding-top:30px; margin-bottom:14px; gap:8px 18px; }
.section-hdr h2 { font-size:30px; }
.section-hdr .num { font-size:14px; letter-spacing:.2em; color:var(--fg2) !important; }
.footer { border-top:2px solid var(--fg); padding:56px 40px 72px; }
.footer-inner { line-height:1.8; }

/* --- the modular grid, drawn as hairlines instead of floating cards --- */
.stats-grid, .tiles { gap:1px; background:var(--rule2); }
.stat-card, .tile { background:var(--bg); }
.stat-card { padding:28px 24px; }
.stat-card .stat-val { font-size:clamp(38px,4vw,54px); letter-spacing:-.045em; }
.stat-card .stat-label { color:var(--fg2); }
.tile .v { letter-spacing:-.045em; }

/* the two hero figures stay inverted ink fields; emphasis tiles get a hatch edge */
.stat-hero { position:relative; padding:36px 30px 30px; }
.stat-hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:repeating-linear-gradient(90deg,var(--bg) 0 1px,transparent 1px 4px); opacity:.5; }

/* --- ruled boxes: 2px rule plus a hatched margin, no accent bar --- */
.method-box, .cost-box, .note-box {
  background:var(--bg); border-left:2px solid var(--fg);
  background-image:var(--hatch-mid); background-size:9px 100%;
  background-repeat:no-repeat; padding-left:30px;
}
.cost-box h3 { color:var(--fg) !important; }
.method-box h3, .method-box .step { color:var(--fg) !important; }
.cost-line { border-bottom:1px solid var(--rule2); }
.cost-line:last-child { border-bottom:2px solid var(--fg) !important; }

/* --- phase columns --- */
.phase-grid { gap:1px; background:var(--rule2); }
.phase-card { background:var(--bg); border-top:0; padding:0 26px 30px 0; position:relative; }
.phase-card::before { content:''; display:block; height:10px; margin-bottom:16px;
  box-shadow:inset 0 0 0 1px var(--rule); }
.phase-card:nth-child(1)::before { background:var(--hatch-mid); }
.phase-card:nth-child(2)::before { background:var(--hatch-wide); }
.phase-card:nth-child(3)::before { background:var(--hatch-fine); }
.phase-card h3, .phase-card .phase-total { color:var(--fg) !important; }
.phase-card .phase-stat { border-bottom:1px solid var(--rule2); }
.phase-card .phase-total { margin-top:22px; padding-top:18px; border-top:2px solid var(--fg); }

/* --- bar chart: hatch encodes the platform, tone no longer does --- */
.bar-chart-row .bcr-bar-wrap { background:transparent; box-shadow:inset 0 0 0 1px var(--rule2); height:30px; }
.bar-chart-row .bcr-bar { height:30px; box-shadow:inset 0 0 0 1px var(--fg);
  background-color:transparent !important; }
.bcr-bar[data-bar="yt"] { background-image:var(--hatch-fine) !important; }
.bcr-bar[data-bar="fb"] { background-image:var(--hatch-mid) !important; }
.bcr-bar[data-bar="tt"] { background-image:var(--hatch-wide) !important; }
.bcr-bar:not([data-bar]) { background:var(--fg) !important; }
.bar-chart-row .bcr-label { font-family:Archivo,sans-serif; font-weight:700; font-size:14px;
  letter-spacing:-.01em; color:var(--fg); }
.bar-chart-row .bcr-val { font-size:17px; font-weight:800; letter-spacing:-.02em; }

/* --- spend heroes: one ink field, one ruled --- */
.spend-heroes { gap:1px; background:var(--rule2); }
.spend-hero { padding:30px 28px; }

/* --- archive marks: no radius, tone-stepped, hatch key --- */
.u, .szkey .sq { border-radius:0 !important; }
.marks { gap:3px; }
.seg { background:transparent; box-shadow:inset 0 0 0 1px var(--rule); padding:2px; }
button.opt { font-family:Archivo,sans-serif; }
button.opt[aria-pressed=true] { background:var(--fg); color:var(--bg); }
.grp-h { border-bottom:1px solid var(--rule); }
.more { border:1px solid var(--rule3); }
.more:hover { color:var(--fg); border-color:var(--fg); }

/* --- tables --- */
table { font-size:13.5px; }
th { color:var(--fg2); letter-spacing:.15em; }
th, td { border-bottom:1px solid var(--rule2); padding:10px 12px; }
details.tbl summary:hover { color:var(--fg); }

/* --- breakdown rows --- */
.bk-row > div { font-family:Archivo,sans-serif; font-size:13.5px; background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--rule2); }
.bk-row { gap:1px; }
.bk-row .bk-label { border-left:2px solid var(--fg); }
.bk-header > div { box-shadow:none; }
.bk-total .bk-label { border-left:2px solid var(--bg); }

/* --- monthly area chart: hatched bands --- */
.mo-facebook { fill:url(#moFb) !important; stroke:var(--fg) !important; stroke-width:1.2 !important; }
.mo-youtube  { fill:url(#moYt) !important; stroke:var(--fg) !important; stroke-width:1.2 !important; }
.mo-tiktok   { fill:url(#moTt) !important; stroke:var(--fg) !important; stroke-width:1.2 !important; }
.mo-tick, .mo-leg, .mo-bandlab { font-family:Archivo,sans-serif; font-weight:600; }

/* --- imagery prints in pure black and white --- */
.moment-media img, .moment-media video,
.moment-media-grid img, .moment-media-grid video,
.hero-bg, .intro-bg, .moment-bg, .moment-overlay, .hero-strips {
  filter:grayscale(1) contrast(1.06);
}
.hero-strips { filter:grayscale(1) contrast(1.04) brightness(.95); opacity:.5; }
.moment-media img, .moment-media video { border-left:2px solid var(--fg); }
.moment-media .media-caption { font-family:Archivo,sans-serif; }

/* --- story chrome --- */
#scroll-progress { height:2px; }
.phase-divider-inner { border-top:2px solid var(--fg); }
.phase-divider .phase-num, .phase-divider .phase-name { color:var(--fg) !important; }
.moment-date { color:var(--fg2); }
.moment-number { opacity:.09; }
.moment-text { color:var(--fg2); }
.stat-chip { border-left:2px solid var(--fg); background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--rule2); font-family:Archivo,sans-serif; }
.link-chip, .closing-links a { font-family:Archivo,sans-serif; }
.closing-links a { border-left:2px solid var(--rule3); background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--rule2); }
.closing h2 span { color:var(--fg); }
.camp-tag { font-family:Archivo,sans-serif; background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--rule2); }
.hero-section .subtitle::before { height:5px; width:56px; background:var(--rule-dash); }
.audio-toggle { border:1px solid var(--rule3); }
.foot, .bar-note { font-family:Archivo,sans-serif; }

/* ---- DATA PALETTE ----
     Charts get five values, not fifteen: a four-step ink ramp plus one red.
     Red is never decoration — it marks Phase 3 (the phase still running) and
     the top step of any intensity ramp. Series colours below are remapped onto
     it, so every chart on every page reads from the same five. */
:root {
  --d1:#F6F4F1; --d2:#B3AEA7; --d3:#807B74; --d4:#3A3835;
  --dhi:#FF563C; --dhi2:#FF9783;
  --fb:var(--d2); --yt:var(--d1); --tt:var(--d3); --tg:var(--d4);
  --xp:var(--d3); --web:var(--d2);
  --p1:var(--d3); --p2:var(--d2); --p3:var(--dhi);
  --p1-rgb:128,123,116; --p2-rgb:179,174,167; --ac-rgb:246,244,241;
  --r0:#1C1B19; --r1:var(--d4); --r2:var(--d3); --r3:var(--d2); --r4:var(--dhi);
  --n-corp:var(--dhi); --n-funder:var(--dhi2); --n-tadv:var(--d1);
  --n-fbben:var(--d2); --n-fbpage:var(--d3); --n-yt:var(--d2);
  --n-tt:var(--d3); --n-web:var(--d4);
  --c-fr:var(--d1); --c-uk:var(--d2); --c-us:var(--d3); --c-lb:var(--dhi);
  --c-de:var(--d2); --c-it:var(--d3); --c-qa:var(--dhi2); --c-be:var(--d4);
  --c-tiktok:var(--d3);
}
:root[data-theme="light"] {
  --d1:#201E1D; --d2:#605D5D; --d3:#9B9797; --d4:#D7D3D3;
  --dhi:#EC3013; --dhi2:#AE1800;
  /* repeated at this specificity: the page's own light block also sets these */
  --fb:var(--d2); --yt:var(--d1); --tt:var(--d3); --tg:var(--d4);
  --xp:var(--d3); --web:var(--d2);
  --p1:var(--d3); --p2:var(--d2); --p3:var(--dhi);
  --p1-rgb:155,151,151; --p2-rgb:96,93,93; --ac-rgb:32,30,29;
  --r0:#F8F4F4; --r1:var(--d4); --r2:var(--d3); --r3:var(--d2); --r4:var(--dhi);
  --n-corp:var(--dhi); --n-funder:var(--dhi2); --n-tadv:var(--d1);
  --n-fbben:var(--d2); --n-fbpage:var(--d3); --n-yt:var(--d2);
  --n-tt:var(--d3); --n-web:var(--d4);
  --c-fr:var(--d1); --c-uk:var(--d2); --c-us:var(--d3); --c-lb:var(--dhi);
  --c-de:var(--d2); --c-it:var(--d3); --c-qa:var(--dhi2); --c-be:var(--d4);
  --c-tiktok:var(--d3);
}

/* grid rules drawn per cell, so a short last row never shows the container fill */
.stats-grid, .tiles, .phase-grid, .spend-heroes, .bk-row { background:transparent !important; gap:0 !important; }
.stats-grid, .tiles { border-top:2px solid var(--fg); border-left:1px solid var(--rule2); }
.stat-card, .tile { box-shadow:inset -1px -1px 0 var(--rule2); }
.stat-hero { box-shadow:inset -1px -1px 0 var(--rule2); }
.phase-grid { border-top:2px solid var(--fg); }
.phase-card { box-shadow:inset -1px 0 0 var(--rule2); padding-left:26px; }
.phase-card:first-child { padding-left:0; }
.spend-hero { box-shadow:inset -1px 0 0 var(--rule2); }
.bk-row { gap:1px !important; }

/* colour now carries the series, so the bars go solid and keep only a hairline */
.bcr-bar[data-bar="yt"], .bcr-bar[data-bar="fb"], .bcr-bar[data-bar="tt"] {
  background-image:none !important;
}
.bcr-bar[data-bar="yt"] { background-color:var(--yt) !important; }
.bcr-bar[data-bar="fb"] { background-color:var(--fb) !important; }
.bcr-bar[data-bar="tt"] { background-color:var(--tt) !important; }
.bcr-bar:not([data-bar]) { background:var(--d3) !important; }

/* stacked areas: solid palette, the undated band stays hatched */
.mo-facebook { fill:var(--fb) !important; }
.mo-youtube  { fill:var(--yt) !important; }
.mo-tiktok   { fill:var(--tt) !important; }
.mo-facebook, .mo-youtube, .mo-tiktok { stroke:var(--bg) !important; stroke-width:2 !important; }

/* phase columns: the hatch band becomes a solid phase colour */
.phase-card::before { box-shadow:none !important; }
.phase-card:nth-child(1)::before { background:var(--p1) !important; }
.phase-card:nth-child(2)::before { background:var(--p2) !important; }
.phase-card:nth-child(3)::before { background:var(--p3) !important; }
.phase-card:nth-child(3) .phase-total { color:var(--dhi) !important; }

/* keep the accent legible at paragraph size on the light ground */
:root[data-theme="light"] .phase-card:nth-child(3) .phase-total { color:var(--dhi2) !important; }

/* ---- PALETTE v2: Black / Blue Energy / Lipstick Red / Shamrock / Ghost White ----
     Ghost White and Black are the two grounds. The three hues are the chart set,
     used categorically and never decoratively; red doubles as the one accent
     (scroll progress, active nav, section numbers) and as the top step of any
     intensity ramp. Everything else stays ink and cool grey. */
:root {
  --bg:#000000; --bg2:#07070A; --surface:#0E0E13; --surface2:#16161C; --grid:#0C0C10;
  --rule:#2A2A33; --rule2:#1C1C24; --rule3:#6E6E78;
  --fg:#FAFAFF; --fg2:#A6A6B2; --fg3:#7C7C88; --fg4:#44444E;
  --ac:#FAFAFF; --ac-hi:#FFFFFF;
  --blue:#7BA1EA; --red:#F5566F; --green:#6FB985; --ink:#FAFAFF; --grey:#7C7C88;
  --bg-rgb:0,0,0; --fg-rgb:250,250,255; --fg2-rgb:166,166,178;
  --ac-rgb:250,250,255; --p1-rgb:123,161,234; --p2-rgb:111,185,133;
  --shadow-rgb:0,0,0; --shadow-a:.6;
  --r0:#0E0E13; --r1:#3A1420; --r2:#7A2032; --r3:#C02E4A; --r4:#F5566F;
  --tip-fg2:#44444E;
}
:root[data-theme="light"] {
  --bg:#FAFAFF; --bg2:#F2F2F8; --surface:#ECECF3; --surface2:#E2E2EB; --grid:#EAEAF1;
  --rule:#C6C6D0; --rule2:#DEDEE7; --rule3:#7C7C88;
  --fg:#000000; --fg2:#55555F; --fg3:#7C7C88; --fg4:#C6C6D0;
  --ac:#000000; --ac-hi:#000000;
  --blue:#5386E4; --red:#F21B3F; --green:#4DA167; --ink:#000000; --grey:#9C9CA6;
  --bg-rgb:250,250,255; --fg-rgb:0,0,0; --fg2-rgb:85,85,95;
  --ac-rgb:0,0,0; --p1-rgb:83,134,228; --p2-rgb:77,161,103;
  --shadow-rgb:20,20,30; --shadow-a:.13;
  --r0:#FAFAFF; --r1:#FDD3DA; --r2:#F9899C; --r3:#F44B69; --r4:#F21B3F;
  --tip-fg2:#C6C6D0;
}

/* one series mapping, both themes */
:root, :root[data-theme="light"] {
  --fb:var(--blue); --yt:var(--red); --tt:var(--green);
  --tg:var(--grey); --xp:var(--grey); --web:var(--green);
  --p1:var(--blue); --p2:var(--green); --p3:var(--red);
  --n-corp:var(--red); --n-funder:var(--green); --n-tadv:var(--blue);
  --n-fbben:var(--red); --n-fbpage:var(--blue); --n-yt:var(--red);
  --n-tt:var(--green); --n-web:var(--grey);
  --c-fr:var(--blue); --c-uk:var(--red); --c-us:var(--green); --c-lb:var(--red);
  --c-de:var(--grey); --c-it:var(--green); --c-qa:var(--red); --c-be:var(--blue);
  --c-tiktok:var(--green);
  --d1:var(--ink); --d2:var(--grey); --d3:var(--rule); --d4:var(--rule2);
  --dhi:var(--red); --dhi2:var(--red);
}

/* red as the occasional accent — nowhere else */
#scroll-progress { background:var(--red); }
.nav a.on { color:var(--red); border-bottom-color:var(--red); }
.nav a:hover { color:var(--red); }
.section-hdr .num { color:var(--red) !important; }
.hero-label { color:var(--red) !important; }
.hero-section .subtitle::before {
  background:repeating-linear-gradient(90deg,var(--red) 0 1px,transparent 1px 4px); }
.phase-card:nth-child(3) .phase-total,
:root[data-theme="light"] .phase-card:nth-child(3) .phase-total { color:var(--red) !important; }
.moment-date { color:var(--red); }
.story-net circle.lit.key { fill:var(--red); }

/* the mark chart's own hue key */
.bcr-bar:not([data-bar]) { background:var(--grey) !important; }

/* ---- INK + HATCH RESTORED, COLOUR CONFINED TO CHARTS ----
     Last layer, so it wins. Chrome goes back to ink and hatching; the three
     hues survive only inside actual data marks (bars, stacked areas, ramps,
     network nodes, map fills) where a categorical difference must be read. */
:root { --hatch-fine:repeating-linear-gradient(45deg,var(--fg) 0 1.6px,transparent 1.6px 4px);
        --hatch-mid:repeating-linear-gradient(45deg,var(--fg) 0 1.1px,transparent 1.1px 5px);
        --hatch-wide:repeating-linear-gradient(-45deg,var(--fg) 0 1px,transparent 1px 7px);
        --rule-dash:repeating-linear-gradient(90deg,var(--fg) 0 1px,transparent 1px 4px); }

/* chrome: no accent, ink only */
#scroll-progress { background:var(--fg); }
.nav a.on { color:var(--fg); border-bottom-color:var(--fg); }
.nav a:hover { color:var(--fg); }
.section-hdr .num { color:var(--fg2) !important; }
.hero-label { color:var(--fg2) !important; }
.moment-date { color:var(--fg2); }
.hero-section .subtitle::before { background:var(--rule-dash); }
.story-net circle.lit.key { fill:var(--fg); }

/* phase bands and totals: hatch density, not hue */
.phase-card::before { box-shadow:inset 0 0 0 1px var(--rule) !important; }
.phase-card:nth-child(1)::before { background:var(--hatch-mid) !important; }
.phase-card:nth-child(2)::before { background:var(--hatch-wide) !important; }
.phase-card:nth-child(3)::before { background:var(--hatch-fine) !important; }
.phase-card:nth-child(3) .phase-total,
:root[data-theme="light"] .phase-card:nth-child(3) .phase-total { color:var(--fg) !important; }

/* ruled boxes keep their hatched margin */
.method-box, .cost-box, .note-box { background-image:var(--hatch-mid) !important;
  background-size:9px 100% !important; background-repeat:no-repeat !important; }

/* emphasis strip on the hero figures */
.stat-hero::after { background:repeating-linear-gradient(90deg,var(--bg) 0 1px,transparent 1px 4px); }

/* --- charts keep the palette: solid, categorical, hairlined --- */
.bcr-bar[data-bar="yt"] { background:var(--yt) !important; }
.bcr-bar[data-bar="fb"] { background:var(--fb) !important; }
.bcr-bar[data-bar="tt"] { background:var(--tt) !important; }
.mo-facebook { fill:var(--fb) !important; }
.mo-youtube  { fill:var(--yt) !important; }
.mo-tiktok   { fill:var(--tt) !important; }

/* ---- BARS HATCHED ----
     The bars carry their series in the hatch itself: angle and pitch separate
     them, the series hue only tints the strokes, and the ground stays paper.
     Colour is now doing confirmation, not the whole job. */
.bar-chart-row .bcr-bar-wrap { background:transparent; box-shadow:inset 0 0 0 1px var(--rule2); }
.bar-chart-row .bcr-bar { box-shadow:inset 0 0 0 1px var(--fg); }
.bcr-bar[data-bar="yt"] { background:repeating-linear-gradient(45deg,var(--yt) 0 1.7px,transparent 1.7px 4px) !important; }
.bcr-bar[data-bar="fb"] { background:repeating-linear-gradient(45deg,var(--fb) 0 1.2px,transparent 1.2px 5px) !important; }
.bcr-bar[data-bar="tt"] { background:repeating-linear-gradient(-45deg,var(--tt) 0 1.1px,transparent 1.1px 6px) !important; }
.bcr-bar:not([data-bar]) { background:repeating-linear-gradient(45deg,var(--grey) 0 1.2px,transparent 1.2px 5px) !important;
  box-shadow:inset 0 0 0 1px var(--fg); }

/* legend swatches read the same hatch as the bars they key */
.bar-legend .bl-sw[data-bar="yt"] { background:repeating-linear-gradient(45deg,var(--yt) 0 1.7px,transparent 1.7px 4px); }
.bar-legend .bl-sw[data-bar="fb"] { background:repeating-linear-gradient(45deg,var(--fb) 0 1.2px,transparent 1.2px 5px); }
.bar-legend .bl-sw[data-bar="tt"] { background:repeating-linear-gradient(-45deg,var(--tt) 0 1.1px,transparent 1.1px 6px); }
.bar-legend .bl-sw { box-shadow:inset 0 0 0 1px var(--fg); }

/* ---- FIGURE SCALE + NOTE SIZE ----
     Two sizes only: hero figures and standard figures. The original sized some
     cells inline to fit long strings, which made identical roles read at 19px
     next to 74px; here the size is fixed by role and long values wrap instead. */
.stat-hero .stat-val, .stat-hero.narrow .stat-val,
.stat-hero .stat-val[style], .stat-hero.narrow .stat-val[style] {
  font-size:clamp(44px,5.2vw,72px) !important; line-height:.94 !important;
  letter-spacing:-.045em; white-space:normal; text-wrap:balance;
}
.stat-card .stat-val, .stat-card .stat-val[style], .tile .v, .tile .v[style] {
  font-size:clamp(30px,3.2vw,40px) !important; line-height:1 !important;
  letter-spacing:-.04em; white-space:normal; text-wrap:balance;
}
.bar-note, .foot, .note-sm { font-size:13px !important; line-height:1.6 !important;
  color:var(--fg2); margin-bottom:10px; }

/* ---- PALETTE v3: Carbon Black / Ash Grey / Beige / Vivid Tangerine / Red ----
     Beige is the light ground, Carbon Black the dark one. Ash Grey, Tangerine
     and Red are the chart set — three hues far enough apart in both hue and
     value to survive hatching. Warm neutrals derived from Beige and Ash Grey
     so the greys sit in the same family as the ground. */
:root {
  --bg:#262626; --bg2:#2C2C2B; --surface:#333331; --surface2:#3D3D3A; --grid:#2F2F2E;
  --rule:#4A4A46; --rule2:#373734; --rule3:#8A8A80;
  --fg:#E2E8CE; --fg2:#A8AE98; --fg3:#828874; --fg4:#53564A;
  --ac:#E2E8CE; --ac-hi:#F2F5E6;
  --ash:#ACBFA4; --tang:#FF7F11; --red:#FF1B1C; --grey:#828874;
  --bg-rgb:38,38,38; --fg-rgb:226,232,206; --fg2-rgb:168,174,152;
  --ac-rgb:226,232,206; --p1-rgb:172,191,164; --p2-rgb:255,127,17;
  --shadow-rgb:0,0,0; --shadow-a:.55;
  --r0:#333331; --r1:#4A2A18; --r2:#8A4A14; --r3:#D2690F; --r4:#FF7F11;
  --tip-fg2:#53564A;
}
:root[data-theme="light"] {
  --bg:#E2E8CE; --bg2:#DAE1C3; --surface:#D2DAB8; --surface2:#C7D0AB; --grid:#D8DFC1;
  --rule:#A9B295; --rule2:#C6CFAE; --rule3:#6E7462;
  --fg:#262626; --fg2:#54574B; --fg3:#6E7462; --fg4:#A9B295;
  --ac:#262626; --ac-hi:#000000;
  --ash:#8CA381; --tang:#D9660A; --red:#E00C0D; --grey:#6E7462;
  --bg-rgb:226,232,206; --fg-rgb:38,38,38; --fg2-rgb:84,87,75;
  --ac-rgb:38,38,38; --p1-rgb:140,163,129; --p2-rgb:217,102,10;
  --shadow-rgb:38,38,38; --shadow-a:.14;
  --r0:#E2E8CE; --r1:#F3D9B8; --r2:#F0A85E; --r3:#E8801F; --r4:#E00C0D;
  --tip-fg2:#A9B295;
}

/* series mapping, both themes */
:root, :root[data-theme="light"] {
  --fb:var(--ash); --yt:var(--red); --tt:var(--tang);
  --tg:var(--grey); --xp:var(--grey); --web:var(--ash);
  --p1:var(--ash); --p2:var(--tang); --p3:var(--red);
  --n-corp:var(--red); --n-funder:var(--tang); --n-tadv:var(--fg);
  --n-fbben:var(--red); --n-fbpage:var(--ash); --n-yt:var(--red);
  --n-tt:var(--tang); --n-web:var(--grey);
  --c-tiktok:var(--tang);
  --d1:var(--fg); --d2:var(--grey); --d3:var(--rule); --d4:var(--rule2);
  --dhi:var(--red); --dhi2:var(--red);
}

/* ---- COUNTRY RAMP ----
   The four-ink palette above carries the platform and phase series, where four
   hues are enough. The country series are not four: the streamgraph stacks nine
   of them plus 'Other', and mapping nine onto four put three identical reds and
   three identical tangerines in one stack. The key said Lebanon was red; so
   were the United Kingdom and Qatar.

   So the countries get their own ramp, ordered against stackOrder
   (FR UK US LB HU DE IT QA BE Other) so that no two touching bands share a hue
   or sit at the same lightness. Where neighbours are close in hue the lightness
   carries them and the other way about, which is also what holds them apart
   under deuteranope and protanope simulation. Red, tangerine, sage and grey are
   the palette's own inks, so the charts still read as the same publication; the
   five additions are muted to sit beside those rather than shout over them.

   Measured as the reader sees it -- composited at the 0.75 the bands are laid
   at, over each theme's own ground, CIEDE2000 against a floor of 15:

     touching bands, worst of normal/deutan/protan   dark 17.0   light 17.5
     any two entries in the key, normal vision       dark 16.2   light 15.0

   Ten categorical hues cannot all survive colour-blind simulation against each
   other -- no ten-class palette does -- so the remaining collisions are between
   bands that never touch (Lebanon and Germany, the United States and Hungary),
   where the stack position, the row labels and the tooltips carry the identity
   instead. The neighbours, which are the ones a reader actually has to tell
   apart, all clear.

   Two values per hue because the grounds differ: on carbon black the bands
   darken toward the ground, so the dark set runs light; on beige they lighten,
   so the light set runs saturated. The light values are also the swimlane row
   labels -- text on beige at 10px -- so none of them drops below 3.5:1 there.

   Nothing but timeline.html reads these tokens. */
:root {
  --c-fr:#FF1B1C; --c-uk:#2BA8A0; --c-us:#FF7F11; --c-lb:#B49AE8; --c-hu:#E9C520;
  --c-de:#5E92F0; --c-it:#9DBF8E; --c-qa:#C2559B; --c-be:#8E4F2A; --c-other:#8A8A80;
}
:root[data-theme="light"] {
  --c-fr:#C8111B; --c-uk:#10746D; --c-us:#C06007; --c-lb:#6A49B5; --c-hu:#8A6A00;
  --c-de:#2B5FC4; --c-it:#4E7A3E; --c-qa:#93306F; --c-be:#6B3614; --c-other:#74746C;
}

/* hatched bars pick up the new hues */
.bcr-bar[data-bar="yt"] { background:repeating-linear-gradient(45deg,var(--red) 0 1.7px,transparent 1.7px 4px) !important; }
.bcr-bar[data-bar="fb"] { background:repeating-linear-gradient(45deg,var(--ash) 0 1.2px,transparent 1.2px 5px) !important; }
.bcr-bar[data-bar="tt"] { background:repeating-linear-gradient(-45deg,var(--tang) 0 1.1px,transparent 1.1px 6px) !important; }
.bar-legend .bl-sw[data-bar="yt"] { background:repeating-linear-gradient(45deg,var(--red) 0 1.7px,transparent 1.7px 4px); }
.bar-legend .bl-sw[data-bar="fb"] { background:repeating-linear-gradient(45deg,var(--ash) 0 1.2px,transparent 1.2px 5px); }
.bar-legend .bl-sw[data-bar="tt"] { background:repeating-linear-gradient(-45deg,var(--tang) 0 1.1px,transparent 1.1px 6px); }

/* ---- HALFTONE, RIGHT EDGE ----
     A fine even stipple on a 7px offset grid, faded across roughly 620px so it
     reads as tone rather than pattern. It sits on <html> under a
     transparent <body>, so it shows in the gutters and never lands behind type. */
html { background:var(--bg); }
body { background:transparent; position:relative; z-index:1; }
html::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at center, var(--fg) .7px, transparent .8px),
    radial-gradient(circle at center, var(--fg) .7px, transparent .8px);
  background-size:7px 7px, 7px 7px;
  background-position:0 0, 3.5px 3.5px;
  -webkit-mask-image:linear-gradient(to left, #000 0, rgba(0,0,0,.55) 260px, transparent 620px);
  mask-image:linear-gradient(to left, #000 0, rgba(0,0,0,.55) 260px, transparent 620px);
  opacity:.42;
}

/* ---- LIGHTER SAGE GROUND ----
     The ground lifts to #F1F4E6; surfaces and rules step up with it so the
     tint stays readable as paper rather than as a grey. */
:root[data-theme="light"] {
  --bg:#F6F8EF; --bg2:#EFF3E2; --surface:#E2E8CE; --surface2:#D6DEBD; --grid:#ECF0DF;
  --rule:#AFB894; --rule2:#D8DFC4; --rule3:#6E7462;
  --r0:#F6F8EF;
  --bg-rgb:246,248,239;
}

/* "Read the Report" stands out in the nav on every page: the theme's orange
   (#D9660A on the light theme, #FF7F11 on the dark) */
nav.nav a[href="report.html"], nav.nav a[href="report.html"].on { color:var(--tang); }
nav.nav a[href="report.html"]:hover { color:var(--tang); opacity:.8; }