:root{
  --bg:#ffffff; --text:#222; --muted:#666; --accent:#0b66d1;
  --max-w:900px; --container-pad:16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.6}
.container{max-width:var(--max-w);margin:0 auto;padding:20px}
.site-header{background:#f8f9fb;border-bottom:1px solid #e9eef6}
.site-header .container{display:flex;align-items:center;gap:16px}
.brand{font-weight:700;font-size:1.2rem;color:var(--text);text-decoration:none}
.main-nav{margin-left:auto;display:flex;gap:12px}
.main-nav a{color:var(--muted);text-decoration:none}
.hero{padding:40px 0}
.cta{display:inline-block;padding:10px 16px;background:var(--accent);color:#fff;text-decoration:none;border-radius:6px}
.posts-list{list-style:none;padding:0;margin:0}
.posts-list li{padding:12px 0;border-bottom:1px solid #eee}
.meta{color:var(--muted);font-size:0.9rem;margin-top:6px}
.post article{padding:20px 0}
aside.related{margin-top:20px;padding:12px;border-left:4px solid #eee;background:#fbfcfe}
.site-footer{padding:24px 0;text-align:center;color:var(--muted);font-size:0.9rem;border-top:1px solid #eee;margin-top:40px}
button.nav-toggle{display:none}
@media(max-width:700px){
  .main-nav{display:none}
  button.nav-toggle{display:block;margin-left:auto;background:transparent;border:none;font-size:1.2rem}
  .container{padding:12px}
}
a:focus{outline:2px dashed var(--accent);outline-offset:3px}