/* ═══ correzioni-03-09.css ═══ */
/* ============================================================================
   MONTATO DAL R02 il 04/09/2026 (giro A) — copia servita di
   `sito-design/correzioni-03-09.css`, con DUE differenze dichiarate:

   1) IL §10 NON C'E'.  Ordine del giro: «il suo §10 va SOSTITUITO, non
      aggiunto» — le sue 3 regole non agganciano niente nel markup vero
      (VESTITO-PRENOTAZIONE-04-09.md §15 riga A). Al suo posto, sulle pagine
      servite da server.mjs, ci sono `correzioni-prenotazione-04-09.css` e
      `correzioni-dashboard-04-09.css`.

   2) TOLTA LA RIGA `*{ transition-property: none }` del §11.
      Motivo, misurato e non dedotto:
         grep -rn "transition: *all" sito-funzioni/pubblico/gastronomica.css \
              sito-funzioni/server.mjs sito-design/*.html
      → 3 occorrenze, TUTTE in `sito-design/taste-gastronomica.html`, che non
      e' una pagina servita (non e' in `PAGINE` di vestito.mjs). Cioe' la riga
      non toglieva nessun `transition: all` e spegneva le transizioni di ogni
      elemento con specificita' 0,0,0 (R01, VESTITO-PRENOTAZIONE §15 riga B:
      «la riga e' troppo larga, consiglio di toglierla»).

   COME E' SERVITO: il <link> lo inietta `sito-funzioni/vestito.mjs`
   (`versoIlServer`) in fondo al <head> di ogni pagina del design, cosi' vince
   sul foglio della home E sul <style> in linea delle nove pagine interne.
   ⚠️ Il file aperto col DOPPIO CLICK non lo carica: la sorgente resta
   `sito-design/correzioni-03-09.css`. Dichiarato, non nascosto.
   ============================================================================ */

/* ============================================================================
   CORREZIONI — Gastronomica, audit visivo del 03/09/2026 (R01)
   ----------------------------------------------------------------------------
   PRONTE DA MONTARE, NON MONTATE. Le monta l'ingegnere nel giro dopo.
   Ogni blocco porta il numero della riga di audit: AUDIT-VISIVO-03-09.md §x.y

   COME SI MONTA
     · i blocchi 1-6 vanno in `sito-funzioni/pubblico/gastronomica.css`
       (o in un foglio caricato DOPO di lui);
     · i blocchi 7-9 vanno nel `:root` di `sito-design/_interne-tavolozza.css`
       e poi si rilancia `python3 sito-design/costruisci-pagine.py`;
     · il blocco 10 va nel foglio che `sito-funzioni/server.mjs` stampa nelle
       cinque pagine funzionali: e' il piu' grosso, ed e' il n.1 dell'audit.

   ⛔ NIENTE QUI DENTRO RIDISCUTE LE DECISIONI DEL CAPO
      struttura A · tavolozza 2 in home · bottoni gialli · niente nero · niente
      Petrolio. Le correzioni stanno DENTRO quei vincoli.

   ⚠️ I BLOCCHI CONTRASSEGNATI «DECIDE IL CAPO» NON VANNO MONTATI SENZA IL SUO OK:
      toccano la home, che e' congelata dal 01/09.
   ========================================================================= */


/* ==========================================================================
   0 · LA SCALA — i numeri che devono essere gli stessi ovunque
   AUDIT §1.5 (tipografia) · §2.3 (spaziature) · §3.4 (raggi)
   Da mettere nel :root piu' alto, sia della home sia delle interne.
   ========================================================================== */
