:root { color-scheme: light; font-family: Inter, system-ui, sans-serif; --ink:#172033; --muted:#5f6b7a; --brand:#2563eb; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:#f8fafc; line-height:1.7; }
main, header, footer { width:min(960px, calc(100% - 2rem)); margin-inline:auto; }
header { padding:2rem 0 1rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
header a, nav a { color:var(--brand); text-decoration:none; font-weight:700; }
nav { display:flex; flex-wrap:wrap; gap:1rem; font-size:.95rem; }
h1,h2,h3 { line-height:1.2; color:#0f172a; }
h1 { font-size:clamp(2.2rem, 6vw, 4rem); margin:3rem 0 1rem; }
h2 { margin-top:2.5rem; }
.lede { font-size:1.2rem; color:var(--muted); max-width:720px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.card { background:white; border:1px solid #e2e8f0; border-radius:1rem; padding:1.25rem; box-shadow:0 12px 30px rgba(15,23,42,.05); }
.card h2, .card h3 { margin-top:0; }
.blog-grid .card { padding:0; overflow:hidden; }
.blog-grid .card-content { padding:1.25rem; }
.blog-cover { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid #e2e8f0; }
.article-cover { display:block; width:100%; aspect-ratio:16/7; object-fit:cover; border-radius:1.25rem; margin:2rem 0 2.5rem; box-shadow:0 20px 45px rgba(15,23,42,.12); }
.article-meta { color:var(--brand); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.article-body { max-width:760px; }
.article-body p, .article-body li { color:var(--muted); font-size:1.06rem; }
.article-body ul { padding-left:1.3rem; }
.article-body code { padding:.15rem .35rem; border-radius:.35rem; background:#eaf1ff; color:#1d4ed8; }
pre { overflow:auto; margin:1.25rem 0; padding:1.1rem 1.25rem; border-radius:1rem; background:#0f172a; color:#e2e8f0; font:0.95rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; box-shadow:0 12px 30px rgba(15,23,42,.12); }
.button { display:inline-block; margin:1rem .5rem 1rem 0; padding:.7rem 1rem; border-radius:999px; background:var(--brand); color:white; text-decoration:none; font-weight:700; }
footer { margin-top:4rem; padding:2rem 0; border-top:1px solid #e2e8f0; color:var(--muted); }