.blog-heading { color: var(--color-heading); margin-bottom: 1rem; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.blog-card { overflow: hidden; scroll-margin-top: 160px; }
.blog-card:target { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.blog-cover { display: block; aspect-ratio: 16 / 10; background: var(--color-section-alt); }
.blog-cover img { width: 100%; height: 100%; object-fit: cover; }
.diagram-cover img { object-fit: contain; padding: 12px; background: white; }
.blog-copy { padding: 1.4rem; }
.blog-meta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 1rem; font-size: .85rem; }
.blog-meta .tag { text-transform: capitalize; font-size: .8rem; padding: .25rem .7rem; }
.blog-copy h2 { font-size: 1.25rem; line-height: 1.5; margin-bottom: .8rem; }
.blog-copy p { color: var(--color-text); }
.blog-link { color: var(--color-mid); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.blog-cover:focus-visible, .blog-link:focus-visible { outline: 3px solid var(--color-mid); outline-offset: -3px; }
@media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; } }