/* =============================================================================
   OSTERIA DI SAN PIERO — Le scene
   -----------------------------------------------------------------------------
   Non sono sezioni: sono inquadrature. In ordine: la soglia, la discesa, il
   luogo, chi ci sta dentro, la carta, la tavola, la sete, il tavolo.
   Il colore fa un percorso — buio, più buio, buio, caldo, CARTA, buio, vino,
   buio: la sezione del menù è l'unica in controluce, ed è lì che si respira.
   ========================================================================== */

/* =============================================================================
   TESTATA
   ========================================================================== */
.testata {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) var(--bordo-pagina);
  transition: background var(--t-2) var(--curva), border-color var(--t-2) var(--curva),
              padding var(--t-2) var(--curva), backdrop-filter var(--t-2) var(--curva);
  border-block-end: 1px solid transparent;
}
.testata[data-posata="si"] {
  background: color-mix(in oklab, var(--pece) 88%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  border-block-end-color: var(--bordo);
  padding-block: var(--s-3);
}

.marchio {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--testo);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--s-3);
}
.marchio__giglio { inline-size: 15px; block-size: 19px; color: var(--giglio); flex: none; }

.bussola { display: none; gap: var(--s-6); }
.bussola a {
  font-size: var(--f-minimo); letter-spacing: .08em; text-transform: uppercase;
  color: var(--testo-2); text-decoration: none; position: relative;
  padding-block: var(--s-2);
  transition: color var(--t-1) var(--curva);
}
.bussola a::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: 100%; block-size: 1px; background: var(--giglio);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-2) var(--curva);
}
.bussola a:hover { color: var(--testo); }
.bussola a:hover::after { transform: scaleX(1); }

.testata__azioni { display: flex; align-items: center; gap: var(--s-3); }
.testata .btn--giglio { display: none; }

@media (min-width: 900px) {
  .bussola { display: flex; }
  .testata .btn--giglio { display: inline-flex; }
}

/* =============================================================================
   1. LA SOGLIA — l'arco è una finestra, non uno sfondo.
   -----------------------------------------------------------------------------
   Quasi tutti i siti di ristorante mettono la foto a tutto schermo e ci
   scrivono sopra. Qui no: la fotografia sta dentro un arco a tutto sesto,
   come quello vero sopra il bancone, e intorno c'è il buio della cantina con
   una sola luce. Ha anche un vantaggio tecnico — la foto più grande che
   serve è 765 px, quindi l'LCP arriva in fretta anche in 3G.
   ========================================================================== */
.soglia {
  position: relative;
  min-block-size: 100svh;
  display: grid; align-items: center;
  padding-block: calc(var(--s-9) + var(--s-3)) var(--s-9);
  overflow: clip;
  background:
    radial-gradient(ellipse 90% 60% at 62% 34%, rgba(156, 78, 43, .16), transparent 70%),
    linear-gradient(180deg, var(--pece) 0%, var(--fondo) 55%, var(--pece) 100%);
}
.soglia .lampada { inset-block-start: -14%; inset-inline-end: -18%; }

.soglia__impianto {
  position: relative; z-index: 2;
  display: grid; gap: var(--s-6);
  justify-items: center; text-align: center;
}
.soglia__testo { display: grid; gap: var(--s-6); justify-items: center; }

/* --- L'arco ---------------------------------------------------------------- */
.arco {
  position: relative;
  order: -1;                       /* su telefono la fotografia viene prima */
  inline-size: min(48vw, 260px, 30svh);   /* 3:4 → 30svh di lato = 40svh di altezza */
  aspect-ratio: 3 / 4;
  border-radius: var(--arco);
  overflow: hidden;
  isolation: isolate;
  /* Lo stipite: un filo di pietra e l'ombra profonda del vano.              */
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--pietra) 26%, transparent),
    0 0 0 9px color-mix(in oklab, var(--pece) 65%, transparent),
    var(--ombra-3), var(--alone);
}
.arco img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transform: scale(1.06);
}
/* Il vano è più buio ai bordi, come lo è davvero.                           */
.arco::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 80% 70% at 50% 62%, transparent 30%, rgba(11, 8, 6, .62) 100%);
}

