.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_welcome > a:hover {
    color: var(--black1);
}

.index_content #index_search {
    display: flex;
}
.index_content #index_search input[type="text"] {
    width: available;
    width: -moz-available;
    width: -webkit-fill-available;
    min-width: 0;
    padding: 8px 12px;
    margin-right: 24px;
    background: transparent;
    border: 1px solid var(--beige3);
}
.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"]:hover {
    background-color: var(--black1);
}
.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;
}

#index_recommended {
    background-color: white;
    padding: 30px 40px;
    width: fit-content !important;
    box-sizing: border-box;
}
#index_recommended > h4 {
    color: var(--gold);
    margin-top: 0;
}
#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 h3 > a:hover {
    color: var(--beige4);
}
#recommended_carousel > div > a {
    color: var(--gold);
    text-decoration: none;
    margin-top: auto;
}
#recommended_carousel > div > a:hover {
    color: var(--beige4);
}
#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;
}
#recommended_carousel > div > .recommended_article_authors > a:hover {
    color: var(--beige4);
    cursor: pointer;
}

/* 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. */
@media (max-width: 1024px) {
    .index_content > div {
        margin: 80px auto;
    }
}

/* Reflow (WCAG 1.4.10): stack the hero/search/about blocks and free them from
   the calc(100% - 400px) width. The recommended carousel keeps its fixed-width
   cards but scrolls horizontally (a single-axis scroll is allowed for content
   that genuinely needs 2D layout). */
@media (max-width: 640px) {
    .index_content > div {
        width: auto;
        max-width: 100%;
        margin: 60px auto;
        box-sizing: border-box;
        padding: 0 16px;
    }
    .index_content #index_search {
        flex-direction: column;
        gap: 16px;
    }
    .index_content #index_search input[type="text"] {
        margin-right: 0;
    }
    #index_about {
        width: auto !important;
        flex-direction: column;
        gap: 24px;
    }
    #index_about img {
        height: auto;
        max-width: 100%;
    }
    #index_recommended {
        width: 100% !important;
        padding: 24px 16px;
    }
    .index_content #index_search input[type="submit"] {
        min-height: 44px;
    }
    #recommended_carousel {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 16px;
        padding-bottom: 8px;
    }
    #recommended_carousel > div {
        flex: 0 0 250px;
        margin-right: 0;
        scroll-snap-align: start;
    }
}