/* Volte Alte — l'impianto da telefono.
   Non e' il sito da computer stretto: si usa come un'applicazione. */

/* Le due fasce ferme in alto — il nome e la fila delle pagine — e i due
   comandi in fondo. Impianto scelto da Leonardo il 21 settembre 2026 (la
   prova D), dopo che la villa aveva detto che il menu di prima non era
   abbastanza intuitivo. --fasce e' quanto occupano in alto: lo usano il
   padding di main, le ancore e le aperture a tutto schermo. */
:root{--fasce:100px;--comandi:62px}

body{padding-bottom:calc(var(--comandi) + env(safe-area-inset-bottom))}

.mbarra{position:fixed;top:0;left:0;right:0;height:56px;z-index:21;
  display:flex;align-items:center;padding:0 22px;
  background:var(--pietra);border-bottom:0}
.mmarchio{font-family:'Cormorant Garamond',serif;font-size:16px;letter-spacing:.3em;
  text-transform:uppercase;text-decoration:none}

/* la fila delle pagine: tutte e sette, si sfoglia col dito. La barra di
   scorrimento non si vede, ma l'ultima voce resta mezza fuori apposta: e'
   quello che fa capire che si scorre. */
.mnastro{position:fixed;top:56px;left:0;right:0;z-index:20;display:flex;
  background:var(--pietra);border-bottom:1px solid var(--pietra3);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding:0 14px}
.mnastro::-webkit-scrollbar{display:none}
.mnastro a{flex:0 0 auto;text-decoration:none;color:var(--tenue);
  font-family:'Jost',sans-serif;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:14px 12px 12px;white-space:nowrap;border-bottom:2px solid transparent}
.mnastro a[aria-current]{color:var(--ocra);border-bottom-color:var(--ocra)}
.mnastro-lingua{margin-left:6px;padding-left:16px!important;position:relative}
.mnastro-lingua::before{content:'';position:absolute;left:0;top:14px;bottom:13px;
  width:1px;background:var(--pietra3)}

/* i due comandi, fermi in fondo su tutte le pagine */
.mcomandi{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
  background:var(--notte);padding-bottom:env(safe-area-inset-bottom)}
/* la barra e' alta esattamente --comandi, quanto il corpo lascia in fondo: con 56 px su 62
   restava una riga chiara sotto il piede (verifica del 2 ottobre 2026) */
.mcomandi a{flex:1;display:flex;align-items:center;justify-content:center;
  min-height:var(--comandi);padding:0 0 2px;color:rgba(243,238,228,.82);
  text-decoration:none;font-family:'Jost',sans-serif;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase}
.mcomandi a + a{border-left:1px solid rgba(243,238,228,.16)}

main{padding-top:var(--fasce)}
.msez[id],.mspazi-capo[id]{scroll-margin-top:calc(var(--fasce) + 16px)}

/* l'apertura: approvata, non si tocca ---------------------------------- */
.mapertura{position:relative;height:calc(100svh - var(--fasce));min-height:500px;
  overflow:hidden;color:#fff}
.mapertura picture{position:absolute;inset:0}
.mapertura-foto{width:100%;height:100%;object-fit:cover}
.mapertura-velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,13,.55) 0%,rgba(8,9,13,.08) 24%,rgba(8,9,13,.52) 56%,rgba(8,9,13,.96) 100%)}
.mapertura-testo{position:absolute;left:24px;right:24px;top:42%;
  transform:translateY(-50%);text-align:center}
.mapertura-testo h1{font-size:37px;line-height:1.12;text-shadow:0 2px 26px rgba(0,0,0,.6)}
.mapertura-testo p{margin-top:18px;font-size:15.5px;line-height:1.5;opacity:.9;
  text-shadow:0 1px 14px rgba(0,0,0,.75)}   /* passa sopra le colonne illuminate del cortile */
.mapertura-tasto{position:absolute;left:24px;right:24px;bottom:110px;text-align:center;
  background:var(--ocra);color:#fff;text-decoration:none;padding:17px;
  font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:.17em;text-transform:uppercase}