.js .arco { clip-path: inset(100% 0 0 0); }
.js .arco img { transition: transform 2.6s var(--curva); }
.js .arco.acceso { animation: apri-arco 1500ms var(--curva) forwards; }
.js .arco.acceso img { transform: scale(1); }
@keyframes apri-arco {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .arco { clip-path: none; animation: none; }
  .js .arco img { transform: none; }
}

/* --- Il titolo ------------------------------------------------------------- */
.soglia h1 { display: grid; gap: var(--s-4); justify-items: center; }
.soglia__nome {
  font-family: var(--sans);
  font-size: var(--f-etichetta);
  font-weight: 500;
  letter-spacing: var(--tr-etichetta);
  text-transform: uppercase;
  color: var(--pietra);
}
.soglia__claim {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--f-hero);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--calce);
  text-shadow: 0 2px 40px rgba(11, 8, 6, .8);
}
.soglia__claim em { font-style: normal; color: var(--lampada); }

.soglia__sotto { display: grid; gap: var(--s-5); justify-items: center; }

/* Sotto i 560 px i puntini restavano appesi a fine riga: li togliamo e
   lasciamo che sia lo spazio a separare. */
@media (max-width: 559px) {
  .orari-riga { gap: var(--s-2) var(--s-4); }
  .orari-riga .punto { display: none; }
}

/* La riga degli orari: il problema numero uno di questa osteria è che apre
   solo da giovedì a domenica. Deve essere impossibile non vederlo.          */
.orari-riga {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-3) var(--s-5);
  font-size: var(--f-piccolo); color: var(--testo-2);
}
.orari-riga b { color: var(--testo); font-weight: 500; }
.orari-riga .punto { color: var(--testo-3); }

