body { margin: 0; background: var(--canvas); color: var(--text); font: 1rem/1.7 var(--font-body); }
header, main, footer { max-width: 52rem; margin-inline: auto; padding: 1.5rem; }
header { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; border-bottom: 1px solid var(--line); }
h1, h2 { color: var(--heading); line-height: 1.2; }
h1 { font: 3rem/1.1 var(--font-serif); margin: 0.5rem 0; }
h2 { font: 1.4rem/1.3 var(--font-sans); }
a { color: var(--warm); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
a:focus-visible { outline: 2px solid var(--warm); outline-offset: 4px; }
.eyebrow, .review-label, footer { color: var(--text-muted); }
.eyebrow { font: 0.85rem/1.5 var(--font-sans); }
nav { margin-block: 2rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); }
section { border-top: 1px solid var(--line); padding-block: 1rem; scroll-margin-top: 1rem; }
li { margin-bottom: 0.6rem; }
dt { font-weight: 500; margin-top: 1rem; }
dd { margin-left: 0; }
.skip-link { position: absolute; top: -10rem; left: 1rem; background: var(--surface); padding: 0.75rem; }
.skip-link:focus { top: 1rem; }
@media (max-width: 400px) { h1 { font-size: 2.5rem; } header, main, footer { padding: 1rem; } ol { padding-left: 1.4rem; } }
@media print { html { color-scheme: light; } body { background: var(--doc-bg); color: var(--doc-text); } h1, h2 { color: var(--doc-text); } a { color: var(--doc-text); } .eyebrow, .review-label, footer { color: var(--doc-text-meta); } header, nav, .skip-link { display: none; } main, footer { max-width: none; padding: 0; } h2 { break-after: avoid; } }