/* ══════════════════════════════════════════════════════════════════
   Ristorante Pizzeria Papillon — Rustega di Camposampiero, dal 1989
   Mondo: cacao #170E0A, panna #F2E6D4, ambra #E8A54E, ciliegia #B3392A.
   La scala cromatica è presa dal video della sala: le doghe di ciliegio,
   la luce a led calda del controsoffitto, la pietra di travertino.
   Boska (display) + Switzer (testo), self-hosted come le librerie.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --cacao: #170E0A;          /* il fondo unico: l'ombra del corridoio */
  --cacao-2: #1F140E;        /* appoggio, per i velluti del piè */
  --panna: #F2E6D4;          /* il testo: la tovaglia, il travertino chiaro */
  --panna-62: rgba(242, 230, 212, .62);
  --panna-55: rgba(242, 230, 212, .55);
  --panna-30: rgba(242, 230, 212, .30);
  --regola: rgba(242, 230, 212, .16);
  --ambra: #E8A54E;          /* l'inchiostro: la luce a led sulle doghe */
  --ciliegia: #B3392A;       /* la superficie: il legno di ciliegio acceso */
  --ciliegia-fondo: #7E2418; /* il fondo della fascia, per la sfumatura */
  --rame: #8A431F;           /* velature di legno */
  --travertino: #C9AA8A;     /* la pietra: cornice della polaroid */
  --display: "Boska", "Iowan Old Style", Georgia, serif;
  --testo: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  /* quanto la sala sconfina sotto la piega — ed esattamente di quanto lo
     statement risale dentro il suo ultimo buio. In svh: le fermate del velo
     dell'hero sono rapporti, e restano giuste a ogni altezza di finestra. */
  --fusione: 24svh;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }

body {
  background: var(--cacao);
  color: var(--panna);
  font-family: var(--testo);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; height: auto; }
/* nessuna immagine puo' essere deformata da una width senza height */
img { height: auto; }

/* le ancore non finiscono sotto la nav fissa */
[id] { scroll-margin-top: 5.5rem; }
a { color: inherit; }

::selection { background: var(--ambra); color: var(--cacao); }
:focus-visible { outline: 2px solid var(--ambra); outline-offset: 3px; }

.solo-lettura {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.salta {
  position: absolute; left: var(--gutter); top: -3rem; z-index: 60;
  background: var(--panna); color: var(--cacao);
  padding: .5rem 1rem; text-decoration: none; font-weight: 600;
  transition: top .2s ease-out;
}
.salta:focus-visible { top: .75rem; }

/* ══ elementi comuni ══ */
.kicker {
  font-family: var(--testo); font-size: .8rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ambra); margin-bottom: 1.1rem;
}
.em { font-style: italic; color: var(--ambra); }

/* ══════════ NAVIGAZIONE ══════════ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.05rem var(--gutter);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* La parte piena arrivava al 55% dell'altezza, ma le scritte della nav sono
     centrate — cioè cadevano proprio dove il velo si stava già dissolvendo, e
     scorrendo si vedevano gli orari passare dietro "Papillon". Ora il pieno
     copre tutta la fascia delle lettere e la dissolvenza comincia sotto. */
  background: linear-gradient(var(--cacao) 0%, rgba(23, 14, 10, .92) 68%, rgba(23, 14, 10, 0) 100%);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  mask-image: linear-gradient(#000 72%, transparent);
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  /* Prima si accendeva solo scorrendo, e andava bene finché sotto c'era il
     vecchio filmato della sala, tutto scuro. Il tour però apre sulla facciata
     sotto un cielo azzurro pieno: lì la panna al 62% di "LA CARTA" spariva.
     Quindi un velo c'è sempre, appena accennato, e si chiude scorrendo. */
  opacity: .55; transition: opacity .35s ease-out;
}
/* Scorrendo, sotto la nav non c'è più il filmato ma il testo della pagina: un
   velo sfumato lo lascia trasparire, e si vedevano gli orari passare dietro
   "Papillon". Quindi a riposo resta la sfumatura — sotto c'è la facciata, e va
   bene così — mentre scorrendo diventa una fascia piena, con solo un filo di
   dissolvenza sul bordo di sotto perché non sembri una scatola incollata. */
