:root{
  --bg:#fdfcfa; --text:#2a2622; --muted:#6b6459; --accent:#3f6b4f; --accent-dark:#2e5039; --accent-light:#e8f0ea;
  --border:#e5e0d8; --card:#f6f3ed; --max:760px; --good:#2e7d4f; --bad:#b3452e; --gold:#b8863b;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Georgia,'Times New Roman',serif; line-height:1.7; font-size:18px;
}
header.site{border-bottom:1px solid var(--border); padding:16px 20px; display:flex; align-items:center; justify-content:space-between}
header.site a.brand{color:var(--accent-dark); text-decoration:none; font-weight:bold; font-family:Arial,sans-serif; font-size:19px; letter-spacing:-.01em}
header.site nav a{color:var(--muted); text-decoration:none; font-family:Arial,sans-serif; font-size:.85rem; margin-left:16px}
main{max-width:var(--max); margin:0 auto; padding:0 20px 60px}
.breadcrumb{font-family:Arial,sans-serif; font-size:.8rem; color:var(--muted); margin:16px 0 0}
.breadcrumb a{color:var(--muted)}

.hero{background:linear-gradient(180deg,var(--accent-light),transparent); margin:0 -20px 24px; padding:18px 20px 26px; border-bottom:1px solid var(--border)}
.hero-icon{width:40px; height:40px; color:var(--accent-dark); margin-bottom:10px}
h1{font-size:2rem; line-height:1.22; margin:.2em 0 .35em; letter-spacing:-.01em}
h2{font-size:1.35rem; margin-top:1.9em; margin-bottom:.5em; color:var(--accent-dark); border-top:1px solid var(--border); padding-top:1em}
main>h2:first-of-type{border-top:none; padding-top:0}
p,li{font-size:1rem}
a{color:var(--accent-dark)}
strong{color:var(--text)}

.disclosure{font-family:Arial,sans-serif; font-size:.85rem; color:var(--muted); background:var(--card); border:1px solid var(--border); padding:12px 14px; border-radius:8px; margin:1.2em 0}
.meta{font-family:Arial,sans-serif; font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.badge{display:inline-block; font-family:Arial,sans-serif; font-size:.72rem; font-weight:bold; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-dark); background:#fff; border:1px solid var(--accent); border-radius:20px; padding:3px 10px}

.short-answer{background:var(--card); border-left:4px solid var(--accent); padding:16px 18px; border-radius:0 8px 8px 0; margin:1.4em 0}
.short-answer strong:first-child{color:var(--accent-dark)}

.pros-cons{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:1.2em 0; font-family:Arial,sans-serif}
.pros-cons > div{border-radius:10px; padding:14px 16px; border:1px solid var(--border)}
.pros-cons .pros{background:#f2f8f4}
.pros-cons .cons{background:#faf3f0}
.pros-cons h3{margin:0 0 8px; font-size:.9rem; text-transform:uppercase; letter-spacing:.03em}
.pros-cons .pros h3{color:var(--good)}
.pros-cons .cons h3{color:var(--bad)}
.pros-cons ul{list-style:none; margin:0; padding:0}
.pros-cons li{font-size:.92rem; padding:4px 0 4px 22px; position:relative}
.pros-cons .pros li::before{content:"✓"; position:absolute; left:0; color:var(--good); font-weight:bold}
.pros-cons .cons li::before{content:"✕"; position:absolute; left:0; color:var(--bad); font-weight:bold}
@media(max-width:560px){.pros-cons{grid-template-columns:1fr}}

.checklist{list-style:none; margin:1em 0; padding:0; font-family:Arial,sans-serif}
.checklist li{padding:6px 0 6px 26px; position:relative; font-size:.95rem}
.checklist li::before{content:"☐"; position:absolute; left:0; color:var(--accent-dark)}

.cluster-links{font-family:Arial,sans-serif; display:grid; gap:10px; margin:1em 0}
.cluster-links a{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 16px; text-decoration:none; color:var(--text); font-size:.95rem; transition:border-color .15s}
.cluster-links a:hover{border-color:var(--accent)}
.cluster-links a::after{content:"→"; margin-left:auto; color:var(--accent-dark)}
.cluster-links a .k{color:var(--accent-dark); font-weight:bold}

table{width:100%; border-collapse:collapse; font-family:Arial,sans-serif; font-size:.95rem; margin:1em 0; border-radius:8px; overflow:hidden}
th,td{border:1px solid var(--border); padding:10px 12px; text-align:left}
th{background:var(--accent-light); color:var(--accent-dark)}
tr:nth-child(even) td{background:#faf9f6}

details{border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin:10px 0; background:#fff}
details[open]{border-color:var(--accent)}
summary{font-weight:bold; cursor:pointer; font-family:Arial,sans-serif; font-size:.98rem}
summary::marker{color:var(--accent)}

footer.site{border-top:1px solid var(--border); margin-top:40px; padding:20px; font-family:Arial,sans-serif; font-size:.82rem; color:var(--muted)}
footer.site a{color:var(--muted)}

.author-box{display:flex; gap:14px; align-items:center; background:var(--card); border:1px solid var(--border); padding:16px; border-radius:12px; margin-top:2.2em; font-family:Arial,sans-serif; font-size:.9rem}
.avatar{width:52px; height:52px; border-radius:50%; background:var(--accent); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; font-size:1.1rem}

blockquote{margin:1.4em 0; padding:.2em 0 .2em 20px; border-left:3px solid var(--gold); font-style:italic; color:var(--text)}

.cta-box{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; margin:1.8em 0; text-align:center; font-family:Arial,sans-serif}
.cta-box p{margin:0 0 12px; font-size:.92rem; color:var(--muted)}
.btn-cta{display:inline-block; background:var(--accent-dark); color:#fff; text-decoration:none; font-family:Arial,sans-serif; font-weight:bold; font-size:.98rem; padding:13px 28px; border-radius:8px}
.btn-cta:hover{background:var(--accent)}
.cta-note{display:block; margin-top:10px; font-size:.78rem; color:var(--muted)}

.cta-subtle{font-family:Arial,sans-serif; font-size:.88rem; color:var(--muted); border-top:1px solid var(--border); margin-top:2em; padding-top:1.2em}
.cta-subtle a{color:var(--accent-dark); font-weight:bold; text-decoration:none; border-bottom:1px solid var(--accent)}

@media(max-width:480px){body{font-size:16.5px} h1{font-size:1.55rem} .hero{padding:14px 16px 20px}}