:root{
  --bg:#f5f7fa;        /* light grey */
  --card:#ffffff;
  --text:#1b1f23;
  --muted:#6b7280;
  --primary:#111827;   /* near-black */
  --ring:#e5e7eb;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

.container{max-width:1100px;margin:0 auto;padding:24px}
.container.narrow{max-width:800px}

.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:16px;
  padding:14px 24px;background:#fff;border-bottom:1px solid var(--ring)
}
.logo{font-weight:800;text-decoration:none;color:var(--primary);font-size:20px}
.nav{display:flex;gap:16px;margin-left:auto}
.nav a{color:#111;text-decoration:none;padding:6px 8px;border-radius:10px}
.nav a.active,.nav a:hover{background:var(--ring)}
.burger{display:none;margin-left:auto;background:transparent;border:0;font-size:22px}

.hero{padding:40px 0}
.lead{font-size:1.15rem;color:#374151}
.cta-row{display:flex;gap:12px;margin-top:12px}

.btn{display:inline-block;padding:10px 16px;border-radius:999px;text-decoration:none;border:1px solid var(--ring)}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px}

.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid.three{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .grid.two,.grid.three{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:inline-block}
}

.card{
  background:var(--card);border:1px solid var(--ring);
  border-radius:var(--radius);padding:18px;box-shadow:0 1px 2px rgba(0,0,0,.03)
}
.unstyled{color:inherit;text-decoration:none}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bullet{padding-left:18px}
.bullet li{margin:6px 0}
.muted{color:var(--muted);margin-top:-6px}

.search{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--ring);
  background:#fff;margin:10px 0 18px
}

.tag{display:inline-block;font-size:12px;padding:2px 8px;border:1px solid var(--ring);border-radius:999px;margin-right:6px}
.tag-row{display:block;margin:8px 0}

.post h1{margin-bottom:6px}
.post .content p{margin:12px 0}

.site-footer{padding:26px 24px;border-top:1px solid var(--ring);background:#fff}
.footer-grid{display:grid;gap:16px;grid-template-columns:2fr 1fr 1fr}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin:6px 0}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}

.link{color:#0f172a;text-decoration:underline;text-underline-offset:2px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-top:8px;margin-bottom:8px}

/* Forms */
.form label{display:block;margin-bottom:12px;font-weight:600}
.form input,.form textarea{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--ring);background:#fff;margin-top:6px
}