body{
    margin:1.25rem;
    font-size:1rem;
    background:#F8F8F6;
    color:#1C1917;
}

body > *{
    animation:fadeInUp 500ms ease-in-out both;
}

@keyframes fadeInUp{
    from {transform:translateY(5px); opacity:0};
    to {transform:translateY(0); opacity:1};
}

body > *:nth-child(1){ animation-delay: 0ms; }
body > *:nth-child(2){ animation-delay: 0ms; }
body > *:nth-child(3){ animation-delay: 50ms; }
body > *:nth-child(4){ animation-delay: 150ms; }
body > *:nth-child(5){ animation-delay: 250ms; }

/* TYPE */

@font-face {
  font-family:"Neue-Montreal";
  src:url("fonts/NM/PPNeueMontreal-Extrabold.woff2") format("woff2");
  font-weight:800;
}

@font-face {
  font-family:"Neue-Montreal";
  src:url("fonts/NM/PPNeueMontreal-Semibold.woff2") format("woff2");
  font-weight:600;
}

@font-face {
    font-family:"Neue-Montreal";
    src:url("fonts/NM/PPNeueMontreal-Medium.woff2") format("woff2");
    font-weight:500;
}

@font-face {
  font-family:"Neue-Montreal";
  src:url("fonts/NM/PPNeueMontreal-Regular.woff2") format("woff2");
  font-weight:400;
}

@font-face {
  font-family:"Neue-Montreal";
  src:url("fonts/NM/PPNeueMontreal-Light.woff2") format("woff2");
  font-weight:300;
}

@font-face {
    font-family:"Radio-Grotesk";
    src:url("fonts/radio/PPRadioGrotesk-Bold.woff2") format("woff2");
    font-weight:700;
}

@font-face {
    font-family:"Radio-Grotesk";
    src:url("fonts/radio/PPRadioGrotesk-Regular.woff2") format("woff2");
    font-weight:400;
}

@font-face {
    font-family:"Radio-Grotesk";
    src:url("fonts/radio/PPRadioGrotesk-Light.woff2") format("woff2");
    font-weight:300;
}

/* BIG NAME */
h1{
    font-family:"Radio-Grotesk", sans-serif;
    font-weight:400;
    font-style:normal;
    font-size:7.451rem;
    line-height:0.9;
    letter-spacing:-4%;
    padding:0;
    margin:0;
    text-box:trim-both cap alphabetic;
}


/* PROJECT PAGE HEADING */
h2{
    display:inline-block;
    font-family:"Radio-Grotesk", sans-serif;
    font-weight:400;
    font-style:normal;
    font-size:4.768rem;
    line-height:0.9;
    letter-spacing:-3%;
    margin:0;
    padding:0;
    text-box:trim-both cap alphabetic;
}

/* SELECTED WORKS */
h3{
    display:inline-block;
    font-family:"Radio-Grotesk", sans-serif;
    font-weight:400;
    font-style:normal;
    font-size:3.052rem;
    line-height:0.9;
    letter-spacing:-2%;
    margin:0;
    padding:0;
    text-box:trim-both cap alphabetic;
}

/* AFFILIATION/YEAR LABELS + ABOUT DESCRIPTION */
h4{
    display:inline-block;
    font-family:"Radio-Grotesk", sans-serif;
    font-weight:300;
    font-style:normal;
    font-size:1.563rem;
    line-height:1.3;
    letter-spacing:-2%;
    margin:0;
    padding:0;
    text-box:trim-both cap alphabetic;
}

/* BOLD EYEBROW */
h5{
    font-family:"Radio-Grotesk", sans-serif;
    font-weight:700;
    font-style:normal;
    font-size:1rem;
    line-height:1;
    letter-spacing:0;
    margin:0 0 1rem 0;
    text-box:trim-both cap alphabetic;
}

/* MAIN NAV PAGE BUTTONS */
h6{
    font-family:"Radio-Grotesk", sans-serif;
    font-weight:400;
    font-style:normal;
    font-size:0.8rem;
    line-height:1;
    margin:0;
    letter-spacing:8%;
    text-align:center;
    text-transform:uppercase;
    text-box:trim-both cap alphabetic;
}

