/* ================= BASE ================= */

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


body{
	
background:#0a0a0a;
color:#6f6f6f;
font-family:"futura";
font-size:11px;
letter-spacing:0.1em;
}


.logo,
.nav,
.mobile-nav{
letter-spacing:0.6em;
}

/* ================= CONTAINER ================= */

.container{
max-width:1300px;
margin:0 auto;
padding-left:60px;
padding-right:60px;
position:relative;
}

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

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:60px 20px 20px 20px;
}

.logo{
font-weight:500;
text-decoration:none;
color:#6f6f6f;
}

/* ================= DESKTOP NAV ================= */

.nav{
display:flex;
gap:32px;
}

.nav-item{
position:relative;
}

.nav a{
color:#5f5f5f;
text-decoration:none;
transition:opacity 0.15s ease;
}

a:hover:not(.stills-arrow){
text-decoration:line-through;
opacity:0.6;
}

/* ================= DROPDOWN ================= */

.dropdown{
position:absolute;
top:100%;
left:-10px;
padding:6px 10px 0 10px;
display:flex;
flex-direction:column;
gap:2px;
opacity:0;
pointer-events:none;
transition:opacity 0.15s ease;
}

.nav-item:hover .dropdown,
.nav-item.open .dropdown{
opacity:1;
pointer-events:auto;
}

/* ================= HAMBURGER ================= */

.menu-toggle{
display:none;
cursor:pointer;
font-size:20px;
letter-spacing:0;
}

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

.mobile-nav{
display:none;
position:absolute;
right:60px;
top:95px;
opacity:0;
pointer-events:none;
transition:opacity 0.2s ease;
}

.mobile-nav.open{
opacity:1;
pointer-events:auto;
}

.mobile-nav-inner{
display:flex;
flex-direction:row;
justify-content:flex-end;
gap:24px;
}

.mobile-nav a{
text-decoration:none;
color:#5f5f5f;
}

.mobile-nav a:hover{
opacity:0.6;
}

/* ================= SEPARATOR ================= */

.separator{
display:flex;
justify-content:center;
margin-top:32px;
margin-bottom:16px;
}

.separator-line{
width:50%;
height:1px;
background:#444;
}


/* ================= VIDEO GRID ================= */

.video-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-top:60px;
}

.video-grid .project{
margin-bottom:0;
}

@media (max-width:900px){

.video-grid{
grid-template-columns:1fr;
}

}

/* ================= ALBUM NAV ================= */

.album-nav{
display:flex;
justify-content:space-between;
margin-top:40px;
margin-bottom:40px;
letter-spacing:0.6em;
}

.album-btn{
background:none;
border:none;
color:#5f5f5f;
font-family:"futura";
font-size:11px;
font-weight:normal;
letter-spacing:0.2em;
cursor:pointer;
}

.album-btn:hover{
opacity:0.6;
text-decoration:line-through;
}

.album-btn.active{
color:#9f9f9f;
font-style:italic;
}




/* ================= ALBUM IMAGES ================= */

.album{
display:none;
flex-direction:column;
gap:30px;
padding-bottom:30px;
}

.album.active{
display:flex;
}

.album img{
width:100%;
height:auto;
display:block;
}




/* ================= SCROLL TO TOP ================= */

#scrollTopBtn{
position:fixed;

bottom:40px;

/* align with container edge */
right:calc((100vw - min(1300px, 100vw))/2 + 10px);

background:none;
border:none;
color:#5f5f5f;
font-family:"futura";
font-size:11px;
font-weight:normal;
letter-spacing:0.2em;
cursor:pointer;

opacity:0;
pointer-events:none;

transition:opacity 0.5s ease;
}

#scrollTopBtn.visible{
opacity:0.6;
pointer-events:auto;
}

#scrollTopBtn:hover{
opacity:1;
}



/* ================= STILLS ARCHIVE PAGE ================= */

.stills-archive{
margin-top:60px;
display:flex;
flex-direction:column;
gap:30px;
}

.stills-archive img{
width:100%;
display:block;
object-fit:cover;
}


/* ================= WORK SECTION ================= */

.project{
position:relative;
width:100%;
aspect-ratio:2.4/1;
overflow:hidden;
cursor:pointer;
display:block;
margin-bottom:40px;
}

.project img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:filter 0.4s ease;
}

.project-title{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
letter-spacing:0.8em;
opacity:0;
transition:opacity 0.4s ease 0.15s;
color:white;
text-align:center;
}

.project:hover img{
filter:brightness(40%);
}

.project:hover .project-title{
opacity:1;
}


.about-image{
aspect-ratio:2.4/1;
object-fit:cover;
width:100%;
display:block;
margin-bottom:40px;
}

.about{
max-width:1200px;
margin:10px auto;
line-height:1.7;
letter-spacing:0.04em;
}

.about a{
color:#6f6f6f;
text-decoration:underline;
}

.about a:hover{
opacity:0.6;
}


.about{
display:flex;
gap:60px;
margin:80px 0;
}

.about-image-wrap{
flex:0 0 70%;
}

.about-image{
width:100%;
display:block;
object-fit:cover;
}

.about-text{
flex:1;
letter-spacing:0.04em;
line-height:1.7;
}

.about-text a{
color:#6f6f6f;
text-decoration:underline;
}

.about-text a:hover{
opacity:0.6;
}


.video-page{
margin-top:60px;
}

.video-title{
font-size:18px;
letter-spacing:0.6em;
margin-top:20px;
margin-bottom:10px;
}

.video-embed{
width:100%;
margin-bottom:40px;
}

.video-info{
max-width:700px;
line-height:1.7;
letter-spacing:0.04em;
margin-bottom:60px;
}

.video-info p{
margin-bottom:12px;
}

.video-stills{
width:95%;
margin:0 auto;
margin-bottom:50px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0px;
}

.video-stills img{
width:100%;
display:block;
}


/* ================= YOUTUBE EMBED ================= */

.youtube-wrap{
position:relative;
width:75%;          /* reduces width so height feels similar */
padding-top:42.18%; /* 16:9 based on 75% width */
margin:0 auto;
}

.youtube-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}



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

@media (max-width:900px){

.nav{
display:none;
}

.menu-toggle{
display:block;
}

.mobile-nav{
display:block;
}

@media (max-width:900px){

.about{
flex-direction:column;
}

.about-image-wrap,
.about-text{
flex:100%;
}

}


}