/* Il menù dei foglietti */
:root {
  --notte: #1D1F24;
  --carta: #F1F0EC;
  --carta-su: #FFFFFF;
  --carta-giu: #E3E2DC;
  --inchiostro: #17181B;
  --tenue: #5C5F66;
  --sulla-notte: #B9BBC2;
  --riga: rgba(23, 24, 27, 0.16);
  --pomodoro: #FF5A36;
  --lime: #D2F03C;
  --cielo: #8CC3FF;
  --rosa: #FF97D0;
  --margine: clamp(14px, 2.2vw, 28px);
  --scorre: cubic-bezier(0.23, 1, 0.32, 1);
  --alto: 100vh;
  /* il biglietto: ogni angolo è morso da un quarto di cerchio di 9 pixel, qualunque sia la misura */
  --tacca: polygon(9px 0, calc(100% - 9px) 0, calc(100% - 8.31px) 3.44px, calc(100% - 6.36px) 6.36px, calc(100% - 3.44px) 8.31px, 100% 9px, 100% calc(100% - 9px), calc(100% - 3.44px) calc(100% - 8.31px), calc(100% - 6.36px) calc(100% - 6.36px), calc(100% - 8.31px) calc(100% - 3.44px), calc(100% - 9px) 100%, 9px 100%, 8.31px calc(100% - 3.44px), 6.36px calc(100% - 6.36px), 3.44px calc(100% - 8.31px), 0 calc(100% - 9px), 0 9px, 3.44px 8.31px, 6.36px 6.36px, 8.31px 3.44px);
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--notte);
  color: var(--carta);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  overflow: hidden;
}

/* ---- la pagina dietro ---- */
.pagina {
  position: relative;
  height: var(--alto);
  overflow: hidden;
}
.testata {
  position: absolute;
  top: var(--margine);
  left: var(--margine);
  height: 44px;
  display: flex;
  align-items: center;
}
.marchio {
  color: var(--carta);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.apertura {
  position: absolute;
  left: var(--margine);
  right: var(--margine);
  bottom: calc(var(--margine) * 2);
}
.nota {
  max-width: 34ch;
  margin: 0 0 1.4rem;
  color: var(--sulla-notte);
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.1rem);
  font-weight: 480;
  line-height: 1.4;
}
.apertura__titolo {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.6rem, 1.3rem + 5.4vw, 6.4rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.parola {
  display: inline-block;
}

/* ---- il velo ---- */
.velo {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: rgba(8, 9, 11, 0.58);
  opacity: 0;
  pointer-events: none;
}
.menu--aperto .velo {
  pointer-events: auto;
}

/* ---- il biglietto: 44 pixel da chiuso, il pannello da aperto ---- */
.biglietto {
  position: absolute;
  z-index: 3;
  top: var(--margine);
  right: var(--margine);
  width: 44px;
  height: 44px;
  overflow: hidden;
  background: var(--carta);
  color: var(--inchiostro);
  clip-path: var(--tacca);
}
.tasto {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tasto svg {
  width: 20px;
  height: 20px;
  overflow: visible;
  transition: transform 160ms var(--scorre);
}
.tasto:active svg {
  transform: scale(0.88);
}
.tasto:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--inchiostro);
}
.tasto__linea {
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 10px 10px;
  transition: transform 340ms cubic-bezier(0.77, 0, 0.175, 1);
}
.menu--aperto .tasto__linea--su {
  transform: translateY(2.5px) rotate(45deg);
}
.menu--aperto .tasto__linea--giu {
  transform: translateY(-2.5px) rotate(-45deg);
}

