body {
    font-size: var(--fs);
}


p {
    max-width: 1400px;
    margin-left: 2rem;
    margin-right: 2rem;
}

header:has(nav>ul.hovered)+* {
    opacity: 0.1;
    scale: .98;


}

main {
    overflow: hidden;
    height: 100vh;

    .end {
        height: var(--bm);

        position: relative;
        margin-top: 30vh;

    }
}

body {
    height: calc(100vh - var(--bm) * 2);
    overflow: hidden;
    margin: 0;
}

.project-content {
    height: 100vh;
    overflow: scroll;
    font-family: "Futura";
    line-height: 1.3;


}




header.hidden {
    opacity: 0;
    pointer-events: none;
}


main {
    /* padding-bottom: .7rem; */
}

figure {
    margin-block: 2rem;
    display: flex;
    flex-direction: column;
    aspect-ratio: auto !important;
    margin: .5rem;

    picture {
        display: block;

        img {
            display: block;
            width: 100%;
            height: auto;
            max-height: calc(100svh - 5rem);
            object-fit: contain;
        }

    }

    figcaption {
        margin-top: 0.5rem;
        font-size: 1rem;

        text-align: center;
    }
}


.related {
    text-transform: lowercase;
    width: calc(var(--menu-width) - var(--bm) * 2);

    text-align: center;
    font-size: var(--mb-fs);
    font-family: Helvetica;
    display: block;
    z-index: 500;
    margin-bottom: calc(var(--bm) * 4);
    transition: all 0.1s ease-in;
    opacity: 0;
    font-family: "Futura";
    letter-spacing: .3px;
    line-height: 2.2ch;

    &.in-view {
        opacity: 1;
    }

    a.underline {
        text-decoration-line: underline !important;
        text-decoration-thickness: var(--u-thickness);
        text-underline-offset: var(--u-offset);
        text-decoration-color: var(--u-color);
        text-decoration-style: var(--u-style);
    }

    .related-images {
        display: flex;
        justify-content: center;
        flex-direction: column;
        flex-wrap: wrap;
        gap: var(--map-gap);
    }

    figure {

        display: inline-block;
        width: var(--map-item-width);
        margin: var(--map-gap);
        position: relative;

        picture {
            display: flex;
            align-items: center;
            justify-content: center;


            img {
                max-height: 300px;
                height: auto;
                display: block;
                object-fit: contain;
                transition: opacity 0.3s ease-out, transform 0.3s ease-out;
                opacity: 0.3;


            }
        }
    }

    section.nav {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
}


p {
    text-indent: 35vw;
}



img[data-i="1"],
img[data-i="2"],
img[data-i="3"],
img[data-i="4"],
img[data-i="5"],
img[data-i="6"],
img[data-i="7"],
img[data-i="8"],
img[data-i="9"],
img[data-i="10"] {

    pointer-events: none;

}



.related:has(a[data-i="1"]:hover) img[data-i="1"],
.related:has(a[data-i="2"]:hover) img[data-i="2"],
.related:has(a[data-i="3"]:hover) img[data-i="3"],
.related:has(a[data-i="4"]:hover) img[data-i="4"],
.related:has(a[data-i="5"]:hover) img[data-i="5"],
.related:has(a[data-i="6"]:hover) img[data-i="6"],
.related:has(a[data-i="7"]:hover) img[data-i="7"],
.related:has(a[data-i="8"]:hover) img[data-i="8"],
.related:has(a[data-i="9"]:hover) img[data-i="9"],
.related:has(a[data-i="10"]:hover) img[data-i="10"] {
    opacity: 1;

    display: block;
    position: relative;
    z-index: 1;
}