/* Studio K — menu a schermo intero (assets/menu.js)
   ────────────────────────────────────────────────────────────────────────────
   Impianto del riferimento: a sinistra le voci, grandi, in Cormorant maiuscolo;
   un filo verticale; a destra luogo, contatto, lingua e social, in piccolo.
   Colori del brand: fondo avorio, voci in inchiostro, dettagli in noce.

   Il movimento: il pannello scende come una tenda (clip-path), le voci salgono
   dalla propria maschera una dopo l'altra, la colonna destra arriva per ultima.
   Mai sotto i 400ms, sempre la stessa curva del sito. */

:root{
  --mn-avorio:#DED2C1; --mn-noce:#6B4428; --mn-ink:#0D0B09;
  --mn-curva:cubic-bezier(.22,1,.36,1);
  --mn-tenda:cubic-bezier(.76,0,.24,1);
  --mn-display:"Cormorant Garamond",Georgia,serif;
  --mn-ui:"Montserrat",system-ui,sans-serif;
}

/* ── il bottone ── */
.mn{grid-column:1;justify-self:start;position:relative}
.mn__toggle{
  display:inline-flex;align-items:center;gap:.75rem;
  min-height:44px;padding:.6rem .25rem .6rem 0;
  background:none;border:0;cursor:pointer;
  font-family:var(--mn-ui);font-weight:500;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(222,210,193,.82);text-shadow:0 1px 10px rgba(13,11,9,.6);
  transition:color .5s var(--mn-curva),text-shadow .5s var(--mn-curva)}
.mn__toggle i{position:relative;display:block;width:24px;height:9px;flex:none}
.mn__toggle i::before,.mn__toggle i::after{
  content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor;
  transition:transform .6s var(--mn-curva)}
.mn__toggle i::before{top:0;transform:translate(0,0) rotate(0) scaleX(1)}
/* il tratto corto: stessa larghezza compressa in scala, poi riallineato a
   sinistra. Due liste di funzioni identiche, cosi' ognuna interpola da se'. */
.mn__toggle i::after{bottom:0;transform:translate(-4px,0) rotate(0) scaleX(.64)}
.sk-menu-aperto .mn__toggle{color:var(--mn-ink);text-shadow:none}
.sk-menu-aperto .mn__toggle i::before{transform:translate(0,4px) rotate(45deg) scaleX(1)}
.sk-menu-aperto .mn__toggle i::after{transform:translate(0,-4px) rotate(-45deg) scaleX(1)}
.mn__toggle:focus-visible{outline:1px solid currentColor;outline-offset:6px}

/* a menu aperto la barra passa sull'avorio: il monogramma diventa noce, gli
   inviti in barra si ritirano (la CTA della home e il "Prenota" delle schede) */
.sk-menu-aperto .sw-brand__mark,
.sk-menu-aperto .sk-barra__k{background-color:var(--mn-noce)}
.sk-menu-aperto .sw-topcta,
.sk-menu-aperto .sk-barra__cta{opacity:0;pointer-events:none}
.sk-menu-aperto .sk-barra{background:transparent;border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.sk-menu-aperto{overflow:hidden}
/* la nav del motore non si vede piu': il menu ha voci sue. Resta nel DOM
   perche' "Vedi il listino" usa il suo salto alla scena 4. */
.sw-topbar > .sw-nav{display:none}

/* ── il pannello ── */
.mn__pannello{
  position:fixed;inset:0;z-index:45;
  display:grid;grid-template-columns:minmax(0,1.3fr) 1px minmax(0,1fr);
  column-gap:clamp(40px,6vw,112px);
  padding:clamp(96px,14vh,140px) clamp(20px,5vw,64px) clamp(36px,7vh,72px);
  background:var(--mn-avorio);color:var(--mn-ink);
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--mn-tenda)}
.mn__pannello[hidden]{display:none}
.mn__pannello.is-in{clip-path:inset(0 0 0 0);transition-duration:.9s}
.mn__pannello:not(.is-in){pointer-events:none}

/* ── le voci ── */
.mn__voci{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:clamp(10px,3.4vh,40px)}
.mn__voce{
  display:block;color:var(--mn-ink);text-decoration:none;border:0;padding:0;
  font-family:var(--mn-display);font-weight:400;
  /* la larghezza decide la misura, l'altezza la limita: su un portatile basso
     le cinque voci devono stare tutte a schermo */
  font-size:min(clamp(2.5rem,5.2vw,4.8rem),9vh);
  line-height:1;letter-spacing:-.005em;text-transform:uppercase;
  transition:color .5s var(--mn-curva),opacity .5s var(--mn-curva)}
.mn__maschera{display:block;overflow:hidden;padding:.06em 0 .1em}
.mn__parola{display:block;transform:translateY(110%);
  transition:transform .6s var(--mn-curva)}
.mn__pannello.is-in .mn__parola{transform:translateY(0);
  transition-duration:1.1s;transition-delay:calc(.28s + var(--i) * .07s)}
