/* Blog layouts share Fade's typography and palette in site.css. */
.post-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding-block: 32px;
  border-top: 1px solid var(--border);
}
.post-card:first-child { padding-top: 0; border-top: 0; }
.post-card-image { overflow: hidden; border-radius: var(--radius-lg); }
.post-card-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card h2, .post-card h3 { font-size: clamp(24px, 3vw, 34px); line-height: 1.18; margin: 12px 0 16px; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--accent); }
.post-card p { color: var(--muted); margin: 0; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13px; color: var(--muted); }
.post-category { color: var(--accent); font-weight: 600; }
.post-card .more-link { min-height: 44px; margin-top: 18px; }
.post-card.text-only { grid-template-columns: 1fr; max-width: 72ch; }
.blog-intro { padding-block: clamp(48px, 7vw, 88px) 40px; }
.blog-intro h1 { margin-bottom: 20px; }
.blog-posts { padding-bottom: clamp(56px, 8vw, 96px); }
.article-head { max-width: 960px; margin-inline: auto; padding-top: clamp(32px, 5vw, 64px); }
.back-link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 24px; color: var(--accent); font-weight: 600; }
.article-head h1 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.12; margin-bottom: 24px; }
.article-image { max-width: 960px; margin: 36px auto 0; }
.article-image img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.article-body { max-width: 72ch; margin: 40px auto 0; font-size: 18px; line-height: 1.8; overflow-wrap: break-word; }
.article-body > :first-child { margin-top: 0; }
.article-body p { margin-block: 0 24px; }
.article-body h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.25; margin: 48px 0 20px; }
.article-body h3 { margin: 32px 0 16px; }
.article-body li { padding-left: 4px; margin-bottom: 12px; }
.article-body ul, .article-body ol { padding-left: 24px; margin-block: 20px 32px; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body img { height: auto; border-radius: var(--radius); }
.article-end { max-width: 72ch; margin: 48px auto 72px; padding-top: 24px; border-top: 1px solid var(--border); }
.article-end .row-between { flex-wrap: wrap; }
.blog-page :is(h1, h2, h3) { overflow-wrap: break-word; }
.blog-page .topnav nav a[aria-current="page"], .blog-page .topnav nav a[aria-current="true"] { color: var(--accent); font-weight: 600; }
.skip-link { position: absolute; left: 16px; top: 8px; z-index: 30; padding: 12px 16px; background: var(--surface); color: var(--accent); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.topnav nav a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 920px) {
  .topnav nav { gap: 18px; }
  .post-card { grid-template-columns: 1fr; }
  .post-card-image { max-width: 640px; }
}
@media (max-width: 720px) {
  .topnav-inner { gap: 12px; }
  .topnav nav { display: flex; }
  .topnav nav a:not(.blog-nav-link) { display: none; }
  .topnav .btn { padding-inline: 14px; white-space: nowrap; }
  .article-body { font-size: 17px; }
}
@media (prefers-color-scheme: dark) {
  .blog-page {
    --bg: #101415;
    --surface: #1C2223;
    --fg: #F2F5F4;
    --muted: #98A0A0;
    --accent: #69D6C5;
    --border: color-mix(in oklch, var(--fg) 14%, var(--bg));
  }
  .blog-page .btn-primary { color: #0A2621; }
}
@media (prefers-reduced-transparency: reduce) {
  .topnav { background: var(--bg); backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .more-link, .more-link::after { transition: none; }
}