.blog-main { padding-bottom: 5rem; }
.blog-intro { max-width: 820px; margin: 0 auto; padding: 4rem 0 2.5rem; }
.blog-intro h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin: .8rem 0 1.3rem; }
.blog-intro p { color: var(--text-secondary); }
.blog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.8rem; }
.blog-card { display: flex; flex-direction: column; gap: 1rem; }
.blog-card h2 { font-size: 1.5rem; line-height: 1.35; }
.blog-card p { color: var(--text-secondary); }
.blog-card .card-link { margin-top: auto; }
.blog-meta { font-size: .85rem; color: var(--text-secondary); margin: 1rem 0; }
.blog-breadcrumb { color: var(--accent-cyan); display: inline-block; margin-bottom: 1rem; }
.article-body { max-width: 780px; margin: 0 auto; font-size: 1.05rem; overflow-wrap: anywhere; }
.article-body p { color: var(--text-secondary); margin: 1.2rem 0; line-height: 1.85; }
.article-body strong { color: var(--text-primary); }
.article-body h2 { font-size: 1.65rem; margin: 2.8rem 0 1rem; }
.article-body h3 { font-size: 1.2rem; margin: 1.8rem 0 .8rem; }
.article-body ul,.article-body ol { padding-left: 1.5rem; margin: 1.2rem 0; color: var(--text-secondary); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin: .65rem 0; }
.article-body a { color: var(--accent-cyan); text-decoration: underline; text-underline-offset: 3px; }
.article-lead { font-size: 1.2rem; }
.article-note { padding: 1.4rem; border-left: 3px solid var(--accent-cyan); background: var(--bg-surface); border-radius: 0 8px 8px 0; margin: 1.8rem 0; }
.blog-cta { max-width: 780px; margin: 3rem auto 0; padding: 2rem; }
.blog-cta h2 { margin-bottom: 1rem; }
.blog-cta p { color: var(--text-secondary); margin-bottom: 1.5rem; }
.blog-main a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 5px; }
@media(max-width: 700px) { .blog-grid { grid-template-columns: 1fr; } .blog-intro { padding-top: 2.5rem; } .blog-card,.blog-cta { padding: 1.5rem; } }
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .blog-main * { transition: none !important; } }