/* =========================
   Blog typography alignment
   - Keeps blog titles consistent with homepage (Saira + tighter leading)
   - Scoped to .blog-page so it won't affect the landing page
   ========================= */

.blog-page {
  /* Better reading comfort on blog without changing site-wide styles */
  --blog-text-leading: 1.7;
  --blog-h1-leading: 1.08;  /* adjust 1.06–1.12 if you want tighter/looser */
  --blog-h2-leading: 1.15;
  --blog-h3-leading: 1.2;
}

/* Ensure titles use the same display font as the homepage */
.blog-page h1,
.blog-page h2,
.blog-page h3 {
  font-family: "Saira", sans-serif;
}

/* Article readability */
.blog-page p,
.blog-page li {
  line-height: var(--blog-text-leading);
}

/* Main article title */
.blog-page main h1 {
  line-height: var(--blog-h1-leading);
  letter-spacing: -0.02em;
}

/* Section titles */
.blog-page main h2 {
  line-height: var(--blog-h2-leading);
  letter-spacing: -0.01em;
  margin-top: 1.4em;
}

/* Subsection titles */
.blog-page main h3 {
  line-height: var(--blog-h3-leading);
  letter-spacing: -0.005em;
  margin-top: 1.1em;
}

/* Optional: keep link colors within the chart (avoid browser-blue edge cases) */
.blog-page a {
  color: inherit;
  text-decoration: none;
}

/* No underlines on blog (matches homepage).
   Note: on mobile, a tap can "stick" :hover styles; we neutralize hover/focus/active. */
.blog-page a:hover,
.blog-page a:focus,
.blog-page a:focus-visible,
.blog-page a:active {
  text-decoration: none;
}