/* article37: article + blog index layout (25 Oct 2026). Loaded after layout.css on /blog/*, /blog, and the guides/glossary/use-cases/compare pages. */

/* ---------- header: one left-aligned column, no repeated-title image ---------- */
.post-h{padding:var(--space-8) 0 0;border:0}
.post-h .wrap{text-align:left}
.post-h .wrap>*{max-width:700px;margin-left:auto;margin-right:auto}
.post-h .crumb,.post-h .post-m{justify-content:flex-start}
.post-h h1{font-size:clamp(34px,3.6vw,48px);line-height:1.08;letter-spacing:-.03em;margin-top:var(--space-4);text-wrap:balance;max-width:700px}
.post-h .hero-p{margin-top:var(--space-5);font-size:var(--text-body-lg);line-height:1.55;color:var(--fg-muted);max-width:700px;text-wrap:pretty}
.post-h .post-m{margin-top:var(--space-5);align-items:center;gap:var(--space-4)}

/* ---------- body: grid with a quiet rail on the left, 700px reading column ---------- */
.post-b{padding:var(--space-8) 0 var(--space-9);border-top:0}
.post-g{display:block}
.post-g .post-c.prose{max-width:700px;margin-left:auto;margin-right:auto;font-size:var(--text-body);line-height:1.55}
.post-c.prose>*+*{margin-top:var(--space-5)}
.post-c.prose p,.post-c.prose li{color:var(--fg-muted);color:color-mix(in srgb,var(--fg) 84%,var(--bg))}
.post-c.prose h2{font-size:clamp(24px,2.4vw,29px);line-height:1.2;letter-spacing:-.02em;margin:var(--space-8) 0 var(--space-4);scroll-margin-top:calc(var(--nav-hc) + var(--space-5))}
.post-c.prose h2:first-child{margin-top:0}
.post-c.prose h3{font-size:20px;margin-top:var(--space-7);scroll-margin-top:calc(var(--nav-hc) + var(--space-5))}
.post-c.prose h2+*,.post-c.prose h3+*{margin-top:var(--space-3)}
.post-c.prose ul,.post-c.prose ol{gap:var(--space-3)}
.post-c.prose blockquote{padding:var(--space-4) var(--space-5)}
.post-c.prose .post-tags{margin-top:var(--space-8)!important}
.post-toc{display:none}

@media (min-width:1200px){
  .post-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,700px) minmax(0,1fr);column-gap:0}
  .post-g .post-c.prose{grid-column:2;margin:0;min-width:0}
  .post-toc{display:block;grid-column:1;justify-self:end;width:200px;margin-right:var(--space-8);padding-top:7px}
  .post-toc nav{position:sticky;top:calc(var(--nav-hc) + var(--space-7))}
  .post-toc .lbl{margin:0 0 var(--space-3);font-size:11px;color:var(--fg-subtle)}
  .post-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:0;font-size:13px;line-height:1.4;border-left:1px solid var(--line)}
  .post-toc li a{display:block;padding:6px 0 6px var(--space-4);margin-left:-1px;border-left:1px solid transparent;color:var(--fg-subtle);text-decoration:none;transition:color var(--dur-instant),border-color var(--dur-instant)}
  .post-toc li a:hover,.post-toc li a:focus-visible{color:var(--fg);border-left-color:var(--fg)}
}

@media (max-width:767px){
  .post-h{padding-top:var(--space-7)}
  .post-h h1{font-size:34px}
  .post-h .hero-p{font-size:var(--text-body-lg)}
  .post-b{padding:var(--space-6) 0 var(--space-8)}
  .post-g .post-c.prose{font-size:var(--text-body);line-height:1.55}
  .post-c.prose h2{margin-top:var(--space-7)}
}

/* ---------- blog index: image cards (cover + title + dek). "Keep reading" at the foot of an article stays text-only; articles carry no top image ---------- */
.post-rel .bp-cv{display:none}
.bl37 .bp a,.post-rel .bp a{padding:0}
.bl37 .bp-b{padding:var(--space-5) var(--space-6) var(--space-5)}
.post-rel .bp-b{padding:var(--space-6) var(--space-6) var(--space-5)}
.bl37 .bp h2,.bl37 .bp h3,.post-rel .bp h2,.post-rel .bp h3{margin-top:var(--space-4);font-size:21px;line-height:1.25;letter-spacing:-.015em}
.bl37 .bp-d,.post-rel .bp-d{margin-top:var(--space-3);font-size:15px;line-height:1.55}
.bl37 .bp-r,.post-rel .bp-r{margin-top:var(--space-5)}
.bl37 .bp-m,.post-rel .bp-m{font-size:11px}
.post-rel .sh{text-align:left;margin-left:auto;margin-right:auto;max-width:880px}
@media (min-width:1100px){.bl37{grid-template-columns:repeat(3,1fr)}}
@media (min-width:761px) and (max-width:1099px){.bl37{grid-template-columns:repeat(2,1fr)}}