/* 01-tokens.css */
/* ============================================================
   NURA, gettoni.

   La tavolozza non viene dal filmato: il cliente ha un'identita'. Il
   suo foglio di stile dichiara otto colori e ne usa tre: vino
   #952C45 (il colore primario, la barra, i bottoni), crema #F9EAC8 e
   zafferano #F2A500. Il vino e' anche il fondo del marchio nei PDF
   dei menu. Il riferimento (adovasio.com) da' la carta crema
   #F0F0E8 e il quasi nero #1E1E1E; qui la carta e' tirata verso la
   loro crema e il nero e' un inchiostro caldo.

   Il materiale conferma: la ghirlanda di calendule sulla tavola
   dell'apertura e' lo zafferano, e i sari sono fra il fucsia e il
   vino. Indaco #1E1176 e viola #731F9E, che il loro sito usa per il
   piede e i bottoni secondari, sono lasciati fuori: con tre colori
   forti su una pagina il documento di avvio parlerebbe di «Indian
   catering», ed e' esattamente cio' che chiede di evitare.

   Ogni rapporto qui sotto e' calcolato, non stimato. Vedi DESIGN.md.
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/albert-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/albert-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- fondi ---------------------------------------------------
     La crema del riferimento (#F0F0E8) scaldata verso la loro
     (#F9EAC8). Il ritmo del sito e' carta, poi una fascia appena
     piu' scura, poi il vino una volta sola per pagina. */
  --paper:    #F6F1E8;
  --paper-2:  #ECE4D6;   /* la fascia, e il piede del riferimento */
  --card:     #FFFFFF;   /* i pannelli, come i pannelli del riferimento */
  --wine:     #952C45;   /* il loro colore primario, dal foglio di stile e dai PDF */
  --wine-2:   #7A2238;   /* il vino premuto, e le lastre sul vino */
  --wine-rgb: 149, 44, 69;   /* il vino come tripla, per le tinte leggere della pianta */

  /* --- inchiostri ---------------------------------------------- */
  --ink:      #1C1917;   /* 15,54:1 su carta · 13,85:1 sulla fascia */
  --body:     #4C4640;   /*  8,27:1 su carta ·  7,37:1 sulla fascia */
  --muted:    #756C63;   /*  4,57:1 su carta ·  4,08:1 sulla fascia: etichette e
                             note, mai un paragrafo sulla fascia */
  --on-wine:      #FBF3EA;   /* 7,02:1 su vino */
  --on-wine-soft: #E6C6CE;   /* 4,89:1 su vino */

  /* --- il vino come parola -------------------------------------
     Il vino e' scuro abbastanza da scrivere: 6,85:1 sulla carta,
     6,11:1 sulla fascia. Collegamenti, la parola marcata, i numerali. */
  --wine-text: #8A2740;  /* 7,63:1 su carta */

  /* --- lo zafferano --------------------------------------------
     E' la calendula sulla tavola dell'apertura ed e' il loro
     #F2A500. Sulla carta sta a 1,84:1: e' un filetto e un pallino,
     MAI una parola. Sul vino sta a 3,73:1, cioe' grafica. Le parole
     in zafferano usano la variante scura, 5,14:1 sulla carta. */
  --saffron:      #F2A500;
  --saffron-text: #8F5A00;

  /* --- filetti -------------------------------------------------
     --line separa e basta. --line-ui e' il bordo di un campo, cioe'
     interfaccia, e la norma gli chiede 3:1: 3,40 su carta, 3,03
     sulla fascia, 3,83 sul bianco. */
  --line:     #DCD3C4;
  --line-ui:  #8A8176;
  --focus:    #8A2740;
  --alert:    #A8321E;   /* 5,94:1 su carta */

  /* --- la velatura sopra i filmati -----------------------------
     Un nero caldo, non il vino: la prima versione era vino portato
     quasi al nero e sul filmato si leggeva come una lastra rossa. E'
     leggera di proposito: il contrasto delle parole lo fa l'alone
     intorno alle lettere (04-scrolly.css), non la lastra. */
  --veil: 22, 18, 16;

  /* --- tipografia ----------------------------------------------
     Due caratteri, come nel riferimento: un serif a forte contrasto
     usato grande e LEGGERO per i titoli, una grottesca per tutto il
     resto. Fraunces a 300 ha i terminali a goccia della «f» e le
     grazie sottili del riferimento; a 400 tiene la lista dei
     filtri. Albert Sans ha la «O» tonda e la «V» dritta della
     scritta del riferimento. Nessuno dei due e' nel registro. */
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans:  'Albert Sans', ui-sans-serif, system-ui, -apple-system,
           'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --t-h1:    clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem);
  --t-h2:    clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --t-h3:    clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
  --t-lede:  clamp(1.06rem, .98rem + .35vw, 1.28rem);
  --t-body:  1.0625rem;
  --t-small: .9375rem;
  --t-label: .75rem;

  /* --- forma ---------------------------------------------------
     Del riferimento: fotografie a spigolo vivo, che e' l'unica
     forma dura del sito; pannelli bianchi a raggio 12; pastiglie
     piene per tutto cio' che si preme. Nessuna ombra tranne cio' che
     galleggia davvero (il menu, il pannello di contatto). */
  --r:      12px;
  --r-sm:   8px;
  --r-pill: 999px;

  /* --- ritmo ---------------------------------------------------- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;
  --s4: 1rem;    --s5: 1.5rem;  --s6: 2rem;
  --s7: 3rem;    --s8: 4rem;    --s9: 6rem;
  --s10: 8rem;

  /* Il riferimento vive di vuoto: il margine e' piu' largo del solito. */
  --gutter:   clamp(1.25rem, .5rem + 3vw, 3.5rem);
  --measure:  36rem;
  --page-max: 92rem;

  --header-h: 72px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 900px) {
  :root { --header-h: 62px; }
}

/* 02-base.css */
/* ============================================================
   Fondamenta: reimpostazione, tipografia, occhielli, bottoni.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s5));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }   /* con width e height veri negli attributi, senza
                           questa riga il browser schiaccia sull'altezza
                           dichiarata e le fotografie restano stirate */

/* ------------------------------------------------------------
   I titoli sono in serif, grandi e leggeri: peso 300, mai il
   grassetto, come fa il riferimento con «Different that never fade».
   Le sottigliezze di Fraunces vivono sull'asse ottico: `opsz` alto
   sui titoli grandi, cosi' le grazie si affinano; basso sui titoli
   piccoli, cosi' non si spezzano.
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.012em;
  text-wrap: balance;
  font-variation-settings: 'opsz' 144;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 {
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  font-variation-settings: 'opsz' 48;
}
p { margin: 0; }
p + p { margin-top: .85em; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--body);
  text-wrap: pretty;
}
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
.prose h3 { margin: var(--s6) 0 var(--s3); }
.prose h3:first-child { margin-top: 0; }
.prose--long { max-width: 44rem; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: .7rem 1.1rem; background: var(--wine); color: var(--on-wine);
  border-radius: var(--r-pill); text-decoration: none; font-weight: 500;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: .6rem; }

/* La parola marcata: in vino, che sulla carta scrive. */
.ul { color: var(--wine-text); }

/* Il segnaposto si VEDE: un «da confermare» che si nota a colpo
   d'occhio non finisce pubblicato per sbaglio. */
