/* ═══════════════════════════════════════════════════════════════
 * State of Materials — “The Assay Ledger” · site styles
 * Light = the plate · Dark = the negative
 * ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --page: #f4f1ea; --surface: #f7f4ed; --recessed: #ece8dd;
  --ink: #1c1a17; --ink-secondary: #55524b; --ink-muted: #8a857a;
  --hairline: #d8d3c6; --rule-strong: #b3ad9f;
  --accent: #2f6aa8; --accent-deep: #1f4a77; --accent-wash: rgba(47,106,168,.10);
  --shadow-tooltip: 0 2px 8px rgba(28,26,23,.12);
  --grain-op: .115;
  --series-1:#2f6aa8; --series-2:#c04e2e; --series-3:#17916e; --series-4:#c28a18;
  --series-5:#6d4fa8; --series-6:#d0709e; --series-7:#3c7a1a; --series-8:#8f3550;
  --series-other: var(--ink-muted);
  --seq-1:#dce7f2; --seq-2:#b7cde6; --seq-3:#8fb2d8; --seq-4:#6795c4; --seq-5:#4a7cb0;
  --seq-6:#2f6aa8; --seq-7:#24557f; --seq-8:#1a4160; --seq-9:#122f47;
  --div-mid: #e6e2d7;
  --status-good:#256d25; --status-warning:#a8720a; --status-serious:#b04a1e; --status-critical:#a02525;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --t-hover: 120ms ease-out; --t-reveal: 450ms ease-out; --t-draw: 600ms ease-in-out;
  --grain-url: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='280'%20height='280'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.18%200%200%200%200%20.16%200%200%200%200%20.12%200%200%200%201.1%200'/%3E%3C/filter%3E%3Crect%20width='280'%20height='280'%20filter='url(%23n)'/%3E%3C/svg%3E");
  --fleck-url: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='340'%20height='340'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.28'%20numOctaves='3'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.22%200%200%200%200%20.19%200%200%200%200%20.14%200%200%200%2014%20-9.8'/%3E%3C/filter%3E%3Crect%20width='340'%20height='340'%20filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:#141311; --surface:#1c1b18; --recessed:#211f1c;
    --ink:#ece8dd; --ink-secondary:#b0aba0; --ink-muted:#7d786e;
    --hairline:#2e2c27; --rule-strong:#4a463f;
    --accent:#5c8fc7; --accent-deep:#7fa8d6; --accent-wash:rgba(92,143,199,.14);
    --shadow-tooltip: 0 2px 10px rgba(0,0,0,.5);
    --grain-op:.15;
    --series-1:#5c8fc7; --series-2:#d96a45; --series-3:#29a077; --series-4:#b5850e;
    --series-5:#7a5ec7; --series-6:#cc6f9c; --series-7:#5c9c33; --series-8:#b55070;
    --seq-1:#202b36; --seq-2:#24384c; --seq-3:#294663; --seq-4:#2f557a; --seq-5:#396792;
    --seq-6:#4a7cb0; --seq-7:#6795c4; --seq-8:#8fb2d8; --seq-9:#a9c9e8;
    --div-mid:#35332e;
    --grain-url: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='280'%20height='280'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.93%200%200%200%200%20.90%200%200%200%200%20.82%200%200%200%20.9%200'/%3E%3C/filter%3E%3Crect%20width='280'%20height='280'%20filter='url(%23n)'/%3E%3C/svg%3E");
    --fleck-url: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='340'%20height='340'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.28'%20numOctaves='3'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.96%200%200%200%200%20.94%200%200%200%200%20.88%200%200%200%2014%20-10.1'/%3E%3C/filter%3E%3Crect%20width='340'%20height='340'%20filter='url(%23n)'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:#141311; --surface:#1c1b18; --recessed:#211f1c;
  --ink:#ece8dd; --ink-secondary:#b0aba0; --ink-muted:#7d786e;
  --hairline:#2e2c27; --rule-strong:#4a463f;
  --accent:#5c8fc7; --accent-deep:#7fa8d6; --accent-wash:rgba(92,143,199,.14);
  --shadow-tooltip: 0 2px 10px rgba(0,0,0,.5);
  --grain-op:.15;
  --series-1:#5c8fc7; --series-2:#d96a45; --series-3:#29a077; --series-4:#b5850e;
  --series-5:#7a5ec7; --series-6:#cc6f9c; --series-7:#5c9c33; --series-8:#b55070;
  --seq-1:#202b36; --seq-2:#24384c; --seq-3:#294663; --seq-4:#2f557a; --seq-5:#396792;
  --seq-6:#4a7cb0; --seq-7:#6795c4; --seq-8:#8fb2d8; --seq-9:#a9c9e8;
  --div-mid:#35332e;
  --grain-url: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='280'%20height='280'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.93%200%200%200%200%20.90%200%200%200%200%20.82%200%200%200%20.9%200'/%3E%3C/filter%3E%3Crect%20width='280'%20height='280'%20filter='url(%23n)'/%3E%3C/svg%3E");
  --fleck-url: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='340'%20height='340'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.28'%20numOctaves='3'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.96%200%200%200%200%20.94%200%200%200%200%20.88%200%200%200%2014%20-10.1'/%3E%3C/filter%3E%3Crect%20width='340'%20height='340'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Base ── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  visibility: visible; /* lifts the index.html pre-load curtain */
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 1.16rem/1.6 var(--font-serif);
  transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--grain-op);
  background-image: var(--fleck-url), var(--grain-url);
}
main { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 max(6vw, 24px) 96px; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
.mono, .label { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; }
.label { font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.muted { color: var(--ink-muted); }
.sec { color: var(--ink-secondary); }

/* ── Password gate ── */
#gate {
  position: relative; z-index: 1; min-height: 100svh;
  display: grid; place-items: center; padding: 24px;
}
#gate[hidden] { display: none; }
.gate-card { max-width: 420px; width: 100%; text-align: center; }
.gate-card canvas { width: 200px; height: 200px; image-rendering: pixelated; margin: 0 auto 32px; display: block; }
.gate-card h1 { font: italic 400 2.6rem/1.1 var(--font-serif); margin: 0 0 8px; }
.gate-card p { color: var(--ink-secondary); font-size: 1.05rem; margin: 0 0 32px; }
.gate-form { display: flex; gap: 10px; justify-content: center; }
.gate-form input {
  flex: 1; max-width: 260px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 2px; padding: 11px 14px;
  font: 400 .9rem/1 var(--font-mono); letter-spacing: .06em;
}
.gate-form input::placeholder { color: var(--ink-muted); }
.gate-form button {
  cursor: pointer; background: var(--surface); color: var(--ink-secondary);
  border: 1px solid var(--hairline); border-radius: 2px; padding: 11px 18px;
  font: 500 .72rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover);
}
.gate-form button:hover { background: var(--accent-wash); color: var(--accent-deep); border-color: var(--accent); }
.gate-err { font: 400 .78rem/1.5 var(--font-mono); color: var(--status-critical); min-height: 1.4em; margin-top: 14px; }
.gate-foot { margin-top: 48px; }