.nav.is-scrolled::before {
  opacity: 1;
  background: linear-gradient(var(--cacao) 0%, var(--cacao) 88%, rgba(23, 14, 10, 0) 100%);
  mask-image: none; -webkit-mask-image: none;
}
.nav-mark { display: block; line-height: 0; flex: none; }
.nav-mark img { width: clamp(104px, 10vw, 136px); height: auto; }

.nav-links { display: flex; gap: 2.1rem; margin-inline: auto; }
.nav-links a {
  position: relative; text-decoration: none; padding: .35rem 0;
  font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--panna-62); transition: color .2s ease-out;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--ambra);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.nav-links a:hover { color: var(--panna); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.is-active { color: var(--ambra); }

.nav-tel {
  display: inline-flex; align-items: baseline; gap: .6rem;
  text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(242, 230, 212, .32); border-radius: 999px;
  padding: .5rem 1.15rem;
  transition: border-color .2s ease-out, background .2s ease-out;
}
.nav-tel-verbo {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 1.02rem; color: var(--panna);
}
.nav-tel-num {
  font-size: .85rem; font-weight: 600; letter-spacing: .04em;
  color: var(--panna-62); font-variant-numeric: tabular-nums;
  transition: color .2s ease-out;
}
.nav-tel:hover { background: var(--ambra); border-color: var(--ambra); }
.nav-tel:hover .nav-tel-verbo, .nav-tel:hover .nav-tel-num { color: var(--cacao); }

/* ══════════ HERO — il tour: facciata, bancone, sala ══════════ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 0 var(--gutter) clamp(2rem, 6vh, 4.5rem);
}
/* il riquadro della sala sconfina di --fusione sotto la piega: il suo bordo
   netto — la riga dritta che oggi, a fine parallasse, si legge come un
   gradino — cade laggiù, dove il velo è già cacao pieno. */
.hero-media {
  position: absolute; inset: -6% 0 calc(var(--fusione) * -1);
  overflow: hidden;
}
/* il video resta alto 112svh come prima: sconfina il riquadro, non
   l'immagine, che quindi non si ingrandisce di un pixel. Sotto i 112svh c'è
   solo velo opaco, quindi se un domani l'hero crescesse si vedrebbe soltanto
   cacao: degrada in silenzio. */
.hero-media video, .hero-media img.hero-poster {
  width: 100%; height: 112svh; object-fit: cover; transform-origin: center;
}
/* il velo che scioglie la sala nel cacao — e la scalda di ciliegio.
   Le fermate di prima riportate sul riquadro più alto (× 1,06/1,30) più la
   coda: all'81% del riquadro il cacao è pieno, cioè all'altezza della piega
   (a riposo un paio di svh sopra, perché la parallasse parte da -2,5%).
   Se si cambia --fusione va ricalcolata quella fermata:
   1,06 / (1,06 + fusione/100svh). Il ciliegio resta sul 76% alto, sul vivo. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(
      rgba(23, 14, 10, .34) 0%,
      rgba(23, 14, 10, .12) 26%,
      rgba(23, 14, 10, .62) 53%,
      rgba(23, 14, 10, .84) 66%,
      rgba(23, 14, 10, .96) 76%,
      var(--cacao) 81%,
      var(--cacao) 100%),
    linear-gradient(105deg, rgba(126, 36, 24, .34), rgba(23, 14, 10, 0) 58%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 76%;
}
.hero-body { position: relative; z-index: 2; max-width: 46rem; }
.hero-title { line-height: 0; margin-bottom: 1.5rem; }
.hero-logo {
  width: clamp(230px, 32vw, 460px); height: auto;
  filter: drop-shadow(0 12px 34px rgba(23, 14, 10, .65));
}
/* ══════════ STATEMENT — le parole che si accendono ══════════ */
/* lo statement risale di --fusione dentro l'ultimo buio dell'hero: sparisce
   il vuoto fra il video e la frase, e la prima riga nasce dove la sala si è
   appena sciolta. z-index 1 non è cosmetico: il riquadro dell'hero, che è
   posizionato, sconfina qui sotto — le parole gli stanno sempre sopra. */
.statement {
  position: relative; z-index: 1;
  margin-top: calc(var(--fusione) * -1);
  min-height: 88svh; display: grid; place-items: center;
  padding: clamp(4rem, 12vh, 8rem) var(--gutter);
}
.statement-riga {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.6rem, 7.5vw, 6rem); line-height: 1.04; letter-spacing: -.015em;
  text-align: center; max-width: 16ch; text-wrap: balance;
}
.statement-riga .w { display: inline-block; }

