.blog-post-hero { position:relative; z-index:1; max-width:760px; margin:0 auto; padding:5rem 2rem 3rem; }
.blog-post-meta { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.blog-post-hero h1 { font-size:clamp(1.75rem,4vw,2.5rem); font-weight:700; letter-spacing:-.03em; color:var(--white); line-height:1.15; margin-bottom:1rem; }
.blog-post-lead { font-size:1rem; color:var(--muted); line-height:1.85; }
.blog-post-body { position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 2rem 6rem; }
.blog-post-body h2 { font-size:1.4rem; font-weight:700; letter-spacing:-.02em; color:var(--white); margin:2.5rem 0 .9rem; }
.blog-post-body h3 { font-size:1.1rem; font-weight:600; color:var(--white); margin:2rem 0 .65rem; }
.blog-post-body p  { font-size:.93rem; color:var(--muted); line-height:1.9; margin-bottom:1.3rem; }
.blog-post-body ul,.blog-post-body ol { padding-left:1.5rem; margin-bottom:1.3rem; display:flex; flex-direction:column; gap:.45rem; }
.blog-post-body li { font-size:.93rem; color:var(--muted); line-height:1.8; }
.blog-post-body strong { color:var(--text); font-weight:500; }
.blog-post-body a { color:var(--accent); text-decoration:underline; text-decoration-color:rgba(0,119,204,.3); }
.blog-post-body pre { background:#0d0f14; border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:1.25rem 1.5rem; margin:1.5rem 0; overflow-x:auto; font-family:var(--mono); font-size:.82rem; line-height:1.75; }
.blog-post-body code:not(pre code) { font-family:var(--mono); font-size:.83em; background:var(--surface2); border:1px solid var(--border); padding:.1em .35em; border-radius:3px; color:var(--teal); }
.blog-post-body table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.88rem; }
.blog-post-body th { background:var(--surface2); color:var(--white); padding:.65rem 1rem; text-align:left; border:1px solid var(--border); font-weight:600; }
.blog-post-body td { padding:.65rem 1rem; border:1px solid var(--border); color:var(--muted); }

@media (max-width: 768px) {
  .blog-post-hero { padding:4rem 1.25rem 2rem; }
  .blog-post-body { padding:0 1.25rem 4rem; }
}