/* ============================================================================
   THE NEXT HOTSPOT — SHARED DESIGN SYSTEM (system.css)
   Single source of truth for tokens, type scale and cross-cutting components.
   Loaded BEFORE each page's inline <style>, so it is a safe foundation:
   page-level CSS still wins, nothing existing changes. New work references the
   utilities below (.u-*) and the tokens, so consistency is enforced once here
   rather than redeclared per page.
   House rules: British spelling, no em/en dashes in content, gold is the one
   accent and is used sparingly (one emphasis per headline).
   ============================================================================ */

:root{
  /* --- surface --- */
  --forest:#0E2820; --forest-2:#14342A; --forest-3:#1B4234; --forest-deep:#081C16;
  --cream:#F4EFE6; --cream-deep:#EAE3D4; --cream-line:#DDD3BE; --cream-line-soft:#E6DFCC;
  --ink:#1F1F1F; --paper:#FAFAF7;

  /* --- accent (use gold sparingly) --- */
  --gold:#C8A96E; --gold-deep:#A88D54; --gold-bright:#E4C98E;
  --id:#C8A96E;            /* subject / active highlight = gold */

  /* --- supporting --- */
  --sage:#7FB0A2; --flow:#4A9EBD; --flow-bright:#6DB8D4; --contested:#B5462D;

  /* --- status taxonomy --- */
  --verified:#2D6A4F; --verified-soft:rgba(45,106,79,0.08);
  --announced:#C8A96E; --announced-soft:rgba(200,169,110,0.10);
  --contested-soft:rgba(181,70,45,0.08);

  /* --- text on forest --- */
  --on-forest-body:#C7C0AF; --on-forest-muted:#8A9690;

  /* --- rules / hairlines (both naming conventions in use across pages) --- */
  --rule:rgba(244,239,230,0.10); --rule-2:rgba(200,169,110,0.30);
  --on-forest-rule:rgba(244,239,230,0.10); --on-forest-rule-2:rgba(200,169,110,0.30);

  /* --- type families --- */
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  /* --- modular type scale (one ladder for the whole report) --- */
  --t-display:clamp(54px,9vw,104px);   /* hero H1 */
  --t-h2:clamp(28px,4vw,46px);         /* section headline */
  --t-h3:clamp(19px,2.2vw,25px);       /* sub-heading */
  --t-body:15px;                       /* reading body */
  --t-cap:12.5px;                      /* caption / standfirst small */
  --t-mono:10.5px;                     /* eyebrow / label */
  --lh-tight:1.06; --lh-body:1.62;
  --tracking-mono:0.16em;

  /* --- vertical rhythm --- */
  --section-pad:72px;                  /* canonical top/bottom section padding */
  --sec-major:clamp(56px,8vw,96px);    /* dominant narrative/analytical rhythm */
  --sec-punct:clamp(72px,11vw,128px);  /* editorial punctuation, more air */
  --sec-dense:clamp(40px,6vw,64px);    /* dense reference, tighter */
  --measure:62ch;                      /* canonical reading / standfirst measure */

  /* --- hero spec --- */
  --hero-min:92vh;                     /* canonical hero height band */
  --hero-pad:96px;

  /* --- chart primitives (one visual family across all data-viz) --- */
  --chart-axis:rgba(200,169,110,0.30);
  --chart-grid:rgba(244,239,230,0.08);
  --chart-node:var(--flow-bright);
  --chart-node-subject:var(--gold);
  --chart-node-r:6px;
  --chart-label:#8A9690;
}

/* Subtle brand touch, safe and additive */
::selection{background:var(--gold);color:var(--forest-deep)}

/* Accessibility / production hardening: honour reduced-motion globally.
   Animations and transitions resolve instantly so content still ends visible. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important; scroll-behavior:auto !important;
  }
}

/* ----------------------------------------------------------------------------
   CROSS-CUTTING UTILITIES (new class names; apply as components are unified)
   ---------------------------------------------------------------------------- */