.todo {
  color: var(--alert);
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   L'OCCHIELLO.
   Una parola piccola in grottesca, con un pallino zafferano davanti.
   Niente pastiglia (il riferimento non ne ha) e niente filetto corto:
   Piero non vuole trattini decorativi davanti alle etichette.
   ------------------------------------------------------------ */
.label {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 var(--s4);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.label::before {
  content: '';
  width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%;
  background: var(--saffron);
}

/* ------------------------------------------------------------
   IL BOTTONE.
   La pastiglia del riferimento: piena, piccola, testo in
   grottesca a 14px. Vino invece di nero, perche' il vino e' il
   loro. Sul filmato la pastiglia e' crema con testo scuro, come fa
   il riferimento con «Check availability».
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.35rem;
  background: var(--wine);
  color: var(--on-wine);
  border: 0;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: var(--wine-2); }
.btn--sm { padding: .62rem 1.05rem; font-size: .875rem; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-ui);
}
.btn--ghost:hover { background: var(--card); color: var(--ink); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: #fff; color: var(--ink); }
.btn-meta { font-weight: 400; color: var(--muted); font-size: .8125rem; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* Elenco puntato: il pallino in zafferano, che e' grafica. */
.dots { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: .55rem; }
.dots li { position: relative; padding-left: 1.4rem; }
.dots li::before {
  content: ''; position: absolute; left: 0; top: .66em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--saffron);
}

/* Etichette a pastiglia chiara, per i tratti di una scheda. */
.tags { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tags li {
  padding: .2rem .6rem;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  font-size: var(--t-label);
  letter-spacing: .02em;
  color: var(--ink);
}

/* La freccia dei collegamenti dentro un titolo. */
.go {
  display: inline-block; width: .6em; height: .6em; margin-left: .35em;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-.05em);
  transition: transform .18s var(--ease);
}
a:hover .go { transform: rotate(45deg) translate(.12em, -.17em); }

.table-note { margin-top: var(--s4); font-size: var(--t-small); color: var(--muted); max-width: 62ch; }

/* ------------------------------------------------------------
   Entrate in scena. Dietro `.js`, altrimenti con il JavaScript
   spento la pagina resta bianca. Tre reti in app.js.
   ------------------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* 03-layout.css */
/* ============================================================
   Impaginazione: griglia, fasce, testata, menu, piede.
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s5) var(--s5);
  width: min(100% - var(--gutter) * 2, var(--page-max));
  margin-inline: auto;
}
.cell { grid-column: var(--from, 1) / var(--to, 13); min-width: 0; }
@media (max-width: 900px) { .cell { grid-column: 1 / -1; } }

.section { padding-block: clamp(3.5rem, 2rem + 5vw, 7.5rem); }
.section--tight { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem); }

/* Le fasce: la carta, la fascia appena piu' scura, e il vino una
   volta sola per pagina. Separazione per fondo: nessun bordo. */
.band-soft { background: var(--paper-2); }
.band-card { background: var(--card); }
.band-wine { background: var(--wine); color: var(--on-wine-soft); }
.band-wine h1, .band-wine h2, .band-wine h3 { color: #fff; }
.band-wine .lede, .band-wine .prose { color: var(--on-wine); }
.band-wine .label { color: var(--on-wine-soft); }
.band-wine .label::before { background: var(--saffron); }
/* il grigio delle etichette sulla fascia fa 4,08:1: sotto la soglia per un testo di 12 px */
.band-soft .label, .band-soft .table-note { color: var(--body); }
/* sul vino la pastiglia piena vino sparirebbe: diventa carta */
.band-wine .btn:not(.btn--ghost) { background: var(--paper); color: var(--ink); }
.band-wine .btn:not(.btn--ghost):hover { background: #fff; }
.band-wine .table-note { color: var(--on-wine-soft); }
.band-wine .todo { color: #F6C1B4; }
.band-soft + .band-soft, .band-card + .band-card { padding-top: 0; }

.section-head h2 { max-width: 16ch; }
.section-head--center { max-width: none; text-align: center; }
.section-head--center h2 { margin-inline: auto; }
.section-head--center .label { justify-content: center; }
.section-aside { align-self: end; max-width: 44ch; }
@media (min-width: 901px) { .section-aside { padding-bottom: .4rem; } }

/* ------------------------------------------------------------
   TESTATA.

   Il riferimento: marchio centrato, niente barra, galleggia sul
   contenuto. Qui con le voci in chiaro, tre per lato, perche' un
   sito di dieci pagine non si nasconde dietro un bottone.

   Sopra l'apertura e' trasparente e bianca; appena l'apertura esce
   dallo schermo (app.js scrive data-past sulla radice) diventa crema
   piena. Su tutte le altre pagine e' crema fin dall'inizio.
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s4);
  height: var(--header-h);
  padding-inline: var(--gutter);
  background: var(--paper);
  color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.hd-left { display: flex; align-items: center; gap: var(--s5); }
.hd-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--s5); }

.site-brand { display: block; color: inherit; }
.site-brand .logo { width: clamp(88px, 7.6vw, 112px); height: auto; }

.nav-main ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.9rem, .3rem + 1.4vw, 1.8rem); }
.nav-link {
  position: relative;
  display: inline-block;
  padding: .4rem 0;
  font-size: .9375rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .15rem;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav-link:hover::after, .nav-link[aria-current='page']::after { transform: none; }

.lang-switch {
  display: inline-grid; place-items: center;
  min-width: 2.3rem; height: 2.3rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  color: inherit; text-decoration: none;
  opacity: .85;
  position: relative;
}
/* il tondo resta di 37 px, il dito ne ha 45: un margine invisibile */
.lang-switch::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; }
.lang-switch:hover { opacity: 1; }

/* Sopra il filmato: trasparente, bianca, con una lavata dall'alto che
   appartiene alla TESTATA e non alla pellicola (lezione
   SuperAnimatori): si vede come un'ombra di barra, non come un cielo
   spento. Tutto dietro `.js`: senza JavaScript nessuno scrive
   data-past, e una barra bianca resterebbe bianca sulla crema.
   Le regole con data-past vengono DOPO e hanno la stessa specificita'
   piu' uno, cosi' vincono in tutt'e due i sensi. */
html.js body[data-film] .site-header {
  background:
    /* un'ombra in piu' dietro il marchio: nel filmato il sole sta in
       alto al centro per sei secondi e il marchio bianco ci sparirebbe */
    radial-gradient(ellipse 70% 200% at 50% 0%, rgba(var(--veil), .34), rgba(var(--veil), 0) 70%),
    linear-gradient(to bottom, rgba(var(--veil), .62), rgba(var(--veil), 0));
  color: #fff;
}
/* Le voci e il marchio sopra il filmato portano un alone come le parole
   dell'apertura: e' l'unico modo di reggere un cielo bianco senza una
   fascia. Sparisce con data-past, quando la barra e' crema. */
html.js:not([data-past]) body[data-film] .site-header .nav-link,
html.js:not([data-past]) body[data-film] .site-header .lang-switch,
html.js:not([data-past]) body[data-film] .site-header .menu-toggle {
  text-shadow: 0 1px 2px rgba(var(--veil), .50), 0 0 6px rgba(var(--veil), .45), 0 0 14px rgba(var(--veil), .50), 0 0 30px rgba(var(--veil), .45);
}
html.js:not([data-past]) body[data-film] .site-brand .logo {
  filter: drop-shadow(0 1px 2px rgba(var(--veil), .5)) drop-shadow(0 0 10px rgba(var(--veil), .5)) drop-shadow(0 0 24px rgba(var(--veil), .4));
}
html.js body[data-film] .cta-date { background: var(--paper); color: var(--ink); }
html.js body[data-film] .cta-date:hover { background: #fff; }
html.js[data-past] body[data-film] .site-header { background: var(--paper); color: var(--ink); }
html.js[data-past] body[data-film] .cta-date { background: var(--wine); color: var(--on-wine); }
html.js[data-past] body[data-film] .cta-date:hover { background: var(--wine-2); }

/* IL BOTTONE DEL MENU: una pastiglia con la parola e un disco vino con
   una campana da portata disegnata (per un catering «menu» ha due
   sensi). Al passaggio o al tocco il coperchio si alza e sale un filo di
   vapore. Stessa pastiglia dei bottoni dei capitoli e dei servizi. */
.menu-toggle {
  display: none; align-items: center; gap: .55rem;
  min-height: 44px; padding: .3rem .3rem .3rem .95rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line-ui);
  font-size: .9375rem; font-weight: 500; color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.menu-toggle:hover { background: var(--card); }
.menu-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.menu-ic {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--wine); color: #fff;
}
.menu-ic svg { width: 22px; height: 22px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.menu-ic circle { fill: currentColor; stroke: none; }
.mi-lid { transform-box: view-box; transform-origin: 19px 16px; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.mi-steam { opacity: 0; transform: translateY(2px); transition: opacity .3s var(--ease), transform .5s var(--ease); }
.menu-toggle:hover .mi-lid, .menu-toggle:active .mi-lid, .menu-toggle:focus-visible .mi-lid,
.menu-toggle[aria-expanded='true'] .mi-lid { transform: translate(-1.5px, -4px) rotate(-24deg); }
.menu-toggle:hover .mi-steam, .menu-toggle:active .mi-steam, .menu-toggle:focus-visible .mi-steam,
.menu-toggle[aria-expanded='true'] .mi-steam { opacity: 1; transform: translateY(-1.5px); }
/* sopra il filmato la pastiglia e' crema piena, come le altre */
html.js:not([data-past]) body[data-film] .site-header .menu-toggle { background: var(--paper); color: var(--ink); box-shadow: 0 4px 18px rgba(var(--veil), .25); text-shadow: none; }

/* Sotto i 1080 px le voci spariscono: il marchio va a sinistra, a
   destra restano la lingua e il menu. */
@media (max-width: 1080px) {
  .nav-main { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header { grid-template-columns: auto 1fr; }
  .hd-left { display: none; }
  .site-brand { justify-self: start; }
  .hd-right { gap: var(--s3); }
}
@media (max-width: 640px) {
  .cta-date { display: none; }
  .site-brand .logo { width: 92px; }
}
@media (max-width: 350px) {
  .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-toggle { padding-left: .3rem; }
}

/* ------------------------------------------------------------
   MENU a tutto schermo. Si apre con :target, quindi funziona anche
   prima che il JavaScript arrivi. Crema, come una pagina.
   ------------------------------------------------------------ */
.site-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
.site-menu:target, .site-menu.is-open { opacity: 1; visibility: visible; }
html.menu-open { overflow: hidden; }
.menu-inner {
  min-height: 100%;
  display: flex; flex-direction: column; gap: var(--s7);
  max-width: var(--page-max); margin-inline: auto;
  padding: var(--s5) var(--gutter) var(--s7);
}
.menu-close {
  position: absolute; top: calc(var(--header-h) / 2); right: var(--gutter);
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-ui);
  color: var(--ink); font-size: 1.4rem; line-height: 1; text-decoration: none;
}
.menu-mark { display: block; width: 120px; margin-top: .6rem; color: var(--wine); }
.menu-list { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.menu-list li + li { border-top: 1px solid var(--line); }
.menu-list a {
  display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; gap: 0 var(--s3);
  padding-block: var(--s3);
  color: var(--ink); text-decoration: none;
}
.menu-list em { font-style: normal; font-size: var(--t-label); font-weight: 500; letter-spacing: .1em; color: var(--muted); }
.menu-list span { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem); letter-spacing: -.01em; }
.menu-list small { grid-column: 2; font-size: var(--t-small); color: var(--muted); }
.menu-list a:hover span, .menu-list a[aria-current='page'] span { color: var(--wine-text); }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin-top: auto; padding-top: var(--s5); border-top: 1px solid var(--line); }
.menu-foot .btn--paper { background: var(--wine); color: var(--on-wine); }
.menu-tel { font-size: var(--t-lede); color: var(--ink); text-decoration: none; }
.menu-langs { margin-left: auto; display: flex; gap: .9rem; }
.menu-langs a { font-size: var(--t-small); color: var(--muted); text-decoration: none; }
.menu-langs a[aria-current='true'] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------
   PIEDE. Il riferimento: una frase in serif, una pastiglia, il
   marchio, i collegamenti, l'anno. Su vino, che e' il loro.
   ------------------------------------------------------------ */
.site-footer { background: var(--wine); color: var(--on-wine-soft); padding-block: var(--s9) var(--s6); }
.footer-top { align-items: start; }
.footer-claim {
  font-family: var(--serif); font-weight: 300; font-variation-settings: 'opsz' 96;
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em;
  color: #fff; max-width: 18ch; margin-bottom: var(--s5);
}
.footer-col h2 {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-wine-soft);
  margin-bottom: var(--s4);
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-list a { color: var(--on-wine); text-decoration: none; font-size: var(--t-small); }
.footer-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-mid { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid rgba(251,243,234,.22); align-items: end; }
.footer-mark { display: block; width: clamp(160px, 22vw, 300px); color: var(--on-wine); }
.footer-contacts { font-size: var(--t-small); display: grid; gap: .35rem; }
.footer-contacts a { color: var(--on-wine); text-decoration: none; }
.footer-contacts a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-contacts span { color: var(--on-wine-soft); }
.footer-social { display: flex; gap: var(--s4); margin-top: .5rem; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid rgba(251,243,234,.22);
  font-size: var(--t-label); color: var(--on-wine-soft);
}
.footer-legal a { color: var(--on-wine); text-decoration: none; display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
@media (max-width: 900px) {
  .footer-mid { align-items: start; }
  .footer-mark { width: 180px; margin-bottom: var(--s5); }
}

/* 04-scrolly.css */
/* ============================================================
   I due filmati.

   DUE FILMATI, DUE MESTIERI, DUE FORMATI. L'apertura mostra il
   servizio (la tavola apparecchiata, la famiglia che arriva, la
   ghirlanda di calendule, i camerieri davanti alla villa, il
   brindisi) e riproduce e basta: <video> muto in ciclo. Il piano
   sequenza racconta COME nasce un matrimonio (la videochiamata da
   New York, il tavolo con le spezie, la pianta, la cucina che
   arriva, la sera) e si scrubba: 481 JPEG su canvas.

   Tutt'e due a pieno campo, 100svh. La testata galleggia sopra
   l'apertura, trasparente; sopra il piano sequenza e' gia' crema.
   ============================================================ */

.videohero {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  background: var(--wine-2);
  isolation: isolate;
  /* la barra e' sticky e trasparente: il palco comincia sotto di
     lei nel flusso, quindi si tira su della sua altezza */
  margin-top: calc(var(--header-h) * -1);
}
.film-stage { position: absolute; inset: 0; }
.vh-video, .vh-poster, .vh-poster img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.vh-poster { z-index: 0; }
.vh-video { z-index: 1; }

/* ------------------------------------------------------------
   LA VELATURA dell'apertura.

   Leggera, perche' il filmato deve restare luminoso: una base
   quasi nulla e una sfumatura dal basso per la riga di servizio e la
   pastiglia. Niente lastra in alto: sotto la barra c'e' gia' la
   lavata della barra. Il contrasto delle parole grandi lo fa l'ALONE
   intorno alle lettere (text-shadow largo e morbido), che scurisce
   solo dove serve e segue la forma delle lettere invece di spegnere
   il fotogramma. I numeri, misurati sulla pagina resa, stanno in
   DESIGN.md §7.
   ------------------------------------------------------------ */
.vh-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    /* due ombre morbide solo dove stanno le parole: il filmato del 23
       settembre ha un controluce con il sole in quadro (3-6 s e 9-12 s)
       e li' il fondo dietro le lettere arriva a 0,97. Si leggono come
       ombra, non come lastra, e sui fotogrammi scuri non si vedono. */
    radial-gradient(ellipse 50% 34% at 24% 80%, rgba(var(--veil), .52), rgba(var(--veil), 0) 72%),
    /* la riga di servizio e la pastiglia, in basso a destra, sul prato al sole */
    radial-gradient(ellipse 30% 24% at 86% 86%, rgba(var(--veil), .34), rgba(var(--veil), 0) 72%),
    linear-gradient(to top, rgba(var(--veil), .50) 0%, rgba(var(--veil), .22) 30%, rgba(var(--veil), 0) 55%),
    rgba(var(--veil), .06);
}

/* ------------------------------------------------------------
   LE PAROLE DISPERSE.

   Il riferimento disperde le parole sul fotogramma. Qui erano due
   frammenti a 154 px agli angoli opposti; il 24 settembre Piero li ha
   trovati troppo grandi. Ora e' un blocco in basso a sinistra a circa
   90 px, con la seconda riga appena rientrata.
   Il testo e' bianco e leggero; il contrasto lo regge la velatura
   misurata.

   E' un H1 solo, con tre <span> assoluti: la lettura e' continua.
   ------------------------------------------------------------ */
.hero-words {
  position: absolute; z-index: 3;
  left: var(--gutter); bottom: clamp(1.6rem, 4vh, 3.2rem);
  display: flex; flex-direction: column;
  margin: 0;
  color: #fff;
  font-size: clamp(3rem, 1rem + 5.2vw, 6.25rem);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  line-height: .98;
  letter-spacing: -.02em;
  pointer-events: none;
  /* l'alone: due sfumature larghe e una piccola sotto la lettera. Si
     vede come profondita', non come ombra. */
  text-shadow:
    0 1px 2px rgba(var(--veil), .30),
    0 0 8px rgba(var(--veil), .34),
    0 0 26px rgba(var(--veil), .52),
    0 0 80px rgba(var(--veil), .44),
    0 0 150px rgba(var(--veil), .30);
}
/* Un blocco solo in basso a sinistra, sulla stessa linea di fondo del
   sommario e della pastiglia a destra; la seconda riga rientra appena,
   l'eco del gesto del riferimento senza disperdere la frase. */
.hw { white-space: nowrap; }
.hw-2 { margin-left: .9em; }

.hero-foot {
  position: absolute; z-index: 4;
  right: var(--gutter); bottom: clamp(1.6rem, 4vh, 3.2rem);
  display: grid; justify-items: end; gap: var(--s4);
  max-width: 34ch; text-align: right;
}
.hero-sub { color: #fff; font-size: var(--t-lede); line-height: 1.4; text-wrap: pretty; text-shadow: 0 1px 2px rgba(var(--veil), .4), 0 0 8px rgba(var(--veil), .4), 0 0 20px rgba(var(--veil), .5), 0 0 44px rgba(var(--veil), .4); }

@media (max-width: 900px) {
  /* Sopra il sommario e la pastiglia, che qui stanno in colonna in
     basso: il blocco del titolo sale della loro altezza. */
  .hero-words { font-size: clamp(2.6rem, 11vw, 4.2rem); bottom: 12.5rem; right: var(--gutter); }
  .hw { white-space: normal; }
  .hw-2 { margin-left: .6em; }
  .hero-foot { left: var(--gutter); right: var(--gutter); max-width: none; justify-items: start; text-align: left; }
  .hero-sub { font-size: var(--t-body); }
  .vh-veil {
    background:
      radial-gradient(ellipse 90% 22% at 36% 64%, rgba(var(--veil), .46), rgba(var(--veil), 0) 72%),
      linear-gradient(to top, rgba(var(--veil), .62) 0%, rgba(var(--veil), .30) 36%, rgba(var(--veil), 0) 62%),
      rgba(var(--veil), .08);
  }
}
@media (max-height: 560px) and (min-width: 901px) {
  .hero-words { font-size: clamp(2.6rem, 11vh, 4.4rem); }
}

/* ============================================================
   IL PIANO SEQUENZA.

   L'altezza della sezione E' la velocita' dello scrub: 1300vh su un
   palco da 900 fanno 22 px per fotogramma; il telefono ne vuole di
   piu', perche' una scorsa col dito copre molta piu' distanza di una
   tacca di rotellina: 1700.
   ============================================================ */
.scrolly { position: relative; height: calc(var(--seq-vh, 1300) * 1vh); background: var(--wine-2); }
@media (max-width: 900px) { .scrolly { height: calc(var(--seq-vh-n, 1700) * 1vh); } }

/* Il palco e' una griglia a due righe: il vuoto e la riga delle
   parole. Apertura e didascalie stanno nella stessa cella in basso e
   si sovrappongono da sole; il contatore sta nella stessa riga a
   destra. Nessuno deve conoscere l'altezza dell'altro. */
.scrolly-stage {
  position: sticky; top: var(--header-h);
  /* Il palco e' alto quanto lo schermo SENZA le barre del browser
     (lvh): su iPhone, quando la barra si ritira scorrendo, un palco in
     svh lasciava scoperta sotto di se' una fascia vino (il fondo della
     sezione). Le parole pero' stanno sopra la barra: il margine in basso
     aggiunge proprio l'altezza che la barra occupa (lvh - svh), cosi'
     restano leggibili anche a barra aperta. Dove lvh non esiste vale la
     riga in svh. */
  height: calc(100svh - var(--header-h));
  height: calc(100lvh - var(--header-h));
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: end;
  padding: 0 var(--gutter) clamp(1.5rem, 3.6vh, 2.8rem);
  padding-bottom: calc(clamp(1.5rem, 3.6svh, 2.8rem) + 100lvh - 100svh);
  gap: 0 var(--s6);
}
.scrolly-canvas, .scrolly-poster {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
}
.scrolly-poster img { width: 100%; height: 100%; object-fit: cover; }
[data-scrolly][data-painted='true'] .scrolly-poster { opacity: 0; }

/* ------------------------------------------------------------
   LA VELATURA del piano sequenza.

   Il soggetto sta nelle due righe centrali (energia 73-100) e la
   riga alta e' chiarissima (p95 0,82-0,88: cielo, finestre, il
   foglio della pianta). La riga bassa e' la piu' calma e la piu'
   scura (p95 0,43-0,60). Quindi le parole stanno in basso e la
   velatura e' una sfumatura dal basso e basta: il 45% in alto della
   pellicola non e' toccato.
   ------------------------------------------------------------ */
.scrolly-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top,
    rgba(var(--veil), .66) 0%,
    rgba(var(--veil), .46) 22%,
    rgba(var(--veil), .20) 42%,
    rgba(var(--veil), 0) 60%);
}
@media (max-width: 760px) {
  .scrolly-veil {
    background: linear-gradient(to top,
      rgba(var(--veil), .72) 0%,
      rgba(var(--veil), .50) 30%,
      rgba(var(--veil), .22) 50%,
      rgba(var(--veil), 0) 66%);
  }
}

/* Apertura e didascalie: stessa cella, stesso punto. Il motore scrive
   opacita' e transform su .scrolly-lead e su ogni .scrolly-phase:
   niente transform nostri su quegli elementi. */
.scrolly-lead, .scrolly-captions {
  grid-area: 2 / 1;
  position: relative; z-index: 3;
  max-width: min(46%, 36rem);
}
.scrolly-captions { display: grid; }
.scrolly-phase { grid-area: 1 / 1; opacity: 0; pointer-events: none; }

.cap { display: grid; gap: var(--s3); }
.cap-title {
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.015em;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(var(--veil), .22), 0 0 22px rgba(var(--veil), .32), 0 0 56px rgba(var(--veil), .26);
}
/* Il numerale in apice, come «Featured Weddings ¹¹» nel riferimento. */
.idx {
  font-family: var(--sans);
  font-size: .32em;
  font-weight: 500;
  letter-spacing: .04em;
  vertical-align: top;
  position: relative; top: .35em;
  margin-left: .18em;
  color: rgba(255,255,255,.82);
}
.cap-text { color: #fff; font-size: var(--t-lede); line-height: 1.45; max-width: 40ch; text-wrap: pretty; text-shadow: 0 1px 2px rgba(var(--veil), .3), 0 0 18px rgba(var(--veil), .38); }

/* L'ENTRATA: le lettere della parola arrivano una alla volta,
   dal basso, 28 ms l'una. Le lettere sono <i> con un indice; il
   motore governa l'opacita' della fase intera, quindi qui si lavora
   sulle lettere e non sulla fase. */
/* Le lettere sono inline-block e un a capo potrebbe cadere in mezzo a
   una parola: la parola intera e' un blocco che non si spezza. */
.cap-title .wd { display: inline-block; white-space: nowrap; }
.cap-title i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  transform: translateY(.3em);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 28ms);
}
.cap-text { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) .32s, transform .5s var(--ease) .32s; }
.scrolly-phase.is-active .cap-title i { opacity: 1; transform: none; }
.scrolly-phase.is-active .cap-text { opacity: 1; transform: none; }

/* IL BOTTONE DEL CAPITOLO: ogni capitolo porta alla pagina che lo
   racconta per esteso. Pastiglia crema con testo scuro (come la
   pastiglia sul filmato d'apertura, quindi leggibile su qualsiasi
   fotogramma) e un disco vino con la freccia. Arriva dopo il testo; si
   clicca solo nella fase attiva, perche' le fasi spente stanno una
   sopra l'altra nella stessa cella. */
.cap-link {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: var(--s2);
  padding: .42rem .42rem .42rem 1.05rem;
  border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink);
  font-size: .875rem; font-weight: 500; line-height: 1.2; text-decoration: none;
  box-shadow: 0 6px 22px rgba(var(--veil), .28);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease) .55s, transform .5s var(--ease) .55s, background .2s var(--ease);
}
.cap-link i {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--wine); color: #fff; font-style: normal;
  transition: transform .25s var(--ease);
}
.cap-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cap-link:hover { background: #fff; }
.cap-link:hover i { transform: translateX(2px); }
.cap-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.scrolly-phase.is-active .cap-link { opacity: 1; transform: none; pointer-events: auto; }
.scrolly[data-mode='static'] .cap-link { opacity: 1; transform: none; background: var(--wine); color: #fff; box-shadow: none; }
.scrolly[data-mode='static'] .cap-link i { background: rgba(255,255,255,.18); }
.scrolly[data-mode='static'] .cap-link:hover { background: var(--wine-2); }
.scrolly[data-mode='static'] .cap-link:focus-visible { outline-color: var(--focus); }

.cap--lead .label { color: rgba(255,255,255,.85); margin-bottom: 0; }
.cap--lead .cap-title { font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4rem); }
.lead-hint {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: var(--s2);
  font-size: var(--t-small); color: rgba(255,255,255,.85);
}
.lead-hint span {
  width: 20px; height: 32px; flex: 0 0 auto;
  border: 1.4px solid rgba(255,255,255,.6); border-radius: 10px;
  position: relative;
}
.lead-hint span::after {
  content: ''; position: absolute; left: 50%; top: 6px;
  width: 2px; height: 6px; margin-left: -1px; border-radius: 1px;
  background: rgba(255,255,255,.85);
  animation: scrollcue 1.9s var(--ease) infinite;
}
@keyframes scrollcue { 0%, 100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(10px); opacity: .2; } }

