:root { --fg:#1a1a1a; --muted:#666; --bg:#fff; --accent:#0066a6; --max:760px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--fg); background:var(--bg); margin:0; line-height:1.65; }
.container { max-width: var(--max); margin: 0 auto; padding: 1rem 1.25rem 4rem; }
.site-header { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; padding:1rem 1.25rem; max-width:var(--max); margin:0 auto; border-bottom:1px solid #eee; }
.site-header .brand { font-weight:700; color:var(--accent); text-decoration:none; }
.site-header nav { display:flex; gap:1rem; }
.site-header nav a { color:var(--fg); text-decoration:none; }
.site-header nav a:hover { color:var(--accent); }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height:1.2; margin-top:1.5rem; }
h2 { margin-top:2rem; }
a { color:var(--accent); }
.lead { font-size:1.15rem; color:var(--muted); }
.cards { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); margin:1.5rem 0; }
.card { padding:1rem 1.1rem; border:1px solid #eee; border-radius:8px; background:#fafafa; }
.card h3 { margin:.2rem 0 .4rem; }
.site-footer { border-top:1px solid #eee; padding:1.5rem 1.25rem 2.5rem; max-width:var(--max); margin:2rem auto 0; color:var(--muted); font-size:.9rem; text-align:center; }
.site-footer a { color:var(--muted); }