/* ═══════════════════════════════════════════════════════════════
   BLOG — founder blog hub + post additions on top of learn.css.
   External file by design: the site CSP is style-src 'self'
   (no inline <style> blocks, no style="" attributes anywhere).
   All tokens come from termi.css (:root).
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hub ─── */
.blog-head{padding:clamp(40px,6vw,64px) 0 clamp(20px,3vw,30px)}
.blog-author{display:flex;align-items:center;gap:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-c);padding:18px 22px;margin-top:clamp(24px,3vw,32px)}
.ba-avatar{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:1px solid var(--border-s);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:.95rem;font-weight:600;letter-spacing:.08em;color:var(--t1);background:var(--bg-e)}
.blog-author p{color:var(--t2);font-size:.88rem;line-height:1.6;margin:2px 0 0}
.blog-author strong{color:var(--t1)}
.blog-author a{color:var(--t1);text-decoration:underline;text-underline-offset:3px}

.blog-list{display:flex;flex-direction:column;gap:16px;margin-top:clamp(28px,4vw,40px)}
.bp{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-c);padding:22px 26px;display:block;transition:border-color var(--dur),transform var(--dur)}
.bp:hover{border-color:var(--border-s);transform:translateY(-2px)}
.bp-top{display:flex;gap:14px;align-items:center;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);margin-bottom:10px}
.bp-top .bp-cat{color:var(--t3)}
.bp h2{font-family:var(--f-display);font-weight:500;letter-spacing:.03em;font-size:1.3rem;line-height:1.35;color:var(--t1);margin-bottom:8px}
.bp p{color:var(--t2);font-size:.92rem;line-height:1.65;margin-bottom:10px}
.bp .bp-meta{font-family:var(--f-mono);font-size:.72rem;color:var(--t4)}

/* ─── Post byline + author box ─── */
.art-meta a{color:var(--t2);text-decoration:underline;text-underline-offset:3px}
.art-meta a:hover{color:var(--t1)}
.author-card{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-c);padding:20px 22px;margin:36px 0 8px}
.author-card .ba-avatar{width:46px;height:46px;font-size:.85rem}
.author-card h3{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:4px}
.author-card p{color:var(--t2);font-size:.87rem;line-height:1.65;margin:0}
.author-card a{color:var(--t1);text-decoration:underline;text-underline-offset:3px}

/* ─── Author page ─── */
.author-links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.author-links a{font-family:var(--f-mono);font-size:.8rem;color:var(--t2);border:1px solid var(--border);border-radius:999px;padding:8px 16px;transition:all var(--dur)}
.author-links a:hover{color:var(--t1);border-color:var(--border-s);background:var(--accent-m)}

@media (max-width:760px){
  .bp{padding:18px}
  .blog-list{gap:12px}
}