/* Vesper · menu online con la stessa grafica del menu cartaceo:
   bevande su fondo nero a puntini (nastro rosa), cibo su fondo giallo acido (nastro nero),
   pannelli di carta strappata un po' storti, etichette con ombra colorata, prezzi in bollino.
   Mobile-first: una colonna su telefono, due da desktop come sul foglio A4. */

:root {
  --acido: #e6ff1f;
  --rosa: #ff2d95;
  --nero: #111;
  --crema: #f4f1e6;
  --barra: 50px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 18px); background: var(--nero); }
body {
  min-height: 100vh;
  background: var(--nero);
  color: var(--nero);
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 16px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Zone a fondo pieno con puntini ────────────────────────────────── */
.zona { position: relative; }
.zona--notte {
  background-color: var(--nero);
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.3px, transparent 1.7px);
  background-size: 11px 11px;
}
.zona--giorno {
  background-color: var(--acido);
  background-image: radial-gradient(rgba(17, 17, 17, 0.14) 1.3px, transparent 1.7px);
  background-size: 11px 11px;
}

.nastro { height: 30px; clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%); }
.zona--notte .nastro { background: repeating-linear-gradient(-45deg, var(--rosa) 0 18px, var(--nero) 18px 36px); }
.zona--giorno .nastro { background: repeating-linear-gradient(-45deg, var(--nero) 0 18px, var(--acido) 18px 36px); }

/* ── Testate ───────────────────────────────────────────────────────── */
.testa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 18px 30px;
}
.testa__titolo { min-width: 0; }

