/* Masseria Monte — cinema-v5 — rifinitura di cinema-v4 con la skill di design Masseria Monte (L3.9).
   Si appoggia a ../styles.css (menu, font, palette). Qui solo i capitoli e le correzioni P0-P2.
   Voli S1/S2 e tagli invariati (stesse regole .mm-alto* di v4). Animati soltanto transform/opacity (piu' clip-path
   per la maschera di apertura); il canvas del volo e' disegnato da scrub.js. Senza JS e con prefers-reduced-motion
   tutto e' visibile e fermo. Vocabolario: il filetto da 1 px, mai l'ombra; nessun raggio; una sola idea di movimento
   per sezione (titoli a righe; le foto respirano a scrub; il resto e' fermo). */

:root {
  --mm-top: calc(var(--note-height) + var(--header-offset, var(--header-height)));
  --mm-pin-vh: 220vh;          /* Q2: altezza di scroll del pin Storia (desktop) */
  --mm-gap: clamp(2rem, 4vw, 4rem);
  --mm-alto-h: 180svh;         /* capitoli di tipo A: altezza della sezione senza JS (con JS: stageSvhMobile / stageVhDesktop, per sezione) */
  --mm-stage-top: calc(var(--note-height) + var(--mm-header-compact, 4rem));   /* il palco si ferma sotto il menu ridotto */
  --mm-side: clamp(1.25rem, 4vw, 4rem);    /* margine laterale: minimo 1,25 rem su telefono (skill §6) */
  /* P0.2 — separatori che portano struttura: 3,0:1 su bianco (WCAG 1.4.11). --line (1,35:1) resta ai filetti decorativi. */
  --line-strong: rgba(128, 99, 48, .70);
  /* P1.7 — scala tipografica unica (skill §4): base 16 px. */
  --fs-overline: .75rem;
  --fs-caption: .875rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-sub: 1.5rem;
  --fs-year: 1.9rem;
  --fs-h2: clamp(2.8rem, 5.5vw, 6.3rem);
  --fs-h2-large: clamp(3.2rem, 7vw, 8.5rem);
  --fs-h1-intro: clamp(3rem, 7vw, 7.5rem);
  --fs-lead-italic: clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-band: clamp(1.15rem, 1.8vw, 1.6rem);
  /* P1.7 — scala delle spaziature (skill §5): solo questi dieci passi. */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-6: 1.5rem;
  --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem;
}

/* Menu sticky: oltre il video si abbassa (min-height in styles.css); qui le correzioni P0 sul file condiviso.
   P0.1 barra di avanzamento in --accent (5,6:1) al posto di --butter (1,13:1). P0.6 transizione 250 ms (era 350).
   Anti «AI slop»: niente blur (backdrop-filter) sul menu compatto: fondo pieno di calce. */
.mm-cinema .site-header { transition-duration: .25s; }
.mm-cinema .site-header::after { background: var(--accent); }
.mm-cinema .site-header.is-scrolled { min-height: var(--mm-header-compact, 4rem); background: var(--paper); backdrop-filter: none; }
.mm-cinema .site-header.is-scrolled .brand__name { font-size: 1.2rem; }
.mm-cinema .site-header.is-scrolled .brand__place { display: none; }
/* P1.12 aree di tocco: voci del menu e marchio almeno 44 px anche su desktop (styles.css non da' altezza). */
.mm-cinema .main-nav a { padding-block: var(--sp-3); }
.mm-cinema .brand { min-height: 44px; justify-content: center; }

/* Link e pulsanti: una sola regola per l'area di tocco (prima era ripetuta in nove punti). Il link di testo
   porta un filetto da 1 px color pietra (--line-strong) che diventa pieno al passaggio: nessuna freccia appesa. */
.mm-cinema .text-link { min-height: 44px; align-items: center; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); }
.mm-cinema .button { margin-top: 0; min-height: 44px; align-items: center; }
.mm-cinema .text-link:focus-visible { text-decoration-color: currentColor; }

/* Foto: spazio sempre riservato (aspect-ratio), nessun salto di layout. */
.mm-photo { position: relative; margin: 0; overflow: hidden; background: var(--cream); }
.mm-photo picture, .mm-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-photo img { transform-origin: 50% 50%; }
.mm-js .mm-photo[data-mm-photo] img { will-change: transform; }

/* Titoli a righe (SplitText aggiunge i wrapper; senza JS restano normali). */
.mm-title { margin: 0; max-width: 17ch; font: 400 var(--fs-h2)/.95 var(--serif); letter-spacing: -.055em; overflow-wrap: anywhere; }
.mm-title em { color: var(--accent); font-style: normal; }
.mm-title--large { max-width: 14ch; font-size: var(--fs-h2-large); line-height: .92; }

