:root { color-scheme: light; font: 112.5%/1.6 system-ui, sans-serif; color: #182e32; background: #faf9f6; }
* { box-sizing: border-box; }
body { margin: 0; }
.wrap { width: min(42rem, calc(100% - 2.5rem)); margin-inline: auto; }
header { border-bottom: 1px solid #c7d1cc; }
header .wrap, footer .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1rem; }
.brand { font-weight: 750; color: #123f40; text-decoration: none; font-size: 1.25rem; }
main { padding-block: clamp(2.25rem, 6vw, 4.25rem); }
h1 { font-size: clamp(2.1rem, 6vw, 3.25rem); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 1.25rem; }
h2 { font-size: 1.35rem; line-height: 1.28; margin: 2.2rem 0 .55rem; }
p { margin: .6rem 0 1rem; }
.intro { font-size: 1.13rem; }
a { color: #005d61; text-underline-offset: .18em; overflow-wrap: anywhere; }
a:focus-visible { outline: 3px solid #08787a; outline-offset: 4px; }
.next { border-inline-start: 3px solid #267b77; padding-inline-start: 1rem; margin-top: 2rem; }
code { font-size: .86em; }
footer { border-top: 1px solid #c7d1cc; font-size: .9rem; }