:root {
    --blog-black: var(--ds-black, #111111);
    --blog-ink: var(--ds-ink, #2c2933);
    --blog-blue: var(--ds-blue, #3e2bff);
    --blog-blue-dark: var(--ds-blue-dark, #2718c9);
    --blog-lilac: var(--ds-lilac, #c9adff);
    --blog-lilac-soft: var(--ds-lilac-soft, #eee7ff);
    --blog-pink: var(--ds-pink, #ff5bb7);
    --blog-line: var(--ds-line, #d8d6df);
    --blog-white: var(--ds-white, #ffffff);
}

.blog-index-page,
.blog-show-page {
    background: var(--blog-white) !important;
    color: var(--blog-black) !important;
    font-family: var(--ds-font-text) !important;
}

.blog-index-page .nav,
.blog-show-page .nav {
    height: 76px;
    padding: 0 32px !important;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--blog-line) !important;
    backdrop-filter: blur(12px);
}
.blog-index-page .nav-inner,
.blog-show-page .nav-inner { height: 100%; max-width: 1440px !important; }
.blog-index-page .nav-logo,
.blog-show-page .nav-logo {
    font: 400 25px/1 var(--ds-font-display) !important;
    color: var(--blog-black) !important;
}
.blog-index-page .nav-cta,
.blog-show-page .nav-cta {
    padding: 14px 22px !important;
    border-radius: 2px !important;
    background: var(--blog-blue) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.blog-index-page .nav-cta:hover,
.blog-show-page .nav-cta:hover { background: var(--blog-blue-dark) !important; }

/* Blog index: an editorial opening, not an advertising banner. */
.blog-index-page .hero {
    margin-top: 76px !important;
    padding: 76px 32px 54px !important;
    min-height: 0 !important;
    background: #fff !important;
    color: var(--blog-black) !important;
    border-bottom: 0 !important;
}
.blog-index-page .hero__inner {
    max-width: 1440px !important;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .7fr);
    gap: 64px;
    align-items: end;
}
.blog-index-page .hero__eyebrow {
    grid-column: 1 / -1;
    margin: 0 0 -22px !important;
    color: var(--blog-blue) !important;
    font: 700 12px/1.2 var(--ds-font-text) !important;
    letter-spacing: .14em !important;
}
.blog-index-page .hero__title {
    margin: 0 !important;
    max-width: none !important;
    color: var(--blog-black) !important;
    font: 400 clamp(4.2rem, 7.6vw, 8.1rem)/.91 var(--ds-font-display) !important;
    letter-spacing: -.055em !important;
}
.blog-index-page .hero__title em {
    color: var(--blog-blue);
    font-style: normal;
}
.blog-index-page .hero__footer {
    padding: 24px 0 6px 28px;
    border-left: 5px solid var(--blog-pink);
}
.blog-index-page .hero__sub {
    margin: 0 0 26px !important;
    max-width: 37ch !important;
    color: var(--blog-ink) !important;
    font: 500 18px/1.45 var(--ds-font-text) !important;
}
.blog-index-page .hero__action {
    color: var(--blog-black);
    font-weight: 750;
    text-decoration: none;
    border-bottom: 2px solid var(--blog-blue);
    padding-bottom: 4px;
}

.blog-index-page .filters-wrap {
    position: sticky;
    top: 76px;
    padding: 0 32px !important;
    background: rgba(255,255,255,.96) !important;
    border-top: 1px solid var(--blog-black) !important;
    border-bottom: 1px solid var(--blog-black) !important;
    backdrop-filter: blur(12px);
}
.blog-index-page .filters {
    max-width: 1440px !important;
    gap: 0 !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
}
.blog-index-page .chip {
    flex: 0 0 auto;
    padding: 17px 20px !important;
    border: 0 !important;
    border-right: 1px solid var(--blog-line) !important;
    border-radius: 0 !important;
    color: var(--blog-black) !important;
    background: #fff !important;
    font-weight: 650 !important;
}
.blog-index-page .chip:hover { background: var(--blog-lilac-soft) !important; }
.blog-index-page .chip.active {
    background: var(--blog-blue) !important;
    color: #fff !important;
}

.blog-index-page .posts-section { padding: 54px 32px 112px !important; }
.blog-index-page .posts-grid {
    max-width: 1440px !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 46px 24px !important;
    border: 0 !important;
}
.blog-index-page .post-card {
    grid-column: span 4;
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}
.blog-index-page .post-card:first-child { grid-column: span 8; }
.blog-index-page .post-card:nth-child(5n + 4) { grid-column: span 8; }
.blog-index-page .post-card__cover {
    aspect-ratio: 16 / 10 !important;
    border: 1px solid var(--blog-black) !important;
    border-radius: 0 !important;
    background: var(--blog-lilac-soft) !important;
}
.blog-index-page .post-card:first-child .post-card__cover,
.blog-index-page .post-card:nth-child(5n + 4) .post-card__cover { aspect-ratio: 16 / 8.2 !important; }
.blog-index-page .post-card__cover img { transition: transform .35s ease; }
.blog-index-page .post-card:hover .post-card__cover img { transform: scale(1.025); }
.blog-index-page .post-card__body {
    padding: 17px 0 0 !important;
    gap: 8px !important;
}
.blog-index-page .post-card__category {
    color: var(--blog-blue) !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
}
.blog-index-page .post-card__title {
    margin: 0 !important;
    color: var(--blog-black) !important;
    font: 400 clamp(1.55rem, 2vw, 2.2rem)/1.08 var(--ds-font-display) !important;
    letter-spacing: -.025em !important;
}
.blog-index-page .post-card:first-child .post-card__title { font-size: clamp(2rem, 3vw, 3.35rem) !important; }
.blog-index-page .post-card__excerpt {
    margin: 2px 0 0 !important;
    max-width: 56ch;
    color: var(--blog-ink) !important;
    font-size: 14px !important;
    -webkit-line-clamp: 2 !important;
}
.blog-index-page .post-card__meta {
    color: #625e6b !important;
    font-size: 11px !important;
    letter-spacing: .03em;
}
.blog-index-page .footer,
.blog-show-page .footer {
    background: var(--blog-blue) !important;
    border: 0 !important;
}
.blog-index-page .footer-text,
.blog-index-page .footer a,
.blog-show-page .footer-text,
.blog-show-page .footer a { color: #fff !important; }

/* Article: headline, cover and reading column are separate layers. */
.blog-show-page .article-wrap {
    max-width: 1120px !important;
    padding: 120px 32px 64px !important;
}
.blog-show-page .breadcrumbs {
    max-width: 820px;
    margin: 0 auto 48px !important;
    color: #625e6b !important;
}
.blog-show-page .breadcrumbs a { color: #625e6b !important; }
.blog-show-page .article-header { max-width: 820px; margin: 0 auto 42px; }
.blog-show-page .article-category {
    margin: 0 0 18px !important;
    color: var(--blog-blue) !important;
    font-weight: 800 !important;
}
.blog-show-page .article-title {
    margin: 0 0 22px !important;
    max-width: 18ch;
    color: var(--blog-black) !important;
    font: 400 clamp(3rem, 6vw, 6rem)/.98 var(--ds-font-display) !important;
    letter-spacing: -.055em !important;
}
.blog-show-page .article-deck {
    margin: 0 0 24px;
    max-width: 60ch;
    color: var(--blog-ink);
    font: 500 clamp(1.05rem, 1.6vw, 1.28rem)/1.5 var(--ds-font-text);
}
.blog-show-page .article-meta {
    margin: 0 !important;
    color: #625e6b !important;
    font-size: 12px !important;
}
.blog-show-page .article-hero {
    position: static !important;
    margin: 0 0 54px !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden;
    border: 1px solid var(--blog-black) !important;
    background: var(--blog-lilac-soft) !important;
}
.blog-show-page .article-hero::after { display: none !important; }
.blog-show-page .article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-show-page .toc,
.blog-show-page .article-body,
.blog-show-page .end-cta { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
.blog-show-page .toc {
    padding: 26px 28px !important;
    background: var(--blog-lilac-soft) !important;
    border: 1px solid var(--blog-black);
    border-radius: 0 !important;
}
.blog-show-page .toc__title { color: var(--blog-blue) !important; font-weight: 800; }
.blog-show-page .toc__list a { color: var(--blog-black) !important; }
.blog-show-page .article-body {
    color: #24212a !important;
    font-size: 18px !important;
    line-height: 1.72 !important;
}
.blog-show-page .article-body h2 {
    margin-top: 2.4em !important;
    color: var(--blog-black) !important;
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    line-height: 1.08 !important;
}
.blog-show-page .article-body h3 { color: var(--blog-black) !important; }
.blog-show-page .article-body a { color: var(--blog-blue) !important; }
.blog-show-page .article-body blockquote {
    margin-left: 0 !important;
    padding: 20px 24px !important;
    border-left: 5px solid var(--blog-pink) !important;
    background: var(--blog-lilac-soft) !important;
    color: var(--blog-black) !important;
}
.blog-show-page .end-cta {
    background: var(--blog-blue) !important;
    color: #fff !important;
    border-radius: 0 !important;
}
.blog-show-page .end-cta__title,
.blog-show-page .end-cta__sub { color: #fff !important; }
.blog-show-page .end-cta__btn {
    background: var(--blog-pink) !important;
    color: var(--blog-black) !important;
    border-radius: 2px !important;
    font-weight: 800 !important;
}
.blog-show-page .about-note {
    max-width: 760px !important;
    color: #625e6b !important;
}
.blog-show-page .related-section { max-width: 1120px !important; }
.blog-show-page .related-title { color: var(--blog-black) !important; }
.blog-show-page .related-grid { gap: 22px !important; }
.blog-show-page .related-card {
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
}
.blog-show-page .related-card__cover { border: 1px solid var(--blog-black); }
.blog-show-page .related-card__body { padding-left: 0 !important; padding-right: 0 !important; }
.blog-show-page .related-card__cat { color: var(--blog-blue) !important; font-weight: 800 !important; }

@media (max-width: 900px) {
    .blog-index-page .hero__inner { grid-template-columns: 1fr; gap: 30px; }
    .blog-index-page .hero__eyebrow { margin-bottom: -8px !important; }
    .blog-index-page .hero__footer { max-width: 620px; }
    .blog-index-page .post-card,
    .blog-index-page .post-card:first-child,
    .blog-index-page .post-card:nth-child(5n + 4) { grid-column: span 6; }
    .blog-index-page .post-card:first-child .post-card__cover,
    .blog-index-page .post-card:nth-child(5n + 4) .post-card__cover { aspect-ratio: 16 / 10 !important; }
}

@media (max-width: 640px) {
    .blog-index-page .nav,
    .blog-show-page .nav { height: 58px; padding: 0 18px !important; }
    .blog-index-page .nav-logo,
    .blog-show-page .nav-logo { font-size: 20px !important; }
    .blog-index-page .nav-cta,
    .blog-show-page .nav-cta { padding: 10px 12px !important; font-size: 11px !important; }
    .blog-index-page .hero {
        margin-top: 58px !important;
        padding: 48px 18px 36px !important;
    }
    .blog-index-page .hero__title { font-size: clamp(3.2rem, 17vw, 5rem) !important; }
    .blog-index-page .hero__footer { padding: 18px 0 0 18px; }
    .blog-index-page .hero__sub { font-size: 16px !important; }
    .blog-index-page .filters-wrap { top: 58px; padding: 0 !important; }
    .blog-index-page .chip { padding: 14px 16px !important; font-size: 12px !important; }
    .blog-index-page .posts-section { padding: 32px 18px 72px !important; }
    .blog-index-page .posts-grid { gap: 38px 0 !important; }
    .blog-index-page .post-card,
    .blog-index-page .post-card:first-child,
    .blog-index-page .post-card:nth-child(5n + 4) { grid-column: 1 / -1; }
    .blog-index-page .post-card__title,
    .blog-index-page .post-card:first-child .post-card__title { font-size: 2rem !important; }
    .blog-index-page .post-card__excerpt { -webkit-line-clamp: 3 !important; }

    .blog-show-page .article-wrap { padding: 88px 18px 48px !important; }
    .blog-show-page .breadcrumbs { margin-bottom: 28px !important; font-size: 11px !important; }
    .blog-show-page .article-header { margin-bottom: 28px; }
    .blog-show-page .article-title { font-size: clamp(2.6rem, 13vw, 4.2rem) !important; }
    .blog-show-page .article-deck { font-size: 17px; }
    .blog-show-page .article-hero { margin: 0 0 38px !important; aspect-ratio: 4 / 3 !important; }
    .blog-show-page .article-body { font-size: 17px !important; line-height: 1.65 !important; }
    .blog-show-page .toc { padding: 22px !important; }
    .blog-show-page .about-note { padding: 0 18px !important; }
}