/* Every post appears once in the editorial article list. */
.blog-editorial { padding-top: clamp(32px, 4vw, 56px); }
.blog-editorial .blog-intro {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 0;
    border: 0;
}
.blog-article-count {
    color: var(--text-muted);
    font: 400 var(--text-label)/1.4 var(--font-sans);
    font-variant-numeric: tabular-nums;
}
.blog-posts-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}
.blog-posts-heading h2 { margin: 0; font: 500 var(--text-card)/1.3 var(--font-sans); }
.blog-post-list { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.blog-editorial-frame {
    padding: 8px;
    border-radius: calc(var(--radius-card) + 8px);
    background: var(--brand-coral);
}
.blog-editorial-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(48px, 5vw, 80px);
    min-height: clamp(400px, 34vw, 520px);
    padding: clamp(32px, 5vw, 72px);
    border-radius: var(--radius-card);
    background: var(--brand-burgundy);
    color: var(--brand-paper);
    text-decoration: none;
}
.blog-editorial-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--dark-line);
    font: 500 var(--text-label)/1.5 var(--font-sans);
    color: var(--brand-coral);
}
.blog-editorial-meta time { font-weight: 400; color: var(--brand-mauve); }
.blog-editorial-story {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(32px, 5vw, 80px);
}
.blog-editorial-story h3 {
    max-width: 18ch;
    margin: 0;
    font: 500 var(--text-title)/var(--line-heading) var(--font-sans);
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
}
.blog-editorial-details { min-width: 0; }
.blog-editorial-details p {
    margin: 0 0 32px;
    max-width: 35ch;
    font: 400 var(--text-lead)/var(--line-body) var(--font-sans);
    color: var(--brand-cream);
}
.blog-editorial-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 20px;
    border-radius: var(--radius-control);
    background: var(--brand-cream);
    color: var(--brand-burgundy);
    font: 500 var(--text-ui)/1.4 var(--font-sans);
    transition: background .2s ease;
}
.blog-editorial-cta svg { flex: none; width: 18px; height: 18px; transition: transform .2s ease; }
.blog-editorial-card:hover .blog-editorial-cta,
.blog-editorial-card:focus-visible .blog-editorial-cta { background: var(--brand-coral); }
.blog-editorial-card:hover .blog-editorial-cta svg { transform: translateX(4px); }
.blog-editorial-card:focus-visible { outline: 2px solid var(--brand-paper); outline-offset: -10px; }
@media (max-width: 900px) {
    .blog-editorial-story { grid-template-columns: 1fr; }
    .blog-editorial-story h3 { max-width: 23ch; }
    .blog-editorial-details p { max-width: 52ch; }
    .blog-editorial-card { gap: 48px; }
}
@media (max-width: 560px) {
    .blog-editorial { padding-inline: 12px; padding-bottom: 64px; }
    .blog-editorial .blog-intro { padding-inline: 8px; margin-bottom: 24px; }
    .blog-posts-heading { padding-inline: 8px; }
    .blog-editorial-card { padding: 28px 24px; gap: 40px; }
    .blog-editorial-meta { flex-direction: column; gap: 8px; padding-bottom: 20px; }
    .blog-editorial-story { gap: 28px; }
    .blog-editorial-details p { font-size: var(--text-body); margin-bottom: 28px; }
    .blog-editorial-cta { gap: 16px; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-editorial-cta, .blog-editorial-cta svg { transition: none; transform: none !important; }
}