.mn__voce[aria-current="page"]{color:var(--mn-noce)}
/* al passaggio le altre voci arretrano: la voce scelta resta sola */
@media (hover:hover) and (pointer:fine){
  .mn__voci:hover .mn__voce:not(:hover){opacity:.28}
  .mn__voce:hover{color:var(--mn-noce)}
}
.mn__voce:focus-visible{outline:none;color:var(--mn-noce)}
.mn__voce:focus-visible .mn__parola{text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.14em}

/* ── il filo ── */
.mn__filo{width:1px;background:rgba(107,68,40,.26);
  margin:calc(clamp(96px,14vh,140px) * -1) 0 calc(clamp(36px,7vh,72px) * -1);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .6s var(--mn-curva)}
.mn__pannello.is-in .mn__filo{transform:scaleY(1);
  transition-duration:1.2s;transition-delay:.25s}

/* ── la colonna destra ── */
.mn__info{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(28px,6vh,64px);max-width:26rem;
  opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--mn-curva),transform .5s var(--mn-curva)}
.mn__pannello.is-in .mn__info{opacity:1;transform:none;
  transition-duration:1s;transition-delay:.55s}
.mn__blocco{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.mn__et{
  font-family:var(--mn-display);font-weight:400;font-size:.72rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--mn-noce);
  margin-bottom:.6rem}
.mn__valore{
  font-family:var(--mn-display);font-weight:400;
  font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.35;
  color:var(--mn-ink);text-decoration:none;border:0;padding:0;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .6s var(--mn-curva),color .5s var(--mn-curva)}
.mn__valore--corsivo{font-style:italic}
.mn__valore:hover,.mn__valore:focus-visible{background-size:100% 1px;outline:none}

.mn__comandi{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.mn__lingue{display:flex;gap:2.4rem}
.mn__lingua{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mn-display);font-weight:400;font-size:.76rem;
  letter-spacing:.42em;text-decoration:none;border:0;padding:0;
  color:rgba(13,11,9,.62);transition:color .5s var(--mn-curva)}
.mn__lingua[aria-current="true"]{color:var(--mn-noce)}
.mn__lingua[aria-current="true"]::after{content:"";position:absolute;left:0;
  right:.42em;bottom:.7rem;height:1px;background:currentColor}
.mn__lingua:hover,.mn__lingua:focus-visible{color:var(--mn-noce);outline:none}

.mn__social{display:flex;gap:.6rem;margin-left:-11px}
.mn__icona{display:grid;place-items:center;width:44px;height:44px;border:0;padding:0;
  color:var(--mn-noce);transition:color .5s var(--mn-curva),transform .5s var(--mn-curva)}
.mn__icona svg{width:20px;height:20px}
.mn__icona:hover,.mn__icona:focus-visible{color:var(--mn-ink);transform:translateY(-2px);outline:none}

.mn__legali{display:flex;gap:1.6rem;padding-top:1.2rem;
  border-top:1px solid rgba(107,68,40,.2)}
.mn__legali a{
  display:inline-flex;align-items:center;min-height:36px;border:0;padding:0;
  font-family:var(--mn-ui);font-weight:500;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  color:var(--mn-noce);transition:color .5s var(--mn-curva)}
.mn__legali a:hover,.mn__legali a:focus-visible{color:var(--mn-ink);outline:none}

/* ── telefono e tablet stretto: una colonna, il filo diventa orizzontale ── */
@media (max-width:860px){
  .mn__pannello{grid-template-columns:1fr;grid-template-rows:auto auto auto;
    align-content:start;row-gap:clamp(22px,3.6vh,40px);
    padding-top:clamp(84px,11vh,112px);padding-bottom:28px}
  .mn__voci{justify-content:flex-start;gap:clamp(8px,1.8vh,18px)}
  .mn__voce{font-size:min(clamp(2.3rem,10.5vw,3.6rem),7.4vh)}
  .mn__filo{width:auto;height:1px;margin:0;transform:scaleX(0);transform-origin:0 50%}
  .mn__pannello.is-in .mn__filo{transform:scaleX(1)}
  .mn__info{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;max-width:none;
    justify-content:start}
  .mn__comandi,.mn__legali{grid-column:1 / -1}
  .mn__comandi{flex-direction:row;align-items:center;justify-content:space-between}
  .mn__valore{font-size:1.1rem}
}
@media (max-width:420px){
  .mn__info{grid-template-columns:1fr}
}

/* ── moto ridotto: il pannello compare, niente tende e niente salite ── */
@media (prefers-reduced-motion:reduce){
  .mn__pannello{clip-path:none;opacity:0;transition:opacity .4s linear}
  .mn__pannello.is-in{opacity:1;clip-path:none}
  .mn__parola,.mn__pannello.is-in .mn__parola{transform:none;transition:none}
  .mn__filo,.mn__pannello.is-in .mn__filo{transform:none;transition:none}
  .mn__info,.mn__pannello.is-in .mn__info{opacity:1;transform:none;transition:none}
}

/* sul telefono la barra della home porta anche "Prenota ora": la parola
   "Menu" lascia il posto, restano i due tratti (il nome e' nell'aria-label) */
@media (max-width:640px){
  .mn__toggle span{display:none}
  .mn__toggle{padding:.6rem;margin-left:-.6rem}
}