:root { --ink:#20221f; --muted:#70756e; --line:#dedfd9; --accent:#b8e12d; --deep:#5e770b; --tint:#f4f8e6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; background:#fff; color:var(--ink); font-family:"Segoe UI","SF Pro Text",-apple-system,sans-serif; line-height:1.75; }
a { color:var(--deep); text-underline-offset:3px; }
a:hover { color:#354706; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--deep); outline-offset:5px; }
.wrap { max-width:1120px; padding:0 24px; margin:auto; }
.skip-link { position:absolute; top:-80px; left:24px; background:var(--ink); color:white; padding:8px 16px; z-index:30; }
.skip-link:focus { top:12px; }
.site-nav { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); }
.nav-inner { min-height:66px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; gap:10px; align-items:center; font-weight:750; color:var(--ink); text-decoration:none; }
.brand img { width:30px; height:30px; border-radius:7px; }
.nav-links { margin-left:auto; display:flex; gap:24px; font-size:14px; }
.nav-links a { text-decoration:none; color:var(--muted); }
.nav-links [aria-current] { color:var(--deep); }
.breadcrumbs { color:var(--muted); font-size:13px; display:flex; gap:9px; margin:36px 0 28px; }
.breadcrumbs a { color:var(--muted); }
.article-header { max-width:900px; margin-bottom:38px; }
.eyebrow { font-size:12px; font-weight:700; color:var(--deep); letter-spacing:.08em; text-transform:uppercase; }
h1 { font-size:clamp(32px,4.5vw,49px); line-height:1.14; letter-spacing:-.04em; margin:12px 0 20px; }
.lede { font-size:19px; color:var(--muted); max-width:790px; line-height:1.65; }
.meta { font-size:13px; color:var(--muted); margin-top:22px; }
.article-grid { display:grid; grid-template-columns:205px minmax(0,1fr); gap:48px; align-items:start; }
.toc { position:sticky; top:94px; border-top:2px solid var(--line); padding-top:16px; font-size:13px; }
.toc strong { display:block; margin-bottom:12px; }
.toc ol { padding-left:18px; margin:0; }
.toc li { margin:0 0 10px; }
.toc a { color:var(--muted); text-decoration:none; }
.article-body { min-width:0; max-width:790px; font-size:16px; }
.article-body h2 { font-size:27px; line-height:1.3; letter-spacing:-.025em; margin:44px 0 14px; }
.article-body h3 { font-size:19px; line-height:1.4; margin:28px 0 10px; }
.article-body p { margin:0 0 18px; }
.article-body li { margin-bottom:12px; }
.article-body ul,.article-body ol { padding-left:23px; }
.answer { background:var(--tint); border-left:4px solid var(--deep); padding:22px 24px; margin-bottom:32px; }
.answer p:last-child { margin:0; }
.article-body figure { margin:30px 0; }
.article-body figure img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; }
figcaption { margin-top:10px; color:var(--muted); font-size:12px; line-height:1.6; }
.table-wrap { width:100%; overflow-x:auto; margin:24px 0; }
table { border-collapse:collapse; width:100%; min-width:560px; font-size:14px; }
th,td { padding:14px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
th { background:#f7f8f3; font-weight:650; }
.checklist { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; }
.article-cta { background:var(--tint); padding:26px; margin:40px 0; }
.article-cta h2 { margin:0 0 10px; font-size:24px; }
.button { display:inline-block; background:var(--accent); border:1px solid #7d9a10; color:#1f2a05; text-decoration:none; border-radius:8px; padding:11px 20px; font-size:14px; font-weight:700; }
.related { border-top:1px solid var(--line); margin:38px 0 50px; padding-top:20px; }
.related ul { list-style:none; padding:0; }
.related li { margin:10px 0; }
.post-list { margin:46px 0 70px; }
.post-row { border-top:1px solid var(--line); padding:28px 0; display:grid; grid-template-columns:155px minmax(0,1fr); gap:28px; }
.post-row:last-child { border-bottom:1px solid var(--line); }
.post-row time { color:var(--muted); font-size:12px; display:block; margin-top:10px; }
.post-row h2 { font-size:25px; line-height:1.3; letter-spacing:-.025em; margin:0 0 10px; }
.post-row h2 a { color:var(--ink); text-decoration:none; }
.post-row h2 a:hover { color:var(--deep); }
.post-row p { color:var(--muted); margin:0 0 14px; max-width:760px; }
.site-footer { margin-top:54px; padding:28px 0; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.footer-inner { display:flex; gap:20px; flex-wrap:wrap; }
.footer-inner a { color:var(--muted); }
.footer-links { margin-left:auto; display:flex; gap:20px; flex-wrap:wrap; }
@media(max-width:850px) { .article-grid { grid-template-columns:1fr; gap:28px; } .toc { position:static; } .toc ol { columns:2; column-gap:28px; } .post-row { grid-template-columns:1fr; gap:12px; } .post-row time { display:inline; margin-left:10px; } }
@media(max-width:560px) { .wrap { padding:0 18px; } .nav-inner { gap:14px; } .nav-links { gap:16px; } .nav-store { display:none; } .lede { font-size:17px; } .toc ol { columns:1; } .answer,.article-cta { padding:20px; } .article-body h2 { font-size:24px; } .footer-links { margin-left:0; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }