.blog-main { padding-block: 32px 80px; }
.blog-heading { padding-bottom: 40px; }
.blog-heading h1 { margin-top: 24px; font-size: 72px; line-height: 1.1; }
.blog-heading h1 > span { color: var(--yellow); }
.blog-heading > p { margin-top: 20px; font-size: 20px; color: var(--muted); }
.blog-list-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.blog-list-heading h2 { font: 600 18px/1.5 var(--body); }
.blog-list-heading a { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--yellow); }
.blog-list-heading a:hover { text-decoration: underline; text-underline-offset: 5px; }
.blog-post { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; padding-block: 36px; border-bottom: 1px solid var(--line); }
.blog-post-image { display: block; width: min(100%, 400px); aspect-ratio: 1; }
.blog-post-image img { display: block; width: 100%; height: 100%; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; }
.blog-post-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 20px; font-size: 14px; }
.blog-post-meta a { color: var(--yellow); text-decoration: underline; text-underline-offset: 4px; }
.blog-post-meta time { color: var(--muted); }
.blog-post h3 { font: 700 34px/1.2 var(--display); }
.blog-post h3 a:hover { color: var(--yellow); }
.blog-post-copy > p { margin-top: 20px; font-size: 16px; line-height: 1.8; color: var(--muted); }
.blog-post-copy > .blog-post-byline { font-size: 14px; color: var(--white); }
.blog-post-copy > .quiet-link { margin-top: 18px; color: var(--yellow); }
.blog-page .site-footer { border-top: 1px solid var(--line); }
@media (max-width: 1000px) {
  .blog-post { gap: 32px; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .blog-post h3 { font-size: 28px; }
}
@media (max-width: 700px) {
  .blog-main { padding-block: 24px 48px; }
  .blog-heading { padding-bottom: 20px; }
  .blog-heading h1 { font-size: 48px; }
  .blog-heading > p { font-size: 18px; }
  .blog-post { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 28px; }
  .blog-post-image { width: min(100%, 320px); }
  .blog-post h3 { font-size: 27px; }
}