/* ---------- Blog: shared chrome extras ---------- */
.primary-nav a.active, .mobile-nav a.active{ color:var(--artery); }

/* ---------- Blog hero (compact) ---------- */
.blog-hero{ padding-block:56px 40px; border-bottom:1px solid var(--mist); }
.blog-hero h1{ font-size:clamp(2rem,4vw,2.9rem); margin-top:.5rem; color:var(--vein-deep); }
.blog-hero p{ margin-top:1rem; max-width:60ch; color:var(--ink-soft); font-size:1.05rem; }
.breadcrumb{
  display:flex; width:fit-content; align-items:center; gap:.4em; font-size:.88rem; font-weight:600;
  color:var(--vein); text-decoration:none; margin-bottom:1.6rem;
}
.breadcrumb:hover{ color:var(--artery); }
.breadcrumb svg{ width:1em; height:1em; }

/* ---------- Article index grid ---------- */
.article-grid{ display:grid; gap:22px; grid-template-columns:repeat(1,1fr); padding-block:48px 80px; }
@media (min-width:700px){ .article-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .article-grid{ grid-template-columns:repeat(3,1fr); } }
.article-card{
  background:var(--card); border:1px solid var(--mist); border-radius:var(--radius);
  padding:1.7rem 1.5rem; display:flex; flex-direction:column; gap:.85rem;
  box-shadow:0 18px 34px -28px rgba(41,53,69,.35); text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.article-card:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -26px rgba(41,53,69,.4); }
.article-card .icon-badge{
  width:44px; height:44px; border-radius:12px; background:var(--paper);
  display:flex; align-items:center; justify-content:center; color:var(--vein); flex-shrink:0;
}
.article-card h2{ font-size:1.15rem; color:var(--vein-deep); }
.article-card p{ color:var(--ink-soft); font-size:.92rem; }
.article-card .read-more{
  margin-top:auto; font-weight:700; font-size:.85rem; color:var(--artery); display:inline-flex; align-items:center; gap:.4em;
}

/* ---------- Article page ---------- */
.article-shell{ padding-block:48px 30px; }
.article-shell .eyebrow{ margin-bottom:.6rem; }
.article-shell h1{ font-size:clamp(2rem,4.2vw,3rem); max-width:22ch; color:var(--vein-deep); }
.article-lede{ margin-top:1.1rem; max-width:64ch; font-size:1.12rem; color:var(--ink-soft); }

.byline{
  display:flex; align-items:center; gap:.9rem; margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--mist);
}
.byline img{ width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:top center; }
.byline strong{ display:block; font-size:.95rem; color:var(--vein-deep); }
.byline span{ display:block; font-size:.8rem; color:var(--ink-soft); font-family:var(--font-mono); }

.prose{ max-width:70ch; padding-block:8px 56px; }
.prose h2{ font-size:1.55rem; color:var(--vein-deep); margin-top:2.6rem; margin-bottom:.9rem; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.15rem; color:var(--vein-deep); margin-top:1.8rem; margin-bottom:.6rem; }
.prose p{ margin-top:1rem; color:var(--ink-soft); font-size:1.02rem; }
.prose p:first-of-type{ margin-top:0; }
.prose ul{ margin-top:1rem; display:flex; flex-direction:column; gap:.6rem; }
.prose ul li{
  position:relative; padding-left:1.4rem; color:var(--ink-soft); font-size:1.02rem;
}
.prose ul li::before{
  content:''; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--artery);
}
.prose strong{ color:var(--vein-deep); }
.prose a{ color:var(--artery); font-weight:600; }

.callout{
  margin-top:1.8rem; padding:1.3rem 1.5rem; border-radius:var(--radius); background:var(--paper);
  border:1px solid var(--mist); border-left:4px solid var(--artery);
}
.callout p{ margin-top:0; font-size:.96rem; }
.callout p + p{ margin-top:.6rem; }

.article-cta{
  background:var(--vein-deep); color:var(--paper); border-radius:var(--radius);
  padding:2.2rem; text-align:center; margin-top:1rem;
}
.article-cta h3{ font-size:1.4rem; color:#F7F4EC; }
.article-cta p{ margin-top:.6rem; color:#B7C0D1; }
.article-cta .btn{ margin-top:1.3rem; }

.related{ padding-block:20px 70px; border-top:1px solid var(--mist); }
.related h4{ font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin-bottom:1.2rem; }
.related-grid{ display:grid; gap:16px; grid-template-columns:repeat(1,1fr); }
@media (min-width:700px){ .related-grid{ grid-template-columns:repeat(3,1fr); } }