.stato {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--bordo-vivo); border-radius: var(--r-tonda);
  font-size: var(--f-minimo); font-weight: 500; letter-spacing: .04em;
  white-space: nowrap;
}
.stato::before {
  content: ""; inline-size: 7px; block-size: 7px; border-radius: var(--r-tonda);
  background: var(--testo-3); flex: none;
}
.stato[data-aperto="si"] { color: #9FD3A0; border-color: rgba(159, 211, 160, .38); }
.stato[data-aperto="si"]::before { background: #77C67A; box-shadow: 0 0 10px #77C67A; }
.stato[data-aperto="aperitivo"] { color: var(--lampada); border-color: rgba(243, 197, 127, .38); }
.stato[data-aperto="aperitivo"]::before { background: var(--lampada); box-shadow: 0 0 10px var(--lampada); }

.soglia__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* Il richiamo a scendere: una linea che cala e torna, come un gocciolamento. */
.scendi {
  position: absolute; inset-block-end: var(--s-5); inset-inline-start: 50%;
  translate: -50% 0; z-index: 2;
  display: grid; gap: var(--s-2); justify-items: center;
  font-size: var(--f-etichetta); letter-spacing: var(--tr-etichetta);
  text-transform: uppercase; color: var(--testo-3);
  text-decoration: none;
}
.scendi__filo { inline-size: 1px; block-size: 44px; background: linear-gradient(var(--testo-3), transparent); overflow: hidden; }
.scendi__filo::after {
  content: ""; display: block; inline-size: 100%; block-size: 14px;
  background: var(--lampada);
  animation: cala 2.6s var(--curva-in) infinite;
}
@keyframes cala {
  0%   { transform: translateY(-16px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

@media (min-width: 760px) {
  .soglia__impianto {
    grid-template-columns: 1.05fr auto;
    justify-items: start; text-align: start;
    align-items: center;
    gap: clamp(var(--s-6), 5vw, var(--s-10));
  }
  .soglia h1 { justify-items: start; }
  .soglia__testo { gap: var(--s-7); justify-items: start; }
  .soglia__sotto { justify-items: start; }
  .orari-riga, .soglia__cta { justify-content: start; }
  .arco { block-size: min(56svh, 520px); inline-size: auto; order: 2; }
}

/* =============================================================================
   2. LA DISCESA — il momento firma.
   -----------------------------------------------------------------------------
   Scorrendo, la volta di mattoni scende davvero sopra la testa: è la
   fotografia vera del soffitto, mascherata ad arco e spinta verso il basso da
   --p (0 → 1, calcolato in js/main.js). Insieme cala la luce e si stringe il
   buio ai bordi. Muoviamo solo transform e opacity: nessun reflow.
   ========================================================================== */
.discesa {
  position: relative;
  /* Tre battute su circa una schermata e mezza di corsa: mezzo schermo a
     testa. Più corto e la scena scatta, più lungo e diventa un'attesa.
     Su telefono si accorcia: lo scroll col pollice è più lento e la stessa
     corsa diventerebbe un'attesa vera.                                     */
  block-size: 180svh;
  background: linear-gradient(180deg, var(--pece), #0A0705 60%, var(--fondo));
}
.discesa__pinza {
  position: sticky; inset-block-start: 0;
  block-size: 100svh;
  display: grid; place-items: center;
  overflow: clip;
}

.volta {
  position: absolute; inset-inline: -14%; z-index: 1;
  block-size: 66svh;
  inset-block-start: -70svh;
  /* Scende con transform, non con top: così il lavoro resta sulla scheda
     grafica e non si ricalcola l'impaginazione a ogni fotogramma.          */
  transform: translate3d(0, calc(var(--p, 0) * 48svh), 0);
  will-change: transform;
  border-radius: 0 0 50% 50% / 0 0 34% 34%;
  /* La fotografia vera della volta: i mattoni a crociera e le due
     sospensioni accese, ritagliata dalla fascia alta della sala. Non viene
     caricata subito: sono 168 KB che ruberebbero banda alla prima
     schermata, e la scena arriva comunque dopo. Compare quando lo scroll si
     avvicina (classe .pronta, vedi js/main.js).                            */
  background-size: cover;
  background-position: 50% 100%;
  /* Un filo di luce calda corre lungo il bordo curvo: senza, l'arco si
     perde nel nero e la volta smette di leggersi come volta.              */
  box-shadow: 0 30px 90px -20px var(--pece),
              inset 0 -1px 0 rgba(243, 197, 127, .16);
}
/* Si scurisce quanto basta perché il testo si legga, non tanto da spegnere
   i mattoni: il materiale deve restare riconoscibile.                     */
.discesa.pronta .volta,
.no-js .volta { background-image: url("../img/soffitto.webp"); }
/* Su telefono basta la versione piccola: sono 78 KB in meno e la volta è
   comunque scurita al punto che la differenza non si vede. */
@media (max-width: 700px) {
  .discesa.pronta .volta,
  .no-js .volta { background-image: url("../img/soffitto-900.webp"); }
}

.volta::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
              rgba(11, 8, 6, .62) 0%, rgba(11, 8, 6, .12) 34%,
              rgba(11, 8, 6, .45) 78%, rgba(11, 8, 6, .96) 100%);
}

.discesa__parole {
  position: relative; z-index: 2;
  inline-size: min(100% - var(--bordo-pagina) * 2, 720px);
  text-align: center;
  display: grid;
}
/* Le tre frasi stanno una sopra l'altra e si danno il cambio: la scena non è
   un'attesa, è un racconto in tre battute.                                   */
.battuta {
  grid-area: 1 / 1;
  font-family: var(--serif);
  font-size: var(--f-display);
  line-height: 1.14;
  color: var(--calce);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--curva), transform 620ms var(--curva);
}
.battuta em { font-style: italic; color: var(--lampada); }
.discesa[data-fase="0"] .battuta:nth-child(1),
.discesa[data-fase="1"] .battuta:nth-child(2),
.discesa[data-fase="2"] .battuta:nth-child(3) { opacity: 1; transform: none; }

/* Senza JavaScript, e per chi ha chiesto di ridurre il movimento, la scena
   si smonta invece di sparire: la volta diventa un'immagine ferma in cima e
   le tre frasi si leggono una sotto l'altra. Si perde il movimento, non il
   racconto — e soprattutto non si perde nessuna parola, che è l'errore in
   cui si cade sempre quando una scena è governata dallo scroll.            */
.no-js .discesa,
.senza-moto .discesa { block-size: auto; padding-block: var(--scena); overflow: clip; }

.no-js .discesa__pinza,
.senza-moto .discesa__pinza {
  position: static; block-size: auto;
  display: grid; gap: var(--s-8); place-items: stretch;
}
.no-js .volta,
.senza-moto .volta {
  position: relative; inset: auto; inline-size: auto;
  margin-inline: -14%;
  block-size: 34svh; transform: none;
}
.no-js .discesa__parole,
.senza-moto .discesa__parole { gap: var(--s-6); justify-self: center; }

.no-js .battuta,
.senza-moto .battuta { grid-area: auto; opacity: 1; transform: none; }

@media (min-width: 760px) { .discesa { block-size: 240svh; } }

@media (prefers-reduced-motion: reduce) {
  .discesa { block-size: auto; padding-block: var(--scena); overflow: clip; }
  .discesa__pinza {
    position: static; block-size: auto;
    display: grid; gap: var(--s-8); place-items: stretch;
  }
  .volta {
    position: relative; inset: auto; inline-size: auto;
    margin-inline: -14%; block-size: 34svh; transform: none;
  }
  .discesa__parole { gap: var(--s-6); justify-self: center; }
  .battuta { grid-area: auto; opacity: 1; transform: none; }
}

/* =============================================================================
   3. IL LUOGO
   ========================================================================== */
.luogo { position: relative; background: var(--fondo); overflow: clip; }
.luogo .lampada { inset-block-start: 10%; inset-inline-start: -30%; opacity: .7; }

.luogo__griglia {
  position: relative; z-index: 2;
  display: grid; gap: var(--s-6);
}
.luogo__testo { display: grid; gap: var(--s-5); align-content: start; }

.figura { position: relative; margin: 0; }
.figura img {
  inline-size: 100%; border-radius: var(--r-2);
  box-shadow: var(--ombra-2);
}
.figura figcaption {
  margin-block-start: var(--s-3);
  font-size: var(--f-minimo); color: var(--testo-3);
  letter-spacing: .02em;
}
/* Il filo rosso è il bordo dei piatti dell'osteria, riportato sull'immagine. */
.figura--filo img {
  border: 1px solid color-mix(in oklab, var(--giglio) 45%, transparent);
  padding: var(--s-2);
  background: var(--fondo-2);
}

@media (min-width: 860px) {
  .luogo__griglia {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--s-5); row-gap: var(--s-9);
    align-items: start;
  }
  .luogo__testo   { grid-column: 1 / 5;  grid-row: 1; padding-block-start: var(--s-6); }
  .luogo__sala    { grid-column: 5 / 13; grid-row: 1; }
  .luogo__volta   { grid-column: 2 / 6;  grid-row: 2; margin-block-start: calc(var(--s-9) * -1); }
  .luogo__affresco{ grid-column: 7 / 13; grid-row: 2; }
}

/* =============================================================================
   4. LA GENTE — la risposta al problema vero: nessuno sa che è cambiata la
   gestione. Facce, nomi, data. È qui che nasce la fiducia.
   ========================================================================== */
.gente {
  position: relative;
  background: linear-gradient(180deg, var(--fondo), var(--fondo-2) 50%, var(--fondo));
  overflow: clip;
}
.gente .lampada { inset-block-start: -20%; inset-inline-end: -25%; opacity: .8; }
.gente__griglia { position: relative; z-index: 2; display: grid; gap: var(--s-7); align-items: center; }
.gente__testo { display: grid; gap: var(--s-5); }

/* La striscia della fiducia: il voto vero, con la fonte dichiarata.         */
.fiducia {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--bordo);
}
.fiducia__voce { display: grid; gap: var(--s-1); }
.fiducia__dato {
  font-family: var(--serif); font-size: 1.9rem; line-height: 1;
  color: var(--calce);
  font-variant-numeric: tabular-nums;
}
.fiducia__eti { font-size: var(--f-minimo); color: var(--testo-3); }
.fiducia a { color: var(--testo-2); text-decoration-color: var(--bordo-vivo); text-underline-offset: 3px; }
.fiducia a:hover { color: var(--lampada); }

@media (min-width: 860px) {
  .gente__griglia { grid-template-columns: 1.15fr .85fr; gap: clamp(var(--s-7), 5vw, var(--s-10)); }
}

/* =============================================================================
   5. LA CARTA — l'inversione cromatica.
   -----------------------------------------------------------------------------
   Qui il sito si schiarisce di colpo: è il foglio del menù sotto la lampada.
   Serve al ritmo (dopo tre scene al buio l'occhio ha bisogno di respirare) e
   serve alla lettura (i prezzi si leggono meglio in nero su carta).
   ========================================================================== */
.carta {
  position: relative;
  background: var(--carta);
  color: var(--inchiostro);
  --focus: var(--inchiostro);
  --bordo-azione: color-mix(in oklab, var(--inchiostro) 34%, transparent);
  /* La grana della carta, fatta con un gradiente: nessuna immagine da caricare. */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(203, 188, 163, .5), transparent 45%),
    radial-gradient(circle at 84% 78%, rgba(203, 188, 163, .42), transparent 42%);
}
.carta .occhiello { color: var(--inchiostro-2); }
.carta .titolo-g, .carta .titolo { color: var(--inchiostro); }
.carta .guida { color: var(--inchiostro-2); }
.carta .nota { color: var(--inchiostro-2); }

