/* Ronda — foglio unico.
   Riferimento diretto: weareona.co (kit/reference/ona/SCHEDA.md). Da lì vengono la scatola del
   menu in alto al centro, le celle con filetto da 1px e gap da 1px, la didascalia a tabella sotto
   le fotografie, la scheda in basso al centro sopra le foto a piena pagina, il monospazio unico.
   Di Ronda sono la palette (bianco e nero freddi, desaturati) e la sintesi: tre voci, una azione. */

@font-face {
  font-family: "Ronda Mono";
  src: url("font/ronda-mono-latin.woff2") format("woff2");
  font-weight: 300 450;
  font-style: normal;
  font-display: swap;
}
/* il serif dei testi (meeting 01/10, M5 · SAL-0110 D5 = b): Newsreader di Production Type (OFL 1.1, senza nomi
   riservati: font/OFL-newsreader.txt), vicino a Canela Text, che si proverà quando c'è la licenza web. Un'istanza sola,
   fissata dalla variabile di Google Fonts: grandezza ottica 14, quella dei testi, anche nei titoli (Canela Text è un
   taglio da testo), e peso 450, il colore di Canela Text; solo latino, 23,6 KB. Copre ogni peso chiesto dal CSS, così
   tornando a Ronda Mono (--testi, sotto) i pesi di prima restano quelli */
