.blog .ee_page_header.visually-hidden, .category .ee_page_header.visually-hidden {
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
}

.blog .ee_page_header, .category .ee_page_header {
    color: var(--ee-blue);
    font-size: 2.5rem;
}

.ee-blog-container.blog-index-more .blog-card-text h3,
.ee-blog-container.blog-index-featured .blog-card-text h3 {
    font-size: 1.4rem;
}

.blog:has(.blog-index-more), .category:has(.blog-index-more) {
    background: var(--bg-light-gray);
}

.bg-featured, .bg-more {
    padding: 20px 0;
}

.bg-featured {
    background-color: var(--bg-light-gray-2);
}

.bg-more,
body.search #content {
    background-color: var(--bg-light-gray);
}

body.search .page-header {
    background: transparent;
}

.ee-blog-container.blog-index-more,
.ee-blog-container.blog-index-featured:not(:only-child) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.ee-blog-container.blog-index-featured,
.ee-blog-container.blog-index-more,
.ee-blog-container.blog-index-more .blog-card-text {
    padding: 0 20px;
}

.ee-blog-container.blog-index-more .blog-card-text,
.ee-blog-container.blog-index-featured .blog-card-text {
    margin: 0;
}

.ee-blog-container.blog-index-more .arrow-btn-container {
    padding: 0 10px 10px;
}

