:root{
  --header-h: 22px;
  --footer-h: 90px;
  --nav-w: 260px;
}

/* overlay only used on mobile */
.nav-overlay{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9997;
}

.side-nav{
  width: var(--nav-w);
  background: #2a140a;
  border-right: 2px solid #c28a4a;
  position: fixed;
  top: var(--header-h);
  bottom: var(--footer-h);
  left: 0;
  overflow-y: auto;
  padding: 0;
  z-index: 9998;
}

/* ✅ HIDE the menu bar + X on desktop */
.nav-top{ display:none; }

.nav-list{
  list-style:none;
  margin:0;
  padding: 20px 12px 40px;
}

.nav-list li + li{
  margin-top:16px;
  padding-top:16px;
  border-top:1px dashed rgba(194,138,74,0.4);
}

.side-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#f7e3c5;
  padding:6px 8px;
  border-radius:8px;
  transition:.2s ease;
}

.side-nav a:hover{
  background: rgba(255,210,140,0.08);
  transform: translateX(3px);
}

.side-nav img{ width:60px; }

.side-nav span{
  font-family: Georgia, serif;
  letter-spacing:.08em;
  text-transform: uppercase;
}

/* ✅ Mobile off-canvas */
@media (max-width:1100px){
  .nav-top{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 12px 12px 8px;
    border-bottom: 1px dashed rgba(194,138,74,0.35);
  }

  .nav-title{
    color:#f7e3c5;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .nav-close{
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255,220,160,0.2);
    background: rgba(255,220,160,0.06);
    color:#f7e3c5;
    cursor:pointer;
  }

  .side-nav{
    top: 0;
    bottom: 0;
    transform: translateX(-105%);
    transition: transform .2s ease;
    width: min(86vw, 320px);
    z-index: 9999;
  }

  body.nav-open .side-nav{ transform: translateX(0); }
  body.nav-open .nav-overlay{ display:block; }
}