@font-face {
  font-family: "Newsreader";
  src: url("font/newsreader-testo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette: il #e7e5e1 e il #161616 di weareona, raffreddati */
  --gesso: #E9EBEB;       /* fondo chiaro */
  --inchiostro: #121517;  /* testo e filetti sul chiaro — 15,3:1 */
  --fumo: #565D61;        /* testo secondario sul chiaro — 5,6:1 */
  --notte: #07080A;       /* fondo scuro: il nero delle fotografie dei vini */
  --latte: #E6E9EA;       /* testo sullo scuro — 16,4:1 */
  --nebbia: #9AA1A5;      /* testo secondario sullo scuro — 7,7:1 */

  --mono: "Ronda Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Newsreader", "Times New Roman", Times, serif;
  /* il carattere dei testi (meeting 01/10, M5 · SAL-0110 D5): menù, schede e paragrafi; Ronda Mono resta nella
     scatola del menu, nei bottoni e nelle etichette. L'interruttore è questa riga: con var(--mono) si torna a Ronda Mono */
  --testi: var(--serif);
  --t-ui: clamp(12px, 11.2px + 0.14vw, 13px);        /* celle, didascalie, moduli */
  --t-voce: clamp(18px, 13.5px + 1.15vw, 30px);      /* le frasi: 18 a 390, 30 a 1440 (weareona 17/30) */
  --riga: 28px;                                      /* altezza di una cella sul telefono */
  --m: clamp(12px, 1.1vw, 16px);                     /* margine dal bordo della finestra */
  --lato: clamp(12px, -6px + 3.9vw, 48px);           /* margine dei contenitori */
  --gap-cella: 1px;
  --curva: cubic-bezier(.19, 1, .22, 1);             /* la curva di weareona */
  /* la scatola del menu: tre righe come weareona (20 px a 1440, 22,6 a 390); qui 24, il minimo di WCAG 2.5.8 */
  --riga-menu: 24px;
  --spazio-menu: 5px;                                /* weareona: --button-spacing, 0.5rem */
  --scatola-h: calc(var(--riga-menu) * 3 + var(--gap-cella) * 2);
  --testa-h: var(--scatola-h);                       /* quanto è alta la scatola nel suo riposo */
  --info-w: 350px;                                   /* weareona: --menu-info-width */
}
@media (min-width: 768px) {
  :root { --riga: 24px; }
}

/* due registri: chiaro (Food, Prenota) e scuro (home, Wine e, dal 05/10, Shop: NB, «nero come nella parte Wine») */
html {
  --fondo: var(--gesso);
  --testo: var(--inchiostro);
  --testo-2: var(--fumo);
  --linea: rgba(18, 21, 23, .82);
  --vetro: rgba(233, 235, 235, .72);   /* .62 fino al passo 7: la voce attiva su un'intestazione piena scorsa sotto la scatola stava a 4,29:1 */
  --vetro-scheda: rgba(233, 235, 235, .94);   /* la card sta sopra la pagina (testo), non sopra una foto */
  --attiva: rgba(18, 21, 23, .12);
  background: var(--fondo);
  color: var(--testo);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.scuro {
  --fondo: var(--notte);
  --testo: var(--latte);
  --testo-2: var(--nebbia);
  --linea: rgba(230, 233, 234, .72);
  --vetro: rgba(7, 8, 10, .34);
  --vetro-scheda: rgba(7, 8, 10, .88);
  --attiva: rgba(230, 233, 234, .16);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--testo);
  font: 400 var(--t-ui) / 1.5 var(--mono);
  font-feature-settings: "calt" 0;   /* niente «texture healing»: la griglia del monospazio resta rigida */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
h1, h2, h3 { font: inherit; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }

/* ── Il carattere dei testi (meeting 01/10, M5) ─────────────────────────────
   I testi nel serif, l'interfaccia in Ronda Mono. Nel serif: il menù della settimana, «Cosa ti sei perso» (le righe
   della lista e i piatti della card), le schede (le tappe di Itinerary, il testo delle card, le bottiglie e i
   prodotti di Wine e Shop) e i paragrafi di About, Itinerary, Wine e Shop. In Ronda Mono: la scatola del menu, i
   bottoni, le etichette (le intestazioni in cella piena, le celle della card, i moduli), le note e il piede.
   Home, Prenota e la 404 non hanno testi da cambiare: restano come sono. */
:is(.casa, .itinerary, .about, .wine, .shop, .evento, .lancio) .voce,
.apertura-testo, .piatti, .casa-righe .cella,
.tappa .tabella .cella, .scheda-info .testo,
.vino .scheda-bassa .cella, .prodotto .tabella > :is(h3, span), .formato, .merch :is(.nome, .prezzo) { font-family: var(--testi); }
.piatti .prezzo { font-variant-numeric: tabular-nums lining-nums; }

.solo-voce {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.salta {
  position: fixed; top: var(--m); left: var(--m); z-index: 100;
  padding: 0 1em; line-height: var(--riga);
  background: var(--testo); color: var(--fondo); text-decoration: none;
  transform: translateY(-200%);
}
.salta:focus { transform: none; }

:focus-visible { outline: 2px solid var(--testo); outline-offset: 2px; }

/* ── La cella: l'unità di tutto il sito ─────────────────────────────────────
   Filetto da 1px con box-shadow e gap da 1px fra celle vicine: due ombre si
   sovrappongono nello stesso pixel e la tabella resta a filo singolo (weareona). */
.cella {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--riga);
  padding: 0 .8em;
  box-shadow: 0 0 0 1px var(--linea);
  background: transparent;
  color: inherit;
  text-decoration: none;
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  border: 0; border-radius: 0;
  /* nessuna transizione: al passaggio la cella si inverte secca, come una tabella */
}
a.cella, button.cella { cursor: pointer; }
a.cella:hover, button.cella:hover:not(:disabled) { background: var(--testo); color: var(--fondo); }
.cella.piena { background: var(--testo); color: var(--fondo); }
a.cella.piena:hover, button.cella.piena:hover:not(:disabled) { background: transparent; color: var(--testo); }
.cella[aria-current="page"] { background: var(--attiva); }
.cella.sx { justify-content: flex-start; text-align: left; }
.tabella { display: grid; gap: var(--gap-cella); }
.tabella > .intera { grid-column: 1 / -1; }

/* ── La scatola del menu, in alto al centro ────────────────────────────────
   weareona (SCHEDA § Chrome): [marchio][tre righe][Close], 5px fra i blocchi, e si apre e si chiude:
   chiusa sulle pagine a foto piena, aperta sulle altre. Ronda: [marchio][tre righe][Chiudi] più
   [Prenota], che resta visibile anche a scatola chiusa (SAL B6). Chiusa: [marchio][Menu][Prenota].
   Lo stato lo scrive la build (data-stato) e lo cambia ronda.js; senza JavaScript è sempre aperta. */
.guscio {
  --logo-h: 38px;                                    /* «CASA» alto come le lettere del marchio di weareona (~7 px) */
  --logo-w: calc(var(--logo-h) * 3.3758);            /* il viewBox del marchio Casa Ronda: 3375,78 × 1000 */
  --marchio-w: calc(var(--logo-w) + 24px);           /* la cella si allarga quanto serve al marchio (SAL A10) */
  --comando-w: calc(var(--comando-ch, 6) * 1ch + 1.6em);
  --prenota-w: calc(var(--prenota-ch, 7) * 1ch + 1.6em);
  --griglia-w: var(--info-w);
  /* quanto scorrono il marchio e le celle di destra quando la griglia si chiude fra loro */
  --corsa: calc((var(--griglia-w) + var(--spazio-menu)) / 2);
  position: fixed; z-index: 40;
  top: calc(var(--m) + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 2 * var(--m));
  pointer-events: none;                              /* fra una cella e l'altra si tocca la pagina */
}
.scatola { display: flex; gap: var(--spazio-menu); align-items: stretch; }
.scatola > * { pointer-events: auto; }
/* il vetro sta sulle celle sciolte e sulla griglia intera, come weareona (nav#menu .inner) */
.scatola > .cella, .griglia {
  background-color: var(--vetro);
  -webkit-backdrop-filter: blur(10px) saturate(.4);
  backdrop-filter: blur(10px) saturate(.4);
}
.scatola > a.cella:hover, .scatola > button.cella:hover { background-color: var(--testo); }
.scatola > .cella.piena { background-color: var(--testo); }
.scatola > a.cella.piena:hover { background-color: var(--vetro); }
.scatola .cella[aria-current] {
  background-image: linear-gradient(var(--attiva), var(--attiva));
}
.marchio { flex: none; width: var(--marchio-w); height: var(--scatola-h); padding: 0; }
.marchio::before {
  content: ""; display: block; flex: none; width: var(--logo-w); height: var(--logo-h);
  background: currentColor;
  -webkit-mask: url("logo.svg") center / contain no-repeat;
  mask: url("logo.svg") center / contain no-repeat;
}
/* il ritaglio aperto sborda di 2,5 px ai lati (metà dello spazio fra i blocchi): in corsa la griglia resta
   a 2,5 px dalle celle che le scorrono accanto. L'anello del fuoco delle voci è dentro la cella. */
.griglia { flex: none; width: var(--griglia-w); clip-path: inset(-8px calc(var(--spazio-menu) / -2)); }
.voci {
  display: grid; gap: var(--gap-cella); height: 100%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, var(--riga-menu));
}
.voci > li { display: contents; }
.voci .cella { min-height: 0; padding: 0 .5em; }
.voci .cella:focus-visible { outline-offset: -4px; }
.voci .cella > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.voci .mezza { grid-column: span 3; }               /* weareona: data-size="1/2" */
.voci .terzo { grid-column: span 2; }               /* e "1/3" */
.comando { flex: none; width: var(--comando-w); height: var(--scatola-h); padding: 0; }
.prenota-cta { flex: none; width: var(--prenota-w); height: var(--scatola-h); padding: 0; }

/* chiusa: la griglia si stringe verso il centro e le celle ai lati le vanno dietro, a destra e a
   sinistra (SAL A10); con la stessa curva e la stessa durata non si toccano mai */
.js .guscio[data-stato="chiusa"] .griglia { clip-path: inset(-8px 50%); visibility: hidden; }
.js .guscio[data-stato="chiusa"] .marchio { transform: translateX(var(--corsa)); }
.js .guscio[data-stato="chiusa"] :is(.comando, .prenota-cta) { transform: translateX(calc(var(--corsa) * -1)); }
/* la transizione di weareona (SCHEDA § Animazioni): .8s, cubic-bezier(.19, 1, .22, 1); solo dopo il primo disegno */
.guscio[data-viva] :is(.marchio, .comando, .prenota-cta) { transition: transform .8s var(--curva); }
.guscio[data-viva] .griglia { transition: clip-path .8s var(--curva), visibility 0s linear .8s; }
.guscio[data-viva][data-stato="aperta"] .griglia { transition: clip-path .8s var(--curva), visibility 0s; }

/* sotto i 768 px la scatola prende tutta la larghezza, come weareona a 390, ma le tre righe scendono
   sotto la fila [marchio][Menu][Prenota] (NB, 01/10): in orizzontale alla griglia restavano 64 px,
   20 per voce, e «Instagram» non ci stava. Si apre e si chiude dall'alto in basso. */
@media (max-width: 767px) {
  :root { --info-w: 18rem; --testa-h: calc(var(--scatola-h) * 2 + var(--spazio-menu)); }
  .guscio { left: var(--m); right: var(--m); transform: none; width: auto; max-width: none; }
  .scatola {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: var(--scatola-h) var(--scatola-h);
    grid-template-areas: "marchio comando prenota" "griglia griglia griglia";
  }
  .marchio { grid-area: marchio; width: auto; }
  .comando { grid-area: comando; }
  .prenota-cta { grid-area: prenota; }
  .griglia { grid-area: griglia; width: auto; clip-path: inset(-8px); }
  /* qui la griglia aperta scende sopra la foto (in home, sul sigillo di cera: 2,34:1 col vetro di sempre) */
  .scuro .griglia { background-color: rgba(7, 8, 10, .6); }
  /* sullo Shop la griglia riposa aperta sopra i prodotti che scorrono: il vetro delle altre celle */
  .shop .griglia { background-color: var(--vetro); }
  .js .guscio[data-stato="chiusa"] .griglia { clip-path: inset(-8px -8px calc(100% + 8px) -8px); }
  .js .guscio[data-stato="chiusa"] :is(.marchio, .comando, .prenota-cta) { transform: none; }
  html:not(.js) .scatola { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marchio prenota" "griglia griglia"; }
}

/* ── La card informativa (weareona § 8.2): titolo, date | luogo, il testo, tre celle in fondo ──
   Nella scatola (Casa, poi gli eventi di Itinerary) prende il posto delle tre righe: stessa colonna da
   350 da 768 px (le celle ai lati restano alte una scatola), sotto la fila del marchio sul telefono.
   Si apre dall'alto verso il basso, con la curva di Ona. Senza JavaScript nella scatola non c'è. */
.scatola { position: relative; }
.scheda-info { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-cella); text-align: center; }
.scheda-info > .intera { grid-column: 1 / -1; }
.scheda-info .meta { grid-column: span 3; }
.scheda-info .terzo { grid-column: span 2; }
.scheda-info .cella { min-height: var(--riga-menu); padding: 0 .5em; }
.scheda-info .intera:focus-visible { outline-offset: -4px; }
/* il blocco di testo: come Ona, interlinea 1,25 e 12 px di margine (il corpo è quello delle celle, non i 10 px di Ona) */
.scheda-info .testo { grid-column: 1 / -1; padding: 12px; box-shadow: 0 0 0 1px var(--linea); text-align: left; line-height: 1.25; }
.scheda-info .cella.spenta, .scheda-info .cella[aria-disabled="true"] { color: var(--testo-2); cursor: default; }
.scheda-info button.cella[aria-disabled="true"]:hover { background: transparent; color: var(--testo-2); }
.guscio .scheda-info { display: none; }
.js .guscio .scheda-info {
  display: grid; position: absolute; z-index: 1; top: 0;
  left: calc(var(--marchio-w) + var(--spazio-menu)); width: var(--griglia-w);
  background-color: var(--vetro-scheda);
  -webkit-backdrop-filter: blur(10px) saturate(.4);
  backdrop-filter: blur(10px) saturate(.4);
  visibility: hidden; clip-path: inset(-8px -8px calc(100% + 8px) -8px);
}
.js .guscio[data-stato="scheda"] .scheda-info { visibility: visible; clip-path: inset(-8px); }
.js .guscio[data-stato="scheda"] .griglia { visibility: hidden; clip-path: inset(-8px 50%); }
.guscio[data-viva] .scheda-info { transition: clip-path .8s var(--curva), visibility 0s linear .8s; }
.guscio[data-viva][data-stato="scheda"] .scheda-info { transition: clip-path .8s var(--curva), visibility 0s; }
@media (max-width: 767px) {
  .js .guscio .scheda-info { top: calc(var(--scatola-h) + var(--spazio-menu)); left: 0; width: 100%; }
  .js .guscio[data-stato="scheda"] .griglia { clip-path: inset(-8px -8px calc(100% + 8px) -8px); }
}

/* senza JavaScript la scatola resta aperta e il comando, che non comanderebbe niente, non c'è */
html:not(.js) .comando { display: none; }
/* e se ronda.js non arriva (con .js già messo dalla testa): dopo 3 s la scatola si riapre da sola */
.js .guscio:not([data-viva]) .comando { animation: salvagente-via 0s 3s forwards; }
.js .guscio[data-stato="chiusa"]:not([data-viva]) .griglia { animation: salvagente-griglia 0s 3s forwards; }
.js .guscio[data-stato="chiusa"]:not([data-viva]) :is(.marchio, .prenota-cta) { animation: salvagente-lato 0s 3s forwards; }
/* sulle pagine evento la scatola riposa da card: senza ronda.js dopo 3 s la card lascia il posto alle tre righe
   (e il testo dell'evento si rivede sotto la galleria) */
.js .guscio[data-stato="scheda"]:not([data-viva]) .scheda-info { animation: salvagente-via 0s 3s forwards; }
.js .guscio[data-stato="scheda"]:not([data-viva]) .griglia { animation: salvagente-griglia 0s 3s forwards; }
@keyframes salvagente-via { to { visibility: hidden; } }
@keyframes salvagente-griglia { to { clip-path: inset(-8px calc(var(--spazio-menu) / -2)); visibility: visible; } }
@keyframes salvagente-lato { to { transform: none; } }

/* ── Piede: la dichiarazione dell'anteprima e la lingua (IT/EN, SAL B7) ─── */
.piede {
  padding: 3rem var(--lato) calc(var(--m) + 4.5rem + env(safe-area-inset-bottom));
  color: var(--testo-2);
  max-width: 64ch;
}
.lingue { display: flex; gap: var(--gap-cella); margin-top: 1rem; color: var(--testo); }
.lingue .cella { min-width: 2.75rem; }
.lingue .attiva { background: var(--attiva); }
.wine .piede { scroll-snap-align: end; }

/* ── Home: una fotografia a piena pagina, una scheda in basso al centro ── */
html.home, html.home body { height: 100%; overflow: hidden; }
.soglia { position: fixed; inset: 0; background: var(--notte); }
.soglia .fondo, .soglia .fondo img, .soglia video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.soglia video { opacity: 0; transition: opacity 1.8s var(--curva); }
.soglia video.pronto { opacity: 1; }

.scheda-bassa {
  position: fixed; z-index: 30;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--m) + env(safe-area-inset-bottom));
  width: min(22rem, calc(100% - 2 * var(--m)));
  grid-template-columns: 1fr 1fr;
  text-decoration: none;
}
.scheda-bassa .cella {
  background-color: var(--vetro);
  -webkit-backdrop-filter: blur(10px) saturate(.4);
  backdrop-filter: blur(10px) saturate(.4);
}
/* solo col mouse: sul telefono, dopo il tocco che porta alla vendita qui sotto, la scheda resterebbe invertita */
@media (hover: hover) { a.scheda-bassa:hover .cella { background-color: var(--testo); color: var(--fondo); } }
/* la scheda della home: la page-card di weareona (SCHEDA § 2.2), tre righe come la scatola del menu */
.scheda-casa { width: min(var(--info-w), calc(100% - 2 * var(--m))); }
.scheda-casa .cella { min-height: var(--riga-menu); }
.scheda-casa .cella.piena { background-color: var(--testo); }
.scheda-casa a.cella:hover { background-color: var(--testo); color: var(--fondo); }
.scheda-casa a.cella.piena:hover { background-color: var(--vetro); color: var(--testo); }