/* Eyebrow: the mono kicker above a headline */
.u-eyebrow{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:11px; margin-bottom:15px;
}
.u-eyebrow::before{content:""; width:26px; height:1px; background:var(--gold)}

/* Headline: serif, cream, with exactly one gold emphasis via <em> */
.u-headline{
  font-family:var(--serif); font-weight:500; font-size:var(--t-h2);
  line-height:var(--lh-tight); letter-spacing:-.018em; color:var(--cream);
  max-width:20ch;
}
.u-headline em{font-style:normal; color:var(--gold-bright)}

/* The one-emphasis rule, reusable inline: wrap the operative phrase.
   Deep gold by default (reads on cream); bright gold when the headline
   sits on a dark forest section (the scored / instruments panels). */
.u-gold{font-style:normal; color:var(--gold-deep)}
.pf-h2 .u-gold, .dashx__title .u-gold, .board__title .u-gold, .lvx__title .u-gold{color:var(--gold-bright)}

/* Standfirst / reading measure */
.u-standfirst{max-width:var(--measure); font-size:clamp(15px,1.5vw,18px); line-height:var(--lh-body); color:var(--on-forest-body)}
.u-standfirst b,.u-standfirst strong{color:var(--cream); font-weight:500}

/* Source / footnote line */
.u-source{font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; line-height:1.55; color:var(--on-forest-muted)}

/* Caption */
.u-cap{font-family:var(--mono); font-size:9px; letter-spacing:.05em; color:var(--on-forest-muted)}

