/* ============ ARTICLE HEADER ============ */
.article-header{ max-width:720px; margin:0 auto; padding:2.5rem 1.75rem 1.5rem; text-align:center; }
.article-header .kicker{ font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-l); margin-bottom:1rem; display:block; }
.article-header h1{
  font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,4vw,2.3rem); line-height:1.2;
  color:var(--text1); letter-spacing:-.02em; margin-bottom:1rem; text-wrap:balance;
}
.article-meta{ font-size:.85rem; color:var(--text3); }

/* ============ BLOG INDEX ============ */
.blog-grid{ max-width:1080px; margin:2rem auto 5rem; padding:0 1.75rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.blog-card{
  display:block; text-decoration:none;
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:1.75rem; transition:border-color .15s, transform .15s;
}
.blog-card:hover{ border-color:var(--primary); transform:translateY(-2px); }
.blog-card .kicker{ font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-l); margin-bottom:.75rem; }
.blog-card h2{ font-family:var(--display); font-size:1.15rem; font-weight:700; color:var(--text1); margin-bottom:.6rem; letter-spacing:-.01em; line-height:1.3; }
.blog-card p{ font-size:.9rem; color:var(--text2); margin-bottom:1rem; }
.blog-card .meta{ font-size:.78rem; color:var(--text3); }

/* ============ TOC / share (article footer) ============ */
.article-footer{ max-width:720px; margin:3rem auto 0; padding:1.75rem; }
/* Always used nested inside .prose, which already applies max-width + padding - don't redeclare
   either here, or the block gets double-inset relative to the rest of the article. */
.related{ margin:3rem 0 2rem; }
.related h2{ font-family:var(--display); font-size:1.1rem; font-weight:800; color:var(--text1); margin-bottom:1rem; }
.related-list{ display:flex; flex-direction:column; gap:.6rem; }
.related-list a{ color:var(--primary-l); text-decoration:none; font-size:.95rem; font-weight:600; }
.related-list a:hover{ text-decoration:underline; }