.angolo {
  position: fixed; z-index: 30;
  bottom: calc(var(--m) + env(safe-area-inset-bottom));
}
.angolo.dx { right: var(--m); }
.angolo .cella { background-color: var(--vetro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); min-width: 5.2rem; }
/* il piede della home: la dichiarazione dell'anteprima e la lingua, su una lastra scura, sempre leggibile */
.angolo.sx {
  left: var(--m); max-width: min(34ch, calc(50% - var(--info-w) / 2 - 1rem - var(--m)));
  padding: .45em .7em; line-height: 1.35;
  color: var(--latte);
  background: rgba(7, 8, 10, .66);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.angolo.sx .lingue { margin: .55em 0 .1em; }
.angolo.sx .lingue .cella { min-width: 2.5rem; min-height: var(--riga-menu); }
@media (max-width: 767px) {
  .angolo.sx {
    right: var(--m); max-width: none; font-size: 12px;
    bottom: calc(var(--m) + var(--scatola-h) + .75rem + env(safe-area-inset-bottom));
  }
}

/* ── Le pagine chiare: la frase in alto, sotto la scatola ──────────────── */
.pagina {
  padding: calc(var(--m) + var(--testa-h) + clamp(3rem, 9vh, 7rem)) var(--lato) 0;
}
.voce {
  font-size: var(--t-voce); line-height: 1.25; font-weight: 330;
  letter-spacing: -.01em;
  max-width: 34ch;
}
.voce + .voce { margin-top: .15em; }
.voce.seconda { color: var(--testo-2); }

/* ── L'apertura fermata (weareona § 3.1, Pop-ups e Creative Events) ─────────
   Un viewport, testo grande, «Continua» in basso; il testo resta fermo mentre il resto gli scorre sopra e
   lo sfoca. Il fermo è CSS (sticky), quindi c'è anche senza JavaScript; la sfocatura segue lo scorrimento
   dove il browser sa farlo (animation-timeline). Casa la centra (SAL A4), Itinerary la tiene a sinistra
   come Ona, larga al più 1280 (il --padding-container di Ona, 80 px a 1440). */
html.casa, html.itinerary { scroll-behavior: smooth; }
.apertura {
  --largo: max(var(--lato), calc((100% - 1280px) / 2));
  position: sticky; top: 0;
  display: grid; align-content: center;
  height: 100vh; height: 100svh;
  padding: calc(var(--m) + var(--testa-h) + 1rem) var(--largo) calc(var(--m) + var(--riga-menu) * 2 + 1rem);
}
.apertura .voce { max-width: none; }
.apertura-testo .voce + .voce { margin-top: .8em; }   /* Ona: 24 px fra i paragrafi a 30 px */
.apertura--centro { place-items: center; text-align: center; }
.apertura--centro .apertura-testo { width: 100%; }
/* il menù di Casa: il piatto a sinistra, il prezzo a destra, in colonna (NB, 01/10: «servono sei piatti e
   prezzi»). Nell'apertura una colonna di 40 caratteri, centrata sotto le date; nella card, larga quanto il testo.
   Se il piatto va a capo (a 390), il prezzo resta sulla sua prima riga. */
.piatti li { display: flex; justify-content: space-between; align-items: baseline; gap: 2ch; }
.piatti .prezzo { flex: none; white-space: nowrap; }
.continua {
  position: absolute; left: 50%; bottom: calc(var(--m) + env(safe-area-inset-bottom)); transform: translateX(-50%);
  gap: .6em; min-height: var(--riga-menu);
  background-color: var(--vetro);
  -webkit-backdrop-filter: blur(10px) saturate(.4); backdrop-filter: blur(10px) saturate(.4);
}
.continua svg { width: .75em; height: .45em; flex: none; }
/* quello che scorre sopra: alto almeno un viewport, così copre tutta l'apertura; entra sfumando dal
   trasparente al fondo per quanto è alto il suo margine, come la griglia delle Pop-ups di Ona */
.sopra {
  --sopra: calc(var(--m) + var(--testa-h) + 2rem);
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  padding: var(--sopra) var(--lato) var(--scatola-h);
  background: linear-gradient(to bottom, transparent, var(--fondo) var(--sopra), var(--fondo));
}
@supports (animation-timeline: view()) {
  body { timeline-scope: --copertura; }
  .sopra { view-timeline: --copertura block; }
  .apertura-testo { animation: sfoca linear both; animation-timeline: --copertura; animation-range: entry 0% entry 100%; }
}
@keyframes sfoca { to { filter: blur(4px); } }   /* weareona: --blur-amount, 0.4rem */

/* ── Casa: i menù passati, come la lista «Chefs» di weareona (§ 3.3) ─────
   Una riga per settimana, nella colonna da 350 al centro. Dal 05/10 (NB: «Non mi piace che si aprano così gli scorsi
   menù») la riga non apre più la card nella scatola: è il <summary> di un <details>, e la settimana si apre sotto, con
   le sei foto larghe quanto il menù della settimana (fino a 1280). La data resta al centro; a destra il segno, un più
   che si chiude in meno quando la settimana è aperta. */
.casa-colonna, .casa-passati > h2, .settimana > summary { width: min(var(--info-w), 100%); margin-inline: auto; }
.casa-colonna > h2, .casa-passati > h2 { margin-bottom: var(--gap-cella); }
#menu-passati, .settimana { scroll-margin-top: calc(var(--m) + var(--testa-h) + 1rem); }
.casa-righe { display: grid; gap: var(--gap-cella); }
.casa-righe .cella { min-height: var(--riga-menu); }
.settimana > summary { position: relative; padding-inline: 2.4em; list-style: none; cursor: pointer; }
.settimana > summary::-webkit-details-marker { display: none; }
.settimana > summary:focus-visible { outline-offset: -4px; }
.settimana[open] > summary { background: var(--attiva); }
@media (hover: hover) { .settimana > summary:hover { background: var(--testo); color: var(--fondo); } }
.segno { position: absolute; top: 50%; right: .8em; width: 9px; height: 9px; margin-top: -4px; }
.segno::before, .segno::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: currentColor; }
.segno::after { transform: rotate(90deg); transition: transform .8s var(--curva); }
.settimana[open] .segno::after { transform: none; }
/* si apre scendendo, con la curva di Ona, dove il browser lo sa fare; altrove si apre e basta */
@supports (interpolate-size: allow-keywords) {
  .settimana { interpolate-size: allow-keywords; }
  .settimana::details-content { block-size: 0; overflow-y: clip; transition: block-size .8s var(--curva), content-visibility .8s allow-discrete; }
  .settimana[open]::details-content { block-size: auto; }
}
.casa-dove { margin-top: var(--scatola-h); }
.cella.spenta { color: var(--testo-2); }
@media (max-width: 767px) { .casa-colonna, .casa-passati > h2, .settimana > summary { width: 100%; } }

