@import url('fonts/brand.css');

* { box-sizing: border-box; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 1rem/1.7 var(--font-body); }
main { max-width: 760px; margin: auto; padding: 32px 20px 64px; overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.3; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6vw, 2.75rem); margin-bottom: 8px; }
h2 { font-size: 1.4rem; margin-top: 40px; }
h3 { font-size: 1.05rem; margin-top: 24px; }
p, ul, ol { margin: 16px 0; }
ul, ol { padding-left: 24px; }
li + li { margin-top: 8px; }
a { color: var(--c-navy); text-underline-offset: 3px; }
.updated { color: var(--c-text-muted); font-size: 0.875rem; margin-top: 0; }
.summary { background: var(--c-bg-alt); border-left: 3px solid var(--c-lake); padding: 20px 24px; margin: 28px 0; }
.summary h2 { margin-top: 0; }
.summary ul { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 4px; }