/* Tipografia e colore d'identità della bozza cinema-v9 — 10 settembre 2026.
   Ridefinisce SOLO i due token dei caratteri di /styles.css e aggiunge il verde
   del logo. Va caricato DOPO /styles.css e /cinema-v7/cinema.css.
   Nessun altro file del prototipo è toccato: root e cinema-v3…v8 restano com'erano. */

:root {
  /* Titoli: Fraunces, serif old-style disegnato oggi. Georgia resta il fallback
     leggibile finché il .woff2 non è pronto (font-display: swap). */
  /* «Fraunces ripiego» è Georgia ridotta al 84,95% perché occupi lo stesso
     spazio: senza, il titolo appare grande e poi si rimpicciolisce quando il
     .woff2 arriva. Definito in assets/vendor/fonts/fonts.css. */
  --serif: "Fraunces", "Fraunces ripiego", Georgia, "Times New Roman", serif;
  /* Corpo: Source Sans 3, umanistico, la stessa famiglia del corpo di Adobe. */
  --sans: "Source Sans 3", "Source Sans 3 ripiego", "Helvetica Neue", Arial, sans-serif;

  /* Verde oliva del bordo del logo (LOGO DEFINITIVO 2024.pdf, colore dominante
     misurato: 17,5% dei pixel non bianchi). Fino a oggi assente dal sito. */
  --oliva: #484830;
  --oliva-tenue: rgba(72, 72, 48, .30);
}

/* Fraunces ha l'asse ottico opsz: lasciamo che il browser lo scelga in base
   alla dimensione reale, così i titoli grandi si stringono e il testo piccolo
   si apre. Senza questo, un serif variabile resta uguale a ogni corpo. */
body {
  font-optical-sizing: auto;
  font-synthesis-weight: none;
}

/* I display di Fraunces sopportano — anzi chiedono — un tracking negativo che
   Georgia non tollerava. Solo sui titoli: sul corpo il tracking resta a zero. */
.mm-title,
.mm-intro__title,
.mm-storia__title,
h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.028em;
  font-optical-sizing: auto;
}

/* Marchio in testata: è il nome dell'azienda, va nel carattere dei titoli. */
.brand__name {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.015em;
}
.brand__place {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--oliva);
}

/* MENU — sistemato secondo la richiesta del titolare del 10/9.
   Struttura invariata (Storia, Camere, Eventi, Esperienze, Produzione, Shop,
   Contatti: il brief concordato con Codex la fissa). Cambia il modo in cui è
   scritto: Source Sans 3 al posto di Arial, peso 600 invece di 700 e spaziatura
   più stretta, perché sette voci in maiuscolo grassetto molto spaziato
   affaticano la riga. Un filo più grandi, quindi più leggibili. */
.main-nav a,
.language {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .105em;
}

/* Il filetto sotto la voce attiva prende il verde del logo: è il segnale di
   posizione, e tanto vale che sia un colore nostro invece di ereditare il testo. */
.main-nav a[aria-current="location"],
.main-nav a[aria-current="page"] {
  color: var(--oliva);
}
.main-nav a[aria-current="location"]::after,
.main-nav a[aria-current="page"]::after {
  background: var(--oliva);
}

/* Occhielli e piccole maiuscole: stessa famiglia del corpo, verde del logo.
   Sostituiscono il marrone accentato usato finora, che spariva sul crema. */
.overline,
.section-index,
.mm-eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--oliva);
}

/* Corpo del testo: Source Sans 3 a peso 400 ha un grigio di pagina più chiaro
   di Arial, quindi la misura resta la stessa ma la riga respira. */
p, li, figcaption, address, .mm-body {
  font-family: var(--sans);
  letter-spacing: 0;
}

/* Numeri delle date (1882, 1998) in cifre proporzionali old-style: è la ragione
   per cui si sceglie un serif con vere varianti numeriche invece di un font
   qualsiasi. Se il font non le espone, il browser ignora la riga. */
.mm-storia__chapters strong,
.cinematic__chapter strong,
time {
  font-family: var(--serif);
  font-variant-numeric: oldstyle-nums;
  font-weight: 500;
}

/* ============================================================
   Richieste del titolare del 10/9, secondo turno
   ============================================================ */

/* 1. Via la fascia «Anteprima locale», per guardare la bozza come se fosse
   finita. Il token va a zero, così header, hero e ancore si ricalcolano da soli
   invece di lasciare una striscia vuota. Per rimetterla: cancellare queste
   quattro righe. */
:root { --note-height: 0rem; }
.local-note { display: none; }

/* 2. Voci di menu più grandi: erano troppo piccole. Cresce con lo schermo e si
   ferma prima di mandare le sette voci a capo; la spaziatura si stringe ancora
   un poco perché a corpo maggiore serve meno aria fra le lettere. */
.main-nav a,
.language {
  font-size: clamp(.9rem, .7rem + .4vw, 1rem);
  letter-spacing: .07em;
}
.main-nav { gap: clamp(.7rem, 1.15vw, 1.15rem); }

/* 13/9: menu più leggibile. Il pannello fixed mobile deve usare la larghezza
   disponibile, non ereditare il centraggio shrink-to-fit della testata. */
@media (max-width: 1199px) {
  .site-header .main-nav { justify-self: stretch; justify-content: flex-start; }
  .main-nav.is-open a { font-size: clamp(1.45rem, 4vw, 1.85rem); }
}

/* 3. Logo in testata, in alto a sinistra: è dove lo mettono Moroseta e Borgo
   San Marco (Il Frantoio lo centra). L'ovale illustrato porta già dentro il
   nome, quindi accanto resta solo il nome in Fraunces come firma leggibile:
   a 60 px l'inciso dentro l'ovale non si legge, il marchio sì. */
.brand {
  flex-direction: row;
  align-items: center;
  gap: .7rem;
}
.brand__logo {
  width: auto;
  flex: none;
  /* Dal 10/9 il file PNG ha il fondo davvero trasparente fuori dall'ovale
     (generato con `scontorna.mjs`, riempimento dai bordi fino al filetto verde,
     contorno ammorbidito). Il ritaglio `clip-path: ellipse()` che usavamo prima
     era un rimedio: tagliava anche un filo del bordo verde e non funzionava su
     fondi di colore diverso. Ora non serve più. */
}
.brand__text { display: inline-flex; flex-direction: column; line-height: 1; }

