/* Layout: one reading column for the story, plates break wider for renders,
   figures and graph captures. Accent = the copper of the one fundamental triangle. */
:root{--room:#F7F5F4;--panel:#EEEBE8;--panel2:#E6E2DE;--stone:#F7F5F4;--stone2:#EEEBE8;--stone3:#E6E2DE;--line:#D9D5D1;--ink:#121212;--mute:#6B6866;--dim:#8A8785;--black:#121212;--phosphor:#D74B3B;--phos-deep:#F3D3CE;--amber:#D74B3B;--walnut:#D74B3B;--bad:#D74B3B;--terra:#D74B3B;--ochre:#D74B3B;--verd:#121212;--bg:#F7F5F4;--fg:#121212;--muted:#6B6866;--rule:#D9D5D1;--accent:#D74B3B;--plate:#121212;--display:var(--sans);--body:var(--sans);--mono:var(--sans);color-scheme:light}


body {
  background: var(--bg); color: var(--fg);
  font: 400 1.0625rem/1.65 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 4rem;
}
main { display: flex; flex-direction: column; align-items: center; gap: 0; }
.col { width: 100%; max-width: 40rem; }
.wide { width: 100%; max-width: 72rem; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.6rem, 8vw, 5.4rem); line-height: 1.02; letter-spacing: -0.01em; }
h1 em { font-style: italic; color: var(--accent); }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.6rem); line-height: 1.1; }
h3 { font-size: 1.35rem; line-height: 1.25; }
p { margin: 0; }
.eyebrow { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 1.1rem; }
section { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2rem; padding-block: 4.5rem 0; }
section + section { border-top: 1px solid var(--rule); margin-top: 4.5rem; }

header { width: 100%; max-width: 72rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: center; padding-block: 3.5rem 0; }
header .lede { font-size: 1.2rem; line-height: 1.55; color: var(--muted); }
header .meta { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.2rem; font: 400 0.82rem/1.5 var(--mono); color: var(--muted); padding-top: 1.2rem; border-top: 1px solid var(--rule); }
header .meta dt { color: var(--fg); }
header .meta dd { margin: 0; }
@media (max-width: 820px) { header { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

figure { margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
figure img { display: block; width: 100%; height: auto; max-width: 100%; }
figcaption { font: 400 0.82rem/1.55 var(--mono); color: var(--muted); max-width: 46rem; }
figcaption b { color: var(--fg); font-weight: 500; }
.plate { background: var(--plate); }
.hero-img { box-shadow: 0 30px 60px -30px rgba(0,0,0,0.55); }

.eq { font: italic 1.3rem/1.5 var(--math); text-align: center; padding: 1.1rem 1rem; background: var(--panel); border-left: 3px solid var(--accent); overflow-x: auto; }
.eq .n { font-style: normal; }
.eq small { display: block; font: 400 0.75rem/1.4 var(--mono); color: var(--muted); font-style: normal; margin-top: 0.35rem; }
code, .num { font-family: var(--mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }
.k { color: var(--accent); }

.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.step.flip > figure { order: -1; }
.step .num-tag { font: 500 0.78rem/1 var(--mono); color: var(--accent); letter-spacing: 0.1em; }
@media (max-width: 820px) { .step { grid-template-columns: minmax(0, 1fr); } .step.flip > figure { order: 0; } }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .pair, .trio { grid-template-columns: minmax(0, 1fr); } }

.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--rule); }
.counts div { padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.counts div + div { border-left: 1px solid var(--rule); }
.counts b { font: 400 clamp(1.8rem, 4vw, 2.6rem)/1 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.counts span { font: 400 0.78rem/1.4 var(--mono); color: var(--muted); }
@media (max-width: 700px) { .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .counts div:nth-child(3) { border-left: 0; } .counts div:nth-child(n+3) { border-top: 1px solid var(--rule); } }

.depth { display: flex; flex-direction: column; gap: 3rem; }
.depth figure { gap: 0.9rem; }
.depth .lvl { font: 500 0.75rem/1 var(--mono); color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; }

.verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.verdict > div { background: var(--bg); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.verdict ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
@media (max-width: 700px) { .verdict { grid-template-columns: minmax(0, 1fr); } }

table { border-collapse: collapse; width: 100%; font: 400 0.85rem/1.5 var(--mono); }
.tbl { overflow-x: auto; }
th, td { text-align: left; padding: 0.55rem 0.8rem 0.55rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--muted); font-weight: 500; }
td:first-child { white-space: nowrap; }
footer { width: 100%; max-width: 40rem; margin-top: 4.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font: 400 0.82rem/1.6 var(--mono); color: var(--muted); }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }