/* Triage — a thermal receipt. Warm newsprint around a white receipt column with torn
   zigzag edges, Courier Prime print, a red DRY RUN stamp; Onest for longer reading. */

:root {
  --page-bg: #efece3;
  --page-text: #232220;
  --page-muted: #5f5c55;
  --page-line: #d9d4c6;
  --page-accent: #b4321f;
  --page-ui: "Onest", system-ui, sans-serif;
  --display: "Courier Prime", ui-monospace, monospace;
  --mono: "Courier Prime", ui-monospace, monospace;
  --surface: #fffefb;
  --raise: #f3f0e8;
  --code-bg: #f3f0e8;
  --code-text: #2a2824;
  --strong: #141412;
  --k-ink: #232220; --k-accent: #b4321f; --k-a: #b06a1f; --k-b: #2f6f8f; --k-c: #2f7d4a;
  --k-d: #6a4fa0; --k-ok: #2f7d4a; --k-warn: #b07d12; --k-err: #b4321f; --k-muted: #8f8a7e; --k-file: #6a665c;
  color-scheme: light;
}

.receipt {
  position: relative; max-width: 760px; padding: 34px 34px 30px; background: var(--surface);
  box-shadow: 0 18px 40px -26px #23222066;
  -webkit-mask: radial-gradient(9px 6px at 50% 0, #0000 98%, #000) 50% 0 / 18px 51% repeat-x,
                radial-gradient(9px 6px at 50% 100%, #0000 98%, #000) 50% 100% / 18px 51% repeat-x;
          mask: radial-gradient(9px 6px at 50% 0, #0000 98%, #000) 50% 0 / 18px 51% repeat-x,
                radial-gradient(9px 6px at 50% 100%, #0000 98%, #000) 50% 100% / 18px 51% repeat-x;
}
.hero h1 { font: 700 clamp(38px, 5.4vw, 70px)/1.02 var(--display); letter-spacing: -0.02em; }
.stamp {
  position: absolute; right: 30px; top: 46px; margin: 0; padding: 6px 12px; transform: rotate(8deg);
  font: 700 18px/1 var(--display); letter-spacing: 0.12em; color: var(--page-accent);
  border: 3px solid var(--page-accent); border-radius: 4px; opacity: 0.85;
}
.part > h2 { font: 700 clamp(26px, 3.2vw, 38px)/1.12 var(--display); }
.part > h2::before { content: "— "; color: var(--page-accent); }
pre code { font-size: 14px; }
.fig { padding: 18px; background: var(--surface); border: 1px dashed #c9c3b3; }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
.dg text { font-family: var(--page-ui); }
table { background: var(--surface); border: 1px dashed #c9c3b3; }
tbody th { font: 700 18px/1 var(--display); color: var(--page-accent); width: 3em; }
@media (max-width: 640px) { .receipt { padding: 26px 18px; } .stamp { position: static; display: inline-block; margin-top: 10px; } }