.carta__testata {
  display: grid; gap: var(--s-4); justify-items: center; text-align: center;
  margin-block-end: var(--s-9);
}

.carta__corpo { display: grid; gap: var(--s-8) clamp(var(--s-7), 6vw, var(--s-10)); }
@media (min-width: 800px) { .carta__corpo { grid-template-columns: 1fr 1fr; } }

.portata { break-inside: avoid; }
.portata + .portata { margin-block-start: var(--s-8); }
.portata__titolo {
  font-family: var(--sans);
  font-size: var(--f-etichetta);
  font-weight: 600;
  letter-spacing: var(--tr-etichetta);
  text-transform: uppercase;
  color: var(--giglio);
  padding-block-end: var(--s-3);
  margin-block-end: var(--s-5);
  border-block-end: 1px solid var(--carta-riga);
}
.portata__lista { list-style: none; padding: 0; display: grid; gap: var(--s-5); }

.piatto__riga {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-family: var(--serif); font-size: 1.28rem; line-height: 1.25;
}
.piatto__nome { flex: 0 1 auto; font-weight: 500; }
.piatto__filo {
  flex: 1 1 var(--s-6); align-self: end;
  border-block-end: 1px dotted var(--carta-riga);
  translate: 0 -.34em; min-inline-size: var(--s-4);
}
.piatto__prezzo {
  flex: none; font-family: var(--sans); font-size: var(--f-piccolo);
  font-weight: 500; font-variant-numeric: tabular-nums; color: var(--inchiostro);
}
.piatto__nota {
  margin-block-start: var(--s-1);
  font-size: var(--f-piccolo); line-height: 1.5; color: var(--inchiostro-2);
  max-inline-size: 46ch;
}

/* Bevande e coperto: informazione di servizio, tono più basso.              */
.mescita {
  margin-block-start: var(--s-9);
  padding-block-start: var(--s-7);
  border-block-start: 1px solid var(--carta-riga);
  display: grid; gap: var(--s-7);
}
@media (min-width: 800px) { .mescita { grid-template-columns: repeat(3, 1fr); } }
.mescita__lista { list-style: none; padding: 0; display: grid; gap: var(--s-3); font-size: var(--f-piccolo); }
.mescita__lista li { display: flex; align-items: baseline; gap: var(--s-3); color: var(--inchiostro-2); }
.mescita__lista b { font-weight: 500; color: var(--inchiostro); }
.mescita__lista .p { margin-inline-start: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }

.carta__chiusa {
  margin-block-start: var(--s-8);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--carta-riga);
}

/* =============================================================================
   6. LA TAVOLA — i piatti, sui piatti veri: quelli col filo rosso.
   ========================================================================== */
.tavola {
  position: relative; overflow: clip;
  background: linear-gradient(180deg, var(--pece), var(--fondo) 40%);
}
.tavola .lampada { inset-block-start: -10%; inset-inline-start: 20%; }
.tavola__testata { position: relative; z-index: 2; display: grid; gap: var(--s-4); margin-block-end: var(--s-8); }
.tavola__griglia {
  position: relative; z-index: 2;
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(2, 1fr);
}
.piatto-foto { position: relative; margin: 0; display: grid; gap: var(--s-3); }
.piatto-foto__vano {
  position: relative; overflow: hidden; border-radius: var(--r-2);
  background: var(--fondo-2);
}
.piatto-foto img {
  inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform 1.4s var(--curva), filter var(--t-2) var(--curva);
}
.piatto-foto:hover img { transform: scale(1.04); }
.piatto-foto__vano::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid transparent; border-radius: inherit;
  transition: border-color var(--t-2) var(--curva);
  pointer-events: none;
}
.piatto-foto:hover .piatto-foto__vano::after { border-color: color-mix(in oklab, var(--giglio) 70%, transparent); }
.piatto-foto__nome {
  font-family: var(--serif); font-size: var(--f-h3); color: var(--calce);
  display: flex; align-items: baseline; gap: var(--s-3);
}
.piatto-foto__nome .p {
  margin-inline-start: auto; font-family: var(--sans); font-size: var(--f-minimo);
  color: var(--testo-3); font-variant-numeric: tabular-nums;
}
.piatto-foto__nota { font-size: var(--f-piccolo); color: var(--testo-2); }

@media (min-width: 900px) {
  .tavola__griglia { grid-template-columns: repeat(4, 1fr); align-items: start; }
  /* Sfalsatura: la tavola non è mai apparecchiata in riga.                  */
  .tavola__griglia > :nth-child(2) { margin-block-start: var(--s-9); }
  .tavola__griglia > :nth-child(4) { margin-block-start: var(--s-7); }
}

/* =============================================================================
   7. LA SETE — l'aperitivo dalle cinque e chi ci rifornisce.
   ========================================================================== */
.sete {
  position: relative; overflow: clip;
  background:
    radial-gradient(ellipse 70% 60% at 22% 30%, rgba(90, 27, 37, .55), transparent 70%),
    linear-gradient(180deg, var(--fondo), var(--pece));
}
.sete__griglia { position: relative; z-index: 2; display: grid; gap: var(--s-7); align-items: center; }
.sete__testo { display: grid; gap: var(--s-5); }

.dispensa {
  position: relative; z-index: 2;
  margin-block-start: var(--scena-s);
  padding-block-start: var(--s-7);
  border-block-start: 1px solid var(--bordo);
  display: grid; gap: var(--s-6);
}
.dispensa__lista { list-style: none; padding: 0; display: grid; gap: var(--s-5); }
.dispensa__voce {
  display: grid; gap: var(--s-1);
  padding-inline-start: var(--s-5);
  border-inline-start: 1px solid var(--bordo);
}
.dispensa__voce b { font-family: var(--serif); font-size: var(--f-h3); font-weight: 500; color: var(--calce); }
.dispensa__voce span { font-size: var(--f-piccolo); color: var(--testo-2); }
.dispensa__foto { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-content: start; }
.dispensa__foto img { inline-size: 100%; border-radius: var(--r-2); box-shadow: var(--ombra-2); }

@media (min-width: 860px) {
  .sete__griglia { grid-template-columns: .8fr 1.2fr; gap: clamp(var(--s-7), 5vw, var(--s-10)); }
  .sete__foto { order: -1; }
  .dispensa { grid-template-columns: 1.3fr .7fr; gap: var(--s-9); align-items: start; }
  .dispensa__lista { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-7); }
}

/* =============================================================================
   8. IL TAVOLO — dove si prenota. Tre modi, uno solo colorato.
   ========================================================================== */
.tavolo { position: relative; background: var(--pece); overflow: clip; }
.tavolo .lampada { inset-block-start: -30%; inset-inline-start: 50%; translate: -50% 0; }
.tavolo__griglia { position: relative; z-index: 2; display: grid; gap: var(--s-8); }

/* Gli orari in grande: chi arriva di martedì trova chiuso, e questo va detto
   forte, non in fondo alla pagina in corpo 12.                               */
.orari { display: grid; gap: var(--s-3); }
.orari__riga {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--bordo);
  font-size: var(--f-piccolo);
}
.orari__giorno {
  font-family: var(--sans); font-size: var(--f-minimo); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--testo-3);
}
.orari__riga[data-oggi="si"] { border-block-end-color: var(--bordo-vivo); }
.orari__riga[data-oggi="si"] .orari__giorno { color: var(--lampada); }
.orari__riga[data-oggi="si"] .orari__ore { color: var(--calce); }
.orari__ore { color: var(--testo-2); font-variant-numeric: tabular-nums; }
.orari__ore b { color: var(--testo); font-weight: 500; }
.orari__chiuso { color: var(--testo-3); }

.contatti { display: grid; gap: var(--s-5); align-content: start; }
.contatto {
  display: grid; gap: var(--s-1);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--bordo);
}
.contatto dt {
  font-size: var(--f-etichetta); letter-spacing: var(--tr-etichetta);
  text-transform: uppercase; color: var(--testo-3);
}
.contatto dd { margin: 0; font-family: var(--serif); font-size: var(--f-h3); }
.contatto a { text-decoration: none; transition: color var(--t-1) var(--curva); }
.contatto a:hover { color: var(--lampada); }

.tavolo__azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); }

@media (min-width: 860px) {
  .tavolo__griglia { grid-template-columns: 1fr 1fr; gap: clamp(var(--s-8), 6vw, var(--s-11)); }
}

/* =============================================================================
   PIEDE
   ========================================================================== */
.piede {
  background: var(--pece);
  border-block-start: 1px solid var(--bordo);
  padding-block: var(--s-8) calc(var(--s-8) + var(--barra-bassa, 0px));
}
.piede__griglia {
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7);
  align-items: center; justify-content: space-between;
}
.piede__social { display: flex; gap: var(--s-4); }
.piede__social a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--f-piccolo); color: var(--testo-2); text-decoration: none;
  transition: color var(--t-1) var(--curva);
}
.piede__social a:hover { color: var(--lampada); }
.piede__social svg { inline-size: 18px; block-size: 18px; }

/* =============================================================================
   LA BARRA BASSA — su telefono l'azione sta sotto il pollice, sempre.
   ========================================================================== */
.barra {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--bordo);
  border-block-start: 1px solid var(--bordo);
  padding-block-end: env(safe-area-inset-bottom);
  transform: translateY(105%);
  transition: transform var(--t-2) var(--curva);
}
.barra[data-viva="si"] { transform: none; }
.barra a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-block-size: 58px;
  background: color-mix(in oklab, var(--pece) 94%, transparent);
  backdrop-filter: blur(14px);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--testo-2); text-decoration: none;
}
.barra a svg { inline-size: 19px; block-size: 19px; }
.barra a.barra--prenota { color: #FFF1E8; background: var(--giglio); }
@media (min-width: 900px) { .barra { display: none; } }

/* Nella scena della carta il buio si ritira del tutto (vedi js/main.js). */
html.in-carta .buio { opacity: 0; }

/* Sotto i 900 px c'è la barra bassa: il piede le lascia spazio, altrimenti
   l'ultima riga finisce sotto i pulsanti. */
@media (max-width: 899px) { :root { --barra-bassa: 62px; } }