/* ===== Blog styles (extends styles.css) ===== */
.blog-hero{padding:140px 0 40px;text-align:center}
.blog-hero .tag{margin-bottom:16px}
.blog-hero h1{font-size:clamp(30px,5vw,52px);margin-bottom:16px}
.blog-hero p{color:var(--muted);font-size:18px;max-width:640px;margin:0 auto}

.blog-list{padding:30px 0 90px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-grid .post-card{min-height:100%}

.crumbs{color:var(--muted);font-size:14px;padding:110px 0 0}
.crumbs a{color:var(--accent)}
.crumbs a:hover{text-decoration:underline}

/* article */
.article{max-width:760px;margin:0 auto;padding:24px 0 90px}
.article-head{margin:20px 0 34px}
.article-head .tag{margin-bottom:16px}
.article-head h1{font-size:clamp(28px,4.4vw,46px);margin-bottom:14px;line-height:1.15}
.article-meta{color:var(--muted);font-size:14px;display:flex;gap:16px;flex-wrap:wrap}
.article-cover{width:100%;border-radius:var(--radius);border:1px solid var(--panel-brd);margin-bottom:8px;background:linear-gradient(135deg,rgba(63,169,255,.14),rgba(123,92,255,.1));aspect-ratio:16/7;display:grid;place-items:center;font-size:64px}

.prose{font-size:17px;line-height:1.8;color:#d4ddf2}
.prose h2{font-size:26px;margin:38px 0 14px;color:var(--text)}
.prose h3{font-size:20px;margin:28px 0 10px;color:var(--text)}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{margin:0 0 18px 22px;display:flex;flex-direction:column;gap:9px}
.prose li{padding-left:4px}
.prose b,.prose strong{color:var(--text)}
.prose a{color:var(--accent);text-decoration:underline}
.prose blockquote{border-left:3px solid var(--accent);background:rgba(63,169,255,.08);padding:14px 18px;border-radius:0 12px 12px 0;margin:0 0 20px;color:var(--muted)}
.prose .callout{background:var(--panel);border:1px solid var(--panel-brd);border-radius:16px;padding:20px 22px;margin:0 0 22px;display:flex;gap:14px;align-items:flex-start}
.prose .callout .ci{font-size:26px}

.article-cta{margin:44px 0 0;background:linear-gradient(135deg,rgba(63,169,255,.14),rgba(123,92,255,.1));border:1px solid rgba(63,169,255,.25);border-radius:var(--radius);padding:34px;text-align:center}
.article-cta h3{font-size:24px;margin-bottom:10px}
.article-cta p{color:var(--muted);margin-bottom:22px}

.related{border-top:1px solid var(--panel-brd);margin-top:50px;padding-top:36px}
.related h3{font-size:20px;margin-bottom:20px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

@media(max-width:960px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.blog-grid,.related-grid{grid-template-columns:1fr}}