.ritaglio { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.ritaglio__parola { display: flex; gap: 5px; }
.lettera {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 50px;
  padding: 0 6px;
  font-size: 36px;
  line-height: 1;
}
.lettera:nth-child(odd) { transform: rotate(-3deg) translateY(2px); }
.lettera:nth-child(even) { transform: rotate(2.5deg); }
.lettera:nth-child(3n) { transform: rotate(-1deg) translateY(-2px); }
.lettera--0 { background: var(--nero); color: #fff; font-family: "Anton", sans-serif; box-shadow: 4px 4px 0 var(--rosa); }
.lettera--1 { background: #fff; font-family: "Special Elite", monospace; font-size: 38px; box-shadow: 4px 4px 0 var(--nero); }
.lettera--2 { background: var(--rosa); font-family: "Archivo Black", sans-serif; font-size: 31px; box-shadow: 4px 4px 0 var(--nero); }
.lettera--3 { background: var(--acido); font-family: "Permanent Marker", cursive; box-shadow: 4px 4px 0 var(--rosa); }
.zona--notte .lettera--0 { background: #fff; color: var(--nero); }
.zona--giorno .lettera--3 { background: var(--crema); }

.striscia {
  display: inline-block;
  margin-top: 16px;
  padding: 5px 14px 4px;
  font-family: "Permanent Marker", cursive;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.zona--notte .striscia { background: var(--acido); color: var(--nero); }
.zona--giorno .striscia { background: var(--nero); color: var(--acido); }

.testa__figura { position: relative; flex: none; margin-right: 6px; transform: rotate(4deg); }
.logo {
  display: block;
  width: 108px;
  height: 108px;
  object-fit: contain;
  filter: drop-shadow(2px 0 0 var(--acido)) drop-shadow(-2px 0 0 var(--acido)) drop-shadow(0 2px 0 var(--acido))
    drop-shadow(0 -2px 0 var(--acido)) drop-shadow(5px 5px 0 var(--rosa));
}
.logo--segnaposto {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--crema);
  font-family: "Anton", sans-serif;
  font-size: 20px;
}
.testa__figura--carta { padding: 10px 12px; background: var(--crema); box-shadow: 5px 5px 0 var(--nero); transform: rotate(5deg); }
.illustrazione { display: block; width: 104px; height: auto; }

.scotch { position: absolute; z-index: 2; width: 54px; height: 19px; background: rgba(255, 255, 230, 0.6); }
.scotch--a { top: -4px; left: -14px; transform: rotate(-38deg); }
.scotch--b { top: -4px; right: -14px; transform: rotate(38deg); }
.scotch--c { top: -11px; left: 50%; transform: translateX(-50%) rotate(-4deg); }

.doodle { position: absolute; pointer-events: none; }
.zona--notte .doodle { color: var(--acido); }
.zona--giorno .doodle { color: var(--nero); }
.d-fulmine { width: 22px; top: 22px; right: 158px; transform: rotate(-14deg); }
.d-fulmine--giorno { color: var(--rosa) !important; }
.d-croce { width: 16px; bottom: 16px; right: 150px; }
.d-stella { width: 20px; bottom: 12px; right: 12px; }

/* ── Indice ────────────────────────────────────────────────────────── */
.indice {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 6px;
  height: var(--barra);
  align-items: center;
  padding: 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--nero);
  border-top: 3px solid var(--rosa);
  border-bottom: 3px solid var(--rosa);
}
.indice::-webkit-scrollbar { display: none; }
.indice a {
  flex: none;
  padding: 5px 11px 4px;
  color: var(--acido);
  font-family: "Anton", sans-serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;
}
.indice a.attiva { background: var(--rosa); color: var(--nero); }

/* ── Sezioni ───────────────────────────────────────────────────────── */
.colonne { max-width: 1080px; margin: 0 auto; padding: 28px 16px 20px; }
@media (min-width: 860px) {
  .colonne { columns: 2; column-gap: 34px; }
}

.sez { break-inside: avoid; margin-bottom: 26px; padding-top: 3px; }
.sez--storta0 { transform: rotate(-0.7deg); }
.sez--storta1 { transform: rotate(0.6deg); }
.sez--storta2 { transform: rotate(-0.4deg); }
.sez--storta3 { transform: rotate(0.8deg); }

.sez__tag {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 -11px 12px;
  padding: 5px 12px 3px;
  background: var(--nero);
  color: #fff;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transform: rotate(-1.8deg);
  box-shadow: 4px 4px 0 var(--rosa);
}
.zona--notte .sez__tag { background: #fff; color: var(--nero); }
.sez--rosa .sez__tag { box-shadow: 4px 4px 0 var(--acido); }
.zona--giorno .sez--nero .sez__tag { background: var(--rosa); color: var(--nero); box-shadow: 4px 4px 0 var(--crema); }

.sez__corpo {
  padding: 22px 15px 14px;
  clip-path: polygon(0 6px, 5% 1px, 11% 5px, 18% 0, 26% 6px, 33% 2px, 41% 5px, 49% 0, 57% 6px, 64% 2px, 72% 5px,
    80% 0, 88% 6px, 95% 1px, 100% 5px,
    100% calc(100% - 5px), 94% 100%, 87% calc(100% - 5px), 79% calc(100% - 1px), 71% calc(100% - 6px), 63% calc(100% - 1px),
    55% calc(100% - 5px), 47% 100%, 39% calc(100% - 6px), 30% calc(100% - 2px), 22% calc(100% - 5px), 13% 100%,
    6% calc(100% - 6px), 0 calc(100% - 2px));
}
.sez--giallo .sez__corpo { background: var(--acido); }
.sez--crema  .sez__corpo { background: var(--crema); }
.sez--rosa   .sez__corpo { background: var(--rosa); }
.sez--nero   .sez__corpo { background: var(--nero); color: #fff; }

.sez__nota { padding-bottom: 6px; font-size: 17px; font-weight: 600; font-style: italic; }

/* ── Voci ──────────────────────────────────────────────────────────── */
.voce {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(17, 17, 17, 0.45);
}
.sez--nero .voce { border-bottom-color: rgba(255, 255, 255, 0.35); }
.voce:last-child { border-bottom: 0; }
.voce__testo { min-width: 0; overflow-wrap: anywhere; }
.voce__nome { font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; }
.voce__all { margin-left: 5px; font-size: 0.6rem; font-weight: 400; opacity: 0.55; white-space: nowrap; vertical-align: 0.15em; }
.voce__grado, .voce__nota { color: #9c0f55; font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; }
.voce__grado { margin-left: 6px; font-size: 13px; white-space: nowrap; }
.voce__nota { margin-top: 2px; font-size: 13px; }
.sez--rosa .voce__grado, .sez--rosa .voce__nota { color: var(--nero); opacity: 0.75; }
.sez--nero .voce__grado, .sez--nero .voce__nota { color: var(--acido); }

.voce__prezzo { display: flex; flex: none; align-items: center; gap: 6px; }
.voce__prezzo small {
  font-family: "Anton", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Bollino del prezzo in contrasto con il pannello */
.chip, .formato { font-family: "Anton", sans-serif; font-weight: 400; white-space: nowrap; }
.chip { display: inline-block; padding: 3px 7px 2px; font-size: 17px; line-height: 1.1; }
.chip small { margin-left: 2px; font-size: 12px; }
.sez--giallo .chip, .sez--giallo .formato { background: var(--nero); color: var(--acido); }
.sez--crema  .chip, .sez--crema  .formato { background: var(--rosa); color: var(--nero); }
.sez--rosa   .chip, .sez--rosa   .formato { background: var(--nero); color: #fff; }
.sez--nero   .chip, .sez--nero   .formato { background: var(--acido); color: var(--nero); }

.voce__formati { display: flex; flex: none; gap: 8px; }
.formato { display: flex; flex-direction: column; align-items: flex-end; min-width: 50px; padding: 4px 8px 3px; line-height: 1.05; }
.formato small { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.formato b { font-weight: 400; font-size: 17px; }

/* Telefono: i formati (spina, vini) vanno sotto il nome */
@media (max-width: 480px) {
  .voce:has(.voce__formati) { flex-direction: column; align-items: flex-start; gap: 8px; }
}

.coperto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  break-inside: avoid;
  margin-bottom: 22px;
  padding: 10px 15px;
  background: var(--crema);
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
}
.coperto .chip { background: var(--rosa); }

/* ── Piede ─────────────────────────────────────────────────────────── */
.piede { max-width: 760px; margin: 0 auto; padding: 8px 16px 44px; text-align: center; }
.legenda { font-size: 14px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.5; text-transform: uppercase; }
.legenda b { margin-right: 4px; font-family: "Anton", sans-serif; font-weight: 400; letter-spacing: 0.05em; }
.striscia--piede {
  margin-top: 18px;
  font-family: "Anton", sans-serif;
  font-size: 16px;
  letter-spacing: 0.12em;
  transform: rotate(-0.8deg);
}
.contatti { margin-top: 20px; font-size: 15px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.6; text-transform: uppercase; }
.contatti__nome { font-family: "Anton", sans-serif; font-size: 24px; letter-spacing: 0.06em; }
.contatti__orari { white-space: pre-line; }

/* Telefono stretto: testate più compatte */
@media (max-width: 420px) {
  .ritaglio__parola { gap: 4px; }
  .lettera { min-width: 27px; height: 37px; padding: 0 4px; font-size: 25px; }
  .lettera--1 { font-size: 27px; }
  .lettera--2 { font-size: 22px; }
  .logo { width: 86px; height: 86px; }
  .illustrazione { width: 58px; }
  .testa__figura--carta { padding: 7px 8px; }
  .testa { gap: 12px; }
  .d-fulmine { right: 120px; }
  .d-croce { right: 110px; }
}

/* ── Comparsa morbida (solo con JS e senza riduzione del movimento) ── */
.js .sez { opacity: 0; transition: opacity 0.5s ease, translate 0.5s ease; translate: 0 18px; }
.js .sez.visibile { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .sez { opacity: 1; translate: none; transition: none; }
  .indice a { transition: none; }
}

/* ── Testata del sito (come la prima versione): fondo giallo, logo al centro, nome ritagliato ── */
.hero-nastro {
  height: 22px;
  background: repeating-linear-gradient(-45deg, var(--nero) 0 14px, var(--acido) 14px 28px);
  border-bottom: 3px solid var(--nero);
}
.hero {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 34px 18px 26px;
  text-align: center;
  background-color: var(--acido);
  background-image: radial-gradient(rgba(17, 17, 17, 0.16) 1px, transparent 1.4px);
  background-size: 9px 9px;
}
.hero__logo { position: relative; width: 132px; height: 132px; margin-bottom: 22px; transform: rotate(-4deg); }
.hero__logo img, .hero__segnaposto { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(5px 5px 0 rgba(17, 17, 17, 0.9)); }
.hero__segnaposto {
  display: grid;
  place-items: center;
  border: 4px solid var(--nero);
  border-radius: 50%;
  background: var(--crema);
  font-family: "Anton", sans-serif;
  font-size: 22px;
}
.hero__scotch { position: absolute; z-index: 1; width: 62px; height: 22px; background: rgba(255, 255, 240, 0.62); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.hero__scotch--a { top: 2px; left: -14px; transform: rotate(-38deg); }
.hero__scotch--b { top: 2px; right: -14px; transform: rotate(38deg); }

.hero__titolo { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; font-weight: 400; }
.hero__lettera {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 38px;
  padding: 0 5px;
  font-size: 26px;
  line-height: 1;
  box-shadow: 3px 3px 0 var(--nero);
}
.hero__lettera:nth-child(odd) { transform: rotate(-3deg) translateY(2px); }
.hero__lettera:nth-child(even) { transform: rotate(2.5deg); }
.hero__lettera--0 { background: var(--nero); color: #fff; font-family: "Anton", sans-serif; box-shadow: 3px 3px 0 var(--rosa); }
.hero__lettera--1 { background: #fff; font-family: "Special Elite", monospace; font-size: 28px; }
.hero__lettera--2 { background: var(--rosa); font-family: "Archivo Black", sans-serif; font-size: 23px; }
.hero__lettera--3 { background: var(--crema); font-family: "Permanent Marker", cursive; }

.hero__striscia {
  display: inline-block;
  margin-top: 20px;
  padding: 7px 16px 6px;
  background: var(--nero);
  color: var(--acido);
  font-family: "Permanent Marker", cursive;
  font-size: 17px;
  letter-spacing: 0.04em;
  transform: rotate(-1.5deg);
}
.hero__doodle { position: absolute; pointer-events: none; }
.hero__doodle--fulmine { width: 26px; top: 46px; left: calc(50% - 128px); transform: rotate(-12deg); }
.hero__doodle--x { width: 18px; top: 140px; right: calc(50% - 120px); }