/* ═══════════════════════════════════════════════════════════════════════════
   CUCCUNDEO — foglio di stile unico
   ───────────────────────────────────────────────────────────────────────────
   Mare #6EB4B4 campionato dal logo. Terra #A8402A: il bruno del logo portato
   sulla terra rossa pugliese (scelta di Michele, 24/09/2026).
   Titoli in Young Serif: UN PESO SOLO e nessun corsivo vero — mai grassetto,
   mai inclinato; per l'enfasi si cambia corpo o colore.

   ⭐ 24/09/2026 — REGOLA DELLA CASA: qui dentro NON esistono misure a caso.
   Ogni corpo viene dalla scala tipografica, ogni spazio dalla scala degli
   spazi, ogni riga di testo ha una misura massima. Se serve un valore nuovo
   si aggiunge alla scala: non si scrive un numero al volo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── colori ────────────────────────────────────────────────────────────── */
  --mare:#6EB4B4;
  --terra:#A8402A;             /* terra rossa pugliese */
  --mare-cupo:#1B4446;
  --mare-notte:#102E30;
  --terra-chiara:#C06A45;
  --terra-scura:#8E3321;       /* il rosso sotto il dito, sui pulsanti */
  --calce:#F3F7F6;
  --bianco:#FFFFFF;
  --panna:#FFF8F2;
  --inchiostro:#15201E;
  --grigio:#4B5D59;
  --grigio-chiaro:#7B8D88;
  --riga:#D3DFDB;
  --accento:#1F6B6C;           /* il mare scurito: regge il testo sopra */
  --su-scuro:#D6E6E4;
  --su-scuro-tenue:#BDD6D4;

  /* ── scala tipografica · rapporto 1,25 ─────────────────────────────────── */
  --t-xs:   0.75rem;                                    /* 12 — etichette */
  --t-sm:   0.875rem;                                   /* 14 — note, piede */
  --t-base: 1.0625rem;                                  /* 17 — testo corrente */
  --t-md:   1.1875rem;                                  /* 19 — sommari, piatti */
  --t-lg:   clamp(1.375rem, 1rem + 1.4vw, 1.5rem);      /* 22 → 24 */
  --t-xl:   clamp(1.75rem,  1.2rem + 2.4vw, 2.25rem);   /* 28 → 36 */
  --t-2xl:  clamp(2.125rem, 1.3rem + 3.6vw, 3rem);      /* 34 → 48 */
  --t-3xl:  clamp(2.5rem,   1.4rem + 5vw,  3.875rem);   /* 40 → 62 */

  /* ── altezze di riga ───────────────────────────────────────────────────── */
  --r-stretta:1.08;    /* titoli grandi */
  --r-media:1.22;      /* titoli piccoli ed etichette */
  --r-larga:1.65;      /* testo da leggere */

  /* ── scala degli spazi · passo di 4 ────────────────────────────────────── */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4rem;   --s9:6rem;
  --sezione:clamp(3rem, 7vw, 6rem);     /* aria fra due sezioni */
  --gutter:clamp(1.5rem, 4vw, 2rem);    /* margine laterale */

  /* ── misure ────────────────────────────────────────────────────────────── */
  --misura:66ch;          /* 65-75 battute per riga: oltre, si perde il segno */
  --misura-corta:34ch;
  --largo:1160px;
  --stretto:760px;

  /* ── forme, ombre, tempi, piani ────────────────────────────────────────── */
  --raggio:12px; --raggio-tondo:999px;
  --bordo:1px solid var(--riga);
  --ombra:0 1px 2px rgba(21,32,30,.05), 0 24px 50px -34px rgba(21,32,30,.5);
  --tempo:200ms;
  --z-testata:20;
}

/* ═══ base ═══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--calce);
  color:var(--inchiostro);
  font-family:"Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:var(--t-base);
  line-height:var(--r-larga);
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Young Serif", Georgia, "Times New Roman", serif;
  font-weight:400;              /* ha un peso solo: chiederne altri lo falsifica */
  line-height:var(--r-media);
  letter-spacing:-.008em;
  text-wrap:balance;
  margin:0;
}
p{margin:0; max-width:var(--misura)}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accento); outline-offset:3px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms !important; animation-duration:1ms !important}
}

/* ═══ impalcatura ════════════════════════════════════════════════════════ */
.dentro{max-width:var(--largo); margin-inline:auto; padding-inline:var(--gutter)}
.stretto,.stretto-menu{max-width:var(--stretto)}

/* l'etichetta è il gradino più piccolo della scala: stretta e maiuscola */
.insegna{
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 80,"wght" 600;
  font-size:var(--t-xs);
  line-height:var(--r-media);
  letter-spacing:.17em;
  text-transform:uppercase;
}
.occhiello{display:block; color:var(--terra-chiara); margin-bottom:var(--s3)}

/* ═══ barra in alto ══════════════════════════════════════════════════════ */
.testata{
  position:sticky; top:0; z-index:var(--z-testata);
  background:color-mix(in srgb, var(--calce) 95%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:var(--bordo);
}
.testata .dentro{display:flex; align-items:center; gap:var(--s5); padding-block:var(--s3)}
.testata .marchietto{width:150px; flex:0 0 auto}
.menu{display:flex; flex-wrap:wrap; gap:var(--s5); margin-left:auto; align-items:center}
.menu a{
  color:var(--grigio); text-decoration:none;
  padding-block:var(--s3);                 /* bersaglio comodo col pollice */
  transition:color var(--tempo);
}
.menu a:hover{color:var(--terra)}
/* ── il cambio lingua: IT · EN · FR. Quella di adesso non è un link ──── */
.menu .lingue{color:var(--grigio-chiaro); letter-spacing:.12em; display:inline-flex; align-items:center}
.lingue a{color:var(--grigio-chiaro); text-decoration:none}
.lingue a:hover{color:var(--terra)}
.lingua-di-adesso{color:var(--inchiostro); font-variation-settings:"wght" 700}
.lingue-punto{margin-inline:.4em; color:var(--riga)}

/* ── il panino: sullo schermo grande non esiste ────────────────────────
   Le tre righette diventano una ics quando è aperto: si capisce che
   quello stesso tasto richiude. */
.panino{display:none}


/* ═══ apertura: la foto è la pagina ══════════════════════════════════════ */
.apertura{position:relative; background:var(--mare-cupo); color:var(--bianco); overflow:hidden}
.apertura .sfondo{position:absolute; inset:0}
.apertura .sfondo img{width:100%; height:100%; object-fit:cover; object-position:58% 50%}
.apertura .velo{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(14,36,37,.93) 0%, rgba(14,36,37,.80) 34%,
                                     rgba(14,36,37,.20) 66%, rgba(14,36,37,.05) 100%);
}
.apertura .dentro{position:relative; padding-block:clamp(4rem, 10vw, 7.5rem)}
.apertura .testo-apertura{max-width:33rem}
.apertura .occhiello{color:var(--mare)}
.apertura h1{font-size:var(--t-3xl); line-height:var(--r-stretta); color:var(--bianco)}
.apertura h1 .evidenza{color:var(--mare)}
.apertura .sommario{
  color:var(--su-scuro); font-size:var(--t-md);
  margin-top:var(--s5); max-width:var(--misura-corta);
}

