:root { color-scheme: light; --ink:#18375e; --paper:#fffdf7; --blue:#3774bd; --coral:#e96c66; --muted:#596579; --line:#dce4ee; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
header, main, footer { max-width:760px; margin:auto; padding-left:24px; padding-right:24px; }
header { padding-top:42px; padding-bottom:30px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { color:var(--ink); text-decoration:none; font-size:27px; font-weight:800; letter-spacing:-.8px; }
nav { display:flex; flex-wrap:wrap; gap:14px; font-size:14px; } a { color:var(--blue); } nav a { text-decoration:none; } nav a:hover { text-decoration:underline; }
main { padding-bottom:54px; } h1 { font-size:40px; letter-spacing:-1.2px; line-height:1.1; margin:20px 0; } h2 { font-size:23px; margin-top:36px; } p, li { max-width:68ch; } .lead { color:var(--muted); font-size:20px; } .card { padding:22px; border:1px solid var(--line); border-radius:18px; background:white; margin:22px 0; } footer { border-top:1px solid var(--line); padding-top:25px; padding-bottom:44px; color:var(--muted); font-size:14px; }
@media (max-width:520px) { header { align-items:flex-start; flex-direction:column; padding-top:25px; } h1 { font-size:34px; } }