@media (max-width: 900px) {
  /* Su telefono il nome scritto sparisce: resta il solo marchio, che è già
     il nome. Così la testata non ruba spazio al menu. */
  .brand__logo { height: 46px; }
  .brand__text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brand__logo { transition: none; }
}

/* 4. P4 della regia: passaggio fra le pagine.
   Oggi cliccando «Storia» la pagina sbianca e ricarica: è la cosa che più fa
   «sito vecchio», più del carattere. Sei righe di CSS, zero JavaScript, zero
   dipendenze; i browser che non conoscono la regola la ignorano e si comportano
   esattamente come adesso. Da riverificare sul WordPress finale, dove le pagine
   sono servite da PHP e non dal server di anteprima. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mm-esce .18s ease both; }
::view-transition-new(root) { animation: mm-entra .24s ease both; }
@keyframes mm-esce  { to   { opacity: 0; } }
@keyframes mm-entra { from { opacity: 0; } }

/* NOTA IMPORTANTE, 10/9 sera. Qui prima c'era `animation: none`, e su questo PC
   spegneva la transizione: Windows ha le animazioni disattivate
   (SPI_GETCLIENTAREAANIMATION = False, verificato), quindi Chrome espone
   `prefers-reduced-motion: reduce` e il titolare vedeva «il classico
   aggiornamento» — la dissolvenza c'era, ma la spegnevamo noi.
   Era anche un errore tecnico: `prefers-reduced-motion` chiede di togliere il
   MOVIMENTO che può dare disturbo — parallasse, zoom, spostamenti ampi,
   rotazioni — non ogni cambiamento. Una dissolvenza breve non muove nulla nel
   campo visivo ed è consentita. Qui si accorcia, non si spegne. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation-duration: .12s; }
  ::view-transition-new(root) { animation-duration: .14s; }
}


/* ============================================================
   5. TESTATA — logo a sinistra, menu al centro, resto a destra
   ============================================================
   Decisione del titolare del 10/9, dopo aver visto la variante centrata:
   «il logo lo preferisco a sinistra perché essendo grande prende troppo spazio;
   logo a sinistra, menu al centro, altre icone a destra, come il vecchio sito».
   È anche l'impianto di quattro dei sei concorrenti misurati (Torre Coccaro,
   Bambarone, Moroseta, Sorelle Barnaba) e del vecchio masseriamonte.com.

   Il logo va a 72 px: il campione sta fra 75 e 85 px di altezza, ma quei loghi
   sono scritte orizzontali, mentre il nostro è un ovale — a parità di altezza
   occupa molto meno larghezza, quindi 72 px bastano a leggerlo senza pesare.
   La testata di conseguenza è 5,75rem (92 px), non le 9,5rem della centrata. */

:root { --header-height: 5.75rem; }

.site-header {
  min-height: 5.75rem;
  /* Colonne laterali uguali (1fr … 1fr): solo così il menu risulta centrato
     rispetto allo SCHERMO e non alla propria colonna. Con `auto 1fr auto` il
     centro cadeva a 830 px su un viewport da 1440 (misurato), perché marchio e
     lingua hanno larghezze diverse. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  /* Il passaggio fra testata alta e compatta deve essere morbido: il titolare
     lo trovava «troppo brusco e sgradevole». Si dichiara anche `height`, non
     solo `min-height`, perché l'altezza reale la decide il contenuto e senza
     questa riga il riflusso avveniva di colpo. Curva in uscita, 320 ms: sopra
     i 350 ms il movimento comincia a sembrare lento. */
  /* 11 settembre: il titolare vede il logo «un po' piccolino». Il logo sale da
     72 a 82 px e la testata da 5,75 a 6,25 rem: senza alzare anche la testata
     resterebbero 4 px sopra e sotto e il marchio sembrerebbe schiacciato. */
  height: 6.25rem;
  transition:
    height .32s cubic-bezier(.22, .61, .36, 1),
    min-height .32s cubic-bezier(.22, .61, .36, 1),
    background-color .32s ease,
    box-shadow .32s ease;
}

/* Marchio a sinistra: ovale e nome affiancati. */
.brand {
  flex-direction: row;
  align-items: center;
  gap: .7rem;
  justify-self: start;
}
.brand__logo {
  height: 82px;
  /* Il rimpicciolimento usa `transform: scale()`, non `height`.
     Cambiare l'altezza obbliga il browser a rifare il calcolo della pagina a
     ogni fotogramma: per quanto si allunghi la durata, il movimento resta a
     scatti — ed e' il motivo per cui il titolare continuava a vederlo brusco
     nonostante la transizione ci fosse. `transform` invece e' fluido perche'
     non tocca il layout. Il riquadro resta alto 82 px e l'immagine si riduce
     dentro di esso, ancorata a sinistra. */
  transform-origin: left center;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), opacity .34s ease;
}
.brand__text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }

/* Menu al centro della testata, non appoggiato al marchio. */
.main-nav {
  justify-self: center;
  justify-content: center;
}

/* Lingua e ogni futura icona: a destra, in fila.
   Oggi c'è il solo IT/EN. Un'icona del negozio o del telefono, se il titolare
   le vorrà, entra qui dentro senza toccare altro. */
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

/* Allo scroll la testata si stringe: il marchio resta dov'è, si riduce solo. */
.site-header.is-scrolled { min-height: 4.5rem; height: 4.5rem; }
/* 57 / 82 = 0,70: il logo compatto cresce quanto quello grande e resta
   dentro la testata stretta da 72 px, senza toccare il layout. */
.site-header.is-scrolled .brand__logo { transform: scale(.70); }

/* Il logo cambia scala di un quarto in 340 ms: e' un movimento minimo e
   circoscritto, non una parallasse. Resta, abbreviato. */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .brand__logo { transition-duration: .16s; }
}

/* ------------------------------------------------------------
   6. Telefono
   ------------------------------------------------------------
   Sotto i 900 px il CSS di base dispone la testata da sé (marchio, lingua,
   pulsante Menu) e sotto i 640 px passa a flex: qui si aggiunge solo ciò che
   serve al logo nuovo, senza reimporre una griglia che entrerebbe in conflitto.
   `order` cambia il solo ordine visivo: quello di lettura per tastiera e
   lettori di schermo segue il DOM e resta invariato. */
