:root{
    --bg:#f8f6f3;
    --surface:#ffffff;
    --ink:#1f1f1f;
    --muted:#5b5b5b;
    --line:#e6e1da;
    --accent:#2d4a3e;
    --accent2:#6b7b5f;
    --shadow:0 10px 30px rgba(17,24,39,.08);
    --radius:18px;
    --max:920px;
}

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

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--max);margin:0 auto;padding:22px}
.sitebar{
    position:sticky; top:0; z-index:10;
    background:rgba(248,246,243,.92);
    backdrop-filter: blur(8px);
    border-bottom:1px solid var(--line);
}
.brand{
    display:flex; gap:14px; align-items:baseline; flex-wrap:wrap;
}
.brand strong{font-size:18px;letter-spacing:.2px}
.brand span{color:var(--muted);font-size:13px}

.nav{
    display:flex; gap:18px; flex-wrap:wrap;
    justify-content:flex-end;
}
.bar{
    display:flex; align-items:center; justify-content:space-between;
    gap:20px;
}

.hero{padding:28px 0 8px}
.kicker{color:var(--accent2);font-weight:600;font-size:13px;letter-spacing:.3px;text-transform:uppercase}
h1{font-size:36px;line-height:1.18;margin:10px 0 10px}
p.lede{font-size:18px;color:var(--muted);max-width:70ch;margin:0}

.grid{
    display:grid;
    grid-template-columns: 1.4fr .9fr;
    gap:18px;
    margin-top:18px;
}
@media (max-width: 900px){
    .grid{grid-template-columns:1fr}
    .nav{justify-content:flex-start}
}

.card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
}
.card h2{margin:0 0 8px;font-size:20px}
.card h3{margin:0 0 8px;font-size:16px}
.card p{margin:0 0 10px;color:var(--muted)}
.meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.meta b{color:var(--ink);font-weight:600}

.list{
    display:grid; gap:12px;
}
.item{
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.72);
}
.item h3{margin:0 0 6px;font-size:16px}
.item p{margin:0;color:var(--muted)}
.item .meta{margin-top:8px}

.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--line);
    background:#fff;
    font-weight:600;
}
.btn.primary{
    background:var(--accent);
    color:#fff;
    border-color:transparent;
}
.btn.primary:hover{text-decoration:none;filter:brightness(.98)}
.btn:hover{text-decoration:none}

hr.sep{border:0;border-top:1px solid var(--line);margin:18px 0}

.article{
    max-width: 78ch;
}
.article h1{font-size:34px}
.article h2{font-size:20px;margin-top:22px}
.article p{color:var(--ink)}
.article p.note{color:var(--muted)}
.callout{
    border-left:4px solid var(--accent2);
    padding:10px 14px;
    background:rgba(107,123,95,.08);
    border-radius:12px;
    margin:14px 0;
}
.sources{
    margin-top:24px;
    padding-top:14px;
    border-top:1px solid var(--line);
}
.sources ol{margin:8px 0 0; padding-left:18px}
.sources li{margin:8px 0;color:var(--muted)}
.footer{
    color:var(--muted);
    font-size:13px;
    padding:22px 0 28px;
}
.small{font-size:13px;color:var(--muted)}