.azioni{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.bottone{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:44px;                          /* bersaglio minimo col dito */
  padding:var(--s3) var(--s5);
  border:1.5px solid transparent; border-radius:var(--raggio-tondo);
  font-size:var(--t-sm); font-variation-settings:"wght" 600;
  text-decoration:none; cursor:pointer;
  transition:background var(--tempo), color var(--tempo), border-color var(--tempo);
}
.bottone-terra{background:var(--terra); color:var(--panna)}
.bottone-terra:hover{background:var(--terra-scura)}
.bottone-chiaro{color:var(--bianco); border-color:rgba(255,255,255,.55)}
.bottone-chiaro:hover{background:rgba(255,255,255,.14)}

.fascia-info{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s6);
  margin-top:var(--s6); padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.22);
  font-size:var(--t-sm); color:var(--su-scuro-tenue);
}
.fascia-info b{font-variation-settings:"wght" 600; color:var(--bianco)}

/* ═══ bande: foto da un lato, poche parole dall'altro ════════════════════ */
.banda{display:grid; grid-template-columns:1fr 1fr; align-items:stretch}
.banda > figure{margin:0; min-height:340px}
.banda > figure img{width:100%; height:100%; object-fit:cover}
.banda .parole{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem);
}
.banda h2{font-size:var(--t-2xl); line-height:var(--r-stretta); margin-bottom:var(--s4)}
.banda p{color:var(--grigio)}
.banda p + p{margin-top:var(--s3)}
.banda-rovescia > figure{order:2}
.banda-mare{background:var(--bianco)}
.banda-mare .occhiello{color:var(--accento)}
.banda-terra{background:var(--calce)}
.banda-terra .occhiello{color:var(--terra)}

