header.site{
  position:fixed;top:0;left:0;right:0;z-index:250;
  padding:28px 0;
  transition:background .5s var(--ease-soft), padding .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
header.site .wrap{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  column-gap:20px;
}
header.site.scrolled{
  background:rgba(251,248,243,0.74);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  padding:15px 0;
  box-shadow:0 1px 0 var(--line), 0 12px 30px -20px rgba(15,37,47,0.35);
}

/* centered wordmark: calm, single line, no icon — the mark stays
   quiet so MENU / RESERVE keep equal visual weight either side */
.logo{
  justify-self:center;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#fff;
  transition:color .5s var(--ease-soft), transform .5s var(--ease-soft), opacity .3s ease;
  transform-origin:center;
  white-space:nowrap;
}
.logo:hover{opacity:0.82;}
header.site.scrolled .logo{color:var(--navy);transform:scale(0.92);}
@media(max-width:520px){
  .logo{font-size:10.5px;letter-spacing:0.08em;}
  .menu-toggle .label{display:none;}
  .btn-reserve{padding:9px 14px;font-size:11px;}
}

.btn-reserve{
  justify-self:end;
  padding:11px 22px;
  border:1px solid rgba(255,255,255,0.55);
  border-radius:2px;
  font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;
  color:#fff;
  transition:border-color .35s ease, color .35s ease, background .35s ease;
}
header.site.scrolled .btn-reserve{border-color:var(--navy);color:var(--navy);}
.btn-reserve:hover{background:rgba(255,255,255,0.12);border-color:#F1D9A8;color:#F1D9A8;}
header.site.scrolled .btn-reserve:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ---------- MENU TRIGGER ----------
   A quiet text label rather than an icon-heavy hamburger — reads as
   editorial signage ("☰ MENU") rather than an app affordance. It is
   the single entry point to navigation at every breakpoint. */
.menu-toggle{
  justify-self:start;
  display:flex;align-items:center;gap:9px;
  padding:8px 4px; /* larger touch target without changing visual size */
  margin:-8px -4px;
  font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;
  color:#fff;
  transition:color .5s var(--ease-soft), opacity .3s ease;
}
.menu-toggle:hover{opacity:0.75;}
.menu-toggle:hover .glyph{color:#F1D9A8;}
.menu-toggle .glyph{font-size:15px;line-height:1;transition:transform .5s var(--ease-out), color .3s ease;}
.menu-toggle .label{position:relative;display:inline-block;}
.menu-toggle .label .close-text{
  position:absolute;left:0;top:0;opacity:0;transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
.menu-toggle .label .open-text{transition:opacity .35s ease, transform .35s ease;}
.menu-toggle.open .label .open-text{opacity:0;transform:translateY(-6px);}
.menu-toggle.open .label .close-text{opacity:1;transform:translateY(0);}
.menu-toggle.open .glyph{transform:rotate(90deg);}
header.site.scrolled .menu-toggle{color:var(--navy);}
/* while the fullscreen panel is open, the trigger sits above it and
   should stay white regardless of scroll state */
.menu-toggle.open{color:#fff !important;}

/* ---------- FULLSCREEN MENU PANEL ---------- */
.mobile-menu{
  position:fixed;inset:0;z-index:200;
  background:var(--navy-deep);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;
  padding-left:clamp(40px,10vw,160px);
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease-out), visibility .6s;
}
.mobile-menu.open{opacity:1;visibility:visible;}
.mobile-menu a{
  position:relative;
  font-family:var(--serif);font-style:italic;font-size:clamp(30px,5vw,52px);color:#fff;
  opacity:0;transform:translateX(-22px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s ease;
}
/* thin underline that grows in on hover — a quiet, editorial cue
   rather than a color jump alone */
.mobile-menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;
  background:#F1D9A8;transition:right .45s var(--ease-out);
}
.mobile-menu a:hover,.mobile-menu a.active{color:#F1D9A8;}
.mobile-menu a:hover::after,.mobile-menu a.active::after{right:0;}
.mobile-menu.open a{opacity:1;transform:none;}
.mobile-menu.open a:nth-child(1){transition-delay:.1s;}
.mobile-menu.open a:nth-child(2){transition-delay:.17s;}
.mobile-menu.open a:nth-child(3){transition-delay:.24s;}
.mobile-menu.open a:nth-child(4){transition-delay:.31s;}
.mobile-menu.open a:nth-child(5){transition-delay:.38s;}

/* ---------- RESERVED SPACE: LANGUAGE SWITCH ----------
   Not populated yet — EN is the only language today. This block
   holds the layout position so EN / IT / DE / EL can be dropped in
   later without reworking the panel. Empty and invisible until then. */
.mobile-menu-lang{
  position:absolute;bottom:56px;left:clamp(40px,10vw,160px);
  display:flex;gap:18px;
  font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.35);
  opacity:0;transition:opacity .6s var(--ease-out) .45s;
}
.mobile-menu.open .mobile-menu-lang{opacity:1;}
.mobile-menu-lang button{color:inherit;transition:color .25s ease;}
.mobile-menu-lang button[aria-current="true"]{color:#F1D9A8;}
.mobile-menu-lang button:hover{color:#fff;}