/* ==========================================================================
   Emphasis layer, added September 2026.

   The site had one volume: every section at the same weight, so the strongest
   evidence (a forward record frozen before first pitch) sat below the fold at
   the same size as a methods footnote. This adds hierarchy, not decoration:
   one dark band for the claim the whole project rests on, stat tiles for the
   handful of numbers that matter, and chart cards for the evidence behind
   them. The sand paper stays the ground; the ink band is used exactly once
   per page.
   ========================================================================== */

/* Tokens this layer reads, declared here so it works on pages that do not
   load style.css (index.html names its palette differently). Values are
   identical to style.css. */
:root {
  --card: #FBF8F3; --ink: #1E1A15; --ink-2: #4C443A; --ink-3: #857A6B;
  --rule: #D8CFBE; --rule-soft: #E7E0D3; --gold: #9A7B2E; --gold-2: #C4A455;
}

:root {
  /* chart roles, validated against --card with the dataviz palette checker:
     all checks pass, worst colourblind separation dE 20.0, contrast >= 3:1 */
  --series-1: #9A7B2E;
  --series-2: #2A6FA8;
  --deemph:   #C9BFAE;
  --ink-band: #1E1A15;
  --ink-band-2: #2A251E;
  --on-ink:   #F4EEE3;
  --on-ink-2: #B9AE9C;
}

/* ---- the one dark band: the claim, stated once, at full volume ---- */
.hero-band {
  background: var(--ink-band);
  color: var(--on-ink);
  margin: 0 calc(50% - 50vw);
  padding: 58px calc(50vw - 50%) 46px;
  position: relative;
  overflow: hidden;
}
.hero-band::before {
  /* a faint diamond, the only ornament on the site */
  content: "";
  position: absolute; right: -120px; top: -120px;
  width: 420px; height: 420px;
  border: 1px solid rgba(196,164,85,.16);
  transform: rotate(45deg);
  pointer-events: none;
}
.hero-band .eyebrow { color: var(--gold-2); }
.hero-band h1 {
  color: var(--on-ink);
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.02;
  letter-spacing: -.025em;
  max-width: 15ch;
  margin: 10px 0 18px;
}
.hero-band .dek { color: var(--on-ink-2); font-size: 17.5px; max-width: 60ch; }
.hero-band .dek strong { color: var(--on-ink); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 26px; } }

/* the single hero figure: sans, proportional digits, exactly one per page */
.hero-figure {
  border-left: 2px solid var(--gold-2);
  padding: 4px 0 4px 22px;
}
.hero-figure .label {
  font: 600 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2);
}
.hero-figure .value {
  font: 700 clamp(64px, 9vw, 104px)/0.95 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: -.04em;
  color: var(--on-ink);
  margin: 8px 0 6px;
}
.hero-figure .value small { font-size: .42em; letter-spacing: -.01em; color: var(--on-ink-2); }
.hero-figure .context { color: var(--on-ink-2); font-size: 14.5px; max-width: 42ch; line-height: 1.5; }
.hero-figure .context b { color: var(--on-ink); font-weight: 600; }

/* ---- KPI row: stat tiles ---- */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(244,238,227,.10);
  border: 1px solid rgba(244,238,227,.10);
  margin-top: 40px;
}
@media (max-width: 860px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--ink-band-2); padding: 18px 20px 17px; }
.kpi .label {
  font: 600 10.5px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-2);
}
.kpi .value {
  font: 700 30px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: -.02em; color: var(--on-ink); margin: 7px 0 5px;
}
.kpi .sub { font-size: 12.5px; color: var(--on-ink-2); line-height: 1.45; }

/* ---- a chapter heading with a number, for the evidence sequence ---- */
.chapter {
  display: grid; grid-template-columns: 56px 1fr; gap: 6px 18px;
  align-items: baseline; margin: 72px 0 18px;
  padding-top: 22px; border-top: 1px solid var(--rule);
}
.chapter .n {
  font: 700 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--gold); letter-spacing: .08em;
}
.chapter h2 { margin: 0; font-size: 27px; line-height: 1.15; letter-spacing: -.012em; }
.chapter p { grid-column: 2; margin: 4px 0 0; color: var(--ink-2); max-width: 70ch; }

/* ---- chart cards ---- */
.chart-card {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 20px 22px 14px;
  margin: 0 0 18px;
}
.chart-card h3 {
  margin: 0 0 2px;
  font: 600 15px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
}
.chart-card .cap { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-3); max-width: 76ch; }
.chart-card .takeaway {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rule-soft);
  font-size: 14px; color: var(--ink-2);
}
.chart-card .takeaway b { color: var(--ink); }
.chart-pair {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px;
}
@media (max-width: 860px) { .chart-pair { grid-template-columns: 1fr; } }
.viz { display: block; overflow: visible; }

/* ---- tooltip ---- */
.viz-tip {
  position: absolute; z-index: 50; pointer-events: none;
  background: var(--ink-band); color: var(--on-ink);
  font: 12.5px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  padding: 8px 11px; border-radius: 3px; max-width: 260px;
  box-shadow: 0 6px 22px rgba(30,26,21,.22);
  font-variant-numeric: tabular-nums;
}
.viz-tip .dim { color: var(--on-ink-2); }

/* ---- table view behind every chart ---- */
.viz-table { margin-top: 8px; }
.viz-table summary {
  cursor: pointer; font-size: 12px; color: var(--ink-3);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  list-style: none; display: inline-block; padding: 2px 0;
}
.viz-table summary::-webkit-details-marker { display: none; }
.viz-table summary::before { content: "+ "; color: var(--gold); }
.viz-table[open] summary::before { content: "\2212 "; }
.viz-table table { margin-top: 8px; font-size: 12.5px; }
.viz-table caption { text-align: left; font-size: 11px; color: var(--ink-3); padding-bottom: 4px; }
.viz-table th.r, .viz-table td.r { text-align: right; }

/* ---- the graveyard: rejected ideas, listed rather than counted ---- */
.graveyard {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft);
}
.grave { background: var(--card); padding: 13px 15px 12px; }
.grave .idea {
  font: 600 13.5px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
}
.grave .idea::before {
  content: ""; display: inline-block; width: 7px; height: 7px;
  border: 1.5px solid var(--ink-3); transform: rotate(45deg);
  margin: 0 9px 1px 0; vertical-align: middle;
}
.grave .why { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.grave .src {
  font: 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-3); margin-top: 5px; letter-spacing: .02em;
}

/* ---- a quiet verdict line under a hero ---- */
.verdict {
  margin-top: 22px; font-size: 13.5px; color: var(--on-ink-2); max-width: 78ch;
  border-top: 1px solid rgba(244,238,227,.10); padding-top: 14px;
}
.verdict b { color: var(--on-ink); font-weight: 600; }

@media print {
  .hero-band { background: none; color: var(--ink); }
  .viz-table { display: none; }
}