/* ═══ il territorio: una foto sola, larga ═══════════════════════════════ */
.territorio{position:relative; color:var(--bianco); background:var(--mare-cupo)}
.territorio img{width:100%; height:clamp(300px,42vw,520px); object-fit:cover}
.territorio .sopra{
  position:absolute; inset:auto 0 0 0;
  padding-block:clamp(2rem, 5vw, 3rem);
  background:linear-gradient(to top, rgba(14,36,37,.88), rgba(14,36,37,0));
}
.territorio h2{font-size:var(--t-xl); color:var(--bianco); max-width:20ch}
.territorio p{color:#CBE0DE; margin-top:var(--s3)}

/* ═══ la pizza: c'è, ma viene dopo la cucina ════════════════════════════ */
.pizza{background:var(--bianco); border-block:var(--bordo)}
.pizza .dentro{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(2rem, 5vw, 3rem); align-items:center;
  padding-block:var(--sezione);
}
.pizza h2{font-size:var(--t-xl); margin-bottom:var(--s4)}
.pizza p{color:var(--grigio)}
.pizza figure{margin:0; border-radius:var(--raggio); overflow:hidden; box-shadow:var(--ombra)}
.pizza .nota-piatto{margin-top:var(--s4); font-size:var(--t-sm); color:var(--grigio)}
.pizza .nota-piatto b{color:var(--inchiostro); font-variation-settings:"wght" 600}

/* ═══ dove siamo ════════════════════════════════════════════════════════ */
.contatti{background:var(--mare-cupo); color:#EAF3F2}
.contatti .dentro{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:var(--s7); padding-block:var(--sezione);
}
.contatti h2{font-size:var(--t-2xl); color:var(--bianco); margin-bottom:var(--s4)}
.contatti .occhiello{color:var(--mare)}
.contatti p{color:var(--su-scuro-tenue)}
.contatti dl{margin:0}
.contatti dt{margin-top:var(--s5); color:var(--mare)}
.contatti dt:first-child{margin-top:0}
.contatti dd{margin:var(--s1) 0 0; font-size:var(--t-md)}
.contatti a{color:var(--bianco); text-decoration-color:rgba(255,255,255,.4); text-underline-offset:3px}

/* ═══ piede ═════════════════════════════════════════════════════════════ */
/* ═══ IL PIEDE ══════════════════════════════════════════════════════════
   ⭐ 25/09/2026 — era una striscia con tre scritte in fila: Michele l'ha
   letta come «senza footer», e aveva ragione. Adesso sono quattro colonne:
   chi siamo, dove siamo, come si prenota, e le pagine del sito.
   ⛔ E la pagina adesso arriva sempre in fondo allo schermo: prima, quando
   il contenuto era corto, sotto al piede restava una fascia bianca vuota. */
body{display:flex; flex-direction:column; min-height:100vh}
body > footer{margin-top:auto}

.piede{
  background:var(--mare-notte); color:#9FC0BF;
  padding-block:var(--s7) var(--s5); font-size:var(--t-sm);
}
.piede .dentro{
  display:grid; gap:var(--s6) var(--s7);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.piede a{color:#CBE3E1; text-underline-offset:3px}
.piede a:hover{color:var(--bianco)}
.piede h2{
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 80,"wght" 600;
  font-size:var(--t-xs); line-height:var(--r-media);
  text-transform:uppercase; letter-spacing:.17em;
  color:var(--mare); margin-bottom:var(--s3);
}
.piede p{margin-bottom:var(--s2); line-height:var(--r-larga); max-width:34ch}
.piede ul{margin:0; padding:0; list-style:none}
.piede li{margin-bottom:var(--s2)}
.piede-nota{color:#7FA5A4}

.piede-marchio img{width:150px; height:auto; margin-bottom:var(--s4)}

.piede .piede-fondo{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5);
  margin-top:var(--s6); padding-top:var(--s4);
  border-top:1px solid rgba(159,192,191,.22);
  color:#7FA5A4; font-size:var(--t-xs);
}


/* ═══════════════════════════════════════════════════════════════════════════
   LA PAGINA DEL MENÙ — ingegnerizzata, non elencata.
   ───────────────────────────────────────────────────────────────────────────
   ⛔ NIENTE colonna di prezzi allineata a destra: l'occhio scende lungo i
      numeri e sceglie il più basso senza leggere i piatti.
   ⛔ NIENTE filetti di puntini.
   ✅ 25/09/2026: il prezzo chiude il TITOLO e porta l'euro (deciso da Michele).
   ✅ I piatti di punta salgono in cima alla sezione, con banda e foto.
   La pagina la disegna inc/render.php da dati/menu.json: non si tocca a mano.
   ═══════════════════════════════════════════════════════════════════════════ */

.pagina-menu{padding-bottom:var(--sezione)}
.titolo-menu{font-size:var(--t-3xl); line-height:var(--r-stretta); margin-block:var(--s2) 0}

/* ⭐ 25/09/2026 — LA GRAFICA. Michele: «è tutto molto testuale, zero grafica,
   poco attraente». Il menù era un elenco su fondo chiaro. Adesso:
     · la pagina si apre su una FOTO grande col titolo sopra;
     · ogni sezione si apre su una sua foto, con il nome scritto dentro;
     · accanto al piatto c'è il simbolo del marchio, goccia o onde.
   Tutte le foto sono loro, prese dalla galleria: niente immagini comprate. */
.cappello-menu{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--mare-notte); color:var(--calce);
  padding-block:clamp(3rem, 8vw, 6rem); margin-bottom:var(--s6);
}
.sfondo-cappello{position:absolute; inset:0; z-index:-2}
.sfondo-cappello img{width:100%; height:100%; object-fit:cover}
.cappello-menu::after{           /* il velo che tiene leggibile il titolo */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(95deg, rgba(14,36,37,.94) 0%, rgba(14,36,37,.82) 52%, rgba(14,36,37,.55) 100%);
}
.cappello-menu .occhiello{color:var(--mare)}
.cappello-menu .titolo-menu{color:var(--calce)}
.sommario-cappello{
  margin-top:var(--s4); color:var(--su-scuro); font-size:var(--t-md);
  max-width:var(--misura);
}

/* ── la casella di ricerca ────────────────────────────────────────────── */
/* ⭐ 25/09/2026 — UNA RIGA SOLA. Prima erano un'etichetta, una casella alta
   e dieci tasti a capo: sul telefono si mangiavano una schermata intera
   prima ancora del primo piatto. Adesso: la lente a sinistra, i filtri che
   si scorrono col dito. Il campo di scrittura compare solo se lo si chiede. */
.cerca{
  display:flex; align-items:center; gap:var(--s2);
  background:var(--calce); padding-block:var(--s3); margin-bottom:var(--s4);
}

/* visibile solo a chi legge lo schermo a voce */
.solo-per-chi-ascolta{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.lente-cerca{
  flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--riga); border-radius:var(--raggio-tondo);
  background:var(--bianco); color:var(--accento); cursor:pointer;
  transition:border-color var(--tempo), color var(--tempo);
}
.lente-cerca:hover{border-color:var(--mare); color:var(--terra)}

.campo-cerca{flex:1 1 auto; display:flex; align-items:center; gap:var(--s2); min-width:0}
/* ⚠️ senza queste due righe il `display:flex` qui sopra batte l'attributo
   `hidden` e si vedono insieme i filtri E il campo. Provato dal vivo. */
.campo-cerca[hidden],.scorciatoie[hidden]{display:none}
.campo-cerca input{
  flex:1 1 auto; min-width:0; min-height:44px;
  padding:var(--s2) var(--s4);
  border:1.5px solid var(--mare); border-radius:var(--raggio-tondo);
  background:var(--bianco); color:var(--inchiostro);
  font-family:inherit; font-size:var(--t-base);
}
.campo-cerca input::placeholder{color:var(--grigio-chiaro)}
.campo-cerca input:focus{outline:2px solid var(--accento); outline-offset:2px}
.chiudi-cerca{
  flex:0 0 auto; width:44px; height:44px; border:0; background:none;
  color:var(--grigio); font-size:var(--t-md); cursor:pointer; line-height:1;
}

/* i filtri: una riga che si scorre col dito, mai un muro di tasti a capo */
.scorciatoie{
  flex:1 1 auto; min-width:0;
  display:flex; gap:var(--s2); overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding-block:2px;
}
.scorciatoie::-webkit-scrollbar{display:none}
.scorciatoie .scorciatoia{flex:0 0 auto}

/* sullo schermo grande c'è spazio in altezza e il dito non scorre: i filtri
   vanno a capo invece di nascondersi a destra */
@media (min-width:621px){
  .pagina-menu .scorciatoie{flex-wrap:wrap; overflow:visible}
}
.scorciatoia{
  min-height:38px; padding:var(--s1) var(--s4);
  border:1px solid var(--riga); border-radius:var(--raggio-tondo);
  background:transparent; color:var(--grigio);
  font-family:"Archivo",sans-serif; font-size:var(--t-sm);
  font-variation-settings:"wght" 600; cursor:pointer;
  transition:background var(--tempo), color var(--tempo), border-color var(--tempo);
}
.scorciatoia:hover{border-color:var(--mare); color:var(--inchiostro)}
.scorciatoia[aria-pressed="true"]{background:var(--accento); border-color:var(--accento); color:var(--calce)}
.esito{margin:0 0 var(--s4); color:var(--grigio-chiaro); font-size:var(--t-sm)}
.esito:empty{margin:0}   /* vuoto non deve lasciare un buco */
.niente{margin-block:var(--s6); color:var(--grigio); font-size:var(--t-md)}

/* ═══ IL MENÙ — L'IMPAGINAZIONE, RIFATTA IL 25/09/2026 ══════════════════
   Michele: «le voci sono confuse, distanze troppo corte per alcuni elementi
   e troppo larghe per altri, grandezze di elementi importanti più piccole di
   altri meno importanti, e non capisco la divisione tra categorie».

   ⭐ LA SCALA DELL'IMPORTANZA. Cinque gradini, e ognuno è più grande e più
   scuro di quello sotto. Nessuna eccezione, mai:

     1. la carta       «Menu Ristorante»   serif grandissimo, filetto terra
     2. la sezione     «Primi piatti»      serif grande, filetto grigio
     3. il piatto      nome + prezzo       serif, il più grande della lista
     4. la descrizione                     Archivo, grigio
     5. i segni        allergeni, veg      Archivo piccolo, grigio, in fondo

   ⛔ I SEGNI ERANO BOLLINI COLORATI e urlavano più del nome del piatto e
      più del titolo della categoria: la scala era rovesciata. Adesso sono
      una riga sola di testo grigio, separata da punti. Solo «novità» tiene
      un colore, perché è l'unica che deve farsi vedere.
   ⛔ IL RITMO ERA ROTTO: i piatti in evidenza erano scatole con margini
      loro e spezzavano la fila. Adesso OGNI piatto ha la stessa aria sopra
      e sotto, e i filetti cadono sempre alla stessa distanza.
   ⭐ SULLO SCHERMO GRANDE il menù sta su DUE COLONNE, come una carta vera.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. la carta ──────────────────────────────────────────────────────── */
.carta{padding-top:var(--s9)}
.carta:first-of-type{padding-top:var(--s6)}
.titolo-carta{
  font-size:var(--t-2xl); line-height:var(--r-media);
  padding-bottom:var(--s3); border-bottom:2px solid var(--terra);
}
.sottotitolo{color:var(--grigio); font-size:var(--t-md); margin-top:var(--s3)}
.nota-carta{color:var(--grigio); font-size:var(--t-sm); margin-top:var(--s3)}

/* ── 2. la sezione: un TITOLO, non un'etichettina ──────────────────────
   Prima era una scritta minuscola tutta maiuscola, più piccola dei bollini:
   infatti non si capiva dove finiva una categoria e cominciava l'altra. */
.sezione-menu{margin-top:var(--s8)}
.sezione-menu:first-of-type{margin-top:var(--s6)}
/* l'apertura della sezione: la foto fa da fondo, il nome ci sta sopra */
.apertura-sezione{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--raggio); background:var(--mare-cupo);
  min-height:150px; display:flex; align-items:flex-end;
  padding:var(--s5); margin-bottom:var(--s4);
}
.foto-sezione{position:absolute; inset:0; z-index:-2; margin:0}
.foto-sezione img{width:100%; height:100%; object-fit:cover}
.apertura-sezione::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(14,36,37,.88) 8%, rgba(14,36,37,.42) 62%, rgba(14,36,37,.18) 100%);
}
.sezione-menu h2{
  font-family:"Young Serif", Georgia, "Times New Roman", serif;
  font-size:var(--t-xl); line-height:var(--r-media);
  letter-spacing:-.008em; text-transform:none;
  color:var(--calce); margin:0;
}
/* una sezione senza foto non deve diventare una scatola vuota */
.apertura-sezione:not(:has(.foto-sezione)){
  min-height:0; padding:0 0 var(--s3); background:none; border-radius:0;
  border-bottom:1px solid var(--terra-chiara);
}
.apertura-sezione:not(:has(.foto-sezione))::after{content:none}
.apertura-sezione:not(:has(.foto-sezione)) h2{color:var(--inchiostro)}
.nota-sezione{color:var(--grigio); font-size:var(--t-sm); margin-top:var(--s3)}