@media (max-width: 900px) {
  :root { --header-height: 5rem; }

  .site-header,
  .site-header.is-scrolled { min-height: 5rem; }

  .brand,
  .site-header.is-scrolled .brand {
    flex-direction: row;
    align-items: center;
    /* Il CSS di base impone justify-content: center al marchio sotto i 640 px:
       con il logo unico figlio visibile lo mandava al centro della riga
       (misurato x=110 su 390 px di viewport). */
    justify-content: flex-start;
    flex: 0 0 auto;
    min-width: 0;
    gap: .5rem;
  }
  .brand__logo,
  .site-header.is-scrolled .brand__logo { height: 52px; }
  /* Il nome scritto sparisce: il marchio lo contiene già e lo spazio serve al menu. */
  .brand__text { display: none; }

  .site-header .brand { order: 1; }
  .site-header .main-nav { order: 2; }
  .site-header .header-actions { order: 3; margin-left: auto; }
  .site-header .menu-toggle { order: 4; margin-left: .9rem; }
}

/* ============================================================
   7. VIDEO — visione pulita, si ferma solo se ci clicchi sopra
   ============================================================
   Richiesta del titolare del 10/9, seconda passata: «il simbolino grigio
   toglilo; devo mettere in pausa solo se clicco e se mi metto sopra non devo
   vedere nessun pulsante, così visione pulita; il play o pause mi appare solo
   quando clicco».
   Quindi: nessun comando visibile, il clic sul video lo ferma e lo riprende,
   e l'icona compare al centro per un istante solo nel momento del clic.
   Il pulsante RESTA nel DOM ed è raggiungibile da tastiera: diventa visibile
   quando riceve il fuoco (`:focus-visible`). Toglierlo del tutto renderebbe il
   video incontrollabile per chi non usa il mouse, e un video in riproduzione
   automatica deve avere un comando di arresto. */

.hero__media { position: relative; cursor: pointer; }

/* Il comando: invisibile e non cliccabile finché non arriva il fuoco da tastiera. */
.mm-video-toggle {
  position: absolute;
  right: clamp(1rem, 2.5vw, 2.25rem);
  bottom: clamp(1rem, 2.5vw, 2.25rem);
  z-index: 4;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: rgba(32, 30, 24, .45);
  color: #fff;
  font-size: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
/* `[hidden]` da solo non basterebbe: la regola qui sopra impone `display: grid`
   e vincerebbe sul `display: none` del browser. Senza questa riga il pulsante
   resterebbe focusabile anche nel fallback senza JavaScript. */
.mm-video-toggle[hidden] { display: none; }

.mm-video-toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.mm-video-toggle::before {
  content: "";
  width: 12px;
  height: 13px;
  background: currentColor;
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}
.mm-video-toggle[aria-pressed="true"]::before {
  width: 13px; height: 14px; margin-left: 2px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* CORREZIONE 11/9: l'icona era rovesciata su cinema-v9.
   Le due regole qui sopra nascono per cinema-v7, dove `aria-pressed="true"`
   significa «il video e' in pausa»: li' il triangolo di avvio e' giusto.
   Su cinema-v9 `assets/video-hero.js` usa la semantica opposta e corretta per
   un interruttore, `true` = «sta suonando»: con le sole regole di sopra si
   vedeva il triangolo di avvio MENTRE il video andava, e le barrette di pausa
   quando era fermo. Esattamente al contrario.
   Il marcatore `data-mm-semantica` lo mette solo il caricatore di v9, quindi
   cinema-v7 non e' toccato da nulla di quanto segue. */
.mm-video-toggle[data-mm-semantica="riproduzione"]::before {
  width: 13px;
  height: 14px;
  margin-left: 2px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);            /* fermo -> triangolo: si avvia */
}
.mm-video-toggle[data-mm-semantica="riproduzione"][aria-pressed="true"]::before {
  width: 12px;
  height: 13px;
  margin-left: 0;
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);  /* suona -> barrette: si mette in pausa */
}

/* Il segnale che appare al clic: cerchio al centro del video, dentro e fuori
   in mezzo secondo. `aria-hidden` perché il cambio di stato lo annuncia il
   pulsante, non questo. */
.mm-video-segnale {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: rgba(24, 22, 18, .5);
  backdrop-filter: blur(4px);
  color: #fff;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.82);
  pointer-events: none;
}
.mm-video-segnale::before {
  content: "";
  width: 22px;
  height: 24px;
  background: currentColor;
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}
.mm-video-segnale[data-stato="play"]::before {
  width: 24px; height: 26px; margin-left: 4px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.mm-video-segnale.is-visibile { animation: mm-segnale .62s cubic-bezier(.22, .61, .36, 1) both; }

@keyframes mm-segnale {
  0%   { opacity: 0; transform: scale(.82); }
  22%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-video-segnale.is-visibile { animation: none; opacity: 0; }
  .mm-video-toggle { transition: none; }
}

/* ------------------------------------------------------------
   7b. Introduzione sotto il video: centrata
   ------------------------------------------------------------
   Richiesta del titolare: «passa al centro tutta quella scritta e quel piccolo
   paragrafo su Masseria Monte». */
.mm-intro__row {
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.mm-intro__title { display: flex; justify-content: center; text-align: center; line-height: 0; }
.mm-intro__title-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mm-intro__wordmark { display: block; width: clamp(17rem, 38vw, 34rem); max-width: 92vw; height: auto; }
.mm-intro__place { text-align: center; }
.mm-intro [data-mm-intro-testo],
.mm-intro__row > p,
.mm-intro > .wrap > p,
.mm-intro p { text-align: center; margin-inline: auto; }

/* ============================================================
   8. PIÈ DI PAGINA — ricostruito con tutto ciò che aveva il vecchio sito
   ============================================================
   Richiesta del titolare del 10/9: «metti tutto quello che usava il vecchio».
   Il footer precedente aveva quattro gruppi appiattiti su una riga flex; qui
   diventa una griglia a colonne con intestazioni, perché il contenuto è
   raddoppiato (contatti, pagine, informazioni legali, social).
   Le colonne collassano una sotto l'altra sul telefono. */

.site-footer {
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  background: var(--cream);
  border-top: 1px solid var(--oliva-tenue);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: start;
  justify-content: initial;
}

.footer-col { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }

/* Intestazione di colonna: piccola, in verde oliva, come gli occhielli del sito. */
.footer-col h3 {
  margin: 0 0 .35rem;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oliva);
}

.site-footer a {
  color: var(--ink);
  text-decoration: none;
  font-size: .875rem;
  line-height: 1.5;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--ink); border-bottom-color: var(--oliva-tenue); }

