/* ---- Slideout menu (vanilla, no dependencies) ---- */

.menu-toggle{
  position: fixed;
  top: 3rem;
  right: 5rem;
  z-index: 100001;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.menu-toggle span{
  display: block;
  height: 2px;
  width: 26px;
  margin: 0 auto;
  background: #1a1a18;
  transition: transform .3s ease, opacity .2s ease;
}
body.menu-open .menu-toggle span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2){ opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgbargba(255, 255, 255, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
body.menu-open .menu-overlay{
  opacity: 1;
  visibility: visible;
}

.slideout{
  position: fixed;
  top: 0rem;
  right: 0rem;
  z-index: 100000;
  height: 100vh;
  width: 320px;
  max-width: 82vw;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari */
  padding: 96px 36px 36px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 30px rgba(0,0,0,.06);
}
body.menu-open .slideout{
  transform: translateX(0);
}

.slideout ul{ list-style: none; margin: 0; padding: 0; }
.slideout li{ margin: 0; }
.slideout a{
  display: block;
  padding: 14px 0;
  font-size: 20px;
  color: #1a1a18;
  text-decoration: none;
  border-bottom: 1px solid #e4e2da;
  transition: color .15s ease, padding-left .15s ease;
}
.slideout a:hover,
.slideout a:focus{
  color: #7a3b2e;
  padding-left: 6px;
}

body.menu-open{ overflow: hidden; }