@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Inter:wght@300;400;500&display=swap');


/* =========================================
   GLOBAL
========================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    background: #000;

    color: rgba(255, 255, 255, 0.92);

    font-family: 'Inter', sans-serif;
}


/* =========================================
   HEADER
========================================= */

.Header {
    position: fixed;

    top: 36px;
    left: 42px;

    width: 170px;

    z-index: 1000;

    display: flex;
    flex-direction: column;

    opacity: 1;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


.Header.is-scrolled {
    opacity: 0.42;

    transform: scale(0.92);

    transform-origin: top left;
}


.Header:hover {
    opacity: 1;
}


.Header-branding {
    font-family: 'DM Sans', sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.15;

    letter-spacing: -0.018em;

    color: rgba(255, 255, 255, 0.94);

    text-decoration: none;
}


/* =========================================
   NAVIGATION
========================================= */

.Header-nav {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin-top: 52px;

    font-family: 'DM Sans', sans-serif;

    font-size: 11px;

    line-height: 1.15;

    letter-spacing: 0.015em;
}


.Header-nav-item {
    color: rgba(255, 255, 255, 0.60);

    text-decoration: none;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}


.Header-nav-item:hover,
.Header-nav-item.active {
    color: rgba(255, 255, 255, 0.96);
}


/* =========================================
   SIDE ARROWS
========================================= */

.project-side-nav {
    position: fixed;

    top: 50%;

    transform: translateY(-50%);

    z-index: 1200;

    font-family: 'Inter', sans-serif;

    font-size: 15px;

    font-weight: 300;

    line-height: 1;

    color: rgba(255, 255, 255, 0.30);

    text-decoration: none;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.project-side-prev {
    left: 17%;
}


.project-side-next {
    right: 3.5%;
}


/* apparaissent après le début du scroll */

body.project-has-scrolled
.project-side-nav {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* disparaissent quand BACK TO WORK arrive */

body.project-end-visible
.project-side-nav {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


.project-side-prev:hover {
    color: rgba(255, 255, 255, 0.92);

    transform:
        translateY(-50%)
        translateX(-3px);
}


.project-side-next:hover {
    color: rgba(255, 255, 255, 0.92);

    transform:
        translateY(-50%)
        translateX(3px);
}


/* =========================================
   MAIN
========================================= */

.project-main {
    width: 100%;

    padding:
        180px 7% 180px 23%;
}


/* =========================================
   INTRO
========================================= */

.project-intro {
    width: 100%;

    max-width: 1100px;

    margin-bottom: 130px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap: 40px;
}


/* =========================================
   TITLE
========================================= */

.project-title {
    margin: 0;

    max-width: 800px;

    font-family: 'DM Sans', sans-serif;

    font-size:
        clamp(
            18px,
            1.6vw,
            26px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.02em;

    opacity: 0;

    animation:
        projectTitleIn
        0.75s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.08s
        forwards;
}


@keyframes projectTitleIn {

    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================
   META
========================================= */

.project-meta {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 5px;

    padding-bottom: 3px;

    font-size: 7px;

    font-weight: 300;

    line-height: 1;

    letter-spacing: 0.12em;

    color: rgba(255, 255, 255, 0.34);

    opacity: 0;

    animation:
        projectMetaIn
        0.7s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.20s
        forwards;
}


@keyframes projectMetaIn {

    from {
        opacity: 0;

        transform:
            translateY(8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================
   GALLERY
========================================= */

/* Shared photo sizes follow the SSSTEIN portrait pairs. */
.project-gallery {
    --portrait-width: min(572px, calc((70vw - 36px) / 2), 58.666vh);
    width: 100%;
    max-width: 1180px;
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.project-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    animation: none;
}

.project-image-vertical {
    position: relative;
    width: var(--portrait-width);
    max-width: 100%;
    aspect-ratio: 2 / 3;
    margin: 0 auto;
}

.project-image-horizontal {
    position: relative;
    width: 100%;
    max-width: 1180px;
    aspect-ratio: 3 / 2;
    max-height: 88vh;
    margin: 0 auto;
}

.project-image-vertical img,
.project-image-horizontal img {
    position: absolute;
    inset: 0;
}

.project-image-pair {
    display: grid;
    grid-template-columns: repeat(2, var(--portrait-width));
    justify-content: center;
    align-items: center;
    gap: 36px;
    width: 100%;
}

/* =========================================
   BACK TO WORK
========================================= */

.project-end {
    width: 100%;

    max-width: 1180px;

    margin-top: 180px;

    padding-top: 24px;

    border-top:
        1px solid rgba(255, 255, 255, 0.10);
}


.project-back {
    font-family: 'Inter', sans-serif;

    font-size: 8px;

    font-weight: 300;

    letter-spacing: 0.12em;

    color: rgba(255, 255, 255, 0.42);

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.project-back:hover {
    color: rgba(255, 255, 255, 0.92);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .project-main {
        padding:
            170px 40px
            140px 220px;
    }


    .project-gallery {
        --portrait-width: min(572px, calc((100vw - 296px) / 2), 58.666vh);
        gap: 90px;
    }


    .project-intro {
        margin-bottom: 100px;
    }


    .project-side-prev {
        left: 15%;
    }


    .project-side-next {
        right: 2.5%;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .Header {
        position: absolute;

        top: 24px;
        left: 24px;

        width: auto;
    }


    .Header-branding {
        font-size: 14px;
    }


    .Header-nav {
        flex-direction: row;

        gap: 14px;

        margin-top: 18px;

        font-size: 10px;
    }


    .project-side-nav {
        font-size: 13px;

        color: rgba(255, 255, 255, 0.38);
    }


    .project-side-prev {
        left: 8px;
    }


    .project-side-next {
        right: 8px;
    }


    .project-main {
        padding:
            165px 24px 90px;
    }


    .project-intro {
        grid-template-columns: 1fr;

        gap: 22px;

        margin-bottom: 75px;
    }


    .project-title {
        font-size: 19px;
    }


    .project-meta {
        align-items: flex-start;
    }


    .project-gallery {
        --portrait-width: min(572px, calc(100vw - 48px));
        gap: 60px;
    }


    .project-image-pair {
        grid-template-columns: minmax(0, 1fr);
        gap: 60px;
    }





    .project-end {
        margin-top: 100px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

}