/* ── 3. il piatto: un ritmo solo, sempre lo stesso ────────────────────── */
.piatti{display:block; margin-top:var(--s4)}
.piatto{
  display:flex; gap:var(--s5); align-items:flex-start;
  padding-block:var(--s5);
  border-top:1px solid color-mix(in srgb, var(--riga) 70%, transparent);
}
.piatto:first-child{border-top:0}
.piatto .testo-piatto{flex:1 1 auto; min-width:0}

.piatto h3{font-size:var(--t-lg); line-height:var(--r-media)}
.piatto h3 .prezzo{
  color:var(--terra); font-family:"Archivo",sans-serif;
  font-size:.82em; font-variation-settings:"wght" 600;
  font-variant-numeric:tabular-nums; white-space:nowrap; margin-left:.3em;
}
.piatto .base{color:var(--grigio-chiaro); font-size:var(--t-sm)}

/* il simbolo: goccia = mare, onde = terra. Piccolo, sulla riga del nome. */
.simbolo-tipo{
  display:inline-flex; align-items:center; gap:.2em;
  vertical-align:-3px; margin-right:.35em;
}
/* la goccia è alta e stretta, il cerchio è quadrato: si fissa l'ALTEZZA e si
   lascia libera la larghezza, così nessuno dei due si schiaccia. */
.simbolo-tipo img{height:22px; width:auto; display:block}
.asterisco{color:var(--grigio-chiaro); font-family:"Archivo",sans-serif; cursor:help}

/* ── 4. la descrizione ────────────────────────────────────────────────── */
.descrizione{
  margin-top:var(--s2); color:var(--grigio);
  font-size:var(--t-base); line-height:var(--r-larga); max-width:var(--misura);
}
.ingredienti-en{margin-top:var(--s1); color:var(--grigio-chiaro); font-size:var(--t-sm); line-height:1.45}

/* ── 5. i segni: l'ultimo gradino. Una riga sola, grigia, senza scatole ── */
.segni{
  display:block; margin-top:var(--s2);
  font-family:"Archivo",sans-serif; font-size:var(--t-sm);
  color:var(--grigio-chiaro); line-height:var(--r-media);
}
.segno{
  background:none; border:0; padding:0; border-radius:0;
  font-size:inherit; letter-spacing:0; text-transform:none;
  font-variation-settings:"wght" 400; color:inherit; white-space:normal;
}
.segno + .segno::before{content:" · "; color:var(--riga)}
.segno-novita{color:var(--terra); font-variation-settings:"wght" 600}
.segno-celiaco,.segno-vegetariano{color:var(--accento)}

/* ── il piatto consigliato ─────────────────────────────────────────────
   Si distingue per la BANDA e per la foto, non per la dimensione: se il
   suo nome fosse più grande degli altri, la scala sarebbe di nuovo storta. */
.piatto-punta{
  flex-direction:column; gap:0;
  background:var(--bianco);
  border-top:0; border-left:3px solid var(--terra);
  padding:var(--s5); margin-block:var(--s5);
}
.piatto-punta + .piatto{border-top:0}
.consiglio{
  display:block; color:var(--terra); margin-bottom:var(--s2);
}
.piatto-punta .descrizione{color:var(--grigio)}

/* ── la foto del piatto ───────────────────────────────────────────────── */
.foto-piatto{margin:0; border-radius:var(--raggio); overflow:hidden; flex:0 0 auto; width:104px}
.foto-piatto img{width:100%; aspect-ratio:1; object-fit:cover}
.piatto-punta .foto-piatto{width:100%; margin-bottom:var(--s4)}
.piatto-punta .foto-piatto img{aspect-ratio:16/9}

/* ── sullo schermo grande: DUE COLONNE, come una carta stampata ─────────
   ⛔ 25/09/2026 — la prima versione usava le COLONNE TIPOGRAFICHE
   (`columns:2`): quelle riempiono la sinistra e poi la destra bilanciando
   l'ALTEZZA, non il numero. Risultato visto da Michele: una voce a sinistra
   e due a destra, e le righe di due colonne vicine non erano mai allineate.
   Adesso è una GRIGLIA: si legge uno a sinistra, uno a destra, poi si scende;
   e ogni riga parte alla stessa altezza della sua vicina, filetti compresi. */
@media (min-width:861px){
  .pagina-menu .stretto-menu{max-width:var(--largo)}
  .piatti{display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s9)}
  .piatto{border-top:1px solid color-mix(in srgb, var(--riga) 70%, transparent)}
  .piatto-punta{grid-column:1 / -1; border-top:0}
  .piatto-punta .foto-piatto{width:260px; float:right; margin:0 0 var(--s4) var(--s5)}
  .piatto-punta .foto-piatto img{aspect-ratio:4/3}
  .chiuse,.aggiornamento,.esito,.niente{max-width:var(--stretto)}
}

