/* ============================================================
   Whitepaper — long-form document treatment.
   Dark-first like the rest of the site, but tuned for reading:
   a narrow measure, hairline rules, mono chrome, figures on
   glass plates. Loaded only by the whitepaper route.
   ============================================================ */

/* Chart series — the handoff package's colourblind-validated set
   (blue / green / magenta / yellow / aqua), re-lit for the dark canvas.
   Per-series hue assignments are kept exactly as specified:
   s1 Launch · s2 Community · s3 Team · s4 Treasury · s5 Emissions. */
:root {
  --wp-s1: #3E92F0;
  --wp-s2: #2FB86B;
  --wp-s3: #E05A94;
  --wp-s4: #E8B23C;
  --wp-s5: #24B3A0;
}

/* ---- Reading progress --------------------------------------------------- */
.wp-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: 2px; background: transparent; pointer-events: none;
}
.wp-progress i {
  display: block; height: 100%; width: 0;
  background: var(--grad-blue);
  box-shadow: 0 0 12px -2px rgba(var(--halo-cyan-rgb), .8);
  transform-origin: left center;
}

/* ---- Shell -------------------------------------------------------------- */
/* Positioned so the hero wave band (.halo-band, absolute) anchors to the page
   rather than the viewport, and so the article stacks above it. */
/* overflow-x: clip (not hidden) lets the full-bleed hero band overhang the
   scrollbar gutter without creating a scroll container, which would break the
   sticky TOC rail. */
.wp-main { position: relative; overflow-x: clip; padding-bottom: var(--s-10); }
.wp-wrap { position: relative; z-index: 1; max-width: 1220px; margin-inline: auto; padding-inline: var(--s-5); }

/* The landing hero is a tall standalone section; this masthead is short and the
   article starts immediately under it. So the band is shorter here, and the
   scrim reaches the page background well before the abstract — otherwise the
   spectrum sits behind body copy and the tagline loses contrast. */
/* Anchored to the masthead, so it is exactly as tall as the masthead at every
   width — a fixed height overlapped the date line once the hero shrank. Full
   bleed via 100vw, since .wp-wrap constrains its parent to the article measure. */
.wp-hero .hero-wave-band {
  inset: 0 auto auto 50%;
  width: 100vw; height: 100%;
  transform: translateX(-50%);
}
.wp-hero .hero-wave-band .halo-scrim {
  background: linear-gradient(
    180deg,
    rgba(8, 12, 28, .58) 0%,
    rgba(8, 12, 28, .52) 34%,
    rgba(8, 12, 28, .80) 68%,
    var(--bg) 94%
  );
}

/* ---- Masthead ----------------------------------------------------------- */
/* Top padding clears the fixed header (the removed unlisted band used to do
   this with its margin). The wave band is inset:0 on .wp-hero, so it runs up
   behind the translucent header exactly like the landing hero. */
.wp-hero {
  position: relative; text-align: center;
  padding: calc(var(--header-h) + clamp(56px, 9vw, 104px)) 0 clamp(36px, 5vw, 60px);
}
.wp-hero .eyebrow {
  position: relative;
  font: 600 11px/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-50); margin: 0 0 var(--s-5);
}
.wp-hero h1 {
  position: relative;
  font-size: clamp(3.4rem, 11vw, 6.5rem); font-weight: 900;
  line-height: .95; letter-spacing: -.035em; margin: 0;
}
.wp-hero .tagline {
  position: relative;
  font-size: clamp(1.1rem, 3vw, 1.5rem); color: var(--ink-70);
  max-width: 22ch; margin: var(--s-5) auto 0; text-wrap: balance;
}
.wp-hero .meta {
  position: relative;
  margin-top: var(--s-6);
  font: 500 11px/2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-50);
}
.wp-hero .meta b { color: var(--ink-70); font-weight: 600; }

/* ---- Layout: sticky TOC rail + article ---------------------------------- */
.wp-layout { display: block; }
@media (min-width: 1080px) {
  .wp-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
}

