/* Blog pages only. Builds on ../site.css + ../brand/tokens.css; no new colours. */
.crumbs { font-size: var(--aw-fs-small); color: var(--aw-color-text-muted); margin-bottom: var(--aw-space-4); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--aw-target); }
.post-meta { font-size: var(--aw-fs-caption); color: var(--aw-color-text-muted); }
.post h2 { margin-top: var(--aw-space-7); }
.post ul, .post ol { padding-inline-start: var(--aw-space-5); }
.post li + li { margin-top: var(--aw-space-2); }
.post .table-scroll { margin-block: var(--aw-space-5); }
.demo-inline { display: inline-block; font-size: var(--aw-fs-caption); font-weight: var(--aw-fw-medium); color: var(--aw-color-text-2);
  background: var(--aw-color-surface-2); border: 1px dashed var(--aw-color-border-strong); border-radius: var(--aw-radius-pill); padding: 0 var(--aw-space-2); }
.post-cta { background: var(--aw-color-surface); border: 1px solid var(--aw-color-border); border-inline-start: 4px solid var(--aw-color-accent);
  border-radius: var(--aw-radius-md); padding: var(--aw-space-5); margin-block: var(--aw-space-7); }
.post-cta-h { font-weight: var(--aw-fw-bold); font-size: var(--aw-fs-h3); margin-bottom: var(--aw-space-2); }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: var(--aw-space-3); }
.post-cta-actions .btn { flex: 1 1 200px; }
@media (min-width: 600px) { .post-cta-actions .btn { flex: 0 0 auto; } }
.post-sources { font-size: var(--aw-fs-small); color: var(--aw-color-text-2); }
.post-list { list-style: none; padding: 0; margin: var(--aw-space-6) 0 0; display: grid; gap: var(--aw-space-4); }
.post-card { background: var(--aw-color-surface); border: 1px solid var(--aw-color-border); border-radius: var(--aw-radius-lg); padding: var(--aw-space-5); }
.post-card h2 { font-size: var(--aw-fs-h3); margin: 0 0 var(--aw-space-2); }
.post-card h2 a { color: var(--aw-color-text); text-decoration: none; }
.post-card h2 a:hover { color: var(--aw-color-primary); text-decoration: underline; }
.post-card p { color: var(--aw-color-text-2); margin-bottom: var(--aw-space-2); }
.post-card .post-meta { margin: 0; }
/* numbers/equations inside <bdi> have no strong direction: force LTR so "40 × 4/12 ≈ 13" is not mirrored */
main bdi { direction: ltr; }

/* topic clusters (hubs, cluster map, related) */
.post-card h3 { font-size: var(--aw-fs-h3); margin: 0 0 var(--aw-space-2); }
.post-card h3 a { color: var(--aw-color-text); text-decoration: none; }
.post-card h3 a:hover { color: var(--aw-color-primary); text-decoration: underline; }
.sub-jump ul { list-style: none; padding: 0; margin: var(--aw-space-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--aw-space-2); }
.sub-jump a { display: inline-flex; align-items: center; min-height: var(--aw-target); padding: 0 var(--aw-space-4);
  border: 1px solid var(--aw-color-border); border-radius: var(--aw-radius-pill); background: var(--aw-color-surface);
  color: var(--aw-color-text); text-decoration: none; font-size: var(--aw-fs-small); }
.sub-jump a:hover { border-color: var(--aw-color-primary); color: var(--aw-color-primary); }
.hub .sub { margin-top: var(--aw-space-7); padding-block: 0; }
.hub .sub h2 { margin-bottom: var(--aw-space-2); }
.related { margin-top: var(--aw-space-7); padding-top: var(--aw-space-5); border-top: 1px solid var(--aw-color-border); }
.related-h { font-weight: var(--aw-fw-bold); margin-bottom: var(--aw-space-2); }
.related ul { margin: 0; }
.related li a { display: inline-block; padding-block: var(--aw-space-2); }
.pillar { background: var(--aw-color-surface); border: 1px solid var(--aw-color-border); border-radius: var(--aw-radius-lg);
  padding: var(--aw-space-5); margin-top: var(--aw-space-6); }
.pillar h2 { margin-top: 0; font-size: var(--aw-fs-h3); }
.pillar h2 a { color: var(--aw-color-text); }
.pillar > p { color: var(--aw-color-text-2); }
.map-subs { display: grid; gap: var(--aw-space-4); }
@media (min-width: 900px) { .map-subs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.map-sub h3 { font-size: var(--aw-fs-small); font-weight: var(--aw-fw-bold); color: var(--aw-color-text-2); margin: 0 0 var(--aw-space-2); }
.map-sub ul { list-style: none; padding: 0; margin: 0; }
.map-sub li + li { margin-top: var(--aw-space-1); }
.map-sub li a, .pillar-more a { display: inline-block; padding-block: var(--aw-space-2); }
.pillar-more { margin: var(--aw-space-3) 0 0; font-weight: var(--aw-fw-medium); }