.ee-blog-container.blog-index-more h3, 
.ee-blog-container.blog-index-featured h3 { 
    font-weight: 800;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ee-blog-container.blog-index-more h3 {
    min-height: 132px;
}

.ee-blog-feature-container {
    background-color: var(--bg-light-gray-2);
    grid-column: 1/-1;
}

.ee-blog-container.blog-index-featured .ee-blog-card {
    gap: 0;
}

.ee-blog-container.blog-index-more .blog-img {
    border-radius: 10px 10px 0 0;
    margin: 0;
}

.ee-blog-container.blog-index-featured .short-text {
    line-height: 1.5;
}

.ee-blog-container.blog-index-featured .blog-img,
.ee-blog-container.blog-index-more .blog-img {
    min-height: 50vw;
}

.ee-blog-container.blog-index-featured:not(:only-child) .blog-img {
    min-height: 50vw;
}

.ee-blog-container.blog-index-more .blog-img,
.ee-blog-container.blog-index-featured .blog-img {
    background-size: cover;
    background-position: center;
}

.ee-blog-container.blog-index-featured:only-child .ee-blog-card,
.ee-blog-container.blog-index-more .ee-blog-card  {
    grid-template-columns: 1fr;
    /* max-width: 280px; */
    margin: 0 auto;
}

.ee-blog-container.blog-index-featured .blog-category-description:not(:empty) {
    padding: 40px 20px;
    font-size: 1.2rem;
}

.ee-blog-container.blog-index-featured .short-text {
    display: none;
}

.ee-blog-container.blog-index-more .ee-blog-card-author,
.ee-blog-container.blog-index-featured .ee-blog-card-author {
    font-size: 1rem;
    color: var(--ee-black);
    font-weight: 800;
    border-bottom: solid 2px var(--ee-black);
    padding: 8px 0;
}

.ee-blog-container.blog-index-more .ee-blog-card-author,
.ee-blog-container.blog-index-featured .ee-blog-card-author {
    display: flex;
    justify-content: space-between;
}

.ee-blog-container.blog-index-more .ee-blog-date,
.ee-blog-container.blog-index-featured .ee-blog-date {
    font-size: 1rem;
    font-weight: 600;
}


/* category pills */
.ee-blog-card-info {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}

.ee-blog-container .categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ee-blog-container.ee-blog-container.blog-index-more .categories {
    height: 64px;
}

.ee-blog-container .categories span {
    font-size: 1rem;
    background-color: var(--bg-light-blue-2);
    border-radius: 50px;
    padding: 2px 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    height: fit-content;
}

/* pagination */

.navigation:has(ul.page-numbers) {
    background-color: transparent !important;
    overflow-x: scroll;
    margin-bottom: 70px;
}

.paging-navigation ul {
    border: none !important;
}

ul.page-numbers {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    width: fit-content;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: center;
    gap: 8px;
}

ul.page-numbers li {
    background: var(--bg-white);
    border: none !important;
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
}

ul.page-numbers li a,
ul.page-numbers li span {
    height: 40px;
    min-width: 40px;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    color: var(--ee-black);
    text-decoration: none;
}

ul.page-numbers li:has(.next, .prev, .dots) {
    background: none !important;
}

ul.page-numbers li:has(a:hover),
ul.page-numbers li:has(a:focus) {
    outline: solid 3px var(--highlight-blue) !important;
    outline-offset: -3px !important;
}

ul.page-numbers li:has(span.current) {
    background: var(--ee-blue);
}

ul.page-numbers li span.current {
    color: white !important;
}

ul.page-numbers li a:hover,
ul.page-numbers li a:focus {
    color: var(--highlight-blue) !important;
    background: transparent !important;
    font-weight: 800;
}

@media screen and (min-width: 720px) {
    .bg-featured, .bg-more {
        padding: 48px 0;
    }

    .ee-blog-container.blog-index-featured .blog-card-text h3 {
        font-size: 1.75rem;
    }

    .ee-blog-container.blog-index-featured .blog-img {
        min-height: 340px !important;
    }

    .ee-blog-container.blog-index-featured .short-text {
        display: block;
        margin-bottom: 1rem;
    }

    .ee-blog-container.blog-index-more .ee-blog-card {
        max-width: unset !important;
    }
    .ee-blog-container.blog-index-featured:only-child .ee-blog-card,
    .ee-blog-container.blog-index-featured .blog-category-description {
        max-width: 680px !important; 
    }

    .ee-blog-container.blog-index-more {
        grid-template-columns: calc(50% - 8px) calc(50% - 8px);
        max-width: 680px;
    }

    .ee-blog-container.blog-index-more .blog-img {
        min-height: 184px;
    }
    
    .navigation:has(ul.page-numbers) {
        overflow: visible;
    }

    .ee-blog-container.blog-index-featured {
        padding: 0 !important;
    }
}

@media screen and (min-width: 1200px) {
    .ee-blog-container.blog-index-featured:only-child .ee-blog-card {
        grid-template-columns: 1fr 1fr 70px;
        gap: 30px;
        max-width: 1160px !important;
    }

    .ee-blog-container.blog-index-featured .blog-category-description {
        max-width: 1160px !important; 
    }
    
    .ee-blog-container.blog-index-featured .blog-img {
        min-height: 275px !important;
        margin: 35px 0 35px 35px;
        border-radius: 10px;
        overflow: hidden;
    }

    .ee-blog-container.blog-index-featured {
        max-width: 1160px;
    }

    .ee-blog-container.blog-index-featured .blog-card-text {
        padding: 35px 0 !important;
    }

    .ee-blog-container.blog-index-more {
        grid-template-columns: 1fr 1fr 1fr;
        max-width: 1160px;
    }

    .ee-blog-container.blog-index-more .blog-img {
        min-height: 210px;
    }

    .navigation:has(ul.page-numbers) {
        overflow: visible;
    }

    .ee-blog-container.blog-index-featured {
        padding: 0 !important;
    }

    .blog .ee_page_header, .category .ee_page_header {
        font-size: 3rem;
    }

    .blog-card-text h3 {
        font-size: 1.75rem;
    }
}
/* ============================================================
   Natively rebuilt listing pages: /blog/, /blog/page/N/,
   /category/*, /tag/*

   The rest of this file styles the WordPress theme's listing markup
   (.ee-blog-container / .ee-blog-card / .blog-card-text). The Eleventy
   templates in src/archives/ emit a different vocabulary — .blog-cards,
   .blog-card, .blog-card-link, .blog-card-image, .blog-card-title,
   .blog-card-excerpt, .blog-card-meta — which nothing matched, so those
   pages rendered as an unstyled full-bleed stack.

   Sizes are stated in px on purpose: body resolves to 28.8px sitewide and
   every section overrides it, so anything inherited here comes out huge.
   ============================================================ */

.blog-index .blog-cards,
.archive-page .blog-cards,
.blog-index .pagination-nav,
.archive-page .page-header,
.archive-page .no-results {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 20px;
}

/* ---- Archive masthead --------------------------------------------------- */

/* Set as a journal masthead rather than a page label. The title was Lato 900 at
   28.8px, the same size as body copy and only distinguishable by weight, so it
   read as an afterthought floating above the grid. PT Serif at display size
   with a hairline rule underneath gives the archive a front page.

   Both faces are the brand guide's -- Lato and PT Serif are the only two it
   allows -- so this is a change of role, not of typeface. Sizes are in px
   because body resolves to 28.8px sitewide. */
.archive-page .page-header {
    margin-top: 56px;
    margin-bottom: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ee-gray);
}

.archive-page .page-title {
    font-family: 'PT Serif', Georgia, serif;
    font-size: clamp(34px, 5vw, 46px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.012em;
    color: var(--ee-black);
    margin: 0;
    text-wrap: balance;
}

.archive-page .archive-description {
    font-size: 18px;
    line-height: 1.55;
    max-width: 62ch;
    color: var(--ee-dark-gray);
    margin: 12px 0 0;
}

/* The grid used to start immediately under the title; the rule needs air on
   both sides or it reads as a divider rather than a masthead. */
.archive-page .blog-cards {
    margin-top: 40px;
}

/* ---- Author archives (/author/<slug>/) ---------------------------------- */

/* Sizes are in px because body resolves to 28.8px sitewide, so an em or a bare
   inherit would give these the weight of a heading. */
.author-archive-role {
    margin: 4px 0 12px;
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ee-blue);
}