.site-footer address {
  font-style: normal;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink);
}

.footer-marchio { display: flex; align-items: center; gap: .65rem; margin-bottom: .3rem; }
.footer-marchio strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--ink); letter-spacing: -.015em; }
.footer-ragione { font-size: .875rem; line-height: 1.5; color: var(--ink); }   /* 17/9: il piè di pagina non segue il nero del racconto */

/* Social: una riga di collegamenti testuali, non icone scaricate da fuori. */
.footer-social { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .5rem; }
.footer-social a { font-size: .75rem; letter-spacing: .04em; }

/* Coda: dati fiscali e copyright, staccati da un filetto. */
.site-footer__coda {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--oliva-tenue);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: .75rem;
  color: var(--ink);
}
.site-footer__coda span { font-size: .75rem; letter-spacing: 0; text-transform: none; }

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* Il CSS di base ha `.site-footer__grid > div { display:flex; flex-wrap:wrap;
   gap:1.5rem; align-items:baseline }`, più specifico di `.footer-col`: i link
   restavano distanziati di 24 px l'uno dall'altro e il piè di pagina risultava
   alto 745 px su desktop e 1.489 su telefono (misurato). Qui si pareggia la
   specificità e si riportano le colonne a una spaziatura da elenco. */
.site-footer__grid > .footer-col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: .38rem;
}
.site-footer__grid > .footer-col > h3 { margin-bottom: .5rem; }
.site-footer__grid > .footer-col .footer-social { gap: .9rem; margin-top: .75rem; }

/* I collegamenti del piè di pagina sono alti 44 px: è la misura minima perché
   un dito li colpisca, e su telefono va tenuta. Con un mouse preciso però
   quello spazio è sprecato e allunga il piè di pagina di oltre 150 px, quindi
   lì si torna all'altezza del testo. La regola vale SOLO dove il puntatore è
   fine e c'è il passaggio del mouse: touch e tastiera non sono toccati. */
@media (hover: hover) and (pointer: fine) {
  .site-footer__grid > .footer-col > a { min-height: 0; }
}

/* Colore della testata compattata — decisione del 10/9.
   Misura sui concorrenti: 6 su 8 usano il bianco puro, ma tutti su pagine
   dal fondo bianco. L'unico con una palette calda come la nostra, Torre
   Coccaro, usa rgb(252,248,239) — praticamente il nostro --sand. Sul crema
   delle nostre sezioni il bianco puro fa galleggiare la barra come un corpo
   estraneo, quindi si prende il sabbia. */
.site-header.is-scrolled { background: var(--sand); }

/* Il pulsante «Menu» (visibile sotto i 1200 px) era l'unico elemento rimasto in
   Arial e in nero puro: il CSS di base non gli passa i token, e il nero non
   appartiene alla palette. Trovato misurando le famiglie e i colori realmente
   applicati su quattro pagine, non a occhio. */
.menu-toggle,
.menu-toggle span {
  font-family: var(--sans);
  color: var(--ink);
}
.menu-toggle i,
.menu-toggle i::after { background: var(--ink); }

/* Dissolvenza durante il cambio di forma della testata (classe messa da
   regia.js per 420 ms). Il ridimensionamento da solo restava «brusco»: cambiare
   altezza è un movimento di layout e l'occhio lo legge come uno scatto. Qui il
   marchio e il menu si smorzano mentre la misura cambia, poi tornano pieni.
   Si anima solo l'opacità, che non costa riflusso. */
