.blog-nav { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--bg-parchment) 92%, transparent); backdrop-filter: blur(14px); }
.blog-nav__inner { width: min(1100px, calc(100% - 32px)); min-height: 68px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.blog-nav__brand { font: 600 1.15rem var(--font-serif); }
.blog-nav__back { padding: 8px 13px; border: 1px solid var(--ink-primary); border-radius: 999px; font: 700 .65rem var(--font-mono); }
.blog-nav__back:hover { color: var(--ink-light); background: var(--ink-primary); }
.blog-article { width: min(1100px, calc(100% - 32px)); margin: auto; padding: clamp(60px, 10vw, 120px) 0; }
.blog-article__header { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(32px, 7vw, 90px); align-items: end; padding-bottom: clamp(50px, 8vw, 90px); border-bottom: 1px solid var(--border-subtle); }
.blog-article__meta { margin-bottom: 18px; color: var(--accent-terracotta); font: 700 .66rem var(--font-mono); letter-spacing: .12em; }
.blog-article h1 { max-width: 850px; font-size: clamp(3rem, 8vw, 7rem); line-height: .91; letter-spacing: -.06em; }
.blog-article__lede { font-size: clamp(1.1rem, 2vw, 1.35rem); }
.blog-article__body { width: min(720px, 100%); margin: clamp(50px, 8vw, 90px) auto 0; }
.blog-article__body h2 { margin: 2.6em 0 .6em; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.blog-article__body p { margin-bottom: 1.45em; font-size: 1.08rem; }
.blog-article__body ul { display: grid; gap: 10px; margin: 0 0 1.6em 1.2em; list-style: square; color: var(--ink-secondary); }
.blog-article__body code { padding: 2px 5px; border-radius: 3px; color: var(--accent-terracotta); background: var(--bg-linen); font-family: var(--font-mono); font-size: .88em; }
.blog-callout { margin: 2.2em 0; padding: 24px; border: 1px solid var(--ink-primary); background: var(--bg-surface); box-shadow: 5px 5px 0 var(--accent-terracotta); font: 600 1.15rem/1.5 var(--font-serif); }
.blog-next { display: flex; justify-content: space-between; gap: 20px; margin-top: 70px; padding-top: 24px; border-top: 1px solid var(--border-subtle); font: 700 .68rem var(--font-mono); text-transform: uppercase; }
@media (max-width: 700px) { .blog-article__header { grid-template-columns: 1fr; } .blog-article h1 { font-size: clamp(2.8rem, 15vw, 5rem); } }