/* Brown & golden tones per user preference. Keep styles simple, responsive, and SEO-friendly. */
:root{
  --brown-700:#8B4513;
  --brown-900:#5a2f10;
  --gold:#DAA520;
  --muted:#6b6b6b;
  --bg:#fffefb;
  --max-width:1100px;
  --radius:12px;
}
*{box-sizing:border-box}
body{font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:var(--bg); color:#222; line-height:1.6}
.wrap{max-width:var(--max-width); margin:0 auto; padding:18px}
.site-header{background:#fff; border-bottom:1px solid rgba(0,0,0,0.04)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between}
.site-brand{font-weight:700; color:var(--brown-900); text-decoration:none; font-size:1.15rem}
.main-nav a{margin-left:18px; color:var(--muted); text-decoration:none}
.main-nav .cta{background:var(--gold); color:#fff; padding:8px 12px; border-radius:8px}
.page-title{color:var(--brown-700); font-size:2rem; margin:18px 0}
.post-list{display:grid; grid-template-columns:1fr; gap:24px}
.post{background:#fff; border-radius:var(--radius); box-shadow:0 6px 18px rgba(39,17,0,0.04); overflow:hidden}
.post header{padding:20px}
.post header h2{margin:0; color:var(--brown-900)}
.post-meta{color:var(--muted); font-size:0.9rem; margin-top:6px}
.post-figure{padding:0 20px 10px}
.post-figure img{width:100%; height:auto; display:block; border-radius:8px}
.post-body{padding:0 20px 20px}
.post-body h3{color:var(--brown-700)}
.comparison{width:100%; border-collapse:collapse; margin:12px 0}
.comparison th, .comparison td{border:1px solid #eee; padding:10px; text-align:left}
.comparison th{background:linear-gradient(90deg,var(--bg),#fffefb); color:var(--brown-700)}
.post-cta{display:flex; gap:12px; margin-top:18px}
.btn{background:var(--brown-700); color:#fff; padding:10px 14px; border-radius:8px; text-decoration:none; display:inline-block}
.btn.ghost{background:transparent; border:2px solid var(--brown-700); color:var(--brown-700)}
footer.site-footer{padding:18px 0; text-align:center; color:var(--muted); border-top:1px solid rgba(0,0,0,0.04)}
.footer-links a{margin-left:12px; color:var(--muted); text-decoration:none}
@media(min-width:800px){
  .post-list{grid-template-columns:1fr 1fr;}
  .post-figure{padding:0}
}
@media(min-width:1200px){
  .post-list{grid-template-columns:1fr 1fr 1fr}
}

/* Accessibility: focus outlines */
a:focus{outline:3px solid rgba(218,165,32,0.25); outline-offset:3px}

/* Small helpers */
ol,ul{padding-left:1.1rem}