:root { color-scheme: light; --paper: #f3ead8; --ink: #1c2020; --cobalt: #214895; --amber: #d98b16; --muted: #616461; --line: #d8cdb8; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.shell { max-width: 960px; margin: 0 auto; padding: 10vh 7vw 12vh; }
.eyebrow { color: var(--cobalt); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
h1 { max-width: 760px; margin: 1rem 0; font: 800 clamp(2.6rem, 7vw, 5.4rem)/.98 Georgia, serif; letter-spacing: -.04em; }
.lede { max-width: 690px; color: var(--muted); font-size: clamp(1.15rem, 2.5vw, 1.45rem); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 4rem 0; }
article { border-top: 3px solid var(--cobalt); padding: 1rem 0; }
.number { color: var(--amber); font-weight: 800; }
h2 { margin: .55rem 0 .35rem; font-size: 1.35rem; }
article p, .prose p { color: var(--muted); }
.boundary { border-left: 4px solid var(--amber); padding-left: 1rem; color: var(--ink); }
nav { display: flex; gap: 1.25rem; margin-top: 3rem; }
a { color: var(--cobalt); font-weight: 700; }
.prose { max-width: 760px; }
.prose h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.prose h2 { margin-top: 2.2rem; }
.updated { font-size: .9rem; }
@media (max-width: 680px) { .grid { grid-template-columns: 1fr; margin: 2.5rem 0; } .shell { padding-top: 8vh; } }