:root { color-scheme: light; --accent: #2244aa; --ink: #172630; --paper: #fafbf8; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1.05rem/1.65 system-ui, sans-serif; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .15em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.site-header, .site-main, .site-footer { width: min(72rem, 100% - 3rem); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.5rem; border-bottom: 1px solid #d8e1dd; }
.brand { display: flex; align-items: center; gap: .8rem; color: var(--ink); font-weight: 700; text-decoration: none; }
.brand img { object-fit: contain; }
.site-main { min-height: 60vh; padding-block: clamp(2rem, 7vw, 5rem); }
.prose { max-width: 70ch; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.025em; }
h1 { font-size: clamp(2.3rem, 5vw, 4rem); margin-top: 0; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-top: 2.4rem; }
img, video { max-width: 100%; height: auto; }
pre { overflow: auto; padding: 1rem; background: #e9efeb; border-radius: .4rem; }
blockquote { margin-inline: 0; padding-left: 1.2rem; border-left: 3px solid var(--accent); }
table { border-collapse: collapse; width: 100%; }
td, th { padding: .7rem; border-bottom: 1px solid #d8e1dd; text-align: left; }
.page-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-top: 3rem; }
.page-list a { padding: 1rem; border: 1px solid #d8e1dd; border-radius: .4rem; }
.site-footer { padding-block: 2rem; border-top: 1px solid #d8e1dd; color: #54655e; font-size: .9rem; }
.skip-link { position: absolute; top: -8rem; left: 1rem; padding: .7rem 1rem; background: white; z-index: 2; }
.skip-link:focus { top: 1rem; }
@media (max-width: 36rem) { .site-header { align-items: flex-start; flex-direction: column; gap: .7rem; } }