/* il contenuto ha già la misura del pannello aperto: il biglietto crescendo lo scopre, non lo rimpagina */
.dentro {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: var(--pannello-l, 420px);
  height: var(--pannello-a, 600px);
  padding: 64px 26px 24px;
  visibility: hidden;
}
.menu--visibile .dentro {
  visibility: visible;
}
.voci,
.piede {
  margin: 0;
  padding: 0;
  list-style: none;
}
.voce a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 12px;
  color: var(--tenue);
  font-size: clamp(2rem, 1.3rem + 1.7vw, 3.1rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
  transform-origin: 0 50%;
  transition: color 200ms ease, transform 320ms var(--scorre);
}
.voce svg {
  flex: none;
  width: 22px;
  height: 22px;
  opacity: 0.35;
  transform: translateX(-6px);
  transition: opacity 200ms ease, transform 320ms var(--scorre);
}
.voce a:focus-visible {
  outline: 2px solid var(--inchiostro);
  outline-offset: 2px;
}
.voce__riga {
  display: block;
  height: 1px;
  background: var(--riga);
}
.piede {
  display: grid;
  gap: 6px;
  margin-top: auto;
  font-size: 0.95rem;
}
.piede a {
  color: var(--tenue);
  text-decoration: none;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .voce a:hover {
    color: var(--inchiostro);
    transform: scale(1.04);
  }
  .voce a:hover svg {
    opacity: 1;
    transform: translateX(0);
  }
  .piede a:hover {
    color: var(--inchiostro);
  }
}

/* ---- i ritagli ---- */
.ritagli {
  position: absolute;
  z-index: 4;
  top: var(--margine);
  right: calc(var(--margine) + var(--pannello-l, 420px) + 10px);
  display: grid;
  gap: 10px;
  width: min(27vw, 350px);
  visibility: hidden;
  perspective: 900px;
}
.menu--visibile .ritagli {
  visibility: visible;
}
.ritaglio,
.tutti {
  color: var(--inchiostro);
  text-decoration: none;
  background: var(--carta);
  clip-path: var(--tacca);
  transition: background-color 200ms ease;
}
.ritaglio {
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 14px;
  padding: 16px 16px 16px 18px;
}
.ritaglio__testi {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ritaglio__fonte {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 680;
  letter-spacing: -0.01em;
}
.ritaglio__fonte svg {
  flex: none;
  width: 14px;
  height: 14px;
}
.ritaglio__testo {
  margin: 6px 0 12px;
  color: var(--tenue);
  font-size: 0.84rem;
  line-height: 1.35;
}
.ritaglio__genere {
  margin-top: auto;
  color: var(--tenue);
  font-size: 0.78rem;
}
.ritaglio__tessera {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  color: var(--inchiostro);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  clip-path: var(--tacca);
  transition: transform 320ms var(--scorre);
}
.ritaglio__tessera--pomodoro { background: var(--pomodoro); }
.ritaglio__tessera--lime { background: var(--lime); }
.ritaglio__tessera--cielo { background: var(--cielo); }
.ritaglio__tessera--rosa { background: var(--rosa); }
.tutti {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 18px;
  font-size: 0.95rem;
  font-weight: 620;
}
.tutti svg {
  width: 16px;
  height: 16px;
  transition: transform 320ms var(--scorre);
}
.ritaglio:focus-visible,
.tutti:focus-visible {
  outline: none;
  background: var(--carta-su);
  box-shadow: inset 0 0 0 2px var(--inchiostro);
}
@media (hover: hover) and (pointer: fine) {
  .ritaglio:hover,
  .tutti:hover {
    background: var(--carta-su);
  }
  .ritaglio:hover .ritaglio__tessera {
    transform: rotate(-4deg) scale(1.04);
  }
  .tutti:hover svg {
    transform: translateX(3px);
  }
}

/* ---- telefono: il pannello è largo quanto lo schermo e i ritagli ci stanno dentro, in basso ---- */
@media (max-width: 640px) {
  .ritagli {
    top: auto;
    right: calc(var(--margine) + 14px);
    bottom: calc(var(--margine) + 58px);
    left: calc(var(--margine) + 14px);
    width: auto;
    gap: 8px;
  }
  .ritaglio:nth-of-type(n + 3) {
    display: none;
  }
  .ritaglio,
  .tutti {
    background: var(--carta-giu);
  }
  .ritaglio {
    grid-template-columns: 1fr 64px;
    padding: 14px 14px 14px 16px;
  }
  .ritaglio__tessera {
    width: 64px;
    height: 64px;
    font-size: 2rem;
  }
  .piede {
    display: flex;
    gap: 18px;
  }
}