/* Capitolo 0 — sotto il video, fuori dal video. */
.mm-intro { padding-block: clamp(2rem, 5vh, 4rem) clamp(3rem, 8vh, 6rem); }
.mm-intro__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-6); }
.mm-intro__title { margin: 0; font: 400 var(--fs-h1-intro)/.9 var(--serif); letter-spacing: -.06em; }
.mm-intro__place { margin: 0; font-size: var(--fs-overline); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.mm-video-toggle { margin-left: auto; min-height: 44px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); font: 700 var(--fs-overline)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.mm-video-toggle:focus-visible { background: var(--butter); }
.mm-intro__welcome { max-width: 42rem; margin: var(--sp-6) 0 0; font: italic var(--fs-lead-italic)/1.5 var(--serif); color: var(--accent); }

/* Capitoli di tipo A — 1 «Dall'alto» (S1, L3.3) e 3 «Terra e uliveto» (S2, L3.4): sezione alta --mm-alto-h;
   dentro, un palco sticky alto 100svh meno il menu ridotto. Poster <img> (primo fotogramma) sempre presente;
   sopra, il canvas (visibile solo da `is-ready`), i due tagli avorio e la fascia dei testi. Nessuna altezza in vh.
   Regole identiche a v4 salvo: «1998» a 1,5 rem (testo grande: 3:1 basta anche sul fotogramma piu' scuro, P0.3). */
.mm-alto { position: relative; height: var(--mm-alto-h); background: var(--cream); scroll-margin-top: var(--mm-stage-top); }
.mm-alto__stage { position: sticky; top: var(--mm-stage-top); height: calc(100svh - var(--mm-stage-top)); overflow: hidden; background: var(--cream); }
.mm-alto__poster, .mm-alto__canvas, .mm-alto__cut { position: absolute; inset: 0; }
.mm-alto__poster, .mm-alto__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-alto__canvas { display: block; width: 100%; height: 100%; opacity: 0; }
.mm-alto__stage.is-ready .mm-alto__canvas { opacity: 1; }         /* stesso fotogramma del poster: nessun salto */
.mm-alto__cut { display: none; z-index: 1; }                       /* i tagli esistono solo con JS */
.mm-js .mm-alto__cut--sipario { display: flex; }
.mm-alto__cut--sipario i { display: block; flex: 0 0 50%; height: 100%; background: var(--cream); }
.mm-js .mm-alto__cut--lama { display: block; background: var(--cream); transform: translateX(-101%); }
.mm-js .mm-alto__cut--fessura { display: flex; flex-direction: column; }
.mm-alto__cut--fessura i { display: block; flex: 0 0 50%; width: 100%; background: var(--cream); }
.mm-js .mm-alto__cut--fessura i:first-child { transform: translateY(-100%); }
.mm-js .mm-alto__cut--fessura i:last-child { transform: translateY(100%); }
.mm-js .mm-alto__cut--pannello { display: block; background: var(--cream); transform: translateY(101%); }
.mm-alto__copy { position: absolute; z-index: 2; left: var(--mm-side); bottom: clamp(1.25rem, 5svh, 3.5rem); max-width: min(40rem, calc(100% - 2 * var(--mm-side))); padding: clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem); background: rgba(255, 249, 232, .82); transform-origin: left top; }   /* fascia avorio all'82 %: il fotogramma e' chiaro (regia: mai overlay scuro); contrasto sul nero vedi verify */
.mm-alto__title { max-width: none; }
.mm-alto__title em { display: block; }
.mm-alto__mask { display: block; overflow: hidden; }
.mm-alto__line { display: block; }
.mm-alto__text { margin: var(--sp-4) 0 0; max-width: 32rem; color: var(--ink); }
.mm-alto__text strong { margin-right: var(--sp-2); color: var(--accent); font: 400 var(--fs-sub)/1 var(--serif); }
.mm-alto__overline { margin: 0 0 var(--sp-3); }
.mm-alto__text .text-link { display: inline-flex; }
.mm-js .mm-alto__line { opacity: 0; transform: translateY(110%); }  /* stato iniziale: GSAP le fa salire alle soglie di p */
.mm-alto.is-static .mm-alto__canvas { opacity: 0; }                 /* sequenza non disponibile: resta il poster, i testi entrano comunque */

/* Capitolo 2 — Storia (#storia-oggi). Mobile: foto poi testi impilati; desktop: palco 55/45 (pin da JS). */
.mm-storia { background: var(--paper); padding-block: var(--mm-gap); }
.mm-storia__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-gap); align-items: center; }
.mm-storia__photo { aspect-ratio: 1280 / 853; }
.mm-storia__copy { display: flex; flex-direction: column; gap: var(--sp-6); }
.mm-storia__blocks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.mm-storia__block { margin: 0; max-width: 34rem; color: var(--muted); }
.mm-storia__block strong { display: block; margin-bottom: var(--sp-1); color: var(--accent); font: 400 var(--fs-year)/1.1 var(--serif); }
.mm-storia__steps { display: none; }

/* Capitolo 4 — Camere: pannello avorio, nessun overlay sulla foto. */
.mm-camere { background: var(--cream); padding-block: var(--mm-gap); }
.mm-camere__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-gap); align-items: center; }
.mm-camere__copy { display: flex; flex-direction: column; gap: var(--sp-6); }
.mm-camere__text p { max-width: 32rem; margin: 0 0 var(--sp-4); color: var(--muted); }
.mm-camere__photo { aspect-ratio: 1152 / 768; }
.mm-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: center; }
.mm-actions__note { flex-basis: 100%; margin: var(--sp-2) 0 0; max-width: 32rem; font-size: var(--fs-caption); color: var(--muted); }

/* Ogni capitolo con ancora di menu si ferma sotto il menu sticky (fisso), non sotto di esso. */
.mm-storia, .mm-camere, .mm-eventi, .mm-esperienze, .mm-produzione, .mm-contatti { scroll-margin-top: var(--mm-top); }
.mm-experience-detail { scroll-margin-top: calc(var(--mm-top) + 1.5rem); }

/* Capitolo 5 — Eventi: foto scura larga (2:1 desktop, 3:2 mobile), testo SOTTO su fondo bianco. */
.mm-eventi { background: var(--paper); padding-bottom: var(--mm-gap); }
.mm-eventi__photo { aspect-ratio: 3 / 2; }
.mm-eventi__photo img { object-position: 50% 60%; }
.mm-eventi__copy { padding-top: var(--mm-gap); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6) var(--mm-gap); }
.mm-eventi__text p { max-width: 32rem; margin: 0 0 var(--sp-4); color: var(--muted); }

/* Capitolo 6 — Esperienze: speculare a Camere (foto a sinistra), pannello avorio. */
.mm-esperienze { background: var(--cream); padding-block: var(--mm-gap); }
.mm-esperienze__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-gap); align-items: center; }
.mm-esperienze__photo { aspect-ratio: 1024 / 683; }
.mm-esperienze__copy { display: flex; flex-direction: column; gap: var(--sp-6); }
.mm-esperienze__text p { max-width: 32rem; margin: 0 0 var(--sp-4); color: var(--muted); }
.mm-esperienze__text strong { color: var(--accent); }

/* Capitolo 7 — Produzione: pannello giallo tenue, due foto fisse affiancate (desktop), tre colonne, elenco a righe.
   I cinque prodotti: righe separate da un filetto pieno (--line-strong, 3:1), nome in corpo normale con
   spaziatura minima (.06em, come `.produce-label` del sito): via il maiuscoletto spaziato «da template». */
.mm-produzione { background: var(--butter); padding-block: var(--mm-gap); }
.mm-produzione .mm-photo { background: var(--cream); }
.mm-produzione__photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-top: var(--mm-gap); }
.mm-produzione__photo { aspect-ratio: 1024 / 683; }
.mm-produzione__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6) var(--mm-gap); margin-top: var(--mm-gap); }
.mm-produzione__col h3 { margin: 0 0 var(--sp-2); font: 400 var(--fs-sub)/1.15 var(--serif); letter-spacing: -.02em; }
.mm-produzione__col p { margin: 0; max-width: 32rem; color: var(--muted); }
.mm-produzione__list, .mm-chapter__list { margin: 0; padding: 0; list-style: none; max-width: 34rem; border-top: 1px solid var(--line-strong); }
.mm-produzione__list { margin-top: var(--mm-gap); }
.mm-produzione__list li, .mm-chapter__list li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-strong); color: var(--muted); }
.mm-produzione__list li, .mm-chapter__list--caps li { font: 400 var(--fs-body)/1.6 var(--sans); letter-spacing: .06em; color: var(--ink); }   /* i nomi sono gia' in maiuscolo nel sorgente */
.mm-chapter__list strong { display: block; margin-bottom: var(--sp-1); color: var(--accent); font: 400 var(--fs-year)/1.1 var(--serif); }
.mm-produzione .mm-actions { margin-top: var(--mm-gap); }

/* Capitolo 8 — Contatti: fondo bianco, ritorno alla calma; nessuna animazione, recapiti subito cliccabili. */
.mm-contatti { background: var(--paper); padding-block: clamp(4rem, 10vh, 8rem) var(--mm-gap); }
.mm-contatti__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-gap); align-items: end; }
.mm-contatti__copy { display: flex; flex-direction: column; gap: var(--sp-6); }
.mm-contatti__details { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); color: var(--muted); }
.mm-contatti__details address { margin: 0 0 var(--sp-3); font-style: normal; line-height: 1.65; }
.mm-contatti__details a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: var(--sp-1); overflow-wrap: anywhere; }
.mm-contatti__details .button { margin-top: var(--sp-6); }
.mm-cinema .footer-pages { gap: var(--sp-2) var(--sp-6); }

/* Pagine interne (L3.5, nessun volo): apertura a pieno schermo con la foto principale della pagina
   (data-mm="open": maschera che si apre a tempo al caricamento, poi respiro/parallasse a scroll come le foto
   di capitolo), fascia avorio con titolo a righe; poi capitoli editoriali (foto con maschera + respiro, testi fermi,
   elenchi a righe) e «tagli su colore» (fasce avorio piene con una sola frase). */
.mm-open { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: calc(100svh - var(--mm-top)); margin-top: var(--mm-top); padding: clamp(1.25rem, 5svh, 3.5rem) var(--mm-side); background: var(--cream); }
.mm-open__photo { position: absolute; inset: 0; z-index: 0; }
.mm-open__photo img { object-position: 50% 50%; }
.mm-open__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); max-width: min(44rem, 100%); padding: clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem); background: rgba(255, 249, 232, .82); }   /* stessa fascia avorio dei voli: nessun overlay scuro */
.mm-open__copy .mm-title { max-width: none; }
.mm-open__copy .mm-chapter__text { margin: 0; }
.mm-open--below { justify-content: flex-start; padding: 0; background: var(--paper); }               /* Eventi: la foto e' scura, il testo sta SOTTO */
.mm-open--below .mm-open__photo { position: relative; inset: auto; width: 100%; height: calc(62svh - var(--mm-top)); min-height: 14rem; }
.mm-open--below .mm-open__photo img { object-position: 50% 60%; }
.mm-open--below .mm-open__copy { max-width: none; padding: var(--mm-gap) 0; background: none; }
.mm-open--plain { justify-content: center; }                                                     /* Contatti: nessuna foto, pieno avorio */
.mm-open--plain .mm-open__copy { background: none; padding: 0; }
.mm-chapter { padding-block: var(--mm-gap); background: var(--paper); scroll-margin-top: var(--mm-top); }
.mm-chapter--cream { background: var(--cream); }
.mm-chapter--butter { background: var(--butter); }
.mm-chapter--butter .mm-photo { background: var(--cream); }
.mm-chapter__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-gap); align-items: center; }
.mm-chapter__copy { display: flex; flex-direction: column; gap: var(--sp-6); align-items: flex-start; }
.mm-chapter__text { max-width: 34rem; }
.mm-chapter__text p { margin: 0 0 var(--sp-4); color: var(--muted); }
.mm-chapter__text strong { color: var(--accent); }
.mm-chapter__photo { aspect-ratio: 3 / 2; }
.mm-band { display: grid; place-items: center; min-height: 40svh; padding: var(--mm-gap) 0; background: var(--cream); }   /* taglio su colore: pieno avorio, una frase */
.mm-band--butter { background: var(--butter); }
.mm-band__lead { max-width: 42rem; margin: 0; font: italic var(--fs-band)/1.45 var(--serif); color: var(--accent); text-align: center; }
/* Galleria: le foto non si stirano (align start): le due verticali 2:3 restano intere accanto alle orizzontali. */
.mm-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.mm-gallery .mm-photo { aspect-ratio: 3 / 2; }
.mm-gallery .mm-photo--portrait { aspect-ratio: 2 / 3; }

/* Stati iniziali SOLO con JS attivo: GSAP li porta a 1. Senza JS nulla e' nascosto.
   data-mm="reveal" resta solo alle foto della galleria (una per una: unica idea della sezione). */
.mm-js [data-mm="reveal"] { opacity: 0; }   /* l'intro sotto il video parte visibile: e' GSAP a farlo entrare */
.mm-js .mm-photo[data-mm-photo]:not([data-mm="reveal"]):not([data-mm="open"]) { clip-path: inset(10% 6% 10% 6%); }   /* maschera a scrub per le foto che respirano */
/* 17/9: la foto d'apertura NON parte ritagliata. Il valore qui sopra è quello del preset «medio», ma il preset in
   uso è «fermo» (0 %): la foto si spalancava di colpo quando arrivava GSAP, insieme al buio del titolo. */
.mm-js .mm-storia__block { pointer-events: auto; }

/* Hover solo con puntatore fine (skill §7): cambio di stato immediato, nessuna transizione su colore. */
@media (hover: hover) and (pointer: fine) {
  .mm-video-toggle:hover { background: var(--butter); }
  .mm-cinema .text-link:hover { text-decoration-color: currentColor; }
}

/* Desktop (>= 1024 px): palco Storia 55/45, pin gestito da GSAP. */
@media (min-width: 1024px) {
  :root { --mm-alto-h: 200svh; }   /* capitoli di tipo A senza JS (con JS: stageVhDesktop) */
  .mm-storia { padding-block: 0; }
  .mm-storia__stage { grid-template-columns: 55fr 45fr; min-height: calc(100svh - var(--mm-top)); padding-block: var(--mm-gap); box-sizing: border-box; }
  .mm-storia__photo { aspect-ratio: 4 / 3; max-height: calc(100svh - var(--mm-top) - 2 * var(--mm-gap)); }
  .mm-storia__copy { padding-left: clamp(1rem, 3vw, 3rem); }
  /* Con pin attivo (classe da JS) i tre blocchi si sovrappongono e si alternano; gli indicatori portano gli anni (1882 / 1998 / Oggi), non 01/02/03. */
  .mm-storia.is-pinned .mm-storia__blocks { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 9rem; }
  .mm-storia.is-pinned .mm-storia__block { grid-area: 1 / 1; opacity: 0; }
  .mm-storia.is-pinned .mm-storia__block[data-active] { opacity: 1; }
  .mm-storia.is-pinned .mm-storia__steps { display: flex; gap: var(--sp-4); justify-content: space-between; flex-wrap: wrap; margin: 0; padding: var(--sp-3) 0 0; list-style: none; border-top: 1px solid var(--line-strong); font-size: var(--fs-caption); font-weight: 700; color: var(--muted); }
  .mm-storia.is-pinned .mm-storia__steps b { margin-right: var(--sp-2); font-weight: 400; color: var(--accent); font-family: var(--serif); }
  .mm-storia.is-pinned .mm-storia__steps li[data-active] { color: var(--accent); }
  .mm-camere__grid { grid-template-columns: 1fr 1.1fr; }
  .mm-eventi__photo { aspect-ratio: 2 / 1; }
  .mm-eventi__copy { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .mm-esperienze__grid { grid-template-columns: 1.1fr 1fr; }
  .mm-esperienze__copy { padding-left: clamp(1rem, 3vw, 3rem); }
  .mm-produzione__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mm-gap); }
  .mm-produzione__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-contatti__grid { grid-template-columns: 1.4fr 1fr; }
  /* Pagine interne: foto a destra, poi a sinistra (asimmetria voluta); nel capitolo senza titolo il testo resta
     nella colonna di lettura di destra, allineato al capitolo precedente, invece di un blocco identico. */
  .mm-chapter__grid { grid-template-columns: 1fr 1.1fr; }
  .mm-chapter__grid--photo-left { grid-template-columns: 1.1fr 1fr; }
  .mm-chapter__grid--photo-left .mm-chapter__copy { padding-left: clamp(1rem, 3vw, 3rem); }
  .mm-chapter__grid--split { grid-template-columns: 1fr 1.4fr; align-items: start; }
  .mm-chapter__grid--split > .mm-chapter__text:only-child { grid-column: 2; }
  /* Galleria: due colonne; una foto larga dopo ogni sei (7n), cosi' nessuna riga resta a meta'. */
  .mm-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mm-gap); }
  .mm-gallery .mm-photo:nth-child(7n) { grid-column: 1 / -1; width: 80%; justify-self: center; }
}

@media (max-width: 640px) {
  .mm-intro__row { align-items: center; }
  .mm-video-toggle { margin-left: 0; flex-basis: 100%; width: max-content; }
  .mm-title { font-size: clamp(2.3rem, 9vw, 3.6rem); max-width: 22ch; }
  .mm-title--large { font-size: clamp(2.6rem, 11vw, 4.2rem); }
  /* Telefono: fascia dei testi a tutta larghezza in basso; titolo un poco piu' piccolo per lasciare vedere il volo. */
  .mm-alto__copy { left: 0; right: 0; bottom: 0; max-width: none; padding: var(--sp-4) 1.25rem 1.25rem; }
  .mm-alto__title { font-size: clamp(2.1rem, 8.5vw, 3.2rem); }
  .mm-alto__text { margin-top: var(--sp-3); font-size: .95rem; }
  /* Pagine interne: fascia d'apertura a tutta larghezza in basso, come nei voli. */
  .mm-open { padding: 0; }
  .mm-open__copy { width: 100%; max-width: none; padding: var(--sp-4) 1.25rem 1.25rem; }
  .mm-open--below .mm-open__copy { width: var(--wrap); }
  .mm-open--plain { padding: var(--mm-gap) 1.25rem; }
}

/* Storia: su telefono la copertina resta panoramica, senza il forte ritaglio
   della foto orizzontale dentro un'apertura a tutta altezza. Desktop invariato. */
@media (max-width: 767px) {
  .mm-open--story { min-height: 0; padding: var(--mm-top) 0 0; }
  .mm-open--story .mm-open__photo { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .mm-open--story .mm-open__photo img { transform: none !important; object-position: 50% 50%; }
  .mm-open--story .mm-open__copy { width: 100%; max-width: none; padding: var(--sp-4) 1.25rem 1.25rem; background: var(--cream); }
}

/* Movimento ridotto: tutto statico e visibile, tranne il video (che resta com'e').
   I voli (S1, S2) mostrano il primo fotogramma fermo (poster <img>): canvas e tagli spariscono, i testi sono completi. */
@media (prefers-reduced-motion: reduce), print {
  .mm-js [data-mm="reveal"], .mm-js [data-mm-intro] > *, .mm-js .mm-storia__block, .mm-line, .mm-js .mm-alto__line { opacity: 1 !important; transform: none !important; }
  .mm-js .mm-photo[data-mm-photo] { clip-path: none !important; }
  .mm-js .mm-photo[data-mm-photo] img { transform: none !important; will-change: auto; }
  .mm-storia.is-pinned .mm-storia__blocks { gap: var(--sp-6); }
  .mm-storia.is-pinned .mm-storia__block { grid-area: auto; opacity: 1; }
  .mm-alto__canvas { opacity: 0 !important; }
  .mm-js .mm-alto__cut { display: none !important; }
  .mm-alto__copy { transform: none !important; }
}

/* 16/9 sera: consenso GDPR nel modulo e pulsante «Copia» accanto a email/telefono (chi non ha un programma di posta sul PC). */
.mm-modulo__consenso { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1rem; font-size: .9rem; line-height: 1.5; color: var(--muted, #61625b); }
.mm-modulo__consenso input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: #806330; }
.ha-provato .mm-modulo__consenso input:invalid { outline: 2px solid #a14a2a; outline-offset: 2px; }
.mm-copia { display: inline-block; margin-left: .55rem; padding: .28rem .6rem; font: 600 .68rem/1 var(--sans, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #806330; background: none; border: 1px solid rgba(128, 99, 48, .35); border-radius: 999px; cursor: pointer; vertical-align: middle; transition: background .25s ease, color .25s ease; }
.mm-copia:hover, .mm-copia:focus-visible { border-color: #806330; }
.mm-copia.is-fatto { color: #fff; background: #806330; border-color: #806330; }
.mm-copia-riga { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; max-width: 100%; }
.footer-col .mm-copia-riga { display: flex; }
.footer-col .mm-copia-riga { flex-wrap: nowrap; }
.footer-col .mm-copia { margin-left: 0; padding: .22rem .45rem; font-size: .6rem; }
.mm-copia-riga { text-transform: none; letter-spacing: normal; font-size: inherit; }
/* 17/9: la maschera di riga di SplitText (overflow: clip, alta quanto l’interlinea 0,95) tagliava le discendenti («g» di «gli ulivi»): il riquadro si allunga in basso senza spostare il testo. */
.mm-mask-line-mask { padding-bottom: .22em; margin-bottom: -.22em; }

/* 17/9 sera (richiesta del titolare): uno stacco fra due blocchi che sembravano un tutt'uno — il modulo di richiesta
   in Camere e la fascia gialla in Eventi. Un filetto corto e centrato, con aria sopra e sotto: niente riquadri. */
/* 18/9, richiesta del titolare: «la barra l'hai gia' messa ma rendila un po' piu' marcata, magari fai
   sembrare di piu' che e' un distacco». Tre cose insieme, perche' una sola non basta a farlo leggere come
   uno stacco: (1) il respiro sopra e sotto quasi raddoppia — e' lo spazio, piu' della riga, che dice «qui
   finisce un discorso e ne comincia un altro»; (2) via l'opacita' .45, che rendeva la riga quasi invisibile
   sul fondo avorio; (3) un piccolo rombo al centro nel colore d'accento, che trasforma una riga di
   separazione in un segno voluto. Resta `aria-hidden`: e' decorazione, non contenuto. */
.mm-stacco { position: relative; width: min(560px, 76%); height: 1px; margin: clamp(4rem, 10vh, 7rem) auto; border: 0; background: var(--line-strong, rgba(128, 99, 48, .7)); }
.mm-stacco::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; transform: rotate(45deg); background: var(--accent, #806330); }
@media (max-width: 760px) { .mm-stacco { width: 80%; margin-block: clamp(2.75rem, 7vh, 4.5rem); } }
/* 19/9/2026 (G01, segnalato dal titolare): in Eventi lo stacco e' figlio diretto della griglia a due colonne e finiva centrato nella sola prima colonna (372 px a sinistra a 1366). Occupa tutte le colonne; su una colonna sola non cambia nulla. */
.mm-chapter__grid > .mm-stacco { grid-column: 1 / -1; }

/* 17/9 sera: filmato delle camere fornito dal titolare. Non parte da solo (preload="none"): finche' non lo si avvia
   la pagina resta leggera e si vede solo la locandina, che e' un fotogramma dello stesso filmato. */
.mm-video-camere { padding-block: var(--mm-gap); background: var(--paper); scroll-margin-top: var(--mm-top); }
/* 18/9, due difetti segnalati dal titolare guardando la pagina.
   PRIMO, «la G di SGUARDO si accavalla al video di sotto»: il titolo ha interlinea .95 e `margin: 0`, e la
   figura sotto aveva anch'essa `margin: 0`. Con un'interlinea sotto l'unita', la coda della «g» esce dalla
   scatola della riga; senza un millimetro di spazio finiva a cadere sul filmato. Non si tocca l'interlinea,
   che e' la stessa di tutti gli altri titoli del sito: si da' alla figura lo stacco che non aveva.
   SECONDO, «il video e' ancora un po' troppo largo»: la colonna `--wrap` del sito arriva a 90rem, cioe'
   1440 px, e il filmato la riempiva tutta. Portato a 64rem (1024 px): resta cinematografico, ma rientra
   nella misura editoriale della pagina e non schiaccia piu' la didascalia, che sta a 34rem. */
.mm-video-camere__box { margin: clamp(1.75rem, 3.5vh, 3rem) 0 0; max-width: min(64rem, 100%); }
.mm-video-camere video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #12110d; }
.mm-video-camere figcaption { margin-top: var(--sp-3); max-width: 34rem; color: var(--ink); font-size: .92rem; }

/* ============================================================
   18/9 — Pagina Produzione, blocco «Il perché del sano / I nostri prodotti».
   Richiesta del titolare: «I PERCHE, forse intendi IL PERCHE» e «questa parte
   va migliorata graficamente». Prima: due elenchi nudi a filetti, due occhielli
   al posto dei titoli, righe di lunghezza diversa fra le due colonne.
   Ora: due pannelli di carta bianca sul crema, titolo vero in Fraunces, il
   «Perché» ripetuto cinque volte diventa una colonna in corsivo (anafora), i
   cinque prodotti in Fraunces e non più tutti in maiuscolo.
   Vocabolario invariato: filetto da 1 px, nessun raggio, nessuna ombra,
   nessuna animazione, nessuna immagine, nessuna libreria.
   ============================================================ */
.mm-sano { padding-block: clamp(3.5rem, 7vw, 6rem); }

.mm-sano__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.mm-sano__scheda {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line-strong);
}

.mm-sano__titolo {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* I cinque «perché»: il ritornello va nella sua colonna, in corsivo serif.
   Il testo del <li> resta una sola frase continua, quindi lo screen reader
   legge «Perché i nostri prodotti...» esattamente come prima. */
.mm-sano__perche { margin: 0; padding: 0; list-style: none; }
.mm-sano__perche li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: clamp(.7rem, 1.4vw, 1.1rem);
  align-items: baseline;
  padding: clamp(.7rem, 1.4vw, 1rem) 0;
  border-top: 1px solid var(--line-strong);
  font-family: var(--sans);
  font-size: var(--fs-body, 1rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}
.mm-sano__perche li:first-child { padding-top: 0; border-top: 0; }
.mm-sano__perche li:last-child { padding-bottom: 0; }
.mm-sano__perche b {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: -.01em;
  color: var(--accent);
}

/* I cinque prodotti: nomi in Fraunces, iniziale maiuscola e non più tutto
   maiuscolo; un filetto corto color accento al posto del pallino. */
.mm-sano__prodotti { margin: 0; padding: 0; list-style: none; }
.mm-sano__prodotti li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: clamp(.6rem, 1.2vw, .9rem);
  align-items: start;
  padding: clamp(.75rem, 1.5vw, 1.05rem) 0;
  border-top: 1px solid var(--line-strong);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}
.mm-sano__prodotti li:first-child { padding-top: 0; border-top: 0; }
.mm-sano__prodotti li:last-child { padding-bottom: 0; }
.mm-sano__prodotti li::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 0;
  margin-top: .6em;
  border-top: 1px solid var(--accent);
}

/* Desktop: due pannelli DIVERSI, non due gemelli. Si rompono le due sole
   uguaglianze che il progetto ha già deciso di rompere altrove (nota
   «PRODUZIONE — composizione asimmetrica» in assets/tipografia.css):
   larghezza e bordo superiore. Il secondo pannello è più stretto e comincia
   più in basso: nessuna cucitura sull'asse della finestra. */
@media (min-width: 1024px) {
  .mm-sano__grid { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); }
  .mm-sano__scheda + .mm-sano__scheda { margin-top: clamp(1.5rem, 3vw, 2.75rem); }
}

/* Telefono stretto: la colonna del «Perché» ruberebbe metà riga, quindi la
   parola torna in linea con la frase. */
@media (max-width: 560px) {
  .mm-sano__perche li { display: block; }
  .mm-sano__perche b { margin-right: .3em; }
}


/* ───────────────────────── Pannelli del menu «Produzione» e «Bottega» (18/9/2026 sera) ─────────────────────────
   Costruiti da cinema.js sotto la testata fissa; stesse tessere del negozio (foto 600×420 per «Produzione», foto del
   prodotto fusa sul campo crema per «Bottega»). Solo da 1200 px in su con un mouse: sotto, il menu a panino.

   18/9/2026 sera, seconda passata — richiesta del titolare con due screenshot a ~1366 px: sul sito «Bottega» usciva
   4 tessere per riga su due righe in un pannello da 920 px centrato (alto 562 px), nel negozio otto tessere in UNA riga
   in un pannello largo quanto la testata (alto ~316 px); «capita anche su Produzione». Decisione: il riferimento è il
   NEGOZIO, il sito lo copia a ogni larghezza da 1200 px in su.
   Perché era diverso: la R51/R53 copiava la §9.2 di mm-v9-negozio.css (920 px, 4 colonne, spazi 24/22, padding 22/30/30,
   bordo 3 px oliva), che nel negozio è una regola MORTA su desktop: da 992 px in su la §12 la sovrascrive (36 px dai due
   bordi, 8 colonne, spazi 18/16, padding 20/28/26, nome .92rem). Seconda causa: la radice del carattere è 14 px nel
   negozio e 16 px nel sito, quindi 1rem / .66rem / .62rem scritti «uguali» uscivano 16 / 10,56 / 9,92 px contro
   12,88 (Bottega) e 14 (Produzione) / 11 / 10,5 px. Terza: il negozio ha una riga eyebrow con filetto a tutta larghezza
   (11 px + 10 di padding + 1 di filetto = 27,5 px) e 20 px in più sopra la griglia (margin-top del tema su
   .cbp-menu-column), il sito una testa senza filetto da 15,8 px + 16 di margine.
   Qui si copiano le regole del negozio che si vedono davvero (§12 e §17.1/17.2/17.5 di mm-v9-negozio.css), in px per
   non dipendere dalla radice diversa. Ritmo verticale: filetto 1 + 40 di padding (20 del tema + 20 della ul) + riga
   eyebrow 27,5 + 18 (Bottega) o 20 (Produzione) + tessere + 26 sotto. Atteso: Bottega 1128/1294/1528/1848 ×
   295/316/345/369 a 1200/1366/1600/1920 con foto quadrate da 120/141/170/210; Produzione 760 × 316 a destra, a 36 px
   dal bordo. Il pannello sta a top:100% della testata (99 px): il suo filetto da 1 px si sovrappone al bordo inferiore
   della testata (stesso colore), così sotto la testata c'è UNA riga sola, come nel negozio (dove la riga è il filetto
   del riquadro a 101 px). Il link «Tutti i prodotti →» resta nella riga dell'eyebrow con lo stesso corpo e la stessa
   interlinea (11 px/1,5): misurato, non cambia né la larghezza né l'altezza rispetto al negozio.
   Misure prima/dopo: scratchpad pannelli/misure.json (negozio) e misure-dopo.json (sito locale). */
.mm-pannello { position: absolute; top: 100%; left: 36px; right: 36px; z-index: 41; padding: 40px 28px 26px; box-sizing: border-box; color: var(--ink); background: var(--paper); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; box-shadow: 0 18px 44px rgba(85, 69, 54, .16); opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; text-align: left; }
.mm-pannello.is-open { opacity: 1; transform: none; }
.mm-pannello[hidden] { display: none; }
/* riga dell'eyebrow = ::before della ul del negozio: 11 px, 600, spaziatura .2em, interlinea 1,5 (16,5 px), 10 px di
   padding e filetto da 1 px a tutta larghezza; poi 18 px (Bottega) o 20 px (Produzione) fino alle tessere */
.mm-pannello__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 20px; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.mm-pannello--bottega .mm-pannello__testa { margin-bottom: 18px; }
.mm-pannello__eyebrow { font: 600 11px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.mm-pannello__tutto { font: 600 11px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); text-underline-offset: .3em; }
.mm-pannello__tutto:hover, .mm-pannello__tutto:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
.mm-pannello__griglia { list-style: none; margin: 0; padding: 0; display: grid; }
/* soglia del negozio (§12 e §17.2 stanno in @media (min-width: 992px)); qui sotto i 1200 px il pannello è comunque nascosto */
@media (min-width: 992px) {
  /* «Bottega» = §12: da 36 a 36 px dal bordo della finestra (larghezza = finestra − 72), 8 colonne in una riga, spazi 18/16 */
  .mm-pannello--bottega { left: 36px; right: 36px; width: auto; padding: 40px 28px 26px; }
  .mm-pannello--bottega .mm-pannello__griglia { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px 16px; }
  /* «Produzione» = §17.2: 760 px allineati a DESTRA a 36 px dal bordo, tre tessere da 220 px, spazi 20 */
  .mm-pannello--produzione { left: auto; right: 36px; width: 760px; max-width: calc(100vw - 72px); padding: 40px 30px 26px; }
  .mm-pannello--produzione .mm-pannello__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
/* tessera: foto 10/7 (Produzione) o quadrata 1/1 sul campo crema al 72 % in multiply (Bottega), raggio 12, nome centrato
   Fraunces 400 con interlinea 1,25 (14 px Produzione, 12,88 px Bottega = .92rem su radice 14), «Scopri» 10,5 px */
.mm-pannello__tessera { display: block; color: inherit; text-decoration: none; text-align: center; }
.mm-pannello__foto { display: block; width: 100%; aspect-ratio: 10 / 7; border-radius: 12px; background: var(--cream) center / cover no-repeat; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, background-size .4s ease; } /* stessi tempi del negozio (17.2/§12) */
.mm-pannello--bottega .mm-pannello__foto { aspect-ratio: 1 / 1; background-size: 72%; background-blend-mode: multiply; }
.mm-pannello__tessera:hover .mm-pannello__foto, .mm-pannello__tessera:focus-visible .mm-pannello__foto { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(85, 69, 54, .14); }
.mm-pannello--bottega .mm-pannello__tessera:hover .mm-pannello__foto { background-size: 78%; }
.mm-pannello__nome { display: block; margin: 11px 0 0; font: 400 14px/1.25 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.mm-pannello--bottega .mm-pannello__nome { font-size: 12.88px; }
.mm-pannello__tessera:hover .mm-pannello__nome, .mm-pannello__tessera:focus-visible .mm-pannello__nome { color: var(--accent); }
.mm-pannello__scopri { display: block; margin-top: 6px; font: 600 10.5px/1.25 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); opacity: 0; transform: translateY(-3px); transition: opacity .25s ease, transform .25s ease; }
.mm-pannello__tessera:hover .mm-pannello__scopri, .mm-pannello__tessera:focus-visible .mm-pannello__scopri { opacity: 1; transform: none; }
.mm-pannello__tessera:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
@media (max-width: 1199px) { .mm-pannello { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .mm-pannello, .mm-pannello__foto, .mm-pannello__scopri { transition: none; } }

/* ───────── 19/9/2026 (G05): pagina Produzione come ingresso breve — due frasi e tre percorsi fotografici verso le pagine del negozio.
   Stessi caratteri e stessi spazi del resto del sito; nessuno script: le comparse sono quelle di data-mm="chapter". */
.mm-percorsi__intro { max-width: 46rem; margin: 0 auto; text-align: center; }
.mm-percorsi__intro p { margin: 0 0 var(--sp-3); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.65; color: var(--ink, #2f2a22); }
.mm-percorsi { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); margin: clamp(2.5rem, 6vh, 4.5rem) 0 0; padding: 0; list-style: none; }
.mm-percorso { position: relative; min-width: 0; scroll-margin-top: calc(var(--mm-top, 100px) + 24px); }
/* tutta la tessera si tocca: il link del titolo si stende sopra fotografia e testo (un solo link per i lettori di schermo, piu' «Continua a leggere») */
.mm-percorso__titolo a::after { content: ""; position: absolute; inset: 0; }
.mm-percorso__foto { display: block; margin: 0 0 var(--sp-6); overflow: hidden; border-radius: 4px; background: #e9e4d8; aspect-ratio: 4 / 3; }
.mm-percorso__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.mm-percorso:hover .mm-percorso__foto img, .mm-percorso:focus-within .mm-percorso__foto img { transform: scale(1.035); }
.mm-percorso .overline { display: block; margin: 0 0 var(--sp-2); }
.mm-percorso__titolo { margin: 0 0 var(--sp-3); font: 400 clamp(1.65rem, 2.3vw, 2.15rem)/1.08 var(--serif); letter-spacing: -.03em; }
.mm-percorso__titolo a { color: inherit; text-decoration: none; }
.mm-percorso__titolo a:hover, .mm-percorso__titolo a:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mm-percorso p { margin: 0 0 var(--sp-4); max-width: 34rem; line-height: 1.65; color: var(--ink, #2f2a22); }
.mm-sano__bottega { display: inline-block; margin-top: var(--sp-6); }
@media (min-width: 860px) {
  .mm-percorsi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-percorso__foto { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) { .mm-percorso__foto img { transition: none; } .mm-percorso:hover .mm-percorso__foto img, .mm-percorso:focus-within .mm-percorso__foto img { transform: none; } }