/* ------------------------------------------------------------
   L'AVANZAMENTO: il pie' di pagina di un menu stampato.

   In basso a destra, sulla stessa riga delle parole: il numerale del
   capitolo e, sotto, una guida corta. Il riempimento e' la barra del
   motore usata per quello per cui e' fatta, ma la guida lo CENTRA:
   la larghezza che il motore scrive cresce dal centro verso i due
   lati, come un filetto che si apre. Nessun avanzamento della serie
   cresce dal centro.
   ------------------------------------------------------------ */
.scrolly-counter {
  grid-area: 2 / 2;
  position: relative; z-index: 3;
  display: grid; justify-items: end; gap: .55rem;
  color: #fff;
  opacity: 0;
}
.ctr-n { display: flex; align-items: baseline; gap: .3rem; font-size: .875rem; font-weight: 500; letter-spacing: .06em; }
.ctr-n b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; }
.ctr-n i { font-style: normal; color: rgba(255,255,255,.7); }
.scrolly-progress {
  width: clamp(120px, 14vw, 220px); height: 1px;
  background: rgba(255,255,255,.32);
  display: flex; justify-content: center;
}
.scrolly-progress i { display: block; height: 100%; width: 0; background: #fff; }

@media (max-width: 900px) {
  .scrolly-stage { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; gap: var(--s4) 0; }
  .scrolly-lead, .scrolly-captions { grid-area: 3 / 1; max-width: none; }
  .scrolly-counter { grid-area: 2 / 1; }
  .cap-title { font-size: clamp(2.1rem, 1.2rem + 5vw, 3rem); }
  .cap-text { font-size: var(--t-body); }
  .lead-hint { display: none; }
}

/* ------------------------------------------------------------
   IL RIPIEGO SENZA JAVASCRIPT.

   data-mode="static" e' quello che parte nell'HTML: il motore
   promuove, non degrada. Senza JS restano il poster, l'apertura sopra
   di lui e i capitoli come colonna editoriale, ognuno con il proprio
   fermo immagine servito dal server. L'attributo sta SULLA sezione,
   quindi il selettore e' `.scrolly[data-mode]` e non un discendente.
   ------------------------------------------------------------ */
.scrolly[data-mode='static'] { height: auto; background: var(--paper); }
.scrolly[data-mode='static'] .scrolly-stage {
  position: relative; top: 0;
  display: block; height: auto; overflow: visible;
  padding: 0 0 var(--s8);
}
.scrolly[data-mode='static'] .scrolly-canvas,
.scrolly[data-mode='static'] .scrolly-counter { display: none; }
.scrolly[data-mode='static'] .scrolly-poster,
.scrolly[data-mode='static'] .scrolly-veil {
  position: relative; inset: auto;
  height: clamp(360px, 62svh, 660px);
}
.scrolly[data-mode='static'] .scrolly-veil { position: absolute; top: 0; left: 0; right: 0; }
.scrolly[data-mode='static'] .scrolly-lead {
  position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  height: clamp(360px, 62svh, 660px);
  max-width: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: var(--s6);
}
.scrolly[data-mode='static'] .lead-hint { display: none; }
.scrolly[data-mode='static'] .scrolly-captions {
  position: static;
  display: grid; gap: var(--s7);
  width: min(100% - var(--gutter) * 2, var(--page-max));
  max-width: none;
  margin: var(--s8) auto 0;
}
.scrolly[data-mode='static'] .scrolly-phase {
  grid-area: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s5);
  opacity: 1; pointer-events: auto;
  padding-top: var(--s5); border-top: 1px solid var(--line);
}
.scrolly[data-mode='static'] .cap-title,
.scrolly[data-mode='static'] .cap-text { color: var(--ink); opacity: 1; transform: none; }
.scrolly[data-mode='static'] .cap-title i { opacity: 1; transform: none; }
.scrolly[data-mode='static'] .idx { color: var(--muted); }
/* il numerale del capitolo segue il titolo: prima restava a mezza
   opacita' mentre le lettere erano gia' sparite, un «05» sospeso */
.scrolly-phase .idx { opacity: 0; transition: opacity .4s var(--ease); }
.scrolly-phase.is-active .idx, .scrolly[data-mode='static'] .idx { opacity: 1; }
.scrolly[data-mode='static'] .scrolly-still { margin: 0; }
.scrolly[data-mode='static'] .scrolly-still img { aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 900px) {
  .scrolly[data-mode='static'] .scrolly-phase { grid-template-columns: 1fr; }
}
/* In scrub i fermi immagine non si scaricano: il motore li toglie dal
   DOM, e questa riga li nasconde nell'attimo prima che lo faccia. */
.scrolly[data-mode='scrub'] .scrolly-still { display: none; }
/* Nel ripiego la didascalia sta in alto nella sua cella, non
   distribuita sull'altezza del fermo immagine. */
.scrolly[data-mode='static'] .cap { align-content: start; }
/* Il testo dell'apertura non aspetta nessuna fase: e' visibile da subito
   e sparisce con l'apertura intera, che il motore governa. */
.cap--lead .cap-text { opacity: 1; transform: none; transition: none; }

/* 05-blocks.css */
/* ============================================================
   I blocchi editoriali.
   ============================================================ */

/* ------------------------------------------------------------
   Apertura di pagina: titolo grande a sinistra, sommario e bottone a
   destra sulla stessa riga, e sotto una fotografia a tutta larghezza
   a spigolo vivo.
   ------------------------------------------------------------ */