/* ── Ruler nav ── */
nav.ruler {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
  padding: 0 max(6vw, 24px);
}
.ruler-inner { max-width: 1280px; margin: 0 auto; }
.ruler-track { position: relative; height: 2px; background: var(--hairline); margin-top: 12px; }
.ruler-progress { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--accent); }
.ruler-stops { display: flex; justify-content: space-between; padding: 0 0 8px; }
.ruler-stop {
  appearance: none; background: none; border: none; cursor: pointer; padding: 7px 2px 0;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted);
  position: relative; transition: color var(--t-hover); white-space: nowrap;
}
.ruler-stop::before {
  content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 7px; background: var(--rule-strong); transition: background var(--t-hover);
}
.ruler-stop:hover { color: var(--ink); }
.ruler-stop.active { color: var(--accent); }
.ruler-stop.active::before { background: var(--accent); width: 2px; }
.ruler-mobile { display: none; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-secondary); padding: 8px 0 10px; }
@media (max-width: 1100px) {
  .ruler-stops { display: none; }
  .ruler-mobile { display: block; }
}

/* ── Masthead ── */
header.masthead { padding: 80px 0 64px; border-bottom: 1px solid var(--rule-strong); }
.mast-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
#orb { width: 340px; height: 340px; image-rendering: pixelated; justify-self: end; }
@media (max-width: 900px) { .mast-grid { grid-template-columns: 1fr; } #orb { width: 210px; height: 210px; justify-self: start; } }
.masthead .label { color: var(--accent); margin-bottom: 24px; }
.masthead h1 { font-style: italic; font-size: clamp(3rem, 6.2vw, 4.6rem); font-weight: 400; line-height: 1.05; margin: 0 0 24px; }
.masthead p.lede { font: 400 1.32rem/1.55 var(--font-serif); color: var(--ink-secondary); max-width: 62ch; margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; margin-top: 56px; }
.tile { border-top: 1px solid var(--rule-strong); padding-top: 12px; }
.tile .num { font: 400 2.9rem/1 var(--font-serif); }
.tile .num.hot { color: var(--accent); }
.tile .desc { font: 400 1.02rem/1.4 var(--font-serif); color: var(--ink-secondary); margin-top: 6px; }

/* ── Chapter grid + sticky emblem rail ── */
.chapter-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px 64px; align-items: start; }
.chapter-main { min-width: 0; }
.rail { position: sticky; top: 96px; display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 8px; }
canvas.emblem { width: 300px; height: 300px; image-rendering: pixelated; }
.rail-fig { text-align: center; }
.rail-fig .num { font: 400 2.4rem/1.1 var(--font-serif); }
.rail-fig .desc { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); margin-top: 6px; }
.rail.rail-small canvas.emblem { width: 220px; height: 220px; }
@media (max-width: 980px) {
  .chapter-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; flex-direction: row; justify-content: flex-start; gap: 32px; padding: 8px 0 0; }
  canvas.emblem, .rail.rail-small canvas.emblem { width: 170px; height: 170px; }
  .rail-fig { text-align: left; }
}

