h2 {
    font-family: var(--font-sans);
    font-size: var(--step-2);
    font-style: normal;
    font-weight: 500;
    line-height: 106.25%;
    /* margin-block-start: var(--space-3xl); */
}

.section__title {
    margin-block-start: calc(var(--space-2xl) * 2);
}

.home-grid {
    --gutter: var(--space-m);
    width: calc(100% - (var(--gutter) * 2));
    max-width: 1240px;
    margin-top: var(
        --space-l
    ); /* banner present: it adds its own breathing room */
}

/* Banner dismissed (hidden): restore the larger top margin. */
.home-grid:has(.start-banner[hidden]) {
    margin-top: var(--space-m);
    @media (width > 800px) {
        margin-top: var(--space-xl);
    }
}

/* Subtle, dismissible "where to start" jump-link bar above the latest talk. */
.start-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    inline-size: 100%;
    margin-block-end: var(--space-l);
    padding: var(--space-xs) var(--space-xl);

    background: var(--color-background-dark);
    border: 1px solid rgba(150, 0, 12, 0.12);
    border-radius: var(--space-2xs);

    transition: background-color 0.2s ease;
}

.start-banner[hidden] {
    display: none;
}

.start-banner:hover {
    background: #ffece5;
}

.start-banner__link {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
    text-decoration: none;

    transition: color 0.2s ease;
}

.start-banner__link:hover,
.start-banner__link:focus-visible {
    color: #96000c;
}

.start-banner__dismiss {
    position: absolute;
    inset-inline-end: var(--space-2xs);
    inset-block-start: 50%;
    transform: translateY(-50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;

    font-size: var(--step-1);
    line-height: 1;
    color: rgba(0, 0, 0, 0.4);

    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.start-banner__dismiss:hover,
.start-banner__dismiss:focus-visible {
    color: #96000c;
    background: rgba(150, 0, 12, 0.08);
}

.latest-talk {
    width: 100%;
    container-type: inline-size;
    margin-bottom: calc(var(--space-2xl) * 2);
}

.latest-talk > .talk-item {
    position: relative;
}

.latest-talk__label {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

    font-family: var(--font-sans);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    padding: var(--space-2xs) var(--space-xs);
    background: #96000c;
    color: #fff;
}

.latest-talk > .talk-item {
    grid-template-columns: 2fr 1fr;

    .talk-item__image {
        grid-column: 1 / -1;
        grid-row: 1;

        @container (min-width: 900px) {
            grid-column: 1 / -1;
            grid-row: 1 / -1;
        }
    }

    .talk-item__info {
        grid-column: 1 / -1;
        grid-row: 2;
        position: relative;
        z-index: 1;

        @container (min-width: 900px) {
            grid-column: 1;
            background: var(--color-background);
            padding: var(--space-xs) var(--space-l) 0 0;
        }

        .talk-published {
            font-size: var(--step--1);
        }

        h2 {
            margin-top: 0;
            font-size: var(--step-4);
            line-height: 120%;
        }

        p {
            margin-block-start: var(--space-s);
            font-size: var(--step-0);
        }
    }
}

.talk-item {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-2xs);
    align-content: flex-start;

    @container (min-width: 900px) {
        gap: var(--space-l);
    }

    figure {
        margin-bottom: 0;
    }

    /* background: blue; */
}

.talk-item__image {
    grid-column: 1 / -1;
    grid-row: 1;

    @container (min-width: 900px) {
        grid-column: 1;
    }

    a {
        display: block;
    }

    img {
        display: block;
        width: 100%;
        height: auto;
    }
}

.talk-item__info {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    line-height: 180%;
    grid-column: 1 / -1;

    @container (min-width: 900px) {
        grid-column: 2;
    }

    h2 {
        margin-top: 0;
        font-size: var(--step-2);
        line-height: 120%;
    }

    h2 a {
        font-family: var(--font-serif);
        color: black;
        text-decoration: none;
    }
}

.recent-talks-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-m);
    flex-wrap: wrap;

    h2 {
        margin-block-end: 0;
    }
}

.explore-link {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #96000c;
    text-decoration: none;
    white-space: nowrap;
}

.explore-link__arrow {
    display: inline-block;
    margin-inline-start: 0.4em;
    transition: transform 0.2s ease;
}

.explore-link:hover .explore-link__arrow,
.explore-link:focus-visible .explore-link__arrow {
    transform: translateX(4px);
}

.recent-talks {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    margin-block-start: var(--space-l);

    @media (width >= 800px) {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
        column-gap: var(--space-l);
        row-gap: var(--space-2xs);

        .talk-item {
            grid-template-rows: subgrid;
            grid-row: span 3;
        }

        .talk-item__info {
            display: contents;
        }
    }
}

.archive {
    h2 {
        margin-block-start: calc(var(--space-2xl) * 2);
    }
}

.featured-talks {
    background: #ffece5;
    padding: var(--space-l);
    margin-block-start: var(--space-m);

    @media (width >= 800px) {
        padding: var(--space-l);

        /* Same card layout as the explore page: text body on the left, image
           in the right third at its natural aspect ratio, bottoms aligned. */
        .talk-item {
            display: flex;
            align-items: flex-end;
            gap: var(--space-xl);
        }

        .talk-item__info {
            flex: 1 1 0;
            min-inline-size: 0;
        }

        .talk-item__image {
            flex: 0 0 40%;
            order: 1; /* move the image to the right */
            margin-block-start: 0;
        }
    }

    figure {
    }

    p {
        margin-block-start: var(--space-xs);
    }

    .talk-title {
        font-size: var(--step-3);
        margin-block-start: var(--space-2xs);
    }

    .talk-context {
        margin-block-start: var(--space-s);
        max-inline-size: var(--measure);
    }
}

/* Card hover — fades image, reddens title, animated together */
.talk-item img {
    transition: opacity 0.3s ease;
}

.talk-item .talk-title a {
    transition: color 0.3s ease;
}

.talk-item:hover img,
.talk-item:focus-within img {
    opacity: 0.85;
}

.talk-item:hover .talk-title a,
.talk-item:focus-within .talk-title a {
    color: #96000c;
}