.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(--ee-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(--ee-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,
.archive-page .listing-links,
.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. Lato Bold at display size
   with a hairline rule underneath gives the archive a front page. (It was PT
   Serif until 2026-10-17, when the site moved to Lato for everything except
   code.) 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: 'Lato', sans-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;
}

/* /blog-posts-list/ lists titles instead of cards (style: links in
   layouts/listing.njk). The list starts at the band title's edge, like the
   cards, instead of centering in the reading column. */
.archive-page .listing-links {
    margin-top: 40px;
}

.archive-page .listing-links .ee_all_posts_list {
    margin-inline: 0;
}

/* ---- Blog and category mastheads (/blog/, /category/<slug>/) ----------- */

/* A light gray band across the full page in two columns: the title and post
   count on the left, the description on the right, and the other categories
   underneath (components/blog-masthead.njk). Stretching the description
   itself across the page would give lines of about 140 characters, past the
   80 that WCAG 1.4.8 asks for, so the band fills the width and the text keeps
   its 62ch measure. Sizes are in px because body resolves to 28.8px
   sitewide.
   It starts right under the navigation, where the home page's blue banner
   does, so the color changes at the same place on every page (2026-10-19).
   On pages with a breadcrumb trail, the trail takes the same gray
   (components/ee-breadcrumb.css). */
.archive-page .page-header.category-masthead {
    max-width: none;
    margin: 0;
    padding: 0;
    border-bottom: 0;
    background: var(--bg-light-gray);
}

.category-masthead-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
        "title description"
        "switcher switcher";
    gap: 28px 64px;
    align-items: start;
    max-width: 1240px;
    margin-inline: auto;
    padding: 56px 20px 40px;
}

/* From 1200px the description starts under the first letter of Services in
   the navigation (2026-10-21). The menu keeps one size and is pinned to the
   right edge, so Services sits 683.5px from the band's right edge, plus the
   nav's right padding running out in windows under about 1260px (ee-nav.css:
   --ee-header-inset less 29.5px). The inset is written with vw here, since
   a percentage in a grid column would measure the band, not the window.
   Measured with the menu as it is; re-measure if a menu item changes. */
@media screen and (min-width: 1200px) {
    .category-masthead-inner {
        grid-template-columns: minmax(0, 1fr) calc(683.5px + max(0px, 29.5px - max(20px, 50vw - 600px)));
    }
}

.category-masthead-title {
    grid-area: title;
}

/* A short yellow bar under the title ties the band to the brand without a
   second color competing with the blue links. Decorative, so it is drawn
   with a pseudo-element and never reaches a screen reader. */
.category-masthead-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 6px;
    margin-top: 20px;
    border-radius: 3px;
    background: var(--btn-yellow);
    box-shadow: 0 0 0 1px var(--ee-blue);
}

.category-count {
    margin: 10px 0 0;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ee-dark-gray);
}

.archive-page .category-masthead .archive-description {
    grid-area: description;
    margin: 0;
    padding-top: 8px;
    font-size: 19px;
    line-height: 1.6;
    max-width: 62ch;
    color: var(--ee-black);
}

/* The other categories, so a reader can move between them without going back
   up to the Blog menu. The pill border marks each one as a link, so the
   underline appears only on hover (the style guide's underline rule is for
   links in text). The current one is filled instead, and aria-current says so
   to screen readers. */
.category-switcher {
    grid-area: switcher;
    padding-top: 24px;
    border-top: 1px solid var(--ee-gray);
}

.category-switcher ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.category-switcher li {
    margin: 0;
    padding: 0;
}

.category-switcher a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 16px;
    border: 1px solid var(--ee-gray);
    border-radius: 999px;
    background: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ee-blue);
    text-decoration: none;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.category-switcher a:hover {
    border-color: var(--ee-blue);
    text-decoration-line: underline;
}

.category-switcher a:focus-visible {
    outline: 3px solid var(--ee-blue);
    outline-offset: 2px;
}

.category-switcher a[aria-current="page"] {
    border-color: var(--ee-blue);
    background: var(--ee-blue);
    color: #fff;
    text-decoration: none;
}

/* The band already separates the header from the grid, so the grid's own
   48px of padding is enough; the 40px margin added for the hairline rule
   would leave a gap. */
.archive-page:has(.category-masthead) .blog-cards {
    margin-top: 0;
}

/* Without a description the title takes the whole first row. */
.category-masthead-inner:not(:has(.archive-description)) {
    grid-template-areas:
        "title title"
        "switcher switcher";
}