/* ── Sections & chapters ── */
section { padding-top: 88px; }
.sect-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.sect-head .no { font-family: var(--font-mono); font-size: .85rem; color: var(--ink-muted); font-variant-numeric: lining-nums; }
.sect-head h2 { font-style: italic; font-size: clamp(2.2rem, 4.2vw, 2.9rem); font-weight: 400; margin: 0; }
.takeaway { border-left: 2px solid var(--accent); padding: 4px 0 4px 24px; margin: 24px 0 32px; max-width: 65ch; }
.takeaway .label { color: var(--accent); margin-bottom: 8px; }
.takeaway p { font: 400 1.32rem/1.55 var(--font-serif); margin: 0; }
.prose { max-width: 65ch; }
.prose p { margin: 0 0 1.1em; color: var(--ink); }
.divider { border: none; border-top: 2px solid var(--rule-strong); width: 96px; margin: 88px auto 0; }
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-reveal), transform var(--t-reveal); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; transform: none; }
  .bar-fill, .seg { transition: none !important; }
}

/* ── Contents grid ── */
.contents-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; margin-top: 48px; }
@media (max-width: 1000px) { .contents-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .contents-grid { grid-template-columns: 1fr; } }
.contents-item { text-decoration: none; color: var(--ink); display: block; }
.contents-item .no { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-muted); letter-spacing: .08em; }
.contents-item .name {
  font: italic 400 1.5rem/1.2 var(--font-serif); margin: 4px 0 8px;
  border-bottom: 1px solid transparent; display: inline-block; transition: border-color var(--t-hover), color var(--t-hover);
}
.contents-item:hover .name { color: var(--accent); border-color: var(--accent); }
.contents-item .mini { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-secondary); letter-spacing: .04em; }