/* le sezioni ------------------------------------------------------------ */
.msez{padding:var(--su,56px) 24px var(--giu,56px)}
.mrespiro-0{--su:56px;--giu:44px}
.mrespiro-1{--su:44px;--giu:72px}
.mrespiro-2{--su:72px;--giu:56px}
.msez-cose{--su:72px}

.intesta{text-align:center}
.msez h2{font-size:34px;line-height:1.1;margin:14px auto 0;max-width:15ch}
.occhiello{display:block}
.mtesto{font-size:17px;line-height:1.7;color:var(--morbido);margin-top:18px}
.mtesto + .mtesto{margin-top:14px}
.mcentro{text-align:center}
.mfoto{margin:30px -24px 0}
.mfoto img{width:100%;height:auto;max-height:72svh;object-fit:cover}

.verso{display:inline-block;margin-top:22px;font-family:'Jost',sans-serif;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ocra);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:3px}
.verso-centro{text-align:center;margin-top:4px}

/* dov'e': il testo sopra la foto ---------------------------------------- */
.msez-dove{position:relative;min-height:94svh;color:#fff;overflow:hidden;isolation:isolate;
  padding:64px 24px 40px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.msez-dove picture{position:absolute;inset:0;z-index:-2}
.msez-dove img{width:100%;height:100%;object-fit:cover;object-position:50% 64%;
  transform:scale(calc(1 + var(--p,0) * .08));transform-origin:50% 64%}
.dove-velo{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,9,13,.82) 0%,rgba(8,9,13,.56) 26%,rgba(8,9,13,.10) 44%,rgba(8,9,13,.14) 56%,rgba(8,9,13,.60) 72%,rgba(8,9,13,.84) 100%)}
.msez-dove .occhiello{color:var(--ocra-luce)}
.msez-dove h2{color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.5)}
.msez-dove h2 em{color:var(--ocra-luce)}
.msez-dove .mtesto{color:#fff;opacity:.94;text-align:center;text-shadow:0 1px 14px rgba(0,0,0,.55);font-size:16.5px}
.msez-dove .mtesto:first-child{margin-top:0}

/* il ritorno: il palco sta fermo, le tappe passano al centro ------------- */
.msez-storia{padding:0;height:calc(100svh + 4 * var(--tappa-passo-m,52svh))}
.palco{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--pietra);
  display:flex;flex-direction:column;align-items:stretch;padding:70px 24px 84px}
