*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:20px;
    font-weight:200;
    letter-spacing:-0.04em;
    line-height:1.15;
    color:#000;
    background:#fff;
}

a{
    color:inherit;
    text-decoration:none;
}

h1{
    font-size:40px;
    font-weight:400;
    letter-spacing:-0.08em;
    line-height:.9;
}

p{
    font-size:20px;
    font-weight:200;
    letter-spacing:-0.04em;
    margin-bottom:25px;
}

/* NAV */

nav{
    position:fixed;
    top:25px;
    left:25px;
    right:25px;
    display:flex;
    gap:60px;
    z-index:9999;
    mix-blend-mode:difference;
}

nav a{
    color:white;
    font-size:26px;
    font-weight:420;
    letter-spacing:-0.07em;
    transition:opacity .25s ease, transform .25s ease;
}

nav a:hover{
    opacity:.65;
    transform:translateY(-2px);
}

/* HOME */

.hero{
    width:100%;
    height:100vh;
    background-size:cover;
    background-position:center center;
    display:flex;
    align-items:flex-end;
    padding:40px;
    overflow:hidden;
    background:#111;
}

.hero-title{
    color:white;
    font-size:18vw;
    font-weight:500;
    letter-spacing:-0.13em;
    line-height:.68;
    white-space:normal;
    mix-blend-mode:difference;
}

/* WORKS */

