/* ---- Blog ---- */
.blog-hero { padding: 120px 0 40px; }
.blog-hero h1 { max-width: 20ch; }
.blog-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 34px; }
.post-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .2s ease, transform .2s ease; }
.post-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.post-card h2, .post-card h3 { font-size: 1.25rem; line-height: 1.35; margin: 0; }
.post-card h2 a, .post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--accent-bright); }
.post-card p { color: var(--muted); margin: 0; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font-size: .82rem; color: var(--muted); letter-spacing: .02em; }
.post-meta .dot-sep { opacity: .5; }
.chip-cat { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-bright); background: var(--accent-soft); border: 1px solid rgba(34,211,238,.25); }
.article { padding-bottom: 60px; }
.article-head { padding-top: 96px; padding-bottom: 24px; }
.article-head h1 { max-width: 26ch; margin: 14px 0 18px; }
.article-body { max-width: none; }
.article-body > * { max-width: 74ch; }
.article-body .related { max-width: none; }
.article-body h2 { margin: 38px 0 12px; font-size: 1.55rem; }
.article-body h3 { margin: 26px 0 8px; font-size: 1.15rem; }
.article-body p, .article-body li { color: #cbd8e6; line-height: 1.75; }
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 18px 22px; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--accent-bright); }
.article-body .lede { font-size: 1.12rem; color: var(--text); }
.article-body strong { color: var(--text); }
.related { margin-top: 54px; padding-top: 30px; border-top: 1px solid var(--border); }
.related h2 { font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
@media (max-width: 720px) { .blog-hero { padding-top: 92px; } .article-head { padding-top: 84px; } }
@media (max-width: 560px) { .article-head h1 { max-width: none; } .article-body > * { max-width: 100%; } }