.blog-page .page-shell { width: min(100% - 2rem, 1280px); padding-block-start: 1.2rem; }

.blog-hero {
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    align-items: center;
    gap: 2rem;
    padding: 4rem;
    overflow: hidden;
    border-radius: 8px;
    color: white;
    background: #303e38;
}
.blog-hero > div { position: relative; z-index: 1; }
.blog-hero h1 { max-width: 12ch; font-size: 5.3rem; }
.blog-hero p:not(.eyebrow) { max-width: 56ch; color: rgb(255 255 255 / 82%); font-size: 1.18rem; }
.blog-hero .eyebrow { color: #eadcc8; }
.blog-hero img { width: min(620px, 100%); height: auto; justify-self: center; filter: brightness(0) invert(1); opacity: .94; }

.blog-feed { padding-block: 7rem; }
.blog-feed .section-heading { margin-block-end: 2rem; }
.blog-feed .section-heading h2 { font-size: 3.6rem; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block-start: 1px solid var(--line);
    border-inline-start: 1px solid var(--line);
}
.blog-card {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
    border-block-end: 1px solid var(--line);
    border-inline-end: 1px solid var(--line);
    background: var(--surface);
    transition: color .2s ease, background .2s ease;
}
.blog-card.featured { grid-column: span 2; min-height: 390px; background: var(--paper-warm); }
.blog-card time { margin-block-end: auto; color: var(--muted); font-size: .85rem; font-weight: 800; }
.blog-card h2 { margin-block: 2.5rem 1rem; font-size: 2.2rem; }
.blog-card p { max-width: 55ch; color: var(--ink-soft); }
.blog-card .table-link { margin-block-start: auto; }
.blog-card:hover { color: white; background: var(--oxblood); }
.blog-card:hover p,
.blog-card:hover time { color: rgb(255 255 255 / 80%); }

.blog-cta {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 3.5rem;
    border-radius: 8px;
    color: white;
    background: var(--oxblood);
}
.blog-cta h2 { max-width: 15ch; font-size: 3.8rem; }
.blog-cta p { max-width: 55ch; color: rgb(255 255 255 / 80%); }

.blog-article { width: min(100%, 900px); margin-inline: auto; }
.blog-article header { padding: 4rem 0 3rem; border-block-end: 1px solid var(--line); }
.blog-article header h1 { max-width: 15ch; margin-block: 2.5rem 1.3rem; font-size: 5rem; }
.blog-article header p { max-width: 64ch; color: var(--ink-soft); font-size: 1.25rem; }
.blog-article time { color: var(--muted); font-weight: 800; }
.blog-body { padding-block: 3.5rem 7rem; color: var(--ink-soft); font-size: 1.15rem; line-height: 2; white-space: pre-line; }
.compact-blog-cta { width: min(100%, 1100px); min-height: 250px; margin-inline: auto; }

@media (max-width: 980px) {
    .blog-hero { min-height: 460px; grid-template-columns: 1fr; padding: 3rem; }
    .blog-hero h1 { font-size: 4rem; }
    .blog-hero img { width: min(500px, 75%); }
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-feed { padding-block: 5rem; }
    .blog-article header h1 { font-size: 4rem; }
}

@media (max-width: 700px) {
    .blog-page .page-shell { width: min(100% - 1.25rem, 1280px); }
    .blog-hero { min-height: 430px; padding: 2rem 1.35rem; }
    .blog-hero h1 { font-size: 3rem; }
    .blog-hero img { width: 90%; }
    .blog-feed .section-heading h2 { font-size: 2.4rem; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card,
    .blog-card.featured { grid-column: auto; min-height: 290px; padding: 1.5rem; }
    .blog-card h2 { font-size: 1.8rem; }
    .blog-cta { min-height: 330px; align-items: flex-start; flex-direction: column; padding: 2rem 1.4rem; }
    .blog-cta h2 { font-size: 2.7rem; }
    .blog-article header { padding-block-start: 2.5rem; }
    .blog-article header h1 { font-size: 3rem; }
    .blog-body { padding-block: 2.5rem 5rem; font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card { transition: none; }
}