/* ══════════ CAPITOLI — la casa ══════════ */
.capitolo {
  position: relative; display: flex; overflow: hidden;
  border-top: 1px solid var(--regola);
  padding: clamp(4rem, 11vh, 7.5rem) var(--gutter);
  max-width: 90rem; margin-inline: auto;
}
.capitolo-cifra {
  position: absolute; right: -1.5rem; top: 50%;
  font-family: var(--display); font-weight: 700; font-style: italic;
  font-size: clamp(12rem, 26vw, 21rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(242, 230, 212, .14);
  pointer-events: none; user-select: none;
}
@supports not (-webkit-text-stroke: 1px red) {
  .capitolo-cifra { color: rgba(242, 230, 212, .06); }
}
.capitolo--destra { justify-content: flex-end; text-align: right; }
.capitolo--destra .capitolo-cifra { right: auto; left: -1.5rem; }
.capitolo-testo { position: relative; z-index: 1; max-width: 46rem; }
.capitolo h3 {
  font-family: var(--display); font-weight: 700; font-style: italic;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: .98; letter-spacing: -.012em;
  margin-bottom: 1.4rem;
}
.capitolo-corpo { color: var(--panna-62); max-width: 46ch; }
.capitolo--destra .capitolo-corpo { margin-left: auto; }

/* ══════════ LA FASCIA CILIEGIA — le 70 pizze ══════════
   L'unica superficie campita del sito: il ciliegio acceso del video. */
.pizze {
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(232, 165, 78, .26), rgba(232, 165, 78, 0) 58%),
    linear-gradient(168deg, var(--ciliegia), var(--ciliegia-fondo));
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
  overflow: clip;
}
.pizze-dentro { max-width: 90rem; margin-inline: auto; }
.pizze .kicker { color: var(--panna); }
.pizze-testa {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* La tavola: sette pizze attorno alla Diavola. A --p 0 sono impilate piccole
   al centro, a --p 1 sono aperte in cerchio; ognuna parte col suo --ritardo.
   Il valore di riposo è 1 — cerchio già aperto e fermo senza JS, con
   prefers-reduced-motion e con ?static. Il raggio è in cqw, così il cerchio
   resta proporzionato alla tavola a ogni larghezza. */
.tavola {
  position: relative; justify-self: center; isolation: isolate;
  width: min(100%, 34rem); aspect-ratio: 1;
  container-type: inline-size;
  --raggio: 33cqw; --p: 1;
}
/* L'alone della luce a led, dietro le pizze — ambra, non crema.
   ATTENZIONE alla misura del gradiente. Senza indicarla, "circle" vale
   farthest-corner: il 100% è la distanza dall'ANGOLO del riquadro, non dal
   lato. Così la fermata a 74% cadeva fuori dal ritaglio tondo, e il
   border-radius tagliava l'alone mentre era ancora al 3% di opacità: attorno
   alle pizze restava un disco di luce col bordo netto, che sul telefono — dove
   la tavola è piccola e il bordo passa vicino alle pizze — si legge come una
   macchia squadrata. Con closest-side il 100% è il mezzo lato, l'alone si
   spegne davvero prima del bordo e non c'è più niente da tagliare. Il riquadro
   cresce a 147% perché l'alone resti grande come prima (0,37 × 1,47 ≈ 0,54
   della tavola, cioè dove arrivava). */
.tavola::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 147%; aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle closest-side,
    rgba(232, 165, 78, .50) 0 22%,
    rgba(232, 165, 78, .30) 46%,
    rgba(232, 165, 78, .10) 62%,
    rgba(232, 165, 78, 0) 74%);
}
.tavola__pizza {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: var(--misura, 29%); aspect-ratio: 1; border-radius: 50%;
  margin: calc(var(--misura, 29%) / -2) 0 0 calc(var(--misura, 29%) / -2);
  will-change: transform;
  --pi: clamp(0, calc((var(--p) - var(--ritardo, 0)) / (1 - var(--ritardo, 0))), 1);
  transform:
    translate(calc(var(--dx, 0) * var(--raggio) * var(--pi)), calc(var(--dy, 0) * var(--raggio) * var(--pi)))
    rotate(calc(var(--giro, 0deg) * var(--pi)))
    scale(calc(.74 + .26 * var(--pi)));
}
.tavola__pizza--centro {
  --misura: 34%; z-index: 2;
  transform: scale(calc(.9 + .1 * var(--p))) rotate(-5deg);
}
.tavola__pizza img {
  width: 100%; height: auto;
  filter: drop-shadow(0 22px 38px rgba(52, 10, 5, .5)) drop-shadow(0 5px 12px rgba(52, 10, 5, .38));
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.tavola__pizza--centro img {
  filter: drop-shadow(0 34px 56px rgba(52, 10, 5, .55)) drop-shadow(0 8px 18px rgba(52, 10, 5, .4));
}
.tavola__pizza:hover { z-index: 3; }
.tavola__pizza:hover img { transform: scale(1.07); }
.pizze-mega {
  display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap;
}
.pizze-mega-num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(6.5rem, 17vw, 13rem); line-height: .9; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.pizze-mega-cosa {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.15;
  color: rgba(242, 230, 212, .82);
}
.pizze-corpo {
  margin-top: 2.4rem; max-width: 56ch;
  /* sulla fascia ciliegia l'84% dava 3,84:1 — sotto il minimo per il testo
     corrente. A piena panna sono 4,82:1 sul rosso chiaro e 7,92:1 sul fondo. */
  color: var(--panna);
}
.pizze-azione { margin-top: 2.4rem; }
.tasto-linea {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; padding-bottom: .35rem;
  border-bottom: 1px solid rgba(242, 230, 212, .45);
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  transition: border-color .25s ease-out, gap .25s ease-out;
}
.tasto-linea:hover { border-color: var(--panna); gap: 1.2rem; }
.tasto-linea svg { width: 1.1em; height: 1.1em; }

/* i nastri delle pizze che sfilano */
.nastri { margin-top: clamp(3rem, 8vh, 5rem); display: grid; gap: .5rem; }
.nastro { overflow: hidden; }
.nastro-pista { display: flex; width: max-content; }
.nastro-pista span {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.25;
  color: rgba(242, 230, 212, .40); white-space: nowrap;
}
.nastro-pista span i { font-style: normal; color: rgba(242, 230, 212, .62); padding: 0 .55em; }
.nastro--avanti .nastro-pista { animation: sfila 62s linear infinite; }
.nastro--indietro .nastro-pista { animation: sfila-contro 78s linear infinite; }
@keyframes sfila { to { transform: translateX(-50%); } }
@keyframes sfila-contro { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ══════════ LA CARTA — assaggio con la polaroid ══════════ */
.carta {
  max-width: 62rem; margin-inline: auto;
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
  border-top: 1px solid var(--regola);
}
.carta-testa { margin-bottom: 3rem; }
.carta-testa h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 8vw, 6rem); line-height: .95; letter-spacing: -.015em;
}
.carta-nota { color: var(--panna-62); margin-top: 1.1rem; }
.carta-hint {
  font-family: var(--display); font-style: italic; font-size: 1.05rem;
  color: var(--panna-55); margin-top: .5rem; display: none;
}
html.js .carta-hint { display: block; }
@media (hover: none) { .carta-hint { display: none !important; } }

