.blog-hero { background: linear-gradient(120deg, #a8340f, #df4a16); color: #fff; padding: 75px 24px 84px; }
.blog-hero-inner, .blog-inner { width: min(1180px, 100%); margin: auto; }
.blog-hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: end; }
.blog-hero h1 { color: white; font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: 1.08; }
.blog-hero-inner > p { max-width: 31rem; font-size: 1.08rem; }
.blog-eyebrow, .blog-kicker { font: 700 .75rem var(--font-body); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1rem; }
.blog-eyebrow { color: #ffe6af; }
.blog-kicker { color: #a8340f; }
.blog-section { background: var(--paper); padding: 70px 24px 90px; }
.blog-intro { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.blog-intro > p { max-width: 29rem; color: var(--gray-dark); }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #eadbca; border-radius: 20px; color: var(--gray-ink); box-shadow: var(--shadow-sm); }
.blog-card:hover { color: var(--gray-ink); box-shadow: var(--shadow); }
.blog-card:focus-visible, .blog-more button:focus-visible { outline: 3px solid #8a2d0a; outline-offset: 4px; }
.blog-card-image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-card-body { flex: 1; display: flex; flex-direction: column; align-items: start; gap: 12px; padding: 24px 26px 28px; }
.blog-card time { color: #8a2d0a; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.blog-card h3 { font-size: 1.8rem; }
.blog-card p { color: var(--gray-dark); }
.blog-read { margin-top: auto; padding-top: 8px; color: #a8340f; font-weight: 700; }
.blog-status:empty { display: none; }
.blog-status { margin-bottom: 1rem; }
.blog-more { text-align: center; margin-top: 2rem; }
.blog-more button[hidden] { display: none; }
.blog-cta { background: #a8340f; color: #fff; padding: 64px 24px; text-align: center; }
.blog-cta h2 { color: #fff; }
.blog-cta p { margin: 12px auto 22px; }
@media (max-width: 760px) { .blog-hero-inner, .blog-grid { grid-template-columns: 1fr; } .blog-hero-inner { gap: 1.5rem; } .blog-intro { display: block; } .blog-intro > p { margin-top: 1rem; } .blog-section { padding: 50px 20px 65px; } }