/* ── chiusura ─────────────────────────────────────────────────────────── */
.chiuse{margin-top:var(--sezione); padding-top:var(--s6); border-top:var(--bordo)}
.chiuse h2{font-size:var(--t-lg); margin-bottom:var(--s4)}
.note{margin:0; padding-left:var(--s5); color:var(--grigio); font-size:var(--t-sm); max-width:var(--misura)}
.note li{margin-bottom:var(--s2)}

.allergeni{margin-top:var(--s5); border:var(--bordo); border-radius:var(--raggio); background:var(--bianco)}
.allergeni summary{cursor:pointer; padding:var(--s4) var(--s5); font-size:var(--t-sm); font-variation-settings:"wght" 600}
.allergeni ul{margin:0; padding:0 var(--s5) var(--s5) var(--s7); color:var(--grigio); font-size:var(--t-sm)}
.allergeni li{margin-bottom:var(--s2); max-width:var(--misura)}
.allergeni b{color:var(--inchiostro); font-variation-settings:"wght" 600}

.aggiornamento{margin-top:var(--s6); color:var(--grigio-chiaro); font-size:var(--t-sm)}

/* ═══ telefono ══════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .banda{grid-template-columns:1fr}
  .banda > figure{min-height:0; order:0 !important}
  .banda > figure img{aspect-ratio:4/3; height:auto}
  .apertura .velo{
    background:linear-gradient(to top, rgba(14,36,37,.95) 26%, rgba(14,36,37,.72) 62%, rgba(14,36,37,.42) 100%);
  }

  /* ⭐ 25/09/2026 — LA TESTATA SUL TELEFONO.
     Prima si mangiava un terzo dello schermo: logo grande, voci a capo su
     due righe, e per di più appiccicata in cima mentre si legge il menù.
     Adesso: logo piccolo, le voci su UNA riga che si scorre col dito, e
     NON è più appiccicata — mentre si legge un menù lungo serve la
     ricerca, non il logo. */
  .testata{position:static}
  .testata .dentro{flex-wrap:wrap; gap:var(--s2); padding-block:var(--s2)}
  .testata .marchietto{width:104px}

  /* ⭐ 25/09/2026 — le voci stanno CHIUSE dietro il panino (deciso da Michele).
     Prima si prendevano una riga intera dello schermo, sempre, anche mentre
     si leggeva il menù. */
  .panino{
    display:grid; gap:5px; align-content:center; justify-items:stretch;
    margin-left:auto; width:44px; height:44px; padding:11px 10px;
    border:1px solid var(--riga); border-radius:var(--raggio);
    background:var(--bianco); cursor:pointer;
  }
  .panino span{
    display:block; height:2px; border-radius:2px; background:var(--inchiostro);
    transition:transform var(--tempo), opacity var(--tempo);
  }
  .panino.aperto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .panino.aperto span:nth-child(2){opacity:0}
  .panino.aperto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .menu{
    display:none; width:100%; margin-left:0;
    flex-direction:column; align-items:flex-start; gap:0;
    border-top:var(--bordo); margin-top:var(--s2);
  }
  .menu.aperto{display:flex}
  .menu a,.menu .lingue{
    width:100%; padding-block:var(--s3);
    border-bottom:1px solid color-mix(in srgb, var(--riga) 60%, transparent);
  }
  .menu .lingue{border-bottom:0}

  /* la barra dei filtri resta in cima mentre si scorre: è quella che serve */
  .pagina-menu .cerca{
    position:sticky; top:0; z-index:var(--z-testata);
    box-shadow:0 8px 12px -12px rgba(21,32,30,.6);
  }
}

/* ═══ telefono — IL MENÙ ════════════════════════════════════════════════
   Sul telefono si stringe soltanto l'aria: i CORPI restano quelli della
   scala, perché è la scala a far capire cosa conta più di cosa. Qui dentro
   non si cambia mai la dimensione di un titolo: si cambia solo lo spazio. */
@media (max-width:620px){
  .pagina-menu{padding-block:var(--s5) var(--sezione)}
  .titolo-menu{margin-block:var(--s1) var(--s4)}

  .carta{padding-top:var(--s7)}
  .carta:first-of-type{padding-top:var(--s5)}
  .sezione-menu{margin-top:var(--s6)}

  .piatto{padding-block:var(--s4); gap:var(--s3)}
  .piatto-punta{padding:var(--s4); margin-block:var(--s4)}
  .foto-piatto{width:80px}
  .piatto-punta .foto-piatto{width:100%; margin-bottom:var(--s3)}
}



/* ── la fascia «sito in prova»: deve dare fastidio, è il suo mestiere ──── */
.fascia-prova{
  background:#FBE9B7; color:#5A4209;
  border-bottom:1px solid #E0C27C;
  padding:var(--s3) var(--gutter);
  font-size:var(--t-sm); text-align:center;
}
.fascia-prova b{font-variation-settings:"wght" 700}
.fascia-prova code{font-family:ui-monospace,monospace; font-size:.92em}

/* ═══ I RICHIAMI DELLA HOME ═════════════════════════════════════════════
   Due porte, affiancate: il menù e la galleria. Senza queste, dalla home
   non ci si arrivava. Modello: il Buco Preferito.                        */

.richiami{padding-block:var(--sezione); background:var(--panna)}
.richiami .dentro{display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit, minmax(min(100%,300px),1fr))}

.richiamo{
  background:var(--bianco); border:var(--bordo); border-radius:var(--raggio);
  padding:var(--s6); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3);
}
.richiamo h2{font-size:var(--t-xl)}
.richiamo p{color:var(--grigio)}
.richiamo .bottone{margin-top:auto}

/* l'assaggio: sei quadratini, uno per categoria. Cliccabili tutti insieme. */
.assaggio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  width:100%; border-radius:var(--raggio); overflow:hidden;
}
.assaggio img{aspect-ratio:1; object-fit:cover; width:100%; transition:opacity var(--tempo)}
.assaggio:hover img{opacity:.82}

/* ═══ LA GALLERIA ═══════════════════════════════════════════════════════
   ⭐ 24/09/2026 — RIFATTA. La prima versione impilava una sezione per
   categoria, con foto enormi: veniva una colonna che non finiva più.
   Modello nuovo, preso dal Buco Preferito: UN mosaico solo, riquadri
   quadrati e stretti, un filo di spazio fra loro, e ogni tanto uno grande
   che rompe la fila. I tasti in cima nascondono le foto una per una.     */

.pagina-galleria{padding-bottom:var(--sezione)}