.carta-tabs { display: flex; gap: 2.2rem; border-bottom: 1px solid var(--regola); }
.carta-tab {
  /* senza questi due la flex le stringe e "LE PIÙ CHIESTE" va a capo in tre
     righe, con le quattro tab a quattro altezze diverse. Così restano intere
     e, se non ci stanno, la fila scorre — che è quello che .carta-tabs
     prevede già con overflow-x: auto. */
  flex: 0 0 auto; white-space: nowrap;
  background: none; border: 0; cursor: pointer; position: relative;
  font-family: var(--testo); font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--panna-62); padding: .6rem 0 1rem;
  transition: color .2s ease-out;
}
/* era panna-30, cioè 2,39:1 sul cacao: il conteggio accanto alla tab non si
   leggeva. panna-55 sta a 5,25:1 e passa il minimo. */
.carta-tab small { color: var(--panna-55); margin-left: .45rem; }
.carta-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--ambra); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.carta-tab[aria-selected="true"] { color: var(--panna); }
.carta-tab[aria-selected="true"]::after { transform: scaleX(1); }

.carta-board { min-height: 22rem; padding-top: 1rem; }
.carta-lista { list-style: none; }
.piatto { padding: 1.5rem 0; border-bottom: 1px solid var(--regola); }
.piatto-riga { display: flex; align-items: last baseline; gap: 1.1rem; }
.piatto-nome {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.2; letter-spacing: -.005em;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.piatto-nome sup {
  font-family: var(--testo); font-size: .62rem; font-weight: 600;
  letter-spacing: .06em; color: var(--panna-62); margin-left: .3rem;
  /* la sigla degli allergeni è una cosa sola: "A · B · D" non si spezza dopo
     il punto mediano, come faceva su 15 voci */
  white-space: nowrap;
}
.piatto-filo {
  flex: 1; min-width: 2.5rem;
  border-bottom: 1px dotted var(--panna-30); transform: translateY(-2px);
}
.piatto-prezzo {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-variant-numeric: tabular-nums;
  /* Dentro la flex della riga il prezzo si lasciava stringere, e su 34 voci
     delle 186 andava a capo fra il simbolo e la cifra: "€" sopra e "9,00"
     sotto. È l'ultima cosa che deve spezzarsi in una riga di menù. */
  white-space: nowrap; flex: none;
  transition: color .25s ease-out;
}
.piatto-desc { font-size: .95rem; color: var(--panna-62); max-width: 56ch; margin-top: .45rem; }
.piatto[data-foto]:hover .piatto-nome { transform: translateX(.5rem); }
.piatto[data-foto]:hover .piatto-prezzo { color: var(--ambra); }

.carta-piede { margin-top: 2.4rem; display: grid; gap: 1.2rem; }
.carta-foto-nota { font-size: .9rem; color: var(--panna-55); display: none; }
html.js .carta-foto-nota { display: block; }
@media (hover: none) { .carta-foto-nota { display: none !important; } }
.carta-tutto { justify-self: start; }

/* la polaroid che segue il cursore */
.peek {
  position: fixed; top: 0; left: 0; z-index: 40; pointer-events: none; opacity: 0;
  width: clamp(180px, 16vw, 240px); aspect-ratio: 4 / 5;
  background: var(--travertino);
  border: 8px solid var(--travertino); border-bottom-width: 26px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .4);
}
.peek img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════ IL PESCE — la paella ══════════ */
.pesce {
  position: relative; border-top: 1px solid var(--regola);
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
  max-width: 90rem; margin-inline: auto;
}
.pesce-griglia {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
  grid-template-columns: 1.05fr .95fr;
}
.pesce h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: .98; letter-spacing: -.015em;
  margin-bottom: 1.4rem;
}
.pesce-corpo { color: var(--panna-62); max-width: 44ch; }
.pesce-prezzi {
  margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem;
  border-top: 1px solid var(--regola); padding-top: 1.6rem;
}
.pesce-prezzo dt {
  font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--panna-62); margin-bottom: .3rem;
}
.pesce-prezzo dd {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-variant-numeric: tabular-nums;
}
.pesce-scena { position: relative; }
.pesce-scena img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  opacity: 0; transition: opacity .6s ease-out;
  filter: drop-shadow(0 30px 54px rgba(0, 0, 0, .55));
}
.pesce-scena img.is-vivo { opacity: 1; }
.pesce-scena img:not(:first-child) { position: absolute; inset: 0; }
.pesce-didascalia {
  margin-top: 1rem; font-family: var(--display); font-style: italic;
  color: var(--panna-55); font-size: 1.02rem;
}