.palco h2{font-size:29px;max-width:18ch}
.tappe{list-style:none;position:relative;flex:1;min-height:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
.tappe li{position:absolute;left:0;right:0;top:50%;text-align:center;
  --d:calc(var(--p,0) * 4 - var(--i));
  --dist:max(var(--d),calc(-1 * var(--d)));
  transform:translate3d(0,calc(-50% - var(--d) * var(--tappa-altezza-m,224px)),0);
  opacity:clamp(0,calc(1 - var(--dist) * 1.25),1);will-change:transform,opacity}
.tappe b{display:block;font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:40px;line-height:1;color:var(--ocra)}
.tappe p{font-size:16px;line-height:1.65;color:var(--morbido);margin:12px auto 0;max-width:32ch}

/* le file di carte si sfogliano di lato ----------------------------------- */
.mscorre{margin:26px -24px 0;padding:0 24px 8px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:24px;scrollbar-width:none}
.mscorre::-webkit-scrollbar{display:none}
.mcarte{display:flex;gap:16px;width:max-content}
.mcarta{flex:0 0 264px;scroll-snap-align:start}
.mcarta h3{font-size:22px}
.mcarta p{font-size:14.5px}
.mcarta .carta-corpo{padding-top:14px}

/* gli spazi: i tre piani come carte che si sfogliano, con i pallini sotto -- */
.mpiani{margin:26px -24px 0;padding:0 24px 8px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:24px;scrollbar-width:none}
.mpiani::-webkit-scrollbar{display:none}
.mpiani-pista{display:flex;gap:14px;width:max-content}
.mpiano{flex:0 0 calc(100vw - 96px);scroll-snap-align:start;display:block;
  text-decoration:none;color:inherit}
.mpiano picture{display:block;overflow:hidden}
.mpiano img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.mpiano .carta-corpo{padding-top:14px}
.mpiano h3{font-size:24px;font-weight:400;line-height:1.12;margin-top:6px}
.mpiano p:last-child{font-size:14.5px;color:var(--tenue);margin-top:6px;line-height:1.5}
.pallini{display:flex;justify-content:center;gap:9px;margin-top:18px}
.pallini span{width:6px;height:6px;border-radius:50%;background:var(--pietra3);
  transition:background .4s ease,transform .4s ease}
.pallini .attivo{background:var(--ocra);transform:scale(1.3)}

/* l'anello degli eventi ----------------------------------------------------- */
.anello{margin:26px -24px 0}
.anello-pista{gap:14px;padding-left:14px}
.evento picture{height:280px}
.evento-corpo{padding-top:12px}
.evento h3{font-size:21px;margin-top:4px}
.evento p{font-size:14px;margin-top:5px}

/* l'invito resta chiaro: sotto c'e' gia' la barra scura, e non deve sciogliersi */
.msez-invito{text-align:center;padding-bottom:64px}
.msez-invito .mtesto a{color:inherit;text-decoration:none;white-space:nowrap}
.mtasti{margin-top:26px;display:grid;gap:12px}
/* il modulo sotto i due tasti dell'invito, nella home */
.minvito-modulo{margin-top:44px;text-align:left}
.minvito-modulo h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:26px;line-height:1.2;text-align:center}
.mtasto{display:block;padding:17px;text-align:center;text-decoration:none;
  font-family:'Jost',sans-serif;font-size:14px;letter-spacing:.12em;
  border:1px solid var(--inchiostro)}
.mtasto-pieno{background:var(--ocra);border-color:var(--ocra);color:#fff}
.mtasto-mail{font-family:'EB Garamond',serif;font-size:18px;letter-spacing:0}

.piede-dentro{padding:30px 24px 32px;text-align:center}
.piede-marchio{margin-bottom:12px}
.piede-mezzo{display:block}
.piede-servizio{margin-top:16px}

.sez-404{padding:100px 24px;display:flex;flex-direction:column;gap:16px}
.sez-404 h1{font-size:34px}
.sez-da-fare{padding:80px 24px}

@media (prefers-reduced-motion:reduce){
  .msez-storia{height:auto;padding:56px 24px}
  .palco{position:static;height:auto;padding:0;overflow:visible}
  .tappe{-webkit-mask-image:none;mask-image:none;margin-top:30px}
  .tappe li{position:static;transform:none;opacity:1;padding:20px 0;text-align:left}
  .tappe p{margin-left:0}
  .msez-dove img{transform:none}
}

/* per scattare tutta la pagina in un colpo: ?pellicola=1 ----------------- */
.pellicola .mapertura{height:820px;min-height:0}
.pellicola .mfoto img{max-height:520px}
.pellicola .msez-dove{min-height:760px}
.pellicola .msez-storia{height:auto;padding:56px 24px}
.pellicola .palco{position:static;height:auto;padding:0;overflow:visible}
.pellicola .tappe{-webkit-mask-image:none;mask-image:none;margin-top:30px}
.pellicola .tappe li{position:static;transform:none;opacity:1;padding:20px 0}
.pellicola .msez-dove img{transform:none}
.pellicola .svela{opacity:1;transform:none}

/* ======================================================= GLI SPAZI
   Da telefono la pianta non sta a lato: rimpicciolita non si legge, e
   allora sta dietro un tasto e si apre a schermo intero. In alto una riga
   bassa dice in che piano si e'. */

.mapertura-spazi{height:76svh;min-height:480px}
.mapertura-spazi .mapertura-testo{top:50%;left:22px;right:22px}
.mapertura-spazi h1{font-size:33px}
.mapertura-spazi p{margin-top:16px;font-size:15.5px;line-height:1.55}
.occhiello-chiaro{color:#EFD4AC;display:block;margin-bottom:12px;
  text-shadow:0 1px 16px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.55)}

/* la riga dei piani, appiccicata sotto la barra del nome */
.mfila{position:sticky;top:56px;z-index:16;display:flex;align-items:center;
  background:rgba(243,238,228,.92);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--pietra3)}
.mfila-voci{position:relative;display:flex;flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:none}
.mfila-voci::-webkit-scrollbar{display:none}
.mfila-voci a{flex:0 0 auto;padding:16px 16px 15px;font-family:'Jost',sans-serif;
  font-size:12px;letter-spacing:.1em;text-decoration:none;color:var(--tenue);
  white-space:nowrap;transition:color .3s var(--curva)}
.mfila-voci a[aria-current]{color:var(--inchiostro)}
.mfila-filetto{position:absolute;bottom:0;left:0;height:2px;width:0;background:var(--ocra);
  transition:transform .5s var(--curva),width .5s var(--curva)}
.mfila-pianta{flex:0 0 auto;background:none;border:0;border-left:1px solid var(--pietra3);
  padding:16px 18px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ocra)}

.mpresenta{padding-top:40px;padding-bottom:8px}
.mpresenta .mtesto{margin-top:0}

.mspazi-capo{padding:44px 24px 10px;text-align:center}
.mspazi-capo h2{font-size:29px;margin-top:12px;line-height:1.12}
.mspazio{padding:22px 0 44px;scroll-margin-top:110px}
.mspazio-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.mspazio-testo{padding:18px 24px 0}
.mspazio-testo h3{font-size:25px;font-weight:400;line-height:1.14}
.mspazio-testo p{font-size:16.5px;color:var(--morbido);margin-top:12px;line-height:1.68}
  letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);flex-wrap:wrap}

/* i numeri: da telefono non una tabella a quattro colonne, ma schede */

/* la pianta a schermo intero */
.mpianta{position:fixed;inset:0;z-index:60;background:var(--pietra);
  display:flex;flex-direction:column}
.mpianta-testa{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--pietra3)}
.mpianta-testa .eti{color:var(--tenue)}
.mpianta-chiudi{background:none;border:0;font-family:'Jost',sans-serif;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ocra);padding:6px 2px}
.mpianta-dentro{flex:1;overflow-y:auto;padding:18px 20px calc(30px + env(safe-area-inset-bottom))}
.mpianta .faccia[hidden]{display:none}
.mpianta .disegno{position:relative;width:100%;background:#fff;padding:8px}
.mpianta .disegno > svg{display:block;width:100%;height:100%}
.mpianta .punto{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;
  border-radius:50%;border:1px solid var(--ocra);background:rgba(243,238,228,.82);
  color:var(--ocra);font-family:'Jost',sans-serif;font-size:12px;display:flex;
  align-items:center;justify-content:center;padding:0}
.mpianta-elenco{list-style:none;margin-top:20px}
.mpianta-elenco a{display:flex;gap:12px;align-items:baseline;padding:13px 2px;
  text-decoration:none;border-bottom:1px solid var(--pietra3);font-size:18px}
.mpianta-elenco .n{font-family:'Jost',sans-serif;font-size:11px;color:var(--ocra);min-width:20px}

@media (prefers-reduced-motion:reduce){
  .mfila-filetto,.mfila-voci a{transition:none}
}

.pellicola .mapertura-spazi{height:620px;min-height:0}
.pellicola .mpianta{display:none}

/* ======================================================= LE PAGINE INTERNE */
.mpresenta .mtesto + .mtesto{margin-top:14px}

/* i momenti uno sotto l'altro, con la foto da bordo a bordo */
.mmomenti{list-style:none;margin:26px -24px 0}
.mmomento{padding:14px 0 30px}
.mmomento .mspazio-foto img{aspect-ratio:4/3}
.mmomento h3{font-size:25px;font-weight:400;line-height:1.14;margin-top:6px}
.mmomento .mspazio-testo p:last-child{font-size:16.5px;color:var(--morbido);margin-top:12px;line-height:1.68}
.msez-giro .mpiano{color:inherit}
.msez-giro .mpiano h3{margin-top:4px}
.msez-giro .mpiano p:last-child{color:var(--morbido)}

/* la pianta coi momenti: l'elenco in pagina, il disegno dietro il tasto */
.mpiano-eti{margin-top:26px}
.momenti{list-style:none;margin-top:8px}
.momenti li{display:flex;gap:12px;align-items:baseline;padding:11px 0;font-size:16px;
  line-height:1.55;color:var(--morbido);border-bottom:1px solid var(--pietra3)}
.momenti .n{font-family:'Jost',sans-serif;font-size:11px;color:var(--ocra);min-width:22px;letter-spacing:.1em}
.mtasto-linea{display:inline-block;margin-top:26px;padding:15px 34px;border-color:var(--ocra);color:var(--ocra);
  background:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.mpianta-tutte .disegno + .mpianta-elenco{margin-bottom:26px}
.mpianta-tutte .occhiello{margin:8px 0 12px}

/* le due liste */
.msez-cosa .elenco{margin-top:30px}
.msez-cosa .elenco h3{font-size:24px;font-weight:400}
.msez-cosa .elenco ul{list-style:none;margin-top:12px}
.msez-cosa .elenco li{position:relative;padding:11px 0 11px 22px;font-size:16.5px;line-height:1.6;
  color:var(--morbido);border-bottom:1px solid var(--pietra3)}
.msez-cosa .elenco li::before{content:'';position:absolute;left:0;top:21px;width:10px;height:1px;background:var(--ocra)}
.msez-cosa .planner{margin-top:34px;padding:24px 0;border-top:1px solid var(--pietra3);
  border-bottom:1px solid var(--pietra3);color:var(--inchiostro);text-align:center}

/* la scheda a schede */

/* ======================================================= IL DIARIO */
.msez-testa-pagina{padding-top:44px;padding-bottom:0}
.msez-testa-pagina h1{font-size:33px;line-height:1.1;margin:12px auto 0;max-width:15ch}
.mdiario .quando{color:var(--ocra);display:block;font-size:11px;margin-bottom:8px}
.mdiario h2{font-size:25px;font-weight:400;line-height:1.14;margin:0;max-width:none}
.mdiario h2 a{text-decoration:none}
.mdiario .mspazio-foto{display:block}
.mdiario .verso{margin-top:14px}
.msez-evento h1{font-size:31px;line-height:1.12;margin:12px auto 0;max-width:16ch}
.msez-evento .mfoto{margin-top:26px}
.msez-evento .mfoto img{max-height:80svh}
.evento-fonte{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
.evento-video{margin-top:40px;text-align:center}
.terzi{margin:14px -24px 0;background:var(--pietra2);aspect-ratio:16/9;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:20px}
.terzi iframe{width:100%;height:100%;border:0}
.terzi[data-acceso]{padding:0;display:block}
.terzi-nota{font-size:13.5px;color:var(--morbido)}
.evento-galleria{margin-top:40px;text-align:center}
.evento-galleria .mfoto{margin-top:14px}
.msez-evento .verso-centro{margin-top:40px}

/* ======================================================= CONTATTI */
.msez-testa-pagina .mtasti{margin-top:26px}
.msez-modulo .modulo{margin-top:22px}
.msez-recapiti h2{max-width:none}
.msez-recapiti .recapiti-elenco{margin:22px 0 40px;grid-template-columns:1fr;gap:6px}
.msez-recapiti .recapiti-elenco dt{margin-top:10px}
.msez-recapiti .terzi-mappa{margin:14px -24px 0;aspect-ratio:4/3}
.msez-recapiti .terzi-mappa .mtasto-linea{margin-top:0;background:var(--pietra);color:var(--inchiostro);border-color:var(--pietra)}
.msez-grazie{padding-top:70px;min-height:70svh}
.msez-grazie h1{font-size:32px;line-height:1.12;margin:12px auto 0;max-width:15ch}