/* Blog styles — loaded on blog.html + blog-*.html */
.wrap-narrow{max-width:760px;margin:0 auto;padding-inline:24px}
.blogpost__hero{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-md);aspect-ratio:16/8;margin-bottom:34px}
.blogpost__hero img{width:100%;height:100%;object-fit:cover}
.blogpost__body{font-size:18px;line-height:1.75;color:var(--ink-900)}
.blogpost__body p{margin:0 0 20px}
.blogpost__body h2{font-size:clamp(1.4rem,1rem+1.4vw,1.9rem);letter-spacing:-.02em;margin:34px 0 12px}
.blogpost__body b,.blogpost__body strong{font-weight:800}
.blogpost__cta{margin-top:40px;background:var(--ink-900);color:#fff;border-radius:var(--r-xl);padding:32px}
.blogpost__cta h3{color:#fff;font-size:21px;margin:0 0 8px}
.blogpost__cta p{color:var(--fg-on-dark-2);margin:0 0 18px;font-size:15px}
.rel-btns{display:flex;flex-wrap:wrap;gap:10px}
.rel-btns .btn--outline{border-color:var(--ink-600);color:#fff;text-transform:capitalize}
.rel-btns .btn--outline:hover{background:var(--ink-800);border-color:var(--ink-600)}

/* ===== Blog article (blog-art) — TOC layout ===== */
.blog-art .blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px;color:var(--fg2);font-family:var(--font-mono);font-size:13px}
.blog-art .blog-meta span{display:inline-flex;align-items:center;gap:8px}
.blog-art .blog-meta span+span::before{content:"·";margin-right:16px;color:var(--border)}
.blog-cover{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-md);aspect-ratio:16/7;margin:26px 0 36px}
.blog-cover img{width:100%;height:100%;object-fit:cover}
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start}
.prose{font-size:17px;line-height:1.8;color:var(--ink-900);min-width:0}
.prose p{margin:0 0 18px}
.prose h2{font-size:clamp(1.35rem,1rem+1.3vw,1.8rem);letter-spacing:-.02em;margin:38px 0 12px;scroll-margin-top:96px}
.prose h3{font-size:1.18rem;margin:26px 0 10px}
.prose b,.prose strong{font-weight:800}
.prose a{color:var(--lime-700);font-weight:700}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{margin:0 0 9px}
.prose ul li{list-style:disc}
.blog-cta{margin:30px 0;background:var(--ink-900);color:#fff;border-radius:var(--r-xl);padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.blog-cta h4{color:#fff;font-size:19px;margin:0 0 6px}
.blog-cta p{color:var(--fg-on-dark-2);margin:0;font-size:14px}
.blog-cta .btn{flex:none;white-space:nowrap}
.blog-share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:36px;padding-top:24px;border-top:1px solid var(--border)}
.blog-share span{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;color:var(--fg2);letter-spacing:.05em}
.blog-share a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink-900);border:1px solid var(--border);border-radius:999px;padding:8px 14px;text-decoration:none;transition:.18s}
.blog-share a:hover{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.blog-share a svg{width:15px;height:15px}
.toc{position:sticky;top:96px;background:var(--surface,#fff);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px}
.toc h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg2);font-family:var(--font-mono);margin:0 0 12px}
.toc ol{margin:0;padding-left:18px;counter-reset:toc}
.toc li{margin:0 0 9px;font-size:14px;line-height:1.4}
.toc a{color:var(--ink-700,#444);text-decoration:none;font-weight:600}
.toc a:hover{color:var(--lime-700)}
@media(max-width:960px){.intro-grid{grid-template-columns:1fr;gap:0}.toc{display:none}}