.wp-toc { display: none; }
@media (min-width: 1080px) {
  .wp-toc {
    display: block; position: sticky; top: calc(var(--header-h) + 56px);
    padding-top: 4px;
  }
}
.wp-toc h2 {
  font: 600 10px/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-30); margin: 0 0 var(--s-4);
}
.wp-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: wptoc; }
.wp-toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0 7px 12px; margin-left: -1px;
  border-left: 1px solid var(--glass-bd);
  font-size: 13.5px; line-height: 1.4; color: var(--ink-50); text-decoration: none;
  counter-increment: wptoc;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.wp-toc a::before {
  content: counter(wptoc);
  font: 600 10px/1.6 var(--font-mono); color: var(--ink-30); min-width: 10px;
}
.wp-toc a:hover { color: var(--ink); }
.wp-toc a.on { color: var(--accent-ink); border-left-color: var(--accent-ink); }
.wp-toc a.on::before { color: var(--accent-ink); }

/* ---- Article ------------------------------------------------------------ */
.wp-article { max-width: 74ch; margin-inline: auto; min-width: 0; }
@media (min-width: 1080px) { .wp-article { margin-inline: 0; } }

.wp-abstract {
  border-top: 1px solid var(--glass-bd);
  border-bottom: 1px solid var(--glass-bd);
  padding: var(--s-6) 0; margin-bottom: var(--s-8);
}
.wp-abstract p { margin: 0; font-size: 1.12rem; line-height: 1.72; color: var(--ink-70); }
.wp-abstract strong { color: var(--ink); }
.wp-abstract .k {
  font: 600 10px/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-ink); display: block; margin-bottom: var(--s-4);
}

.wp-section { scroll-margin-top: calc(var(--header-h) + 32px); padding-top: var(--s-8); }
.wp-section > .num {
  font: 600 10px/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-50); display: block; margin-bottom: var(--s-3);
}
/* Headings carry full ink. Without this they inherit --ink-70 from .wp-prose —
   the same value as body text — and read as faded rather than as headings. */
.wp-section > h2 {
  color: var(--ink);
  font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.12; letter-spacing: -.02em;
  margin: 0 0 var(--s-5);
}
.wp-section h3 {
  color: var(--ink);
  font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em;
  margin: var(--s-7) 0 var(--s-4);
}
.wp-section h3 .n { color: var(--ink-30); font-family: var(--font-mono); font-size: .8em; margin-right: 8px; }

.wp-prose { color: var(--ink-70); font-size: 1.05rem; line-height: 1.78; }
.wp-prose p { margin: 0 0 var(--s-5); }
.wp-prose strong { color: var(--ink); font-weight: 700; }
.wp-prose em { color: var(--ink-70); }
.wp-prose a { color: var(--accent-ink); text-underline-offset: 3px; }
.wp-prose ul { margin: 0 0 var(--s-5); padding-left: 0; list-style: none; }
.wp-prose ul li { position: relative; padding-left: 22px; margin-bottom: var(--s-3); }
.wp-prose ul li::before {
  content: ''; position: absolute; left: 4px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); opacity: .7;
}
.wp-prose code {
  font: 500 .88em/1.4 var(--font-mono);
  background: rgba(var(--halo-cyan-rgb), .1); color: var(--accent-ink);
  padding: 2px 6px; border-radius: 6px;
}

.wp-pull {
  position: relative;
  margin: var(--s-6) 0; padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 2px solid rgba(var(--accent-blue-rgb), .7);
  font-size: 1.1rem; line-height: 1.62; color: var(--ink-70); font-style: italic;
}

/* ---- Tables ------------------------------------------------------------- */
.wp-tablewrap {
  margin: var(--s-6) 0; overflow-x: auto;
  border: 1px solid var(--glass-bd); border-radius: var(--r-card);
  background: rgba(255, 255, 255, .012);
  -webkit-overflow-scrolling: touch;
}
.wp-tablewrap table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14px; line-height: 1.55; }
.wp-tablewrap caption {
  caption-side: top; text-align: left; padding: var(--s-4) var(--s-5) 0;
  font: 600 10px/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-50);
}
.wp-tablewrap th {
  font: 600 10px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-50); text-align: left; padding: 13px var(--s-5);
  border-bottom: 1px solid var(--glass-bd-strong); white-space: nowrap;
}
.wp-tablewrap td {
  padding: 13px var(--s-5); border-bottom: 1px solid var(--glass-bd);
  vertical-align: top; color: var(--ink-70);
}
.wp-tablewrap tr:last-child td { border-bottom: 0; }
.wp-tablewrap td:first-child { color: var(--ink); font-weight: 600; }
.wp-tablewrap td.num, .wp-tablewrap th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.wp-tablewrap td.arrow { color: var(--ink-30); text-align: center; width: 1%; padding-inline: var(--s-2); }
.wp-tablewrap tbody tr:hover td { background: rgba(255, 255, 255, .022); }
/* Allocation variant — five columns need more room than the article column
   gives them; below this width the notes column shreds into two-word lines. */
.wp-tablewrap.alloc table { min-width: 700px; }
.wp-tablewrap.alloc th, .wp-tablewrap.alloc td { padding-inline: var(--s-4); }

/* Compact variant — the year × emission-cap grid. */
.wp-tablewrap.compact table { min-width: 560px; }
.wp-tablewrap.compact th, .wp-tablewrap.compact td { padding: 11px var(--s-4); text-align: right; }
.wp-tablewrap.compact th:first-child, .wp-tablewrap.compact td:first-child { text-align: left; }

/* ---- Figures & charts --------------------------------------------------- */
.wp-figure { margin: var(--s-7) 0; }
.wp-plate {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur-light); backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--glass-bd); border-radius: var(--r-card);
  box-shadow: var(--glass-edge);
  padding: clamp(16px, 3vw, 28px);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.wp-plate > svg { display: block; width: 100%; height: auto; }
/* Figures stop shrinking before their labels become unreadable; the plate
   scrolls instead. 700px is the widest floor that still fits the article
   column's content box at full desktop width — go higher and every figure
   scrolls on desktop too, clipping the labels at the right edge. */
.wp-plate.scroll > svg { min-width: 700px; }
/* …and say so, rather than leaving the cut-off edge to be discovered. */
@media (max-width: 880px) {
  .wp-figure:has(.wp-plate.scroll) figcaption::before {
    content: 'Scroll the figure sideways to read it. ';
    color: var(--ink-30);
  }
}
.wp-figure figcaption {
  margin-top: var(--s-4);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-50);
}
.wp-figure figcaption b { color: var(--accent-ink); font-weight: 700; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; }

/* The old-way / Halo-way galaxy (§1), shared with the landing page's #problem
   section. It borrows the plate's frame but is deliberately NOT a .wp-plate:
   the zoom modal *moves* plates into itself, which would pull a live canvas out
   from under its resize observer mid-animation, and the canvas already answers
   to hover — a click-to-zoom would fight it. */
.wp-galaxy .toggle-row { margin-bottom: var(--s-5); }
.wp-galaxy__panel {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur-light); backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--glass-bd); border-radius: var(--r-card);
  box-shadow: var(--glass-edge);
}
/* Shorter than the landing page's: the article column is ~730px, and the 54vw
   band there leaves this one nearly square. */
.wp-galaxy__panel canvas { height: clamp(300px, 40vw, 440px); }
.wp-galaxy figcaption { max-width: 62ch; }

/* Shared SVG chrome for the hand-authored diagrams and charts. */
.wp-svg text { font-family: var(--font-sans); fill: var(--ink-70); }
.wp-svg .t-node { font-size: 13px; font-weight: 700; fill: rgba(255, 255, 255, .95); }
.wp-svg .t-sub { font-size: 11px; fill: var(--ink-50); }
.wp-svg .t-edge { font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-50); letter-spacing: .02em; }
.wp-svg .t-axis { font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-30); }
.wp-svg .t-val { font-family: var(--font-mono); font-size: 11.5px; fill: var(--ink-70); font-variant-numeric: tabular-nums; }
.wp-svg .box { fill: rgba(255, 255, 255, .045); stroke: var(--glass-bd); stroke-width: 1; }
.wp-svg .box-accent { fill: rgba(28, 100, 242, .16); stroke: rgba(28, 100, 242, .55); stroke-width: 1; }
.wp-svg .box-cyan { fill: rgba(0, 180, 230, .13); stroke: rgba(0, 180, 230, .5); stroke-width: 1; }
.wp-svg .box-amber { fill: rgba(255, 200, 0, .11); stroke: rgba(255, 200, 0, .45); stroke-width: 1; }
.wp-svg .edge { fill: none; stroke: var(--glass-bd-strong); stroke-width: 1.25; }
.wp-svg .edge-accent { fill: none; stroke: rgba(28, 100, 242, .8); stroke-width: 1.6; }
.wp-svg .edge-dash { fill: none; stroke: var(--glass-bd-strong); stroke-width: 1.25; stroke-dasharray: 4 4; }
.wp-svg .grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.wp-svg .axis { stroke: var(--glass-bd-strong); stroke-width: 1; }

