.blog-page { padding-bottom: clamp(35px, 6vw, 70px); }
.blog-hero { margin-bottom: 0; }
.blog-intro { max-width: 780px; padding: clamp(34px, 5vw, 60px) clamp(16px, 4vw, 48px) 25px; }
.blog-intro .section-index, .blog-article-aside .section-index { color: var(--secondary-dark); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.blog-intro h2 { margin: 8px 0 12px; color: var(--ink-color); font-family: var(--font-family-display); font-size: clamp(27px, 3vw, 37px); font-weight: 500; }
.blog-intro p { max-width: 660px; margin: 0; color: var(--muted-color); line-height: 1.9; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); padding: 0 clamp(16px, 4vw, 48px); }
.blog-card { display: flex; flex-direction: column; min-height: 275px; padding: clamp(23px, 3vw, 35px); border: 1px solid var(--line-color); border-radius: var(--radius-xl); background: var(--paper-color); box-shadow: var(--shadow-float); }
.blog-category { display: flex; justify-content: space-between; margin: 0 0 30px; color: var(--primary-color); font-size: 12px; font-weight: 700; }
.blog-category span { color: var(--muted-color); font-weight: 400; }
.blog-card h2 { margin: 0 0 13px; font-family: var(--font-family-display); font-size: clamp(22px, 2.1vw, 28px); font-weight: 500; line-height: 1.45; }
.blog-card h2 a { color: var(--ink-color); text-decoration: none; }
.blog-card h2 a:hover { color: var(--primary-color); }
.blog-card > p:not(.blog-category) { margin: 0; color: var(--muted-color); font-size: 14px; line-height: 1.8; }
.blog-read-link { align-self: flex-start; margin-top: auto; padding-top: 30px; color: var(--primary-dark); font-size: 13px; font-weight: 700; text-decoration: none; }
.blog-read-link:hover { color: var(--primary-color); }
.blog-endnote { max-width: 990px; margin: clamp(30px, 5vw, 58px) auto 0; padding: 18px 26px; border-left: 2px solid var(--primary-color); }
.blog-endnote p { margin: 0; color: var(--muted-color); font-size: 13px; line-height: 1.85; }
.blog-endnote a, .blog-prose a { color: var(--primary-dark); text-underline-offset: 3px; }
.blog-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; padding: 20px clamp(16px, 4vw, 48px); color: var(--muted-color); font-size: 12px; }
.blog-breadcrumb a { color: var(--primary-dark); text-decoration: none; }
.blog-article-head { position: relative; padding: clamp(44px, 6vw, 80px) clamp(25px, 6vw, 86px); overflow: hidden; border-radius: 0 0 18px 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--paper-color) 95%, transparent), color-mix(in srgb, var(--paper-color) 70%, transparent)), url('/static/img/homepage-b-landscape.png') center/cover; }
:root[data-theme="warm"] .blog-article-head { background-image: linear-gradient(90deg, color-mix(in srgb, var(--paper-color) 95%, transparent), color-mix(in srgb, var(--paper-color) 70%, transparent)), url('/static/img/homepage-a-landscape.png'); }
.blog-article-head h1 { max-width: 890px; margin: 0; color: var(--ink-color); font-family: var(--font-family-display); font-size: clamp(34px, 5vw, 57px); font-weight: 600; line-height: 1.25; }
.blog-deck { max-width: 690px; margin: 18px 0 0; color: var(--muted-color); font-size: 15px; line-height: 1.85; }
.blog-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 255px; align-items: start; gap: clamp(28px, 5vw, 70px); max-width: 1180px; margin: 0 auto; padding: clamp(35px, 5vw, 65px) clamp(20px, 5vw, 60px); }
.blog-prose { max-width: 760px; color: var(--text-color); font-size: 16px; line-height: 2; }
.blog-prose h2 { margin: 45px 0 15px; color: var(--ink-color); font-family: var(--font-family-display); font-size: clamp(23px, 2.5vw, 30px); font-weight: 500; line-height: 1.4; }
.blog-prose h2:first-child { margin-top: 0; }
.blog-prose p { margin: 0 0 20px; }
.blog-prose .blog-lead { color: var(--ink-color); font-size: 18px; line-height: 1.9; }
.blog-prose ol { padding-left: 1.5em; }
.blog-prose li { padding-left: .4em; margin: 0 0 9px; }
.blog-article-aside { position: sticky; top: 110px; padding: 26px; border: 1px solid var(--line-color); border-radius: var(--radius-xl); background: var(--paper-color); }
.blog-article-aside h2 { margin: 9px 0; color: var(--ink-color); font-family: var(--font-family-display); font-size: 24px; }
.blog-article-aside p:not(.section-index) { color: var(--muted-color); font-size: 13px; line-height: 1.8; }
.blog-article-aside a { display: block; padding: 10px 0; color: var(--primary-dark); font-size: 13px; font-weight: 700; text-decoration: none; }
.blog-more { max-width: 1060px; margin: 0 auto; padding: 30px clamp(20px, 5vw, 60px); border-top: 1px solid var(--line-color); }
.blog-more h2 { margin: 0 0 17px; color: var(--ink-color); font-family: var(--font-family-display); font-size: 26px; font-weight: 500; }
.blog-more div { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.blog-more a { color: var(--primary-dark); font-size: 14px; text-decoration: none; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-article-layout { grid-template-columns: minmax(0, 1fr); } .blog-article-aside { position: static; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } .blog-card { min-height: 225px; } .blog-category { margin-bottom: 20px; } .blog-article-head { padding: 40px 24px; } .blog-prose { font-size: 15px; } }