.blog-header { background: var(--color-background); border-block-end: 1px solid var(--color-border); }
.blog-header-inner { min-block-size: 82px; display: flex; align-items: center; gap: 32px; }
.blog-nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); margin-inline-start: auto; }
.blog-nav a { color: var(--color-muted); font-size: 14px; font-weight: 700; white-space: nowrap; }
.blog-nav a:hover, .blog-nav a[aria-current] { color: var(--color-green); text-decoration: underline; }
.blog-header-cta { min-block-size: 42px; padding: 8px 17px; white-space: nowrap; }
.blog-intro { padding-block: clamp(64px, 8vw, 116px) clamp(50px, 6vw, 80px); border-block-end: 1px solid var(--color-border); }
.blog-intro h1 { max-inline-size: 840px; font-size: clamp(38px, 5vw, 64px); line-height: 1.48; }
.blog-intro p { max-inline-size: 68ch; margin-block-start: 20px; color: var(--color-muted); font-size: clamp(16px, 1.6vw, 20px); line-height: 2; }
.blog-content { padding-block: clamp(44px, 5vw, 72px) 100px; }
.blog-feature { display: grid; grid-template-columns: minmax(0, 1.17fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 68px); align-items: center; padding-block-end: clamp(48px, 7vw, 88px); border-block-end: 1px solid var(--color-border); }
.blog-feature-visual, .blog-card-visual { display: block; overflow: hidden; border-radius: var(--radius-medium); background: var(--color-sage); }
.blog-feature-visual { aspect-ratio: 1.55; }
.blog-feature-visual img, .blog-card-visual img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 450ms var(--ease-out); }
.blog-feature-visual:hover img, .blog-card-visual:hover img { transform: scale(1.035); }
.blog-image-fallback { display: flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 100%; padding: 24px; color: var(--color-green); font-family: var(--font-en); font-size: clamp(22px, 4vw, 40px); font-weight: 700; text-align: center; }
.blog-feature-copy time, .blog-card time, .blog-article-header time { color: var(--color-muted); font-size: 13px; }
.blog-feature-copy h2 { margin-block: 18px; font-size: clamp(28px, 3vw, 40px); line-height: 1.5; }
.blog-feature-copy h2 a:hover, .blog-card h2 a:hover { color: var(--color-green); }
.blog-feature-copy p, .blog-card p { color: var(--color-muted); line-height: 2; }
.blog-read-link { display: inline-flex; align-items: center; margin-block-start: 24px; color: var(--color-green); font-size: 14px; font-weight: 700; }
.blog-read-link:hover { text-decoration: underline; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 30px; padding-block-start: 60px; }
.blog-card-visual { aspect-ratio: 1.5; margin-block-end: 22px; }
.blog-card h2 { margin-block: 12px; font-size: 22px; line-height: 1.55; }
.blog-card .blog-read-link { margin-block-start: 16px; }
.blog-empty { padding-block: 64px; }
.blog-empty h2 { font-size: 27px; }
.blog-empty p { margin-block-start: 12px; color: var(--color-muted); }
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin-block-start: 72px; color: var(--color-muted); font-size: 14px; }
.blog-pagination a { padding: 9px 15px; border: 1px solid var(--color-border); border-radius: var(--radius-small); color: var(--color-green); font-weight: 700; }
.blog-pagination a:hover { background: var(--color-sage); }
.blog-article-header { max-inline-size: 890px; padding-block: 42px 52px; }
.blog-breadcrumb { display: flex; gap: 12px; align-items: center; overflow: hidden; margin-block-end: 44px; color: var(--color-muted); font-size: 13px; white-space: nowrap; }
.blog-breadcrumb a { color: var(--color-green); }
.blog-breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; }
.blog-article-header h1 { margin-block: 18px 20px; font-size: clamp(36px, 5vw, 60px); line-height: 1.5; }
.blog-article-excerpt { color: var(--color-muted); font-size: clamp(17px, 1.7vw, 21px); line-height: 2; }
.blog-article-cover { max-inline-size: 1080px; aspect-ratio: 1.9; overflow: hidden; border-radius: var(--radius-medium); background: var(--color-sage); }
.blog-article-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.blog-article-layout { max-inline-size: 890px; padding-block: 60px 80px; }
.blog-prose { max-inline-size: 70ch; font-size: 17px; line-height: 2.1; overflow-wrap: anywhere; }
.blog-prose > * + * { margin-block-start: 1.4em; }
.blog-prose h2, .blog-prose h3, .blog-prose h4 { margin-block-start: 2em; margin-block-end: .55em; line-height: 1.5; }
.blog-prose h2 { font-size: 29px; }
.blog-prose h3 { font-size: 23px; }
.blog-prose h4 { font-size: 19px; }
.blog-prose ul, .blog-prose ol { padding-inline-start: 1.6em; }
.blog-prose li + li { margin-block-start: .4em; }
.blog-prose a { color: var(--color-green); text-decoration: underline; }
.blog-prose blockquote { margin-inline: 0; padding-inline: 22px; border-inline-start: 1px solid var(--color-green); color: var(--color-muted); }
.blog-prose pre, .blog-prose table { max-inline-size: 100%; overflow-x: auto; }
.blog-prose code, .blog-prose pre { font-family: ui-monospace, monospace; }
.blog-article-end { max-inline-size: 890px; padding-block: 0 96px; border-block-start: 1px solid var(--color-border); }
.blog-footer { border-block-start: 1px solid var(--color-border); }
.blog-footer-inner { min-block-size: 120px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--color-muted); font-size: 13px; }
.blog-footer nav { display: flex; gap: 24px; }
.blog-footer a:hover { color: var(--color-green); text-decoration: underline; }
@media (max-width: 800px) {
    .blog-header-inner { flex-wrap: wrap; padding-block: 12px; gap: 12px 20px; }
    .blog-nav { order: 3; inline-size: 100%; justify-content: space-between; }
    .blog-feature { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .blog-header-cta { margin-inline-start: auto; }
    .blog-grid { grid-template-columns: 1fr; gap: 46px; }
    .blog-intro { padding-block: 54px 48px; }
    .blog-feature { gap: 24px; }
    .blog-feature-copy h2 { font-size: 28px; }
    .blog-article-cover { border-radius: 0; inline-size: 100%; }
    .blog-article-layout { padding-block: 44px 60px; }
    .blog-footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-feature-visual img, .blog-card-visual img { transition: none; }
}