:root { color-scheme: light; --paper: #f6f2e8; --ink: #193a32; --green: #245c45; --coral: #ff765e; --muted: #52635b; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); background-image: radial-gradient(#193a3212 0.75px, transparent 0.75px); background-size: 15px 15px; font: 16px/1.75 "Trebuchet MS", "Avenir Next", sans-serif; }
.wrap { width: min(800px, calc(100% - 40px)); margin-inline: auto; }
header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px; border-bottom: 1px solid #193a3230; }
a { color: var(--green); text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.brand { font: 700 27px Georgia, "Times New Roman", serif; text-decoration: none; }
.brand span { color: var(--coral); }
nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; }
main { padding-block: 48px; overflow-wrap: anywhere; }
.eyebrow { color: var(--muted); font-size: 12px; text-transform: uppercase; }
h1 { margin: 12px 0 24px; font: 700 40px/1.15 Georgia, "Times New Roman", serif; }
h2 { margin: 36px 0 12px; font: 700 25px/1.25 Georgia, "Times New Roman", serif; }
p { margin: 0 0 18px; }
ul { padding-left: 24px; }
li { margin-bottom: 14px; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 24px 32px; border-top: 1px solid #193a3230; color: var(--muted); font-size: 12px; }
footer p { margin: 0; }