/* ── il cappello della pagina: si capisce dov'è prima di vedere le foto ── */
.cappello-galleria{
  background:var(--mare-cupo); color:var(--calce);
  padding-block:clamp(2.5rem, 6vw, 4.5rem); margin-bottom:var(--s6);
}
.cappello-galleria .occhiello{color:var(--mare)}
.cappello-galleria h1{color:var(--calce); font-size:var(--t-2xl); margin-top:var(--s2)}
.cappello-galleria p{color:var(--su-scuro-tenue); margin-top:var(--s3); font-size:var(--t-md)}

.pagina-galleria .scorciatoie{
  display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s5); overflow:visible;
}

/* ── il muro ─────────────────────────────────────────────────────────── */
.muro{
  display:grid; grid-auto-flow:dense;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap:6px;
}
.scatto{margin:0; position:relative; overflow:hidden; border-radius:4px; background:var(--mare-cupo)}
.scatto-grande{grid-column:span 2; grid-row:span 2}

.apri-scatto{
  display:block; width:100%; height:100%; padding:0; margin:0;
  border:0; background:none; cursor:zoom-in;
}
.scatto img{width:100%; height:100%; aspect-ratio:1; object-fit:cover; transition:transform 500ms ease}
.apri-scatto:hover img,.apri-scatto:focus-visible img{transform:scale(1.06)}

/* il nome della categoria appare passandoci sopra: dice cosa si sta guardando */
/* ⛔ 25/09/2026 — questo si chiamava `.velo` e ha SPENTO l'ombra scura sotto
   al titolo della prima schermata, che si chiama `.velo` anche lei: il mio
   `opacity:0` le finiva addosso e il titolo diventava illeggibile sopra la
   foto. Nome diverso, e non succede più. Regola: prima di battezzare una
   classe, si cerca se quel nome esiste già. */
.velo-scatto{
  position:absolute; inset:auto 0 0 0; padding:var(--s4) var(--s3) var(--s2);
  color:var(--calce); text-align:left;
  background:linear-gradient(to top, rgba(16,46,48,.85), rgba(16,46,48,0));
  opacity:0; transition:opacity var(--tempo);
}
.apri-scatto:hover .velo-scatto,.apri-scatto:focus-visible .velo-scatto{opacity:1}
@media (hover:none){ .velo-scatto{opacity:1} }   /* sul telefono non c'è il passaggio del dito */

@media (max-width:620px){
  .muro{grid-template-columns:repeat(auto-fill, minmax(min(100%, 140px), 1fr))}
  .scatto-grande{grid-column:span 2; grid-row:span 2}
}

/* ── l'invito in fondo: si è guardato, adesso si prenota ──────────────── */
.invito-galleria{
  margin-top:var(--s7); padding:var(--s7) var(--s5);
  background:var(--mare-cupo); color:var(--calce);
  border-radius:var(--raggio); text-align:center;
}
.invito-galleria h2{color:var(--calce); font-size:var(--t-xl)}
.invito-galleria p{color:var(--su-scuro-tenue); margin:var(--s3) auto 0; max-width:var(--misura-corta)}
.invito-galleria .tasti{display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center; margin-top:var(--s5)}

.niente{margin-block:var(--s6); color:var(--grigio); font-size:var(--t-md)}

/* ── LA LENTE ───────────────────────────────────────────────────────────
   La foto grande sopra il buio. Nessun colore nuovo: il fondo è il mare
   notte del piede di pagina, il testo è la calce. Il <dialog> del browser
   pensa da sé a Esc, alla messa a fuoco e a chiudere il resto della pagina. */
.lente{
  width:100%; max-width:100%; height:100%; max-height:100%;
  margin:0; padding:var(--s5); border:0; background:transparent;
  display:flex; align-items:center; justify-content:center; gap:var(--s3);
  overscroll-behavior:contain;
}
.lente::backdrop{background:rgba(16,46,48,.94)}      /* mare notte */
.lente:not([open]){display:none}

.lente-dentro{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--s3);
  max-width:100%; max-height:100%;
}
.lente-dentro img{
  max-width:100%; max-height:80vh; width:auto;
  border-radius:var(--raggio); background:var(--mare-cupo);
}
.lente-didascalia{color:var(--su-scuro-tenue); font-size:var(--t-xs)}

.lente-chiudi,.lente-freccia{
  flex:none; cursor:pointer; color:var(--calce);
  background:rgba(243,247,246,.1); border:1px solid rgba(243,247,246,.25);
  border-radius:var(--raggio-tondo); line-height:1;
  transition:background var(--tempo), border-color var(--tempo);
}
.lente-chiudi:hover,.lente-freccia:hover{background:rgba(243,247,246,.22); border-color:var(--mare)}

.lente-freccia{width:52px; height:52px; font-size:var(--t-xl); padding:0}
.lente-chiudi{
  position:absolute; top:var(--s4); right:var(--s4);
  width:44px; height:44px; font-size:var(--t-md); padding:0;
}

/* Sul telefono le frecce vanno sotto la foto: ai lati non ci starebbero. */
@media (max-width:620px){
  .lente{flex-wrap:wrap; padding:var(--s3)}
  .lente-dentro{order:1; flex-basis:100%}
  .lente-prima{order:2}
  .lente-dopo{order:3}
  .lente-dentro img{max-height:64vh}
}

/* ═══ IL TASTO COL BORDO — per i fondi chiari ═══════════════════════════
   ⭐ 04/10/2026 — `.bottone-chiaro` è bianco su trasparente: nato per le
   foto scure. Sulle carte bianche sparisce. Questo è il suo gemello chiaro. */
.bottone-bordo{color:var(--accento); border-color:var(--riga); background:var(--bianco)}
.bottone-bordo:hover{border-color:var(--mare); color:var(--terra)}
.richiamo .bottone-chiaro{color:var(--accento); border-color:var(--riga)}
.richiamo .bottone-chiaro:hover{background:transparent; border-color:var(--mare); color:var(--terra)}

/* la voce della pagina in cui si è, nella barra in alto */
.menu a[aria-current="page"]{color:var(--terra)}

/* ═══ LE SERATE — I Percorsi DiVini ═════════════════════════════════════
   ⭐ 04/10/2026, chiesto da Michele: chi entra vede SUBITO il prossimo
   appuntamento e la locandina; sotto, tutte le date della rassegna.
   La disposizione: a sinistra la prossima e l'elenco, a destra la
   locandina che resta ferma mentre si scorre. Sul telefono: prima la
   prossima, poi la locandina, poi l'elenco.
   Lo stato di ogni serata è SCRITTO (fatta · la prossima · in programma):
   il colore aiuta, ma da solo non basta.                                  */

.pagina-eventi{padding-bottom:var(--sezione)}
.serate{
  display:grid; gap:var(--s6) var(--s7);
  grid-template-columns:minmax(0,1fr) minmax(260px,380px);
  grid-template-areas:"prossima locandina" "elenco locandina";
  align-items:start;
}
.serate .prossima{grid-area:prossima}
.serate .locandina{grid-area:locandina; position:sticky; top:96px}
.serate .tutte-le-serate{grid-area:elenco}

/* ── la prossima serata: la carta che conta ───────────────────────────── */
.prossima{
  background:var(--bianco); border:var(--bordo); border-top:4px solid var(--terra);
  border-radius:var(--raggio); padding:var(--s6); box-shadow:var(--ombra);
}
.prossima .occhiello{color:var(--terra)}
.prossima .manca{color:var(--accento)}
.prossima-corpo{display:flex; gap:var(--s5); align-items:center; margin-top:var(--s2)}
.calendarietto{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  min-width:96px; padding:var(--s3) var(--s4);
  background:var(--mare-cupo); color:var(--su-scuro); border-radius:var(--raggio);
  text-align:center;
}
.calendarietto b{
  font-family:"Young Serif", Georgia, serif; font-weight:400;
  font-size:var(--t-3xl); line-height:1; color:var(--bianco); margin-block:var(--s1);
}
.prossima h2{font-size:var(--t-2xl); line-height:var(--r-stretta)}
.prossima .luogo{color:var(--grigio); font-size:var(--t-md); margin-top:var(--s2)}
.prossima .quando{color:var(--accento); font-variation-settings:"wght" 600; margin-top:var(--s1)}
.prossima .obbligo{margin-top:var(--s5); padding-top:var(--s4); border-top:var(--bordo); color:var(--grigio)}
.prossima .obbligo b{color:var(--terra); font-variation-settings:"wght" 600}
.prossima .tasti{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s4)}
.prossima-finita{border-top-color:var(--mare)}
.prossima-finita h2{font-size:var(--t-xl)}
.prossima-finita p:last-child{color:var(--grigio); margin-top:var(--s3)}

/* ── la locandina ─────────────────────────────────────────────────────── */
.locandina{margin:0}
.locandina a{display:block; border-radius:var(--raggio); overflow:hidden; box-shadow:var(--ombra); cursor:zoom-in}
.locandina img{width:100%; transition:transform 500ms ease}
.locandina a:hover img{transform:scale(1.02)}
.locandina figcaption{color:var(--grigio-chiaro); margin-top:var(--s3); text-align:center}

/* ── tutte le serate ─────────────────────────────────────────────────── */
.tutte-le-serate h2{font-size:var(--t-xl); margin-bottom:var(--s4)}
.calendario{list-style:none; margin:0; padding:0; border-top:var(--bordo)}
.serata{
  display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:var(--s4);
  align-items:start; padding-block:var(--s4); border-bottom:var(--bordo);
}
.data-serata{display:flex; flex-direction:column; align-items:center; text-align:center; color:var(--grigio)}
.data-serata b{
  font-family:"Young Serif", Georgia, serif; font-weight:400;
  font-size:var(--t-xl); line-height:1.1; color:var(--inchiostro);
}
.data-serata .insegna{line-height:1.4}
.testo-serata h3{font-size:var(--t-lg)}
.testo-serata p{color:var(--grigio); font-size:var(--t-sm); margin-top:var(--s1)}
.stato{
  align-self:center; white-space:nowrap;
  padding:var(--s1) var(--s3); border-radius:var(--raggio-tondo);
  border:1px solid var(--riga); color:var(--grigio);
}
.serata-prossima .stato{background:var(--terra); border-color:var(--terra); color:var(--panna)}
.serata-prossima .data-serata b{color:var(--terra)}
.serata-fatta .stato{background:var(--calce); color:var(--grigio)}
.serata-fatta .data-serata b,.serata-fatta h3{color:var(--grigio)}
.foto-in-arrivo{font-style:normal; color:var(--grigio-chiaro) !important}
.foto-serata{display:grid; grid-template-columns:repeat(auto-fill, minmax(88px,1fr)); gap:4px; margin-top:var(--s3)}
.foto-serata img{aspect-ratio:1; object-fit:cover; width:100%; border-radius:4px}

.pagina-eventi .invito-galleria{margin-top:var(--sezione)}

@media (max-width:860px){
  .serate{grid-template-columns:1fr; grid-template-areas:"prossima" "locandina" "elenco"}
  .serate .locandina{position:static; max-width:420px; margin-inline:auto; width:100%}
}
@media (max-width:620px){
  .prossima{padding:var(--s5)}
  /* sul telefono il calendarietto si stende in riga SOPRA il nome:
     accanto, il nome della cantina finiva su tre righe */
  .prossima-corpo{flex-direction:column; align-items:flex-start; gap:var(--s3)}
  .calendarietto{flex-direction:row; align-items:baseline; gap:var(--s2); min-width:0; padding:var(--s2) var(--s4)}
  .calendarietto b{font-size:var(--t-xl); margin-block:0}
  .serata{grid-template-columns:76px minmax(0,1fr); gap:var(--s3)}
  .serata .stato{grid-column:2; justify-self:start}
}

/* ── in home: la terza porta, con la locandina in piccolo ─────────────── */
.locandina-piccola{display:block; width:100%; max-width:220px; border-radius:var(--raggio); overflow:hidden; box-shadow:var(--ombra)}
.locandina-piccola img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top}
.richiamo-serate h2{font-size:var(--t-xl)}

/* ═══ LA MAPPA A RICHIESTA ══════════════════════════════════════════════ */
.contatti .mappa{
  grid-column:1/-1; border:1px solid rgba(255,255,255,.22); border-radius:var(--raggio);
  padding:var(--s5); display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; justify-content:space-between;
}
.contatti .mappa .tasti{display:flex; flex-wrap:wrap; gap:var(--s3)}
.contatti .mappa-aperta{padding:0; overflow:hidden; border:0}
.contatti .mappa iframe{display:block; width:100%; height:380px; border:0}

/* ═══ LA PRIVACY ════════════════════════════════════════════════════════ */
.pagina-privacy{padding-bottom:var(--sezione)}
.testo-legale{max-width:calc(var(--misura) + 2 * var(--gutter))}
.testo-legale h2{font-size:var(--t-lg); margin:var(--s7) 0 var(--s3)}
.testo-legale h2:first-child{margin-top:var(--s2)}
.testo-legale p{color:var(--grigio)}
.testo-legale p + p{margin-top:var(--s3)}
.testo-legale a{color:var(--accento); text-underline-offset:3px}

/* il piede: i social stanno sotto al logo (una quinta colonna andava a capo
   da sola), e la riga in fondo porta anche la privacy */