.page-hero { padding-block: clamp(2.5rem, 1.4rem + 4vw, 5rem) clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.page-hero h1 { max-width: 12ch; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--s4); padding: 0; font-size: var(--t-label); letter-spacing: .04em; }
.breadcrumb li + li::before { content: '/'; margin-right: .5rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb span { color: var(--body); }
.hero-lede { max-width: 40ch; }
@media (min-width: 901px) { .ph-side { align-self: end; padding-bottom: .5rem; } }
.ph-figure {
  margin: clamp(2rem, 1.2rem + 3vw, 3.5rem) auto 0;
  width: min(100% - var(--gutter) * 2, var(--page-max));
}
.ph-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.ph-figure figcaption { margin-top: .6rem; font-size: var(--t-label); letter-spacing: .04em; color: var(--muted); }
@media (max-width: 700px) { .ph-figure img { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------
   La fila della stampa: i marchi delle testate che scorrono, tutti
   nello stesso inchiostro (brightness(0) li porta al nero qualunque
   colore abbiano, e l'opacita' li porta all'inchiostro caldo), ognuno
   un collegamento. Due copie, la seconda nascosta. Il passaggio del
   mouse ferma la fila e accende il marchio.
   ------------------------------------------------------------ */
.press-section { padding-block: var(--s6) var(--s7); overflow: hidden; }
.press-label { text-align: center; font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s5); }
.press-rail { display: flex; width: max-content; animation: press-run 56s linear infinite; }
.press-run { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.press-run li { position: relative; display: flex; align-items: center; padding: 0 clamp(1.4rem, 2.6vw, 3rem); }
.press-run li::after {
  content: ''; position: absolute; right: -3px; top: 50%;
  width: 6px; height: 6px; border-radius: 50%; background: var(--saffron);
  transform: translateY(-50%);
}
.press-logo { display: flex; justify-content: center; min-width: 44px; padding: .4rem 0; border-radius: 4px; }
.press-logo img {
  display: block; width: auto;
  height: calc(clamp(22px, 1.1rem + .6vw, 28px) * var(--lh, 1));
  filter: brightness(0); opacity: .82;
  transition: opacity .18s var(--ease);
}
.press-logo:hover img, .press-logo:focus-visible img { opacity: 1; }
.press-logo:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
@keyframes press-run { to { transform: translateX(-50%); } }
.press-rail:hover, .press-rail:focus-within { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .press-rail { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .press-run[aria-hidden] { display: none; }
  .press-run { flex-wrap: wrap; justify-content: center; row-gap: var(--s4); }
}

/* ------------------------------------------------------------
   Schede: pannelli bianchi a raggio 12 sulla carta, nessun bordo,
   nessuna ombra. La fotografia dentro e' a spigolo vivo.
   ------------------------------------------------------------ */
.cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--s4); }
.card {
  display: flex; flex-direction: column;
  background: var(--card);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none; color: inherit;
}
.band-soft .card, .band-card .card { background: var(--paper); }
.card-figure { margin: 0; }
.card-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { display: flex; flex-direction: column; gap: .55rem; padding: var(--s5); flex: 1; }
.card-kicker { font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.card-body > p { font-size: var(--t-small); }
.card--link:hover h3 { color: var(--wine-text); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
@media (min-width: 640px) and (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------
   Righe numerate.
   ------------------------------------------------------------ */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 16rem);
  gap: var(--s3) var(--s5);
  padding: var(--s5) 0; border-top: 1px solid var(--line);
}
.row:last-child { border-bottom: 1px solid var(--line); }
.row-n { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); color: var(--wine-text); }
.row-body p { margin-top: .45rem; font-size: var(--t-small); max-width: 56ch; }
.row-aside { font-size: var(--t-small); color: var(--muted); }
@media (max-width: 900px) { .row { grid-template-columns: 3rem minmax(0, 1fr); } .row-aside { grid-column: 2; } }

/* ------------------------------------------------------------
   Passi.
   ------------------------------------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s5); }
.step { padding-top: var(--s4); border-top: 1px solid var(--line); }
.step-n { font-family: var(--serif); font-size: var(--t-h3); color: var(--wine-text); margin-bottom: .5rem; }
.step p:last-child { margin-top: .45rem; font-size: var(--t-small); }

/* ------------------------------------------------------------
   Tabelle: le sei tradizioni, i formati.
   ------------------------------------------------------------ */
.table-scroll { position: relative; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.table th, .table td { text-align: left; padding: .95rem 1rem .95rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: var(--t-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-ui); }
.table tbody th { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); color: var(--ink); min-width: 11rem; }
.trad td { min-width: 16rem; }

/* ------------------------------------------------------------
   Le sette cucine. Radio e :has(); senza :has() restano tutte
   aperte e incolonnate.
   ------------------------------------------------------------ */
.cuis { display: grid; gap: var(--s5); }
.cuis-tabs { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cuis-tab input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); overflow: hidden; }
.cuis-tab label {
  display: inline-block; padding: .5rem 1.05rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line-ui);
  font-size: var(--t-small); font-weight: 500; color: var(--ink);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.cuis-tab label:hover { background: var(--card); }
.cuis-tab input:checked + label { background: var(--wine); color: var(--on-wine); box-shadow: none; }
.cuis-tab input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 3px; }
.cuis-panels { display: grid; gap: var(--s4); }
.cuis-panel {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s6);
  background: var(--card); border-radius: var(--r);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
}
.cuis-text { display: grid; gap: var(--s4); align-content: start; }
.cuis-text p { max-width: 48ch; }
.cuis-text .btn { justify-self: start; }
.cuis-dishes { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.cuis-dishes li {
  padding: .6rem 0; border-top: 1px solid var(--line);
  font-family: var(--serif); font-weight: 400; font-variation-settings: 'opsz' 48;
  font-size: 1.2rem; color: var(--ink);
}
.cuis-dishes li:last-child { border-bottom: 1px solid var(--line); }
@supports selector(:has(*)) {
  .cuis:has(.cuis-tab input:checked) .cuis-panel { display: none; }
  .cuis:has(#cuis-south:checked) #cuispanel-south,
  .cuis:has(#cuis-punjabi:checked) #cuispanel-punjabi,
  .cuis:has(#cuis-gujarati:checked) #cuispanel-gujarati,
  .cuis:has(#cuis-srilankan:checked) #cuispanel-srilankan,
  .cuis:has(#cuis-indochinese:checked) #cuispanel-indochinese,
  .cuis:has(#cuis-italian:checked) #cuispanel-italian,
  .cuis:has(#cuis-fusion:checked) #cuispanel-fusion { display: grid; }
}
@media (max-width: 760px) { .cuis-panel { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   I piatti: una fila che scorre in orizzontale, quadrati a spigolo
   vivo, nome e cucina sotto.
   ------------------------------------------------------------ */
.dish-rail {
  display: flex; gap: var(--s4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--s5) var(--gutter) var(--s3);
  scrollbar-width: thin;
}
.dish { flex: 0 0 clamp(200px, 22vw, 300px); margin: 0; scroll-snap-align: start; }
.dish img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.dish figcaption { margin-top: .6rem; display: grid; gap: .1rem; }
.dish b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--ink); }
.dish span { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------
   I menu in PDF: sei schede bianche, ognuna un collegamento.
   ------------------------------------------------------------ */
.menus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.menu-link { display: flex; flex-direction: column; height: 100%; background: var(--card); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; }
.band-soft .menu-link { background: var(--paper); }
.menu-figure { margin: 0; }
.menu-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.menu-body { display: grid; gap: .4rem; padding: var(--s5); }
.menu-body b { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); color: var(--ink); }
.menu-body > span { font-size: var(--t-small); }
.menu-body small { font-size: var(--t-label); letter-spacing: .06em; color: var(--wine-text); margin-top: .3rem; }
.menu-link:hover b { color: var(--wine-text); }
@media (max-width: 900px) { .menus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .menus { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Le sette famiglie di attrezzature.
   ------------------------------------------------------------ */
.fams { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s5) var(--s6); }
.fam { padding-top: var(--s4); border-top: 1px solid var(--line); display: grid; gap: .4rem; align-content: start; }
.fam-n { font-size: var(--t-label); letter-spacing: .12em; color: var(--muted); }
.fam-count { font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--wine-text); }
.fam-text { font-size: var(--t-small); }
.fam-list { font-size: var(--t-label); color: var(--muted); line-height: 1.55; }
.fam-chairs { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line-ui); font-size: var(--t-small); max-width: 62ch; }

/* ------------------------------------------------------------
   Immagine e testo.
   ------------------------------------------------------------ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
.split[data-side='right'] .split-figure { order: 2; }
.split-figure { margin: 0; }
.split-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split-figure figcaption { margin-top: .6rem; font-size: var(--t-label); letter-spacing: .04em; color: var(--muted); }
.split-body { max-width: 46ch; }
.split-body .lede { margin-top: var(--s4); }
.split-body .prose { margin-top: var(--s4); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s5); }
  .split[data-side='right'] .split-figure { order: 0; }
  .split-figure img { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------
   I MATRIMONI VERI: il collage del riferimento.
   I due nomi agli estremi della riga con la «&» al centro, e sotto
   le fotografie di misure diverse che si accostano e si
   sovrappongono, con molto vuoto attorno.
   ------------------------------------------------------------ */
.story { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.story-names {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  font-family: var(--serif); font-weight: 300; font-variation-settings: 'opsz' 144;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4.4rem);
  letter-spacing: -.01em; line-height: 1;
  color: var(--ink);
}
.story-names span:last-child { text-align: right; }
.story-names .amp { padding-inline: var(--s5); color: var(--wine-text); font-size: .8em; }
.story-collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 3.2vw;
  gap: 0;
  margin-top: var(--s6);
}
.sc { margin: 0; overflow: hidden; }
.sc picture { display: block; height: 100%; }
.sc img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.zoom { position: relative; display: block; height: 100%; cursor: zoom-in; }
.zoom:hover img, .zoom:focus-visible img { transform: scale(1.03); }
.zoom:focus-visible, .reel-zoom:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.sc-1 { grid-column: 1 / 8; grid-row: 1 / 9; }
.sc-2 { grid-column: 7 / 13; grid-row: 6 / 14; }
.sc-3 { grid-column: 2 / 6; grid-row: 10 / 16; }
.sc-4 { grid-column: 9 / 12; grid-row: 15 / 23; }
.story-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--s4);
  margin: var(--s6) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line);
}
.story-meta dt { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.story-meta dd { margin: .25rem 0 0; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.story-text { margin-top: var(--s5); }
.story-credit { margin-top: var(--s4); font-size: var(--t-label); letter-spacing: .04em; color: var(--muted); }
@media (max-width: 900px) {
  .story-collage { grid-auto-rows: 6vw; }
  .sc-1 { grid-column: 1 / 9; grid-row: 1 / 8; }
  .sc-2 { grid-column: 6 / 13; grid-row: 6 / 13; }
  .sc-3 { grid-column: 1 / 6; grid-row: 11 / 17; }
  .sc-4 { grid-column: 8 / 12; grid-row: 15 / 24; }
}

/* ------------------------------------------------------------
   I filmati brevi: una fila di clip verticali.
   ------------------------------------------------------------ */
.reel-rail {
  display: flex; gap: var(--s4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--s5) var(--gutter) var(--s3);
  scrollbar-width: thin;
}
.reel { flex: 0 0 clamp(220px, 20vw, 300px); margin: 0; scroll-snap-align: start; }
.reel-video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--paper-2); }
.reel-frame { position: relative; overflow: hidden; }
.reel-zoom {
  position: absolute; inset: 0; width: 100%; padding: 0; border: 0;
  background: transparent; cursor: zoom-in;
}
.reel-zoom[hidden] { display: none; }
.reel figcaption { margin-top: .6rem; display: grid; gap: .1rem; }
.reel figcaption b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--ink); }
.reel figcaption span { font-size: var(--t-small); color: var(--muted); }

.venues { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 var(--s6); }
.venues li { display: grid; gap: .15rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.venues b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--ink); }
.venues span { font-size: var(--t-small); color: var(--muted); }

/* ------------------------------------------------------------
   La galleria: griglia densa, i ritratti alti due righe, tutto a
   spigolo vivo. La vista a schermo intero si apre con :target.
   ------------------------------------------------------------ */
.ga-grid {
  list-style: none; margin: var(--s6) auto 0; padding: 0;
  width: min(100% - var(--gutter) * 2, var(--page-max));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(140px, 19vw, 300px); grid-auto-flow: dense;
  gap: var(--s3);
}
.ga a { display: block; height: 100%; }
.ga picture, .ga img { height: 100%; }
.ga img { width: 100%; object-fit: cover; transition: opacity .2s var(--ease); }
.ga a:hover img { opacity: .9; }
.ga.is-tall { grid-row: span 2; }
@media (max-width: 760px) { .ga-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 40vw; } }

.lb {
  position: fixed; inset: 0; z-index: 80;
  display: none;
  grid-template-rows: 1fr auto;
  margin: 0; padding: var(--s7) var(--s7) var(--s5);
  background: rgba(28, 25, 23, .96);
  color: var(--paper);
}
.lb:target { display: grid; }
.lb picture { display: contents; }
.lb img { width: 100%; height: 100%; max-height: calc(100svh - 7rem); object-fit: contain; }
.lb figcaption { display: flex; justify-content: space-between; gap: var(--s4); margin-top: var(--s4); font-size: var(--t-small); color: rgba(246,241,232,.85); }
.lb-close, .lb-prev, .lb-next {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(246,241,232,.12); color: var(--paper);
  text-decoration: none; font-size: 1.3rem;
}
.lb-close { top: var(--s4); right: var(--s4); }
.lb-prev { left: var(--s4); top: 50%; transform: translateY(-50%); }
.lb-next { right: var(--s4); top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) { .lb { padding: var(--s7) var(--s3) var(--s4); } }

/* ------------------------------------------------------------
   Le due persone.
   ------------------------------------------------------------ */
.person { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: center; }
.person-figure { margin: 0; }
.person-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person-body { max-width: 48ch; }
.person-body h3 { font-size: var(--t-h2); font-weight: 300; font-variation-settings: 'opsz' 144; margin-bottom: var(--s4); }
.person-quote { margin: var(--s5) 0 0; }
/* virgolette appese in zafferano al posto della barretta a sinistra */
.person-quote p { text-indent: -.45em; }
.person-quote p::before { content: '\201C'; color: var(--saffron-text); }
.person-quote p::after { content: '\201D'; color: var(--saffron-text); }
.person-quote p { font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; color: var(--ink); }
@media (min-width: 901px) {
  .person--flip .person-figure { order: 2; }
}

/* ------------------------------------------------------------
   I traguardi.
   ------------------------------------------------------------ */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.tl { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.tl:last-child { border-bottom: 1px solid var(--line); }
.tl-year { font-family: var(--serif); font-size: var(--t-h3); color: var(--wine-text); }
.tl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: var(--t-small); max-width: 60ch; }
@media (max-width: 600px) { .tl { grid-template-columns: 1fr; gap: .4rem; } }

/* ------------------------------------------------------------
   La stampa con le scansioni.
   ------------------------------------------------------------ */
.scans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--s5); }
.scan { display: grid; gap: .35rem; }
.scan figure { margin: 0; background: var(--paper-2); }
.scan img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.scan b { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.scan span { font-size: var(--t-label); letter-spacing: .06em; color: var(--muted); }
.press-list { list-style: none; margin: var(--s6) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: var(--t-small); color: var(--ink); }
.press-list span { color: var(--muted); }

/* ------------------------------------------------------------
   Le recensioni.
   ------------------------------------------------------------ */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--s5); }
.quote { margin: 0; padding: var(--s5); background: var(--card); border-radius: var(--r); display: grid; gap: var(--s4); }
.band-soft .quote { background: var(--paper); }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--serif); font-weight: 300; font-variation-settings: 'opsz' 72; font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); line-height: 1.3; color: var(--ink); }
.quote figcaption { font-size: var(--t-small); }
.quote figcaption b { display: block; font-weight: 500; color: var(--ink); }
.quote figcaption span { color: var(--muted); }

/* ------------------------------------------------------------
   Domande.
   ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-weight: 400; font-variation-settings: 'opsz' 48;
  font-size: var(--t-h3); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq-sign { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-ui); position: relative; }
.faq-sign::before, .faq-sign::after { content: ''; position: absolute; inset: 0; margin: auto; background: var(--ink); }
.faq-sign::before { width: 10px; height: 1.4px; }
.faq-sign::after { width: 1.4px; height: 10px; transition: transform .2s var(--ease); }
.faq details[open] .faq-sign::after { transform: scaleY(0); }
.faq-body { padding-bottom: var(--s5); max-width: 60ch; }

/* ------------------------------------------------------------
   Chiusura: una frase in serif a sinistra, la pastiglia a destra.
   ------------------------------------------------------------ */
.cta-title { max-width: 16ch; }
.cta-side { align-self: end; }
.cta-side .lede { max-width: 40ch; }

/* ------------------------------------------------------------
   Contatto.
   ------------------------------------------------------------ */
.contact-side .lede { margin-top: var(--s4); max-width: 38ch; }
.contact-aside { display: grid; gap: var(--s4); margin: var(--s6) 0 0; }
.contact-aside dt { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-aside dd { margin: .25rem 0 0; color: var(--ink); }
.contact-aside a { color: var(--ink); }
.contact-form { background: var(--card); border-radius: var(--r); padding: clamp(1.25rem, .8rem + 1.6vw, 2.2rem); }

/* Una fotografia orizzontale che non regge il 4:5: il blocco lo dice
   con `ratio: "wide"` e la figura resta 3:2. */
.split[data-ratio='wide'] .split-figure img { aspect-ratio: 3 / 2; }

/* Le file che scorrono: la prima scheda si ferma al margine, non al
   bordo dello schermo. */
.dish-rail, .reel-rail { scroll-padding-inline: var(--gutter); }

/* ------------------------------------------------------------
   La vista ingrandita delle storie e dei filmati.
   Il segno d'ingrandimento: un tondo di carta nell'angolo, con due
   frecce agli angoli opposti. Sul mouse compare al passaggio, sul
   dito resta sempre, piccolo.
   ------------------------------------------------------------ */
.zoom-mark {
  position: absolute; right: var(--s3); bottom: var(--s3); z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(246, 241, 232, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1917' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5M19 5l-6 6M10 19H5v-5M5 19l6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 2px 10px rgba(28, 25, 23, .18);
  opacity: 0; transform: scale(.85);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.reel-zoom .zoom-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231C1917'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E");
  background-size: 20px;
}
.zoom:hover .zoom-mark, .zoom:focus-visible .zoom-mark,
.reel-zoom:hover .zoom-mark, .reel-zoom:focus-visible .zoom-mark { opacity: 1; transform: none; }
@media (hover: none) { .zoom-mark { opacity: 1; transform: scale(.85); } }

.vw {
  width: 100vw; height: 100svh; max-width: none; max-height: none;
  margin: 0; padding: clamp(3.5rem, 6vh, 5rem) clamp(1rem, 6vw, 6rem) var(--s5);
  border: 0; background: transparent; color: var(--paper);
  display: none; grid-template-rows: minmax(0, 1fr) auto;
}
.vw[open] { display: grid; animation: vw-in .3s var(--ease); }
.vw::backdrop { background: rgba(20, 18, 16, .97); }
@keyframes vw-in { from { opacity: 0; transform: scale(.985); } }
.vw-stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; }
.vw-stage video:focus { outline: none; }
.vw-stage img, .vw-stage video {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.vw--video .vw-stage video { height: 100%; aspect-ratio: 9 / 16; background: #000; }
.vw-cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  width: min(100%, 60rem); margin: var(--s4) auto 0;
  font-size: var(--t-small); color: rgba(246, 241, 232, .86);
}
.vw-count { flex: none; font-family: var(--serif); letter-spacing: .04em; }
.vw-btn {
  position: fixed; z-index: 2;
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0; border: 1px solid rgba(246, 241, 232, .28); border-radius: 50%;
  background: rgba(246, 241, 232, .08); color: var(--paper); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.vw-btn:hover { background: rgba(246, 241, 232, .18); border-color: rgba(246, 241, 232, .5); }
.vw-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.vw-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vw-close { top: var(--s4); right: var(--s4); }
.vw-prev { left: var(--s4); top: 50%; transform: translateY(-50%); }
.vw-next { right: var(--s4); top: 50%; transform: translateY(-50%); }
.vw--single .vw-prev, .vw--single .vw-next { display: none; }
html.vw-open { overflow: hidden; }
@media (max-width: 700px) {
  .vw { padding: 4rem var(--s3) var(--s4); }
  .vw-prev, .vw-next { top: auto; bottom: var(--s4); transform: none; width: 44px; height: 44px; }
  .vw-prev { left: auto; right: calc(var(--s4) + 52px); }
  .vw-cap { padding-right: 110px; }
}
@media (prefers-reduced-motion: reduce) { .vw[open] { animation: none; } .sc img { transition: none; } }

/* 06-forms.css */
/* ============================================================
   Moduli. Il bordo di un campo e' interfaccia: 3,83:1 sul bianco.
   ============================================================ */

.form-grid { display: grid; gap: var(--s4); }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--t-small); font-weight: 500; color: var(--body); }
.req { color: var(--wine-text); }

.field input, .field textarea, .field select {
  width: 100%;
  padding: .78rem .9rem;
  border: 1px solid var(--line-ui);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit; font-size: var(--t-small);
}
/* sotto i 16 px Safari su iPhone ingrandisce la pagina al tocco del campo */
@media (max-width: 900px) { .field input, .field select, .field textarea { font-size: 16px; } }
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: var(--alert); }
.field-error { font-size: var(--t-label); color: var(--alert); }