/* ── Chips, tags ── */
.chip {
  appearance: none; cursor: pointer;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  color: var(--ink-secondary); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 2px; padding: 9px 14px;
  transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover);
  font-variant-numeric: lining-nums;
}
.chip:hover { background: var(--accent-wash); color: var(--accent-deep); }
.chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { display: inline-flex; gap: 8px; align-items: baseline; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-secondary); border: 1px solid var(--hairline); border-radius: 2px; padding: 5px 10px; background: var(--surface); }
.tag b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }

/* ── Tables ── */
table.ledger { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
table.ledger th { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--rule-strong); }
table.ledger td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.ledger td.n { font-family: var(--font-mono); font-size: .85rem; font-variant-numeric: tabular-nums lining-nums; text-align: right; color: var(--ink-secondary); white-space: nowrap; }
table.ledger th.n { text-align: right; }
.table-scroll { overflow-x: auto; }
.foot { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-muted); margin-top: 16px; }
.foot::before { content: "↳ "; }

/* ── Figures ── */
figure.fig { margin: 40px 0 48px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 2px; padding: 28px 28px 20px; }
.fig-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.fig-head .label { color: var(--ink-muted); }
figcaption { font-family: var(--font-serif); font-size: 1.02rem; color: var(--ink-secondary); margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--hairline); }
figcaption .fig-no { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-right: 10px; font-variant-numeric: lining-nums; }
.fig[data-view="table"] .fig-plot { display: none; }
.fig-table { display: none; }
.fig[data-view="table"] .fig-table { display: block; }

/* bars */
.barchart { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; align-items: center; }
.barchart .rlab { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-secondary); text-align: right; }
.bar-track { position: relative; height: 20px; }
.bar-fill { height: 100%; width: 0; background: var(--series-1); border-radius: 0 4px 4px 0; transition: width var(--t-draw); position: relative; }
.bar-track:hover .bar-fill { filter: brightness(1.12); }
.bar-val { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: .72rem; color: var(--ink-muted); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* stacked */
.stackchart { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; align-items: center; }
.stackchart .rlab { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-secondary); text-align: right; }
.stack-track { display: flex; gap: 2px; height: 20px; }
.seg { border-radius: 1px; transition: filter var(--t-hover); min-width: 0; }
.seg:hover { filter: brightness(1.15); }
.seg:first-child { border-radius: 4px 1px 1px 4px; }
.seg:last-child { border-radius: 1px 4px 4px 1px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; color: var(--ink-secondary); }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* dumbbell / range strip — min/max as fixed mono columns flanking the track */
.rangechart { display: grid; grid-template-columns: max-content max-content 1fr max-content; gap: 10px 12px; align-items: center; }
.rangechart .rlab { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-secondary); text-align: right; }
.range-minv, .range-maxv { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-muted); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.range-minv { text-align: right; }
.range-track { position: relative; height: 22px; }
.range-axis { position: absolute; inset: 50% 0 auto 0; height: 1px; background: var(--hairline); }
.range-zero { position: absolute; top: 2px; bottom: 2px; width: 1px; background: var(--rule-strong); }
.range-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 8px; background: var(--series-1); border-radius: 4px; min-width: 8px; transition: filter var(--t-hover); }
.range-track:hover .range-bar { filter: brightness(1.15); }
.axis-strip { position: relative; height: 18px; font-family: var(--font-mono); font-size: .66rem; color: var(--ink-muted); }
.axis-strip span { position: absolute; transform: translateX(-50%); top: 2px; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.axis-strip span.tick-first { transform: none; }
.axis-strip span.tick-last { transform: translateX(-100%); }

/* heatmap */
.heatmap { display: grid; gap: 2px; min-width: 720px; }
.hm-cell { height: 30px; border-radius: 1px; outline: 2px solid transparent; outline-offset: -1px; transition: outline-color var(--t-hover); cursor: default; }
.hm-cell:hover { outline-color: var(--ink); }
.hm-collab { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); text-align: center; align-self: end; padding: 0 3px 6px; line-height: 1.5; }
.hm-rowlab { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-secondary); text-align: right; padding-right: 12px; align-self: center; white-space: nowrap; }
.hm-scale { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-muted); font-variant-numeric: lining-nums; }
.hm-scale .ramp { display: flex; gap: 2px; flex: 0 0 160px; }
.hm-scale .ramp div { height: 12px; flex: 1; border-radius: 1px; }