.piede .piede-seguici{margin-top:var(--s5)}
.piede .piede-social{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4)}
.piede .piede-social li{margin:0}
.piede .piede-fondo a{color:#9FC0BF}

/* ═══ DICONO DI NOI (05/10/2026) ═══════════════════════════════════════
   In home: una sola frase, grande, sul blu del mare cupo. La frase è
   copiata dall'articolo; sotto, chi l'ha scritta e dove. */
.dicono{background:var(--mare-cupo); color:var(--calce); padding-block:var(--sezione)}
.dicono .dentro{max-width:var(--stretto)}
.dicono .occhiello{color:var(--mare)}
.dicono blockquote{margin:0}
.dicono blockquote p{
  font-family:"Young Serif",Georgia,serif; font-size:var(--t-xl);
  line-height:var(--r-media); color:var(--bianco); max-width:none;
}
.dicono blockquote footer{margin-top:var(--s4); color:var(--su-scuro-tenue); font-size:var(--t-sm)}
.dicono cite{font-style:normal; color:var(--bianco)}
.dicono-tasti{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.dicono-testate{margin-top:var(--s5); color:var(--su-scuro-tenue); font-size:var(--t-sm); max-width:none}

/* la pagina: un articolo sotto l'altro, ognuno con la sua frase */
.elenco-stampa{max-width:var(--stretto); padding-bottom:var(--sezione); display:grid; gap:var(--s5)}
.articolo-stampa{
  background:var(--bianco); border:var(--bordo); border-radius:var(--raggio);
  padding:clamp(1.25rem, 3vw, 2rem); display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start;
}
.articolo-stampa .occhiello{color:var(--accento); margin-bottom:0}
.articolo-stampa h2{font-size:var(--t-lg); line-height:var(--r-media)}
.articolo-stampa blockquote{margin:0; padding-left:var(--s4); border-left:3px solid var(--terra)}
.articolo-stampa blockquote p{font-family:"Young Serif",Georgia,serif; font-size:var(--t-md); color:var(--inchiostro)}
.articolo-stampa .firma{color:var(--grigio); font-size:var(--t-sm)}
.articolo-stampa .bottone{margin-top:var(--s2)}
.nota-lingua{color:var(--grigio); font-size:var(--t-sm)}

/* ═══ IL MENÙ DELLA SERATA (05/10/2026) ════════════════════════════════
   Come sulla locandina: la portata in piccolo maiuscolo, i piatti, e il vino
   in abbinamento in corsivo. Sta dentro la carta della prossima serata. */
.menu-serata{margin-top:var(--s6); padding-top:var(--s5); border-top:var(--bordo); display:grid; gap:var(--s4)}
.menu-serata h3{font-size:var(--t-lg)}
.portata h4{font-size:var(--t-xs); letter-spacing:.17em; color:var(--terra); margin-bottom:var(--s2)}
.portata ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2)}
.portata li{color:var(--inchiostro); max-width:var(--misura)}
.portata .vino{margin-top:var(--s2); color:var(--accento); font-style:italic; font-size:var(--t-sm)}
.portata .vino span{font-style:normal; color:var(--grigio)}
.tenue-serata{color:var(--grigio-chiaro); font-size:var(--t-sm)}
.menu-piu-in-la{margin-top:var(--s3)}
.menu-piu-in-la summary{cursor:pointer; color:var(--accento); font-size:var(--t-sm); min-height:44px; display:flex; align-items:center}
.menu-piu-in-la .menu-serata{margin-top:var(--s2)}
.serate .locandina img{width:100%; height:auto; border-radius:var(--raggio)}
/* la carta della home */
.menu-pronto{color:var(--grigio)}
.menu-pronto b{color:var(--terra)}
.tasti-richiamo{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:auto}

/* ═══ LA CARTA DEI VINI (05/10/2026) ═══════════════════════════════════
   Nel menù i vini sono piatti come gli altri; qui solo il calice accanto
   alla bottiglia. In home, «il vino che consigliamo»: una fascia chiara fra
   la pizza e «Dicono di noi», con la foto della bottiglia se Mario la mette. */
.prezzo .calice, .calice{font-size:.82em; color:var(--grigio); white-space:nowrap}
.prezzo-da-fare{font-size:.78em; color:var(--grigio-chiaro); font-style:italic}

.vino-home{background:var(--calce); padding-block:var(--sezione); border-top:var(--bordo)}
.vino-home .dentro{display:grid; gap:var(--s6); grid-template-columns:minmax(0,320px) minmax(0,1fr); align-items:center}
.vino-home.senza-foto .dentro{grid-template-columns:minmax(0,1fr); max-width:var(--stretto)}
.vino-foto{margin:0; border-radius:var(--raggio); overflow:hidden; box-shadow:var(--ombra); background:var(--bianco)}
.vino-foto img{width:100%; aspect-ratio:3/4; object-fit:cover}
.vino-testo .occhiello{color:var(--terra)}
.vino-testo h2{font-size:var(--t-3xl); line-height:var(--r-stretta)}
.vino-note{color:var(--accento); font-size:var(--t-md); margin-top:var(--s3)}
.vino-prezzi{color:var(--grigio); margin-top:var(--s2)}
.vino-testo .bottone{margin-top:var(--s5)}
@media (max-width:640px){ .vino-home .dentro{grid-template-columns:minmax(0,1fr)} }

/* ═══ ORARI E CHIUSURE (05/10/2026) ════════════════════════════════════
   La tabella sta in «Dove siamo», sul blu: oggi è evidenziato. La fascia
   della chiusura straordinaria sta in cima a ogni pagina, color terra. */
.contatti .orari{grid-column:1/-1; max-width:28rem}
.orari-titolo{color:var(--mare); font-size:var(--t-xs); letter-spacing:.17em; margin:var(--s5) 0 var(--s2)}
.orari table{width:100%; border-collapse:collapse; font-size:var(--t-sm)}
.orari th, .orari td{padding:var(--s2) var(--s3); text-align:left; border-bottom:1px solid rgba(255,255,255,.14)}
.orari thead th{color:var(--su-scuro-tenue); font-weight:400}
.orari tbody th{font-weight:400; color:var(--calce)}
.orari tr.oggi th, .orari tr.oggi td{color:var(--bianco); font-variation-settings:"wght" 600; background:rgba(255,255,255,.06)}
.orari .chiuso{color:var(--terra-chiara)}
.orari .chiusure{list-style:none; margin:0; padding:0; color:var(--calce); font-size:var(--t-sm)}
.avviso-chiusura{
  background:var(--terra); color:var(--panna); text-align:center;
  padding:var(--s3) var(--gutter); font-size:var(--t-sm); line-height:var(--r-media);
}
.avviso-chiusura b{text-transform:uppercase; letter-spacing:.12em; font-size:var(--t-xs); margin-right:var(--s2)}