.site-header.sta-cambiando .brand,
.site-header.sta-cambiando .main-nav,
.site-header.sta-cambiando .header-actions {
  animation: mm-testata-fade .42s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes mm-testata-fade {
  0%   { opacity: 1; }
  38%  { opacity: .42; }
  100% { opacity: 1; }
}

/* La dissolvenza della testata e' sola opacita': resta anche con
   `prefers-reduced-motion`, solo piu' breve. Spegnerla lasciava proprio lo
   scatto che il titolare non sopportava. */
@media (prefers-reduced-motion: reduce) {
  .site-header.sta-cambiando .brand,
  .site-header.sta-cambiando .main-nav,
  .site-header.sta-cambiando .header-actions { animation-duration: .3s; }
}

/* ------------------------------------------------------------
   9. FIRMA NEL PIÈ DI PAGINA — in basso a sinistra
   ------------------------------------------------------------
   Due correzioni chieste dal titolare: il marchio non era scontornato (aveva
   attorno il rettangolo bianco del file) e stava al centro, mentre «il piè di
   pagina è già abbastanza grande» e sotto la colonna dell'indirizzo restava uno
   spazio vuoto. Ora è lì, e usa il PNG con il fondo trasparente. */

.footer-firma {
  display: block;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  line-height: 0;
}
.footer-firma img {
  width: clamp(120px, 11vw, 168px);
  height: auto;
  /* Niente `will-change`: serviva all'animazione che non c'è più, e lasciarlo
     tiene una texture in memoria sulla scheda grafica per un'immagine ferma. */
}

/* 11 settembre, richiesta del titolare: «il logo nel piè di pagina mettilo
   fisso». Tolte le due animazioni in regia.js (ingresso dal basso e
   oscillazione infinita).
   QUI c'era `.mm-js .footer-firma img { opacity: 0 }`: nascondeva il marchio
   quando il JavaScript è attivo, perché a mostrarlo era proprio l'animazione.
   Tolta quella, il logo restava invisibile — misurato: fermo ma con opacità 0.
   Ora non lo nasconde più nessuno, in nessuna condizione. */

/* ============================================================
   10. NIENTE PIÙ BLOCCO ALLO SCROLL
   ============================================================
   Il titolare, tre volte: «rimane bloccata e devo scorrere a vuoto», «è rimasto
   sempre quel blocco allo scroll su due immagini della home page che dobbiamo
   risolvere assolutamente».
   MISURATO con passi da 40 px e soglia 4 px: `.mm-journey__stage` in #storia
   restava fermo per 1.200 px di scorrimento, `.mm-alto__stage` in #territorio
   per 120 px. Erano gli ultimi due `position: sticky` dentro il contenuto.
   Il valore arrivava dai fogli di v7 e v9, non dai token del movimento: per
   questo spegnere i preset non bastava.
   Qui i due palchi tornano nel flusso normale della pagina. Le sequenze di
   fotogrammi continuano a esistere, ma scorrono insieme al resto invece di
   trattenere la pagina. Per riavere il comportamento di prima basta togliere
   questo blocco. */

/* `cinema-v9/journey.css:19` incolla il palco con
   `.mm-journey.is-enhanced .mm-journey__stage` — due classi, piu' specifico di
   `.mm-journey__stage` da solo, quindi la prima stesura non lo toccava e il
   blocco da 1.200 px restava (misurato). Qui si pareggia la specificita' e si
   riporta il palco nel flusso, come journey.css fa gia' da se' sotto i 900 px
   (riga 37): quella e' la prova che il capitolo funziona anche senza incollarsi. */
/* RIPRISTINATO l'11/9 su richiesta del titolare. Qui il palco era stato
   scollato per togliere il blocco allo scorrimento. Ora il titolare ha
   riattivato le animazioni di Windows e vede cosa succedeva davvero: «quando
   scrollo, prima finisce l'animazione e poi mi permette di andare sotto,
   praticamente quello che stava prima; ti avevo chiesto di eliminarlo perche'
   non avevo le animazioni attive».
   Il blocco quindi TORNA, ed e' voluto: trattiene la pagina quel tanto che
   basta perche' il volo del drone si svolga, poi la lascia proseguire.
   Resta spento il preset del movimento sulle FOTO di capitolo (scala,
   parallasse, maschera): quello era un effetto diverso e il titolare non l'ha
   richiesto indietro. */

/* RIPRISTINO del 10/9 22:55: le regole che scollavano e ridimensionavano
   `.mm-alto__stage` sono state RITIRATE. Toglievano al capitolo Territorio
   l'altezza su cui `cinema.js` calcola l'opacita' dei fotogrammi, e la sezione
   restava con 2 media presenti e 0 visibili (misurato). Territorio tratteneva
   la pagina per 120 px, cioe' meno di un gesto di rotellina: non era il blocco
   segnalato dal titolare. Il blocco vero, 1.200 px, era in #storia ed e' stato
   risolto sopra senza toccare le immagini. */


/* ------------------------------------------------------------
   11. SCALA TIPOGRAFICA — riportata ai gradini del piano
   ------------------------------------------------------------
   Misurate 21 misure di testo distinte su quattro pagine, contro gli 8 gradini
   previsti dal piano. Valori come 14,72 px, 13,12 px o 12,48 px non erano
   scelte: nascevano da `.92rem`, `.82rem` e `.78rem` scritti a occhio nelle
   aggiunte di oggi. Riportati sulla scala .75 / .875 / 1 / 1.125 / 1.5 rem
   (12 / 14 / 16 / 18 / 24 px).

   UNA ECCEZIONE DICHIARATA: le voci di menu restano a `clamp(.8rem, …, .92rem)`.
   Il titolare le aveva chieste esplicitamente più grandi e portarle a .875rem
   le rimpicciolirebbe di nuovo. Una eccezione motivata vale più di una scala
   perfetta che tradisce una richiesta. */

/* Nota accanto a ogni pulsante del modulo di richiesta.
   Il modulo Tally chiede un consenso ma al suo interno non ha alcun
   collegamento all'informativa (misurato: zero elementi `<a href>` nella
   pagina). Il rimando deve quindi stare qui, prima che l'utente ci arrivi.
   Piccola e sotto il pulsante: e' una nota, non un avviso legale sbandierato. */
.mm-nota-modulo {
  flex-basis: 100%;
  margin: .6rem 0 0;
  max-width: 34rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--muted);
}
.mm-nota-modulo a { color: var(--oliva); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------
   12. IL GIALLO, PIÙ CHIARO
   ------------------------------------------------------------
   Il titolare: «un giallo troppo marcato, lo voglio più chiaro».
   `--butter` era #fff1c4, il colore più saturo della palette e l'unico che si
   stacca nettamente dal crema delle altre sezioni: sul fondo di un capitolo
   intero pesa. Portato a #fff8e0 — resta un giallo, non diventa un altro crema,
   ma smette di gridare. Restano distinti i tre fondi:
   --sand #fffaee (quasi bianco) · --cream #fff9e8 (crema) · --butter #fff8e0 (giallo).
   Contrasto verificato: --ink #554536 su #fff8e0 resta ampiamente sopra il
   minimo richiesto per il testo. */
:root { --butter: #fff8e0; }

/* ------------------------------------------------------------
   13. SECONDO VOLO SPENTO E FOTOGRAFIA RIMOSSA — richieste dell'11/9
   ------------------------------------------------------------
   Prima richiesta: «il secondo video col drone per me può anche essere
   rimosso». Avevo nascosto la sola tela dei fotogrammi, lasciando sotto la
   fotografia ferma (`.mm-alto__poster`, il primo fotogramma della sequenza).
   Seconda richiesta, stesso giorno, con la foto in allegato: «quella foto me
   la devi totalmente rimuovere, perché ne abbiamo già una sopra, quella che
   stiamo sistemando; non c'è bisogno di mettere troppa roba identica. Rimuovi
   quello e passa sopra tutto quello che sta sotto quella foto.»
   Aveva ragione: era la stessa veduta aerea del primo volo.

   Foto, tela e i due pannelli del taglio sono stati tolti dal markup (IT ed
   EN, copie in `*.bak-territorio-2026-09-11`). RESTA tutto il testo: togliere
   la fotografia non è togliere le parole, e quelle non erano in discussione.

   ATTENZIONE, errore già commesso e da non ripetere: in questa sezione il
   testo vive dentro maschere e veniva RIVELATO dallo scorrimento della scena
   (`data-mm-scrub="s2"`). Togliendo quell'attributo senza altro, la volta
   scorsa si erano misurate 5 righe presenti e **0 visibili**. Ora l'attributo
   è tolto davvero — senza tela non c'è nulla da disegnare — ma il testo lo
   rende visibile questo blocco, che non dipende da nessuno script. */
.mm-alto--solo-testo {
  height: auto;                     /* non più 220svh: la pagina sotto risale */
  padding-block: clamp(4.5rem, 10vw, 8rem);
  background: var(--cream);
}
.mm-alto--solo-testo .mm-alto__stage {
  position: static;                 /* niente più incollaggio: non c'è scena */
  height: auto;
  overflow: visible;
}
.mm-alto--solo-testo .mm-alto__poster,
.mm-alto--solo-testo .mm-alto__canvas,
.mm-alto--solo-testo .mm-alto__cut { display: none; }

/* Il testo stava in una fascia avorio appoggiata in basso a sinistra sopra la
   fotografia. Senza fotografia la fascia non serve più: il blocco torna nel
   flusso, allineato alla stessa colonna del resto della pagina. */
.mm-alto--solo-testo .mm-alto__copy {
  position: static;
  max-width: min(44rem, calc(100% - 2 * var(--mm-side)));
  margin-inline: auto;
  padding: 0 var(--mm-side);
  background: none;
  transform: none;
}
/* Le righe non aspettano più lo scorrimento per comparire. `!important` qui è
   necessario, non pigrizia: se uno script avesse lasciato stili in linea,
   quelli batterebbero qualunque selettore, e il testo resterebbe invisibile
   come la volta scorsa. */
.mm-alto--solo-testo .mm-alto__mask { overflow: visible; }
.mm-alto--solo-testo .mm-alto__line {
  transform: none !important;
  opacity: 1 !important;
  clip-path: none !important;
}

/* ------------------------------------------------------------
   14. LA SCRITTA «MONTE» IN TESTATA
   ------------------------------------------------------------
   Scelta del titolare fra cinque varianti provate su
   /assets/prova-marchio.html: la prima — ottico da display, terminali netti —
   «ma la nostra non è proprio come la prima, rendila così e metti leggermente
   più grande la scritta».
   La differenza c'era davvero: la pagina di prova usava il file di Fraunces con
   TUTTI gli assi e `opsz` fissato a 144, mentre la testata usava il file
   ridotto, dove `font-optical-sizing: auto` sceglie un valore ottico basso
   perché il testo è piccolo — e le grazie risultavano più piene. Qui si allinea
   al provino e si porta il corpo da 1,15 a 1,35 rem. */
/* 11 settembre, seconda richiesta: «il font Monte voglio che sia più o meno lo
   stesso di quello che vedi nel logo, così ci uniformiamo per bene».

   Misurato sul PDF vettoriale del logo ufficiale: nel marchio «Monte» NON è un
   carattere con le grazie, è calligrafia corsiva a pennino, lettere legate.
   Fraunces è un romano dritto: nessun valore d'asse può renderli uguali di
   disegno, e dirlo è più onesto che fingere.
   Quello che si può pareggiare — ed è ciò che l'occhio legge davvero come
   «stessa famiglia» a 21,6 px — è il COLORE della scritta: quanto appare
   chiara o scura accanto al logo.

   Rapporti misurati (spessore diviso altezza della maiuscola):
                        logo    prima    ora
     asta piena         0,090   0,152   0,089   (era +68% troppo scura)
     filetto sottile    0,031   0,009   0,034   (era −70%, troppo fine)
     contrasto          2,9:1   16,3:1  2,6:1   (era +467%)

   Due valori fanno il lavoro:
   - `opsz` da 144 a 48. A 144 Fraunces usa il disegno «da titolo», con filetti
     sottilissimi e contrasto 16:1, che a corpo piccolo si frammenta. A 48 i
     filetti tornano spessi come quelli del logo.
   - `wght` da 500 a 250, cioè il peso vero del logo.
     ATTENZIONE: `font-weight: 250` NON funziona — il @font-face dichiara
     `font-weight: 300 700` e il browser lo blocca a 300. Il peso deve stare
     dentro `font-variation-settings`, ed è l'unico posto dove ha effetto. */
/* 12 settembre: il titolare ha indicato il carattere del marchio, English 111
   Vivace BT, e risulta installato su questo computer. Ora la scritta non e'
   piu' testo in Fraunces ma il DISEGNO di quelle cinque lettere.
   Le impostazioni di Fraunces qui sotto non servono piu' e sono state tolte:
   erano l'approssimazione migliore possibile finche' non si sapeva il nome del
   carattere vero (pareggiavano il peso, non il disegno). */
.brand__name {
  display: block;
  line-height: 0;
}
.brand__name img {
  display: block;
  /* Il colore e' fissato dentro il disegno (#554536, l'inchiostro del sito):
     dentro un <img> il `currentColor` non si eredita, e il disegno risultava
     nero puro accanto a un marchio che nero non e'. Se un domani il colore del
     sito cambia, va cambiato anche nell'SVG — una riga sola. */
  /* L'altezza e' tarata sull'altezza delle minuscole, non della maiuscola: in
     un corsivo inglese la x vale il 41% della M, quindi allineando le maiuscole
     la parola risulterebbe minuta accanto al logo. */
  height: 30px;
  width: auto;
  transition: height .34s cubic-bezier(.22, .61, .36, 1);
}
.site-header.is-scrolled .brand__name img { height: 26px; }

@media (prefers-reduced-motion: reduce) {
  .brand__name img { transition-duration: .16s; }
}

/* ============================================================
   15. PRODUZIONE — composizione asimmetrica
   ============================================================
   Il titolare: «due immagini messe in parallelo non mi vanno a genio», «voglio
   creare qualcosa di non troppo simmetrico», «la parte più brutta del sito».
   La misura gli dava ragione in modo imbarazzante: la cucitura fra le due
   fotografie cadeva a **x=720,00 su un viewport di 1440**, cioè esattamente
   sull'asse della finestra; le due foto erano identiche al centesimo di pixel
   (627,20 × 418,33), stesso bordo alto, stesso formato, perfino lo stesso
   movimento; le tre colonne di testo erano larghe 398,94 ciascuna, con le
   cuciture a 228,27 px dal centro da una parte e dall'altra. Un solo valore di
   spazio (57,60 px) ripetuto cinque volte: nessun ritmo.

   COME SI COSTRUISCE L'ASIMMETRIA, dalla misura di 26 siti dove la fotografia è
   il contenuto: fra due foto vanno rotte ESATTAMENTE DUE delle quattro
   uguaglianze possibili — larghezza, formato, bordo superiore, distanza dal
   bordo della pagina. Romperne una sola non si vede; romperle tutte e quattro
   sembra casualità. Qui si rompono larghezza e bordo superiore: stesso formato
   d'origine, ma una foto è larga quasi il doppio dell'altra (rapporto 1,77,
   dentro l'intervallo 1,2-2,7 osservato) e la seconda comincia molto più in
   basso (dislivello del 42% dell'altezza della prima, dentro il 25-55%).

   ANGOLI VIVI: nessuna delle 622 fotografie grandi dei 25 siti esterni misurati
   ha angoli arrotondati. Gli angoli a foglia del vecchio sito sono un'eccezione
   isolata e non vengono ereditati.

   SUL TELEFONO non si collassa in colonna unica: è l'errore in cui cade il
   vecchio sito e con lui quattro siti su sei del campione, proprio dove il
   pubblico è più numeroso. Qui l'asimmetria continua cambiando LARGHEZZA e LATO
   di ancoraggio delle due foto. */

.mm-prod { background: var(--butter); padding-block: clamp(3.5rem, 7vw, 6rem); }

.mm-prod__griglia {
  display: grid;
  /* colonne disuguali: 40 / 60. Il testo sta nella stretta, la foto grande
     nella larga — l'opposto della simmetria di prima. */
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: 0;
  align-items: start;
}

.mm-prod__testa { grid-column: 1; grid-row: 1; }
.mm-prod__testa .overline { margin: 0 0 .6rem; }
.mm-prod__testa h2 { margin: 0; }

/* Foto larga: colonna destra, parte in alto insieme al titolo. */
.mm-prod__foto--larga {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
}

/* Foto stretta: colonna sinistra, comincia sotto il titolo — è il «gradino».
   Il ritaglio verticale si ottiene con aspect-ratio + object-fit, perché in
   archivio non esiste una fotografia verticale di produzione: le uniche due
   verticali sono camere notturne, fuori tema. */
.mm-prod__foto--stretta {
  grid-column: 1;
  grid-row: 2;
  margin: clamp(2rem, 4vw, 3.25rem) 0 0;
  width: min(100%, 22rem);
}
.mm-prod__foto--stretta img { aspect-ratio: 4 / 5; }

.mm-prod__foto { line-height: 0; }
.mm-prod__foto img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0;          /* angoli vivi: vedi nota sopra */
  display: block;
}
.mm-prod__foto--larga img { aspect-ratio: 3 / 2; }

/* I testi scendono nella colonna destra, sotto la foto larga: la pagina non
   torna mai a due blocchi affiancati della stessa misura. */
.mm-prod__testi {
  grid-column: 2;
  grid-row: 3;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.mm-prod__voce h3 {
  margin: 0 0 .4rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.mm-prod__voce p {
  margin: 0;
  max-width: 34rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Social delle pagine interne: gli stessi simboli e target della v9, senza
   importare il motore di animazione della homepage. */
.mm-page .site-footer .footer-social { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mm-page .site-footer .footer-social a { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 50%; transition: background-color .2s, border-color .2s; }
.mm-page .site-footer .footer-social img { display: block; width: 22px; height: 22px; object-fit: contain; }
.mm-page .site-footer .footer-social a:hover { background: #f1ecdf; border-color: #8b774e; }
.mm-page .site-footer .footer-social a:focus-visible { outline: 2px solid #8b774e; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .mm-page .site-footer .footer-social a { transition: none; }
}

/* Sotto i 1024 px la colonna stretta non regge il testo: si passa a una sola
   colonna, ma le due foto restano di larghezza e ancoraggio diversi. */
@media (max-width: 1023px) {
  .mm-prod__griglia { grid-template-columns: minmax(0, 1fr); }
  .mm-prod__testa,
  .mm-prod__foto--larga,
  .mm-prod__foto--stretta,
  .mm-prod__testi { grid-column: 1; grid-row: auto; }
  .mm-prod__foto--larga { width: 100%; margin-top: clamp(1.75rem, 4vw, 2.5rem); }
  .mm-prod__foto--stretta {
    width: 62%;
    margin-left: auto;        /* ancorata al bordo opposto: l'asimmetria resta */
    margin-right: 0;
  }
  .mm-prod__testi { margin-top: clamp(2rem, 5vw, 3rem); }
}

@media (max-width: 560px) {
  .mm-prod__foto--stretta { width: 74%; }
  .mm-prod__voce h3 { font-size: 1.3rem; }
}

/* Masseria / Monte: original English 111 outlines, compact two-line wordmark.
   Only the sixteen updated pages use this class. Existing mobile visibility
   and the header's restrained height transition remain unchanged. */
.brand__name--stacked img { height: 56px; width: auto; }
.site-header.is-scrolled .brand__name--stacked img { height: 46px; }
.site-header .brand__text:has(.brand__name--stacked) { transition: transform .34s cubic-bezier(.22,.61,.36,1); }
.site-header.is-scrolled .brand__text:has(.brand__name--stacked) { transform: translateX(-34px); }
@media (prefers-reduced-motion: reduce) {
  .site-header .brand__text:has(.brand__name--stacked) { transition-duration: .16s; }
}

/* footer-wp.css — proposta append-only per il piè di pagina WordPress (tema masseria-monte-cinema).
   Da accodare DOPO tipografia.css / cinema.css / motion.css (ordine di caricamento reale: styles, cinema, fonts,
   tipografia, contatti-v9, wordpress). Solo telefono: tutto dentro @media (max-width: 767.98px), desktop identico.
   Misura di partenza (Codex, 20/9): 1107 px a 390 px in emulazione con puntatore fine, dove i collegamenti del
   menu sono alti 22 px; su telefono vero (pointer: coarse) styles.css li porta a 44 px e il piè supera i 1300 px.
   Qui: due colonne per «Il sito» e «Informazioni», riga iniziale compatta marchio+indirizzo, righe da 44 px senza
   spazio aggiunto, spazi verticali ridotti. Nessun testo, link o dato nascosto; nessun display:none. */

@media (max-width: 767.98px) {

  /* 1. Cornice: meno aria sopra e sotto (era clamp 2.5–4rem / 1.5rem). */
  .site-footer { padding: 2rem 0 1rem; }

  /* 2. Griglia a due colonne. Sovrascrive tipografia.css (@560: 1fr) e styles.css (@640: flex column) con
        specificità maggiore (0,2,0 / 0,3,0). Marchio e Contatti a tutta larghezza; Il sito e Informazioni affiancati. */
  .site-footer .site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem 1rem;
    align-items: start;
  }
  .site-footer .site-footer__grid > .footer-col { min-width: 0; max-width: 100%; gap: 0; }
  .site-footer .site-footer__grid > .footer-col:nth-child(1),
  .site-footer .site-footer__grid > .footer-col:nth-child(2) { grid-column: 1 / -1; }

  /* 3. Riga iniziale compatta: nome e indirizzo a sinistra, marchio decorativo ridotto a destra, centrato in verticale.
        Il marchio resta (richiesta del titolare dell'11/9), solo più piccolo: 84 px invece di 120–168. */
  .site-footer .site-footer__grid > .footer-col:nth-child(1) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 1rem;
    row-gap: .15rem;
  }
  .site-footer .site-footer__grid > .footer-col:nth-child(1) > .footer-marchio { grid-column: 1; grid-row: 1; margin: 0; }
  .site-footer .site-footer__grid > .footer-col:nth-child(1) > address { grid-column: 1; grid-row: 2; margin: 0; }
  .site-footer .site-footer__grid > .footer-col:nth-child(1) > .footer-firma { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
  .site-footer .footer-firma img { width: 84px; }

  /* 4. Intestazioni di colonna più vicine al contenuto (era .5rem). */
  .site-footer .site-footer__grid > .footer-col > h3 { margin: 0 0 .25rem; font-weight: 700; }

  /* 5. Ogni collegamento è una riga da 44 px (bersaglio del dito) e la colonna non aggiunge spazio fra le righe.
        La regola vale anche con (hover: hover) and (pointer: fine): la specificità (0,3,1) supera la deroga di
        tipografia.css (0,2,1), così la misura in emulazione coincide con il telefono. Le etichette lunghe
        (es. «Condizioni di vendita» a 320 px) vanno a capo dentro la riga, senza uscire dalla colonna. */
  .site-footer .site-footer__grid > .footer-col > a,
  .site-footer .site-footer__grid > .footer-col .mm-copia-riga > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    line-height: 1.25;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .site-footer .site-footer__grid > .footer-col .mm-copia-riga { min-height: 44px; max-width: 100%; }
  .site-footer .mm-copia { min-height: 44px; min-width: 44px; padding: 4px 8px; }

  /* 6. Social: subito sotto l'ultimo collegamento (era 12–16 px). Le tre icone restano 44×44. */
  .site-footer .site-footer__grid > .footer-col .footer-social,
  .mm-page .site-footer .footer-social { margin-top: .5rem; gap: 8px; }

  /* 7. Coda legale: filetto più vicino, le due righe più strette. Testo invariato. */
  .site-footer .site-footer__coda { margin-top: 1.25rem; padding-top: .9rem; padding-right: 56px; gap: .2rem 1rem; }
}

/* Schermi molto stretti (320–359 px): stesse due colonne, solo il vuoto fra loro si riduce. */
@media (max-width: 359.98px) {
  .site-footer .site-footer__grid { column-gap: .75rem; }
  .site-footer .site-footer__grid > .footer-col:nth-child(1) { column-gap: .75rem; }
}

/* 21/9 R82 — one mobile bar, shared visual grammar with the Bottega.
   Equal side tracks keep the complete brand centred; language never wraps.
   The existing menu/link nodes and their accessible behaviour are retained. */
@media (max-width: 1199px) {
  :root { --header-height: 68px; --mm-header-compact: 68px; }
  .mm-cinema .site-header,
  .mm-cinema .site-header.is-scrolled {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center; gap: 0; height: 68px; min-height: 68px;
    padding: 0 12px; background: var(--paper);
  }
  .mm-cinema .site-header .brand {
    grid-column: 2; grid-row: 1; order: 0; justify-self: center;
    display: inline-flex; flex-direction: row; align-items: center;
    justify-content: center; gap: 6px; width: max-content;
    min-width: 0; max-width: 100%; min-height: 44px; margin: 0;
  }
  .mm-cinema .site-header .brand__logo,
  .mm-cinema .site-header.is-scrolled .brand__logo {
    width: auto; height: 36px; max-width: none; transform: none;
  }
  .mm-cinema .site-header .brand__text,
  .mm-cinema .site-header.is-scrolled .brand__text:has(.brand__name--stacked) {
    display: inline-flex; transform: none;
  }
  .mm-cinema .site-header .brand__name--stacked img,
  .mm-cinema .site-header.is-scrolled .brand__name--stacked img {
    display: block; width: auto; height: 36px; max-width: none;
  }
  .mm-cinema .site-header .menu-toggle {
    grid-column: 1; grid-row: 1; order: 0; justify-self: start;
    display: inline-flex; flex-direction: row-reverse; align-items: center;
    justify-content: flex-end; gap: 5px; width: 64px; min-height: 44px;
    margin: 0; padding: 0; white-space: nowrap;
  }
  .mm-cinema .site-header .menu-toggle span {
    display: inline; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  }
  .mm-cinema .site-header .menu-toggle i,
  .mm-cinema .site-header .menu-toggle i::after { width: 20px; }
  .mm-cinema .site-header .header-actions {
    grid-column: 3; grid-row: 1; order: 0; justify-self: end;
    display: flex; align-items: center; justify-content: flex-end;
    width: 64px; min-width: 0; margin: 0; gap: 0;
  }
  .mm-cinema .site-header .language {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px; min-height: 44px; min-width: 60px; padding: 0;
    font-size: 12px; line-height: 1; letter-spacing: .05em; white-space: nowrap;
  }
  .mm-cinema .site-header .language span { white-space: nowrap; }
  html:not(.js-ready) .mm-cinema .site-header { height: auto; }
  html:not(.js-ready) .mm-cinema .site-header .menu-toggle { display: none; }
  html:not(.js-ready) .mm-cinema .site-header .main-nav { grid-column: 1 / -1; grid-row: 2; }
}