.nav {
  display: block;
  padding: 0;
  align-items: stretch;
}

.menu {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 5vw, 90px);
  padding: calc(var(--header-h) + clamp(24px, 3vw, 44px))
           clamp(30px, 7vw, 110px)
           clamp(46px, 5vw, 72px);
}

.menu__voci { align-self: center; padding-bottom: clamp(40px, 9vh, 100px); }

@keyframes menuVoceIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.menu__voce {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 1.6vw, 26px);
  padding: clamp(11px, 1.25vw, 16px) 0;
  cursor: pointer;
  text-decoration: none;
  opacity: 0;
  transition: padding-left .5s var(--ease);
}
.nav.is-open .menu__voce { animation: menuVoceIn .7s var(--ease) forwards; }

.menu__voce-num {
  font-family: var(--font-etichette);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 700;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .45);
  min-width: 34px;
  transition: color .4s var(--ease);
}
.menu__voce-nome {
  font-size: clamp(18px, 1.9vw, 26px);
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  line-height: 1.05;
  transition: color .4s var(--ease);
}
.menu__voce-freccia {
  margin-left: auto;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--blu-chiaro);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.menu__voce:hover { padding-left: clamp(8px, 1vw, 16px); }
.menu__voce:hover .menu__voce-nome { color: #fff; }
.menu__voce:hover .menu__voce-num  { color: rgba(255, 255, 255, .85); }
.menu__voce:hover .menu__voce-freccia { opacity: .55; transform: none; }

.menu__voce.is-active { padding-left: clamp(10px, 1.4vw, 22px); }
.menu__voce.is-active .menu__voce-num  { color: var(--blu-chiaro); }
.menu__voce.is-active .menu__voce-nome { color: var(--blu-chiaro); }
.menu__voce.is-active .menu__voce-freccia { opacity: 1; transform: none; }

.menu__vetro {
  position: relative;
  align-self: center;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
}
.menu__num {
  position: absolute;
  top: 1%; left: 3%;
  font-family: var(--font-etichette);
  font-size: clamp(126px, 16vw, 218px);
  font-weight: 700;
  color: rgba(255, 255, 255, .14);
  letter-spacing: -.01em;
  line-height: 1;
  z-index: 0;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.menu__vetro.is-shown .menu__num { opacity: 1; }

.menu__foto { position: absolute; inset: 10% 6% 8%; z-index: 1; }
.menu__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 46px rgba(4, 10, 22, .45));
  opacity: 0;
}

.menu__azioni {
  position: absolute;
  left: clamp(30px, 7vw, 110px);
  bottom: clamp(36px, 5vw, 68px);
  display: flex;
  gap: 20px;
  align-items: center;
}
.menu__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 15px 36px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50px;
  font-family: var(--font-etichette);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: .3s var(--ease);
}
.menu__pill:hover { background: #fff; border-color: #fff; color: var(--blu); }
.menu__pill--pieno { background: #fff; border-color: #fff; color: var(--blu); }
.menu__pill--pieno:hover { background: var(--blu-chiaro); border-color: var(--blu-chiaro); color: var(--navy-900); }

@media (max-width: 820px) {
  .menu {
    display: block;
    padding-top: calc(var(--header-h) + 24px);
  }
  .menu__voci { align-self: auto; padding-bottom: 0; }
  .menu__vetro { display: none; }
  .menu__azioni { position: static; margin-top: 44px; gap: 14px; }
  .menu__pill { padding: 13px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu__voce { opacity: 1 !important; animation: none !important; }
}

.nav .menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  max-width: 1180px;
  margin-inline: auto;
}
.nav .menu__voci {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: clamp(20px, 3vw, 60px);
  row-gap: 0;
  padding-bottom: 0;
  align-self: stretch;
}
.nav .menu__voce {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 22px);
  padding: clamp(14px, 3.2vh, 36px) 0 clamp(14px, 3.2vh, 36px) clamp(18px, 2.2vw, 32px);
  border-left: 1px solid rgba(255, 255, 255, .35);
  transition: none;
}
.nav .menu__voce:hover,
.nav .menu__voce.is-active { padding-left: clamp(18px, 2.2vw, 32px); }
.nav .menu__voce-num {
  min-width: 2.15ch;
  font-size: clamp(39px, 3.9vw, 57px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: .9;
  color: #fff;
}
.nav .menu__voce-nome {
  max-width: 17em;
  padding-top: .3em;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.25;
  color: rgba(255, 255, 255, .92);
}
.nav .menu__voce-freccia { display: none; }
.nav .menu__voce:hover .menu__voce-nome,
.nav .menu__voce:hover .menu__voce-num { color: var(--blu-chiaro); }
.nav .menu__voci { padding-bottom: clamp(40px, 8vh, 90px); }
.nav .menu__azioni {
  position: absolute;
  right: clamp(30px, 7vw, 110px);
  bottom: clamp(36px, 5vw, 68px);
  margin: 0;
  padding-left: 0;
  justify-content: flex-end;
}
@media (max-width: 820px) {
  .nav .menu { display: flex; }
  .nav .menu__voci { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .nav .menu__voce { padding-block: 12px; gap: 14px; }
  .nav .menu__voce-num { font-size: 34px; }
  .nav .menu__azioni { position: static; margin-top: 30px; justify-content: flex-end; }
}