/* /about/ puts two paragraphs in the description, so it is a <div> of <p>s
   there; they take its size and keep the usual space between them. */
.archive-page .category-masthead .archive-description p {
    margin: 0 0 1em;
    font: inherit;
    color: inherit;
}

.archive-page .category-masthead .archive-description p:last-child {
    margin-bottom: 0;
}

/* Without category links (/our-work/) there is no second row, so its gap
   would only add space under the text. */
.category-masthead-inner:not(:has(.category-switcher)) {
    grid-template-areas: "title description";
}

@media screen and (max-width: 900px) {
    .category-masthead-inner:not(:has(.category-switcher)) {
        grid-template-areas:
            "title"
            "description";
    }

    .category-masthead-inner,
    .category-masthead-inner:not(:has(.archive-description)) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "description"
            "switcher";
        gap: 24px;
        padding: 36px 20px 32px;
    }

    .archive-page .category-masthead .archive-description {
        padding-top: 0;
        font-size: 18px;
    }
}

@media (forced-colors: active) {
    .category-masthead-title::after {
        background: CanvasText;
    }

    .category-switcher a[aria-current="page"] {
        border-width: 3px;
    }
}

/* ---- AI Album (/album/ and /album/<track>/) ------------------------------

   The band from layouts/page.njk (albumHeader, 2026-10-20). On a song, the
   success criterion is a small label above the song's name and the genre sits
   under it, both in the band's dark gray, so the h1 is just the name. Sizes in
   px, as above. */
.album-masthead .album-criterion {
    margin: 0 0 8px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ee-dark-gray);
}

.album-masthead .album-genre {
    margin: 10px 0 0;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: var(--ee-dark-gray);
}

/* A song's Play/Pause and Restart, under its genre (layouts/page.njk,
   ee-video.js). Play/Pause keeps one width, so Restart stays put. */
.album-song-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 18px;
}

.album-song-controls[hidden] {
    display: none;
}

.album-song-controls .round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.album-song-controls svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.album-song-play {
    min-width: 7.5em;
}

.album-song-controls[data-state="playing"] .album-song-icon-play,
.album-song-controls[data-state="paused"] .album-song-icon-pause {
    display: none;
}

.album-song-time {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    color: var(--ee-black);
}

/* A page that opens with the band (/privacy/, /search/, /accessibility/):
   its article starts below the band, which has no margin of its own. */
.archive-page + .page {
    padding-top: 48px;
}

/* /privacy/ and /accessibility/: the text starts at the band title's left
   edge, as on /about/ and /learn/, rather than in a centered column; it
   keeps style.css's 720px measure. Album pages keep their centered column. */
.archive-page + .page.type-page:not(.album-page) {
    padding-inline: var(--ee-header-inset);
}

.archive-page + .page.type-page:not(.album-page) .entry-content {
    padding-inline: 0;
}

.archive-page + .page.type-page:not(.album-page) .entry-content > * {
    margin-inline: 0;
}

/* With a table of contents, from 1440px its sidebar takes the title's edge
   (components/ee-toc.css: 16rem wide), and the text starts 3rem past it. */
@media (min-width: 1440px) {
    .archive-page + .page.type-page:not(.album-page):has(> .ee-toc) {
        padding-left: calc(var(--ee-header-inset) + 16rem + 3rem);
    }
}

/* The page content starts below the band, which has no margin of its own. */
.archive-page + .album-page {
    padding-top: 40px;
}

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

/* The bio under the name is the post-footer bio (components/author-bio.njk,
   ee-post.css). Here it starts at the archive column's left edge, like the
   name above it, rather than centered as under a post,
   and its own top rule replaces the header's. */
.author-archive .page-header {
    border-bottom: 0;
}

.author-archive .author-bio {
    margin: 8px 0 0 max(20px, calc((100% - 1240px) / 2 + 20px));
}


/* 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(min(300px, 100%), 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, Lato Bold. They were PT Serif until 2026-10-17, when the site
   moved to Lato for everything except code. Size and color, not a second
   typeface, set them apart from the card text. */
.blog-card-title {
    font-family: 'Lato', sans-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;
}

/* The ring goes on the card, not on the link: .blog-card has overflow: hidden
   for its rounded image corners, which clipped the link's ring down to a short
   line under the title (Meryl's review, issue #31). The card's own drop shadow
   is repeated so it does not disappear while the ring is showing. */
.blog-card:has(.blog-card-link:focus-visible) {
    box-shadow: var(--focus-border-2), 8px 8px 10px rgba(0, 0, 0, 0.05);
}

.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: 'Lato', sans-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;
}