/* inner pages (docs, stats, log, 404): the ink strip on top, one reading column on the steel grid, a stencilled rail */
body:not(.home) { background: var(--steel); background-image: linear-gradient(rgba(13, 15, 18, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 15, 18, .06) 1px, transparent 1px); background-size: 24px 24px; }
.page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; max-width: 1280px; margin: 0 auto; padding: 56px var(--gut) 96px; }
.page-rail { position: sticky; top: calc(var(--strip-h) + 24px); align-self: start; display: grid; border: 2px solid var(--ink); background: var(--white); }
.page-rail a { font: 600 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink2); padding: 10px 12px; border-top: 1px solid var(--line); transition: background var(--fast), color var(--fast); }
.page-rail a:first-child { border-top: 0; }
.page-rail a:hover { background: var(--ink); color: #fff; }
.doc { min-width: 0; max-width: 820px; background: var(--white); border: 3px solid var(--ink); padding: clamp(24px, 4vw, 52px); }
.doc .eyebrow { margin: 0 0 14px; }
.doc h1 { margin: 0; font: 900 clamp(48px, 7vw, 96px)/.84 var(--disp); font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase; }
.doc .lede { font: 500 19px/1.45 var(--sans); color: var(--ink2); margin: 22px 0 0; max-width: 54ch; }
.doc h2 { margin: 64px 0 16px; padding-bottom: 12px; font: 900 34px/.95 var(--disp); font-stretch: 125%; letter-spacing: -.025em; text-transform: uppercase; border-bottom: 3px solid var(--ink); }
.doc h3 { display: flex; align-items: center; gap: 8px; margin: 30px 0 10px; font: 700 11.5px/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.doc h3::before { content: ""; width: 9px; height: 9px; background: var(--signal); flex: none; }
.doc p, .doc li { color: var(--ink); max-width: 70ch; }
.doc li + li { margin-top: 6px; }
.doc strong { color: var(--ink); font-weight: 700; }
.doc code { font: 500 .8em var(--mono); color: var(--ink); background: var(--plate); padding: 1px 5px; }
.doc a { color: var(--cobalt); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.tbl { width: 100%; border-collapse: collapse; margin: 16px 0 8px; font-size: 14.5px; border: 2px solid var(--ink); }
.tbl th { text-align: left; font: 500 10px/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink); background: var(--ink); padding: 10px 12px; vertical-align: bottom; }
.tbl td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.tbl td.m, .tbl .m { font: 600 12px var(--mono); color: var(--ink); white-space: nowrap; }
.tbl-wrap { overflow-x: auto; }
.formula { font: 500 12.5px/1.8 var(--mono); color: var(--on-ink); background: var(--ink); border-left: 8px solid var(--cobalt); padding: 16px 18px; margin: 14px 0; overflow-x: auto; white-space: pre; }
.slipbox { background: var(--plate); color: var(--ink); border: 2px solid var(--ink); padding: 20px 22px; margin: 22px 0; font: 500 12.5px/1.8 var(--mono); }
.slipbox b { font-weight: 700; }
.cans { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); margin-top: 14px; background: var(--white); }
.cans > div { padding: 16px 18px; }
.cans > div + div { border-left: 2px solid var(--ink); }
.cans h3 { margin-top: 0; }
.cans ul { margin: 0; padding-left: 18px; }
.kill { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 26px 28px; margin-top: 36px; background: var(--ink); color: #fff; }
.kill b { font: 900 clamp(110px, 15vw, 190px)/.78 var(--disp); font-stretch: 125%; color: var(--signal); }
.kill span { font: 900 clamp(26px, 3vw, 38px)/1 var(--disp); font-stretch: 118%; text-transform: uppercase; }
.kill small { display: block; margin-top: 12px; font: 500 11.5px/1.6 var(--mono); text-transform: none; color: var(--on-ink2); }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--ink); margin-top: 24px; gap: 2px; background: var(--ink); }
.statgrid div { padding: 16px 16px 18px; background: var(--white); }
.statgrid dt { font: 500 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.statgrid dd { margin: 12px 0 0; font: 900 38px/1 var(--disp); font-stretch: 125%; letter-spacing: -.02em; color: var(--cobalt); }
.entry { margin-top: 44px; padding-top: 16px; border-top: 2px solid var(--ink); }
.entry h2 { margin: 10px 0 12px; padding: 0; border: 0; font-size: 26px; }
.foot { display: flex; gap: 26px; flex-wrap: wrap; padding: 28px var(--gut) 36px; background: var(--ink); border-top: 4px solid var(--cobalt); }
.foot a { font: 700 13px/1 var(--disp); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--on-ink); padding: 8px 0; }
.lost { min-height: calc(100svh - var(--strip-h)); display: grid; align-content: center; padding: 48px var(--pad); }
.lost .rig { max-width: 1100px; width: 100%; margin: 0 auto; }
.lost .scope { position: relative; height: clamp(160px, 22vw, 260px); background: var(--screen); border-bottom: 2px solid var(--ink); background-image: linear-gradient(rgba(238, 241, 244, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(238, 241, 244, .07) 1px, transparent 1px); background-size: 24px 24px; }
.lost .scope svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lost .copy { padding: clamp(22px, 3vw, 36px); }
.lost h1 { margin: 0; font: 900 clamp(64px, 12vw, 170px)/.8 var(--disp); font-stretch: 125%; letter-spacing: -.04em; text-transform: uppercase; }
.lost h1 span { color: var(--signal); }
.lost p { color: var(--ink2); font: 500 18px/1.45 var(--sans); margin: 18px 0 24px; max-width: 44ch; }
.lost p.stamp { display: inline-block; color: var(--ink); font: 700 11px/1 var(--mono); margin: 0 0 16px; }
@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; gap: 16px; padding-top: 28px; }
  .page-rail { position: static; display: flex; flex-wrap: wrap; }
  .page-rail a { border-top: 0; border-right: 1px solid var(--line); }
  .doc { padding: 22px 16px; }
  .doc h1 { font-size: clamp(34px, 10.6vw, 64px); }
  .doc h2 { font-size: 26px; }
  .cans { grid-template-columns: 1fr; }
  .cans > div + div { border-left: 0; border-top: 2px solid var(--ink); }
  .statgrid { grid-template-columns: 1fr 1fr; }
  .kill { grid-template-columns: 1fr; gap: 10px; }
}