/* ══════════ LA SALA — il salone dei banchetti ══════════ */
.sala {
  position: relative; display: grid; place-items: center;
  min-height: clamp(30rem, 92svh, 56rem); overflow: hidden;
  padding: 0 var(--gutter);
}
.sala-media { position: absolute; inset: -8% 0; }
.sala-media img, .sala-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}

/* I due filmati sono scenografia, non un lettore: il dito non li tocca. */
.hero-video, .sala-video { pointer-events: none; }

/* Senza JS la sorgente non viene mai assegnata, e WebKit rimedia a modo suo
   appiccicando la propria barra 00:00 — che spuntava giusto sotto la nav.
   Quindi senza JS il filmato esce di scena e resta il poster, che è
   esattamente ciò che si deve vedere. */
html:not(.js) .hero-video, html:not(.js) .sala-video { display: none; }
html:not(.js) .hero-media {
  background: var(--cacao) url("../img/poster-tour.jpg") center/cover no-repeat;
}
html:not(.js) .sala-media {
  background: var(--cacao) url("../img/poster-sala-grande.jpg") center/cover no-repeat;
}
.sala-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(var(--cacao) 0%, rgba(23, 14, 10, .62) 20%, rgba(23, 14, 10, .48) 50%, rgba(23, 14, 10, .85) 86%, var(--cacao) 96%);
}
.sala-riga {
  position: relative; z-index: 2; text-align: center; max-width: 18ch;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.1; letter-spacing: -.015em;
  text-wrap: balance;
}
.sala-riga .w { display: inline-block; }
.sala-riga .em { color: var(--panna); }

/* ══════════ MANIFESTO ══════════ */
.manifesto {
  max-width: 90rem; margin-inline: auto;
  padding: clamp(5rem, 13vh, 9rem) var(--gutter);
  border-top: 1px solid var(--regola);
}
.manifesto h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: .98; letter-spacing: -.015em;
  margin-bottom: 3rem;
}
.manifesto ul { list-style: none; max-width: 68rem; }
.manifesto li {
  border-top: 1px solid var(--regola);
  padding: 1.5rem 0 1.5rem 3.2rem; position: relative;
  font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.3; color: var(--panna-62);
}
.manifesto li::before {
  counter-increment: manifesto; content: counter(manifesto, decimal-leading-zero);
  position: absolute; left: 0; top: 1.75rem;
  font-family: var(--testo); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; color: var(--ambra);
}
.manifesto ul { counter-reset: manifesto; }

/* ══════════ CONTATTI ══════════ */
.contatti {
  max-width: 90rem; margin-inline: auto;
  padding: clamp(5rem, 13vh, 9rem) var(--gutter) clamp(3rem, 7vh, 5rem);
  border-top: 1px solid var(--regola);
}
.contatti-cta {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3.4rem, 11vw, 9.5rem); line-height: .92; letter-spacing: -.02em;
  text-decoration: none; display: inline-block; margin-bottom: clamp(3rem, 8vh, 5rem);
}
.contatti-cta .em { transition: color .3s ease-out; }
.contatti-cta:hover .em { color: var(--panna); }

.contatti-griglia {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem;
  border-top: 1px solid var(--regola); padding-top: 2.4rem;
}
.contatti-griglia h3 {
  font-family: var(--testo); font-size: .85rem; font-weight: 600;
  letter-spacing: .04em; color: var(--panna-62); margin-bottom: .9rem;
}
.contatti-griglia p, .contatti-griglia li { color: var(--panna); line-height: 1.7; }
.contatti-griglia ul { list-style: none; }
.contatti-griglia a {
  text-decoration: none; border-bottom: 1px solid var(--regola);
  transition: color .2s ease-out, border-color .2s ease-out;
}
.contatti-griglia a:hover { color: var(--ambra); border-color: var(--ambra); }
.orari-riga { display: flex; justify-content: space-between; gap: 1rem; }
.orari-riga dt { color: var(--panna-62); }
.orari-riga dd { font-variant-numeric: tabular-nums; }
.orari-riga.is-oggi dt, .orari-riga.is-oggi dd { color: var(--ambra); }

.pie-marchio {
  margin-top: clamp(3rem, 8vh, 5rem); display: grid; place-items: center;
}
.pie-marchio img { width: min(46vw, 420px); height: auto; opacity: .07; }
.pie-legale {
  border-top: 1px solid var(--regola); margin-top: 2rem; padding-top: 1.6rem;
  font-size: .82rem; color: var(--panna-62);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between;
}
.pie-legale a { color: inherit; }

/* ══════════ PAGINE INTERNE (menù, contatti) ══════════ */
.pagina-testa {
  padding: calc(clamp(4rem, 10vh, 6.5rem) + 3.5rem) var(--gutter) clamp(2.5rem, 7vh, 4rem);
  max-width: 62rem; margin-inline: auto;
}
.pagina-testa h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 8vw, 6rem); line-height: .95; letter-spacing: -.015em;
}
.pagina-testa p { color: var(--panna-62); margin-top: 1.1rem; max-width: 54ch; }

/* ══════════ MOVIMENTO: le vie di fuga ══════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nastro--avanti .nastro-pista, .nastro--indietro .nastro-pista { animation: none; }
  .pesce-scena img { opacity: 1; position: static; }
  .pesce-scena img:not(:first-child) { display: none; }
  .tavola { --p: 1; }
  * { transition-duration: .01ms !important; }
}

/* ══════════ 860px ══════════ */
@media (max-width: 860px) {
  .nav { gap: .9rem; padding-inline: var(--gutter); }
  .nav-mark img { width: 96px; }
  .nav-links { gap: 1.2rem; margin-inline: auto; }
  /* resta una sola voce: il resto è raggiungibile scorrendo */
  .nav-links a { display: none; }
  /* col dito non c'è hover: la voce non ha uno stato "acceso" da aspettare,
     quindi parte già piena invece che al 62% */
  .nav-links a.nav-sempre {
    display: inline-flex; align-items: center;
    color: var(--panna); font-size: .84rem;
    min-height: 44px; padding: .35rem .2rem;   /* 44px: il minimo per un dito */
  }
  .nav-tel { padding: .62rem 1.05rem; }
  .nav-tel-num { display: none; }
  .hero-logo { width: clamp(200px, 60vw, 320px); }

  .capitolo, .capitolo--destra { justify-content: flex-start; text-align: left; }
  .capitolo--destra .capitolo-corpo { margin-left: 0; }
  /* Sul desktop il numerale sta nel vuoto a destra del testo e non lo tocca
     mai. Qui il testo è a tutta larghezza, e a -1rem il tratto del numerale
     passava dentro le righe del paragrafo: si leggeva "trentasette anni"
     attraversato da una stanghetta. Quindi esce quasi tutto dal bordo e il
     tratto si fa appena un'ombra — resta la texture, sparisce l'interferenza. */
  /* Uno scostamento fisso non basta: "I" è largo 53px, "III" 160, quindi con
     lo stesso -3.5rem la "III" rientrava di 84px dentro la colonna di testo.
     Ancorando a destra e traslando di tutta la propria larghezza meno 2,5rem,
     ogni numerale sporge uguale — 40px — qualunque sia il numero di aste. */
  .capitolo-cifra {
    font-size: clamp(8rem, 42vw, 12rem);
    right: 0; left: auto; transform: translateX(calc(100% - 2.5rem));
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(242, 230, 212, .07);
  }
  .capitolo--destra .capitolo-cifra { left: auto; right: 0; }
  @supports not (-webkit-text-stroke: 1px red) {
    .capitolo-cifra { color: rgba(242, 230, 212, .035); }
  }

  .pizze-testa { grid-template-columns: 1fr; align-items: start; }
  .tavola { width: min(92%, 26rem); margin: 1.5rem auto 0; }
  .pesce-griglia { grid-template-columns: 1fr; }
  .carta-tabs {
    gap: 1.6rem; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    /* l'ultima voce finiva a filo dello schermo e sembrava tagliata per
       sbaglio: la sfumatura dice che la fila continua e si può scorrere */
    mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
  }
  .carta-tabs::-webkit-scrollbar { display: none; }
  .piatto-nome { font-size: clamp(1.25rem, 5vw, 1.5rem); }
  .contatti-griglia { grid-template-columns: repeat(2, 1fr); }
  .peek { display: none; }

  /* ── il dito ──────────────────────────────────────────────────────────
     I link dei contatti erano alti 22px: il polpastrello ne copre il doppio,
     e fra "049 579 0792" e "papillon1989@libero.it" si sbagliava riga.
     La riga resta dov'è — quello che cresce è solo l'area sensibile, con un
     tassello invisibile centrato sul link; e le voci si distanziano quanto
     basta perché due tasselli non si accavallino. */
  .contatti-griglia li, .contatti-griglia p { margin-bottom: .9rem; }
  .contatti-griglia a, .pie-legale a { position: relative; display: inline-block; }
  .contatti-griglia a::before {
    content: ""; position: absolute; inset: -9px 0; /* ~44px in tutto */
  }
  .pie-legale a::before { content: ""; position: absolute; inset: -12px -6px; }
  /* "Tutte le pizze" e "Il menù intero": 37px → 44, senza spostare la riga */
  .tasto-linea { padding-top: .42rem; }

  /* ── quello che era troppo piccolo ────────────────────────────────────
     Le lettere degli allergeni stavano a 9,9px e i conteggi delle tab a
     10,7px: sono informazioni di servizio, ma vanno comunque lette. */
  .piatto-nome sup { font-size: .72rem; letter-spacing: .08em; }
  .carta-tab small { font-size: .74rem; }
}

/* ══════════ 480px ══════════ */
@media (max-width: 480px) {
  .contatti-griglia { grid-template-columns: 1fr; gap: 1.6rem; }
  .pie-legale { flex-direction: column; gap: .5rem; }
}