/* Status tags (Verified / Announced / Contested) */
.u-tag{font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:5px; border:1px solid; white-space:nowrap; line-height:1}
.u-tag--v{color:var(--sage); border-color:rgba(127,176,162,.5)}
.u-tag--a{color:var(--gold-bright); border-color:var(--rule-2)}
.u-tag--c{color:#E08766; border-color:rgba(176,70,45,.55)}

/* Section rhythm helper */
.u-section{padding:var(--section-pad) 0; border-bottom:1px solid var(--rule)}

/* Hero baseline (apply to a chapter hero to bring it onto the band) */
.u-hero{position:relative; min-height:var(--hero-min); display:flex; align-items:flex-end; overflow:hidden; background:var(--forest-deep)}

/* P2: harmonise eyebrow/kicker tracking across the report (tracking only,
   layout-safe; body-scoped so it wins over per-page inline rules). */
body .bb-panel__eb, body .begin__eb, body .bhub__eb, body .bmodal__eb, body .bnote__eb, body .board__exhibit__eb, body .bpanel__eb, body .broom__eb, body .call__eb, body .chapmenu__eb, body .chcover__eb, body .chsplash__eb, body .chx__eb, body .clk__eb, body .cmap__eb, body .cmodal__eb, body .cmp__eb, body .cnd-idx__eb, body .cnd-tile__eb, body .cns-modal__eb, body .cns-panel__kicker, body .cns__eb, body .cnsdiv__eb, body .contrib__eb, body .cover__eb, body .cred__eb, body .dash-content__eb, body .dash-pop__eb, body .dashx__eb, body .dir-strata__eb, body .dpm__eb, body .dvd__eb, body .ena__eb, body .eq-brief__eb, body .eq-car__eb, body .eq-synth__eb, body .exp__eb, body .flow__eb, body .fmodal__eb, body .fmr__eb, body .fmt-cover__eb, body .gpm__eb, body .hero__eyebrow, body .hist__eb, body .live__kicker, body .mapx__eb, body .mast__eyebrow, body .method__eb, body .more__eb, body .ob-tile__kicker, body .overview__eb, body .panel__eb, body .pb__eb, body .pf-modal__eb, body .pg__eb, body .pm__eb, body .psec__eb, body .psr__eb, body .rcx__eb, body .rmodal__eb, body .rr__eb, body .rrm__eb, body .rtile__eb, body .sc__eb, body .scene__eb, body .sec__eb, body .section__eb, body .sgy__eb, body .spon__eb, body .sponsor__eb, body .stage__eb, body .strat__eb, body .strata__eb, body .svygate__eb, body .sx__eb, body .sxread__eb, body .tile-det__eb, body .tl__eb, body .up__eyebrow, body .utr__eb, body .verdict__eb, body .vfilm__eb, body .vmb__eb, body .voim__eb, body .wm__eb{letter-spacing:0.18em}

/* P2 cleanup: harmonise label/kicker tracking (mono micro-labels;
   tighter than eyebrows, tracking-only so layout-safe). */
body .cks__where-k, body .cled__k, body .colo__k, body .dash-cmp__k, body .data-k, body .dpm__index-k, body .ecard__k, body .ena__fact-k, body .eq-gfig__k, body .exp__bar-k, body .exp__headline-k, body .exp__rt-k, body .exp__vc-k, body .exread__k, body .finding__metric-k, body .ftz-modal__row-k, body .hmodal__stat-k, body .istrip__k, body .lcs__k, body .lv__k, body .mapx__panel-k, body .mapx__panel-row-k, body .mapx__readout-k, body .mcell__k, body .mod__k, body .more__fact-k, body .nextup__k, body .pb__k, body .proj__k, body .rc__cav-k, body .rcm__k, body .rcx__k, body .rdxtile__k, body .rpt__bk-k, body .rr__k, body .scene__k, body .scrolly__beat-stat-k, body .scrolly__caption-k, body .scrolly__pop-stat-k, body .seg__k, body .seqnav__k, body .sgy__pop-stat-k, body .spec__k, body .spon__stat-k, body .src__k, body .sx-k, body .tjr-k, body .utr__hero-k, body .utr__k, body .utr__stat-k, body .vfilm__stat-k, body .wm__tou-k, body .wsel__seg-k{letter-spacing:0.12em}

/* P2 cleanup: harmonise source/caption/footnote tracking
   (small print; low tracking for readability, tracking-only). */
body .adoc__foot, body .atk__cap, body .atk__foot, body .bcard__foot, body .board__note, body .bphoto__cap, body .cb__caption, body .cb__foot, body .chart__cap, body .cks__cap, body .clk__cap, body .cmap__foot, body .cmp__cap, body .cmp__foot, body .cmp__note, body .cns-modal__cap, body .cns__foot, body .cover__note, body .ctr__src, body .cvid__src, body .dash-content__source, body .dash-pop__src, body .dash-stack__note, body .dash__foot, body .dash__note, body .dcx3d__cap, body .deal__foot, body .deal__note, body .dpm__foot, body .dv__cap, body .dv__src, body .dvd__foot, body .eq-global__note, body .eq-global__src, body .eq-open__note, body .eq-synth__src, body .est__note, body .exp__resolve-src, body .exp__src, body .exp__time-src, body .finding__src, body .fmodal__foot, body .fndrow__note, body .foot__note, body .ftz-modal__src, body .ftz__foot, body .gov__src, body .grun__foot, body .hboard__note, body .jbar__note, body .led__foot, body .ledger__cap, body .ledger__detail-source, body .ledger__foot, body .ledger__note, body .lv__foot, body .lvbeat__cap, body .mex__cap, body .mod__cap, body .open-source, body .panel__foot, body .paper__foot, body .pb__foot, body .pcard__note, body .people__note, body .permit__foot, body .person__quote-source, body .pf-card__foot, body .pf-ex__cap, body .pf-modal__src, body .pg__note, body .pg__src, body .pli__src, body .pm__quote-src, body .pm__src, body .pplay__note, body .psr__note, body .qmap__cap, body .race__cap, body .races__note, body .rc2__note, body .rc__src, body .rcx__foot, body .rdx__foot, body .rmodal__src, body .rpt__cap, body .rpt__caption, body .rpt__foot, body .rpt__src, body .rr__cap, body .rr__note, body .rr__src, body .rrm__src, body .sc__cap, body .scmap__foot, body .scrolly__beat-src, body .scrolly__caption, body .scrolly__node-src, body .scrolly__pull-src, body .seat__foot, body .sgy__caption, body .sgy__src, body .sponsor__note, body .strat__foot, body .strata__foot, body .strata__note, body .studio__foot, body .sup__foot, body .supply__foot, body .svygate__note, body .sxcap__cap, body .sxread__note, body .sxstack__foot, body .utr__fig-src, body .utr__foot, body .utr__headline-src, body .utr__modal-src, body .utr__stat-src, body .vfilm__cap, body .vfilm__foot, body .vmb__foot, body .voi__note, body .voim__cap, body .wf__foot, body .whm__foot, body .whm__src, body .wm__foot, body .wsc__note{letter-spacing:0.05em}

/* P2 cleanup: section rhythm tiers (vertical padding only via padding-block,
   so horizontal padding is untouched; body-scoped to win over inline.
   Full-bleed (dashx/scrolly/studio/sgy/dvd/cnsdiv) and thin strips
   (sponsor/psr/cns) are deliberately excluded). */
body .overview, body .board, body .section, body .pf-sec, body .mapx, body .people, body .lvx, body .companies, body .more, body .exp, body .sx, body .panel, body .hist, body .ena, body .boardroom, body .pb, body .utr, body .voi, body .permit, body .mod, body .block{padding-block:var(--sec-major)}
body .vfilm{padding-block:var(--sec-punct)}
body .supply, body .sup, body .spon, body .adoc{padding-block:var(--sec-dense)}

/* ===== Focus mode (read one feature at a time) ===== */
.nav__focus{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--rule-2,rgba(200,169,110,.3));border-radius:999px;color:var(--on-forest-muted,#8A9690);padding:6px 13px;cursor:pointer;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;transition:color .2s,border-color .2s,background .2s;margin-left:14px;flex:none}
.nav__focus svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.nav__focus:hover{color:var(--cream,#F4EFE6);border-color:var(--gold,#C8A96E)}
.nav__focus.is-on{color:var(--forest-deep,#081C16);background:var(--gold,#C8A96E);border-color:var(--gold,#C8A96E)}
@media(max-width:760px){.nav__focus .nav__focus-lab{display:none}.nav__focus{padding:6px 9px;margin-left:8px}}
.focusbar{display:none}
.focus-on .focusbar{display:flex;position:sticky;top:56px;z-index:45;align-items:center;justify-content:space-between;gap:14px;max-width:1100px;width:calc(100% - 56px);margin:14px auto 4px;padding:11px 18px;border:1px solid var(--rule-2,rgba(200,169,110,.3));border-radius:12px;background:rgba(8,28,22,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.focusbar__l{display:flex;align-items:baseline;gap:14px;min-width:0}
.focusbar__ix{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.04em;color:var(--gold-bright,#E4C98E);white-space:nowrap}
.focusbar__nm{font-family:"Playfair Display",Georgia,serif;font-size:16px;color:var(--cream,#F4EFE6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.focusbar__r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.focusbar__nav{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule-2,rgba(200,169,110,.3));background:transparent;color:var(--on-forest-body,#C7C0AF);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s}
.focusbar__nav:hover{color:var(--cream,#F4EFE6);border-color:var(--gold,#C8A96E)}
.focusbar__all{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold,#C8A96E);background:transparent;border:1px solid var(--rule-2,rgba(200,169,110,.3));border-radius:8px;padding:9px 14px;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.focusbar__all:hover{border-color:var(--gold,#C8A96E);color:var(--gold-bright,#E4C98E)}
.focus-on [data-focus-feature]{display:none}
.focus-on [data-focus-feature].is-focus{display:block;scroll-margin-top:120px}
@media(max-width:560px){.focus-on .focusbar{width:calc(100% - 32px);top:52px}.focusbar__nm{font-size:14px}}