/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 3rem; transition: all 0.4s;
}
nav.scrolled {
  background: rgba(246,242,237,0.96); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand);
}
.nav-logo {
  font-family: var(--font-serif); font-size: 1.8rem; font-weight: 600;
  letter-spacing: 0.15em; color: var(--ivory); text-decoration: none; transition: color 0.3s;
}
nav.scrolled .nav-logo { color: var(--charcoal); }
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a {
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(246,242,237,0.75); text-decoration: none; transition: color 0.3s;
}
nav.scrolled .nav-links a { color: var(--stone); }
.nav-links a:hover { color: var(--coral); }
.nav-right { display: flex; gap: 1.5rem; align-items: center; }
.nav-right a {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(246,242,237,0.75); text-decoration: none; transition: color 0.3s;
}
nav.scrolled .nav-right a { color: var(--stone); }
.nav-right a:hover { color: var(--coral); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.hamburger span { width: 22px; height: 1px; background: var(--ivory); display: block; transition: background 0.3s; }
nav.scrolled .hamburger span { background: var(--charcoal); }

.mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(4px);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:9998;
}

.mobile-overlay.active{
    opacity:1;
    visibility:visible;
}

.mobile-menu{

    position:fixed;

    top:0;
    right:-320px;

    width:300px;
    height:100vh;

    background:#F6F2ED;

    display:flex;
    flex-direction:column;

    padding:100px 35px;

    gap:28px;

    transition:.35s ease;

    z-index:9999;

    box-shadow:-8px 0 30px rgba(0,0,0,.15);

}

.mobile-menu.active{

    right:0;

}

.mobile-menu a{

    font-size:14px;

    letter-spacing:.2em;

    text-transform:uppercase;

    text-decoration:none;

    color:#2A2521;

}

.mobile-menu a:hover{

    color:#B87B5A;

}
.hamburger{

    z-index:9999;

}

.hamburger span{

    transition:.3s;

}

.hamburger.active span:nth-child(1){

    transform:rotate(45deg) translate(5px,5px);

}

.hamburger.active span:nth-child(2){

    opacity:0;

}

.hamburger.active span:nth-child(3){

    transform:rotate(-45deg) translate(6px,-6px);

}
body.menu-open{

    overflow:hidden;

}