#six {
    .setup {
        height: auto;
        min-height: 416px;
        background: var(--hra-neutral-100);
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 4rem var(--story-section-inline-padding);

        .setup-text {
            width: 100%;
            max-width: 448px;

            p {
                color: var(--hra-neutral-variant-30) !important;
            }
        }
    }

    .setup3 {
        background: var(--hra-neutral-98);
    }


    .intro,
    .section2-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4.5rem;
        box-sizing: border-box;
        padding: 80px var(--story-section-inline-padding);
        width: 100%;
        height: fit-content;

        .text {
            width: 100%;
            margin: 80px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 960px;
            gap: 160px;

            p {
                max-width: 600px;
                color: var(--hra-neutral-variant-30);
            }

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

    }

    .section3 {
        background: var(--hra-neutral-100);
    }

    section.section4 {
        box-sizing: border-box;
        height: auto;
        min-height: var(--story-viewport-height);
        overflow: visible;
        padding: clamp(4rem, 8vw, 8rem) var(--story-section-inline-padding);
        background: var(--hra-neutral-96);
    }

    .intro {
        background: linear-gradient(var(--hra-neutral-98), var(--hra-neutral-96));
    }

    .image-card {
        box-sizing: border-box;
        display: flex;
        width: min(100%, 44rem);
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: var(--hra-neutral-100);
        border-radius: 1rem;
        box-shadow: 0 5px 16px 0 rgb(0 0 0 / 16%);

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

    .sourced-figure,
    .immune-cell-gallery {
        box-sizing: border-box;
        display: flex;
        width: 100%;
        margin: 0;
    }

    .sourced-figure {
        flex-direction: column;
        align-items: center;
        gap: 1rem;

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

    .story-figure-source {
        width: min(100%, 44rem);
        margin: 0;
        color: var(--story-color-text);
        font: var(--hra-type-label-large);
        letter-spacing: var(--hra-type-label-large-tracking);
    }

    .immune-cell-gallery {
        flex-direction: column;
        align-items: center;
        gap: clamp(1.5rem, 3vw, 2.5rem);

        .image-card {
            width: min(100%, 60rem);
        }

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

    .immune-cell-gallery__signpost {
        max-width: 30ch;
        margin: 0;
        color: var(--story-color-heading);
        font: var(--hra-type-title-large);
        letter-spacing: var(--hra-type-title-large-tracking);
        text-align: center;
        text-wrap: balance;

        > p {
            margin: 0;
            color: inherit;
            font: inherit;
            letter-spacing: inherit;
        }
    }

    &.illustration-reveals-enabled .story-illustration {
        --illustration-reveal-x: 0;
        --illustration-reveal-rotation: 0deg;

        opacity: 0;
        transform: translate3d(var(--illustration-reveal-x), 2rem, 0) scale(0.96) rotate(var(--illustration-reveal-rotation));
        transition:
            opacity 650ms cubic-bezier(0.2, 0, 0, 1),
            transform 650ms cubic-bezier(0.2, 0, 0, 1);

        &.story-illustration--from-left {
            --illustration-reveal-x: -3rem;
            --illustration-reveal-rotation: -1deg;
        }

        &.story-illustration--from-right {
            --illustration-reveal-x: 3rem;
            --illustration-reveal-rotation: 1deg;
        }

        &.is-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1) rotate(0);
        }
    }

    .fadeimage,
    .scene5-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        height: var(--story-viewport-height);
        width: 100%;
    }

    .body-image {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
        height: 100%;
        width: 100%;
    }

    .body-outline {
        /* No max-width: on narrow viewports this image's tall aspect ratio needs more
           width than the screen to reach full height; .section2's overflow: hidden crops
           the excess evenly instead of the browser shrinking the whole image to fit. */
        display: block;
        width: auto;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
    }

    @media (hover: none) and (pointer: coarse) {
        /* At full height, this figure's outstretched hands are wider than a typical phone
           screen (measured ~79% of the source image's width) and get cropped by the
           overflow above. Backing off to 90% height keeps the hands inside the frame with
           some margin, trading a small gap for no longer cutting off the art. */
        .body-outline {
            height: 90%;
        }
    }

    .picture1 {
        background: linear-gradient(var(--hra-neutral-96), var(--hra-neutral-98));
    }

    .picture2 {
        background: linear-gradient(var(--hra-neutral-98), var(--hra-neutral-96));
    }

    .section2-2 {
        background: linear-gradient(var(--hra-neutral-96), var(--hra-neutral-98));
    }

    .mouse {
        height: 100%;
        width: 100%;
        bottom: 0;
        display: flex;
        align-items: center;

        flex-direction: column;

        @media (min-width: 1440px) {
            flex-direction: row;
            justify-content: center;
            gap: 2.5rem;
        }

        .info-text {
            position: relative;
            z-index: 1;
            width: 448px;
            min-height: 176px;
            max-width: 100%;
        }

        .mouse-reader-overview {
            display: none;
        }

        .mouse-image {
            width: min(100%, 920px);
            height: auto;
            aspect-ratio: 16 / 9;
            max-width: 100%;
            position: relative;
            pointer-events: none;
            -webkit-user-select: none;
            user-select: none;

            @media (min-width: 1440px) {
                flex: 0 1 920px;
                max-width: calc(100% - 30.5rem);
            }

            .all,
            .thymus,
            .liver,
            .spleen,
            .pancreas {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                position: absolute;
                inset: 0;
                max-width: none;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    max-width: 100%;
                    max-height: 100%;
                    object-fit: contain;
                }
            }
        }

        .label {
            position: absolute;
            background: var(--hra-neutral-20);
            color: var(--hra-neutral-95);
            padding: 1.5rem;
            border-radius: 1.5rem;
            font: var(--hra-type-title-large);
            letter-spacing: var(--hra-type-title-large-tracking);
        }
    }

    @media (max-width: 1439px) {
        .scene5-1 {
            align-items: stretch;
        }

        .mouse {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            align-items: stretch;
            box-sizing: border-box;
            padding-block: clamp(0.75rem, 2vh, 1.5rem);
            gap: clamp(0.5rem, 1.5vh, 1rem);

            .info-text {
                align-self: start;
                justify-self: center;
                width: min(100%, 44rem);
                min-height: 0;
            }

            .mouse-image {
                align-self: stretch;
                justify-self: stretch;
                width: 100%;
                height: 100%;
                min-height: 0;
                max-height: none;
                overflow: hidden;

                .all,
                .thymus,
                .liver,
                .spleen,
                .pancreas {
                    inset: 0;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    max-width: none;

                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        max-width: 100%;
                        max-height: 100%;
                        object-fit: contain;
                    }
                }
            }

            .label {
                max-width: calc(100% - 1rem);
                padding: 0.5rem 0.75rem;
                border-radius: 1rem;
                font: var(--hra-type-label-large);
                letter-spacing: var(--hra-type-label-large-tracking);
                transform: translate(-50%, -50%);
            }
        }

        .mouse .thymus .label,
        .mouse .spleen .label,
        .mouse .pancreas .label {
            left: 65%;
        }

        .mouse .liver .label {
            left: 25%;
        }
    }

    .thymus .label {
        top: 23%;
        left: 65%;
    }

    .liver .label {
        top: 45%;
        left: 25%;
    }

    .spleen .label {
        top: 47%;
        left: 65%;
    }

    .pancreas .label {
        top: 50%;
        left: 65%;
    }

    &:not(.story-animations-enabled) {
        .section2,
        .mouse-image {
            display: none !important;
        }

        .scene5-1,
        .mouse {
            position: static;
            height: auto;
        }

        .mouse {
            display: block;
            padding: 4rem 1rem;

            .info-text {
                width: min(100%, 448px);
                height: auto;
                margin-inline: auto;
            }

            .mouse-reader-overview {
                display: block;
                width: 100%;
                height: auto;
                margin-top: 2rem;
            }
        }
    }


    @media (hover: none) and (pointer: coarse) {
        &.story-animations-enabled section.section2 {
            height: calc((var(--story-viewport-height) * 3.5) + var(--story-scroll-safety-margin));
            overflow: visible;
        }

        &.story-animations-enabled section.section3 {
            height: calc((var(--story-viewport-height) * 6) + var(--story-scroll-safety-margin));
            overflow: visible;
        }

        &.story-animations-enabled section.section2 .fadeimage,
        &.story-animations-enabled section.section3 .scene5-1 {
            position: sticky;
            top: 0;
            overflow: hidden;
            will-change: transform;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .story-illustration {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }

        .section2,
        .mouse-image {
            display: none !important;
        }

        .scene5-1,
        .mouse {
            position: static;
            height: auto;
        }

        .mouse {
            padding: 4rem 1rem;

            .info-text {
                width: min(100%, 448px);
                height: auto;
            }
        }

    }
}