.works-list{
    min-height:100vh;
    padding:140px 40px 120px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.work-item{
    display:block;
    width:max-content;
    font-size:34px;
    font-weight:500;
    letter-spacing:-0.06em;
    line-height:1;
    transition:
        opacity .3s ease,
        font-size .45s cubic-bezier(.2,.8,.2,1),
        transform .45s cubic-bezier(.2,.8,.2,1);
}

.works-list:hover .work-item{
    opacity:.08;
}

.work-item:hover{
    opacity:1!important;
    font-size:50px;
    transform:translateX(15px);
}

/* ABOUT */

.about-page{
    min-height:100vh;
    display:grid;
    grid-template-columns:40% 60%;
    gap:80px;
    padding:140px 40px 120px;
}

.about-text{
    max-width:700px;
}

.about-text h1{
    margin-bottom:40px;
}

.about-image{
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
}

.about-image img{
    width:100%;
    max-width:500px;
}

.text-images{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.text-images img{
    display:block;
    width:100%;
    max-width:620px;
    height:auto;
}

/* PROJECT */

.project{
    min-height:100vh;
    display:grid;
    grid-template-columns:40% 60%;
    gap:80px;
    padding:140px 40px 120px;
}

.project-content{
    position:sticky;
    top:120px;
    align-self:start;
    max-width:700px;
}

.project-content h1{
    margin-bottom:40px;
}

.gallery{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:80px;
}

.gallery img{
    display:block;
    width:auto;
    height:auto;
    max-width:400px;
    max-height:550px;
    background:#fff;
    object-fit:contain;
    transition:transform .4s ease;
}

.gallery img:hover{
    transform:scale(1.02);
}

/* RESPONSIVE */

@media(max-width:900px){

    nav{
        left:20px;
        right:20px;
        gap:25px;
        flex-wrap:wrap;
    }

    nav a{
        font-size:22px;
    }

    .hero{
        padding:25px;
    }

    .hero-title{
        font-size:24vw;
        letter-spacing:-0.13em;
        line-height:.72;
    }

    .project,
    .about-page{
        grid-template-columns:1fr;
        padding-left:25px;
        padding-right:25px;
    }

    .project-content{
        position:relative;
        top:auto;
    }

    .gallery{
        align-items:center;
        gap:30px;
    }

    .gallery img{
        width:90vw;
        max-width:none;
        max-height:80vh;
    }

    .work-item{
        font-size:30px;
    }

    .work-item:hover{
        font-size:40px;
    }
}


/* PROJECT + ABOUT TEXT LAYOUT — V5 */
.project,
.about-page{
    display:grid;
    grid-template-columns:calc(100% - 530px) 400px;
    column-gap:80px;
    padding:140px 50px 120px 40px;
    background:#fff;
}

.project-content,
.about-text{
    max-width:720px;
}

.project-content h1,
.about-text h1{
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:25px;
    font-weight:500;
    letter-spacing:-0.04em;
    line-height:1.05;
    margin-bottom:200px;
}

.project-text,
.about-copy{
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:20px;
    font-weight:300;
    letter-spacing:-0.035em;
    line-height:1.18;
    max-width:620px;
}

.project-text p,
.about-copy p{
    font-size:20px;
    font-weight:300;
    letter-spacing:-0.035em;
    line-height:1.18;
    margin-bottom:24px;
}

.gallery{
    align-items:flex-end;
    padding-right:0;
}

.gallery img{
    max-width:400px;
    max-height:550px;
    width:auto;
    height:auto;
    object-fit:contain;
    background:#fff;
}

.about-page{
    display:block;
    padding-right:50px;
}

.about-text{
    max-width:720px;
}

.about-image-centered{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:120px;
}

.about-image-centered img{
    display:block;
    max-width:400px;
    max-height:550px;
    width:auto;
    height:auto;
    object-fit:contain;
    background:#fff;
}

@media(max-width:900px){
    .project,
    .about-page{
        display:block;
        padding:120px 25px 80px;
    }
    .project-content h1,
    .about-text h1{
        margin-bottom:80px;
    }
    .gallery{
        align-items:center;
        margin-top:80px;
    }
    .gallery img,
    .about-image-centered img{
        max-width:min(400px, 90vw);
        max-height:550px;
    }
}


/* V6 project image rules */
.project-content h1{font-size:25px;font-weight:500;margin-bottom:200px;}
.project-text p{font-size:20px;font-weight:200;line-height:1.15;}
.gallery img{max-width:400px;max-height:550px;background:#fff;}
.feature-wide{display:block;width:calc(100vw - 200px);max-width:none;max-height:none;height:auto;object-fit:contain;background:#fff;}
.feature-below{margin-top:100px;}
.feature-above{margin-bottom:100px;}
.project-content .feature-wide{position:relative;left:0;}
@media(max-width:900px){.feature-wide{width:calc(100vw - 40px);} .project-content h1{margin-bottom:80px;}}


/* V7 — Les Yeux project */
.gallery video{display:block;width:auto;height:auto;max-width:400px;max-height:550px;background:#fff;object-fit:contain;}
.project-text strong{font-weight:500;}
.project-text code{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:18px;letter-spacing:-0.035em;line-height:1.2;}
.project-links a{text-decoration:underline;text-underline-offset:3px;}
@media(max-width:900px){.gallery video{max-width:min(400px, 90vw);max-height:550px;}}


/* V7.2 — Les Yeux audio + chapter spacing */
.les-yeux-page .project-text .chapter-title{margin-top:120px;margin-bottom:40px;}
.les-yeux-page .project-text .chapter-title:first-child{margin-top:0;}
.les-yeux-page .project-text p{margin-bottom:28px;}
.les-yeux-page .audio-section{margin-top:120px;margin-bottom:120px;}
.les-yeux-page .audio-section .chapter-title{margin-top:0;}
.les-yeux-page .audio-group{margin-top:45px;}
.les-yeux-page .audio-group-title{font-weight:500;margin-bottom:22px;}
.les-yeux-page .audio-item{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:520px;}
.les-yeux-page .audio-item span{font-size:20px;font-weight:300;}
.les-yeux-page .audio-item audio{width:100%;max-width:520px;}
@media(max-width:900px){.les-yeux-page .project-text .chapter-title,.les-yeux-page .audio-section{margin-top:80px;} .les-yeux-page .audio-section{margin-bottom:80px;}}