*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Akkurat Trial TT";
}

html,body{
    width:100vw;
    height:400vh;
    background-color:#111;
    color:#fff;
    overflow-x: hidden;
    scroll-behavior: smooth;
}


h1{
    text-transform: uppercase;
    font-size: 225px;
    font-weight: 400;
    line-height:0.85;
}

a,p{
    text-decoration: none;
    color:#fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 0.9;
}

p {
    font-family: "Gascogne Serial";
}

.model{
    position:fixed;
    z-index:2;
}
header a{
    font-size: 18px;
    font-weight: 400;
    color: #4f4f4f;
    display:flex;
    justify-content: space-between;
    align-items: flex-end;
}

nav{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    padding:2em;
    display:flex;
    justify-content: space-between;
    align-items: center;
}


nav a{
    text-transform: uppercase;
}

section{
    width:100vw;
    height: 100vh;
    scroll-margin-top: 80px; /* Adjust to match your header height */
}

.intro{
    display:flex;
    flex-direction: column;
    justify-content: center;
    padding:1em;
}

.header-row{
    display: flex;
    gap:12em;
    align-items: center;
}

.header-row p{
    text-transform: uppercase;
    width:20%;
    font-size: 20px;
}

.archive{
    height:200vh;
    display:flex;
    flex-direction: column;
    gap:3em;
    justify-content: center;
    align-items: center;
    text-align: center;

}

.archive-header p{
    font-family: "Gascogne Serial";
    font-size: italic;
    font-size: 40px;
    font-weight: 400;
}

.archive h2{
    font-family:"Gascogne Serial";
    font-size: 120px;
    font-weight: 300;
    color:#4f4f4f;
}

.archive-info{
    width:100%;
    padding: 1em;
    display:flex;
    justify-content: space-around;
    align-items: center;
}

.archive-info p{
    text-transform: uppercase;
    color:#4f4f4f;
}

.outro{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    padding:6em 2em 2em 2em;
}

.outro-copy h2{
    width:75%;
    text-transform:uppercase;
    font-size: 37px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 1.5em;
}

.outro-copy h2 .line{
    position: relative;
    clip-path: polygon(0 0, 100% 0,100% 100%, 0% 100%);
    overflow: hidden;
    display:block;
}

.outer-copy h2 .line span{
    position:relative;
    will-change:transform;
    display:flex;
    transform: translateY(70px);
}

.outro-copy p{
    display:flex;
    margin:1em 0;
    gap:2em;
   /* text-transform: uppercase;*/
}

.outer-copy p span{
    font-family: "Akkurat Trial TT";
}

.footer{
    display: flex;
    left:0;
    justify-content: right;
    align-items: right;
    text-transform: uppercase;
}

.lenis.lenis-smooth{
    scroll-behavior:auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent]{
    overscroll-behavior: contain;
}

.lenis.lenis-stopped{
    overflow: clip;
}

.lenis.lenis-smooth iframe{
    pointer-events:none;
}


* Styling for custom scrollbars */
::-webkit-scrollbar {
    width: 12px;  /* Width of the scrollbar */
  }
  
  ::-webkit-scrollbar-thumb {
    background: #888;  /* Color of the scrollbar thumb */
    border-radius: 6px;  /* Round the edges of the scrollbar thumb */
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;  /* Background of the scrollbar track */
  }



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

    h1{
        width:100%;
        line-height: 1.3;
        font-size: 130px;
    }
    p{
        font-size: 13px;
    }
    #intro p{
        width:60%;
        line-height: 1.5;
        font-size: 20px;
    }
    .outro-copy h2{
        width:90%;
        font-size: 25px;
        font-weight: 400;
        line-height: 2;
        margin-bottom: 1.5em;
    }
  

  }

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

    h1{
        width:100%;
        line-height: 1.3;
        font-size: 130px;
    }
    p{
        font-size: 13px;
    }
    .header-row h1{
        max-width: fit-content;
        font-size: 100px;
        
    }
    #intro p{
        width:100%;
        line-height: 1;
        font-size: 15px;
    }
    .outro-copy h2{
        width:90%;
        font-size: 21px;
        font-weight: 400;
        line-height: 2;
        margin-bottom: 1.5em;
    }
    
    .outro-copy p{
        margin:2em 0;
        gap:2em;
    }
    
    
    @media screen and (max-width:767px){
       .intro h1{
        font-size: 70px;
        line-height: 1.3;
       }
        
        .archive h2{
            font-size: 70px;
            font-weight: 150;
        }
        .archive-info{
            width:100%;
            padding: 1em;
            display:flex;
            justify-content: space-between;
            align-items: center;
        }
       
        .outro-copy h2{
            width:75%;
            text-transform:uppercase;
            font-size: 15px;
            font-weight: 400;
            line-height: 1;
            margin-bottom: 1.5em;
        }
        
    }
  }
    @media screen and (max-width:647px){
        #intro p{
            visibility: hidden;
        }

    }