.blog-shell {
    background-image: none
}

[data-theme="dark"] .blog-shell {
    background-image: none
}

.nav-link-icon--blog {
    color: var(--color-primary-dark)
}

.blog-page {
    padding-block: clamp(96px,12vw,120px)4rem;
    overflow-wrap: anywhere
}

.blog-heading {
    margin: 2rem 0
}

.blog-heading h1 {
    max-width: 22ch;
    font-size: clamp(2rem,4.4vw,3.6rem);
    line-height: 1.14;
    letter-spacing: -.035em;
    margin: 0 0 1.25rem
}

.blog-heading>p {
    max-width: 65ch;
    color: var(--color-muted);
    font-size: 1.125rem;
    line-height: 1.7
}

.blog-filters,.blog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.blog-filters {
    margin: 0 0 2rem
}

.blog-filters a,.blog-categories a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .55rem .8rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    color: var(--color-text);
    background: var(--color-background);
    text-decoration: none;
    font-size: .875rem
}

.blog-filters a[aria-current],.blog-filters a:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-dark)
}

.blog-categories {
    margin-bottom: 1.25rem
}

.blog-categories a {
    border: 0;
    padding-left: 0;
    padding-right: 1rem;
    color: var(--color-primary-dark)
}

.blog-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 1.25rem
}

.blog-card {
    min-width: 0;
    background: var(--color-background);
    border: 1px solid var(--color-border-strong);
    border-radius: 16px;
    overflow: hidden
}

.blog-card-body {
    padding: 1.5rem
}

.blog-card h2 {
    margin: .65rem 0;
    font-size: 1.4rem;
    line-height: 1.35;
    letter-spacing: -.02em
}

.blog-card h2 a {
    color: var(--color-text);
    text-decoration: none
}

.blog-card h2 a:hover {
    text-decoration: underline;
    text-underline-offset: .2em
}

.blog-card p {
    line-height: 1.65;
    color: var(--color-muted)
}

.blog-card .blog-card-meta {
    margin: 0;
    font-size: .875rem
}

.blog-card img {
    width: 100%;
    height: auto;
    display: block
}

.blog-read {
    display: inline-flex;
    gap: .8rem;
    align-items: center;
    min-height: 44px;
    color: var(--color-primary-dark);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: .2em
}

.blog-featured {
    border-top: 4px solid var(--color-electric);
    padding-top: 1rem;
    margin-bottom: 1.5rem
}

.blog-eyebrow {
    margin: 0 0 .75rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--color-primary-dark)
}

.blog-featured .blog-card {
    background: var(--color-surface)
}

.blog-featured .blog-card h2 {
    font-size: clamp(1.5rem,3vw,2rem);
    max-width: 32ch
}

.blog-featured .blog-card-body {
    padding: clamp(1.25rem,3vw,2rem)
}

.blog-featured .blog-card-body>p {
    max-width: 70ch
}

.blog-pagination {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem
}

.blog-pagination a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-primary-dark)
}

.blog-page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem
}

.blog-page-number {
    min-width: 44px;
    min-height: 44px;
    display: inline-grid !important;
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    text-decoration: none
}

.blog-page-number.is-current {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
    font-weight: 700
}

.blog-article>.ad-slot {
    margin-block: 2rem
}

.blog-empty {
    padding-block: 2rem;
    color: var(--color-muted)
}

.blog-article {
    max-width: 760px;
    margin-inline: auto
}

.blog-article .blog-heading h1 {
    max-width: none
}

.blog-heading .blog-dates {
    font-size: .9375rem
}

.blog-prose {
    font-size: 1.0625rem;
    line-height: 1.8
}

.blog-prose h2 {
    font-size: 1.7rem;
    line-height: 1.35;
    margin-top: 2.5rem
}

.blog-prose h3 {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-top: 1.7rem
}

.blog-prose a,.blog-sources a,.blog-image a {
    color: var(--color-primary-dark);
    text-underline-offset: .2em
}

.blog-prose li+li {
    margin-top: .55rem
}

.blog-prose ul,.blog-prose ol {
    padding-left: 1.5rem
}

.blog-prose blockquote {
    margin: 1.75rem 0;
    padding: .3rem 1.25rem;
    border-left: 4px solid var(--color-electric);
    background: var(--color-surface)
}

.blog-table {
    max-width: 100%;
    overflow-x: auto;
    margin-block: 1.5rem
}

.blog-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    line-height: 1.55
}

.blog-table th,.blog-table td {
    padding: .75rem;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--color-border-strong)
}

.blog-table th {
    background: var(--color-surface);
    font-weight: 700
}

.blog-cta {
    margin-block: 2.5rem;
    border-left: 4px solid var(--color-raspberry);
    background: var(--color-surface);
    padding: 1.5rem
}

.blog-cta h2 {
    margin-top: 0;
    font-size: 1.35rem
}

.blog-cta ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.blog-cta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-primary-dark)
}

.blog-related {
    margin-block: 3rem;
    overflow-wrap: anywhere
}

.blog-related>h2 {
    font-size: 1.55rem;
    margin-bottom: 1.25rem
}

.blog-related .blog-card h2 {
    font-size: 1.2rem
}

.blog-sources {
    border-top: 1px solid var(--color-border-strong);
    padding-top: 1rem;
    margin-top: 2rem
}

.blog-sources li {
    margin-block: .75rem
}

.blog-image {
    margin: 0 0 2rem
}

.blog-image img,.blog-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px
}

.blog-image figcaption {
    margin-top: .75rem;
    color: var(--color-muted);
    font-size: .875rem
}

.blog-page:focus-visible,.blog-related:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px
}

.has-blog .mobile-nav>summary:focus-visible,.has-blog .nav-menu-links a:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px
}

@media(min-width:680px) {
    .blog-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(min-width:1024px) {
    .blog-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .blog-grid:has(>.blog-card:nth-child(2):last-child) {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .blog-article .blog-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .blog-featured .blog-card:has(img) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center
    }
}