/* ═══ correzioni-prenotazione-04-09.css ═══ */
/* ============================================================================
   IL VESTITO DEL PERCORSO DI PRENOTAZIONE — Gastronomica
   R01 · 04/09/2026 · PRONTO DA MONTARE, NON MONTATO.

   COSA VESTE   le sette pagine servite da `sito-funzioni/server.mjs`:
     /elenco-eventi · /calendario · /evento/<slug> · /prenota (i dati) ·
     /biglietto/<codice> · /passaporto · /partecipa

   DOVE VA      dentro il tag <style> che `pagina()` stampa in server.mjs
                (riga 56), **al posto** del :root e delle regole che qui sotto
                sono marcate «SOSTITUISCE». Non sopra: o restano due sistemi.

   PERCHE'      AUDIT-VISIVO-03-09.md §1.1 — quelle pagine girano su carattere
                di sistema, testo nero e 31 codici colore di cui 30 fuori
                tavolozza. Sono il percorso che porta i soldi.

   IL RAGIONAMENTO, i numeri e gli scatti stanno in VESTITO-PRENOTAZIONE-04-09.md.
   Qui c'e' solo il codice. Ogni blocco porta il numero della sezione di quel file.

   ⛔ QUATTRO COSE NON SI FANNO COL CSS e stanno nel .md come modifica al markup:
      il <link> di Montserrat · il lettering del marchio in testata ·
      il colore del QR (e' in JS) · la fascia di apertura di ogni passo.

   ⚠️ CONFLITTI CON `correzioni-03-09.css`: sezione 14, in fondo.
   ========================================================================= */


/* ==========================================================================
   1 · I TRE RUOLI — SOSTITUISCE il :root di server.mjs riga 57
   §2 del .md.  Regola permanente design-dna 03/09: ogni colore ha un ruolo
   (sfondo · struttura · accento) o si toglie.
   I valori sono copiati da `sito-design/_interne-tavolozza.css`: nessun
   colore nuovo, sono gli stessi delle nove pagine interne.
   ========================================================================== */
:root{
  /* ── SFONDO ────────────────────────────────────────────────────────── */
  --carta:        #FFFFFF;   /* la pagina                                   */
  --carta-calda:  #FFEDE1;   /* crema: superfici di scheda, MAI fasce intere */
  --campo-fondo:  #FFFFFF;   /* dentro i campi                              */

  /* ── STRUTTURA ─────────────────────────────────────────────────────── */
  --inchiostro:   #603A22;   /* cacao · su bianco  9,88:1   (era #1c1a17)   */
  --tenue:        #8A5A46;   /* su bianco          5,78:1   (era #6f6a62)   */
  --brace:        #46220F;   /* campiture scure · bianco sopra 14,04:1      */
  --filo:         #F0DCCC;   /* l'unico filetto             (era 5 diversi) */
  --filo-tenue:   #F7E6DA;   /* le righe DENTRO una tabella                 */
  --vino:         #C4400F;   /* titoli e link · su bianco   5,14:1          */

  /* ── ACCENTO 1 · AZIONE ── solo dove si clicca, mai decorativo ─────── */
  --azione:       #FFE500;
  --azione-testo: #603A22;   /* dentro il bottone           7,74:1          */
  --azione-bordo: #603A22;   /* la sagoma: il giallo su bianco fa 1,28:1    */
  --azione-giu:   #E6CE00;   /* premuto / hover                             */

  /* ── ACCENTO 2 · SEGNALETICA DEL PERCORSO ──────────────────────────
     Il blu del marchio. design-dna 03/09: «il blu va dove serve fiducia —
     prenotazione, pagamento, biglietto, Passaporto — e MAI sul cibo:
     colore di servizio, al 5-10 %, non un fondo». Qui fa i passi del
     percorso e lo stato del biglietto, e non tocca nessuna fotografia.   */
  --passo:        #2C6C9C;   /* su bianco 5,63:1 · bianco sopra 5,63:1      */
  --passo-chiaro: #E7F0F7;   /* fondo del pannello di riepilogo             */

  /* ── STATI ── tre, e sono gli unici tre ────────────────────────────── */
  --ok:           #1F6B4F;   /* confermato · su bianco      5,60:1          */
  --ok-fondo:     #EAF4EF;
  --attesa:       #A34A16;   /* in attesa  · su bianco      5,92:1          */
  --attesa-fondo: #FFEDE1;
  --no:           #C2261B;   /* annullato  · su bianco      5,85:1          */
  --no-fondo:     #FDECEA;

  --chip-fondo:   #F7DCC6;
  --chip-testo:   #603A22;   /* 7,53:1                                      */

  /* ── movimento: la scala di casa, invariata ────────────────────────── */
  --istante:.08s; --fast:.18s; --normal:.35s;
  --smooth: cubic-bezier(.22,1,.36,1);
  --premuto:.95;

  /* ── misure ────────────────────────────────────────────────────────── */
  --h-tocco:  52px;   /* bottoni e campi del percorso pubblico             */
  --r-scheda: 8px;    /* assorbe 7 · 9 · 10 · 12                           */
  --r-pillola: 999px; /* assorbe 99                                        */
}

/* ⛔ NON esistono piu': se ne trovi uno nel foglio, e' rimasto indietro.
   #1c1a17 nero · #faf7f2 · #fbf9f6 · #eee8de · #efe9df · #f3efe8 · #f0ece5 ·
   #f4f0ea · #e2dcd2 · #d8cfc0 · #d9d3c9 · #c8c2b8 · #9c948a · #6f6a62 ·
   #6d1f2e · #571825 · #5a6b3b · #c9a227 · #8a6d10 · #5c4a10 · #4a463f ·
   #3a352e · #a33 · #7a2020 · #fdf3f3 · #e8c9c9 · #fdf9ec · #f1f6ec ·
   #cfe0bd · #33471f   →  30 codici su 31. Restava solo #fff.                */


/* ==========================================================================
   2 · IL CARATTERE — §3 del .md
   Misurato: 710 elementi in `ui-sans-serif` e 15 in Arial, zero Montserrat.
   ⚠️ Da solo questo blocco NON basta: Montserrat non e' caricato in quelle
      pagine. Il <link> va nel <head> di `pagina()` — .md §3, modifica M1.
   ========================================================================== */
body{
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;                 /* era 16 · 16 a 390, v. sezione 13      */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* §3 — <button> NON eredita il carattere: su macOS prende Arial, e <textarea>
   prende monospace. Misurato dal vivo: `.bottone` su /calendario, /evento,
   /partecipa, /passaporto rende in **Arial**; la textarea di /partecipa in
   **monospace 13,33px**. Una riga li chiude tutti e quindici.               */
button, input, select, textarea, optgroup{
  font: inherit;
  letter-spacing: inherit;
  color: var(--inchiostro);        /* erano `rgb(0,0,0)`: NERO PURO, misurato */
}


/* ==========================================================================
   3 · IL GUSCIO — testata, menu, piè de pagina — §4 del .md
   ========================================================================== */
header.testata{
  background: var(--carta);
  border-bottom: 1px solid var(--filo);
  position: sticky; top: 0; z-index: 10;
}
.marchio{
  /* ⚠️ MISURATO GUARDANDO L'ANTEPRIMA: con `display:flex` e basta, il nodo di
     testo «Gastronomica» e il <small> diventano DUE elementi flex in riga, e
     a 390 la testata si sfascia. Ci vuole la colonna.                       */
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 2px; min-height: 52px;
  text-decoration: none; color: var(--inchiostro);
}
/* il lettering e' un <img>, non un font (GLOSSARIO §10): quando l'ingegnere
   avra' fatto la modifica M2 del .md, questa regola lo dimensiona.          */
.marchio img{ display: block; width: 158px; height: auto; }
.marchio small{
  display: block; font-weight: 700; font-size: 11px; color: var(--tenue);
  letter-spacing: .09em; text-transform: uppercase;
}
nav.menu{ display: flex; gap: 24px; margin-left: auto; flex-wrap: wrap; }
nav.menu a{
  text-decoration: none; color: var(--inchiostro);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  min-height: 44px;                /* misurato 35px: sotto il minimo         */
  display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
}
nav.menu a[aria-current]{ border-bottom-color: var(--vino); color: var(--vino); }
@media (hover: hover) and (pointer: fine){
  nav.menu a:hover{ color: var(--vino); }
}
footer{
  border-top: 1px solid var(--filo);
  padding: 40px 0; color: var(--tenue); font-size: 13px;
  background: var(--carta);
}


/* ==========================================================================
   4 · TIPOGRAFIA — §5 del .md. Sette ruoli, non undici corpi per pagina.
   I titoli in Montserrat 900 maiuscolo, come nelle nove pagine interne.
   ========================================================================== */
h1{
  font: 900 clamp(34px, 5.2vw, 56px)/1.00 "Montserrat", sans-serif;
  letter-spacing: -.018em;         /* crenatura NEGATIVA sui titoli grandi  */
  text-transform: uppercase;
  color: var(--inchiostro);
  margin: 0 0 12px; text-wrap: balance;
}
h2{
  font: 900 clamp(21px, 2.1vw, 26px)/1.10 "Montserrat", sans-serif;
  letter-spacing: -.010em; text-transform: uppercase;
  color: var(--vino);
  margin: 40px 0 16px; text-wrap: balance;
}
h3, .scheda h3{
  font: 800 19px/1.20 "Montserrat", sans-serif;
  letter-spacing: -.010em; text-transform: none;
  color: var(--inchiostro); margin: 0; text-wrap: balance;
}
.sottotitolo{
  color: var(--tenue); font-size: 17px; line-height: 1.55;
  margin: 0 0 32px; max-width: 62ch; text-wrap: pretty;
}
.meta{
  color: var(--tenue); font-size: 14px;
  font-variant-numeric: tabular-nums; margin: 0;
}
.abstract{ margin: 0; font-size: 15px; color: var(--inchiostro); text-wrap: pretty; }
.occhiello-piccolo{
  font: 800 12px/1 "Montserrat", sans-serif;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--vino); margin: 0 0 12px;
}
.occhiello-piccolo a{ color: inherit; }
a{ color: var(--vino); }
/* ⚠️ TRAPPOLA VISTA NELL'ANTEPRIMA: il marcatore e' `<main class="contenitore">`, e
   `.contenitore{padding:0 32px}` (specificita' 0,1,0) BATTE `main{padding:…}` (0,0,1).
   Scritto come `main{…}` il respiro sopra il titolo non arriva mai, e l'h1 resta
   incollato alla testata. Si usa il selettore composto e `padding-block`, cosi'
   il padding orizzontale del contenitore resta dov'e'.                        */
main, main.contenitore{ padding-block: 40px 96px; }


/* ==========================================================================
   5 · IL BOTTONE — §6 del .md
   SOSTITUISCE `.bottone` di server.mjs riga 115.
   Oggi: fondo #6D1F2E, raggio 8px, h 44/46, peso 600, Arial. Cioe' un
   bottone che nel resto del sito non esiste. Il bottone di Gastronomica e'
   giallo, a pillola, con il bordo cacao che gli da' la sagoma (il giallo su
   bianco fa 1,28:1: senza bordo il bottone non si vede, solo il testo).
   ========================================================================== */
.bottone{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--h-tocco); padding: 0 26px;
  background: var(--azione);
  color: var(--azione-testo);                    /* 7,74:1 dentro           */
  border: 2px solid var(--azione-bordo);         /* 9,88:1 contro la pagina */
  border-radius: var(--r-pillola);
  font: 800 14px/1 "Montserrat", sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition-property: background-color, transform, color;
  transition-duration: var(--fast);
  transition-timing-function: var(--smooth);
}
@media (hover: hover) and (pointer: fine){
  .bottone:hover{ background: var(--azione-giu); }
}
.bottone:active{ transform: scale(var(--premuto)); }

/* il secondario: filo cacao, nessun riempimento. E' il «torna indietro»,
   non deve competere col giallo.                                           */
.bottone.secondario{
  background: transparent;
  color: var(--inchiostro);
  border: 2px solid var(--inchiostro);
}
@media (hover: hover) and (pointer: fine){
  .bottone.secondario:hover{ background: var(--carta-calda); color: var(--inchiostro); }
}

/* piccolo: la variante che la gestione usa dentro le righe di tabella      */
.bottone.piccolo{ min-height: 44px; padding: 0 16px; font-size: 12px; }

/* §6 — il DISABILITATO. Oggi `#FFFFFF` su `#C8C2B8` = **1,77:1**: la scritta
   «Esaurito» e «Qui si aprirebbe PayPal» non si legge. Un bottone spento
   deve restare LEGGIBILE, solo non invitante: si toglie il giallo, non il
   contrasto.                                                                */
.bottone[disabled], .bottone:disabled{
  background: transparent;
  color: var(--tenue);                 /* 5,78:1 su bianco                  */
  border: 2px dashed var(--filo);
  cursor: not-allowed;
  transform: none;
}


/* ==========================================================================
   6 · I CAMPI — §7 del .md
   SOSTITUISCE `.campo select,.campo input` di server.mjs riga 131.
   Misurato: cinque altezze (40 · 41 · 43 · 46 · 52), corpo 14px a 1440
   (sotto i 16 che l'ordine chiede), testo `rgb(0,0,0)` nero puro, e la
   textarea di /partecipa col bordo di serie di Chrome `#767676`.
   ========================================================================== */
.campo{ display: flex; flex-direction: column; gap: 6px; }
.campo label{
  font: 800 12px/1 "Montserrat", sans-serif;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--tenue);
  min-height: 0;                  /* ⚠️ v. sezione 14: il min-height 44px di
                                     correzioni-03-09 §11 gonfia il pannello
                                     dei filtri di 174 px a 390            */
}
.campo select,
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo textarea,
.modulo-dati input, .modulo-dati select, .modulo-dati textarea,
.apri-form textarea{
  min-height: var(--h-tocco);
  padding: 12px 14px;
  border: 1px solid var(--inchiostro);   /* era 1px #E2DCD2: 1,26:1 su bianco */
  border-radius: var(--r-scheda);
  background: var(--campo-fondo);
  color: var(--inchiostro);
  font: 400 16px/1.4 "Montserrat", sans-serif;   /* MAI sotto i 16          */
}
.campo textarea, .modulo-dati textarea, .apri-form textarea{
  min-height: 122px; resize: vertical; line-height: 1.55;
}
.campo select{ padding-right: 34px; }

::placeholder{ color: var(--tenue); opacity: 1; }   /* 5,78:1, non il grigio
                                                       chiarissimo di serie  */

/* §7 — LA SPUNTA. Difetto misurato dal vivo, solo a 390:
     la casella di «ACCESSIBILE» e' larga **231 px** invece di 22.
   Causa: dentro `@media (max-width:720px)` c'e'
     `.filtri .campo select,.filtri .campo input{width:100%}`
   che ha specificita' 0,2,1 e batte `.spunta input{width:22px}` (0,1,1).
   La casella si stira, l'etichetta viene spinta a destra, e le due spunte
   sembrano disallineate. Si esclude il tipo, non si alza la specificita'.   */
.campo.spunte{ gap: var(--s2, 8px); padding-bottom: 8px; }
.spunta{
  display: flex; align-items: center; justify-content: flex-start;
  gap: 10px; min-height: 44px; cursor: pointer;
  font: 400 15px/1.35 "Montserrat", sans-serif;
  letter-spacing: 0; text-transform: none;
  color: var(--inchiostro);        /* era #6F6A62, 12px: etichetta, non testo */
}
.spunta input[type="checkbox"], .spunta input[type="radio"]{
  width: 22px; height: 22px; min-height: 22px;
  flex: 0 0 22px;                  /* ⛔ non si allarga mai                  */
  margin: 0; accent-color: var(--vino);
}
/* la stessa esclusione dove il difetto nasce, cosi' regge anche se qualcuno
   rimonta la vecchia riga                                                   */
@media (max-width: 720px){
  .filtri .campo input[type="checkbox"],
  .filtri .campo input[type="radio"]{ width: 22px; flex: 0 0 22px; }
}

.filtri{
  background: var(--carta-calda);
  border: 1px solid var(--filo);
  border-radius: var(--r-scheda);
  padding: 20px;
  display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 24px;
}


