:root{
  --bg:#ffffff;
  --fg:#161616;
  --muted:#666;
  --border:#ececec;
  --max:1100px;
  --reading:720px;

  --sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --serif: "Source Serif 4", ui-serif, Georgia, serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--sans)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.reading{max-width:var(--reading);margin:0 auto}

.site-header{border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.logo{font-weight:600;letter-spacing:0.2px}
.nav a{margin-left:14px;color:var(--muted)}
.nav a.is-active{color:var(--fg)}

.site-footer{border-top:1px solid var(--border);margin-top:64px}
.footer-inner{padding:24px 0;color:var(--muted);font-size:0.95rem}
.small{font-size:0.9rem}
.muted{color:var(--muted)}

.hero{padding:56px 0 24px}
.hero-title{font-family:var(--serif);font-size:2.6rem;line-height:1.1;margin:0 0 12px}
.hero-intro{color:var(--muted);font-size:1.1rem;line-height:1.7;margin:0}

.page-head{padding:42px 0 16px}
.lede{color:var(--muted);font-size:1.05rem;line-height:1.75}

.section-title{font-family:var(--serif);font-size:1.4rem;margin:28px 0 10px}
.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-size:0.78rem;margin:0 0 8px}

.post-card{padding:22px 0;border-bottom:1px solid var(--border)}
.post-card-title{font-family:var(--serif);font-size:1.45rem;line-height:1.2;margin:0 0 10px}
.post-card-excerpt{color:var(--muted);line-height:1.75;margin:0 0 10px}
.post-card-meta{color:var(--muted);font-size:0.92rem;margin:0}
.dot{padding:0 8px}

.article{max-width:var(--reading);margin:0 auto;padding:52px 20px}
.breadcrumbs{color:var(--muted);font-size:0.9rem;margin-bottom:22px}
.breadcrumbs .sep{padding:0 8px;color:#aaa}

.article-header h1{font-family:var(--serif);font-size:2.2rem;line-height:1.15;margin:0 0 10px}
.article-meta{color:var(--muted);margin:0 0 32px}

.prose p{font-size:1.06rem;line-height:1.78;margin:0 0 1.6rem}
.prose h2{font-family:var(--serif);font-size:1.6rem;line-height:1.25;margin:3rem 0 1rem}
.prose h3{font-size:1.22rem;line-height:1.35;margin:2.2rem 0 0.8rem}
.prose ul,.prose ol{margin:1.4rem 0 1.6rem 1.25rem;line-height:1.75}
.prose blockquote{border-left:3px solid var(--border);margin:2rem 0;padding-left:1.2rem;color:var(--muted);font-style:italic}
.prose figure{margin:2.6rem 0}
.prose img{max-width:100%;height:auto;border-radius:6px}
.prose figcaption{color:var(--muted);font-size:0.9rem;margin-top:0.6rem;text-align:center}

.btn{display:inline-block;border:1px solid var(--border);padding:10px 14px;border-radius:10px;text-decoration:none}
.btn:hover{text-decoration:none;border-color:#d8d8d8}
.btn.is-disabled{opacity:0.5;pointer-events:none}

.pagination{display:flex;align-items:center;justify-content:space-between;margin:24px 0 0}
.pagecount{color:var(--muted);font-size:0.95rem}

.block-tldr{
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  margin:2.5rem 0;
  background:#fafafa;
}
.block-tldr ul{margin:0;padding-left:1.1rem;line-height:1.7}

.block-callout{
  border-left:3px solid var(--border);
  padding-left:1.25rem;
  margin:2.2rem 0;
  color:var(--muted);
  font-style:italic;
}

.block-proscons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:2.5rem 0;
}
.block-proscons h3{font-family:var(--serif);margin:0 0 0.6rem}
.block-proscons ul{margin:0;padding-left:1.1rem;line-height:1.7}

.block-comparison{margin:3rem 0;overflow-x:auto}
.block-comparison table{width:100%;border-collapse:collapse;font-size:0.95rem}
.block-comparison th,.block-comparison td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
.block-comparison th{color:var(--muted);font-weight:600}

.affiliate{margin-top:48px}
.affiliate-box{
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 18px 16px;
  background:#fafafa;
  margin:16px 0;
}
.affiliate-name{font-family:var(--serif);font-size:1.2rem;margin:6px 0}
.affiliate-note{color:var(--muted);line-height:1.7;margin:0 0 10px}

.related{margin-top:56px}
.more{margin:22px 0 0;color:var(--muted)}

@media (max-width: 720px){
  .hero-title{font-size:2.1rem}
  .post-card-title{font-size:1.3rem}
  .article-header h1{font-size:1.9rem}
  .block-proscons{grid-template-columns:1fr}
}