/* Floating labels sit over connector lines, lifelines and gridlines. A knockout
   halo in the plate's own colour stops the line running through the glyphs —
   far more robust than routing every edge around every label by hand. Node text
   inside a box (.t-node/.t-sub) is excluded: it has the box fill behind it. */
.wp-svg .t-edge,
.wp-svg .t-val,
.wp-svg .t-axis,
.wp-svg .halo {
  paint-order: stroke fill;
  stroke: rgba(12, 12, 15, .92);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Chart legend */
.wp-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: var(--s-4);
  font: 500 12px/1.4 var(--font-mono); color: var(--ink-50);
}
.wp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.wp-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ---- Enlarge a figure --------------------------------------------------- */
/* Only offered once JS is up: the modal works by MOVING the plate into the
   dialog and putting it back on close, which keeps the circulating chart's
   element ids unique and its hover readout working at the larger size. */
html.js .wp-figure .wp-plate { cursor: zoom-in; }

.wp-zoom-btn {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--r-chip);
  border: 1px solid var(--glass-bd); background: rgba(14, 14, 18, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-50); cursor: zoom-in; opacity: 0;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.wp-plate:hover .wp-zoom-btn,
.wp-zoom-btn:focus-visible { opacity: 1; }
.wp-zoom-btn:hover { color: var(--ink); border-color: var(--glass-bd-strong); }
@media (hover: none) { .wp-zoom-btn { opacity: 1; } }

.wp-modal { position: fixed; inset: 0; z-index: 200; display: flex; }
.wp-modal[hidden] { display: none; }
.wp-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wp-modal__inner {
  position: relative; margin: auto;
  width: min(1500px, 96vw); max-height: 94vh;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: clamp(16px, 2.4vw, 30px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.wp-modal__slot { display: block; }
.wp-modal__slot .wp-plate { cursor: default; }
/* Redundant once the figure is already enlarged. */
.wp-modal__slot .wp-zoom-btn { display: none; }
/* Only drop the scroll floor where the dialog is actually wider than it. Below
   this the floor is what makes the figure legible, so keep it and let the plate
   scroll inside the dialog instead. */
@media (min-width: 900px) {
  .wp-modal__slot .wp-plate { overflow: visible; }
  .wp-modal__slot .wp-plate.scroll > svg { min-width: 0; }
}
.wp-modal__cap {
  margin: 0; max-width: 90ch;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-50);
}
.wp-modal__close {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-chip);
  border: 1px solid var(--glass-bd); background: var(--glass-fill);
  font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-70); cursor: pointer;
}
.wp-modal__close:hover { color: var(--ink); border-color: rgba(var(--accent-blue-rgb), .55); }

@media (prefers-reduced-motion: no-preference) {
  .wp-modal { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
  .wp-modal.on { opacity: 1; }
}

/* Hover readout for the release chart */
.wp-plate { position: relative; }
.wp-tip {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 190px; max-width: 260px;
  background: rgba(10, 10, 12, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--glass-bd-strong); border-radius: 12px;
  padding: 10px 12px;
  font: 12px/1.6 var(--font-mono); color: var(--ink-70);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.wp-tip.on { opacity: 1; transform: translateY(0); }
.wp-tip b { color: var(--ink); font-weight: 700; }
.wp-tip .row { display: flex; justify-content: space-between; gap: 12px; }
.wp-tip .row i { width: 8px; height: 8px; border-radius: 2px; flex: none; margin-right: 6px; display: inline-block; }
.wp-tip .ev { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--glass-bd); color: var(--accent-ink); font-size: 11px; line-height: 1.45; white-space: normal; }

/* ---- Downloads / footer of the doc -------------------------------------- */
.wp-links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0; }
.wp-links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-chip);
  border: 1px solid var(--glass-bd); background: var(--glass-fill);
  font: 500 13px/1 var(--font-mono); color: var(--ink-70); text-decoration: none;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.wp-links a:hover { color: var(--ink); border-color: rgba(var(--accent-blue-rgb), .55); }

.wp-disclaimer {
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid var(--glass-bd);
  font-size: 13px; line-height: 1.7; color: var(--ink-50);
}
.wp-disclaimer strong { color: var(--ink-70); }

/* ---- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wp-tip { transition: none; }
  .wp-progress i { transition: none; }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}