.author-archive-pronouns {
    font-weight: 400;
    color: var(--ee-dark-gray);
}

.author-archive-more {
    margin: 12px 0 0;
    font-size: 17px;
}

.author-archive-count {
    max-width: 1240px;
    margin: 24px auto 0;
    padding-inline: 20px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ee-dark-gray);
}

/* An empty archive still renders the grid container, whose block padding
   would otherwise leave a gap above the "Nothing found" notice. :empty does
   not work here — the container holds template whitespace. Scoped to
   .archive-page so it outranks the display:grid rule below. */
.archive-page .blog-cards:not(:has(.blog-card)) {
    display: none;
}

.archive-page .no-results {
    padding-bottom: 64px;
}

.blog-index .blog-cards,
.archive-page .blog-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px 32px;
    padding-block: 48px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.05);
}

.blog-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* The responsiveImages transform wraps the <img> in a <picture>, which is
   inline by default and would leave a gap under the image. */
.blog-card-link picture {
    display: block;
}

.blog-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--bg-light-gray);
}

/* Article titles in the brand serif. This is the single change that shifts the
   grid from a list of links to a table of contents: at card size, Lato reads as
   UI and PT Serif reads as a headline. Weight drops from Lato's implicit heavy
   to 700 because a serif carries the same emphasis with less mass. */
.blog-card-title {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.26;
    letter-spacing: -0.008em;
    color: var(--ee-blue);
    margin: 0;
    padding: 20px 20px 0;
    text-wrap: pretty;
}

.blog-card-link:hover .blog-card-title,
.blog-card-link:focus-visible .blog-card-title {
    text-decoration: underline;
}

.blog-card-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-border-2);
    border-radius: 12px;
}

.blog-card-excerpt {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ee-black);
    margin: 12px 0 0;
    padding: 0 20px;
}

/* Pins the date to the bottom edge so cards with shorter excerpts still line
   their meta rows up across the grid. */
/* Dates set as a small caption rather than another line of prose, so the eye
   sorts title, summary, and date without needing size alone to do the work. */
.blog-card-meta {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ee-dark-gray);
    margin: 0;
    padding: 16px 20px 20px;
    margin-top: auto;
    font-variant-numeric: tabular-nums;
}

.pagination-nav {
    padding-bottom: 64px;
}

.pagination-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 18px;
}

.pagination-list [aria-current="page"] {
    color: var(--ee-dark-gray);
}

@media screen and (max-width: 600px) {
    .blog-index .blog-cards,
    .archive-page .blog-cards {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-block: 32px;
    }
}

/* ============================================================
   /articles/ — the ten featured picks

   Same .blog-card as /blog/ and the archives; only the rhythm changes. The
   page is five pairs rather than one long grid, so it needs a heading level
   between the h1 and the cards, a rule to separate the pairs, and tighter
   block padding than a twelve-card page wants.

   Sizes are in px for the same reason as the rest of this file: body resolves
   to 28.8px sitewide, so anything inherited comes out enormous.
   ============================================================ */

/* Matches the inset on .page-header and .blog-cards above, so the theme
   heading lines up with the cards underneath it. */
.featured-articles .featured-group-title,
.featured-articles .featured-group-blurb,
.featured-articles .featured-more {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 20px;
}

.featured-articles .featured-group {
    padding-top: 40px;
}

/* A rule rather than extra whitespace: at two cards per group the pairs sit
   close enough that space alone does not read as a break. */
.featured-articles .featured-group + .featured-group {
    border-top: 1px solid var(--ee-gray);
}

.featured-articles .featured-group-title {
    font-family: 'PT Serif', Georgia, serif;
    font-size: clamp(24px, 3.2vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ee-black);
    margin: 0;
    text-wrap: balance;
}

.featured-articles .featured-group-blurb {
    font-size: 18px;
    line-height: 1.55;
    max-width: 62ch;
    color: var(--ee-dark-gray);
    margin: 10px 0 0;
}

/* auto-fit rather than the auto-fill used above: with only two cards, auto-fill
   leaves an empty third track at desktop width and the pair sits off to the
   left. auto-fit collapses it so the two cards share the row. min(100%, 300px)
   keeps the track from outgrowing a narrow phone, which a bare 300px minimum
   would do. */
.featured-articles .blog-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    margin-top: 0;
    padding-block: 28px 48px;
}

.featured-articles .featured-more {
    font-size: 18px;
    padding-block: 8px 64px;
}