/* LARGE BODY */
.bodyLarge{
    font-family:"Radio-Grotesk", sans-serif;
    font-weight:300;
    font-style:normal;
    font-size:1.25rem;
    line-height:1.3;
    letter-spacing:-1%;
    margin:0;
    padding:0;
    text-box:trim-both cap alphabetic;
}

/* REG BODY */
p{
    font-family:"Radio-Grotesk", sans-serif;
    font-weight:300;
    font-style:normal;
    font-size:1rem;
    letter-spacing:0;
    line-height:1.4;
    margin:0 0 1.4rem 0;
    text-box:trim-both cap alphabetic;
}


/* MAIN NAV */

.mainNavMobile{
    display:none;
}

.mainNav{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    gap:1rem;
    position:fixed;
    left:1.25rem;
    top:calc(1.25rem - 0.5rem);
    width:calc(100% - 2.5rem);
    height:auto;
    z-index:300;
    animation:none;
    transition:transform 300ms;
}

.mainNav h5, .mainNav p{
    margin:0;
}

.name{
    width:calc(((100% - 23rem) / 24) * 8 + 7rem);
    height:auto;
}

.name svg{
    width:24px;
    height:24px;
}

.name a{
    display:flex;
    align-items:center;
    gap:0.5rem;
    color:inherit;
    text-decoration:none;
}

.pages{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    gap:0.5rem;
    width:calc(((100% - 23rem) / 24) * 6 + 5rem);
    height:auto;
}

.pages a{
    width:fit-content;
    height:fit-content;
    text-decoration:none;
    color:inherit;
    padding:0.4rem 0.5rem 0.4rem 0.5rem;
    background:#DBDBD7;
    border-radius:1rem;
}

.other{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    gap:1rem;
    width:calc(((100% - 23rem) / 24) * 10 + 9rem);
    height:auto;
}

.other a{
    color:inherit;
    text-decoration:underline solid 0.05em;
    text-underline-offset:0.1em;
}

.other a:visited{
    color:inherit;
}

.work #workButton{
    background:#0D0D0D;
    color:#F8F8F6;
}

.about #aboutButton{
    background:#0D0D0D;
    color:#F8F8F6;
}

.mainNav .currentProject{
    background:#0D0D0D;
    color:#F8F8F6;
}

#mobileMenuOverlay{
    display:none;
}


/* CURSOR RECTANGLE EFFECT */

#canvas{
    position:fixed;
    right:0;
    top:0;
    width:100vw;
    height:100vh;
    z-index:100;
}

.rect{
    animation: dissolve 0.75s ease-in-out;
    z-index:-100;
}

@keyframes dissolve{
    0%{opacity:.25}
    50%{opacity:.5}
    100%{opacity:0}
}


/* ABOUT PAGE */

.aboutDescription{
    position:relative;
    margin-top:calc((((100vh - 2.5rem) - 13rem) / 14) * 2 + 2rem);
    width:calc(((100% - 23rem) / 24) * 16 + 15rem);
    z-index:200;
}

.aboutDescription h4{
    margin:0 0 1.3em 0;
}

.aboutDescription a, .aboutDescription a:visited{
    color:inherit;
}

#bigName{
    position:fixed;
    left:1.25rem;
    bottom:1.25rem;
    width:calc(100vw - 2.5rem);
    z-index:200;
}


/* WORK GRID */

.projectsNavGrid{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    gap:1rem;
    position:absolute;
    left:1.25rem;
    top:calc((((100% - 13rem) / 14) * 2 + 2rem - 1.25rem));
    width:calc(100% - 2.5rem);
    height:auto;
    z-index:200;
    padding-bottom:1.25rem;
}

.projectsNavGrid p{
    margin:0;
    line-height:1em;
}

.projectsNavGrid a, .projectsNavGrid a:visited{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    gap:1rem;
    /* width:calc(((100% - 23rem) / 24) * 12 + 11rem); */
    width:calc(((100% - 23rem) / 24) * 8 + 7rem);
    text-decoration:none;
    color:inherit;
    padding:0;
    margin:1.25rem 0 0 0;
}

.projectsNavGrid a .projectDetails{
    width:100%;
    /* width:calc((((100% - 11rem) / 12) * 6 + 5rem)); */
    /* text-align:right; */
}

