/* Header border — always visible on blog pages (no scroll JS) */
.site-header { border-bottom-color: var(--border) !important; }

/* Sticky footer */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* Blog shared styles */
.blog-hero { padding-top: 120px; padding-bottom: var(--space-3xl); }
.blog-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; }
.blog-hero__lede { color: var(--text-secondary); margin-top: var(--space-sm); font-size: 1.1rem; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-3xl);
}

.blog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: border-color 0.18s, transform 0.18s;
}
.blog-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.blog-card__meta { font-size: 0.8rem; color: var(--text-tertiary); }
.blog-card__title { font-size: 1.15rem; font-weight: 600; line-height: 1.35; }
.blog-card__title a { color: var(--text); }
.blog-card__title a:hover { color: var(--primary); }
.blog-card__excerpt { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; flex: 1; }
.blog-card__read { font-size: 0.85rem; font-weight: 600; color: var(--primary); margin-top: auto; }

/* Post page */
.post-header { padding-top: 120px; padding-bottom: var(--space-4xl); }
.post-header__back { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 0.875rem; color: var(--text-secondary); margin-bottom: var(--space-3xl); }
.post-header__back:hover { color: var(--primary); }
.post-header__meta { font-size: 0.8rem; color: var(--text-tertiary); margin-bottom: var(--space-lg); }
.post-header__title { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; max-width: 760px; }
.post-header__lede { font-size: 1.15rem; color: var(--text-secondary); margin-top: var(--space-xl); max-width: 680px; line-height: 1.7; }

.post-body { max-width: 760px; }
.post-body h2 { font-size: 1.5rem; font-weight: 700; margin-top: var(--space-5xl); margin-bottom: var(--space-lg); letter-spacing: -0.02em; }
.post-body h3 { font-size: 1.15rem; font-weight: 600; margin-top: var(--space-4xl); margin-bottom: var(--space-md); }
.post-body p { color: var(--text-secondary); line-height: 1.75; margin-bottom: var(--space-xl); }
.post-body ul, .post-body ol { color: var(--text-secondary); line-height: 1.75; margin-bottom: var(--space-xl); padding-left: var(--space-3xl); list-style: disc; }
.post-body li { margin-bottom: var(--space-sm); }
.post-body strong { color: var(--text); font-weight: 600; }
.post-body .callout {
  background: var(--surface);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-xl) var(--space-2xl);
  margin: var(--space-3xl) 0;
}
.post-body .callout p { margin: 0; }

.post-cta { margin-top: var(--space-6xl); padding: var(--space-4xl); background: var(--surface); border-radius: var(--radius-xl); border: 1px solid var(--border); text-align: center; }
.post-cta h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: var(--space-md); }
.post-cta p { color: var(--text-secondary); margin-bottom: var(--space-3xl); }

nav.nav__link--active { color: var(--primary); }
a.nav__link--active { color: var(--primary); }