.blog-hero { grid-template-columns:minmax(0,1fr); }
.blog-hero .lead { max-width:75ch; }
.blog-card-cover { display:block; width:100%; height:190px; object-fit:cover; border-radius:var(--radius-control); margin-bottom:20px; }
.blog-content img, .blog-figure img { display:block; max-width:100%; height:auto; border-radius:var(--radius-card); }
.blog-content pre { max-width:100%; overflow-x:auto; white-space:pre; }
.blog-content table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.blog-content :is(th,td) { padding:10px; border:var(--border-width) solid var(--border-strong); }
.blog-preview { margin:25px 0; padding:16px 20px; border:1px solid #c8f075; border-radius:var(--radius-control); color:#c8f075; background:#211347; }
.blog-pagination { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:60px; }

/* Editorial composition reuses the site's surfaces, type scale and icon family. */
.blog-article-header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
}
.blog-article-copy { min-width: 0; }
.blog-article-header--text { grid-template-columns: minmax(0, 1fr); }
.blog-article-header h1 { font-size: var(--font-size-section-title); }
.blog-cover { margin: 0; min-width: 0; }
.blog-cover img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%; border-radius: var(--radius-card); }
.blog-cover figcaption { margin-top: var(--space-3); color: var(--muted); font-size: var(--font-size-small); }
.blog-cover figcaption a { color: inherit; text-underline-offset: .2em; }
.blog-content .article-diagram { margin: var(--space-6) 0; }
.blog-content .article-diagram > figcaption { margin: 0 0 var(--space-5); font-family: var(--font-fluid-display); font-size: var(--font-size-subtitle); color: var(--text); }
.blog-content .blog-topic-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.blog-content .blog-topic-points[data-count="2"], .blog-content .blog-topic-points[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-topic-points li { display: flex; flex-direction: column; align-items: start; gap: var(--space-3); min-width: 0; }
.blog-point-icon { color: var(--pink2); display: inline-flex; flex-shrink: 0; }
.blog-point-icon svg { width: var(--font-size-section-title); height: var(--font-size-section-title); }
.blog-topic-points strong { font-size: var(--font-size-card-title); line-height: 1.25; }
.blog-content .blog-topic-points p { margin: 0; color: var(--muted); }
.blog-content .article-illustration { margin: var(--space-6) 0; }
.blog-content .article-illustration > img { width: 100%; }
.blog-content .article-illustration > figcaption { margin-top: var(--space-3); color: var(--muted); font-size: var(--font-size-small); }
.blog-content > p,
.blog-content .blog-section > p,
.blog-content > :is(ul, ol):not(.blog-step-list) li,
.blog-content .blog-section > :is(ul, ol):not(.blog-step-list) li { color: var(--text); }
.blog-content > :first-child { margin-top: 0; }
.blog-content > :last-child { margin-bottom: 0; }
.blog-content .blog-section > h2 { margin-top: 0; }
.blog-content .blog-section + .blog-section { margin-top: calc(var(--space-6) * 2); padding-top: var(--space-6); border-top: var(--border-width) solid var(--border-subtle); }
.blog-content .blog-callout { margin: var(--space-5) 0; border-inline-start: var(--space-1) solid var(--pink2); }
.blog-content .blog-callout > :first-child { margin-top: 0; }
.blog-content .blog-callout > :last-child { margin-bottom: 0; }
.blog-table-wrap { overflow-x: auto; max-width: 100%; margin-block: var(--space-5); }
.blog-content .blog-table-wrap table { display: table; width: 100%; margin: 0; overflow: visible; }
.blog-content .blog-table-wrap :is(th, td) { padding: var(--space-4); vertical-align: top; border-color: var(--border-subtle); }
.blog-content .blog-table-wrap th { color: var(--text); background: var(--surface-inset); text-align: left; }
.blog-content .blog-table-wrap caption { padding-bottom: var(--space-4); text-align: left; color: var(--text); font-size: var(--font-size-card-title); }
.blog-content .blog-step-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); list-style: none; padding: 0; margin-block: var(--space-5); counter-reset: blog-step; }
.blog-content .blog-step-list[data-count="2"], .blog-content .blog-step-list[data-count="4"], .blog-content .blog-step-list[data-count="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-step-list > li { counter-increment: blog-step; min-width: 0; }
.blog-step-list > li::before { content: counter(blog-step, decimal-leading-zero); display: block; color: var(--pink2); font-family: var(--font-fluid-display); font-size: var(--font-size-card-title); margin-bottom: var(--space-3); }
.blog-step-list > li > :first-child { margin-top: 0; }
.blog-step-list > li > :last-child { margin-bottom: 0; }
.blog-card a > .blog-card-cover { height: auto; aspect-ratio: 16 / 9; object-position: 50% 35%; margin-bottom: var(--space-5); }
.blog-related-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 35%; border-radius: var(--radius-control); margin-bottom: var(--space-4); }
.blog-related-item { min-width:0; display:grid; grid-template-rows:1fr auto; }
.blog-card:has(.blog-photo-credit) { display:grid; grid-template-rows:1fr auto; }
.blog-card:has(.blog-photo-credit) > a, .blog-related-item > .blog-related-card { height:auto; }
.blog-photo-credit { margin:var(--space-3) var(--space-4); color:var(--muted); font-size:var(--font-size-small); }
.blog-card .blog-photo-credit a { display:inline; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:inherit; }
@media (max-width: 900px) {
  .blog-article-header { grid-template-columns: minmax(0, 1fr); }
  .blog-cover img { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .blog-content .blog-topic-points, .blog-content .blog-topic-points[data-count] { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .blog-point-icon svg { width: var(--font-size-subtitle); height: var(--font-size-subtitle); }
  .blog-content .blog-step-list, .blog-content .blog-step-list[data-count] { grid-template-columns: minmax(0, 1fr); }
}