:root { color-scheme: light; --paper: #f7f5ef; --ink: #242d29; --muted: #505b54; --accent: #24553f; --line: #bdc5bc; --notice: #e8e1cc; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1.0625rem/1.7 Georgia, 'Times New Roman', serif; }
.shell { width: min(100% - 3rem, 72rem); margin-inline: auto; }
a { color: var(--accent); text-underline-offset: .22em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: .15em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.skip { position: absolute; top: -10rem; left: 1rem; padding: .75rem 1rem; background: white; z-index: 2; }
.skip:focus { top: .5rem; }
.draft { margin: 0; padding: .75rem 1rem; text-align: center; background: var(--notice); font: bold .875rem/1.5 Arial, sans-serif; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.8rem; border-bottom: 1px solid var(--line); }
.brand { font-size: 1.5rem; text-decoration: none; color: var(--ink); }
.brand span { font: .75rem Arial, sans-serif; letter-spacing: .15em; }
nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font: .95rem Arial, sans-serif; }
nav a { display: inline-flex; min-height: 44px; align-items: center; padding: .5rem .25rem; }
nav a[aria-current] { font-weight: bold; }
main { padding-block: 4.5rem 2rem; }
.eyebrow { font: bold .75rem/1.7 Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
h1 { font-weight: normal; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.08; letter-spacing: -.035em; margin: 1.2rem 0 2rem; max-width: 18ch; }
.lead { max-width: 48rem; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.65; margin-bottom: 3.5rem; }
.chapter { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; padding-block: 2rem; border-top: 1px solid var(--line); }
h2 { font-size: 1.45rem; font-weight: normal; line-height: 1.3; margin: .35rem 0; }
h3 { font: bold 1rem/1.5 Arial, sans-serif; margin: .4rem 0; }
p { margin: .35rem 0 1.25rem; }
.chapter div { max-width: 66ch; }
footer { border-top: 1px solid var(--line); padding-block: 2rem; font: .9rem/1.7 Arial, sans-serif; }
footer a { display: inline-flex; align-items: center; min-height: 44px; }
.fine { color: var(--muted); margin-top: .75rem; }
@media (max-width: 42rem) { .shell { width: min(100% - 2rem, 72rem); } header { align-items: flex-start; flex-direction: column; gap: .5rem; padding-block: 1rem; } main { padding-top: 2.5rem; } .chapter { grid-template-columns: 1fr; gap: .8rem; } h1 { font-size: clamp(2.3rem, 10vw, 3.7rem); } }
@media print { .shell { width: 100%; } body { font-size: 12pt; background: white; } .skip { display: none; } .chapter { break-inside: avoid; } }