/* ==========================================================================
   7 · I CHIP — §8 del .md
   SOSTITUISCE `.etichetta` di server.mjs riga 106.
   Oggi: 11px (il corpo piu' piccolo del percorso), raggio 99px, testo
   #6F6A62, e il chip «gratis» in `#5A6B3B` — un verde oliva che non e' in
   tavolozza e dipinge 1k px² in tutto il sito.
   ========================================================================== */
.etichetta{
  display: inline-flex; align-items: center;
  font: 800 12px/1 "Montserrat", sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pillola);
  background: var(--chip-fondo); color: var(--chip-testo);   /* 7,53:1      */
  border: 1px solid transparent;
}
.etichetta.progetto{ background: transparent; border-color: var(--vino);   color: var(--vino);   }
.etichetta.gratis  { background: var(--ok-fondo);     border-color: var(--ok);     color: var(--ok);     }
.etichetta.esaurito{ background: var(--no-fondo);     border-color: var(--no);     color: var(--no);     }
.etichetta.ultimi  { background: var(--attesa-fondo); border-color: var(--attesa); color: var(--attesa); }
.riga-etichette{ display: flex; gap: 8px; flex-wrap: wrap; }


/* ==========================================================================
   8 · SCHEDE, FOTO E TABELLE — §9 del .md
   ========================================================================== */
.scheda{
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--r-scheda);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  transition-property: transform, box-shadow;
  transition-duration: var(--normal); transition-timing-function: var(--smooth);
}
@media (hover: hover) and (pointer: fine){
  .scheda:hover{ transform: translateY(-2px); box-shadow: 0 6px 24px rgba(70,34,15,.10); }
}
.scheda h3 a{ text-decoration: none; color: inherit; }
.scheda > .bottone{ margin-top: auto; }

/* il bordo delle foto: senza, la foto si scioglie nel bianco (design-dna,
   Rifinitura n.5). Nero trasparente, mai tinto col colore del marchio.      */
.copertina, .galleria-pubblica img, .galleria-pubblica video, .miniatura{
  background: var(--chip-fondo);
  outline: 1px solid rgba(0,0,0,.10); outline-offset: -1px;
  object-fit: cover;
}
.copertina{ aspect-ratio: 16 / 10; width: 100%; }
/* §r0310b, 03/10/2026 — LA LOCANDINA DELL'EVENTO SI VEDE INTERA, a ogni vista.
   Andrea: «Eliminerei nella grafica il taglio della foto orizzontale, perché ci
   costringerebbe ogni volta ad avere più formati da caricare».
   Prima: fascia larga quanto la pagina e alta al massimo 360 px, riempita con
   `cover` → a 1440 di una locandina quadrata si vedeva un terzo dell'altezza.
   ⚠️ L'altezza della fascia NON veniva dal vecchio `aspect-ratio: 21/8` (inerte):
   veniva dall'attributo `height="…"` che `gastro_copertina_evento()` scrive
   sull'<img> (serve a non far saltare la pagina mentre arriva). `height: auto`
   lo spegne nel CSS; senza, togliere il tetto fa una locandina alta 1440 px.
   `width: auto` + `max-width: 100%` + `max-height`: il riquadro è grande quanto
   la locandina, quindi niente bande ai lati (il fondo e il filo della regola
   sopra restano, ma combaciano col bordo della foto). La griglia a due colonne
   da 1024 in su e il bottone che la ingrandisce stanno in fondo al file.      */
.copertina.grande{
  aspect-ratio: auto; width: auto; max-width: 100%; height: auto;
  max-height: min(80vh, 720px); object-fit: contain; display: block;
  border-radius: var(--r-scheda);
}
.galleria-pubblica img, .galleria-pubblica video{ aspect-ratio: 4 / 3; border-radius: var(--r-scheda); }

table.turni{
  width: 100%; border-collapse: collapse;
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--r-scheda); overflow: hidden;
  font-variant-numeric: tabular-nums;
}
table.turni th{
  text-align: left;
  font: 800 12px/1 "Montserrat", sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tenue); background: var(--carta-calda);
  padding: 14px; border-bottom: 1px solid var(--filo);
}
table.turni td{ padding: 16px 14px; border-bottom: 1px solid var(--filo-tenue); vertical-align: middle; }
table.turni tr:last-child td{ border-bottom: 0; }
table.turni td a:not(.bottone){
  color: var(--vino); text-underline-offset: 3px;
  min-height: 44px; display: inline-flex; align-items: center;  /* era 18px  */
}

/* §9 — la barra della disponibilita'. Era `--oliva #5A6B3B` (verde fuori
   tavolozza) e `#a33` da pieno. Il colore non e' l'unico portatore: accanto
   c'e' sempre «N liberi su M».                                              */
.barra{ height: 6px; width: 110px; background: var(--filo); border-radius: var(--r-pillola); overflow: hidden; }
.barra span{ display: block; height: 100%; background: var(--passo); border-radius: var(--r-pillola); }
.barra.pieno span{ background: var(--no); }


/* ==========================================================================
   9 · AVVISI, ESITI, RIEPILOGO — §10 del .md
   Tre stati, tre colori, e nient'altro. Oggi ce n'erano nove
   (#fdf9ec #5c4a10 #f1f6ec #cfe0bd #33471f #fdf3f3 #e8c9c9 #7a2020 #c9a227).
   ========================================================================== */
.avviso{
  border-left: 4px solid var(--attesa);
  background: var(--attesa-fondo); color: var(--inchiostro);
  padding: 16px 20px; border-radius: 0 var(--r-scheda) var(--r-scheda) 0;
  font-size: 15px; margin: 0 0 24px;
}
.esito{ border-radius: var(--r-scheda); padding: 24px; margin-bottom: 24px; border: 1px solid; }
.esito strong{ display: block; font: 800 19px/1.2 "Montserrat", sans-serif; margin-bottom: 6px; }
.esito.ok{ background: var(--ok-fondo); border-color: var(--ok); color: var(--inchiostro); }
.esito.ok strong{ color: var(--ok); }
.esito.no{ background: var(--no-fondo); border-color: var(--no); color: var(--inchiostro); }
.esito.no strong{ color: var(--no); }

.riepilogo, .modulo-dati, .pannello-chiaro{
  background: var(--carta); border: 1px solid var(--filo);
  border-radius: var(--r-scheda); padding: 24px;
}
/* il riepilogo del conto e' il momento della fiducia: prende il blu di
   servizio, e resta l'unico fondo blu del percorso (design-dna, 5-10 %)     */
.riepilogo{ background: var(--passo-chiaro); border-color: var(--passo); }
.conto-righe{ width: 100%; border-collapse: collapse; margin-top: 16px; font-variant-numeric: tabular-nums; }
.conto-righe td{ padding: 9px 0; border-bottom: 1px solid var(--filo); }
.conto-righe tr.totale td{
  border-bottom: 0; border-top: 2px solid var(--inchiostro);
  padding-top: 14px; font: 800 19px/1.2 "Montserrat", sans-serif;
}
.elenco-vantaggi{ margin: 0 0 16px; padding-left: 20px; line-height: 1.8; color: var(--inchiostro); }
.codice{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px; letter-spacing: .12em;
  background: var(--carta); color: var(--inchiostro);
  padding: 8px 14px; border-radius: var(--r-scheda);
  border: 1px solid var(--filo); display: inline-block;
}
.vuoto{ color: var(--tenue); padding: 64px 0; text-align: center; }


/* ==========================================================================
   10 · IL BIGLIETTO — §11 del .md
   E' la fine del percorso e l'unica pagina che la gente rivede piu' volte
   (la riapre all'ingresso). Oggi e' la piu' spoglia: filetto verde oliva
   fuori tavolozza, QR nero, zero marchio.
   ⚠️ Il colore del QR e' scritto in JS (server.mjs riga 1012,
      `foreground:'#1c1a17'`): non si tocca col CSS. Modifica M3 nel .md.
   ========================================================================== */
.biglietto{
  background: var(--carta); border: 1px solid var(--filo);
  border-radius: 14px; padding: 36px 28px; max-width: 480px;
  text-align: center; margin: 0 auto;
}
.biglietto h1{ font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 10px; }
.biglietto .meta.grande{ font-size: 16px; margin-bottom: 24px; }
/* lo stato si legge dal filetto in alto E dall'occhiello: due segnali, non uno */
.biglietto.stato-ok    { border-top: 6px solid var(--ok);     }
.biglietto.stato-ok     .occhiello-piccolo{ color: var(--ok);     }
.biglietto.stato-attesa{ border-top: 6px solid var(--attesa); }
.biglietto.stato-attesa .occhiello-piccolo{ color: var(--attesa); }
.biglietto.stato-no    { border-top: 6px solid var(--no);     }
.biglietto.stato-no     .occhiello-piccolo{ color: var(--no);     }
.qr canvas{
  border: 1px solid var(--filo); border-radius: var(--r-scheda);
  padding: 12px; background: var(--carta);
}
.codice.grande{
  font-size: 26px; letter-spacing: .16em; margin: 0 0 14px;
  border-color: var(--inchiostro);
}
/* g29 · 19/09/2026 — IL CODICE DEL BIGLIETTO CON MENO EVIDENZA (riunione del 18/09, R1 17:40:
   «gli daremo meno evidenza da un punto di vista grafico»). Più piccolo, senza riquadro, colore
   tenue, con l'etichetta sopra: il QR resta l'elemento principale. Il codice serve ancora
   all'ingresso (lettura a voce al Check-in), quindi resta leggibile, non si nasconde.
   ⚠️ Solo `.biglietto .codice.grande`: `.codice` da sola è anche il GP-… del Passaporto
   (`passaporto.php:1036`), che non cambia. Prova: `zsh strumenti/prova-g29.sh` (C3, C4). */
.biglietto .codice-eti{
  margin: 12px 0 2px; font-size: 13px; line-height: 1.4; color: var(--tenue);
}
.biglietto .codice.grande{
  font-size: 15px; letter-spacing: .08em; color: var(--tenue);
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 14px;
}
.biglietto .codice-nota{ margin: -10px 0 14px; font-size: 13px; }
/* la riga di grazie in cima al biglietto, solo appena prenotato */
.biglietto-grazie{
  margin: 0 0 18px; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--inchiostro);
}


/* ==========================================================================
   11 · L'ANELLO DI FUOCO — §12 del .md
   Misurato forzando :focus-visible via CDP su 38 elementi: **tutti e 38**
   portano l'azzurro di serie di Chrome `1px auto rgb(0,95,204)`.
   Sul bottone principale (fondo #6D1F2E) fa **1,86:1**: chi naviga con la
   tastiera non vede dove si trova sul bottone che porta alla prenotazione.
   Due cerchi concentrici, come chiede design-dna: se ne vede sempre uno.
   ========================================================================== */
:where(a, button, summary, input, select, textarea, [role="button"], [tabindex]):focus-visible{
  outline: 3px solid var(--azione);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--brace);
  border-radius: var(--r-scheda);
}
/* sopra una campitura scura si inverte: li' il cerchio scuro sparirebbe    */
.passo-banda :where(a, button, summary, input, select):focus-visible,
.gestione    :where(a, button, summary, input, select):focus-visible{
  outline-color: var(--azione);
  box-shadow: 0 0 0 6px var(--carta);
}


/* ==========================================================================
   12 · LA SEGNALETICA DEL PERCORSO — §13 del .md
   ⚠️ QUESTO BLOCCO HA BISOGNO DELLA MODIFICA M4 NEL MARKUP: oggi in queste
      pagine non c'e' nessun elemento di apertura, l'<h1> sta nudo dentro
      <main class="contenitore">. Senza M4 il blocco non dipinge niente e
      non rompe niente.
   Perche' serve: la home e le nove interne aprono ognuna su una fascia
   satura che dice «sei qui». Le sette pagine del percorso non ce l'hanno, e
   e' il motivo per cui, guardandole, non sembrano lo stesso sito.
   Il colore e' UNO SOLO per tutto il percorso — il blu del marchio — perche'
   il percorso e' UNA cosa sola, non sette; e perche' il blu, secondo la
   regola del 03/09, e' il colore della fiducia e non quello del cibo.
   ========================================================================== */
.passo-banda{
  background: var(--passo); color: var(--carta);
  padding: 32px 0 28px; margin-bottom: 32px;
}
.passo-banda h1, .passo-banda .sottotitolo, .passo-banda .occhiello-piccolo{ color: var(--carta); }
.passo-banda .sottotitolo{ opacity: .92; margin-bottom: 0; }
/* il numero del passo: 1 calendario · 2 evento · 3 dati · 4 biglietto
   ⚠️ MISURATO E SCARTATO: il giallo d'azione su questa banda fa **4,41:1**,
      cioe' sotto la soglia per un testo di 12px (grassetto o no: «grande»
      per WCAG parte da 18,66px in grassetto). E comunque il giallo e' il
      colore dell'AZIONE e non si spende in decorazione. Resta il bianco.   */
.passo-banda .passo-n{
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 12px/1 "Montserrat", sans-serif;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--carta); opacity: .95; margin: 0 0 12px;   /* bianco su blu 5,63:1 */
}
/* le due pagine che NON sono un passo del percorso (Passaporto, Partecipa)
   prendono il colore che la HOME dipinge gia' per la loro sezione (AUDIT
   §5.2), cosi' la segnaletica combacia: non un colore simile, quel valore. */