/* ── Casa: una foto per piatto, col nome sotto (meeting 01/10: «ci servirà la fotografia») ──
   La foto 4:5 intera, dall'alto, col fondale attorno al piatto (R2 54:01) e il filetto; sotto la riga piatto | prezzo,
   che resta com'era. Nel menù della settimana (dal 04/10, NB: «anche qui ci devono essere le foto dei piatti») sei in
   fila sugli schermi larghi, tre per due su quelli alti; l'apertura resta un viewport, ferma come Ona: le foto si
   stringono quanto serve per starci (--foto-h). Sulle finestre basse (e sui telefoni sotto i 740 px) l'apertura non è più
   ferma e le foto tengono la larghezza della colonna. Nei menù passati (dal 05/10, aperti sotto la loro riga) le stesse
   colonne e gli stessi corpi, senza il limite dell'altezza. */
.piatti--foto .foto { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #1B1F21; box-shadow: 0 0 0 1px var(--linea); }
.piatti--foto .foto img { width: 100%; height: 100%; object-fit: cover; }
.apertura { --apertura-v: calc(var(--m) * 2 + var(--testa-h) + var(--riga-menu) * 2 + 2rem); }
.apertura--centro .piatti--settimana, .settimana .piatti {
  --spazio: clamp(8px, 1.7vw, 24px);
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--spazio) * 1.5) var(--spazio);
  width: min(100%, 1280px); margin: 1.4rem auto 0; text-align: left;
  font-size: clamp(13px, 11.5px + .45vw, 18px); line-height: 1.25;
}
.apertura--centro .piatti--settimana {
  --foto-h: calc((100vh - var(--apertura-v) - 15rem) / 2);
  --foto-h: calc((100svh - var(--apertura-v) - 15rem) / 2);
}
/* sotto la riga: un po' d'aria prima della riga dopo */
.settimana .piatti { margin-block: clamp(16px, 2.2vw, 28px) clamp(32px, 4.4vw, 64px); }
@media (min-aspect-ratio: 1/1) {
  .apertura--centro .piatti--settimana { grid-template-columns: repeat(6, minmax(0, 1fr)); --foto-h: calc(100vh - var(--apertura-v) - 10rem); --foto-h: calc(100svh - var(--apertura-v) - 10rem); }
  .settimana .piatti { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.piatti--settimana :is(.foto, .riga) { width: min(100%, var(--foto-h) * .8); margin-inline: auto; }
@media (max-height: 559px), (max-width: 767px) and (max-height: 739px) {
  .apertura { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
  .apertura-testo { animation: none !important; filter: none; }
  .apertura--centro .piatti--settimana { --foto-h: 100vw; }
}
.piatti--foto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.piatti--foto li { display: block; }
/* la riga di sempre, piatto | prezzo; nella colonna stretta, se accanto al nome il prezzo non ci sta, va a capo a destra */
.piatti--foto .riga { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 1ch; margin-top: 5px; }
.piatti--foto .prezzo { flex: none; margin-left: auto; white-space: nowrap; }

/* ── Itinerary: le tappe, nella griglia di weareona (§ 3.2) ────────────────
   4 colonne da 1025 px (230 px a 1440, gap 62 × 120), 2 sotto (gap 11 a 390, come Ona); foto 0,7 col
   filetto, didascalia a tabella a due righe; passando sopra una scheda le altre si sfocano. Dietro, la
   linea tratteggiata del percorso (SAL A5), disegnata da ronda.js: le celle hanno il fondo pieno così
   la linea passa solo negli spazi fra le schede. */
.sopra:has(.tappe) { padding-inline: max(var(--lato), calc((100% - 1280px) / 2)); }
.tappe { position: relative; scroll-margin-top: calc(var(--m) + var(--testa-h) + 1rem); }
.tappe-griglia {
  position: relative; z-index: 1;
  display: grid; align-items: start;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 62px 120px;
}
@media (max-width: 1024px) { .tappe-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(11px, 2.9vmin, 22px); } }
.tappa-link { display: block; text-decoration: none; color: inherit; transition: filter .8s var(--curva); }
.tappa .foto { display: block; position: relative; overflow: hidden; aspect-ratio: 230 / 322; background: #1B1F21; box-shadow: 0 0 0 1px var(--linea); }
.tappa .foto img { width: 100%; height: 100%; object-fit: cover; }
.tappa .tabella { grid-template-columns: 1fr 1fr; margin-top: var(--spazio-menu); }
.tappa .tabella .cella { min-height: var(--riga-menu); background: var(--fondo); white-space: normal; padding-block: .2em; }
.tappa-link:hover .tabella .cella, .tappa-link:focus-visible .tabella .cella { background: var(--testo); color: var(--fondo); }
/* solo quando una scheda è davvero sotto il mouse (non negli spazi, non dopo un tocco) o ha il fuoco */
@media (hover: hover) { .tappe-griglia:has(.tappa-link:hover) .tappa-link:not(:hover) { filter: blur(4px); } }
.tappe-griglia:has(.tappa-link:focus-visible) .tappa-link:not(:focus-visible) { filter: blur(4px); }
.percorso { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.percorso .linea { fill: none; stroke: var(--linea); stroke-width: 1; stroke-dasharray: 4 6; }
.percorso .traccia { fill: none; stroke: #fff; stroke-width: 6; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--curva); }
.percorso.disegnato .traccia { stroke-dashoffset: 0; }

/* ── About (weareona § 5): i paragrafi, la tabella dei contatti, il piede ──
   Quattro paragrafi grandi a sinistra, larghi al più 1280 come Ona (§ 5.1); la tabella in una colonna da
   350 centrata, piena sul telefono, tre gruppi a 5 px l'uno dall'altro, l'intestazione piena che resta
   in alto mentre il gruppo scorre (§ 5.2); il piede centrato, col credito e le pagine legali (§ 5.5). */
.pagina-about { padding-inline: max(var(--lato), calc((100% - 1280px) / 2)); }
.about-testo .voce { max-width: none; }
.about-testo .voce + .voce { margin-top: .8em; }
.contatti { display: grid; gap: var(--spazio-menu); width: min(var(--info-w), 100%); margin: calc(var(--scatola-h) * 2) auto 0; }
@media (max-width: 767px) { .contatti { width: 100%; } }
.contatti-gruppo { display: grid; gap: var(--gap-cella); }
.contatti-gruppo .cella { min-height: var(--riga-menu); }
.contatti-gruppo h2 { position: sticky; top: calc(var(--m) + var(--testa-h) + var(--gap-cella)); z-index: 1; }
.piede--centro { max-width: none; margin: 0 auto; text-align: center; padding-top: var(--scatola-h); }
.piede--centro .legali { display: flex; flex-direction: column; align-items: center; margin: .4em 0 1.6em; }
.piede--centro .legali a { display: inline-block; padding-block: 3px; color: var(--testo); }   /* 24 px: WCAG 2.5.8 */
.piede--centro .lingue { justify-content: center; }

/* ── La pagina di un evento (weareona § 8): la galleria a tutto schermo ────
   Tre foto 0,667 alte quanto la finestra (600 × 900 a 1440), affiancate senza spazio, la centrale intera,
   fondo scuro; sul telefono una per volta, a schermo pieno. Si scorre col dito, col trascinamento, con le
   frecce (è un nastro con lo snap) e col clic sulle foto di lato (ronda.js). La card è nella scatola;
   senza JavaScript sta sotto la galleria. */
.galleria {
  --lastra: calc(100vh * .667); --lastra: calc(100svh * .667);
  display: flex; overflow-x: auto; overflow-y: hidden;
  height: 100vh; height: 100svh;
  padding-inline: calc((100% - var(--lastra)) / 2);
  background: var(--notte);
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  cursor: grab;
}
.galleria::-webkit-scrollbar { display: none; }
.galleria:focus-visible { outline-offset: -4px; }
.lastra { flex: none; width: var(--lastra); height: 100%; margin: 0; scroll-snap-align: center; }
.lastra picture, .lastra img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
/* nei browser che lo sanno fare si parte dalla foto di mezzo, con le altre due ai lati (come Ona) */
.lastra:nth-child(2) { scroll-initial-target: nearest; }
@media (max-width: 767px) { .galleria { --lastra: 100%; padding-inline: 0; } }
.evento-fonte { padding: var(--scatola-h) var(--lato) 0; }
.evento-fonte .scheda-info { width: min(var(--info-w), 100%); margin: 0 auto; }
.viva .evento-fonte { display: none; }   /* come le settimane di Casa: la nasconde ronda.js quando parte */
/* «Info» pieno quando il testo è aperto, come Ona; chiuso, la card resta titolo, date e i tre comandi */
.scheda-info [data-scheda-info][aria-expanded="true"] { background: var(--testo); color: var(--fondo); }
.scheda-info .testo[hidden] { display: none; }

.scheda .foto { position: relative; overflow: hidden; background: #1B1F21; box-shadow: 0 0 0 1px var(--linea); }
.scheda img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* dove la foto non c'è ancora: un rettangolo grigio che dice cosa andrà lì (regola di casa n. 3) */
.manca { display: flex; align-items: flex-end; width: 100%; padding: .8em; background: #C9CED0; color: var(--inchiostro); font-size: var(--t-ui); line-height: 1.35; }
.vino .manca, .soglia .manca { position: absolute; inset: 0; aspect-ratio: auto !important; }
.scheda .tabella { grid-template-columns: 1fr 1fr; margin-top: 1px; }

/* ── Wine: una bottiglia per schermata ─────────────────────────────────── */
html.wine { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
/* su Wine la scatola chiusa scorre anche sopra la vendita, dove le celle piene sono chiare: col vetro di .34 «Menu»
   arrivava a 1,98:1, e a .6 a 3,16:1 dove sotto passano le didascalie chiare (passo 7). Sopra le bottiglie c'è il nero: .78 non si vede.
   Lo stesso sullo Shop (dal 05/10 sul nero): sotto la scatola aperta passano le intestazioni piene, i cappelli crema e le t-shirt bianche */
html.wine, html.shop { --vetro: rgba(7, 8, 10, .78); }
.vino {
  position: relative;
  height: 100vh; height: 100svh;
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden;
  background: var(--notte);
  /* La bottiglia sta fra il menu e la scheda: nelle foto la cima è al 10% del fotogramma e la base all'84%
     (kit/media-sal-2909/LEGGIMI.md). Sulle finestre più larghe di 16:9 la foto è alta quanto la finestra e, sotto i
     900 px di altezza, il menu chiuso copriva la capsula (a 1440 × 789, la finestra vera di un portatile da
     1440 × 900: 11 px). Lì il riquadro della foto si accorcia, sopra e sotto, quel tanto che basta. */
  --aria-sopra: .10;
  --aria-sotto: .16;
  --spazio-sopra: calc(var(--m) + env(safe-area-inset-top) + var(--scatola-h) + 8px);
  --spazio-sotto: calc(var(--m) + env(safe-area-inset-bottom) + var(--riga) * 2 + var(--gap-cella) + 8px);
}
.vino .foto {
  position: absolute; inset: 0;
  top: max(0px, calc((var(--spazio-sopra) - var(--aria-sopra) * 100vh) / (1 - var(--aria-sopra))));
  top: max(0px, calc((var(--spazio-sopra) - var(--aria-sopra) * 100svh) / (1 - var(--aria-sopra))));
  bottom: max(0px, calc((var(--spazio-sotto) - var(--aria-sotto) * 100vh) / (1 - var(--aria-sotto))));
  bottom: max(0px, calc((var(--spazio-sotto) - var(--aria-sotto) * 100svh) / (1 - var(--aria-sotto))));
}
.vino img {
  width: 100%; height: 100%; object-fit: contain;
  /* sfuma i bordi della foto nel fondo: nessuna giuntura fra foto e pagina */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.vino .scheda-bassa { position: absolute; }
.vino .scheda-bassa .nome { letter-spacing: .02em; }

/* il momento del sito: la bottiglia sale dal buio quando la sua schermata arriva */
/* spente dal primo disegno (niente lampo); se lo script non arriva, un salvagente le accende dopo 3 s */
.js .vino img { opacity: 0; transform: scale(1.035); animation: salvagente 0s 3s forwards; }
@keyframes salvagente { to { opacity: 1; transform: none; } }
.vini-pronti .vino img { animation: none; transition: opacity 1.6s var(--curva), transform 2.6s var(--curva); }
.vini-pronti .vino.accesa img { opacity: 1; transform: none; }
.vini-pronti .vino .lettera { opacity: 0; transition: opacity .5s var(--curva); transition-delay: calc(.5s + var(--i) * 45ms); }
.vini-pronti .vino.accesa .lettera { opacity: 1; }

/* ── La vendita: sotto le quattro bottiglie di Wine (SAL A7), con la grafica dello Shop di prima ──
   Sul nero di Wine, come le foto. È un'area dello snap più alta della finestra: dentro si scorre libero. In alto
   lascia lo spazio della scatola chiusa (il riposo di Wine), anche sul telefono. */
.vendita {
  scroll-snap-align: start;
  padding: calc(var(--m) + var(--scatola-h) + clamp(3rem, 9vh, 7rem)) var(--lato) 0;
}
.prodotto, .vendita .sezione { scroll-margin-top: calc(var(--m) + var(--scatola-h) + 1rem); }
/* sullo Shop la scatola riposa aperta (sul telefono su due file): le ancore si fermano sotto */
.pagina .prodotto, .pagina .sezione { scroll-margin-top: calc(var(--m) + var(--testa-h) + 1rem); }
.nota { color: var(--testo-2); max-width: 60ch; }
.pagina > .nota, .vendita > .nota { margin-top: 1rem; }
.sezione { margin-top: clamp(3rem, 9vh, 6rem); }
.sezione > h2 {
  display: inline-flex; min-width: min(22rem, 100%); justify-content: flex-start;
  font-weight: 400; font-size: inherit;
  margin-bottom: clamp(16px, 2.2vw, 28px);
}
.prodotti {
  display: grid; gap: clamp(28px, 4vw, 48px) clamp(12px, 2.8vw, 40px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* le bottiglie in quattro colonne, gli astucci in tre: ogni gruppo riempie la sua riga, come nello Shop di prima */
@media (min-width: 900px) { .prodotti.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .prodotti.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Shop: la griglia dello shop di Chateau Marmont (meeting 01/10, M9: «senza i quadrati») ───────────────
   Misurata il 02/10 (kit/reference/marmont/, la collezione «apparel»): i prodotti scontornati sul fondo della pagina,
   niente riquadri; tre colonne da 769 px (a 1440 il contenuto è 380, 40 fra le colonne e 71 fra le righe: la griglia è
   larga 1220, al centro), una sotto (310 a 390, 40 dai bordi); il nome e il prezzo sotto, centrati (Marmont 22/30,7 e 16
   a 1440, 18,7 e 13,6 a 390, in Libre Baskerville corsivo: qui il serif dei testi, dritto). Sotto, i comandi del carrello. */
.merch-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 71px 40px; align-items: start; width: min(100%, 1220px); margin: 0 auto; }
@media (max-width: 768px) { .merch-griglia { grid-template-columns: minmax(0, 1fr); gap: 56px; width: min(100%, calc(100vw - 80px)); } }
.merch { text-align: center; }
.merch .foto { aspect-ratio: 1 / 1; }
.merch img { width: 100%; height: 100%; object-fit: contain; }
.merch .nome { margin-top: 10px; font-size: clamp(18.7px, 17.47px + .314vw, 22px); line-height: 1.4; }
.merch .prezzo { font-size: clamp(13.6px, 12.71px + .229vw, 16px); line-height: 1.4; font-variant-numeric: tabular-nums lining-nums; }
.merch .comandi { display: grid; gap: var(--gap-cella); width: min(14rem, 100%); margin: 14px auto 0; }
.merch .comandi .cella { min-height: var(--riga-menu); }
/* le taglie delle t-shirt: quattro celle come le voci del menu (S, M, L, XL); quella scelta è piena. Il radio è
   nascosto ma prende il fuoco, e l'anello lo porta la cella */
.taglie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-cella); }
.taglie .cella { position: relative; padding: 0; cursor: pointer; }
.taglie input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; }   /* 16: come ogni campo, iOS non ingrandisce */
.taglie .cella:hover, .taglie .cella:has(input:checked) { background: var(--testo); color: var(--fondo); }
.taglie .cella:has(input:focus-visible) { outline: 2px solid var(--testo); outline-offset: 2px; z-index: 1; }
.prodotto .tabella .cella { white-space: normal; padding-block: .3em; }
.prodotto .prezzo { font-variant-numeric: tabular-nums; }
.prodotto .aggiungi.fatto { background: var(--testo); color: var(--fondo); }
.no-js-avviso { margin-top: 1rem; }
/* i pulsanti del carrello compaiono solo quando il carrello è davvero partito */
.carrello-pronto .no-js-avviso { display: none; }
html:not(.carrello-pronto) .aggiungi, html:not(.carrello-pronto) .taglie { display: none; }
html:not(.carrello-pronto) .merch .comandi { display: none; }

/* ── Wine: la richiesta (meeting 01/10, M6; SAL-0110 D6–D8) ───────────────
   Un modulo solo, sul nero di Wine: le schede di prima col prezzo, e al posto di «Aggiungi» quante; poi gli altri
   formati e i dati. La cella «Quante» è la cella del bottone di prima: l'etichetta a sinistra, il numero a destra, nella
   sua cella. Senza frecce (si scrive il numero; quelle della tastiera funzionano lo stesso). */
.quantita { justify-content: space-between; gap: .5em; padding: 0 0 0 .8em; cursor: text; }
.prodotto .tabella .quantita { padding-block: 0; }
.quantita input {
  flex: none; align-self: stretch; width: 3.6em; min-height: var(--riga);
  margin: 0; padding: 0 .6em; border: 0; border-radius: 0; background: transparent;
  box-shadow: -1px 0 0 0 var(--linea); text-align: right; font-variant-numeric: tabular-nums;
  font-size: max(16px, var(--t-ui));   /* 16px: iOS non ingrandisce la pagina al fuoco */
  -moz-appearance: textfield; appearance: textfield;
}
@media (min-width: 768px) { .quantita input { font-size: var(--t-ui); } }
.quantita input::-webkit-inner-spin-button, .quantita input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quantita input:focus-visible { outline: 2px solid var(--testo); outline-offset: -3px; }
.quantita input::placeholder { color: var(--testo-2); opacity: 1; }
.quantita:has(input:not(:placeholder-shown)) { background: var(--attiva); }   /* le righe scelte si vedono a colpo d'occhio */
.formati { grid-template-columns: minmax(0, 1fr) auto; max-width: 36rem; }
.formato { flex-direction: column; align-items: flex-start; white-space: normal; padding-block: .35em; }
.formato-nota { color: var(--testo-2); }
.richiesta .modulo { max-width: 36rem; }

/* il carrello: una scheda in basso al centro, come la didascalia di weareona */
.carrello-barra { grid-template-columns: 1.2fr 1fr 1fr; width: min(24rem, calc(100% - 2 * var(--m))); }
.carrello-barra[hidden] { display: none; }
.carrello-barra .cella.piena { background-color: var(--testo); }
.carrello-barra button.cella.piena:hover { background-color: var(--fondo); color: var(--testo); }

/* ── Moduli: ogni campo è una riga della tabella ────────────────────────── */
.modulo { width: 100%; }
.modulo .tabella { grid-template-columns: minmax(6.5rem, 1fr) 2.6fr; }
.modulo label.cella { justify-content: flex-start; text-align: left; white-space: normal; padding-block: .35em; }
.modulo .campo { padding: 0; align-items: stretch; }
.modulo input, .modulo select, .modulo textarea {
  width: 100%; min-height: var(--riga);
  margin: 0; padding: .3em .8em;
  border: 0; border-radius: 0; background: transparent;
  font-size: max(16px, var(--t-ui));  /* 16px: iOS non ingrandisce la pagina al fuoco */
  line-height: 1.3;
  -webkit-appearance: none; appearance: none;
}
@media (min-width: 768px) { .modulo input, .modulo select, .modulo textarea { font-size: var(--t-ui); } }
.modulo textarea { min-height: calc(var(--riga) * 2.6); resize: vertical; }
.modulo select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.2em) 55%, calc(100% - .85em) 55%;
  background-size: .35em .35em; background-repeat: no-repeat;
  padding-right: 2em;
}
.modulo input[type="date"] { min-width: 0; }
.modulo input:focus-visible, .modulo select:focus-visible, .modulo textarea:focus-visible { outline: 2px solid var(--testo); outline-offset: -3px; }
.modulo .spunta { justify-content: flex-start; gap: .7em; white-space: normal; text-align: left; padding-block: .35em; cursor: pointer; }
.modulo .spunta input {
  width: 1.05em; height: 1.05em; min-height: 0; padding: 0; flex: none;
  box-shadow: 0 0 0 1px var(--linea); background: transparent;
}
.modulo .spunta input:checked { background: var(--testo); box-shadow: 0 0 0 1px var(--testo), inset 0 0 0 2px var(--fondo); }
.modulo button[type="submit"] { min-height: 44px; }  /* obiettivo 44px anche sul telefono */
.modulo .nota, .modulo .esito { padding: .6em 0 0; }
.modulo .esito:empty { display: none; }
.modulo [aria-invalid="true"] { background-image: linear-gradient(var(--attiva), var(--attiva)); }
.modulo ::placeholder { color: var(--testo-2); opacity: 1; }

/* ── Finestre (Prenota, carrello) ───────────────────────────────────────── */
dialog.finestra {
  width: min(30rem, calc(100% - 2 * var(--m)));
  max-height: calc(100% - 2 * var(--m));
  margin: auto; padding: 0; border: 0;
  --fondo: var(--gesso); --testo: var(--inchiostro); --testo-2: var(--fumo);
  --linea: rgba(18, 21, 23, .82); --attiva: rgba(18, 21, 23, .12);
  background: var(--fondo); color: var(--testo);
  box-shadow: 0 0 0 1px var(--linea);
  overflow: auto;
  overscroll-behavior: contain;
  color-scheme: light;
}
dialog.finestra::backdrop { background: rgba(7, 8, 10, .55); -webkit-backdrop-filter: blur(6px) grayscale(.6); backdrop-filter: blur(6px) grayscale(.6); }
dialog.finestra[open] { animation: entra .5s var(--curva); }
html.finestra-aperta { overflow: hidden; }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }
.finestra .dentro { padding: 1px; }
.finestra .testa { grid-template-columns: 1fr auto; position: sticky; top: 1px; z-index: 1; background: var(--fondo); }
.finestra .testa h2 { font: inherit; }
.finestra .corpo { padding: var(--m) 1px 1px; }
.finestra .corpo > * + * { margin-top: var(--m); }

.pagina-prenota .modulo { margin-top: clamp(2rem, 6vh, 3.5rem); max-width: 32rem; }
.pagina-prenota .accanto { display: none; }
@media (min-width: 900px) {
  .pagina-prenota { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(32px, 6vw, 120px); align-items: start; }
  .pagina-prenota > h1 { grid-column: 1; }
  .pagina-prenota > .modulo { grid-column: 1; }
  .pagina-prenota .accanto {
    display: block; grid-column: 2; grid-row: 1 / span 2;
    position: sticky; top: calc(var(--m) + var(--testa-h) + 2rem);
    height: min(78vh, 60rem); overflow: hidden; background: var(--notte);
    box-shadow: 0 0 0 1px var(--linea);
  }
  .pagina-prenota .accanto img { width: 100%; height: 100%; object-fit: cover; }
}

.righe-carrello { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }
.righe-carrello .cella { white-space: normal; padding-block: .35em; }
.righe-carrello .qta { min-width: 2.6em; font-variant-numeric: tabular-nums; }
.righe-carrello button.cella { min-width: var(--riga); padding: 0; }

/* ── Save the date (NB, 14/10/2026): una pagina sola, sul nero, fuori dal menu ──
   Sul dominio è l'unica pagina (vercel.json). Il marchio in alto, «Save the date» e la data nel serif dei testi, una
   riga, il modulo a tabella dei moduli di sempre, largo come quello di Prenota; sotto, il piede centrato di About.
   Niente scatola del menu: le voci porterebbero a pagine che sul dominio non ci sono. */
/* I colori del flyer dell'apertura (NB, 14/10: «il background, un po' blurred, del colore gradient del flyer»). La
   sfumatura è misurata sul file (CASA-RONDA_apertura_con-copy): marrone in alto, ambra a metà (più chiara a destra), oliva
   sotto il tavolo, il marrone del campo in fondo. Sotto un velo scuro del 40%: a piena forza l'ambra col testo crema sta a
   2,5:1, così sta sopra 4,5:1 dappertutto. La crema del testo è quella del flyer. La sfumatura è un velo fisso dietro la
   pagina (su iOS lo sfondo fixed non c'è) */
html.lancio {
  --fondo: #2A190E;                         /* il marrone più scuro: il testo delle celle piene */
  --testo: #F3EAD9;                         /* la crema del flyer */
  --testo-2: #F3EAD9;                       /* come il flyer: una crema sola; più spenta, sull'ambra scendeva a 4,02:1 */
  --linea: rgba(243, 234, 217, .66);
  --vetro: rgba(42, 25, 14, .4);
  --vetro-scheda: rgba(42, 25, 14, .9);
  --attiva: rgba(243, 234, 217, .16);
  background: #2A190E;
}
html.lancio body { background: transparent; }
html.lancio body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(14, 8, 4, .4), rgba(14, 8, 4, .4)),
    radial-gradient(55% 40% at 95% 46%, rgba(222, 155, 78, .45), transparent 72%),
    linear-gradient(to bottom, #613D27 0%, #835736 20%, #A16D45 32%, #BC864F 44%, #C08A4F 52%, #A97A44 62%, #916C34 72%, #674021 78%, #45291A 86%, #2F1B0E 100%);
}
.lancio-pagina {
  display: grid; justify-items: center; align-content: center; text-align: center;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--m) + env(safe-area-inset-top) + 2.5rem) var(--lato) 2.5rem;
}
.lancio-marchio {
  display: block; width: min(15rem, 62vw); aspect-ratio: 3375.78 / 1000;
  margin-bottom: clamp(2.5rem, 9vh, 5.5rem);
  background: currentColor;
  -webkit-mask: url("logo.svg") center / contain no-repeat;
  mask: url("logo.svg") center / contain no-repeat;
}
a.lancio-marchio:focus-visible { outline-offset: 6px; }
.lancio-pagina .voce { max-width: none; }
/* il posto sotto la data: porta alla mappa, col filetto sottile del serif */
.lancio-luogo a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
.lancio-testo { max-width: 72ch; margin: 1.4rem auto 0; text-wrap: balance; }
.lancio-pagina .modulo { width: min(30rem, 100%); margin-top: clamp(2rem, 6vh, 3.5rem); text-align: left; }
.lancio-pagina .modulo .nota { max-width: none; text-align: center; }
/* l'esito, al posto del modulo: prende il fuoco (ronda.js) e lo dice a voce */
.lancio-ok { margin-top: clamp(2rem, 6vh, 3.5rem); }
.lancio-ok:focus { outline: none; }
/* la trappola per i robot: fuori dallo schermo e fuori dal giro del tabulatore */
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.piede--lancio { padding-top: 0; }
.piede--lancio .legali { margin-top: 0; }
/* un bottone che si legge come un link: «Preferenze cookie», nel piede e nell'informativa */
.collegamento { display: inline; margin: 0; padding: 3px 0; border: 0; background: none; color: var(--testo); font: inherit; text-decoration: underline; cursor: pointer; }

/* l'informativa: una colonna nel serif dei testi, le intestazioni in cella piena come quelle di Wine e Shop, le tabelle
   a filetto (sul telefono scorrono di lato) */
.pagina-legale {
  width: min(46rem, 100%); margin: 0 auto;
  padding: calc(var(--m) + env(safe-area-inset-top) + 2.5rem) var(--lato) 3.5rem;
  font-family: var(--testi); font-size: clamp(15px, 14px + .25vw, 17px); line-height: 1.55;
}
.pagina-legale .lancio-marchio { width: min(10rem, 45vw); margin: 0 auto clamp(2rem, 6vh, 3.5rem); }
.pagina-legale h1 { font-size: var(--t-voce); line-height: 1.2; font-weight: 330; letter-spacing: -.01em; }
.pagina-legale .aggiornata { margin-top: .4rem; color: var(--testo-2); font: 400 var(--t-ui) / 1.5 var(--mono); }
.pagina-legale h2 {
  display: flex; align-items: center; width: fit-content; min-width: min(22rem, 100%); max-width: 100%; min-height: var(--riga);
  margin: 2.4rem 0 .9rem; padding: .3em .8em;
  background: var(--testo); color: var(--fondo); font: 400 var(--t-ui) / 1.25 var(--mono);
}
.pagina-legale p { max-width: 64ch; }
/* il serif ha un peso solo: le etichette in testa ai paragrafi stanno in Ronda Mono, come le etichette del sito */
.pagina-legale strong { font-family: var(--mono); font-size: .86em; font-weight: 400; }
.pagina-legale p + p { margin-top: .8em; }
.pagina-legale code { font-family: var(--mono); font-size: .86em; }
.scorre { overflow-x: auto; margin: .9em 0; }
.pagina-legale table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9em; line-height: 1.4; }
.pagina-legale th, .pagina-legale td { padding: .55em .7em; border: 1px solid var(--linea); text-align: left; vertical-align: top; }
.pagina-legale th { color: var(--testo-2); font: 400 var(--t-ui) / 1.4 var(--mono); }

/* ── Il banner dei cookie (misurazione.md § 3): una scheda in basso al centro, come quella della home ──
   Quattro celle uguali: Rifiuta, Accetta, Preferenze e la X, con la stessa evidenza degli altri comandi (Garante). */
.consenso {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--m) + env(safe-area-inset-bottom));
  width: min(30rem, calc(100% - 2 * var(--m)));
  background-color: var(--vetro-scheda);
  -webkit-backdrop-filter: blur(10px) saturate(.4);
  backdrop-filter: blur(10px) saturate(.4);
  text-align: left;
}
.consenso[hidden] { display: none; }
.consenso .tabella { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.consenso .cella { min-height: var(--riga-menu); padding: 0 .3em; }
.consenso .testo, .consenso .preferenze .cella { justify-content: flex-start; padding: .55em .8em; text-align: left; white-space: normal; line-height: 1.45; }
.consenso .preferenze { display: grid; gap: var(--gap-cella); }
.consenso .preferenze[hidden] { display: none; }
.consenso .spunta { gap: .7em; cursor: pointer; }
.consenso .spunta input {
  flex: none; width: 1.05em; height: 1.05em; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; box-shadow: 0 0 0 1px var(--linea);
}
.consenso .spunta input:checked { background: var(--testo); box-shadow: 0 0 0 1px var(--testo), inset 0 0 0 2px var(--fondo); }
.consenso .spunta input:focus-visible { outline: 2px solid var(--testo); outline-offset: 2px; }

/* ── La vista dei segnaposto (#segnaposto in coda all'indirizzo) ────────── */
.vedi-segnaposto [data-segnaposto] { position: relative; outline: 1px dashed #D1402F; outline-offset: 1px; }
.vedi-segnaposto [data-segnaposto]::after {
  content: attr(data-segnaposto);
  position: absolute; left: 0; top: 0; z-index: 90; transform: translateY(-100%);
  background: #D1402F; color: #fff; font-size: 10px; line-height: 1.2; padding: 1px 3px; white-space: nowrap;
}

/* ── Movimento ridotto: tutto fermo ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; transition-delay: 0s !important; }
  html.wine { scroll-snap-type: none; scroll-behavior: auto; }
  .js .vino img, .vino .lettera { opacity: 1 !important; transform: none !important; animation: none !important; }
  /* Casa: niente fermo né sfocatura, niente scorrimento morbido */
  html.casa { scroll-behavior: auto; }
  .apertura { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
  .apertura-testo { animation: none !important; filter: none; }
  .sopra { min-height: 0; }
  html.itinerary { scroll-behavior: auto; }
}

/* ── Contrasto forzato (Windows) ───────────────────────────────────────── */
@media (forced-colors: active) {
  .cella { border: 1px solid CanvasText; }
  .cella.piena, .cella[aria-current="page"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .marchio::before { background: CanvasText; forced-color-adjust: none; }
}