.projectDetails h5{
    margin-bottom:0.5em;
}

.previewGrid{
    width:100%;
    aspect-ratio: 3 / 2;
    object-fit:cover;
}


/* CASE STUDY */

.caseStudyPgCont{
    display:flex;
    justify-content:flex-start;
    align-items:flex-end;
    flex-direction:column;
    gap:3.052rem;
    position:absolute;
    top:1.25rem;
    left:1.25rem;
    width:calc(100% - 2.5rem);
    height:auto;
}

.heroCont{
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    flex-direction:column;
    gap:3.052rem;
    width:100%;
    height:auto;
}

.caseStudyTitle{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:flex-end;
    flex-direction:row;
    width:100%;
}

.caseStudyTitle h2{
    width:calc(((100% - 23rem) / 24) * 16 + 15rem);
    margin-top:calc(((100vh - 13rem) / 14) * 2 + 1rem);
}

.heroSection{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    flex-direction:row;
    gap:1rem;
    width:100%;
    height:auto;
}

.heroText{
    display:flex;
    justify-content:space-between;
    align-content:space-between;
    flex-direction:column;
    width:calc(((100% - 23rem) / 24) * 8 + 7rem);
}

.details{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    gap:3.052rem;
    width:100%;
    height:auto;
    margin:3.052rem 0 -0.8rem 0;
}

.details p{
    margin:0 0 0.8rem 0;
}

.heroMedia{
    width:calc(((100% - 23rem) / 24) * 16 + 15rem);
}

.contentCont{
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
    flex-direction:column;
    width:calc(((100% - 23rem) / 24) * 16 + 15rem);
    height:auto;
}

.description{
    width:calc(((100% - 15rem) / 16) * 12 + 11rem);
    height:auto;
    padding-bottom:1.25rem;
}

.description p a{
    color:inherit;
    text-decoration:underline solid 0.05em;
    text-underline-offset:0.1em;
}

.description p a:visited{
    color:inherit;
}

#projectMedia{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-content:flex-start;
    align-items:flex-start;
    gap:1rem;
    width:100%;
    height:auto;
    padding-bottom:1.25rem;
    margin-top:calc(3.052rem - 1.25rem);
}

.single{
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio: 3 / 2;
    background:#DBDBD7;
    padding:0;
}

.single16x9{
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio: 16 / 9;
    background:#DBDBD7;
    padding:0;
}

.double{
    position:relative;
    aspect-ratio: 1.5 / 2;
    width:calc((100% - 1rem) / 2);
    height:auto;
    background:#DBDBD7;
    padding:0;
}

.single video, img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.single16x9 video, img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.double video, img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}


