main.project-page {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 100svh;
    padding: 5rem 1rem 2.5rem 1rem;
    background-color: var(--white-background);
    backdrop-filter: blur(50px);

    @media (width <= 600px) {
        padding: 7rem 1rem 2.5rem 1rem;
    }

    .project {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        row-gap: 4rem;
        column-gap: 1rem;

        section.project-description {
            grid-column: span 2;
            display: flex;
            flex-direction: column;
            gap: 3rem;
            position: sticky;
            top: 5rem;
            align-self: start;

            @media (width <= 900px) {
                grid-column: span 3;
            }

            @media (width <= 600px) {
                grid-column: span 4;
                position: relative;
                top: 0;
            }

            @media (width <= 500px) {
                grid-column: 1 / -1;
            }
        }

        section.project-approaches {
            grid-column: 5/6;
            display: flex;
            flex-direction: column;
            gap: 3rem;

            @media (width <= 1200px) {
                grid-column: 4/6;
            }

            @media (width <= 900px) {
                grid-column: span 2;
            }

            @media (width <= 600px) {
                grid-column: span 3;
            }

            @media (width <= 500px) {
                grid-column: 1 / -1;
            }

            /* Each approach: its title, then its text (the .h4 style, see typography.css). */
            .approaches {
                display: flex;
                flex-direction: column;
                gap: 2.5rem;
            }

            .approach {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
            }

            .references {
                display: flex;
                flex-direction: column;
                gap: 2rem;

                .reference {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;

                    img {
                        width: 33.33%;
                        border: 1px solid black;
                        margin-bottom: 0.5rem;
                    }
                }
            }
        }

        section.project-images {
            grid-column: 1 / -1;
            height: min(70rem, 60vh);
            margin-inline: -1rem;
            padding-inline: 1rem;
            padding-bottom: 1rem;
            overflow-x: auto;
            scrollbar-width: none;
            width: calc(100% + 2rem);

            @media (width <= 600px) {
                height: min(40rem, 40vh);
            }

            &::-webkit-scrollbar {
                display: none;
            }

            .image-row {
                display: flex;
                gap: 1rem;
                height: 100%;
                padding-right: 1rem;
            }

            .project-image {
                display: grid;
                grid-template-rows: 1fr auto;
                gap: 0.5rem;
                /* The scaled-up placeholder would otherwise add to the row's scroll area */
                overflow: clip;

                &:last-of-type {
                    padding-right: 1rem;
                }

                img, video, mux-video {
                    grid-area: 1 / 1;
                    height: 100%;
                    min-height: 0;
                }

                /* Width follows the height and the width/height attributes' ratio */
                img {
                    width: auto;
                }

                /* Until Mux reports the video's own ratio (inline style) */
                mux-video {
                    display: block;
                    aspect-ratio: 16 / 9;
                }

                /* Blurred stand-in, stacked over the full image until it loads */
                /* Scaled up so the blur's faded edges fall outside, then clipped back
                   to the image's bounds (clip-path applies before the transform) */
                .project-image-placeholder {
                    --scale: 1.25;
                    width: 100%;
                    filter: blur(1.5rem);
                    transform: scale(var(--scale));
                    clip-path: inset(calc((1 - 1 / var(--scale)) * 50%));
                    pointer-events: none;
                    transition: opacity 0.6s ease;
                }

                &.is-loaded .project-image-placeholder {
                    opacity: 0;
                }
            }
        }
    }
}

/* The header button that opens the information panel: plain text. */
.information-toggle {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

section.information {
    position: fixed;
    width: max(30rem, calc(20% + 4rem));
    max-width: 100vw;
    height: 100svh;
    right: 0;
    background-color: var(--white-background);
    border-left: var(--border);
    backdrop-filter: blur(20px);
    z-index: 10;
    padding: 1rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    transform: translateX(100%);
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: scroll;

    @media (width <= 30rem) {
        width: 100vw;
        border-left: none;
        padding: 1rem;
    }

    &.is-open {
        transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
        transition: none;
    }

    .divider {
        width: 100%;
        /*height: 1px;*/
        background-color: black;
        border-bottom: 1px solid black;
    }

    .section {
        margin: 1rem 0;

        .h4 + p {
            margin-top: 0.35rem;
        }
    }

    .flex-between {
        align-items: start;
    }

    .projects {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        font-variant-numeric: tabular-nums;

        .project {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 7fr;
            gap: 0;
            transition: 0.3s;

            &:hover {
                gap: 0.5rem;
            }
        }
    }
}


/*section.content {*/
/*    position: relative;*/
/*    z-index: 2;*/
/*    scroll-snap-type: y mandatory;*/
/*    height: 100svh;*/
/*    overflow-y: scroll;*/
/*    transition: opacity 800ms ease 800ms;*/

/*    !* The top snap point: an empty, non-sticky marker over the first screen. *!*/
/*    .snap-top {*/
/*        position: absolute;*/
/*        top: 0;*/
/*        width: 1px;*/
/*        height: 100svh;*/
/*        scroll-snap-align: start;*/
/*        pointer-events: none;*/
/*    }*/

/*    .title {*/
/*        display: grid;*/
/*        place-items: center;*/
/*        height: 100svh;*/
/*        position: sticky;*/
/*        top: 0;*/

/*        .title-word {*/
/*            display: inline-block;*/
/*            animation: title-word-in 3000ms both;*/
/*            animation-delay: calc(var(--i, 0) * 250ms);*/

/*            @media (prefers-reduced-motion: reduce) {*/
/*                animation: none;*/
/*            }*/
/*        }*/
/*    }*/

/*    .introduction {*/
/*        max-width: 550px;*/
/*        height: 100svh;*/
/*        margin: auto;*/
/*        scroll-snap-align: start;*/
/*        display: flex;*/
/*        flex-direction: column;*/
/*        justify-content: center;*/
/*        align-items: center;*/
/*        gap: 4rem;*/
/*        padding-top: 8rem;*/
/*        text-align: justify;*/
/*        text-align-last: center;*/
/*    }*/
/*}*/

.page-wipe {
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background-color: var(--white-background);
    backdrop-filter: blur(50px);
}