body{
margin:0;
font-family:Inter;
background:#fafafa;
color:#111;
}

/* HEADER */

.header{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
background:white;
z-index:100;
}

.logo{
font-family:"Playfair Display";
font-size:20px;
}

/* NAVIGATION */

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

.nav a{
text-decoration:none;
color:#111;
font-size:16px;
}

/* BURGER MENU */

.burger{
display:none;
flex-direction:column;
justify-content:center;
gap:6px;
background:none;
border:none;
cursor:pointer;
padding:8px;
}

.burger span{
width:32px;
height:3px;
background:#111;
display:block;
border-radius:3px;
transition:all .3s ease;
}

/* BURGER ANIMATION */

.burger.active span:nth-child(1){
transform:rotate(45deg) translate(6px,6px);
}

.burger.active span:nth-child(2){
opacity:0;
}

.burger.active span:nth-child(3){
transform:rotate(-45deg) translate(7px,-7px);
}

/* HERO */

.hero{
height:100vh;
position:relative;
}

.hero-image{
width:100%;
height:100%;
object-fit:cover;
}

.hero-overlay{
position:absolute;
bottom:120px;
left:100px;
color:white;
}

.hero-overlay h1{
font-size:64px;
font-family:"Playfair Display";
}

/* ABOUT */

.about{
max-width:720px;
margin:auto;
padding:180px 20px;
line-height:1.9;
font-size:18px;
}

.about h2{
font-family:"Playfair Display";
font-size:40px;
margin-bottom:60px;
}

/* GALLERY */

.gallery{
padding:120px 10%;
}

.gallery h2{
font-family:"Playfair Display";
font-size:40px;
margin-bottom:60px;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:60px;
}

.art{
position:relative;
}

.art img{
width:100%;
cursor:pointer;
transition:transform .3s, box-shadow .3s;
}

.art img:hover{
transform:scale(1.04);
box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.art span{
position:absolute;
bottom:10px;
left:10px;
background:rgba(0,0,0,.6);
color:white;
padding:6px 10px;
font-size:14px;
opacity:0;
transition:.3s;
}

.art:hover span{
opacity:1;
}

/* IMAGE VIEWER */

.viewer{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:black;
display:none;
justify-content:center;
align-items:center;
z-index:999;
}

#viewer-img{
max-width:95vw;
max-height:95vh;
}

.close{
position:absolute;
top:30px;
right:40px;
color:white;
font-size:40px;
cursor:pointer;
}

.arrow{
position:absolute;
top:50%;
color:white;
font-size:40px;
cursor:pointer;
}

.left{left:40px;}
.right{right:40px;}

/* CONTACT */

.contact{
padding:140px 20px;
text-align:center;
background:#f3f3f3;
}

.contact a{
color:#111;
text-decoration:none;
font-weight:500;
}

/* MOBILE */

@media(max-width:900px){

.header{
padding:15px 20px;
}

/* burger visible */

.burger{
display:flex;
}

/* hide nav */

.nav{
display:none;
flex-direction:column;
position:absolute;
top:60px;
right:20px;
background:white;
padding:20px;
box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.nav.show{
display:flex;
}

.hero-overlay{
left:30px;
bottom:60px;
}

.hero-overlay h1{
font-size:36px;
}

.about{
padding:140px 20px;
font-size:17px;
}

.gallery{
padding:100px 6%;
}

.gallery-grid{
gap:40px;
}

}
.gallery-subtitle {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #aaa;
  margin-top: -8px;
  margin-bottom: 50px;
  letter-spacing: 2px;
  text-transform: uppercase;
}