.index_content {
    flex: 1;
    overflow: clip;
    background: linear-gradient(white, var(--beige3));
}

.index_content > div {
    width: fit-content;
    margin: 150px auto;
    font-size: 1.33em;
}
.index_content #index_welcome span {
    color: var(--gold);
}
.index_content #index_welcome h2 {
    font-weight: initial;
    margin-bottom: 40px;
    font-size: 1em;
}
.index_content #index_welcome > a {
    color: var(--black2);
    font-size: small;
}

.index_content #index_search {
    display: flex;
}
.index_content #index_search input[type="search"] {
    width: -moz-available;
    width: -webkit-fill-available;
    width: stretch;
    min-width: 0;
    padding: 8px 12px;
    margin-right: 24px;
    background: transparent;
    border: 1px solid var(--beige3);
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
}
.index_content #index_search input[type="submit"] {
    min-width: fit-content;
    color: white;
    padding: 4px 16px;
    border: none;
    border-radius: 1000px;
    background-color: var(--black2);
    font-family: "Space Grotesk", sans-serif;
}
.index_content #index_search input[type="submit"]:active {
    background-color: var(--black2);
}

#index_about {
    line-height: 1.5em;
    width: calc(100% - var(--main-body-side-padding)*4) !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#index_about h3 {
    font-size: 1.75em;
}
#index_about span {
    color: var(--gold);
}
#index_about a {
    color: var(--black2);
    font-size: small;
}
#index_about img {
    height: 30vw;
    width: auto; /* the width/height attributes feed aspect-ratio; a pinned width would squash it */
    aspect-ratio: 720 / 538; /* index-stock.webp: reserves the box before the image loads */
}

#index_recommended {
    background-color: white;
    padding: 30px 40px;
    width: fit-content !important;
    box-sizing: border-box;
}
#index_recommended > h2 {
    color: var(--gold);
    margin-top: 0;
    font-size: 1em;
}
#recommended_carousel > div {
    border-left: 2px solid var(--gold);
    padding: 0 10px;
    margin-bottom: 25px;
    height: 350px;
    width: 250px;
    display: inline-flex;
    flex-direction: column;
}
#recommended_carousel > div:not(:last-child) {
    margin-right: 40px;
}
#recommended_carousel > div > * {
    display: block;
}
#recommended_carousel > div > h3 {
    margin: 0;
    overflow-y: auto;
    height: 75%;
}
#recommended_carousel h3 > a {
    color: var(--black3);
    text-decoration: none;
}
#recommended_carousel > div > a {
    color: var(--gold);
    text-decoration: none;
    margin-top: auto;
}
#recommended_carousel > div > :not(h3) {
    font-size: 0.75em;
    font-weight: 600;
}
#recommended_carousel > div > .recommended_article_authors {
    margin-top: 0.5rem;
}
#recommended_carousel > div > .recommended_article_authors > a {
    color: var(--black3);
    text-decoration: none;
}

/* Hover colours only where a pointer can hover (see style.css). */
@media (hover: hover) {
    .index_content #index_welcome > a:hover {
        color: var(--black1);
    }
    .index_content #index_search input[type="submit"]:hover {
        background-color: var(--black1);
    }
    #recommended_carousel h3 > a:hover {
        color: var(--beige4);
    }
    #recommended_carousel > div > a:hover {
        color: var(--beige4);
    }
    #recommended_carousel > div > .recommended_article_authors > a:hover {
        color: var(--beige4);
    }
}

/* Tablet / landscape phone: the 150px section rhythm strands content in
   whitespace once the viewport narrows below desktop. Tighten it before the
   full single-column stack at 640px. The recommended cards (3 x 250px + gaps +
   padding ≈ 910px) stop fitting here too: cap the white box at the viewport and
   let the strip scroll on one axis instead of being clipped by
   .index_content { overflow: clip }. */
@media (max-width: 1024px) {
    .index_content > div {
        margin: 80px auto;
    }
    #index_recommended {
        max-width: 100%;
    }
    #recommended_carousel {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding: 0 16px;
        padding-bottom: 8px;
    }
    /* 250px content + 20px padding + the 2px border, as one border-box width. */
    #recommended_carousel > div {
        flex: 0 0 272px;
        box-sizing: border-box;
        margin-right: 0;
        scroll-snap-align: start;
    }
}

/* Compact layout: touch targets and the stacked about block (landscape phones
   and portrait tablets included). */
@media (max-width: 960px) {
    .index_content #index_welcome > a,
    #index_about a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .index_content #index_search input[type="submit"] {
        min-height: 44px;
    }
    #index_about {
        width: auto !important;
        flex-direction: column;
        gap: 24px;
    }
    #index_about img {
        height: auto;
        max-width: 100%;
    }
    #index_recommended {
        padding: 24px 16px;
    }
    /* The card's journal link and author links are stacked block links; give
       each a 44px row (margin-top:auto still pins the journal to the bottom). */
    #recommended_carousel > div > a,
    #recommended_carousel > div > .recommended_article_authors > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Phone portrait (WCAG 1.4.10): stack the hero/search blocks, free them from
   the calc(100% - 400px) width and size the type for a phone. */
@media (max-width: 640px) {
    /* #main_content already provides the 16px gutter; the sections carry their
       own below, so without this the hero and about blocks had a doubled 32px. */
    #main_content.index_content {
        padding-left: 0;
        padding-right: 0;
    }
    .index_content > div {
        width: auto;
        max-width: 100%;
        margin: 60px auto;
        box-sizing: border-box;
        padding: 0 16px;
        /* Phone-scale homepage type: the desktop 1.33em is 21px body copy. */
        font-size: 1.15em;
    }
    /* The hero heading (2em of the section size, with a forced <br>) is fluid:
       ≈27px at 360px, back to today's ≈44px at the top of the range. */
    .index_content #index_welcome h1 {
        font-size: clamp(1.6rem, 7.5vw, 2.4em);
    }
    .index_content #index_search {
        flex-direction: column;
        gap: 16px;
    }
    .index_content #index_search input[type="search"] {
        margin-right: 0;
    }
    /* The white box keeps its own 16px inset now that the section gutter is
       gone; width:auto respects the margins (100% would overflow by 32px). */
    #index_recommended {
        width: auto !important;
        margin: 60px 16px;
    }
    /* Cards grow with their title instead of scrolling it inside a fixed 350px
       box (a nested scroll trap on touch); long titles clamp at seven lines and
       the row equalises through flex stretch. A card is narrower than the strip
       so the next one peeks in (≈40px at 360px), which is the scroll cue. */
    #recommended_carousel > div {
        height: auto;
        flex-basis: min(272px, calc(100vw - 120px));
    }
    #recommended_carousel > div > :not(h3) {
        font-size: 0.875em;
    }
    #recommended_carousel > div > h3 {
        height: auto;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 7;
        line-clamp: 7;
    }
}