:root{
  /* --- tipografia: 7 ruoli, non 22 gradini (§1.3, §1.5) --------------- */
  --t-h1:        clamp(40px, 6.4vw, 92px);   /* 40 a 390 · 92 a 1440       */
  --t-h1-lh:     .96;
  --t-h1-ls:     -.022em;

  --t-h2:        clamp(32px, 3.9vw, 56px);
  --t-h2-lh:     1.00;
  --t-h2-ls:     -.018em;

  --t-h3:        clamp(19px, 1.5vw, 21px);
  --t-h3-lh:     1.20;
  --t-h3-ls:     -.010em;

  --t-occhiello: 12px;
  --t-occhiello-lh: 1.00;
  --t-occhiello-ls: .10em;

  --t-corpo:     clamp(16px, 1.2vw, 17px);
  --t-corpo-lh:  1.55;

  --t-etichetta: 13px;
  --t-etichetta-lh: 1.30;
  --t-etichetta-ls: .02em;

  --t-bottone:   14px;
  --t-bottone-ls:.08em;

  /* --- spaziature: 7 passi (§2.1, §2.2, §2.3) ------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px;
  --s5: 40px; --s6: 64px; --s7: 96px;

  /* --- raggi: 4, non 9 (§3.4) ----------------------------------------- */
  --r-nessuno: 0;
  --r-scheda:  8px;    /* assorbe 7px · 9px · 10px · 12px                 */
  --r-pillola: 999px;  /* assorbe 99px                                    */
  --r-tondo:   50%;

  /* --- filetti: 1, non 3 quasi uguali (§3.6) -------------------------- */
  --filo: #F0DCCC;     /* assorbe #E2DCD2 e #EBD2C2                       */

  /* --- altezze dei componenti (§3.1, §3.5) ---------------------------- */
  --h-bottone: 52px;   /* assorbe 44 e 46                                 */
  --h-campo:   52px;   /* assorbe 40 · 41 · 43 · 46                       */

  /* --- movimento: la scala di casa, invariata ------------------------- */
  --istante:.08s; --fast:.18s; --normal:.35s; --slow:.6s;
  --smooth: cubic-bezier(.22,1,.36,1);
  --drawer: cubic-bezier(.32,.72,0,1);
  --premuto: .95;
}


/* ==========================================================================
   1 · IL CARATTERE NEI CONTROLLI DEL MODULO
   AUDIT §1.2 — <button> non eredita font-family: su macOS prende ARIAL.
   15 elementi in 5 pagine, fra cui il bottone «Prenota» del calendario e le
   frecce della galleria in home. UNA riga.
   ========================================================================== */
button, input, select, textarea, optgroup{
  font: inherit;
  letter-spacing: inherit;
}


/* ==========================================================================
   2 · IL BOTTONE — una definizione sola
   AUDIT §3.1 (8 definizioni) · §3.2 (il giallo senza sagoma, 1,14:1)
   ========================================================================== */

/* 2.1 · la base, uguale ovunque -------------------------------------- */
.btn, .bottone{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: var(--h-bottone);
  padding: 0 var(--s5);
  border-radius: var(--r-pillola);
  font-size: var(--t-bottone);
  font-weight: 800;
  letter-spacing: var(--t-bottone-ls);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;   /* la sagoma esiste sempre, poi si colora */
  transition-property: background-color, color, box-shadow, transform;
  transition-duration: var(--fast);
  transition-timing-function: var(--smooth);
}

/* 2.2 · 🔴 IL GIALLO PRENDE IL BORDO — anche in home
   §3.2 · #FFE500 su #FFEFE4 = 1,14:1 (sagoma solo per differenza di tinta,
   29,4°: sparisce in scala di grigi e per chi non distingue i colori).
   Col bordo cacao: #603A22 su #FFEFE4 = 9,10:1 · su #FFFFFF = 9,88:1.
   ⚠️ DECIDE IL CAPO per la parte in home (17 bottoni). Sulle 9 interne la
   regola esiste gia': questa la estende, non la inventa.                   */