/* stat row inside chapters */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; margin: 32px 0; }
.stat-row .tile .num { font-size: 2.2rem; }

/* extremes callouts */
.extremes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 32px 0; }
.extreme { background: var(--surface); border: 1px solid var(--hairline); border-radius: 2px; padding: 14px 16px; }
.extreme .label { color: var(--ink-muted); margin-bottom: 6px; }
.extreme .val { font: 400 1.5rem/1.1 var(--font-serif); }
.extreme .part { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-secondary); margin-top: 6px; line-height: 1.5; }

/* ledger explorer */
.explorer-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 24px 0 8px; }
.explorer-controls input[type="search"] {
  background: var(--surface); color: var(--ink); border: 1px solid var(--hairline);
  border-radius: 2px; padding: 9px 12px; font: 400 .8rem/1 var(--font-mono);
  min-width: 200px;
}
.explorer-controls select {
  background: var(--surface); color: var(--ink-secondary); border: 1px solid var(--hairline);
  border-radius: 2px; padding: 9px 10px; font: 500 .72rem/1 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.explorer-count { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-muted); letter-spacing: .05em; margin-left: auto; }
#explorer-table td { font-size: .95rem; }
#explorer-table .cls-tick { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: baseline; }
.explorer-more { margin-top: 16px; }

/* commercialization table */
.wedge-table td, .wedge-table th { font-size: .98rem; }
.wedge-table td:first-child { font-style: normal; }

/* tooltip */
#tooltip {
  position: fixed; z-index: 100; pointer-events: none; opacity: 0;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 2px;
  box-shadow: var(--shadow-tooltip); padding: 10px 12px; max-width: 280px;
  transition: opacity var(--t-hover);
}
#tooltip .tt-title { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; }
#tooltip .tt-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .85rem; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
#tooltip .tt-tick { width: 2px; height: 10px; flex: none; }

/* colophon / footer */
footer.colophon { margin-top: 88px; padding-top: 24px; border-top: 1px solid var(--rule-strong); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ── Small screens & vertical browsers ── */
@media (max-width: 700px) {
  main { padding-bottom: 64px; }
  section { padding-top: 64px; }
  header.masthead { padding: 48px 0 48px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; margin-top: 40px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .extremes { grid-template-columns: repeat(2, 1fr); }
  figure.fig { padding: 16px 14px 12px; margin: 32px 0 40px; }
  .barchart, .stackchart, .rangechart { column-gap: 10px; }
  .barchart .rlab, .stackchart .rlab, .rangechart .rlab {
    max-width: 88px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: .6rem;
  }
  .range-minv, .range-maxv { font-size: .58rem; }
  .bar-val { font-size: .62rem; }
  .hide-sm { display: none; }
  table.ledger { font-size: .85rem; }
  table.ledger td, table.ledger th { padding: 8px 8px; }
  .explorer-controls input[type="search"] { flex: 1 1 100%; min-width: 0; }
  .explorer-controls select { flex: 1 1 45%; min-width: 0; }
  .explorer-count { flex-basis: 100%; margin-left: 0; }
  .takeaway { padding-left: 16px; }
  .contents-grid { gap: 28px 20px; }
  .divider { margin-top: 64px; }
}
@media (min-width: 701px) and (max-width: 980px) {
  .hide-sm { display: revert; }
}