/* Blog-specific styles — extends shared.css */
.blog-hero{text-align:center;padding:64px 24px 48px;max-width:800px;margin:0 auto}
.blog-hero .eyebrow{font-size:13px;font-weight:500;color:var(--blue);letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.blog-hero h1{font-size:clamp(32px,5vw,56px);font-weight:800;letter-spacing:-1px;line-height:1.08;margin-bottom:14px}
.blog-hero p{font-size:17px;color:var(--text-secondary);max-width:520px;margin:0 auto}

/* Article grid */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;max-width:var(--max-w);margin:0 auto;padding:0 24px 64px}
.blog-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:24px;text-decoration:none;color:inherit;transition:border-color .2s,transform .15s;display:flex;flex-direction:column;gap:10px}
.blog-card:hover{border-color:rgba(0,113,227,.4);transform:translateY(-2px)}
.blog-card-tag{font-size:11px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.06em}
.blog-card h2{font-size:17px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;line-height:1.35}
.blog-card p{font-size:13px;color:var(--text-secondary);line-height:1.6;flex:1}
.blog-card-meta{font-size:12px;color:var(--text-tertiary);display:flex;gap:12px}
.read-more{font-size:13px;font-weight:500;color:var(--blue);margin-top:4px}

/* Article page */
.article-wrap{max-width:740px;margin:0 auto;padding:48px 24px 80px}
.article-header{margin-bottom:40px}
.article-tag{font-size:12px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;display:block}
.article-header h1{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.7px;line-height:1.12;margin-bottom:16px}
.article-meta{font-size:13px;color:var(--text-tertiary);display:flex;gap:16px;flex-wrap:wrap;padding-bottom:24px;border-bottom:0.5px solid var(--border)}
.article-body{font-size:16px;line-height:1.8;color:var(--text-secondary)}
.article-body h2{font-size:22px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px;margin:40px 0 14px}
.article-body h3{font-size:17px;font-weight:600;color:var(--text-primary);margin:28px 0 10px}
.article-body p{margin-bottom:18px}
.article-body ul,.article-body ol{padding-left:22px;margin-bottom:18px}
.article-body li{margin-bottom:8px;line-height:1.7}
.article-body strong{color:var(--text-primary);font-weight:600}
.article-body a{color:var(--blue);text-decoration:none}
.article-body a:hover{text-decoration:underline}
.article-body code{font-family:var(--font-mono);font-size:13px;background:var(--bg-secondary);border:0.5px solid var(--border);border-radius:4px;padding:2px 6px;color:#9e5c9e}
.article-body pre{background:var(--bg-secondary);border:0.5px solid var(--border-medium);border-radius:var(--radius-md);padding:18px 20px;overflow-x:auto;margin-bottom:20px}
.article-body pre code{background:none;border:none;padding:0;font-size:13px;line-height:1.7;color:var(--text-primary)}
.article-body blockquote{border-left:3px solid var(--blue);padding:12px 18px;background:rgba(0,113,227,.05);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:24px 0;font-style:italic;color:var(--text-secondary)}

/* CTA box */
.tool-cta{background:var(--bg-secondary);border:0.5px solid var(--border-medium);border-radius:var(--radius-lg);padding:24px 28px;margin:40px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tool-cta-text h3{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:4px}
.tool-cta-text p{font-size:13px;color:var(--text-secondary);margin:0}

/* Related articles */
.related-articles{margin-top:56px;padding-top:40px;border-top:0.5px solid var(--border)}
.related-articles h3{font-size:18px;font-weight:700;margin-bottom:20px}
.related-grid-sm{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.related-sm-card{background:var(--bg-secondary);border:0.5px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;text-decoration:none;font-size:13px;font-weight:500;color:var(--text-primary);transition:border-color .15s}
.related-sm-card:hover{border-color:var(--blue);color:var(--blue)}

/* Reading progress bar */
.progress-bar{position:fixed;top:var(--nav-height);left:0;height:2px;background:var(--blue);z-index:99;transition:width .1s}