.btn--azione, .btn--scuro{
  background: var(--azione, #FFE500);
  color: var(--azione-testo, #603A22);
  border-color: var(--azione-bordo, #603A22);
}
/* 2.3 · l'unica eccezione, misurata: sulla banda melagrana e sulla banda
   verde il giallo si stacca DA SOLO (4,59:1 e 5,03:1) e un bordo scuro
   farebbe 1,69:1. Li' il bordo diventa giallo.                             */
.campo--melagrana .btn--azione, .banda--produttori .btn--azione,
.campo--alloro   .btn--azione, .banda--alloro     .btn--azione{
  border-color: var(--azione, #FFE500);
}
/* 2.4 · §3.1 riga 7 — il bottone d'azione BIANCO (#FFFFFF su #FFEFE4 =
   1,12:1) non esiste piu': o e' d'azione, o e' un filo.                    */
.btn--azione{ background: var(--azione, #FFE500) !important; }

/* 2.5 · il bottone «filo» — la sagoma la fa l'ombra interna, non il bordo  */
.btn--filo{
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
  border-color: transparent;
}

/* 2.6 · §3.1 righe 1 e 4 — i bottoni delle pagine funzionali si allineano
   agli altri. Il #6D1F2E non e' in tavolozza (§5.1).                       */
.bottone{
  background: var(--azione, #FFE500);
  color: var(--azione-testo, #603A22);
  border-color: var(--azione-bordo, #603A22);
}
.bottone.secondario{
  background: #FFFFFF;
  color: var(--inchiostro, #603A22);
  border-color: var(--inchiostro, #603A22);
  box-shadow: none;
}

/* 2.7 · §4.4 — la risposta al tocco, SOLO sui pulsanti.
   🔴 17/09/2026, giro WP80 · parole del capo nella riunione delle 13:40:
   «Tutti quelli in generale, quando clicchi che fa quel [effetto]» — il
   riquadro che si rimpicciolisce quando lo premi.
   Causa: qui c'era `.btn, .bottone, a, button, summary, [role="button"]`
   `:active{scale(.95)}`, cioè OGNI link: schede, righe, foto, loghi, voci di
   menu, domande frequenti. Misurato con `strumenti/prova-wp80.mjs`: 428 non
   pulsanti su 695 si rimpicciolivano al clic.
   Restano i PULSANTI (`.btn`, `.bottone`: 118 su 128), come deciso nel WP79
   («il pulsante tiene il suo :hover e :active di sempre»). La regola vecchia
   è in `gastronomica-pagine.css.prima-wp80`. Solo il clic: gli effetti al
   passaggio del mouse NON sono toccati.                                     */
.btn:active, .bottone:active{
  transform: scale(var(--premuto));
}
a, button, summary, [role="button"]{
  transition-property: transform, background-color, color, box-shadow;
  transition-duration: var(--fast);
  transition-timing-function: var(--smooth);
}
/* §6 punto 1 di design-dna: l'hover si protegge, o su touch resta appiccicato */
@media (hover: hover) and (pointer: fine){
  .btn--azione:hover, .btn--scuro:hover, .bottone:hover{
    background: var(--azione-scuro, #E6CE00);   /* testo dentro: 6,21:1 */
  }
}


/* ==========================================================================
   3 · L'ANELLO DI FUOCO — due cerchi, dappertutto
   AUDIT §4.1 (l'azzurro di serie di Chrome su 35 elementi: 1,02:1 sulla
   melagrana, 1,16:1 sul pie') · §4.2 (il nostro e' giallo e basta: 1,14:1)
   ========================================================================== */
:where(a, button, summary, input, select, textarea, [role="button"], [tabindex]):focus-visible{
  outline: 3px solid var(--azione, #FFE500);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--brace, #26100C);
  border-radius: inherit;
}
/* sul fondo scuro si inverte: il cerchio interno scuro sparirebbe */
.campo-pieno :where(a,button,summary,input,select,textarea):focus-visible,
.pie :where(a,button,summary):focus-visible,
[class*="campo--"] :where(a,button,summary,input,select):focus-visible,
[class*="banda--"] :where(a,button,summary,input,select):focus-visible{
  box-shadow: 0 0 0 6px #FFFFFF;
}
/* §4.2 — i tre che avevano solo il giallo */
a.banner:focus-visible, a.citta:focus-visible, a.riga-att:focus-visible{
  outline: 3px solid var(--azione, #FFE500);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--brace, #26100C);
}


/* ==========================================================================
   4 · CHIP, SCHEDE, CAMPI, FILETTI
   AUDIT §3.3 · §3.4 · §3.5 · §3.6
   ========================================================================== */

/* 4.1 · chip: una definizione (§3.3 — oggi 4, e due modi di dire pillola) */
.etichetta, .serv, .chip{
  display:inline-flex; align-items:center; gap: var(--s2);
  min-height: 24px;
  padding: var(--s1) var(--s2);
  border-radius: var(--r-pillola);
  background: var(--chip-fondo, #F7DCC6);
  color: var(--chip-testo, #603A22);
  border: 1px solid transparent;
  font-size: var(--t-etichetta);
  line-height: var(--t-etichetta-lh);
  letter-spacing: var(--t-etichetta-ls);
  font-weight: 700;
  text-transform: uppercase;
}
/* §3.3 — il chip «gratis» aveva #5A6B3B, un verde fuori tavolozza (§5.1) */
.etichetta.gratis{ border-color: var(--alloro, #1F6B4F); color: var(--alloro, #1F6B4F); }
.etichetta.progetto{ border-color: var(--vino, #C4400F); color: var(--vino, #C4400F); }

/* 4.2 · schede: un raggio (§3.4 — oggi 10px, 12px, 9px e 0px) */
.scheda, .turni, .filtri, .modulo-dati, .pannello-chiaro,
article.scheda, table.turni, form.filtri, form.modulo-dati{
  border-radius: var(--r-scheda);
  border: 1px solid var(--filo);
  background: #FFFFFF;
}
/* §3.4 — su /evento due immagini nella stessa pagina, 12px e 9px */
.copertina, .copertina.grande, article.scheda img, .scheda img{
  border-radius: var(--r-scheda);
}

/* 4.3 · campi: un'altezza (§3.5 — oggi 40, 41, 43, 46, 52) */
input:not([type="checkbox"]):not([type="radio"]), select, textarea{
  min-height: var(--h-campo);
  padding: 0 var(--s3);
  border: 1px solid var(--inchiostro, #603A22);
  border-radius: var(--r-nessuno);
  background: var(--campo-fondo, #FFF8F2);
  color: var(--inchiostro, #603A22);
  font-size: 16px;              /* sotto i 16px iOS ingrandisce da solo */
}
textarea{ min-height: 122px; padding: var(--s3); line-height: var(--t-corpo-lh); }
/* §3.5 — la textarea di /partecipa aveva il bordo di serie #767676 */
.modulo-dati textarea, form textarea{ border-color: var(--inchiostro, #603A22); }

/* 4.4 · filetti: uno (§3.6 — oggi #E2DCD2, #F0DCCC, #EBD2C2) */
hr, .riga, .separatore,
tbody tr, thead tr, .elenco-att, .contatti, .orari, .faq{
  border-color: var(--filo);
}

/* 4.5 · rifinitura di design-dna: bordo sulle foto, cifre che non ballano */
img:not([src$=".svg"]){ outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
.num, time, .prezzo, .conto, .orari__o{ font-variant-numeric: tabular-nums; }


/* ==========================================================================
   5 · TIPOGRAFIA APPLICATA AI RUOLI
   AUDIT §1.3 · §1.5. Da agganciare alle classi che gia' esistono.
   ========================================================================== */
h1, .t-hero, .banner__t{
  font-size: var(--t-h1); line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-ls); font-weight: 900;
  text-wrap: balance;
}
h2, .t-sez, .t2{
  font-size: var(--t-h2); line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-ls); font-weight: 900;
  text-wrap: balance;
}
h3, .t3, .t-blocco{
  font-size: var(--t-h3); line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-ls); font-weight: 800;
}
.occhio, .occhiello, h4{
  font-size: var(--t-occhiello); line-height: var(--t-occhiello-lh);
  letter-spacing: var(--t-occhiello-ls); font-weight: 800;
  text-transform: uppercase;
}
p, li, dd, .guida{
  font-size: var(--t-corpo); line-height: var(--t-corpo-lh);
  letter-spacing: normal; text-wrap: pretty;
}
small, figcaption, .meta, .dichiarazione{
  font-size: var(--t-etichetta); line-height: var(--t-etichetta-lh);
  letter-spacing: var(--t-etichetta-ls);
}

/* 5.1 · 🔴 AUDIT §1.4 — la crenatura dei titoli giganti in home va nel verso
   sbagliato: h1.t-hero +0,015em e h2.t-sez +0,020em, mentre le interne allo
   stesso ruolo stanno a -0,022em.
   ⚠️ DECIDE IL CAPO: la home e' congelata.                                 */
.t-hero{ letter-spacing: var(--t-h1-ls); }   /* +1,339px → -0,022em */
.t-sez { letter-spacing: var(--t-h2-ls); }   /* +1,160px → -0,018em */


/* ==========================================================================
   6 · 🔴 HOME A 390 — la riga «Scorri» sopra i bottoni
   AUDIT §8.1 · .hero__giu 826→838 contro .hero__cta 722→838 (12 px), e la
   riga viene anche TAGLIATA a meta' dal bordo dell'apertura.
   ⚠️⚠️ DECIDE IL CAPO. Proposta A dell'audit, la consigliata.
   ========================================================================== */
@media (max-width: 700px){
  .hero__giu{
    position: static;        /* era absolute + bottom:52px */
    bottom: auto;
    margin-top: var(--s3);
    padding-bottom: var(--s2);
  }
  .hero, .hero__in{
    padding-bottom: var(--s6);   /* 64px: era 24 → niente taglio */
  }
}
/* Proposta B, se il capo vuole tenere la riga ancorata in basso:
@media (max-width: 700px){
  .hero__giu{ bottom: 8px; }
  .hero__cta{ margin-bottom: 44px; }
}
   Proposta C, se la riga va tolta dal telefono:
@media (max-width: 700px){ .hero__giu{ display:none; } }                    */


/* ══════════════════════════════════════════════════════════════════════════
   ⛔ §7 TOLTO DAL R02 IL 04/09/2026 — NON E' UNA RIPARAZIONE, E' UNA SCELTA.

   Il R01 lo aveva marcato «DECIDE IL CAPO: e' un colore che cambia l'aspetto
   di una pagina intera». Montandolo ho fatto andare ROSSA una prova che
   esisteva gia' e che nessuno aveva chiesto di cambiare:

       node strumenti/gamma-interne.mjs
       ❌ banda Produttori = --melagrana della home
          /produttori.html .banda backgroundColor = rgb(31, 107, 79)
                                          atteso  = rgb(194, 38, 27)

   Quella prova non e' vecchia per sbaglio: dice il colore APPROVATO il 03/09.
   Cambiare la prova per far passare la mia modifica sarebbe il modo piu'
   rapido di smettere di misurare. Quindi il blocco non si carica e la
   decisione torna a Costantino.

   COSA PROPONE IL R01, in due righe: oggi --melagrana #C2261B dipinge tre
   cose (I Grani · Passaporto · Come arrivare) e --alloro #1F6B4F non ne
   dipinge nessuna — e' l'unico token della tavolozza senza un ruolo, cioe'
   esattamente quello che la regola dei «tre ruoli» dice di usare o togliere.
   Dandolo a Produttori la segnaletica passa da 4 voci di menu su 10 a 7 su 10.
   Contrasti misurati da lui: bianco sopra 6,41:1, giallo d'azione 5,03:1.

   PER ACCENDERLO servono DUE cose insieme, e la seconda non e' facoltativa:
     1. rimettere qui il blocco, che sta per intero in
        `sito-design/correzioni-03-09.css` §7 (la sorgente del R01, intatta);
     2. aggiornare l'attesa in `strumenti/gamma-interne.mjs` — a quel punto e'
        giusto aggiornarla, perche' il colore approvato sara' cambiato.
   ══════════════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   8 · 🔴 LA BARRA ARANCIO — tre scuri diversi, di cui uno e' il Petrolio
   AUDIT §5.4 · §9.2
   `rgba(20,33,43,.9)` = #14212B, scartato dal capo il 03/09 alle 14:05.
   ========================================================================== */
.topbar, .topbar *{
  color: var(--brace, #26100C);      /* 7,65:1 su #FF8A00 */
}
.topbar__date{ color: var(--brace, #26100C); }   /* era #2B0A10 */

/* ══════════════════════════════════════════════════════════════════════════
   §9.2 — LA BARRA IN CIMA SU TELEFONO. Riscritta il 07/09/2026 (giro WP8).

   🔴 COS'ERA E PERCHÉ ERA SBAGLIATO: sotto i 700 px la barra era una striscia
      che scorre di lato (`flex-wrap:nowrap; overflow-x:auto`), scelta fatta per
      non farla andare su tre righe. Misurato a 390 px con emulazione vera:
      `p#conto` andava da 315 a **577 px** su uno schermo da 390, cioè
      «15 ore», «16 min» e «07 sec» erano **interamente fuori dallo schermo**.
      Nessuno fa scorrere di lato una barra di servizio: quei tre numeri non li
      vedeva nessuno. E nessuna prova se ne accorgeva, perché
      `scrollWidth − clientWidth` del DOCUMENTO resta 0 (a scorrere è la
      striscia, non la pagina) — cancello, prova dei 390 e prova delle larghezze
      passavano tutte e tre. Bloccante «non bloccante» del R05 del 06/09.

   ✅ ADESSO: la barra torna ad andare a capo, e il conto alla rovescia prende
      una riga sua (`flex:1 0 100%` + `order:3`, così finisce SOTTO la data e
      «Passaporto», non in mezzo). Sotto i 480 px le cifre rimpiccioliscono
      quanto basta perché le quattro unità stiano dentro i 390.
   ⛔ Tutto dentro media query: a 1440 non cambia una riga.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px){
  .topbar__in{
    flex-wrap: wrap;
    column-gap: var(--s4);
    row-gap: 6px;
    padding-block: var(--s2);
  }
  .topbar__in > *{ flex: 0 1 auto; white-space: nowrap; min-width: 0; }
  /* il conto alla rovescia su una riga sua, in fondo */
  .topbar__in > .conto{ order: 3; flex: 1 0 100%; justify-content: flex-start; }
}
@media (max-width: 480px){
  .conto{ gap: 8px; }
  .conto__q{ gap: 4px; }
  .conto__q b{ font-size: 13px; }
  .conto__q i{ font-size: 8px; letter-spacing: .06em; }
}
/* §7 — «Passaporto» nella barra e' un <span>, non un link: non fa niente.
   O diventa un link (e allora prende l'area cliccabile da 44px), o si toglie.
   Questa regola serve al caso «diventa un link»: va cambiato l'HTML.        */
.topbar a{
  min-height: 44px; display: inline-flex; align-items: center;
  text-decoration: underline; text-underline-offset: 3px;
}


/* ==========================================================================
   9 · FOTO — i rapporti fissi per tipo
   AUDIT §6.2 · la copertina grande di /evento e' l'unica immagine del sito
   il cui rapporto cambia con la larghezza: 3,100 a 1440 e 2,620 a 390.
   ========================================================================== */
.copertina.grande{ aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.copertina{        aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }  /* 1,600 */
.galleria img, .scheda__foto img{ aspect-ratio: 16 / 10; object-fit: cover; } /* era 1,333 */
.mosaico__t img{   aspect-ratio: 1 / 1; object-fit: cover; }                  /* voluto */
.targa img{        aspect-ratio: 1 / 1; object-fit: contain; }
.targa{ width: 112px; height: 112px; }   /* §6.2 — era 84 su partner e 136 su bere-scheda */


/* ==========================================================================
   11 · RIFINITURA — le regole di casa che oggi mancano
   design-dna → «Rifinitura» e «Tre regole tecniche che non si negoziano»
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
    scroll-behavior: auto !important;
  }
  /* ⚠️ le scene agganciate allo scroll NON si spengono: si spegne il
     movimento decorativo, non l'aggancio. A 390 non ce ne sono (AUDIT §8.3). */
}

/* area cliccabile minima, §8 della rifinitura */
a, button, summary, [role="button"], label{ min-height: 44px; }
/* eccezione WCAG 2.5.8: i link IN MEZZO a una frase sono esentati */
p a, li a, dd a, .legale a:not(:only-child){ min-height: 0; }


/* ==========================================================================
   FINE. Righe di audit coperte da questo foglio:
   §1.2 §1.3 §1.4 §1.5 §2.1 §2.2 §2.3 §3.1 §3.2 §3.3 §3.4 §3.5 §3.6
   §4.1 §4.2 §4.3 §4.4 §5.1 §5.3 §5.4 §6.2 §7 §8.1 §8.2 §8.4 §9.2 §1.1

   RESTANO FUORI perche' non si risolvono col CSS:
   · §1.1 il marchio in testata sulle 5 funzionali → serve l'<img srcset>
   · §7  «Passaporto» nella barra arancio → serve un <a>, oggi e' uno <span>
   · §9.3 «Le foto del festival» → titolo o contenuto, e il testo lo scrive
          il R03
   · §5.2 le tre voci senza pagina propria → serve il guscio condiviso
   ========================================================================== */

/* ═══ 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. */
/* 🔴 16/09/2026, giro WP67 — LA COLONNA MORTA. Il WP58 ha tolto il NUMERO dei
   posti (richiesta del cliente) ma la pista da 96 px è rimasta: fra il luogo e
   il bottone c'erano **120 px di vuoto** (96 + i due gap) su tutte e 8 le righe,
   e il titolo viveva in 134 px, tanto che **3 titoli su 8 andavano a 3 e 4 righe**
   — cioè la promessa «nessuno oltre due righe» del commento qui sopra era già
   rotta. Misurato con `strumenti/guarda-wp67.mjs` (piste ricostruite da
   `grid-template-columns` + gap, e cercate quelle che nessun figlio occupa).
   La pista NON si cancella: è il posto di «Esaurito», che è l'unica cosa
   rimasta in quella colonna e che sta nelle righe piene. Diventa `auto`: senza
   Esaurito si chiude a 0 px e lo spazio va al titolo (134 → 242 px, tutti e 8 i
   titoli a due righe), con Esaurito si apre quanto basta all'etichetta, e il
   bottone resta agganciato all'ultima pista (`.riga-ev > .btn{grid-column:-2/-1}`,
   rifiniture.css WP58, non toccato). */
.riga-ev:has(.riga-ev__f){
  grid-template-columns: 72px 74px 1fr 128px auto; gap: 12px;
}
/* ⚠️ `auto` su una pista vuota vale 0 px, MA IL GAP RESTA: con cinque piste +
   una ad `auto` fra il luogo e il bottone restavano 24 px invece di 12 — mezzo
   lavoro, misurato (`buchi_luogo_bottone`). Quindi la pista di «Esaurito» non
   c'è proprio, e si aggiunge SOLO alle righe piene. Le righe aperte tornano al
   gap normale di 12 px; nelle piene la pista si apre per l'etichetta e il
   bottone resta in fondo. */
.riga-ev:has(.riga-ev__f):has(.riga-ev__m.num){
  grid-template-columns: 72px 74px 1fr 128px auto auto;
}
.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; } }

/* ═══ §W8B — 07/09/2026, giro WP8-bis · IL PESCE COPERTO DAI RIQUADRI A 390 ═══
   ⚠️ Non è il pesce che si è spostato: a 390×844 sta dove stava (sinistra 226,
   alto 151, destra 382, basso 275 — misurato). È la COLONNA DEL TESTO che si è
   allargata. Fino al punto 8 di stamattina lo `span.hero__giu` («Scorri: il
   calendario si apre da solo») era il SECONDO FIGLIO IN LINEA di `.hero`, che è
   `display:flex`: si prendeva mezza riga e schiacciava `.hero__in` a 218 px.
   Tolto lo span, `.hero__in` ha ripreso i 342 px pieni — giusto per i bottoni,
   sbagliato per i due riquadri delle date, che sono passati da x=242 a x=366,
   cioè dentro la colonna del pesce, e stando a z-index 3 contro 1 gli sono
   finiti SOPRA (incrocio misurato: 130×31 px e 140×36 px).
   La regola del pesce sotto i 1200px, scritta in `gastronomica-base.css`, è
   «larghezza tenuta dentro la colonna che il testo non occupa mai». Qui quella
   colonna gliela si ridà: il pesce prende `min(40vw,165px)` più il 2% di
   margine destro, e i riquadri si fermano 8 px prima. 24 px è il rientro della
   `.wrap`. ⛔ Il limite vale SOLO per `.hero__riga`: bottoni, sottotitolo e nota
   restano larghi 342 px, com'erano dopo il punto 8.
   ⚠️ La fascia è ≤620px, la stessa delle altre due regole qui sopra, e NON
   ≤440px come avevo scritto al primo tentativo. Motivo misurato: a 480 px di
   larghezza il difetto dipende dall'ALTEZZA della finestra, perché il testo è
   appoggiato in basso e la fascia è alta 78vh. A 480×900 i riquadri finiscono a
   y=282 e il pesce a y=265 — passa per 17 px; a 480×844 la fascia scende a 658 e
   il testo sale, e il primo riquadro copre il pesce per 51×26 px. Con la fascia
   a 440 quel caso restava scoperto.
   Il prezzo è che fra 441 e ~570 px i riquadri vanno a capo: la stessa cosa che
   fanno sul telefono, e costa una riga. Sopra i 570 il limite non morde
   (misurato: a 620 vale 411 px e i riquadri ne chiedono 332 e 363).
   A 1440 questo blocco non entra: verificato che la geometria della fascia non
   cambia di un pixel (fascia 702, riquadri 497→528, bottoni top 653 left 124,
   nota top 722, mosaico top 819, pagina 11.174 — identici al punto 8). */
@media (max-width:620px){
  .hero__riga{ max-width: calc(98vw - min(40vw, 165px) - 32px); }
}

/* ═══ §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; }
.biglietto{ border: 0; }
.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-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);
  }
}


/* ==========================================================================
   g27 · 19/09/2026 · /grani, il testo introduttivo (Pagine → I Grani, campo
   `grani_intro`, stampato da parti/corpo-grani.php solo se pieno). Senza questa
   regola l'ultimo paragrafo stava a 15 px dalle schede (scatto a 1440 del g27):
   testo e griglia sembravano un pezzo solo. Lo stacco è quello fra le sezioni
   delle pagine dei Grani (44 px, .grano__collana).
   ========================================================================== */
.grani__intro{ margin: 0 0 44px; }
.grani__intro > :last-child{ margin-bottom: 0; }

/* ==========================================================================
   19/09/2026, giro g32 · LE NEWS A ELENCO
   · «Leggi la news» in fondo alla scheda (home e /news): `.card__corpo` è già una colonna
     flex (gastronomica-base.css), quindi `margin-top:auto` lo porta sul fondo e in una fila
     le schede lo hanno tutte alla stessa altezza anche con riassunti di lunghezza diversa.
   · La pagina di una news (`single.php`, body.single-post): stesso colore del titolone di
     /news (rifiniture.css, `body.pag-news`), ma misura ridotta perché un titolo di news è una
     frase intera (106 caratteri la più lunga: a 96 px erano 7 righe a 1440); testo in una
     colonna leggibile.
   ========================================================================== */
.card.art .card__leggi{ margin: auto 0 0; padding-top: 4px; }
body.single-post .wrap.apre h1{ color: #7B1E4B; -webkit-text-fill-color: #7B1E4B;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; max-width: 24ch; }
body.single-post .news-sola{ max-width: 760px; }
.news-sola__torna{ margin: 36px 0 0; }

/* ── 19/09/2026, giro g38 · UN PALLINO PRIMA DI OGNI NOME nell'elenco accanto alla mappa ──────────
   Pamela: «non ci sono tutti i pallini punto elenco prima dei nomi dei ristoranti, prevederli per tutti».
   Il pallino che c'era è il segno del progetto Uva Moscato (mappa-insieme.js `conMoscato`, disegnato in
   rifiniture.css: 9 px, color vino, spiegato dalla legenda sopra l'elenco): stava solo sui 19 aderenti.
   Adesso ogni nome ha il suo punto elenco semplice, più piccolo (6 px) e color inchiostro, nello stesso
   posto; chi aderisce al Moscato tiene il pallino rosso al posto del semplice, così la legenda dice ancora
   il vero. Il semplice non promette niente: non è cliccabile e non dice «è sulla mappa».
   Centri allineati al pallino Moscato (top 8 / 16 px + 4,5 = 12,5 / 20,5 px). Prova: strumenti/prova-g38.mjs */
.mappa__lato ul.mappa__locali li{ position: relative; padding-left: 17px; }
.mappa__lato ul.mappa__locali li::before{
  content: ""; position: absolute; left: 1.5px; top: 9.5px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--inchiostro, #14212B); pointer-events: none;
}
.mappa__lato ul.mappa__locali li:has(> span.mappa__mosc)::before{ display: none; }
@media (max-width: 900px){ .mappa__lato ul.mappa__locali li::before{ top: 17.5px; } }