@font-face{font-family:Fraunces;src:url('/fonts/fraunces-roman.woff2') format('woff2');font-weight:500 700;font-display:swap}
@font-face{font-family:Plex;src:url('/fonts/plex-sans.woff2') format('woff2');font-weight:400 500;font-display:swap}
*{box-sizing:border-box}
html{background:#fff;color:#171717}
body{margin:0;font:17px/1.65 Plex,Arial,sans-serif}
main{max-width:48rem;margin:auto;padding:2.5rem 1.3rem 5rem}
nav{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:3rem;font-size:.9rem}
h1,h2{font-family:Fraunces,Georgia,serif;font-weight:500;line-height:1.15;letter-spacing:-.025em}
h1{font-size:clamp(2.3rem,7vw,3.8rem);margin:0 0 1.4rem;max-width:40rem}
h2{font-size:1.8rem;margin:2.8rem 0 1rem}
h3{font-size:1.1rem;font-weight:500;margin:1.6rem 0 .5rem}
p{margin:0 0 1.1rem}
a{color:#2c6aa3;text-underline-offset:4px}
a:hover{color:#c23a2b}
:focus-visible{outline:3px solid #c23a2b;outline-offset:5px}
pre{background:#f3f3f1;border:1px solid #171717;padding:1rem;overflow:auto;font-size:.85rem;line-height:1.6}
code{font-family:ui-monospace,monospace}
p code,li code{font-size:.9em;background:#f3f3f1;padding:.1rem .25rem}
aside{border-left:3px solid #c23a2b;padding:.3rem 0 .3rem 1rem;margin:2rem 0}
aside p:last-child{margin:0}
ul,ol{padding-left:1.4rem}
li{margin-bottom:.65rem}
footer{margin-top:4rem;border-top:1px solid #171717;padding-top:1rem;font-size:.9rem;color:#5c5c5c}
.intro{font-size:1.15rem;color:#4b4b4b}
.skip{position:absolute;top:-5rem;left:1rem;background:white;padding:.6rem}
.skip:focus{top:1rem}
@media(max-width:600px){main{padding-top:1.5rem}nav{margin-bottom:2rem}pre{font-size:.75rem}}