.blog-page { --blog-ink: #0f172a; --blog-muted: #64748b; --blog-accent: #0f766e; }
.blog-hero { padding: 3rem 0 1.5rem; background: linear-gradient(160deg, #f0fdfa 0%, #f8fafc 60%, #fff 100%); border-bottom: 1px solid #e2e8f0; }
.blog-eyebrow { margin: 0 0 .5rem; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--blog-accent); font-weight: 600; }
.blog-eyebrow a { color: inherit; text-decoration: none; }
.blog-hero h1 { margin: 0 0 .75rem; font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--blog-ink); line-height: 1.2; }
.blog-lead { margin: 0; max-width: 40rem; color: var(--blog-muted); font-size: 1.05rem; }
.blog-list { padding: 2rem 0 3rem; display: grid; gap: 1.25rem; }
.blog-card { padding: 1.25rem 0; border-bottom: 1px solid #e2e8f0; }
.blog-card h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.blog-card h2 a { color: var(--blog-ink); text-decoration: none; }
.blog-card h2 a:hover { color: var(--blog-accent); }
.blog-card p { margin: 0 0 .5rem; color: var(--blog-muted); }
.blog-card time, .blog-hero time { font-size: .85rem; color: #94a3b8; }
.blog-content { padding: 2rem 0 3.5rem; max-width: 42rem; }
.blog-content h2 { margin-top: 1.75rem; color: var(--blog-ink); }
.blog-more { margin-top: 2rem; color: var(--blog-muted); }
.blog-more a { color: var(--blog-accent); }