.passo-banda--passaporto{ background: #C2261B; }   /* bianco sopra  5,85:1  */
.passo-banda--partecipa { background: #FF8A00; color: var(--brace); } /* 5,94:1 */
.passo-banda--partecipa h1,
.passo-banda--partecipa .sottotitolo{ color: var(--brace); }
.passo-banda--partecipa .passo-n{ color: var(--brace); }


/* ==========================================================================
   13 · IL TELEFONO — §14 del .md.  Si misura prima qui.
   ========================================================================== */
@media (max-width: 720px){
  body{ font-size: 16px; }
  .contenitore{ padding: 0 18px; }
  main, main.contenitore{ padding-block: 24px 64px; }
  .testata .contenitore{ height: auto; padding: 10px 18px; flex-wrap: wrap; gap: 8px; }
  .marchio img{ width: 125px; }

  /* il menu andava a capo male: «Partecipa» finiva su una riga da sola e la
     testata occupava 130 px. Una riga sola che scorre.                     */
  nav.menu{
    margin-left: 0; width: 100%;
    display: flex; flex-wrap: nowrap; gap: 20px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  nav.menu::-webkit-scrollbar{ display: none; }
  nav.menu a{ flex: 0 0 auto; white-space: nowrap; }

  /* §14 — il calendario a 390 e' alto 29.235 px (≈35 schermate) contro 6.493
     a 1440. Due cause misurate: i sei filtri impilati (≈700 px prima del
     primo evento) e 55 turni in righe di tabella non ripiegate.
     ⚠️ La tabella si ripiega gia' (server.mjs riga 228 e seguenti) ed e'
     fatta bene: ogni cella porta il nome della colonna in `data-e`.
     Quello che manca e' CHIUDERE I FILTRI. Serve la modifica M5 del .md
     (<details class="filtri"><summary>): senza <summary> non c'e' niente
     su cui cliccare, e questo blocco non fa danno.                         */
  details.filtri{ display: block; padding: 0; }
  details.filtri > summary{
    list-style: none; cursor: pointer;
    min-height: 52px; display: flex; align-items: center; gap: 10px;
    padding: 0 20px;
    font: 800 13px/1 "Montserrat", sans-serif;
    letter-spacing: .09em; text-transform: uppercase; color: var(--inchiostro);
  }
  details.filtri > summary::-webkit-details-marker{ display: none; }
  details.filtri > summary::after{ content: "+"; margin-left: auto; font-size: 20px; }
  details.filtri[open] > summary::after{ content: "−"; }
  details.filtri > .campi-filtro{ padding: 0 20px 20px; display: grid; gap: 16px; }

  .filtri .campo{ flex: 1 1 100%; }
  .filtri .campo select,
  .filtri .campo input:not([type="checkbox"]):not([type="radio"]){ width: 100%; }

  table.turni{ border: 0; background: transparent; border-radius: 0; overflow: visible; }
  table.turni thead{ display: none; }
  table.turni tr{
    display: block; background: var(--carta);
    border: 1px solid var(--filo); border-radius: var(--r-scheda);
    padding: 6px 0; margin-bottom: 12px;
  }
  table.turni td{ display: block; padding: 10px 16px; border-bottom: 1px solid var(--filo-tenue); text-align: left; }
  table.turni td:last-child{ border-bottom: 0; }
  /* ⚠️ MISURATO: il bottone da 52 px dentro una riga di tabella costa
     **+8 px per riga**, e sul calendario le righe sono decine (+630 px sulla
     misura di oggi). In un elenco che si scorre il bottone sta a 44, che e'
     il minimo per il dito: il respiro serve nei moduli, non nelle liste.    */
  table.turni td .bottone{ min-height: 44px; padding: 0 18px; }
  table.turni td[data-e]:not([data-e=""])::before{
    content: attr(data-e); display: block; margin-bottom: 6px;
    font: 800 11px/1 "Montserrat", sans-serif;
    letter-spacing: .09em; text-transform: uppercase; color: var(--tenue);
  }
  .biglietto{ padding: 28px 18px; }
  .passo-banda{ padding: 24px 0 20px; margin-bottom: 24px; }
  img, video, table{ max-width: 100%; }
}


/* ==========================================================================
   14 · ⚠️ CONFLITTI CON `correzioni-03-09.css`
   Vanno decisi dall'ingegnere PRIMA di montare, non dopo.
   --------------------------------------------------------------------------
   A) §10 di quel foglio (il blocco «la correzione n.1») e' il PRIMO tentativo
      su queste stesse pagine, scritto senza aver letto il markup. Tre delle
      sue regole non agganciano niente:
        `.pagina--calendario .apertura`  → nessun elemento ha classe `apertura`
        `.filtri > .campi`               → i figli di `.filtri` sono `.campo`
        `.filtri > summary`              → `.filtri` e' un <form>, non <details>
      👉 **Questo foglio SOSTITUISCE il §10 di ieri.** Non si montano tutti e due.

   B) §11 di quel foglio: `*{ transition-property: none }`.
      L'intenzione era togliere `transition: all`; l'effetto e' togliere OGNI
      transizione a chiunque abbia specificita' 0,0,0 — cioe' agli `a`, ai
      `summary`, ai campi. Le mie regole qui hanno tutte una classe, quindi
      sopravvivono, ma la riga resta troppo larga.
      👉 Consiglio: `*{ transition-property: none }` diventa
         `*{ transition-property: revert-layer }` oppure si toglie, e si
         cerca `transition: all` con un grep. Decide l'ingegnere.

   C) §11 di quel foglio: `a, button, summary, [role="button"], label{ min-height:44px }`.
      Su queste pagine `label` e' l'etichettina di 12px sopra ogni campo.
      Portarla a 44 px alza il pannello dei filtri del calendario di
      **6 × 29 = 174 px a 390**, sulla pagina che l'audit segnala come la piu'
      alta del sito (29.235 px).
      👉 Qui sopra, sezione 6, `.campo label{ min-height: 0 }` lo neutralizza.
         Se si monta questo foglio DOPO l'altro, e' gia' a posto.

   D) §0 di quel foglio definisce `--filo: #F0DCCC`, `--r-scheda: 8px`,
      `--h-bottone: 52px` con gli stessi valori che uso qui: **nessun
      conflitto**, solo un doppione. Se i due fogli finiscono nello stesso
      documento, vince l'ultimo e il valore e' identico.

   E) §0 definisce anche `--h-campo: 52px` e io uso `--h-tocco: 52px`:
      stesso numero, due nomi. Da unificare quando si fa il foglio unico.
   ========================================================================== */

/* ═══ correzioni-montaggio-04-09.css ═══ */
/* ============================================================================
   CORREZIONI DI MONTAGGIO — R02, 04/09/2026 (giro A)
   ----------------------------------------------------------------------------
   ⛔ QUI NON C'E' NIENTE DI ESTETICO, E NON SI DECIDE NIENTE.
   Sono i tre difetti che i fogli del R01 hanno prodotto NEL MONTARSI sul
   markup vero, misurati a 390 px con `strumenti/giroA-verifica-390.mjs`
   accendendo e spegnendo i fogli sulla STESSA pagina a un secondo di
   distanza (`sheet.disabled = true`). Nessuno dei tre si vede leggendo il
   CSS: si vedono solo nel browser.

   Sta in un file a parte, e non dentro i fogli del R01, per due motivi:
     · quelli sono la sua consegna e sono COLLEGATI (`ln -s`) alle sue
       sorgenti in `sito-design/`: cambiarli qui li cambierebbe la';
     · cosi' quello che ho aggiunto io si legge tutto in venti righe, e si
       toglie togliendo un <link>.

   Va caricato PER ULTIMO. Lo mettono `server.mjs` (pagina()) e
   `vestito.mjs` (versoIlServer).
   ============================================================================ */


/* ==========================================================================
   1 · LA SPUNTA TORNA ALTA 44 px
   Misurato: `.spunta` a 390 → label 312×22, `min-height` calcolato **0px**.
   Causa: `.campo label{ min-height: 0 }` di correzioni-prenotazione §6
   (specificita' 0,2,1) batte `.spunta{ min-height: 44px }` (0,1,0) — e le
   due spunte del calendario SONO <label> dentro un `.campo`. Il `min-height:0`
   serve, ma serve per le etichettine da 12 px sopra i campi, non per una
   riga che si tocca col dito.
   ⚠️ Non e' un errore del R01: la sua regola e' giusta, e' la collisione con
      il markup che non si vedeva finche' i due fogli non stavano insieme.
   ========================================================================== */
.campo label.spunta{ min-height: 44px; }


/* ==========================================================================
   2 · /passaporto NON SBORDA PIU' DI 32 px A 390
   Misurato: sbordo 32px coi fogli montati, 0px spegnendoli. Il colpevole e'
   `form.modulo-dati`, che arriva a 422 px in una colonna larga 354.
   Causa: `.modulo-dati` e `.pannello-chiaro` sono elementi flex dentro
   `.due-blocchi` (server.mjs riga 176). Un elemento flex ha `min-width:auto`,
   cioe' non scende sotto la larghezza minima del suo contenuto — e il
   contenuto e' cresciuto, perche' i campi adesso hanno `padding: 12px 14px`
   e il testo a 16 px come l'ordine chiede.
   Rimedio: si lascia che possano stringersi. E' la toppa standard di ogni
   elemento flex che contiene testo, non un aggiustamento su misura.
   ========================================================================== */
.due-blocchi > .modulo-dati,
.due-blocchi > .pannello-chiaro,
.due-blocchi > .filtri{ min-width: 0; }
.campi > .campo{ min-width: 0; }


/* ==========================================================================
   3 · LA HOME NON SBORDA PIU' DI 2 px A 390
   Misurato: sbordo 2px coi fogli montati, 0px spegnendoli.

   ⚠️ IL COLPEVOLE NON E' QUELLO CHE SEMBRAVA, e sono partito due volte per la
   strada sbagliata. `misura-390.mjs` elenca gli elementi il cui bordo destro
   supera la finestra, e in cima metteva `canvas#fondoVivo` (largo 392) e il
   countdown `p.conto` (bordo destro a 577). Ho provato tutti e due — tolto il
   `tabular-nums` al contatore, messo un `max-width` al canvas — e lo sbordo
   e' rimasto 2 px tutte e due le volte. Sforare NON vuol dire far scorrere:
   quasi tutti quegli elementi stanno dentro un antenato che li ritaglia, e il
   canvas e' `position: fixed`, che allo scroll orizzontale non contribuisce
   proprio.
   Il colpevole vero si trova in un modo solo: si NASCONDE un candidato alla
   volta (`visibility:hidden` + `position:absolute`) e si guarda se lo
   `scrollWidth` cala. Su 76 candidati ne resta **uno**:

       div.contenuto > footer.pie > div.wrap > div.griglia.g5 > div
       («Informazioni pratiche», 274..392, largo 117,5)

   E' la griglia del pie' di pagina, che a 390 sta su due colonne
   (`.g5{grid-template-columns:repeat(2,1fr)}`). Una colonna `1fr` vale
   `minmax(auto,1fr)`: il suo pavimento e' la larghezza minima del contenuto,
   e non scende sotto. Coi corpi nuovi del §5 il contenuto e' cresciuto e la
   colonna ha spinto fuori la griglia.
   Rimedio: il `min-width:0` sulle celle, che e' LA toppa della griglia CSS —
   toglie quel pavimento e lascia che il testo vada a capo.
   ⚠️ Non sposta nessuna sezione e non cambia nessun colore.
   ========================================================================== */
.griglia > *{ min-width: 0; }


/* ==========================================================================
   4 · /elenco-eventi — IL TITOLO DELLA SCHEDA E' UN BERSAGLIO DA 23 px
   Misurato a 390 (`misura-390.mjs`, dopo aver aggiunto la pagina all'elenco:
   prima non era misurata): 4 bersagli su 18 sotto i 44 px, e sono i quattro
   titoli degli eventi — «Mani in pasta» 132×23, «Cena tra gli ulivi» 160×23.
   Sono il link principale della scheda: se il dito manca, non si entra
   nell'evento.
   Non e' un difetto che ho portato io: e' che questa pagina non era stata
   misurata. Il rimedio e' lo STESSO gia' usato nel foglio di server.mjs per
   i link dentro le tabelle (`table.turni td a:not(.bottone)`), non un modo
   nuovo di fare la stessa cosa.
   ⚠️ Solo sotto i 720 px: sul PC non cambia niente.
   ========================================================================== */
@media (max-width: 720px){
  .scheda h3 a{ display: inline-flex; align-items: center; min-height: 44px; }
}


/* ==========================================================================
   5 · 🔴 IL BOTTONE PRINCIPALE SPARIVA COL MOUSE SOPRA — 1,59:1
   Trovato dal verdetto aggiunto oggi a `strumenti/audit-vestito-04-09.mjs`,
   forzando `:hover` via CDP e leggendo dopo 470 ms:

       .bottone [hover]  bianco su #E6CE00  =  1,59:1
       su /calendario «Filtra» · /evento «Prenota» · /partecipa · /passaporto
       · gestione «Crea l'evento…»  → 6 bottoni, i principali del percorso

   Causa, ed è la trappola scritta in design-dna («un <a> usato come bottone
   resta un link: il colore va fissato in TUTTI gli stati»): la regola vecchia
   di server.mjs dice `.bottone:hover{ background:#571825; color:#fff }` —
   DUE dichiarazioni. Quella nuova del R01 dice
   `.bottone:hover{ background: var(--azione-giu) }` — una sola. Ha la stessa
   specificità e viene dopo, quindi vince sul fondo… e lascia in piedi il
   `color:#fff` di prima. Il bottone diventa giallo col testo bianco sopra.
   ⚠️ È esattamente il difetto di OSTRO dell'8/08 (1,14:1) e di Gastronomica
      del 30/08: non si vede in nessuno scatto, perché uno scatto riprende la
      pagina a riposo.
   Rimedio: si dichiara il colore del testo anche nell'hover e nel fuoco.
   Misurato: `#603A22` su `#E6CE00` = **6,21:1** (strumenti/colori.py).

   🔁 SECONDO GIRO, e il primo era sbagliato. Avevo scritto solo
      `.bottone:hover,.bottone:focus-visible{ color: var(--azione-testo) }`.
      L'hover e' tornato a 6,21:1, e il FUOCO e' passato da 11:1 a **1,36:1**:
      perche' sul fuoco il fondo resta il `#571825` vecchio (il foglio del R01
      ridipinge solo l'hover, e lo fa dentro `@media (hover:hover)`), e su quel
      vinaccia scuro il cacao non si legge. Cioe' avevo spostato il difetto
      invece di chiuderlo — e l'ho saputo perche' il verdetto e' andato rosso
      di nuovo, non perche' me ne sia accorto leggendo.
      La regola vecchia dichiara DUE cose (`background` e `color`) su DUE
      stati: si sostituisce intera, tutti e due gli stati, tutte e due le
      dichiarazioni. Poi l'hover vero si rimette dentro la guardia del mouse,
      cosi' su un telefono non resta appiccicato al tocco.
   ========================================================================== */
/* ① si spegne la coppia vecchia: il bottone resta se stesso in tutti e due
      gli stati, e il fuoco lo dice l'anello, non un cambio di fondo */
.bottone:not([disabled]):hover,
.bottone:not([disabled]):focus-visible{
  background: var(--azione, #FFE500);
  color: var(--azione-testo, #603A22);      /* 7,74:1 */
}
.bottone.secondario:not([disabled]):hover,
.bottone.secondario:not([disabled]):focus-visible{
  background: transparent;
  color: var(--inchiostro, #603A22);        /* 9,88:1 */
}
/* ② e solo dove un mouse esiste davvero, l'hover si scurisce di un tono */
@media (hover: hover) and (pointer: fine){
  .bottone:not([disabled]):hover{ background: var(--azione-giu, #E6CE00); }   /* 6,21:1 */
  .bottone.secondario:not([disabled]):hover{ background: var(--carta-calda, #FFEDE1); }
}

/* ═══ correzioni-giroB-04-09.css ═══ */
/* ============================================================================
   GIRO B — 04/09/2026 — R02.  LE REGOLE NUOVE DI QUESTO GIRO.
   Sta a parte apposta: i fogli del R01 (`correzioni-03-09.css`,
   `correzioni-prenotazione-04-09.css`, `correzioni-dashboard-04-09.css`) NON
   si toccano — sono la sua consegna, e una modifica dentro di essi sparirebbe
   alla prossima consegna senza che nessuno se ne accorga.
   Si carica PER ULTIMO in tutte e due le famiglie di pagine.

   Contiene solo cose che nel giro B sono NATE: la mappa d'insieme, la mappa
   della scheda di un locale, il modulo della newsletter, il guscio condiviso.
   ========================================================================= */


/* ==========================================================================
   1 · LA MAPPA D'INSIEME (home, sezione #mappa) — B1
   ========================================================================== */

/* il riquadro segnaposto aveva una trama a quadretti disegnata col CSS: con
   la mappa vera dentro si vedrebbe SOTTO le tessere nei momenti in cui una
   tessera non e' ancora arrivata, e sembrerebbe un difetto di caricamento.
   `:has()` la spegne SOLO dove la mappa c'e' davvero: dove non c'e' (nessun
   locale con coordinate) il segnaposto resta quello di prima. */
.mappa__quadro:has(.mappa__osm){ background-image: none; display: block; }
.mappa__osm{
  position: absolute; inset: 0; z-index: 1;
  /* ⚠️ un'altezza VERA serve comunque: se il genitore un giorno perdesse
     l'aspect-ratio, un contenitore alto 0 fa uscire Leaflet con le tessere a
     meta' e nessun errore in console. 240 px e' il minimo leggibile. */
  min-height: 240px;
  background: #F2EFE9;              /* la tinta «terra» delle tessere OSM:
                                       mentre arrivano non si vede un buco */
}
/* la nota resta SOPRA la mappa, in fondo al riquadro, dov'era */
.mappa__quadro:has(.mappa__osm) .mappa__nota{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
}
/* Leaflet stampa la citazione di OpenStreetMap: e' un obbligo della licenza
   ODbL, quindi non si nasconde. Si rende leggibile e la si toglie da sotto
   la nota, che ora sta in fondo. */
.mappa__osm .leaflet-control-attribution{
  font: 400 11px/1.4 "Montserrat", sans-serif;
  /* ⚠️ FONDO PIENO, non semitrasparente. Misurato da
     `strumenti/prova-mappa-visibile.mjs`: col fondo all'86 % il collegamento
     «OpenStreetMap» faceva 3,78:1, sotto il 4,5 di casa — e sopra una tessera
     scura sarebbe stato peggio. E' lo stesso principio dello scrim: la fascia
     va costruita perche' regga QUALUNQUE cosa finisca sotto, non la tessera
     che c'e' adesso. */
  background: #fff; color: #46220F;
  bottom: 46px;                      /* sopra la fascia della nota           */
}
/* 4 classi, per la stessa ragione dei bottoni dello zoom */
.mappa__osm .leaflet-control-container .leaflet-control-attribution a{
  color: #46220F; text-decoration: underline;
}
/* la finestrella del segnaposto */
.mappa__pop{ display: grid; gap: 6px; font: 400 14px/1.45 "Montserrat", sans-serif; }
.mappa__pop strong{ font: 800 15px/1.2 "Montserrat", sans-serif; color: #46220F; }
.mappa__pop span{ color: #8A5A46; }
.mappa__pop a{ color: #C4400F; font-weight: 700; }
/* ⚠️ I BERSAGLI DEL DITO, misurati con `strumenti/misura-390.mjs` a 390 px.
   Appena montata, la mappa ha aggiunto alla home 15 bersagli sotto i 44 px:
   11 segnaposti (36 px larghi) e i due bottoni dello zoom di Leaflet, che di
   serie sono 30×30. Su un sito che si guarda «per la maggior parte da
   cellulare» (GLOSSARIO §12 punto 4) non e' un dettaglio.
   Il segnaposto lo allarga il JavaScript (scatola 44×53, disegno 36×45); qui
   ci sono i due bottoni e la scatola trasparente del segnaposto. */
.pin-g{ display: flex; align-items: flex-end; justify-content: center;
        background: none; border: 0; }
.pin-g img{ display: block; width: 36px; height: 45px; }
/* ⚠️ E LA PRIMA VERSIONE DI QUESTE DUE RIGHE NON HA FUNZIONATO: il foglio di
   Leaflet si carica NEL CORPO (sta dentro il buco DATI:mappa), quindi arriva
   DOPO questo, e a parita' di specificita' vince lui — `.leaflet-touch
   .leaflet-bar a{width:30px}` e' 0,2,1 come `.mappa__osm .leaflet-control-zoom
   a`. Rimisurato: restavano 30×44. Ci vuole una specificita' piu' alta.
   Il difetto non si vedeva leggendo il CSS: l'ha detto misura-390. */
.mappa__osm.leaflet-touch .leaflet-control-zoom a,
.mappa__osm .leaflet-control-zoom a.leaflet-control-zoom-in,
.mappa__osm .leaflet-control-zoom a.leaflet-control-zoom-out{
  width: 44px; height: 44px; line-height: 44px; font-size: 20px;
  /* ⚠️ VISTO NELLO SCATTO, non nel codice: i due bottoni uscivano come due
     rettangoli BIANCHI VUOTI. Il «+» e il «−» c'erano, ed erano bianchi su
     bianco — `gastronomica.css` ha `a{color:inherit}` e la sezione #mappa e'
     `.campo--mora`, che mette `color:#fff`. Il colore va detto qui. */
  color: #46220F;
}
/* 🔴 E IL COLORE SULL'<a> NON BASTA — trovato guardando lo scatto ingrandito 4×,
   dopo che due ipotesi erano gia' fallite.
   In Leaflet il «+» non e' testo dell'<a>: sta in un <span aria-hidden="true">
   DENTRO l'<a>. Misurando l'<a> tornava tutto giusto (color #46220F, visibility
   visible, opacity 1, niente text-fill trasparente) e il bottone restava un
   rettangolo bianco vuoto. Misurando il <span>:  color: rgb(255,255,255).
   Qualcuno gli dichiara il bianco, quindi NON eredita.
   E' la stessa trappola gia' pagata su OSTRO l'8/08 e scritta in `design-dna`:
   «il colore va fissato anche sullo <span> interno, se il testo sta dentro un
   elemento figlio — e' quello che il colore colpisce davvero».
   📌 La lezione, per la prossima volta: si misura l'elemento CHE DIPINGE IL
      TESTO, non il suo contenitore. `getComputedStyle` sull'<a> diceva la
      verita' su un elemento che non stampava niente. */
/* 📌 E LA PRIMA RIPARAZIONE NON HA AGGANCIATO. Il colpevole non era «qualcuno
   dichiara il bianco al mio span»: e' `gastronomica.css`
       .campo--mora span:not(.tag):not(.card__eti){ color:#fff }
   La sezione #mappa e' `.campo--mora`, quindi quel selettore prende OGNI span
   dentro la mappa. Specificita': una classe + un elemento + due `:not(classe)`
   = 0,3,1. La mia era `.mappa__osm .leaflet-control-zoom a span` = 0,2,2, e
   nel confronto le CLASSI si contano per prime: 3 batte 2. Vinceva il bianco.
   L'ho scoperto solo chiedendo al browser QUALI REGOLE COMBACIANO
   (`CSS.getMatchedStylesForNode`): leggendo i fogli di stile non si vedeva, e
   avevo gia' sbagliato due ipotesi (il carattere, e il colore sull'<a>).
   Qui si sale a quattro classi, cosi' non e' un pareggio deciso dall'ordine. */
.mappa__osm .leaflet-control-container .leaflet-bar.leaflet-control-zoom a span{
  color: #46220F;
}
/* ⚠️ LO STESSO SELETTORE COLPISCE LA FINESTRELLA DEL SEGNAPOSTO, e li' non
   l'avevo ancora guardata: l'indirizzo sotto il nome del locale sarebbe uscito
   BIANCO SU BIANCO. Trovato di riflesso, non aperto nessun segnaposto. */
.mappa__osm .leaflet-popup-content .mappa__pop strong{ color: #46220F; }
.mappa__osm .leaflet-popup-content .mappa__pop span{ color: #8A5A46; }
.mappa__osm .leaflet-popup-content .mappa__pop a{ color: #C4400F; }
/* i due bottoni sono uno sopra l'altro: senza questa riga il secondo perde il
   bordo e sembrano un blocco solo */
.mappa__osm .leaflet-control-zoom a + a{ border-top: 1px solid #ccc; }

/* se Leaflet non si carica il riquadro lo DICE, non resta vuoto */
.mappa__osm--assente{
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 24px; text-align: center;
  font: 700 13px/1.5 "Montserrat", sans-serif; color: #fff; background: #46220F;
}


/* ==========================================================================
   2 · LA MAPPA DELLA SCHEDA DI UN LOCALE (bere-e-mangiare.html) — B1
   ========================================================================== */
.mappa-s{ margin: 30px 0 0; }
.mappa-s__q{
  display: block; width: 100%; height: 320px; border: 0;
  /* 240 px e' il minimo chiesto; a 390 la scheda e' stretta e una mappa
     bassa non fa capire dove si e'. */
  min-height: 240px;
  background: #F2EFE9;
  outline: 1px solid rgba(0,0,0,.12); outline-offset: -1px;
}
.mappa-s__no{
  margin: 0; padding: 18px 20px; background: #FFEDE1; color: #603A22;
  font-size: 15px; line-height: 1.5; text-wrap: pretty;
}
.mappa-s__a{ margin: 14px 0 0; }
/* il segnaposto piccolo accanto all'indirizzo, nella riga dei contatti */
.contatti .pin{
  display: inline-block; vertical-align: -5px; margin-right: 7px;
  width: 20px; height: 25px;
}
@media (max-width: 700px){
  .mappa-s__q{ height: 260px; }
}


/* ==========================================================================
   3 · L'INVITO ALLA NEWSLETTER — B2
   La sezione usa le classi che il design ha gia' (`.sezione .scura
   .campo--alloro`): qui c'e' solo l'impaginazione del modulo, non un sistema
   nuovo di colori. Il verde e' il contrappeso freddo e non ripete il colore
   della sezione vicina.
   ========================================================================== */

/* ⚠️ NASCONDERE UN'ETICHETTA NON E' `display:none`: cosi' sparisce anche per
   chi usa un lettore di schermo, e il campo resta senza nome. Si toglie dalla
   vista lasciandola nell'albero. */
.solo-lettori{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* L'ESCA. Non `display:none`: un modulo automatico un po' furbo lo salta.
   Sta fuori dalla vista ed e' larga 1px, quindi NON allarga la pagina a 390
   (un `left:-9999px` lo farebbe). `aria-hidden` + `tabindex="-1"` nel markup
   la tolgono a tastiera e lettori di schermo. */
.esca-bot{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; pointer-events: none;
}

.newsletter__in{
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}
.newsletter__f{ display: grid; gap: 14px; }
.campo-nl{ display: grid; gap: 6px; }
.campo-nl label{
  font: 800 12px/1.2 "Montserrat", sans-serif;
  text-transform: uppercase; letter-spacing: .08em; color: #fff;
}
/* ⚠️ 16 px NON e' una preferenza: sotto i 16, iOS ingrandisce la pagina appena
   si tocca il campo, e da li' in poi tutto sborda. 52 px di alto e' la misura
   di casa per il tocco (`--h-tocco` del foglio del R01). */
.campo-nl input, .campo-nl select, .pie__nl-f input{
  font: 400 16px/1.3 "Montserrat", sans-serif;
  min-height: 52px; padding: 0 14px; width: 100%; max-width: 100%;
  border: 2px solid #46220F; border-radius: 8px;
  background: #fff; color: #46220F;
}
.campo-nl input::placeholder, .pie__nl-f input::placeholder{ color: #8A5A46; }
.newsletter .btn--azione, .pie__nl-f .btn--azione{
  min-height: 52px; align-self: start;
}
.newsletter__p{
  margin: 4px 0 0; font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,.92); text-wrap: pretty;
}
.newsletter__p a{ color: #fff; text-decoration: underline; }
/* il messaggio dopo l'invio. Fondo pieno, non un colore di testo: su una
   campitura verde un testo verde non si legge. */
.nl-esito{
  margin: 0; padding: 13px 16px; border-radius: 8px;
  font: 700 15px/1.45 "Montserrat", sans-serif; text-wrap: pretty;
}
.nl-esito--ok{ background: #FFFFFF; color: #1F6B4F; }
.nl-esito--no{ background: #FFEDE1; color: #A32410; }

/* ── il modulo compatto nel pie' ─────────────────────────────────────── */
.pie__nl{
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center;
  padding: 30px 0; margin: 34px 0 0; border-top: 1px solid rgba(255,255,255,.24);
}
.pie__nl h4{ margin: 0 0 6px; }
.pie__nl p{ margin: 0; font-size: 14px; }
.pie__nl-f{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pie__nl-f input{ flex: 1 1 220px; min-width: 0; }
.pie__nl-f .nl-esito{ flex: 1 1 100%; }

/* ⚠️ L'ESCA NON E' UN CAMPO, e va tolta anche dalle MISURE.
   `strumenti/misura-390.mjs` la contava fra i bersagli sotto i 44 px su DIECI
   pagine: `input#nlB-esca → 34×52`. Il contenitore e' largo 1 px e ritaglia,
   quindi a schermo non si vede — ma l'input dentro prendeva
   `.pie__nl-f input{min-height:52px}` e la sua larghezza naturale di 34 px, e
   `getBoundingClientRect()` li misura lo stesso. Un bersaglio piccolo finto in
   un elenco di bersagli piccoli veri e' rumore che nasconde i difetti veri.
   Due classi, per battere `.pie__nl-f input` e `.campo-nl input` (0,1,1). */
.newsletter__f .esca-bot input, .pie__nl-f .esca-bot input{
  width: 1px; height: 1px; min-width: 0; min-height: 0;
  padding: 0; border: 0; font-size: 16px;   /* 16 resta: iOS ingrandisce sotto */
}

@media (max-width: 900px){
  .newsletter__in{ grid-template-columns: 1fr; gap: 26px; }
  .pie__nl{ grid-template-columns: 1fr; gap: 16px; }
}


/* ==========================================================================
   4 · IL BOTTONE «MENU» CHE NON DOVEVA VEDERSI — trovato misurando a 1440
   ⚠️ NON è un difetto del giro B: è nato nel giro A, montando il foglio del
   R01, e nessuno l'aveva visto perché a 1440 lo sbordo non lo misurava nessuno.

   COSA SUCCEDE. `gastronomica.css` dice `.apri-menu{display:none}` e lo riaccende
   solo sotto i 1180 px, dove il menu vero sparisce. `correzioni-03-09.css` (R01)
   dichiara `.btn, .bottone{ display:inline-flex }`, e il bottone è
   `class="btn btn--filo apri-menu"`: **stessa specificità (0,1,0), e vince chi
   viene dopo** — cioè il foglio del R01, che si carica per ultimo.
   Risultato: su tutte e 10 le pagine del design il bottone «Menu» si vedeva
   ANCHE a schermo largo, accanto al menu completo, e la testata non ci stava.

   MISURATO a 1440 (documentElement.scrollWidth / clientWidth):
       /                1538 / 1440   →  98 px fuori
       /manifesto.html  1566 / 1440   → 126 px fuori  (sborda `a.btn`, cioè
                                        «Prenota un evento», l'ultimo della fila)
   Le sette pagine del percorso erano già pulite: là il foglio del R01 non c'è.

   ⛔ La riparazione NON si fa dentro il foglio del R01 (è la sua consegna).
   Si rimette qui la regola che c'era, con la specificità che serve a vincere:
   `.testata .apri-menu` è 0,2,0 e batte `.btn` 0,1,0 — così non dipende
   dall'ordine di caricamento, che è la cosa che si è rotta.
   ========================================================================== */
.testata .apri-menu{ display: none; }
@media (max-width: 1180px){
  /* sotto i 1180 il menu vero sparisce: qui il bottone DEVE tornare, se no da
     telefono il sito resta senza navigazione (difetto già pagato il 03/09). */
  .testata .apri-menu{ display: inline-flex; margin-left: auto; }
}
@media (max-width: 760px){
  .testata .apri-menu{ margin-left: 0; order: 3; }
}

/* ═══ correzioni-giroC-04-09.css ═══ */
/* ============================================================================
   GIRO C — 04/09/2026 — R02.  LE REGOLE NUOVE DI QUESTO GIRO.
   Sta a parte apposta: i fogli del R01 (`correzioni-03-09.css`,
   `correzioni-prenotazione-04-09.css`, `correzioni-dashboard-04-09.css`) NON
   si toccano — sono la sua consegna, e una modifica dentro di essi sparirebbe
   alla prossima consegna senza che nessuno se ne accorga.
   Si carica PER ULTIMO in tutte e due le famiglie di pagine, dopo il foglio
   del giro B.

   Contiene solo cose NATE nel giro C: il titolo invisibile della home (C1),
   il testo del cliente su «Diventa partner» (C4/C5), il bersaglio della
   citazione di OpenStreetMap (C9).
   ========================================================================= */


/* ==========================================================================
   C1 · L'<h1> CHE NON SI VEDE
   ==========================================================================
   Costantino ha ordinato di togliere il titolo grande della home e di non
   metterci nulla. Ma quel titolo era l'unico <h1> della pagina, e una pagina
   senza <h1> è un difetto di accessibilità e di SEO. L'<h1> resta col nome
   canonico del festival, nascosto agli occhi e non ai lettori di schermo.
   ⛔ NON `display:none` e NON `visibility:hidden`: quelli lo tolgono anche ai
      lettori di schermo, cioè non risolvono niente. Questa è la ricetta
      classica (un pixel, ritagliato), l'unica che lascia il testo leggibile
      alla tecnologia assistiva.
   ⚠️ Nessuna altezza, nessun margine: la riga sotto il titolo NON si sposta
      di un pixel. Verificato con uno scatto a 390 e a 1440. */
.solo-voce{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ==========================================================================
   C4/C5 · IL TESTO DEL VECCHIO SITO SU «DIVENTA PARTNER»
   ==========================================================================
   Sono parole del cliente incollate uguali: qui si decide solo come si legge.
   Misura di riga larga come le altre pagine del percorso (`.sottotitolo` sta
   a 62ch), interlinea del corpo 1.5 come vuole `design-dna` §9. */
.testo-cliente{ max-width: 68ch; }
.testo-cliente p{ margin: 0 0 16px; line-height: 1.6; text-wrap: pretty; }
.testo-cliente h2{ margin: 40px 0 14px; }
.testo-cliente .elenco-partner{ margin: 0 0 16px; padding-left: 22px; }
.testo-cliente .elenco-partner li{ margin: 0 0 10px; line-height: 1.6; }
/* il collegamento all'email dentro il testo: resta un link in mezzo a una
   frase (WCAG 2.5.8 lo esenta dal bersaglio minimo), ma deve leggersi. */
.testo-cliente a{ color: #C4400F; }


/* ==========================================================================
   C9 · LA CITAZIONE «OpenStreetMap» — bersaglio 44 px SENZA coprire la mappa
   ==========================================================================
   IL DIFETTO, misurato dal giro B: a 390 il collegamento «OpenStreetMap»
   della citazione della licenza è 110×15 px, sotto i 40 px della regola di
   Costantino del 04/09 (`misura-390.mjs` lo conta a 44).
   IL VINCOLO CHE RENDE LA COSA DIFFICILE: la licenza ODbL obbliga a mostrare
   quella citazione, quindi non si nasconde; e una fascia bianca alta 44 px
   dentro una mappa alta 300 coprirebbe la mappa, che è il motivo per cui il
   giro B aveva rinunciato.

   LA VIA D'USCITA: si separa L'AREA DI TOCCO dalla FASCIA CHE SI VEDE.
   Il collegamento diventa una scatola alta 44 px, ma il suo fondo bianco è
   dipinto con un gradiente alto 17 px al centro: sopra e sotto la scatola è
   TRASPARENTE, e la mappa si vede attraverso. Il dito prende 44 px, l'occhio
   vede la stessa fascia di prima.
   ⚠️ Il fondo va sul collegamento e NON sul contenitore: `misura-390.mjs`
      misura il rettangolo dell'<a>, e usa quello del padre solo se il padre
      non è più alto di 24 px — un contenitore alto 44 non verrebbe contato.
   ⚠️ Il colore del testo e del fondo NON cambia: erano già misurati a 10,33:1
      da `strumenti/prova-mappa-visibile.mjs` (giro B). Cambiando solo la
      geometria, quella misura resta valida — ed è rilanciata lo stesso. */
/* ⚠️ QUATTRO CLASSI, e non è pignoleria: il foglio di Leaflet si carica NEL
   CORPO della pagina, quindi arriva DOPO il mio. La sua
   `.leaflet-container .leaflet-control-attribution` è (0,2,0) come la mia
   `.mappa__osm .leaflet-control-attribution`, e a parità di specificità vince
   chi viene dopo — cioè lui. È la stessa trappola pagata dal giro B sui
   bottoni dello zoom, e si vede solo MISURANDO: la prima versione di questa
   regola lasciava il contenitore a `rgba(255,255,255,.8)`, cioè un riquadro
   traslucido 117×44 px appoggiato sulla mappa — l'esatto contrario di quello
   che l'ordine chiede. Misurato a 390 nel browser, non letto nel foglio. */
.mappa__osm .leaflet-control-container .leaflet-bottom .leaflet-control-attribution{
  display: flex; align-items: center; padding: 0;
  font: 400 11px/44px "Montserrat", sans-serif;
  /* la fascia bianca è alta 17 px e sta al centro della scatola da 44:
     sopra e sotto è trasparente, e la mappa si vede attraverso. */
  background: linear-gradient(#fff, #fff) center / 100% 17px no-repeat;
}
.mappa__osm .leaflet-control-container .leaflet-bottom .leaflet-control-attribution a{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 10px;
  background: none;
}


/* ==========================================================================
   C7 · LE COPERTINE DEGLI EVENTI — dove l'evento compare
   ==========================================================================
   ⛔ STRUTTURA A CONGELATA: nessuna riga e nessuna scheda è stata ridisegnata.
      La miniatura si aggiunge DENTRO l'elemento che c'era già — una cella in
      più nella griglia della riga, un'immagine in più nella cella «Evento»
      della tabella del calendario.
   ⚠️ Le colonne in più si accendono con `:has(...)`: un evento SENZA copertina
      (oggi «L'impasto d'autore» di Retrò Pizza, che in libreria ha solo il
      logo) tiene la riga esattamente com'era, senza colonna vuota. */

/* ── la home: la riga del programma ─────────────────────────────────────── */
/* ⚠️ MISURATO, non stimato. Con la miniatura infilata nella griglia originale
   (96px 1fr 150px 120px auto, gap 20) la colonna del titolo perdeva 104 px e
   «Il Moscato di Terracina, tre calici» andava su QUATTRO righe — visto in
   `sito-design/scatti-giroC/C7-righe-evento-home-1440.png`, prima versione.
   Le colonne fisse sono state strette e il gap portato a 16: il titolo perde
   48 px invece di 104, e nessun titolo degli otto va oltre due righe. */
.riga-ev:has(.riga-ev__f){
  grid-template-columns: 72px 74px 1fr 128px 96px auto; gap: 12px;
}
.riga-ev__f{
  /* r0310b, 03/10/2026 · `contain`: la locandina dell'evento si vede intera anche piccola
     (Andrea: «in home piccola»), dentro il riquadro di sempre, sul fondo chiaro qui sotto. */
  width: 72px; height: 54px; object-fit: contain; display: block;
  /* `design-dna` rifinitura n.5: senza il filo, il bordo della foto si scioglie
     nel fondo di carta. Nero trasparente, mai tinto col colore del marchio. */
  outline: 1px solid rgba(0,0,0,.10); outline-offset: -1px;
  background: #EFE7DE;              /* mentre la foto arriva, non un buco     */
}
@media (max-width: 820px){
  /* a 390 la riga si ripiega in tre righe: la foto prende la prima colonna e
     resta ALTA QUANTO IL BLOCCO, così non si accavalla al testo (il difetto
     che si vede solo a finestra stretta). */
  .riga-ev:has(.riga-ev__f){
    grid-template-columns: 60px 74px 1fr;
    grid-template-areas: "f d t" "f d m" "f d b";
    align-items: start;
  }
  .riga-ev:has(.riga-ev__f) .riga-ev__f{ grid-area: f; width: 60px; height: 60px; }
  .riga-ev:has(.riga-ev__f) .riga-ev__d{ grid-area: d; }
  .riga-ev:has(.riga-ev__f) .riga-ev__t{ grid-area: t; }
  .riga-ev:has(.riga-ev__f) .riga-ev__m{ grid-area: m; }
  .riga-ev:has(.riga-ev__f) .riga-ev__m + .riga-ev__m{ display: none; }
  .riga-ev:has(.riga-ev__f) .btn{ grid-area: b; justify-self: start; margin-top: 6px; }
}

/* ── /calendario: la miniatura dentro la cella «Evento» ─────────────────── */
.turni .cella-evento{
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.miniatura-evento{
  /* r0310b, 03/10/2026 · `contain`: locandina intera nel riquadro di sempre (bande sul fondo chiaro). */
  width: 84px; height: 56px; object-fit: contain; display: block; flex: 0 0 auto;
  outline: 1px solid rgba(0,0,0,.10); outline-offset: -1px; background: #EFE7DE;
}
@media (max-width: 820px){
  .miniatura-evento{ width: 60px; height: 60px; }
}


/* ==========================================================================
   C9-bis · I COMANDI DELLO ZOOM SONO <button>, NON PIÙ <a href="#">
   ==========================================================================
   Il perché sta in `pubblico/mappa-insieme.js`: il cancello segnalava
   «🔴 Link vuoti — "+" → # · "−" → #», e un collegamento che non porta da
   nessuna parte è la regola n.1 della sua lista.
   Le regole del giro B sono scritte per `a`, quindi qui si ripetono per
   `button` — stesse misure, stesso colore, stessa specificità alta (il foglio
   di Leaflet si carica NEL CORPO e vince i pareggi). */
.mappa__osm .leaflet-control-zoom button.leaflet-control-zoom-in,
.mappa__osm .leaflet-control-zoom button.leaflet-control-zoom-out{
  display: block; width: 44px; height: 44px; line-height: 44px;
  font: 400 20px/44px "Montserrat", sans-serif; text-align: center;
  padding: 0; margin: 0; border: 0; cursor: pointer;
  background: #fff; color: #46220F;
}
/* ⚠️ Lo stesso agguato del giro B: `.campo--mora span:not(.tag):not(.card__eti)`
   di `gastronomica.css` è (0,3,1) e dipinge di BIANCO ogni <span> dentro la
   sezione #mappa — compreso il «+» che sta nello <span> dentro il bottone.
   Qui si sale a quattro classi, così non è un pareggio deciso dall'ordine. */
.mappa__osm .leaflet-control-container .leaflet-bar.leaflet-control-zoom button span{
  color: #46220F;
}
.mappa__osm .leaflet-control-zoom button + button{ border-top: 1px solid #ccc; }
.mappa__osm .leaflet-control-zoom button[disabled]{ color: #bbb; cursor: default; }
.mappa__osm .leaflet-control-container .leaflet-bar.leaflet-control-zoom button[disabled] span{
  color: #bbb;
}
@media (hover: hover) and (pointer: fine){
  .mappa__osm .leaflet-control-zoom button:not([disabled]):hover{ background: #f4f4f4; }
}

/* ═══ correzioni-giroD-04-09.css ═══ */
/* ============================================================================
   GIRO D — 04/09/2026 — R02.  LE REGOLE NUOVE DI QUESTO GIRO.
   Si carica PER ULTIMO, dopo il foglio del giro C.
   ⛔ I fogli del R01 non si toccano: una modifica dentro di essi sparirebbe
      alla prossima consegna senza che nessuno se ne accorga.

   Contiene solo cose NATE nel giro D:
     D1 · la pagina di un Grano (/grani/<slug>).
   D2 e D3 non hanno CSS: sono una voce di menu che sparisce e delle meta.
   ========================================================================= */


/* ==========================================================================
   D1 · LA PAGINA DI UN GRANO
   ==========================================================================
   Ordine di Costantino delle 15:07: «pagina a parte per ogni grano».
   La pagina esce da `pagina()` di server.mjs, quindi ha già la testata, il piè
   e la tavolozza 2 delle altre pagine del percorso: qui si aggiunge SOLO
   quello che prima non esisteva.

   Le tre regole che il mandato chiede, e dove stanno:
     · larghezza di lettura ≤ 70 caratteri → `.testo-cliente` (68ch, giro C)
       vale già per l'articolo, che porta quella classe;
     · testo ≥ 16 px → il corpo delle pagine funzionali è 16px/1.5 e qui non
       si rimpicciolisce niente: sotto c'è solo un `18px` (più grande);
     · Montserrat sui titoli → arriva dai fogli del R01 già caricati; qui non
       si dichiara nessuna famiglia, così non si può divergere.
   ========================================================================= */

/* le briciole: da un Grano si torna a I Grani.
   ⚠️ Il collegamento è alto 44 px, non 15: è la regola di Costantino del
      04/09 (ogni bersaglio ≥ 40 px su telefono, lo standard di casa è 44).
      `strumenti/misura-390.mjs` misura il rettangolo dell'<a>, quindi il
      padding va sul link e non sul contenitore. */
.briciole{ margin: 0 0 8px; color: var(--tenue, #8A5A46); font-size: 14px; }
.briciole a{
  display: inline-flex; align-items: center; min-height: 44px;
  padding-right: 6px; color: var(--vino, #C4400F);
}

.grano{ }
.grano > h1{ margin-bottom: 6px; }
/* il micro-racconto è la riga che il cliente ha scritto sotto il nome */
.grano > .sottotitolo{ max-width: 62ch; }

/* la copertina, quando c'è. Il bordo evita che la foto si sciolga nel fondo
   (design-dna, rifinitura n.5): nero trasparente, mai tinto col colore del
   marchio. */
.grano__figura{ margin: 20px 0 24px; }
.grano__copertina{
  display: block; width: 100%; height: auto; border-radius: 10px;
  outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px;
}
.grano__figura figcaption{
  margin-top: 8px; font-size: 14px; color: var(--tenue, #8A5A46); max-width: 68ch;
}

/* la scheda: etichetta e valore. Una riga per campo VALORIZZATO — le righe
   vuote non arrivano fin qui, le toglie `paginaGrano()` in server.mjs. */
.grano__scheda{
  margin: 0 0 28px; padding: 16px 18px;
  background: var(--carta-calda, #FFEDE1);
  border-radius: 10px; max-width: 68ch;
}
.grano__riga{ display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; }
.grano__riga + .grano__riga{ border-top: 1px solid rgba(0,0,0,.08); }
.grano__scheda dt{
  flex: 0 0 150px; font-weight: 700; color: var(--inchiostro, #603A22);
}
.grano__scheda dd{ flex: 1 1 220px; margin: 0; line-height: 1.6; }

/* l'articolo del cliente: stesse misure del testo di «Diventa partner», che
   è già in esercizio dal giro C. Le due pagine devono leggersi uguali. */
.grano__articolo h2{ margin: 34px 0 12px; }
.grano__articolo h3{ margin: 26px 0 10px; font-size: 18px; }
.grano__articolo p{ margin: 0 0 16px; line-height: 1.6; text-wrap: pretty; }
.grano__articolo ul{ margin: 0 0 18px; padding-left: 22px; }
.grano__articolo li{ margin: 0 0 8px; line-height: 1.6; }

/* a 390 l'etichetta va sopra il valore invece che accanto: 150 px fissi su uno
   schermo da 390 lasciano al valore una colonna di 8 parole spezzate. */
@media (max-width: 620px){
  .grano__scheda dt{ flex: 1 1 100%; }
}


/* ==========================================================================
   D4a · LE DICITURE CHE SCOMPAIONO
   ==========================================================================
   Ordine di Costantino (15:48): «Ci sono diciture dello stesso colore in fondo
   alla pagina che scompaiono a causa della stessa tonalità».
   MISURATO, non dedotto: `strumenti/prova-contrasto-scomparse.mjs` chiede al
   browser il colore DIPINTO e il fondo DIPINTO SOTTO (nascondendo l'elemento e
   guardando chi sta dietro). Esito col difetto: 124 casi sotto 3:1, di cui
   **112 sono i collegamenti del piè di pagina**.
   ========================================================================= */

/* 🔴 IL DIFETTO PIU' GRAVE: i 16 collegamenti del piè, INVISIBILI su tutte e
   sette le pagine costruite da `pagina()` (elenco eventi, calendario,
   passaporto, diventa partner, scheda evento, e le due nuove dei Grani).
   Misurato: colore #C4400F su fondo #C2261B = **1,14:1**.
   DA DOVE VIENE: il piè è quello della home (giro B), ma queste pagine
   portano anche il <style> in linea di `server.mjs`, che ha `a{color:var(--vino)}`.
   Sulla home quella regola non esiste e i link ereditano il bianco del piè;
   qui vince lei, perché nel foglio del sito `.pie a` fissa solo la
   decorazione, non il colore.
   ⚠️ `:not(.btn)`: dentro il piè c'è anche il bottone della newsletter, che ha
      il suo colore d'azione e non va toccato. */
footer.pie a:not(.btn){ color: #fff; }
footer.pie a:not(.btn):hover{ color: #fff; text-decoration: underline; }

/* il titolo del blocco newsletter sulla banda blu: #C4400F su #2C6C9C = 1,1:1,
   cioè un titolo che non si legge. Sulla home è bianco; sulle pagine interne la
   tavolozza 2 lo riporta al colore dei titoli e sparisce. */
section.newsletter.scura .newsletter__dice .t-blocco,
section.newsletter.scura .newsletter__dice .occhiello{ color: #fff; }


/* ==========================================================================
   D4b · LA BARRA DEI FILTRI SOTTO LA LOCANDINA (home, #calendario)
   ==========================================================================
   IL DIFETTO, nello scatto di Costantino e nella misura: i due <select> sono
   impilati dentro un riquadro bianco che non li contiene — il riquadro resta
   mezzo vuoto a destra. La causa: `correzioni-03-09.css` (foglio del R01)
   veste `.filtri` come una SCHEDA (`background:#FFFFFF`, bordo, raggio) perché
   sulle pagine del percorso `.filtri` è un <form> vero; in home invece è una
   riga di due tendine, e la scheda le sta larga.
   ⛔ Il foglio del R01 non si tocca: la correzione sta qui e vale solo per la
      barra della home, non per i moduli filtro delle altre pagine.
   Ordine: «i select stanno DENTRO il riquadro, in riga a 1440 e impilati a
   390, con lo stesso vestito degli altri campi». */
#calendario .locandina .filtri{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px; margin-top: 18px; align-items: stretch;
}
#calendario .locandina .filtri select{
  width: 100%; min-width: 0; max-width: 100%;
  background: #FFFFFF;          /* il riempimento pesca faceva 1,05:1 sul
                                   riquadro bianco: il campo non aveva sagoma */
  /* ⚠️ VISTO NELLO SCATTO: messe in riga, le due tendine leggevano
     «TUTTI I PROG…» e «TUTTI I COM…». Una tendina che tronca la propria voce
     non si può usare. La colonna della locandina è larga ~408 px: con 13px,
     .06em di crenatura e 14px di respiro per lato non ci stanno. Si stringono
     il respiro e la crenatura SOLO QUI (non nei filtri delle altre pagine, che
     hanno tutta la larghezza) e la parola torna intera.
     ⛔ Non si accorcia il testo delle opzioni: quello è copy. */
}
/* ⚠️ IL RESTRINGIMENTO VALE SOLO DOVE LE DUE TENDINE STANNO IN RIGA.
   Applicato ovunque, portava i due campi a 12 px anche a 390 — e sotto i 16 px
   un campo fa ingrandire la pagina da solo su iPhone (`misura-390.mjs` lo
   conta, ed è andato rosso: «campi<16px 2»). A 390 le tendine sono impilate e
   hanno tutta la larghezza: lì restano a 16 px. */
@media (min-width: 901px){
  #calendario .locandina .filtri select{
    padding: 0 8px; letter-spacing: .015em; font-size: 12px;
  }
}
/* a schermo stretto le due tendine si impilano: due colonne da 165 px con
   un'etichetta come «TUTTI I PROGETTI» tagliano la parola. */
@media (max-width: 900px){
  #calendario .locandina .filtri{ grid-template-columns: 1fr; }
}


/* ==========================================================================
   D5 · LA SCHEDA GRANDE DEL CALENDARIO PORTA LA FOTO DELL'EVENTO
   ==========================================================================
   «Le immagini piccole del calendario non si coordinano con l'immagine
   grande»: l'elenco a destra ha le miniature, la scheda a sinistra aveva un
   fondo a righe e nessuna fotografia. Adesso `gastronomica.js` le mette la
   copertina dell'evento selezionato; qui c'è solo il modo di mostrarla.
   ⚠️ Il velo scuro sopra la foto ESISTE GIA' (`.locandina__q::after`, gradiente
      fisso): il testo bianco non dipende dalla foto che ci finisce sotto. */
.locandina__sfondo--foto{
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  background-image: none;      /* la mette il JS con l'indirizzo del file */
}


/* ==========================================================================
   D6 · LA MAPPA E IL RIQUADRO «I COMUNI»
   ==========================================================================
   Ordine: «la grandezza delle due finestre devono essere leggermente più
   grandi» (+15-20%), stessa altezza fra le due. */
/* ⚠️ IL PRIMO TENTATIVO ANDAVA NEL VERSO SBAGLIATO, e l'ho visto dallo scatto,
   non dal codice: avevo scritto 16/9 pensando «più grande», ma un rapporto più
   ALTO fa il riquadro più BASSO (h = larghezza / rapporto). Misurato: da 452 px
   a 414. Il verso giusto è un rapporto più PICCOLO di 16/10.
   Numeri veri a 1440: la colonna della mappa è larga ~736 px, quindi
   736 / 1.39 = 529 px, cioè **+17%** sui 452 di prima — dentro il «15-20%»
   chiesto. `align-items:stretch` (già nel foglio del sito) tiene «I comuni»
   alla stessa altezza. */
.mappa{ grid-template-columns: 1.62fr 1fr; gap: 2px; }
.mappa__quadro{ aspect-ratio: 1.39; }
.mappa__lato{ padding: 32px 30px; }
@media (max-width: 900px){
  .mappa__quadro{ aspect-ratio: auto; min-height: 360px; }
}

/* (3) VIA IL BLOCCO NERO. La fascia «11 locali sulla mappa» era una banda
   `--brace` larga quanto tutta la mappa: a destra del testo restava un
   rettangolo scuro vuoto, che è il «blocco nero» dello scatto — e il nero
   nella tavolozza non ci va (regola dei colori, 03/09).
   Diventa una pillola larga quanto il suo testo, nel rosso del marchio. */
.mappa__quadro:has(.mappa__osm) .mappa__nota{
  left: 12px; right: auto; bottom: 12px;
  width: fit-content; max-width: calc(100% - 24px);
  background: var(--melagrana, #C2261B);   /* bianco sopra: 5,85:1 */
  color: #fff;
  border-radius: 999px; padding: 10px 16px;
}

/* (2) I COMANDI + E − : niente aspetto di serie, niente evidenziazione blu.
   ⚠️ `appearance:none` toglie il vestito del sistema operativo, che è quello
      che dà al <button> il fondo grigio-azzurro e l'anello di messa a fuoco
      blu — cioè l'aria di «già selezionato» vista nello scatto.
   L'anello di fuoco NON si toglie: si rifà a due cerchi concentrici, come
   prescrive design-dna, così si vede sia sul chiaro sia sullo scuro. */
.mappa__osm .leaflet-control-container .leaflet-bar.leaflet-control-zoom button{
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 44px; padding: 0; border: 0; margin: 0;
  background: #FFFFFF; color: #46220F;
  font: 700 20px/44px "Montserrat", sans-serif;
  box-shadow: none; border-radius: 0; cursor: pointer;
}
.mappa__osm .leaflet-control-container .leaflet-bar.leaflet-control-zoom button:focus{
  outline: none;
}
.mappa__osm .leaflet-control-container .leaflet-bar.leaflet-control-zoom button:focus-visible{
  outline: 3px solid var(--azione, #FFE500); outline-offset: -3px;
  box-shadow: inset 0 0 0 6px #46220F;
}
/* la scatola dei due comandi: il bordo di serie di Leaflet è un grigio
   trasparente; qui prende il filetto della tavolozza. */
.mappa__osm .leaflet-control-container .leaflet-bar.leaflet-control-zoom{
  border: 1px solid rgba(70,34,15,.28); border-radius: 4px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(70,34,15,.22);
}


/* ==========================================================================
   D7 · LA GALLERIA «Le foto del festival»
   ==========================================================================
   Dato dell'architetto dati (04/09): le fotografie VERE del festival in
   libreria sono **2**, tutte e due ORIZZONTALI (1080×668 e 1080×656), edizione
   2025; in 202 file del cliente non ce ne sono altre.
   IL DIFETTO: i riquadri erano `.foto--1x1` (quadrati) in una griglia a 4
   colonne fissa → due foto orizzontali tagliate ai lati (nel primo scatto
   sparivano le persone alle estremità) e due caselle vuote.
   ⚠️ Il formato dei riquadri lo decide il NUMERO e il FORMATO delle foto, non
      una griglia fissa: la classe la sceglie `vestito.mjs`. */
.galleria--sola{ grid-template-columns: minmax(0, 560px); }
/* con due foto orizzontali: due riquadri 3:2 affiancati, impilati da telefono */
.galleria--coppia{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px){ .galleria--coppia{ grid-template-columns: 1fr; } }
/* il riquadro segue il formato del file, non il contrario: 3:2 per le
   orizzontali. `object-fit: cover` con un rapporto vicino a quello vero taglia
   pochi pixel, quindi nessuno perde la testa ai bordi (1080×668 = 1,62; 3:2 =
   1,5 → si toglie il 7% della larghezza, 3,5% per lato). */
.galleria .foto--3x2{ aspect-ratio: 3 / 2; }
.galleria .foto--3x2 img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* la scheda del Grano è una superficie chiara su carta bianca: senza un filo
   non ha sagoma (design-dna, rifinitura n.5). Filo neutro, mai tinto col
   colore del marchio. */
.grano__scheda{ border: 1px solid rgba(70,34,15,.12); }


/* ==========================================================================
   D5b · A 390 LA SCHEDA GRANDE PERDEVA TITOLO, LUOGO E CONTATORE
   ==========================================================================
   🔴 TROVATO DALLA MISURA, non dall'occhio: `prova-contrasto-scomparse.mjs` a
   390 dava «p.locandina__t bianco su bianco (misurato sui PIXEL)» per «Mani in
   pasta» e per «Terracina · Sala civica». Non era un problema di colore: quelle
   righe erano **fuori dal riquadro**, tagliate da `overflow:hidden`, e i pixel
   che si misuravano erano quelli del riquadro dei filtri sotto.
   LA CAUSA: sotto i 1100 px il foglio del sito impone `aspect-ratio:16/9` alla
   scheda. Un rapporto fisso decide l'altezza PRIMA di sapere quanto testo c'è:
   con un titolo su tre righe il contenuto non ci sta e viene tagliato.
   ⚠️ NON è un difetto nato oggi: c'era già prima del giro D. La foto (D5) l'ha
      solo reso evidente, perché adesso sotto c'è un'immagine e non una tinta.
   LA RIPARAZIONE: sotto i 1100 px l'altezza la decide il CONTENUTO, con un
   minimo che tiene la proporzione di prima quando il testo è corto. */
@media (max-width: 1100px){
  .locandina__q{ aspect-ratio: auto; min-height: 56vw; }
}

/* il riquadro dei filtri, misurato a 390: bianco su carta pesca fa 1,12:1 e il
   filo di serie 1,18 — sotto la soglia dei filetti di casa (1,2). Un filo
   appena più deciso, sempre neutro e mai tinto col colore del marchio. */
#calendario .locandina .filtri{ border: 1px solid rgba(70,34,15,.16); }

/* ═══ correzioni-giroE-04-09.css ═══ */
/* ══════════════════════════════════════════════════════════════════════════
   GASTRONOMICA — CORREZIONI DEL GIRO E, 04/09/2026 (R02, ingegnere capo)
   Caricato PER ULTIMO di tutti, dopo il foglio del giro D.
   Ogni blocco porta l'ordine di Costantino che lo ha generato e la misura.
   ══════════════════════════════════════════════════════════════════════════ */


/* ==========================================================================
   E1b · A 390 LA SCHEDA GRANDE CAMBIAVA ALTEZZA A OGNI EVENTO
   ==========================================================================
   Ordine di Costantino (17:16) su E1: l'anteprima al passaggio del mouse
   «senza salti di layout». La prova `prova-preview-calendario.mjs` l'ha
   trovato subito, e NON e' un difetto nato oggi: c'era gia' con lo scroll.
   MISURATO a 390 su tutti e 8 gli eventi in home (CDP, 04/09 ore 17:50):
     altezza della scheda  min 295 px  max 347 px  → salto di 52 px
     `.locandina__basso`   min 115 px  max 166 px
     titolo 24 / 48 / 72 px (1, 2, 3 righe) · etichette 21 / 48 px (1 o 2)
   A 1440 il salto non esiste (480 px fissi: `aspect-ratio:3/4`). Sotto i
   1100 px l'altezza la decide il contenuto — e' la riparazione D5b del giro
   D, e va tenuta, perche' un rapporto fisso tagliava il titolo.
   ⚠️ Non e' un dettaglio estetico: a 390 la locandina sta SOPRA le righe
      (`position:static`), quindi se cresce sposta sotto il dito la riga che
      si sta toccando.
   LA RIPARAZIONE: si RISERVA lo spazio del blocco basso al suo massimo, e si
   incolla il testo in fondo. Lo spazio riservato in piu' resta sopra il
   titolo, cioe' sulla foto: non si vede.
   190 px = 3 righe di titolo (3 x 1,15 x 21 = 72) + 8 di margine + 2 righe di
   etichette (48) + luogo (18 + 12) + contatore (12 + 16) ≈ 186, arrotondato.
   ⚠️ LIMITE DICHIARATO: un titolo su QUATTRO righe tornerebbe a spostare la
      scheda. Il piu' lungo dei 29 eventi di oggi ne occupa tre. */
@media (max-width: 1100px){
  #calendario .locandina__basso{
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 190px;
  }
}


/* ==========================================================================
   E2 · LA RIGA «SOCIAL» NELLA SCHEDA DEL LOCALE
   ==========================================================================
   Ordini di Costantino (16:23 e 16:26): «un pulsante per i social in un unico
   campo» · «vai così, una riga social con le icone».
   La riga è una cella della griglia `.contatti` come le altre — stesso fondo
   bianco, stesso filetto — così non è un blocco estraneo appiccicato sotto.
   Colori: SOLO tavolozza 2 delle pagine interne, e niente nero:
     icona a riposo  --inchiostro  #603A22   su bianco   9,88:1
     fondo del tasto --carta-calda #FFEDE1
     filo            --riga        #F0DCCC
     al passaggio    --vino        #C4400F   icona bianca 5,14:1
   ⚠️ Il passaggio del mouse sta dentro `@media (hover:hover) and (pointer:fine)`:
      su touch il :hover si appiccica al primo tocco e non se ne va più. */
.social-locale{ grid-column: 1 / -1; }
.social-locale__b{
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0;
}
.social-locale__b a{
  display: inline-flex; align-items: center; justify-content: center;
  /* 44x44 è lo standard di collaudo di casa; il minimo assoluto dettato da
     Costantino l'11:38 del 04/09 è 40, e 44 lo comprende. */
  min-width: 44px; min-height: 44px; width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--carta-calda, #FFEDE1);
  border: 1px solid var(--riga, #F0DCCC);
  color: var(--inchiostro, #603A22);
  text-decoration: none;
  transition-property: background-color, color, border-color;
  transition-duration: .18s;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}
.social-locale__b a svg{ display: block; }
@media (hover: hover) and (pointer: fine){
  .social-locale__b a:hover{
    background: var(--vino, #C4400F);
    border-color: var(--vino, #C4400F);
    color: #FFFFFF;
  }
}
.social-locale__b a:focus-visible{
  outline: 3px solid var(--azione, #FFE500);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--inchiostro, #603A22);
}


/* ==========================================================================
   E7 · LA MAPPA E IL RIQUADRO «I COMUNI» ANCORA PIÙ GRANDI (+25%)
   ==========================================================================
   Ordine di Costantino (17:27, con schermata): «ingrandiscimi del 20-30 % in
   più questi due banner» — cioè OLTRE il +17% del giro D.

   MISURATO VIA CDP il 04/09 alle 19:58, PRIMA di toccare:
     1440 → mappa 736×529 · «I comuni» 454×529 · griglia larga 1192
      390 → mappa 104×376 · «I comuni» 236×376
     La griglia della mappa è larga 1192 px, ESATTAMENTE come il resto del
     contenuto della pagina (124…1316): ai margini ci arrivava già.

   (1) L'ALTEZZA. La larghezza è ferma ai margini, quindi il +25% lo fa
   l'altezza: 529 × 1,25 = 662 px. Con la colonna larga 736, il rapporto è
   736 / 662 = 1,112 → si scrive 1.11 (→ 663 px misurati).

   (2) 🔴 E UN DIFETTO VERO, trovato dalla misura e non dall'occhio: a 390 la
   mappa era larga **104 px**, una scheggia. `gastronomica.css` riga 1063
   manda `.mappa` a UNA colonna sotto i 900 px, ma il foglio del giro D
   riscriveva `.mappa{grid-template-columns:1.62fr 1fr}` SENZA media query e
   viene caricato dopo: a parità di specificità vince chi viene dopo, quindi
   sul telefono le due colonne restavano affiancate. È la stessa trappola del
   giro B col bottone «Menu». Qui la colonna singola si rimette, e stavolta
   dentro la sua media query. */
@media (min-width: 901px){
  .mappa__quadro{ aspect-ratio: 1.11; }
}
@media (max-width: 900px){
  .mappa{ grid-template-columns: 1fr; }
  .mappa__quadro{ aspect-ratio: auto; min-height: 420px; }
}


/* ==========================================================================
   E8 · VIA I RIQUADRI DIETRO ALLE TENDINE, SU TUTTE LE ROTTE
   ==========================================================================
   Ordine di Costantino (17:27, due schermate): «ci sono questi bordi qui, come
   li ho trovati in home, devono sparire anche in altre parti del sito».

   I DUE CASI, misurati via CDP a 1440 il 04/09 alle 20:20:
     home        → `div.filtri`  fondo #FFFFFF  largo 360 e 1192 px  su banda pesca #FFEFE4
     /calendario → `form.filtri` fondo #FFEDE1  largo 1116 px        su banda bianca #FFFFFF
   In tutti e due i casi il contenitore è più largo di quello che contiene:
   a /calendario resta la fascia vuota a destra dei campi.

   DA DOVE VENIVA. Due fogli diversi, tutti e due caricati dopo:
     · `correzioni-03-09.css` riga 256 veste `.filtri` come una SCHEDA
       (`background:#FFFFFF`, bordo, raggio) insieme a `.scheda` e `.turni`;
     · `correzioni-prenotazione-04-09.css` riga 327 le dà `--carta-calda` + bordo
       + raggio + 20px di respiro sulle pagine del percorso.
   ⛔ Nessuno dei due fogli si tocca: si spegne solo il contenitore, qui.

   COSA RESTA: le tendine stanno direttamente sulla banda **col loro bordo
   scuro**, che è quello che dà loro la sagoma (`gastronomica.css` riga 506).
   Il respiro verticale non si toglie: senza, i campi si incollano al testo. */
.filtri,
form.filtri,
#calendario .locandina .filtri{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
/* il respiro sopra/sotto resta, ma diventa margine e non riempimento del
   riquadro che non c'è più */
form.filtri{ padding-top: 0; padding-bottom: 0; margin-bottom: 24px; }
#calendario .locandina .filtri{ padding-top: 0; padding-bottom: 0; }

/* ═══ §F2 — 04/09/2026 sera, ordine di Costantino delle 21:00 con due scatti:
   «ci sono questi tagli che non mi piacciono, li vedi quei tagli a destra?»
   Lo slider «8 scatti che scorrono» aveva colonne larghe min(62vw, 720px) con
   2 px di distanza: la pista (tutta la larghezza dello schermo) non è mai un
   multiplo della colonna, e sul bordo destro spunta una fetta della foto dopo
   (sul suo Air a 1470 px: 26 px della terza foto; a 390: 52 px della seconda).
   Regola nuova: nella pista si vedono SOLO foto intere. La colonna divide
   esattamente la pista: 2 per schermata a desktop, 3 dai 1600 px in su, 1 a
   telefono. Le frecce e l'aggancio (scroll-snap) non cambiano: si sposta
   sempre di una foto, e ogni posizione mostra foto intere.
   Prova: node strumenti/prova-scatti-interi.mjs (1440, 1470, 390). */
.scatti__pista{ grid-auto-columns: calc((100% - 2px) / 2); }
@media (min-width:1600px){ .scatti__pista{ grid-auto-columns: calc((100% - 4px) / 3); } }
@media (max-width:820px){ .scatti__pista{ grid-auto-columns: 100%; } }

/* ═══ §F1 — 04/09/2026 sera, ordine di Costantino delle 21:15: sotto i due
   riquadri della testata vanno le tre righe di Andrea (Google Chat, 17:24),
   scritte da lui in MAIUSCOLO. Il sorgente le tiene in minuscolo coi nomi del
   glossario, il maiuscolo lo fa questa regola. Stesso carattere dei riquadri
   sopra (Montserrat), corpo del paragrafo di prima (18 px), a capo con <br>:
   la riga lunga può andare su due righe a telefono, mai tagliata.
   Prova: node strumenti/prova-testata-andrea.mjs */
.hero__sub--andrea{
  max-width: none;
  font: 800 18px/1.5 "Montserrat", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(11,2,4,.6);
}
@media (max-width:620px){ .hero__sub--andrea{ font-size: 15px; letter-spacing: .06em; } }

/* §F1b — 21:30, «monta anche il bottone e la riga delle 17:21»: la riga di
   Andrea sotto i due bottoni. Corpo piccolo, bianco, leggibile sul video. */
.hero__nota{
  max-width: 62ch;
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 8px rgba(11,2,4,.6);
}
/* A telefono la testata è alta fissa 78vh con overflow nascosto e il contenuto
   sta in basso: con la riga in più i riquadri uscivano dal bordo alto di 49 px
   (misurato: riquadri top 141, testata top 190). Sul telefono la testata resta
   ALMENO 78vh e cresce se il contenuto lo chiede: niente tagliato, niente nascosto. */
@media (max-width:620px){ .hero{ height: auto; min-height: 78vh; } }
/* …e un respiro sopra i riquadri, che con la testata cresciuta toccavano il bordo. */
@media (max-width:620px){ .hero__in{ padding-top: 36px; } }

/* ═══ §G2 — 04/09/2026 sera, ordine di Costantino delle 21:42 con lo scatto della
   scheda di un locale: «quelle linee devono sparire dappertutto». Le linee sono
   i bordi da 1 px color «riga» (e il suo gemello --bordo nelle pagine del
   percorso) disegnati attorno alle CELLE e alle RIGHE di contenuto: griglia dei
   contatti, griglia degli orari, la scheda del locale, la griglia «tre» di
   chi-siamo, gli elenchi puntati (manifesto, produttori, news, comuni, servizi,
   eventi in home), la scheda dei Grani, le tabelle dei turni, le schede evento,
   i pannelli e i moduli del percorso. Misurato con strumenti/censimento-linee.mjs
   su 18 rotte: 710 elementi PRIMA. Le celle restano bianche, si separano con lo
   spazio, non con la riga.
   RESTANO (voluti, sono un'altra cosa): la riga sotto la testata appiccicata,
   il bordo del menu a tendina e del menu a telefono, i campi dei moduli
   (input/select/textarea), i bottoni, il codice QR del biglietto, la riga del
   totale nel conto, i comandi della mappa, le righe chiare del piè. */

/* pagine del design (fogli dentro le pagine, stessa specificità: vince chi viene dopo) */
.briciola{ border-bottom: 0; }
.tre{ border-top: 0; border-left: 0; }
.tre > div{ border-right: 0; border-bottom: 0; }
.punti li{ border-top: 0; }
.punti li:last-child{ border-bottom: 0; }
.citta{ border: 0; }
.elenco-att{ border-top: 0; }
.riga-att{ border-bottom: 0; }
.contatti{ border-top: 0; border-left: 0; }
.contatti > div{ border-right: 0; border-bottom: 0; }
.orari{ border-top: 0; border-left: 0; }
.orari > div{ border-right: 0; border-bottom: 0; }
.scheda, .vista .scheda, .vista--locale .scheda{ border: 0; }
.plista li{ border-top: 0; }
.plista li:last-child{ border-bottom: 0; }
.news-a{ border-top: 0; }
.news-a:last-child{ border-bottom: 0; }

/* gastronomica.css */
.apertura__numeri{ border-top: 0; }
.riga-ev{ border-top: 0; }
.riga-ev:last-child{ border-bottom: 0; }
.elenco-secco li{ border-top: 0; }
.elenco-secco li:last-child{ border-bottom: 0; }
.dati{ border-top: 0; }
.dati div{ border-right: 0; border-bottom: 0; }
.elenco-righe li{ border-top: 0; }
.elenco-righe li:last-child{ border-bottom: 0; }
.mappa__comuni li{ border-top: 0; }
.mappa__comuni li:last-child{ border-bottom: 0; }
.elenco-servizio li{ border-top: 0; }
.elenco-servizio li:last-child{ border-bottom: 0; }
.faq{ border-top: 0; }
.faq__v{ border-bottom: 0; }

/* pagine del percorso e dei Grani (fogli dentro server.mjs) */
.grano__riga + .grano__riga{ border-top: 0; }
.grano__scheda{ border: 0; }
table.turni{ border: 0; }
table.turni th{ border-bottom: 0; }
table.turni td{ border-bottom: 0; padding-top: 15px; padding-bottom: 15px; }
table.turni tr{ border: 0; }
.filtri{ border: 0; }
.numeri div{ border: 0; }
.pannello-chiaro{ border: 0; }
.riepilogo{ border: 0; }
.modulo-dati{ border: 0; }
/* ⛔ IL BIGLIETTO È L'ECCEZIONE DI QUESTO BLOCCO, e va lasciata scritta.
   Fino al 07/09/2026 qui c'era `.biglietto{ border: 0 }`. Non funzionava a
   metà: azzerava i tre lati scritti su UNA classe (riga 470), ma NON il
   `border-top` colorato, che sta su DUE classi — `.biglietto.stato-attesa`,
   `.stato-ok`, `.stato-no` (righe 478-483) — e quindi ha specificità più alta.
   Risultato visto nelle schermate del giro WP10-D: una scheda senza lati né
   fondo, con un archetto brunito sospeso in aria. Misurato in stile calcolato:
   alto/destra/basso/sinistra = 6/0/0/0 px, a 1440 e a 390.
   Il biglietto NON è una cella di griglia come le altre righe di questo blocco
   (che si separano con lo spazio): è una scheda isolata al centro della pagina
   e la cornice è quello che la fa leggere come un biglietto. Il filetto in alto
   resta il primo dei due segnali di stato (l'altro è l'occhiello, riga 476).
   Prova che lo tiene: node strumenti/prova-biglietto-e-suggerimenti.mjs (A). */
.apri-form{ border: 0; }
.apri-form .filtri{ border-top: 0; }

/* ═══ §H1 — 04/09/2026 sera, ordine di Costantino delle 22:00 con scatto da Safari:
   «questi li voglio più grandi» (la mappa OpenStreetMap e «I comuni» in home).
   Nel suo Safari la mappa era 445×400 e STACCATA dal riquadro: l'altezza della
   riga veniva dall'aspect-ratio del quadro (E7, sopra), e Safari, con
   align-items:stretch, risolve prima l'altezza dal riquadro accanto e poi
   ricava la larghezza dal rapporto → mappa piccola, vuoto in mezzo. Chrome
   faceva il contrario (736×663). Regola nuova, uguale per tutti i browser:
   altezza SCRITTA della riga (760 px, era 663: +15%), contenitore della
   sezione più largo (1480 px, era 1240: la mappa passa da 736 a ~880 px a
   1470), niente aspect-ratio a desktop. A telefono (≤900) resta la colonna
   singola di E7. Prova: node strumenti/prova-mappa-grande-e-marchio.mjs */
/* 22:27, Costantino con scatto: «hai fatto la sezione troppo grande» → si torna alla
   misura che aveva approvato alle 17:27 (E7: 736×663 a 1440), che in Safari non
   aveva MAI visto per via del difetto sopra. Resta la meccanica robusta: altezza
   scritta, niente aspect-ratio, contenitore normale (1240). */
@media (min-width: 901px){
  .mappa{ grid-template-columns: 1.62fr 1fr; grid-auto-rows: 663px; align-items: stretch; }
  .mappa__quadro{ aspect-ratio: auto; height: 663px; min-height: 0; }
  .mappa__lato{ height: 663px; }
}

/* ═══ §H2 — 22:00, «qui perché vedo ancora linee di contorno?» (scatto del marchio in
   testata). Il PNG del marchio ha la trasparenza vera (57% dei pixel, misurato con
   PIL): il contorno era un outline da 1 px rgba(0,0,0,.1) dipinto attorno al
   riquadro dell'<img> nelle pagine del design. Via. */
.marchio img{ outline: 0; }

/* ═══ §G4 — 22:27, risposta 4 di Costantino: in «I comuni» l'ELENCO DEI LOCALI
   CLICCABILI (costruito da mappa-insieme.js dai segnaposti della mappa). Righe
   senza linee (G2), separate dallo spazio; a telefono alte 44 px. Il riquadro
   resta alto quanto la mappa (663): se un giorno i locali sulla mappa sono più
   di quelli che ci stanno, il riquadro scorre invece di tagliare. */
.mappa__lato{ overflow-y: auto; }
/* con 11 locali in una colonna il riquadro traboccava di 145 px (misurato):
   due colonne, corpo 14, e gli spazi di «I comuni» un filo più stretti. */
.mappa__comuni li{ padding: 8px 0; }
.mappa__comuni{ margin-bottom: 18px; }
.mappa__locali-t{ margin-top: 16px; }
.mappa__locali{ list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18px; }
.mappa__locali li{ margin: 0; padding: 0; break-inside: avoid; }
.mappa__locale{
  display: block; width: 100%; text-align: left;
  padding: 4px 0; border: 0; background: transparent; cursor: pointer;
  font: 700 14px/1.25 "Montserrat", system-ui, sans-serif; color: var(--inchiostro);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color var(--fast, .16s) ease;
}
.mappa__locale:hover, .mappa__locale:focus-visible{ text-decoration-color: var(--melagrana, currentColor); }
.mappa__locale[aria-current="true"]{ color: var(--melagrana); text-decoration-color: currentColor; }
@media (max-width: 900px){ .mappa__locali{ columns: 1; } .mappa__locale{ padding: 11px 0; min-height: 44px; font-size: 15px; } }

/* ═══ correzioni-giroH-05-09.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
 * GIRO H — 05/09/2026 · le correzioni misurate a 390 px NELLA GESTIONE.
 * Caricato per ultimo, dopo i fogli dei giri A–E: a parità di specificità
 * vince questo.
 *
 * Nasce da tre rilievi del R05 (VERDETTO-R05-05-09.md, punto 1), tutti
 * misurati con Playwright a 390 px dopo il login, non a occhio.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
 * 1 · GLI URL DEI PARTNER FACEVANO SBORDARE LA PAGINA DI 250 px.
 * Misura del R05: 9 `span.meta` con l'indirizzo del partner; il più largo,
 * `https://www.facebook.com/comitatogemellagiditerra…`, occupava **598 px
 * dentro una finestra da 390**, bordo destro a 640. Da telefono la vista
 * scorreva di lato.
 * `overflow-wrap:anywhere` e non `break-all`: `anywhere` spezza SOLO quando
 * serve e lascia le parole normali intere; `break-all` taglia anche l'italiano
 * in mezzo. Su `.meta` in generale, perché la stessa classe porta indirizzi,
 * email e link in tutte le viste, non solo in quella dei partner.
 * ───────────────────────────────────────────────────────────────────────── */
.meta,
.dubbio-riga,
table.turni td .meta{
  overflow-wrap: anywhere;
  word-break: normal;          /* esplicito: `anywhere` basta, non serve tagliare le parole */
  min-width: 0;                /* dentro un flex, senza questo il figlio non si stringe mai */
}
table.turni td{ max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────
 * 2 · I BOTTONI DELLA GESTIONE ERANO ALTI ESATTAMENTE 40 px.
 * `correzioni-dashboard-04-09.css:108` li porta a 40. Passano la soglia
 * dettata da Costantino il 04/09 (≥40) ma NON i 44 usati in tutto il resto
 * del progetto, che è la misura di collaudo di casa (`misura-390.mjs` conta i
 * bersagli sotto 44). Chi passa 44 passa anche 40: si allineano a 44 e la
 * gestione smette di essere l'eccezione.
 * ⚠️ Il selettore ripete `body:has(.testata.gestione)` perché è quello che usa
 *    il foglio da correggere: con una specificità più bassa non vincerebbe.
 * ───────────────────────────────────────────────────────────────────────── */
body:has(.testata.gestione) .bottone.piccolo{
  min-height: 44px;
  padding: 0 14px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 3 · «ESCI» ERA 39 px DI LARGO (su 8 viste su 8).
 * Un pixel sotto la soglia: la parola è corta e il link non aveva padding
 * orizzontale. Si allarga il bersaglio, non il testo.
 * Vale per tutti i link della testata della gestione, «Vedi il sito ↗»
 * compreso, così non si torna qui alla prossima voce di menu.
 * ───────────────────────────────────────────────────────────────────────── */
.testata.gestione nav.menu a{
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 4 · I TITOLI-LINK DENTRO LE TABELLE ERANO ALTI 18-19 px.
 * 13 su `/dashboard`, `?vista=eventi`, `?vista=locali`, `?vista=aspetto` e 4
 * su `?vista=prenotazioni`. NON sono link in mezzo a una frase: stanno da soli
 * nella riga dell'elenco, quindi l'esenzione WCAG 2.5.8 per il bersaglio «in
 * linea» non si applica e vanno portati a 44.
 * La regola che c'era stava dentro `@media (max-width:720px)` ed era coperta
 * dai fogli dei giri A–E: qui è senza media query, perché un bersaglio da 19
 * px è scomodo anche col mouse.
 * ───────────────────────────────────────────────────────────────────────── */
body:has(.testata.gestione) table.turni td a:not(.bottone),
body:has(.testata.gestione) .riga-partner a:not(.bottone){
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 5 · I MODULI DI MODIFICA NATI OGGI, a 390 px.
 * Un modulo da trenta campi dentro `.filtri` va in colonna da solo (la regola
 * `.filtri .campo{flex:1 1 100%}` del giro A), ma i due campi affiancati degli
 * orari (apre/chiude) e le spunte hanno bisogno di poter stringersi.
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px){
  .campo > span{ display: flex; gap: 6px; min-width: 0; }
  .campo > span > input{ flex: 1 1 0; min-width: 0; }
}

/* ═══ correzioni-giroI-05-09.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════
   GIRO I — 05/09/2026 — I1: lo scroll orizzontale fra 1200 e 1366 px
   ═══════════════════════════════════════════════════════════════════════

   IL DIFETTO, misurato (VERDETTO-R05-FINALE-05-09.md, BLOCCANTE 5, e
   `node strumenti/misura-larghezze.mjs` → 33 casi rossi):
   tutte le pagine pubbliche avevano la barra di scorrimento ORIZZONTALE
   fra 1200 e 1366 px, fino a 136 px di sbordo. Sopra i 1400 spariva
   (c'era spazio), sotto i 1180 spariva (la testata passa al «MENU»).

   LA CAUSA, misurata elemento per elemento a 1200/1280/1366 px
   (`<scratchpad>/mis-testata.mjs`, testata di `/`):

       marchio 158 + gap 22 + menu 806 + margin 14 + bottone 267 = 1267 px
       + i due gutter del .wrap (48 o 96 px)  →  1315 … 1363 px
       spazio disponibile a 1200 px di finestra: 1152 px (o 1104 sulle
       pagine del design, che hanno il gutter a clamp(20px,4vw,52px)).

   Cioè: NESSUNO dei tre pezzi si stringe. Il menu ha `white-space:nowrap`
   su ogni voce, il marchio ha `flex:0 0 auto`, il bottone ha
   `white-space:nowrap`. Quando non ci stanno, escono dalla finestra.

   ⛔ QUELLO CHE NON SI POTEVA FARE, ed è scritto qui perché non venga
      rifatto: (1) cambiare il testo «Prenota un evento» — è nel
      GLOSSARIO.md, il nome è quello; (2) abbassare a ~1400 la soglia del
      menu a panino: 1366 e 1280 sono schermi da portatile, e la regola di
      casa è desktop-first («Tango fa siti da PC»). Nascondere il menu su
      un portatile è un peggioramento, non una riparazione.

   LA RIPARAZIONE: si ripara LO SPAZIO, non i testi. Nella sola fascia
   1181–1419 px la testata si compatta in modo FLUIDO (clamp con 100vw,
   niente scatti): i gutter, il gap fra i blocchi, il respiro delle voci
   di menu e il padding del bottone scendono al minimo a 1181 px e
   risalgono ai valori originali a 1420 px, dove lo spazio c'è di nuovo.
   Fuori dalla fascia questo foglio non dipinge niente.

   Verifica: `node strumenti/misura-larghezze.mjs`
       PRIMA (21:10) → 33 casi rossi, esito 1
       DOPO          → 0 casi, esito 0                                  */

@media (min-width: 1181px) and (max-width: 1419.98px) {

  /* I gutter della testata: al minimo del clamp delle pagine del design
     (20px), invece dei 48-52 px che hanno a questa larghezza.
     ⚠️ SOLO nella testata: il corpo della pagina tiene il suo respiro. */
  .testata .wrap { padding-left: 20px; padding-right: 20px; }

  /* marchio ↔ menu: da 22 px a 10 px, risalendo con la finestra. */
  .testata__in { gap: clamp(10px, calc(10px + (100vw - 1181px) * 0.05), 22px); }

  /* Le voci del menu: il respiro laterale da 11 px a 5 px, e il gap fra
     le voci a 0 (i padding fanno già da separatore). Il TESTO delle voci
     non cambia: cambia solo lo spazio intorno. */
  .testata .menu { gap: 0; }
  .testata .menu a {
    padding-left:  clamp(5px, calc(5px + (100vw - 1181px) * 0.025), 11px);
    padding-right: clamp(5px, calc(5px + (100vw - 1181px) * 0.025), 11px);
  }

  /* menu ↔ bottone, e il bottone stesso: la pillola resta una pillola,
     si stringe solo il padding (30 px → 16 px). Il testo resta intero. */
  .testata .btn { margin-left: 8px; }
  .testata .btn--azione {
    padding-left:  clamp(16px, calc(16px + (100vw - 1181px) * 0.06), 30px);
    padding-right: clamp(16px, calc(16px + (100vw - 1181px) * 0.06), 30px);
  }
}



/* ==========================================================================
   D2 · LA PAGINA DI UN GRANO COME LA PAGINA VECCHIA — giro WP43, 14/09/2026
   ==========================================================================
   Ordine del capo: struttura, testi e immagini di `festivalgastronomica.it/
   moscato/`, «sul sito che abbiamo creato». Riferimento misurato in
   `riferimento/moscato-vecchio-14-09/` (a 1440: immagine-titolo ~924 px,
   colonna stretta ~704 px, sezioni a due colonne da ~552 px).

   🔴 PERCHÉ QUI CI SONO `.briciola`, `.banda`, `.wrap`, `.apre`. Il Grano carica
      la pila «percorso» e il foglio in linea `teste.php` → 'grano', che NON ha
      il componente banda: quello vive nel foglio in linea di `/produttori`
      (pila «pagine»), da cui `/grani` lo eredita. Le regole qui sotto sono
      COPIATE da lì, riga per riga, e scoperte sotto `body.single-grano` così
      non toccano calendario, evento, biglietto, partecipa, diventa-partner.
      Nessun colore nuovo: `--banda-produttori` #C2261B è lo stesso di `/grani`
      (`teste-mano.php`, `.banda--grani`), `--azione` #FFE500 è il giallo dei
      bottoni; il filetto della briciola usa `--bordo` di questa pila.
   ========================================================================= */
body.single-grano{ --banda-produttori:#C2261B; --azione:#FFE500; }
body.single-grano .wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,52px); }
body.single-grano .briciola{ background:#fff; border-bottom:1px solid var(--bordo); }
body.single-grano .briciola .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
body.single-grano .briciola a, body.single-grano .briciola span{
  color:var(--inchiostro); text-decoration:none; font:800 11px/1 "Montserrat",sans-serif;
  text-transform:uppercase; letter-spacing:.12em; min-height:44px; display:inline-flex; align-items:center;
}
body.single-grano .briciola a:focus-visible{ outline:3px solid var(--azione); box-shadow:0 0 0 6px var(--inchiostro); outline-offset:2px; }
body.single-grano .briciola span{ opacity:.72; }
/* la voce «qui»: il link a /grani + il nome del Grano, sulla destra come lo span di /grani */
body.single-grano .briciola .briciola__qui{ gap:8px; flex-wrap:wrap; text-align:right; justify-content:flex-end; }
body.single-grano .briciola .briciola__qui a, body.single-grano .briciola .briciola__qui span{ opacity:1; min-height:0; }
body.single-grano .banda{ background:var(--banda); color:var(--su-banda); padding-bottom:clamp(38px,4.6vw,62px); }
body.single-grano .banda .apre{ padding-top:clamp(40px,4.6vw,64px); }
body.single-grano .banda h1{
  color:var(--su-banda); font:900 clamp(40px,6.4vw,96px)/.96 "Montserrat",sans-serif;
  text-transform:uppercase; letter-spacing:-.022em; margin:0; text-wrap:balance;
}
body.single-grano .banda--grani{ --banda:var(--banda-produttori); --su-banda:#FFFFFF; }

/* il corpo della pagina: `.contenitore` (1180 − 64 = 1116 px) come le altre del percorso */
body.single-grano article.grano{ padding-top:36px; padding-bottom:56px; }

/* 2 · l'immagine di testata: intera, mai ritagliata, larga come nella vecchia */
.grano__testata{ margin:0 auto 36px; max-width:924px; }
.grano__testata img{ display:block; width:100%; height:auto; }

/* 3 · sottotitolo + introduzione della collana, colonna stretta centrata */
.grano__collana{ max-width:704px; margin:0 auto 44px; }
.grano__sotto{ font-size:24px; line-height:1.25; font-weight:600; margin:0 0 20px; max-width:none; text-wrap:balance; }
.grano__collana p{ margin:0 0 16px; line-height:1.6; text-wrap:pretty; }
.grano__collana p:last-child{ margin-bottom:0; }

/* 4 · le sezioni: foto | testo, poi testo | foto, poi foto | testo. L'alternanza
   la fa il modello con `:nth-of-type`; le sezioni senza foto vanno a tutta
   larghezza (68ch del `.testo-cliente`). */
.grano__sezione{ display:grid; grid-template-columns:1fr; gap:20px 40px; align-items:center; margin:0 0 44px; }
.grano__sezione--foto{ grid-template-columns:1fr 1fr; }
.grano__foto{ margin:0; }
.grano__foto img{ display:block; width:100%; height:auto; border-radius:10px; outline:1px solid rgba(0,0,0,.1); outline-offset:-1px; }
.grano__sezione--foto:nth-of-type(even) .grano__foto{ order:2; }
.grano__testo h2{ margin:0 0 12px; }
.grano__testo p{ margin:0 0 16px; line-height:1.6; text-wrap:pretty; }
.grano__testo > :last-child{ margin-bottom:0; }

/* 5 · i blocchi in colonna stretta, ognuno con il filetto sopra */
.grano__blocchi{ max-width:704px; margin:0 auto; }
.grano__blocco{ border-top:1px solid rgba(0,0,0,.18); padding:22px 0 10px; }
.grano__blocco h3{ margin:0 0 12px; font-size:18px; }
.grano__blocco p{ margin:0 0 10px; line-height:1.6; }
.grano__blocco ul{ margin:0 0 12px; padding-left:22px; }
.grano__blocco li{ margin:0 0 6px; line-height:1.6; }

/* 6 · «Ultimo aggiornamento …», filetto sopra, riga piccola */
.grano__aggiornamento{
  max-width:704px; margin:0 auto; border-top:1px solid rgba(0,0,0,.18);
  padding-top:22px; font-size:14px; color:var(--tenue);
}

/* telefono: foto sopra e testo sotto per TUTTE le sezioni (come la vecchia a 390) */
@media (max-width:820px){
  .grano__sezione--foto{ grid-template-columns:1fr; }
  .grano__sezione--foto:nth-of-type(even) .grano__foto{ order:0; }
  .grano__testata{ margin-bottom:28px; }
  body.single-grano article.grano{ padding-top:24px; }
}
/* una sezione SENZA foto (le Caciottelle) sta nella stessa colonna stretta centrata
   dell'introduzione: visto nello scatto a 1440 delle 11:49, il testo a 766 px
   appoggiato a sinistra sotto una colonna centrata sembrava una pagina in due pezzi. */
.grano__sezione:not(.grano__sezione--foto) .grano__testo{ max-width:704px; margin:0 auto; width:100%; }
/* 19/09/2026, giro g33 · l'introduzione «Cosa fare al Festival» in cima a /calendario
   (Eventi → Frasi della prenotazione, tre campi vuoti di serie: vuoti = nessun contenitore,
   quindi queste regole non prendono niente). Sta fra il titolo e la riga dei turni: stessa
   misura di riga del testo del cliente (68ch), la frase finale un po' più grande come nel docx. */
.cal-intro{ margin: 18px 0 36px; }
.cal-intro h2{ margin: 0 0 14px; }
.cal-intro .testo-cliente p:last-child{ margin-bottom: 0; }
.cal-intro__chiusa{ font-size: clamp(18px, 1.4vw, 20px); line-height: 1.45; margin-top: 20px; }

/* ── §r0310b, 03/10/2026 · /evento: LA LOCANDINA A SINISTRA, IL RESTO A DESTRA ──
   Andrea: «all'interno nella pagina dell'evento potrebbe comparire sempre un pò
   più grande e se ci clicchi si ingrandisce [...] (vedi ad es. [...] zalando)».
   Markup: `gastro_locandina_evento()` (plugin, inc/pubblico.php): un <button>
   `.cs-galleria__t` con dentro `img.copertina.grande`, e il <dialog> `.cs-visione`
   di `galleria.js` (lo stesso di Chi siamo e Bere e Mangiare) con una foto sola.
   · Da 1024 in su: due colonne (5/12 la locandina, ferma mentre si scorre; 7/12
     titolo, luogo, racconto, prenotazione). Misura della VERIFICA-2: 445 px a
     1440, 380 a 1024, titolo sopra la piega. Sotto 1024: locandina sopra, intera.
   · `rifiniture.css` (caricato DOPO questo foglio) fa la tessera quadrata, col
     ritaglio e la foto in `cover`: qui la si riporta alla forma della locandina con
     selettori più specifici (0,2,0), senza toccare quel foglio.
   · Nessun evento senza Copertina entra qui: senza `.ev-locandina` il <main>
     resta a una colonna, com'era.                                              */
.cs-galleria.ev-locandina{ margin: 0 0 20px; }   /* 0,2,0: batte .cs-galleria{margin:0 0 8px} di rifiniture.css, caricato dopo */
.ev-locandina .cs-galleria__t{
  display: block; width: fit-content; max-width: 100%; height: auto;
  aspect-ratio: auto; overflow: visible; padding: 0; border: 0; background: none;
  border-radius: var(--r-scheda); cursor: zoom-in;
}
.ev-locandina .cs-galleria__t img.copertina.grande{ width: auto; height: auto; margin: 0; }   /* il margine sotto lo porta .ev-locandina */
@media (min-width: 1024px){
  main.contenitore:has(> .ev-locandina){
    display: grid; grid-template-columns: 5fr 7fr; column-gap: 48px; align-items: start;
  }
  main.contenitore:has(> .ev-locandina) > *{ grid-column: 2; min-width: 0; }
  main.contenitore:has(> .ev-locandina) > .ev-locandina{
    grid-column: 1; grid-row: 1 / span 40; margin: 0;
    position: sticky; top: calc(var(--barra, 76px) + 24px);
  }
  main.contenitore:has(> .ev-locandina) .copertina.grande{
    max-height: min(720px, calc(100vh - var(--barra, 76px) - 48px));
  }
}

/* ── §r0310i, 03/10/2026 · /evento: «ALTRE FOTO DELL'EVENTO», la fila sotto la locandina ──
   Andrea: «volendo all'interno della pagina potrebbero caricarsi anche altre foto
   (vedi ad es. [...] zalando)». Campo nel pannello dell'evento; markup in
   `gastro_locandina_con_altre_foto()` (plugin, inc/pubblico.php). Senza foto il
   blocco non c'è e queste regole non toccano niente.
   · Miniature in righe da 5, tessera quadrata sul fondo chiaro, foto INTERA
     (`contain`): niente secondo formato da caricare. Selettori 0,2,0 e 0,2,1 dopo
     §r0310b: battono la tessera di §r0310b (forma della locandina) e quella di
     `rifiniture.css` (quadrata in `cover`, caricato dopo questo foglio).
   · Da 1024 in su la colonna è ferma mentre si scorre: la locandina si accorcia di
     una riga di miniature (`--ev-righe`, scritto dal plugin) così locandina e fila
     stanno tutte nella finestra.                                                 */
.ev-altre{
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
  max-width: 460px; margin: 12px 0 0;
}
.ev-altre .cs-galleria__t{
  display: block; width: 100%; height: auto; aspect-ratio: 1; padding: 4px;
  overflow: hidden; border: 0; border-radius: 8px; background: var(--chip-fondo); cursor: zoom-in;
}
.ev-altre .cs-galleria__t img{ display: block; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 1024px){
  main.contenitore:has(> .ev-locandina--altre) .copertina.grande{
    max-height: min(720px, calc(100vh - var(--barra, 76px) - 60px - var(--ev-righe, 1) * 94px));
  }
}