/* ============================================================
   Semberlee — site header + hamburger drawer
   Shared by every page. Depends on the palette custom
   properties (--cream, --rose-deep, …) declared on :root.
   ============================================================ */

header{
  position:sticky; top:0; z-index:60;
  background:rgba(247,239,234,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
header nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px; gap:16px;
}
.nav-left{display:flex; align-items:center; gap:16px; min-width:0;}
.brand{display:flex; align-items:center;}
.brand-logo{display:block; height:46px; width:auto;}

.nav-cta{
  background:var(--rose-deep); color:var(--cream); padding:10px 20px;
  border-radius:999px; font-size:0.87rem; font-weight:500; white-space:nowrap;
  transition:.2s;
}
.nav-cta:hover{background:var(--rose-mid);}

/* ---------- hamburger button (top-left) ---------- */
.menu-btn{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 15px 9px 13px; cursor:pointer; font-family:inherit;
  color:var(--ink); transition:.2s;
  -webkit-tap-highlight-color:transparent;
}
.menu-btn:hover{border-color:var(--rose-light); box-shadow:0 8px 18px -14px rgba(139,58,71,0.7);}
.menu-btn:focus-visible{outline:2px solid var(--rose-mid); outline-offset:2px;}
.menu-bars{display:block; width:20px; height:14px; position:relative; flex:none;}
.menu-bars span{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background:var(--ink); transition:transform .28s ease, opacity .18s ease;
}
.menu-bars span:nth-child(1){top:0;}
.menu-bars span:nth-child(2){top:6px;}
.menu-bars span:nth-child(3){top:12px;}
body.menu-open .menu-bars span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.menu-open .menu-bars span:nth-child(2){opacity:0;}
body.menu-open .menu-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.menu-btn-label{
  font-size:0.78rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-soft);
}

body.menu-open{overflow:hidden;}

/* ---------- scrim ---------- */
.menu-scrim{
  position:fixed; inset:0; z-index:70;
  background:rgba(51,38,34,0.44);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
body.menu-open .menu-scrim{opacity:1; visibility:visible;}

/* ---------- drawer ---------- */
.menu-drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:80;
  width:min(348px, 88vw);
  background:var(--cream);
  border-right:1px solid var(--line);
  box-shadow:26px 0 60px -40px rgba(139,58,71,0.8);
  transform:translateX(-100%); visibility:hidden;
  transition:transform .34s cubic-bezier(.22,.8,.3,1), visibility .34s;
  overflow-y:auto; overscroll-behavior:contain;
}
body.menu-open .menu-drawer{transform:none; visibility:visible;}
.menu-inner{display:flex; flex-direction:column; min-height:100%; padding:24px 26px 30px;}

.menu-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px;}
.menu-top img{height:38px; width:auto; display:block;}
.menu-close{
  width:38px; height:38px; flex:none; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:1.4rem; line-height:1; cursor:pointer; font-family:inherit; transition:.2s;
}
.menu-close:hover{border-color:var(--rose-light); color:var(--rose-deep);}
.menu-close:focus-visible{outline:2px solid var(--rose-mid); outline-offset:2px;}

.menu-list{list-style:none; margin:0; padding:0;}
.menu-list > li + li{border-top:1px solid var(--line);}
.menu-link{
  display:block; padding:16px 0 6px;
  font-family:'Fraunces', serif; font-weight:600; font-size:1.32rem;
  color:var(--ink); letter-spacing:-0.01em; transition:.2s;
}
.menu-link:hover{color:var(--rose-deep);}
.menu-link[aria-current="page"]{color:var(--rose-deep);}
.menu-link[aria-current="page"]::after{
  content:''; display:block; width:34px; height:2px; border-radius:2px;
  background:var(--rose-light); margin-top:8px;
}
.menu-note{font-size:0.8rem; color:var(--ink-soft); padding-bottom:4px;}
.menu-sub{list-style:none; margin:8px 0 18px; padding:0;}
.menu-sub a{
  display:block; padding:6px 0 6px 16px; font-size:0.87rem; color:var(--ink-soft);
  border-left:1px solid var(--line); transition:.2s;
}
.menu-sub a:hover{color:var(--rose-deep); border-color:var(--rose-mid);}

.menu-foot{
  margin-top:auto; padding-top:24px; border-top:1px solid var(--line);
  font-size:0.82rem; color:var(--ink-soft);
}
.menu-foot .menu-btn-cta{
  display:block; text-align:center; background:var(--rose-deep); color:var(--cream);
  border-radius:999px; padding:12px 18px; font-size:0.88rem; font-weight:500;
  margin-bottom:14px; transition:.2s;
}
.menu-foot .menu-btn-cta:hover{background:var(--rose-mid);}
.menu-foot a.mail{border-bottom:1px solid var(--rose-light); transition:.2s;}
.menu-foot a.mail:hover{color:var(--rose-deep); border-color:var(--rose-deep);}

@media (max-width:640px){
  .menu-btn-label{display:none;}
  .menu-btn{padding:10px 12px;}
  header nav.wrap{height:70px;}
  .brand-logo{height:36px;}
  .nav-cta{padding:9px 15px; font-size:0.8rem;}
}

@media (prefers-reduced-motion:reduce){
  .menu-drawer, .menu-scrim, .menu-bars span{transition:none;}
}