@media only screen and (max-width: 768px){

    body{
        margin:1rem;
    }

    #canvas{
        display:none;
    }

    h1{
        font-size:3.815rem;
        line-height:0.9;
        letter-spacing:-3%;
    }

    h2{
        display:inline-block;
        font-family:"Radio-Grotesk", sans-serif;
        font-weight:400;
        font-style:normal;
        font-size:3.052rem;
        line-height:0.9;
        letter-spacing:-2%;
        margin:0;
        padding:0;
        text-box:trim-both cap alphabetic;
    }

    h4{
        font-weight:300;
        font-size:1.25rem;
        line-height:1.3;
        letter-spacing:-1%;
    }


    /* MAIN NAV MOBILE */

    .mainNav{
        display:none;
    }

    .mainNavMobile{
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        align-items:center;
        position:fixed;
        left:1rem;
        top:1rem;
        width:calc(100% - 2rem);
        height:auto;
        z-index:300;
        animation:none;
        transition:transform 300ms;
    }

    .mainNavMobile h5, .mainNavMobile p{
        margin:0;
    }

    .name{
        width:calc(((100% - 5rem) / 6) * 5 + 4rem);
    }

    #hamburger:hover{
        cursor:pointer;
    }

    #mobileMenuOverlay{
        display:none;
        justify-content:space-between;
        align-items:flex-start;
        flex-direction:column;
        background:#0D0D0D;
        position:fixed;
        top:0;
        left:0;
        color:#F8F8F6;
        width:calc(100% - 2rem);
        height:calc(100% - 2rem);
        padding:1rem;
        z-index:800;
        animation:slideInFadeIn 300ms ease-in-out;
    }

    @keyframes slideInFadeIn{
        from {transform:translate(0, -100%); opacity:0};
        to {transform:translate(0,0); opacity:1};
    }

    @keyframes slideOutFadeOut{
        from {transform:translate(0,0); opacity:1;}
        to {transform:translate(0, -100%); opacity:0;}
    }

    #mobileMenuOverlay.opening{
        display:flex;
        animation:slideInFadeIn 300ms ease-in-out forwards;
    }

    #mobileMenuOverlay.closing{
        display:flex;
        animation:slideOutFadeOut 300ms ease-in-out forwards;
    }

    #mobileMenuOverlay h5, #mobileMenuOverlay p{
        margin:0;
    }

    #mobileMenuOverlay .name svg rect{
        fill:#F8F8F6;
        color:#F8F8F6;
    }

    #mobileMenuOverlay .name svg path{
        fill:#0D0D0D;
    }

    #closeMenu:hover{
        cursor:pointer;
    }

    #mobileMenuOverlay .mainNavMobile{
        position:relative;
        top:0;
        left:0;
        width:100%;
        z-index:800;
    }

    #mobileMenuOverlay .mainNavMobile #closeMenu path{
        fill:#F8F8F6;
    }

    #mobileMenuOverlay .pages{
        flex-direction:column;
        align-items:flex-start;
        gap:4rem;
        width:100%;
    }

    #mobileMenuOverlay .pages a{
        padding:0;
        background:none;
        border-radius:0;
    }

    .about #mobileMenuOverlay .pages #aboutButton h3::before{
        font-family:'Radio Grotesk', sans-serif;
        font-weight:400;
        content: "•" / "";
        margin-right:0.3em;
    }

    .work #mobileMenuOverlay .pages #workButton h3::before{
        font-family:'Radio Grotesk', sans-serif;
        font-weight:400;
        content: "•" / "";
        margin-right:0.3em;
    }

    .projectPg #mobileMenuOverlay .pages .currentProject h3::before{
        font-family:'Radio Grotesk', sans-serif;
        font-weight:400;
        content: "•" / "";
        margin-right:0.3em;
    }

    #mobileMenuOverlay .other{
        width:100%;
        gap:2rem;
        flex-direction:column;
        justify-content:flex-start;
        align-items:flex-start;
        text-align:left;
    }


    /* WORK GRID MOBILE */

    .projectsNavGrid{
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-start;
        align-items:flex-start;
        flex-direction:column;
        gap:2rem;
        position:absolute;
        left:1rem;
        top:calc((((100vh - 2rem) - 13rem) / 14) * 2 + 2rem);
        width:calc(100% - 2rem);
        height:auto;
        z-index:200;
        padding-bottom:1rem;
    }

    .projectsNavGrid a, .projectsNavGrid a:visited{
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-start;
        align-items:flex-start;
        gap:1rem;
        width:100%;
        text-decoration:none;
        color:inherit;
        padding:0;
        margin:0;
    }


    /* ABOUT PAGE MOBILE */

    .aboutDescription{
        margin-top:calc((((100vh - 2rem) - 13rem) / 14) * 2 + 2rem);
        width:calc(100% - 2rem);
    }

    #bigName{
        width:calc(100% - 2rem);
    }


    /* CASE STUDY MOBILE */

    .caseStudyPgCont{
        top:1rem;
        left:1rem;
        width:calc(100% - 2rem);
    }

    .heroSection{
        flex-direction:column;
    }

    .caseStudyTitle{
        justify-content:flex-start;
        align-items:flex-start;
    }

    .caseStudyTitle h2{
        width:100%;
        margin-top:calc((((100vh - 2rem) - 13rem) / 14) * 2 + 2rem);
    }

    .heroCont{
        gap:1.953rem;
    }

    .heroText{
        flex-direction:column;
        width:100%;
    }

    .details{
        margin:4.768rem 0 2.252rem 0;
    }

    .heroMedia{
        width:100%;
    }

    .contentCont{
        width:100%;
    }

    .description{
        width:100%;
    }

    #projectMedia{
        gap:1rem;
        padding:0 0 1rem 0;
        margin-top:1.25rem;
    }

}