@media (min-width: 620px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid > *:not(.field--half) { grid-column: 1 / -1; }
}

.consents { display: grid; gap: var(--s3); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; }
.consent input { margin: .1rem 0 0; width: 22px; height: 22px; accent-color: var(--wine); }
.consent label { font-size: var(--t-label); color: var(--muted); line-height: 1.5; }
.consent label a { text-decoration: underline; }

/* Trappola per i robot: un campo vero, nascosto agli umani. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.form-note { margin: 0; font-size: var(--t-label); color: var(--muted); max-width: 40ch; }

.form-done { display: none; }
form[data-state='done'] { display: none; }
form[data-state='done'] + .form-done { display: block; padding: var(--s5); background: var(--paper-2); border-radius: var(--r); }
.form-done h3 { margin-bottom: var(--s2); }
.form-done p { color: var(--body); }

/* 07-panels.css */
/* ============================================================
   Il pannello di contatto. Entra al 40% di scorrimento oppure dopo
   25 secondi; mai all'ingresso, mai all'uscita del cursore;
   trattenuto sopra i filmati, le storie e il modulo; chiuso una
   volta, resta chiuso sette giorni. L'unica ombra del sito insieme
   al menu: e' l'unica cosa che galleggia davvero.
   ============================================================ */

.b2b-panel {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 70;
  width: min(24rem, calc(100vw - var(--s4) * 2));
  max-height: min(78svh, 42rem);
  overflow-y: auto;
  padding: var(--s5);
  background: var(--card);
  border-radius: var(--r);
  box-shadow: 0 18px 50px rgba(28, 25, 23, .18);
  transform: translateY(14px); opacity: 0;
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.b2b-panel.is-open { opacity: 1; transform: none; }
.b2b-close {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer;
}
.b2b-close:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-ui); }
.b2b-panel h2 { font-size: var(--t-h3); font-weight: 400; margin-bottom: var(--s2); padding-right: var(--s6); }
.b2b-intro { font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s4); }
.b2b-choices { display: grid; gap: var(--s2); }
.b2b-option {
  display: grid; gap: .15rem; width: 100%; text-align: left;
  padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); font: inherit; cursor: pointer;
}
.b2b-option:hover { border-color: var(--line-ui); }
.b2b-option b { font-weight: 500; color: var(--ink); }
.b2b-option span { font-size: var(--t-label); color: var(--muted); }
.b2b-back, .b2b-toggle-more {
  padding: 0; border: 0; background: none;
  color: var(--wine-text); font: inherit; font-size: var(--t-label); cursor: pointer;
}
.b2b-back { margin-bottom: var(--s3); }
.b2b-toggle-more { margin-top: var(--s2); }
.b2b-back:hover, .b2b-toggle-more:hover { text-decoration: underline; }
@media (max-width: 620px) {
  .b2b-panel { right: var(--s2); left: var(--s2); bottom: var(--s2); width: auto; }
}

/* 08-plan.css */
/* ============================================================
   IL BLOCCO FIRMA: la pianta.

   Un matrimonio come lo serve NURA, disegnato in pianta come lo
   disegna una wedding planner: tratto sottile in vino sulla carta
   bianca, sedie intorno ai tavoli, il mandap, i divani, il bancone con
   gli sgabelli, la tenda della cucina con i forni. Numerali piccoli in
   cerchio, come in una legenda stampata. Sopra un interruttore a due
   posizioni, sotto la legenda in due gruppi.

   Nel modo «solo la cucina indiana» le zone del servizio completo
   diventano di un altro fornitore: contorno grigio tratteggiato,
   numerale vuoto, e la legenda lo dice. Senza :has() restano accese
   tutte, cioe' il servizio completo: una pagina corretta, non rotta.
   ============================================================ */

/* La colonna e' minmax(0, 1fr) e la figura ha min-width 0: altrimenti il
   foglio largo 900 px sul telefono allarga il blocco intero e la pagina
   scorre di lato. Lo scorrimento resta dentro .pl-scroll. */
.plan { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }

/* --- l'interruttore ---------------------------------------------- */
.pl-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); }
.pl-modes { border: 0; margin: 0; padding: 0; min-width: 0; }
.pl-seg {
  display: inline-flex; padding: 4px;
  background: var(--card); border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pl-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); overflow: hidden; }
.pl-seg label {
  padding: .6rem 1.15rem; border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 500; color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.pl-seg label:hover { background: var(--paper); }
.pl-seg input:checked + label { background: var(--wine); color: var(--on-wine); }
.pl-seg input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 3px; }
.pl-hint { flex: 1 1 22rem; min-width: 0; margin: 0; font-size: var(--t-small); color: var(--body); max-width: 52ch; text-wrap: pretty; }
.pl-hint--food { display: none; }

/* --- il disegno ----------------------------------------------------- */
.pl-figure { position: relative; min-width: 0; margin: 0; background: var(--card); border-radius: var(--r); padding: clamp(.75rem, .5rem + 1vw, 1.5rem); }
.pl-scroll { min-width: 0; overflow-x: auto; scrollbar-width: thin; border-radius: var(--r-sm); }
.pl-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pl-svg { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .pl-svg { min-width: 900px; } }

.pl-svg .grid-dot { fill: var(--line); }

/* l'architettura: un solo inchiostro grigio, sottile */
.pl-scene { fill: none; stroke: var(--line-ui); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s var(--ease); }
.pl-scene .villa { fill: var(--paper-2); }
.pl-scene .terrace { fill: var(--paper); }
.pl-scene .door { fill: var(--card); stroke-width: .9; }
.pl-scene .step, .pl-scene .aisle { stroke-opacity: .55; }
.pl-scene .aisle { stroke-dasharray: 2 6; }
.pl-scene .tree { fill: var(--paper); }
.pl-scene .trunk { fill: var(--line-ui); stroke: none; }
.pl-scene .wall { stroke-opacity: .5; }
.pl-scene .column { fill: var(--card); }
.pl-scene .cypress { fill: var(--paper-2); }
.pl-scene .runner { fill: var(--paper-2); stroke: none; }
.pl-scene .north { stroke-opacity: .8; }
.pl-scene .north-t { fill: var(--muted); stroke: none; font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .08em; }

/* le zone: tratto in vino, riempimenti leggerissimi, le sedie bianche */
.pz { fill: none; stroke: var(--wine); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s var(--ease), stroke .3s var(--ease); }
.pz .z { fill: rgba(var(--wine-rgb), .07); transition: fill .3s var(--ease); }
.pz .tent { fill: rgba(var(--wine-rgb), .03); stroke-dasharray: 7 5; }
.pz .ch { fill: var(--card); stroke-width: 1.1; }
.pz .ch-b { stroke-width: 1.1; stroke-opacity: .6; }
.pz .z-in { stroke-width: 1.1; stroke-opacity: .65; }
.pz .z-dot { fill: var(--wine); stroke: none; }
.pn circle { fill: var(--wine); stroke: var(--card); stroke-width: 2; transition: fill .3s var(--ease), stroke .3s var(--ease); }
.pn text { fill: #fff; stroke: none; font-family: var(--serif); font-size: 16px; font-weight: 400; transition: fill .3s var(--ease); }

/* il modo «solo la cucina indiana»: il resto e' di un altro fornitore */
@supports selector(:has(*)) {
  .plan:has(#plan-food:checked) .pl-hint--food { display: block; }
  .plan:has(#plan-food:checked) .pl-hint--full { display: none; }
  .plan:has(#plan-food:checked) .pz--full { stroke: var(--line-ui); stroke-dasharray: 3 4; }
  .plan:has(#plan-food:checked) .pz--full .z,
  .plan:has(#plan-food:checked) .pz--full .tent { fill: none; }
  .plan:has(#plan-food:checked) .pz--full .z-dot { fill: var(--line-ui); }
  .plan:has(#plan-food:checked) .pz--full .pn circle { fill: var(--card); stroke: var(--line-ui); stroke-dasharray: none; }
  .plan:has(#plan-food:checked) .pz--full .pn text { fill: var(--muted); }
  .plan:has(#plan-food:checked) .pl-group--full .pl-who--nura { display: none; }
  .plan:has(#plan-food:checked) .pl-group--full .pl-who--other { display: inline; }
  .plan:has(#plan-food:checked) .pl-group--full .pn { background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-ui); }
  .plan:has(#plan-food:checked) .pl-group--full .pl-name { color: var(--body); }
  .plan:has(#plan-food:checked) .pl-group--full .pl-what { color: var(--muted); }
}

/* passando sulla legenda si accende la zona, e viceversa */
.plan[data-focus] .pz:not(.is-focus) { opacity: .22; }
.plan[data-focus] .pl-scene { opacity: .55; }
.pl-item.is-focus .pl-name { color: var(--wine-text); }

/* --- la scheda al passaggio --------------------------------------------
   Bianca, raggio 12, l'unica ombra del blocco perche' e' l'unica cosa
   che galleggia. Si aggancia sopra la zona con una punta; sotto, se
   sopra non c'e' posto. Non prende il mouse. */
.pl-tip {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: max-content; max-width: min(19rem, 80vw);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .65rem; align-items: center;
  padding: .8rem .95rem .85rem;
  background: var(--card); border-radius: var(--r);
  box-shadow: 0 14px 34px rgba(28, 25, 23, .14), 0 0 0 1px var(--line);
  text-align: left; pointer-events: none;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, calc(-100% - 4px));
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.pl-tip.is-on { opacity: 1; visibility: visible; transform: translate(-50%, calc(-100% - 14px)); }
.pl-tip::after {
  content: ''; position: absolute; left: 50%; bottom: -6px;
  width: 12px; height: 12px; background: var(--card);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}
.pl-tip--below { transform: translate(-50%, 4px); }
.pl-tip--below.is-on { transform: translate(-50%, 14px); }
.pl-tip--below::after { bottom: auto; top: -6px; border: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.pl-tip .pn {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--wine); color: #fff; font-family: var(--serif); font-size: .9rem; line-height: 1;
}
.pl-tip.is-other .pn { background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-ui); }
.pl-tip-name { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); line-height: 1.2; }
.pl-tip-what { grid-column: 2; font-size: .875rem; line-height: 1.45; color: var(--body); }
.pl-tip-who { grid-column: 2; margin-top: .2rem; font-size: var(--t-label); letter-spacing: .04em; color: var(--wine-text); }
.pl-tip.is-other .pl-tip-who { color: var(--muted); }
.pz:focus { outline: none; }
.pz:focus-visible .pn circle { stroke: var(--focus); stroke-width: 3; }

/* --- la legenda ----------------------------------------------------- */
.pl-key { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s7); }
.pl-group-h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem;
  margin: 0; padding-bottom: var(--s3); border-bottom: 1px solid var(--line-ui);
  font-family: var(--sans); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.pl-who { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--wine-text); }
.pl-who--other { display: none; color: var(--muted); }
.pl-list { list-style: none; margin: 0; padding: 0; }
.pl-item {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .05rem .8rem; align-items: start;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
  transition: opacity .3s var(--ease);
}
.pl-item .pn {
  grid-row: span 2; width: 26px; height: 26px; margin-top: .1rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--wine); color: #fff;
  font-family: var(--serif); font-size: .95rem; line-height: 1;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.pl-name { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); line-height: 1.2; }
.pl-what { font-size: var(--t-small); color: var(--body); }
@media (max-width: 760px) {
  .pl-key { grid-template-columns: 1fr; }
}

/* 09-illus.css */
/* ============================================================
   LE ILLUSTRAZIONI di Matrimoni e Come lavoriamo.

   Stessa mano della pianta: inchiostro sottile, un solo accento per
   disegno, campiture leggere. I disegni stanno in illus.mjs.

   Il movimento, tutto qui:
   - i tratti .d si disegnano quando [data-draw] riceve .is-drawn da
     app.js (entra in vista a un terzo); senza JavaScript sono gia'
     disegnati, perche' lo stato «da disegnare» vive sotto .js;
   - i piccoli cicli (vapore, fiamma, lucine, flusso dei piatti)
     girano solo con .is-live, cioe' mentre il blocco e' in vista: fuori
     schermo non costano niente. Con movimento ridotto la regola in
     02-base.css li ferma.
   ============================================================ */

.il { display: block; overflow: visible; }
.il path, .il circle, .il line, .il rect, .il ellipse {
  fill: none; stroke: var(--ink); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.il .il-a { stroke: var(--wine); }
.il .il-soft { stroke: var(--muted); stroke-width: 1; }
.il .il-saffron { fill: rgba(242, 165, 0, .38); stroke: none; }
.il .il-tint { fill: rgba(var(--wine-rgb), .08); stroke: none; }
.il .il-dots { stroke-dasharray: .001 .05; stroke-width: 2.4; }
.il .il-path { stroke: var(--muted); stroke-width: .9; stroke-dasharray: 1.5 3.5; }
.il .il-hz { stroke: var(--line-ui); stroke-width: .9; }

/* il tratto che si disegna */
.js [data-draw] .d {
  --i: 0; --k: 0;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--ease);
  transition-delay: calc(var(--k) * 260ms + var(--i) * 150ms + 150ms);
}
.js [data-draw].is-drawn .d { stroke-dashoffset: 0; }
.js [data-draw] .d.il-dots { stroke-dasharray: .001 .05; stroke-dashoffset: 0; opacity: 0; transition: opacity .8s var(--ease) 1.2s; }
.js [data-draw].is-drawn .d.il-dots { opacity: 1; }
.js [data-draw] .il-saffron, .js [data-draw] .il-tint { opacity: 0; transition: opacity .9s var(--ease); transition-delay: calc(var(--k) * 260ms + 900ms); }
.js [data-draw].is-drawn .il-saffron, .js [data-draw].is-drawn .il-tint { opacity: 1; }

/* i piccoli cicli */
@keyframes il-steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes il-flicker { from { transform: scale(.9, .82); opacity: .75; } to { transform: scale(1.04, 1.08); opacity: 1; } }
@keyframes il-flow { to { stroke-dashoffset: -12; } }
@keyframes il-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.il-steam { transform-box: fill-box; }
[data-draw].is-live .il-steam { animation: il-steam 3.4s ease-in-out 1.6s infinite both; }
.il-flame { transform-box: fill-box; transform-origin: 50% 100%; }
[data-draw].is-live .il-flame { animation: il-flicker .9s ease-in-out 1.4s infinite alternate; }
.il .il-flow { stroke-width: 1; stroke-dasharray: 2 4; }
[data-draw].is-live .il-flow { animation: il-flow 1.6s linear infinite; }
.il .il-bulb { --b: 0; fill: var(--saffron); stroke: none; }
[data-draw].is-live .il-bulb { animation: il-twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--b) * 260ms); }
.il .il-tray-plate { fill: var(--card); stroke: var(--ink); stroke-width: 1.2; }
.il .il-tray rect { fill: var(--saffron); stroke: none; }

/* l'arco del sole */
.il-arc { --a: 0deg; width: 52px; height: 26px; }
.il-arc .il-sun { transform-box: view-box; transform-origin: 32px 27px; transform: rotate(var(--a)); transition: transform 1.8s var(--ease); transition-delay: calc(var(--k) * 260ms + 500ms); }
.il-arc .il-sun circle { fill: var(--saffron); stroke: none; }
.js [data-draw]:not(.is-drawn) .il-sun { transform: rotate(0deg); }
.il-arc .il-moon { fill: var(--wine); stroke: none; }
.il-arc.is-night .il-path { opacity: .55; }

/* fra l'intestazione e un disegno grande serve piu' aria che fra
   l'intestazione e una tabella */
.days-section .days-wrap, .prop-section .grid + .grid, .lanes-section .grid + .grid,
.fmt-section .grid + .grid, .trads { margin-top: clamp(1rem, .25rem + 2vw, 2.25rem); }
.il-fmt--buffet .il-soft { opacity: .45; }

/* ------------------------------------------------------------
   I GIORNI: una fila legata da una linea.
   ------------------------------------------------------------ */
.days-wrap {
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  scroll-padding-inline: var(--gutter);
  padding: var(--s5) var(--gutter) var(--s3);
}
.days {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: calc(var(--page-max) - var(--gutter) * 2);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s5);
}
.day { --k: 0; scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; }
.day-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.day-photo picture, .day-photo img { display: block; width: 100%; height: 100%; }
.day-photo img { object-fit: cover; }
.day-node { position: relative; margin: var(--s5) 0 var(--s3); height: 64px; }
/* il filo che lega i giorni: un tratto per colonna, dal centro del
   nodo al centro del nodo dopo, che si allunga in sequenza */
.day-node::before {
  content: ''; position: absolute; top: 50%; height: 1px;
  left: 32px; right: calc(var(--s5) * -1 - 32px);
  background: var(--ink); opacity: .55;
  transform-origin: left center;
}
.day:last-child .day-node::before { display: none; }
.js .days-wrap .day-node::before { transform: scaleX(0); transition: transform .9s var(--ease); transition-delay: calc(var(--k) * 260ms + 500ms); }
.js .days-wrap.is-drawn .day-node::before { transform: none; }
.day-node .il-day {
  position: relative; z-index: 1;
  width: 64px; height: 64px; padding: 9px;
  border-radius: 50%; background: var(--card); border: 1px solid var(--line);
}
.il-day path, .il-day circle, .il-day line, .il-day rect, .il-day ellipse { stroke-width: 1.5; }
.day-when { display: flex; align-items: flex-end; gap: .55rem; margin: 0 0 .35rem; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--body); }
.day h3 { font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem); }
.day-text { margin-top: .45rem; font-size: var(--t-small); }
.day-serve { margin-top: auto; padding-top: var(--s3); font-size: .8125rem; color: var(--wine-text); }
@media (max-width: 1000px) {
  .days { grid-template-columns: repeat(5, min(72vw, 300px)); max-width: none; }
}

/* ------------------------------------------------------------
   LE TRADIZIONI: sei schede e le regole in pastiglie.
   ------------------------------------------------------------ */
.trads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.trad-card { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.trad-n { font-family: var(--serif); color: var(--wine-text); font-size: 1.05rem; margin-bottom: .6rem; }
.trad-card h3 { font-size: clamp(1.3rem, 1.1rem + .5vw, 1.55rem); }
.trad-line { margin-top: .5rem; font-size: var(--t-small); }
.rules { list-style: none; margin: auto 0 0; padding: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.rule {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .36rem .75rem .36rem .55rem; border-radius: var(--r-pill);
  background: rgba(var(--wine-rgb), .09); border: 1px solid transparent;
  font-size: .8125rem; line-height: 1.2; color: var(--ink);
}
.rule--opt { background: transparent; border: 1px dashed var(--line-ui); color: var(--body); }
.rule-ic { width: 16px; height: 16px; flex: none; }
.rule-ic path, .rule-ic circle { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rule-ic .il-a { stroke: var(--wine); }
.trad-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: var(--s5); font-size: var(--t-small); color: var(--muted); }
.rule--demo { padding: .25rem .7rem; font-size: .75rem; }
.trad-note { flex-basis: 100%; }
@media (max-width: 1000px) { .trads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .trads { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   LA PROPOSTA DISEGNATA.
   ------------------------------------------------------------ */
.prop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center; }
.prop-doc { margin: 0; }
.prop-doc svg { width: 100%; max-width: 440px; height: auto; display: block; margin-inline: auto; }
.prop-doc figcaption { margin-top: var(--s4); text-align: center; font-size: var(--t-label); letter-spacing: .04em; color: var(--body); }
.pd .pd-page { fill: var(--card); stroke: var(--line); }
.pd .pd-back { fill: var(--paper); stroke: var(--line); }
.pd .pd-fold { fill: var(--paper-2); stroke: var(--line); }
.pd .pd-rule-line { stroke: var(--line); }
.pd .pd-logo { color: var(--wine); }
.pd .pd-bar { fill: var(--line); }
.pd .pd-ink { fill: var(--ink); opacity: .78; }
.pd .pd-amp { font-family: var(--serif); font-size: 24px; fill: var(--wine); }
.pd .pd-t { font-family: var(--sans); font-size: 10px; fill: var(--body); }
.pd .pd-dot { fill: none; stroke: var(--muted); }
.pd .pd-dot--a { fill: var(--wine); stroke: var(--wine); }
.pd .pd-rule path, .pd .pd-rule circle { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.pd .pd-rule .il-a { stroke: var(--wine); }
.pd .pd-lawn { fill: var(--paper-2); stroke: var(--line); }
.pd .pd-s { fill: none; stroke: rgba(var(--wine-rgb), .5); stroke-width: 8; stroke-linecap: round; }
.pd .pd-kit { fill: var(--card); stroke: var(--ink); }
.pd .pd-tand { fill: var(--saffron); }
.pd .pd-chair { fill: var(--ink); }
.pd .pd-plate { fill: none; stroke: var(--ink); }
.pd .pd-n circle { fill: var(--paper); stroke: var(--ink); }
.pd .pd-n text { font-family: var(--sans); font-size: 10px; fill: var(--ink); }
.pd .pd-hl { fill: transparent; stroke: transparent; transition: fill .4s var(--ease), stroke .4s var(--ease); }
.pd-sec { transition: opacity .45s var(--ease); }
.prop[data-active] .pd-sec { opacity: .3; }
.prop[data-active="1"] .pd-sec[data-step="1"], .prop[data-active="2"] .pd-sec[data-step="2"],
.prop[data-active="3"] .pd-sec[data-step="3"], .prop[data-active="4"] .pd-sec[data-step="4"],
.prop[data-active="5"] .pd-sec[data-step="5"] { opacity: 1; }
.prop[data-active="1"] .pd-sec[data-step="1"] .pd-hl, .prop[data-active="2"] .pd-sec[data-step="2"] .pd-hl,
.prop[data-active="3"] .pd-sec[data-step="3"] .pd-hl, .prop[data-active="4"] .pd-sec[data-step="4"] .pd-hl,
.prop[data-active="5"] .pd-sec[data-step="5"] .pd-hl { fill: rgba(var(--wine-rgb), .05); stroke: rgba(var(--wine-rgb), .35); }
.prop[data-active="1"] .pd-sec[data-step="1"] .pd-n circle, .prop[data-active="2"] .pd-sec[data-step="2"] .pd-n circle,
.prop[data-active="3"] .pd-sec[data-step="3"] .pd-n circle, .prop[data-active="4"] .pd-sec[data-step="4"] .pd-n circle,
.prop[data-active="5"] .pd-sec[data-step="5"] .pd-n circle { fill: var(--wine); stroke: var(--wine); }
.prop[data-active="1"] .pd-sec[data-step="1"] .pd-n text, .prop[data-active="2"] .pd-sec[data-step="2"] .pd-n text,
.prop[data-active="3"] .pd-sec[data-step="3"] .pd-n text, .prop[data-active="4"] .pd-sec[data-step="4"] .pd-n text,
.prop[data-active="5"] .pd-sec[data-step="5"] .pd-n text { fill: #fff; }

.prop-steps { list-style: none; margin: 0; padding: 0; }
.prop-step {
  position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s3);
  padding: var(--s4) 0; border-top: 1px solid var(--line); cursor: default;
}
.prop-step:last-child { border-bottom: 1px solid var(--line); }
.prop-step:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.prop-n {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: .15rem;
  border: 1px solid var(--ink); border-radius: 50%;
  font-size: .8125rem; color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.prop-step h3 { font-size: clamp(1.2rem, 1.05rem + .4vw, 1.4rem); }
.prop-step p { margin-top: .3rem; font-size: var(--t-small); }
.prop-step.is-on .prop-n { background: var(--wine); border-color: var(--wine); color: #fff; }
/* la barra del passo che scorre da solo: si riempie nel tempo del passo */
.prop-step::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--wine); transform: scaleX(0); transform-origin: left;
}
@keyframes prop-fill { to { transform: none; } }
.prop.is-cycling .prop-step.is-on::after { animation: prop-fill 3.6s linear forwards; }
@media (max-width: 900px) {
  .prop { grid-template-columns: minmax(0, 1fr); }
  .prop-doc svg { max-width: 360px; }
}

/* ------------------------------------------------------------
   IL PERCORSO: quattro corsie e una linea.
   ------------------------------------------------------------ */
.lanes-scroll { overflow-x: auto; scrollbar-width: thin; }
.lanes { --x0: 10.8%; min-width: 880px; }
.ln { display: block; width: 100%; height: auto; overflow: visible; }
.ln .ln-lab { font-family: var(--sans); font-size: 15px; fill: var(--body); }
.ln .ln-lab--n { fill: var(--wine-text); font-weight: 600; }
.ln .ln-lane { stroke: var(--line-ui); stroke-width: 1; stroke-dasharray: 2 6; opacity: .75; }
.ln .ln-col { stroke: var(--line); stroke-width: 1; }
.ln .ln-num circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.ln .ln-num text { font-family: var(--sans); font-size: 12px; fill: var(--ink); }
.ln .ln-line { fill: none; stroke: var(--wine); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.js [data-draw] .ln-line.d { transition-duration: 3s; transition-delay: .2s; }
.ln .ln-node { --s: 0; fill: var(--paper); stroke: var(--wine); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.ln .ln-node--n { fill: var(--wine); }
.ln .ln-end { fill: var(--wine); }
.js [data-draw] .ln-node { transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--s) * 560ms + 400ms); }
.js [data-draw].is-drawn .ln-node { transform: none; }
.lane-stages {
  list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: grid; grid-template-columns: var(--x0) repeat(5, minmax(0, 1fr));
}
.lane-stages li { --s: 0; grid-row: 1; padding: 0 var(--s3); }
.lane-stages li:nth-child(1) { grid-column: 2; }
.lane-stages li:nth-child(2) { grid-column: 3; }
.lane-stages li:nth-child(3) { grid-column: 4; }
.lane-stages li:nth-child(4) { grid-column: 5; }
.lane-stages li:nth-child(5) { grid-column: 6; }
.lane-stages h3 { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); }
.lane-stages p { margin-top: .35rem; font-size: var(--t-small); }
.lane-n, .lane-who { display: none; }
/* Sul telefono il disegno a corsie diventerebbe illeggibile: le fasi
   diventano un elenco verticale legato da un filo, e ogni fase dice
   chi c'e' con le stesse pastiglie della legenda. */
@media (max-width: 700px) {
  .lanes-scroll { overflow: visible; }
  .lanes { min-width: 0; }
  .lanes .ln { display: none; }
  .lane-stages { display: block; margin: 0; position: relative; }
  .lane-stages li { position: relative; padding: 0 0 var(--s6) 3rem; }
  .lane-stages li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 2px; background: var(--wine); opacity: .8; }
  .lane-n { display: grid; place-items: center; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper); font-size: .8125rem; color: var(--ink); }
  .lane-who { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .6rem; }
  .lw { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--body); }
  .lw::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--wine); background: var(--paper); box-sizing: border-box; }
  .lw--n { color: var(--wine-text); font-weight: 600; }
  .lw--n::before { background: var(--wine); }
}
.lanes-legend { display: flex; gap: var(--s5); margin-top: var(--s5); font-size: var(--t-small); color: var(--muted); }
.lg { display: inline-flex; align-items: center; gap: .5rem; }
.lg::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--wine); background: var(--paper); }
.lg--n::before { background: var(--wine); }

/* ------------------------------------------------------------
   I SEI FORMATI.
   ------------------------------------------------------------ */
.fmts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.fmt { --k: 0; background: var(--card); border-radius: var(--r); padding: clamp(1.1rem, .9rem + 1vw, 1.6rem); }
.fmt-art { margin: 0 0 var(--s5); padding: var(--s4) var(--s3); background: var(--paper); border-radius: var(--r-sm); }
.il-fmt { width: 100%; height: auto; }
.il-fmt path, .il-fmt circle, .il-fmt line, .il-fmt rect, .il-fmt ellipse { stroke-width: 1.15; }
.il-fmt .il-soft { stroke-width: .9; }
.fmt h3 { font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem); }
.fmt-when { margin-top: .35rem; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--wine-text); }
.fmt-takes { margin-top: .5rem; font-size: var(--t-small); }
@media (max-width: 1000px) { .fmts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fmts { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   PRIMA DEGLI OSPITI: due fotografie e la linea del tempo.
   ------------------------------------------------------------ */
.cd-text { margin-top: var(--s4); font-size: var(--t-small); max-width: 36rem; }
.cd-section .actions { margin-top: var(--s5); }
.cd-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.cd-ph { margin: 0; }
.cd-ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cd-ph figcaption { margin-top: .6rem; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cd {
  --k: 0; position: relative; list-style: none; margin: clamp(2rem, 1rem + 3vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* il binario e il suo riempimento, dal primo segno all'ultimo */
.cd::before, .cd::after {
  content: ''; position: absolute; top: 7px; left: 8px; right: calc(20% - 8px); height: 2px;
  background: var(--line);
}
.cd::after { background: var(--wine); transform-origin: left; }
.js .cd::after { transform: scaleX(0); transition: transform 2.8s var(--ease) .3s; }
.js .cd.is-drawn::after { transform: none; }
.cd-mark { position: relative; padding: 2.1rem var(--s4) 0 0; }
.cd-mark::before {
  content: ''; position: absolute; top: 0; left: 0; z-index: 1;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--wine); box-sizing: border-box;
  transition: background .3s var(--ease); transition-delay: calc(var(--k) * 640ms + 300ms);
}
.cd.is-drawn .cd-mark::before, html:not(.js) .cd-mark::before { background: var(--wine); }
.cd-mark--end::before { width: 22px; height: 22px; top: -3px; left: -3px; background: var(--saffron); border-color: var(--saffron); }
.cd.is-drawn .cd-mark--end::before, html:not(.js) .cd-mark--end::before { background: var(--saffron); }
.cd-mark b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 1.05rem + .4vw, 1.45rem); color: var(--ink); }
.cd-mark--end b { color: var(--wine-text); }
.cd-mark span { display: block; margin-top: .3rem; font-size: var(--t-small); color: var(--body); }
@media (max-width: 760px) {
  .cd-photos { grid-template-columns: minmax(0, 1fr); }
  .cd { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .cd::before, .cd::after { top: 8px; bottom: 30px; left: 7px; right: auto; width: 2px; height: auto; }
  .cd::after { transform-origin: top; }
  .js .cd::after { transform: scaleY(0); }
  .cd-mark { padding: 0 0 0 2.2rem; }
}

/* 10-reviews.css */
/* ============================================================
   LE RECENSIONI: la prova sociale in grande.

   A sinistra il numero delle recensioni Google in corpo enorme, con
   le cinque stelle e il collegamento al profilo. A destra due frasi
   vere in corpo da titolo, con la recensione intera che si apre sotto.
   Sotto, a tutta larghezza, due file di schede che scorrono in versi
   opposti: solo transform, quindi sul compositore; girano solo mentre
   si vedono (.is-live da app.js), si fermano al passaggio del mouse o
   al fuoco, e con movimento ridotto o senza JavaScript restano ferme e
   si scorrono a mano.
   ============================================================ */

.rv-top { align-items: start; row-gap: var(--s7); }
.rv-title { font-size: var(--t-h2); }
.rv-star { width: 15px; height: 15px; fill: var(--saffron); display: block; }
.rv-stars { display: inline-flex; gap: 2px; }
.rv-stars--big .rv-star { width: 26px; height: 26px; }

.rv-big { display: flex; align-items: flex-end; gap: clamp(.75rem, .5rem + 1vw, 1.5rem); margin: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0 var(--s4); }
.rv-num {
  font-family: var(--serif); font-weight: 300; font-variation-settings: 'opsz' 144;
  font-size: clamp(6rem, 3rem + 9vw, 12.5rem); line-height: .78; letter-spacing: -.035em;
  color: var(--wine-text);
}
.rv-big-lab { display: grid; gap: .55rem; padding-bottom: .5rem; }
.rv-big-lab > span:last-child { font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--body); }
.rv-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-small); font-weight: 500; color: var(--wine-text);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.rv-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rv-link:hover { color: var(--ink); }

/* le due frasi in corpo da titolo, con le virgolette appese */
.rv-f { margin: 0; }
.rv-f blockquote { margin: 0; }
.rv-f blockquote p {
  font-family: var(--serif); font-weight: 300; font-variation-settings: 'opsz' 144;
  font-size: clamp(2rem, 1.1rem + 2.8vw, 3.9rem); line-height: 1.06; letter-spacing: -.015em;
  color: var(--ink); text-wrap: balance; text-indent: -.42em;
}
.rv-f blockquote p::before { content: '\201C'; color: var(--wine); }
.rv-f blockquote p::after { content: '\201D'; color: var(--wine); }
.rv-f--1 { margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-top: 1px solid var(--line); }
.rv-f--1 blockquote p { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.4rem); line-height: 1.14; }
.rv-f figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin-top: var(--s4); font-size: var(--t-small); color: var(--body); }
.rv-f figcaption b { font-weight: 600; color: var(--ink); }
.rv-more { margin-top: var(--s3); }
.rv-more summary {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none;
  min-height: 44px;
  font-size: .875rem; color: var(--wine-text);
}
.rv-more summary::-webkit-details-marker { display: none; }
.rv-more summary::after {
  content: ''; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.rv-more[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.rv-more summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.rv-more p { margin-top: var(--s3); max-width: 62ch; font-size: var(--t-small); color: var(--body); }
.rv-tr { margin-top: .6rem; font-size: .875rem; line-height: 1.45; color: var(--body); }
.rv-tr span { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wine-text); margin-right: .25rem; }

/* il muro: due file che scorrono */
.rv-wall {
  --gap: var(--s4);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  display: grid; gap: var(--gap);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.rv-row { overflow: hidden; }
.rv-track {
  --dur: 80s;
  display: flex; gap: var(--gap); width: max-content; padding: 4px 0;
  animation: rv-scroll var(--dur) linear infinite;
  animation-play-state: paused;
}
.rv-row--1 .rv-track { --dur: 95s; animation-direction: reverse; }
.rv-wall.is-live .rv-track { animation-play-state: running; }
.rv-wall.is-live .rv-row:hover .rv-track,
.rv-wall.is-live .rv-row:focus-within .rv-track { animation-play-state: paused; }
@keyframes rv-scroll { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

.rv-card {
  flex: none; width: clamp(280px, 25vw, 380px); margin: 0;
  display: flex; flex-direction: column; gap: .8rem;
  padding: clamp(1.2rem, 1rem + .6vw, 1.6rem);
  background: var(--card); border-radius: var(--r);
}
.rv-card blockquote { margin: 0; }
.rv-card blockquote p { font-family: var(--serif); font-size: 1.14rem; line-height: 1.38; color: var(--ink); }
.rv-card figcaption { margin-top: auto; padding-top: .4rem; display: flex; align-items: center; gap: .7rem; }
.rv-card figcaption b { display: block; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.rv-card figcaption small { display: block; font-size: .8125rem; color: var(--body); }
.rv-av {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font-family: var(--serif); font-size: 1.1rem;
}
.rv-av--0 { background: rgba(var(--wine-rgb), .12); color: var(--wine-text); }
.rv-av--1 { background: rgba(242, 165, 0, .24); color: var(--saffron-text); }
.rv-av--2 { background: var(--paper-2); color: var(--ink); }
.rv-note { margin-top: var(--s5); }

/* fermo: con movimento ridotto e senza JavaScript la fila si scorre a
   mano e le copie per il giro continuo spariscono */
@media (prefers-reduced-motion: reduce) {
  .rv-track { animation: none; }
  .rv-row { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .rv-card { scroll-snap-align: start; }
  .rv-card[inert] { display: none; }
}
html:not(.js) .rv-track { animation: none; }
html:not(.js) .rv-row { overflow-x: auto; }
html:not(.js) .rv-card[inert] { display: none; }

/* sul desktop il numero resta fermo mentre le frasi scorrono accanto */
@media (min-width: 901px) {
  .rv-score { position: sticky; top: calc(var(--header-h) + var(--s6)); }
}
@media (max-width: 900px) {
  .rv-f--1 { margin-top: var(--s6); }
}

/* 11-services.css */
/* ============================================================
   I TRE SERVIZI: pannelli fotografici che si allargano.

   «Aperto» vuol dire: il pannello sotto il mouse, quello con il fuoco
   da tastiera, oppure il primo quando nessuno dei due c'e'. Aperto,
   un pannello cresce (flex-grow), la fotografia rientra dallo zoom e
   sotto il titolo si apre il resto (la riga, le pastiglie, il bottone)
   con il trucco di grid-template-rows 0fr -> 1fr. Il contenuto che si
   apre ha una larghezza fissa, cosi' non si riflette mentre il pannello
   si allarga: il pannello lo taglia finche' non c'e' spazio.

   Solo CSS. Sul telefono e sugli schermi a dito (niente hover) i
   pannelli diventano una fila che scorre, tutti aperti.
   ============================================================ */

.svcs {
  list-style: none; margin: clamp(1rem, .25rem + 2vw, 2.25rem) 0 0; padding: 0;
  display: flex; gap: var(--s3);
  height: clamp(520px, 74vh, 720px);
}
.svc { --k: 0; flex: 1 1 0; min-width: 0; transition: flex-grow .8s cubic-bezier(.2, .7, .2, 1); }

.svc-link {
  position: relative; isolation: isolate;
  display: block; height: 100%;
  border-radius: var(--r); overflow: hidden;
  color: #fff; text-decoration: none;
}
.svc-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.svc-ph { position: absolute; inset: 0; margin: 0; z-index: -2; }
.svc-ph picture, .svc-ph img { display: block; width: 100%; height: 100%; }
.svc-ph img { object-fit: cover; transform: scale(1.07); transition: transform 1.3s cubic-bezier(.2, .7, .2, 1); }
.svc-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(var(--veil), .86) 0%, rgba(var(--veil), .62) 36%, rgba(var(--veil), .1) 66%, rgba(var(--veil), 0) 80%),
    linear-gradient(to bottom, rgba(var(--veil), .38), rgba(var(--veil), 0) 24%);
}

/* l'alone dei testi piccoli, come sulle didascalie del filmato: sui
   fotogrammi chiari (il dolce, la tovaglia) regge il punto piu' chiaro */
.svc-text, .svc-chips span, .svc-stat > span, .svc-title, .svc-kicker {
  text-shadow: 0 1px 2px rgba(var(--veil), .4), 0 0 14px rgba(var(--veil), .45);
}
.svc-kicker {
  position: absolute; top: clamp(1rem, .8rem + .6vw, 1.5rem); left: clamp(1rem, .8rem + .6vw, 1.5rem);
  padding: .38rem .8rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .55); background: rgba(var(--veil), .22);
  font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.svc-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: .55rem; grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.25rem, .9rem + 1.3vw, 2.25rem);
}
.svc-stat { display: flex; align-items: flex-end; gap: .7rem; }
.svc-stat b {
  font-family: var(--serif); font-weight: 300; font-variation-settings: 'opsz' 144;
  font-size: clamp(4rem, 2.4rem + 4.4vw, 7.75rem); line-height: .78; letter-spacing: -.03em;
  text-shadow: 0 0 40px rgba(var(--veil), .35);
}
.svc-stat > span {
  max-width: 15ch; padding-bottom: .45rem;
  font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35;
  color: rgba(255, 255, 255, .92);
}
.svc-title {
  margin: .35rem 0 0; color: #fff;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem, 1.05rem + .9vw, 2.05rem); line-height: 1.12; text-wrap: balance;
}

/* il resto, che si apre */
.svc-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.2, .7, .2, 1); }
.svc-more-in {
  min-height: 0; overflow: hidden;
  display: grid; gap: .95rem; align-content: start;
  width: min(31rem, 52vw);
  opacity: 0; transition: opacity .35s var(--ease);
}
.svc-text { display: block; padding-top: .4rem; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .94); max-width: 40ch; }
.svc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.svc-chips span {
  padding: .3rem .7rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .5); background: rgba(var(--veil), .2);
  font-size: .8125rem; line-height: 1.2; color: #fff;
}
.svc-cta {
  justify-self: start; display: inline-flex; align-items: center; gap: .6rem;
  margin-top: .2rem; padding: .42rem .42rem .42rem 1.05rem; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink);
  font-size: .875rem; font-weight: 500;
}
.svc-cta i {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--wine); color: #fff; font-style: normal;
  transition: transform .25s var(--ease);
}
.svc-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.svc-link:hover .svc-cta i { transform: translateX(2px); }

/* APERTO: il primo di default, poi quello sotto il mouse o con il fuoco */
.svc:first-child,
.svc:hover,
.svc:has(.svc-link:focus-visible) { flex-grow: 2.5; }
.svc:first-child .svc-more,
.svc:hover .svc-more,
.svc:has(.svc-link:focus-visible) .svc-more { grid-template-rows: 1fr; }
.svc:first-child .svc-more-in,
.svc:hover .svc-more-in,
.svc:has(.svc-link:focus-visible) .svc-more-in { opacity: 1; transition-delay: .3s; }
.svc:first-child .svc-ph img,
.svc:hover .svc-ph img,
.svc:has(.svc-link:focus-visible) .svc-ph img { transform: none; }
/* ...ma il primo si richiude quando si apre un altro */
.svcs:is(:hover, :has(.svc-link:focus-visible)) .svc:first-child:not(:hover, :has(.svc-link:focus-visible)) { flex-grow: 1; }
.svcs:is(:hover, :has(.svc-link:focus-visible)) .svc:first-child:not(:hover, :has(.svc-link:focus-visible)) .svc-more { grid-template-rows: 0fr; }
.svcs:is(:hover, :has(.svc-link:focus-visible)) .svc:first-child:not(:hover, :has(.svc-link:focus-visible)) .svc-more-in { opacity: 0; transition-delay: 0s; }
.svcs:is(:hover, :has(.svc-link:focus-visible)) .svc:first-child:not(:hover, :has(.svc-link:focus-visible)) .svc-ph img { transform: scale(1.07); }

/* A DITO E SUL TELEFONO: una fila che scorre, tutti aperti */
@media (max-width: 900px), (hover: none) {
  .svcs {
    height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s2);
    scroll-padding-inline: var(--gutter);
  }
  .svcs::-webkit-scrollbar { display: none; }
  .svc, .svc:first-child, .svc:hover { flex: 0 0 min(84vw, 440px); scroll-snap-align: start; }
  .svc-link { height: min(136vw, 620px); }
  /* un tocco lascia un :hover appiccicoso: qui aperto vince sempre */
  .svc .svc-more { grid-template-rows: 1fr !important; }
  .svc .svc-more-in { opacity: 1 !important; width: auto; }
  .svc .svc-ph img { transform: none !important; }
  .svc-stat b { font-size: clamp(3.6rem, 2.6rem + 5vw, 5.5rem); }
}

/* 12-cuisines.css */
/* ============================================================
   LA PAGINA CUCINE.

   Le fotografie del 2019 hanno fondi a blocchi di colore (rosa,
   rosso, viola, azzurro, verde): invece di nasconderle in una fila
   piccola, diventano la firma della pagina. Una fascia di sei piatti a
   tutta larghezza in testa; un atlante delle sette cucine con la
   fotografia grande; i menu in PDF come un indice di documenti; e la
   fusion disegnata come due cerchi che si sovrappongono.
   ============================================================ */

/* ------------------------------------------------------------
   LA FASCIA DEI PIATTI
   ------------------------------------------------------------ */
.page-hero--mosaic { padding-bottom: 0; }
.ph-mosaic {
  list-style: none; margin: clamp(2rem, 1.2rem + 3vw, 3.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.ph-mosaic li { --k: 0; position: relative; overflow: hidden; }
.ph-mosaic figure { margin: 0; position: relative; aspect-ratio: 1; }
.ph-mosaic picture, .ph-mosaic img { display: block; width: 100%; height: 100%; }
.ph-mosaic img { object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.ph-mosaic li:hover img { transform: scale(1.05); }
.ph-mosaic figcaption {
  position: absolute; left: .75rem; bottom: .75rem; right: .75rem;
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; justify-self: start;
  width: max-content; max-width: calc(100% - 1.5rem);
  padding: .35rem .7rem; border-radius: var(--r-pill);
  background: rgba(246, 241, 232, .94); color: var(--ink);
  font-size: .8125rem; line-height: 1.2;
}
.ph-mosaic figcaption b { font-family: var(--serif); font-weight: 400; font-size: .95rem; }
.ph-mosaic figcaption span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--body); }
/* l'entrata: i piatti salgono uno alla volta, una volta sola */
@keyframes ph-rise { from { opacity: 0; transform: translateY(24px); } }
.js .ph-mosaic li { animation: ph-rise .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k) * 90ms + 150ms); }
@media (max-width: 900px) {
  .ph-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ph-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-mosaic figcaption span { display: none; }
  .ph-mosaic li:nth-child(n + 5) { display: none; }
}

/* ------------------------------------------------------------
   L'ATLANTE DELLE SETTE CUCINE
   ------------------------------------------------------------ */
.atlas {
  margin-top: clamp(1rem, .25rem + 2vw, 2.25rem);
  display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start;
}

/* l'indice */
.atlas-index { border: 0; margin: 0; padding: 0; min-width: 0; }
.ai { position: relative; }
.ai input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); overflow: hidden; }
.ai label {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: .9rem; align-items: center;
  padding: clamp(.8rem, .6rem + .5vw, 1.15rem) 0;
  border-top: 1px solid var(--line); cursor: pointer;
}
.ai:last-child label { border-bottom: 1px solid var(--line); }
.ai-n {
  grid-row: 1 / 3; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid var(--line-ui); font-size: .75rem; color: var(--body);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.ai-name {
  font-family: var(--serif); font-weight: 300; font-variation-settings: 'opsz' 144;
  font-size: clamp(1.45rem, 1.05rem + 1.3vw, 2.35rem); line-height: 1.05; letter-spacing: -.01em; color: var(--ink);
  transition: color .3s var(--ease), transform .45s cubic-bezier(.2, .7, .2, 1);
}
.ai-tag { grid-column: 2; font-size: .8125rem; color: var(--body); margin-top: .2rem; }
.ai-pdf {
  grid-row: 1 / 3; grid-column: 3;
  padding: .2rem .5rem; border-radius: var(--r-pill); border: 1px solid var(--line-ui);
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--body);
}
.ai label:hover .ai-name { color: var(--wine-text); }
.ai input:checked + label .ai-name { color: var(--wine-text); transform: translateX(.35rem); }
.ai input:checked + label .ai-n { background: var(--wine); border-color: var(--wine); color: #fff; }
.ai input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* i pannelli: tutti nella stessa cella, si incrociano in dissolvenza;
   la cella prende l'altezza del piu' alto e la pagina non salta */
.atlas-panels { display: grid; min-width: 0; }
.ap { grid-area: 1 / 1; min-width: 0; }
@supports selector(:has(*)) {
  .ap { opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
  .atlas:has(#atlas-south:checked) #atlaspanel-south,
  .atlas:has(#atlas-punjabi:checked) #atlaspanel-punjabi,
  .atlas:has(#atlas-gujarati:checked) #atlaspanel-gujarati,
  .atlas:has(#atlas-srilankan:checked) #atlaspanel-srilankan,
  .atlas:has(#atlas-indochinese:checked) #atlaspanel-indochinese,
  .atlas:has(#atlas-italian:checked) #atlaspanel-italian,
  .atlas:has(#atlas-fusion:checked) #atlaspanel-fusion { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
  .ap .ap-ph img { transform: scale(1.04); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
  .atlas:has(#atlas-south:checked) #atlaspanel-south .ap-ph img,
  .atlas:has(#atlas-punjabi:checked) #atlaspanel-punjabi .ap-ph img,
  .atlas:has(#atlas-gujarati:checked) #atlaspanel-gujarati .ap-ph img,
  .atlas:has(#atlas-srilankan:checked) #atlaspanel-srilankan .ap-ph img,
  .atlas:has(#atlas-indochinese:checked) #atlaspanel-indochinese .ap-ph img,
  .atlas:has(#atlas-italian:checked) #atlaspanel-italian .ap-ph img,
  .atlas:has(#atlas-fusion:checked) #atlaspanel-fusion .ap-ph img { transform: none; }
}
@supports not selector(:has(*)) {
  .atlas-panels { gap: var(--s8); }
  .ap { grid-area: auto; }
}

.ap-ph { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.ap-ph picture, .ap-ph img { display: block; width: 100%; height: 100%; }
.ap-ph img { object-fit: cover; }
.ap-count, .ap-ph figcaption {
  position: absolute; padding: .32rem .7rem; border-radius: var(--r-pill);
  background: rgba(246, 241, 232, .94); color: var(--ink); font-size: .75rem; line-height: 1.2;
}
.ap-count { top: .85rem; left: .85rem; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.ap-ph figcaption { bottom: .85rem; left: .85rem; font-family: var(--serif); font-size: .9rem; }
#atlaspanel-gujarati .ap-ph img { object-position: center 60%; }
#atlaspanel-fusion .ap-ph img { object-position: center 70%; }

.ap-body {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.25rem, .75rem + 2vw, 2.75rem); margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.ap-tag { font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wine-text); }
.ap-main h3 { margin-top: .35rem; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); font-weight: 300; font-variation-settings: 'opsz' 144; line-height: 1.05; }
.ap-text { margin-top: .75rem; font-size: 1rem; max-width: 44ch; }
.ap-actions { margin-top: var(--s5); }
.ap-btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .45rem .45rem .45rem 1.1rem; border-radius: var(--r-pill);
  background: var(--wine); color: #fff; text-decoration: none;
  font-size: .875rem; font-weight: 500;
  transition: background .2s var(--ease);
}
.ap-btn small { font-weight: 400; opacity: .8; margin-left: .25rem; }
.ap-btn i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-style: normal; }
.ap-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ap-btn:hover { background: var(--wine-2); }
.ap-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-ui); }
.ap-btn--ghost i { background: var(--wine); color: #fff; }
.ap-btn--ghost:hover { background: var(--card); }
.ap-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ap-lab { font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--body); margin-bottom: .5rem; }
.ap-dishes { list-style: none; margin: 0; padding: 0; counter-reset: dish; }
.ap-dishes li {
  counter-increment: dish;
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: baseline;
  padding: .55rem 0; border-top: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.08rem; color: var(--ink);
}
.ap-dishes li::before { content: counter(dish); font-family: var(--sans); font-size: .75rem; color: var(--wine-text); }
.ap-dishes li:last-child { border-bottom: 1px solid var(--line); }
.ap-plates { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.ap-plates ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s4); }
.ap-plates figure { margin: 0; width: clamp(92px, 7vw, 118px); }
.ap-plates img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.ap-plates figcaption { margin-top: .4rem; font-size: .8125rem; line-height: 1.25; color: var(--body); }

@media (max-width: 900px) {
  .atlas { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  /* l'indice diventa una fila di pastiglie che scorre */
  .atlas-index { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); }
  .atlas-index::-webkit-scrollbar { display: none; }
  .ai { flex: none; }
  .ai label, .ai:last-child label {
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem .5rem .5rem;
    border: 1px solid var(--line-ui); border-radius: var(--r-pill); white-space: nowrap;
  }
  .ai-n { width: 1.6rem; height: 1.6rem; font-size: .75rem; }
  .ai-name { font-family: var(--sans); font-weight: 500; font-size: .875rem; letter-spacing: 0; }
  .ai input:checked + label .ai-name { transform: none; color: #fff; }
  .ai input:checked + label { background: var(--wine); border-color: var(--wine); }
  .ai input:checked + label .ai-n { background: rgba(255, 255, 255, .2); border-color: transparent; }
  .ai-tag, .ai-pdf { display: none; }
  .ap-body { grid-template-columns: minmax(0, 1fr); }
  .ap-ph { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------
   I MENU IN PDF: un indice di documenti
   ------------------------------------------------------------ */
.mlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.ml {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center; gap: clamp(.8rem, .6rem + .8vw, 1.4rem);
  padding: 1.1rem .75rem 1.1rem 0; border-top: 1px solid var(--line-ui);
  color: var(--ink); text-decoration: none;
  transition: background .25s var(--ease), padding .35s cubic-bezier(.2, .7, .2, 1);
}
.mlist li:nth-last-child(-n + 2) .ml { border-bottom: 1px solid var(--line-ui); }
.ml-th { width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden; }
.ml-th picture, .ml-th img { display: block; width: 100%; height: 100%; }
.ml-th img { object-fit: cover; transition: transform .6s var(--ease); }
.ml-body { display: grid; gap: .2rem; }
.ml-body b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); }
.ml-body span { font-size: .875rem; color: var(--body); line-height: 1.45; }
.ml-meta { font-size: .75rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--body); text-align: right; }
.ml-dl {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-ui); color: var(--wine-text);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease);
}
.ml-dl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ml:hover .ml-dl, .ml:focus-visible .ml-dl { background: var(--wine); border-color: var(--wine); color: #fff; transform: translateY(2px); }
.ml:hover .ml-th img { transform: scale(1.08); }
.ml:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 900px) {
  .mlist { grid-template-columns: minmax(0, 1fr); }
  .mlist li:nth-last-child(2) .ml { border-bottom: 0; }
}
@media (max-width: 560px) {
  .ml { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .ml-th { width: 56px; height: 56px; }
  .ml-meta { display: none; }
}

/* ------------------------------------------------------------
   ITALIANA E FUSION: due cerchi
   ------------------------------------------------------------ */
.venn-section .grid { align-items: center; }
.venn-section .lede { margin-top: var(--s4); }
.vn-prose { margin-top: var(--s4); }
.venn-section .actions { margin-top: var(--s5); }
.vn-fig { margin: 0; }
.vn { display: block; width: 100%; height: auto; overflow: visible; }
.vn .vn-c { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.vn .vn-c--a { fill: rgba(var(--wine-rgb), .04); }
.vn .vn-c--b { fill: rgba(var(--wine-rgb), .04); }
.vn .vn-fill { fill: rgba(242, 165, 0, .34); stroke: none; }
.vn .vn-h { font-family: var(--serif); font-size: 26px; font-weight: 300; fill: var(--ink); }
.vn .vn-h--f { font-size: 24px; font-weight: 400; fill: var(--wine-text); }
.vn .vn-li { font-family: var(--sans); font-size: 13.5px; fill: var(--body); }
/* l'entrata: i due cerchi arrivano da lontano e si sovrappongono,
   poi lo spicchio si colora */
.vn-a, .vn-b { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1) .2s; }
.vn-lens { transition: opacity .8s var(--ease) 1.3s; }
.js .vn-fig:not(.is-drawn) .vn-a { transform: translateX(-70px); }
.js .vn-fig:not(.is-drawn) .vn-b { transform: translateX(70px); }
.js .vn-fig:not(.is-drawn) .vn-lens { opacity: 0; }
.vn-fig figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.vn-fig figcaption b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--wine-text); }
.vn-fig figcaption ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.vn-fig figcaption li { position: relative; padding-left: .9rem; font-size: .9375rem; color: var(--body); }
.vn-fig figcaption li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--saffron); }

/* SUL TELEFONO
   - i pannelli dell'atlante non stanno piu' nella stessa cella: quello
     scelto e' l'unico mostrato, cosi' sotto una cucina corta non resta
     il vuoto della piu' lunga;
   - i due cerchi a 350 px portano i nomi a 7 px: restano solo i tre
     titoli, piu' grandi. I piatti e le cucine sono gia' nell'atlante. */
@media (max-width: 900px) {
  @supports selector(:has(*)) {
    .ap { display: none; opacity: 1; visibility: visible; }
    .atlas:has(#atlas-south:checked) #atlaspanel-south,
    .atlas:has(#atlas-punjabi:checked) #atlaspanel-punjabi,
    .atlas:has(#atlas-gujarati:checked) #atlaspanel-gujarati,
    .atlas:has(#atlas-srilankan:checked) #atlaspanel-srilankan,
    .atlas:has(#atlas-indochinese:checked) #atlaspanel-indochinese,
    .atlas:has(#atlas-italian:checked) #atlaspanel-italian,
    .atlas:has(#atlas-fusion:checked) #atlaspanel-fusion { display: block; }
  }
}
@media (max-width: 700px) {
  .vn .vn-li { display: none; }
  .vn .vn-h { font-size: 32px; }
  .vn .vn-h--f { font-size: 34px; }
  .vn .vn-h--it, .vn .vn-h--in { transform-box: fill-box; }
  .vn .vn-h--it { transform: translate(4px, 62px); }
  .vn .vn-h--in { transform: translate(8px, 84px); }
}