/* Page grammar shared by every on-paper route. See docs/handoff-2026-09-05/08_DESIGN_GRAMMAR.md */
body{font-family:var(--font-body);font-size:var(--step-0);line-height:1.6;color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased}
a{color:var(--juniper);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
::selection{background:var(--juniper);color:var(--ground)}

h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(var(--step-4),6vw,var(--step-5));line-height:1.02;max-width:15ch}
h2{font-size:var(--step-3);line-height:1.12}
h3{font-size:var(--step-1);line-height:1.25;letter-spacing:-.02em}
h1 em,h2 em,h3 em{font-style:normal;color:inherit}
p{margin:0;max-width:66ch}
.lede{font-size:var(--step-1);line-height:1.55;color:var(--ink-2);max-width:60ch}

/* the only two label styles on the site */
.kicker{font-family:var(--font-mono);font-size:var(--step--1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);margin:0}
.col-label{font-family:var(--font-body);font-size:var(--step--1);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0}

/* shell */
.page{max-width:1260px;margin:0 auto;padding:var(--s8) var(--s5) var(--s9)}
@media(min-width:1080px){.page{padding:var(--s8) var(--s7) var(--s9)}}
.page-head{display:flex;flex-direction:column;gap:var(--s4);padding-bottom:var(--s7)}
.page-head .lede{margin-top:var(--s1)}
.page section{margin-bottom:var(--s9);scroll-margin-top:var(--s5)}
.page section:last-child{margin-bottom:0}
.sec-head{display:flex;flex-direction:column;gap:var(--s3);padding-bottom:var(--s4);border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
.stack{display:flex;flex-direction:column;gap:var(--s5)}

/* ledger row: label left, content right */
.ledger{display:grid;grid-template-columns:1fr;gap:var(--s4);padding:var(--s6) 0;border-top:1px solid var(--line)}
.ledger:first-of-type{border-top:0;padding-top:0}
@media(min-width:880px){.ledger{grid-template-columns:11.5rem minmax(0,1fr);gap:var(--s6)}}
.ledger-key{display:flex;flex-direction:column;gap:var(--s2)}
.ledger-key b{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--brass);font-weight:500}
.ledger-key span{font-size:var(--step--1);color:var(--muted);line-height:1.45}
.ledger-body{display:flex;flex-direction:column;gap:var(--s4);min-width:0}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);padding:var(--s4) var(--s5)}
.card-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(min-width:680px){.card-grid{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}}
.card-grid>*{background:var(--surface);padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s1)}
.card-grid b{font-size:var(--step--1);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--juniper)}
.card-grid span{font-size:var(--step--1);color:var(--ink-2);line-height:1.5}

/* callouts: tint + 2px rule in the colour of the meaning */
.callout{border-radius:2px;padding:var(--s3) var(--s4);font-size:var(--step--1);color:var(--ink-2);line-height:1.6;border-left:2px solid var(--juniper);background:var(--juniper-soft)}
.callout b{display:block;font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--juniper);margin-bottom:var(--s1);font-weight:500}
.callout--brass{border-left-color:var(--brass);background:var(--brass-soft)}.callout--brass b{color:var(--brass)}
.callout--water{border-left-color:var(--water);background:var(--water-soft)}.callout--water b{color:var(--water)}
.callout--crit{border-left-color:var(--crit);background:var(--crit-soft)}.callout--crit b{color:var(--crit)}

/* data */
.t-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-family:var(--font-data);font-size:var(--step--1)}
th,td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{font-family:var(--font-body);font-size:var(--step--1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--sunken);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.id{font-family:var(--font-mono);font-size:var(--step--1);white-space:nowrap}
.data{font-family:var(--font-data);font-variant-numeric:tabular-nums}