.blog-page { background: var(--paper); }
.blog-article { width: min(900px, calc(100% - 48px)); margin: auto; padding: 145px 0 125px; }
.blog-article .eyebrow { margin: 0; }
.blog-article h1 { max-width: 820px; margin: 24px 0 28px; font-size: clamp(48px, 8vw, 92px); line-height: .94; letter-spacing: -.09em; }
.blog-article h1 em { color: #8ba900; font: 400 1.03em Georgia, serif; }
.blog-intro { max-width: 650px; color: var(--muted); font-size: 17px; line-height: 1.8; }
.blog-meta { display: flex; gap: 18px; margin-top: 35px; color: var(--coral); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.blog-body { max-width: 680px; margin-top: 90px; }
.blog-body h2 { margin: 55px 0 16px; font-size: 30px; letter-spacing: -.07em; }
.blog-body h2:first-child { margin-top: 0; }
.blog-body p { margin: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.blog-body ul { display: grid; gap: 15px; padding: 0; margin: 25px 0; list-style: none; }
.blog-body li { color: var(--muted); font-size: 14px; line-height: 1.7; }
.blog-body li::before { content: "↗"; margin-right: 10px; color: var(--coral); }
.blog-back { display: inline-block; margin-top: 55px; border-bottom: 1px solid var(--ink); padding-bottom: 6px; font-size: 12px; font-weight: 800; }
@media (max-width: 760px) {
  .blog-article { width: min(100% - 38px, 900px); padding: 115px 0 90px; }
  .blog-intro { font-size: 15px; }
  .blog-body { margin-top: 60px; }
}