/* ============================================================
   EPIFANIO COMIS — «L'ATTACCO»
   La sala e il palco: il buio è dove si guarda, il chiaro dove si legge.
   ============================================================ */

:root{
  --nero:#06080B;
  --nero-2:#0D1116;
  --navy:#162330;
  --avorio:#101418;
  --bianco:#161B21;
  --ink:#F2EFE9;
  --ink-2:#BDB8AE;
  --ink-3:#948E85;   /* era #6B7B8B: su avorio non arrivava al contrasto minimo */
  --nero-3:#080A0E;          /* la casella vuota mentre la foto carica */
  --oro:#C9A227;
  --oro-luce:#E8CE8F;
  --oro-scuro:#DCBE72;

  /* testo sopra le sezioni scure */
  --titolo-scuro:#F4F1EA;    /* i titoloni sulle fasce scure: era --avorio, ma quello
                                e' un FONDO, e nella variante chiara si annullavano */
  --su-scuro-1:#F4F1EA;
  --su-scuro-2:#B7B2A9;
  --su-scuro-3:#D8C39A;

  /* gli stessi colori in "r,g,b": servono alle sfumature, che non accettano var() dentro */
  --rgb-scuro:6,8,11;
  --rgb-chiaro:16,20,24;
  --rgb-acc:201,162,39;
  --rgb-acc-luce:232,206,143;

  --filo:rgba(var(--rgb-acc),.34);
  --filo-chiaro:rgba(242,239,233,.13);

  --display:'Bodoni Moda','Didot','Bodoni MT',Georgia,serif;
  --testo:'Jost','Futura','Century Gothic',system-ui,sans-serif;

  /* leve della leggibilità: le muove il pannello «Aa» in basso a sinistra */
  --peso-testo:400;          /* era 300: troppo sottile per leggere davvero */
  --corpo:1;                 /* moltiplicatore del corpo del testo */
  --tracc:1;                 /* moltiplicatore della spaziatura dei maiuscoletti */

  /* 🔴 IL TEMPO UNICO — 72 battiti al minuto, un andante.
     Nel sito non esiste piu' nessuna durata scritta a mano: tutto si muove su
     queste quattro misure e su queste due curve. E' la ragione per cui le
     sezioni smettono di sembrare effetti diversi montati insieme. */
  --sedicesimo:208ms;
  --mezza:416ms;
  --battuta:833ms;
  --lunga:1250ms;
  --arco:cubic-bezier(.16,1,.3,1);      /* entra: parte deciso e si posa */
  --uscita:cubic-bezier(.7,0,.84,0);    /* esce: indugia e poi sparisce */

  --pad:clamp(1.4rem,5vw,6rem);
  --max:80rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--avorio);color:var(--ink);
  font-family:var(--testo);
  font-size:calc(clamp(1rem,.94rem + .3vw,1.1rem) * var(--corpo));
  line-height:1.72;
  font-weight:var(--peso-testo);overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* 🔴 `height:auto` non è un vezzo. Senza, l'attributo HTML height="853" resta valido
   accanto a width:100% e la foto viene schiacciata: era così che la foto al pianoforte
   in bianco e nero risultava «tutta allungata». Vale per OGNI immagine del sito. */
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--oro);color:var(--nero)}
:focus-visible{outline:2px solid var(--oro-scuro);outline-offset:3px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1.03;
  letter-spacing:-.015em}

.occhiello{
  font-family:var(--testo);font-size:calc(.78rem * var(--corpo));font-weight:500;letter-spacing:calc(.22em * var(--tracc));
  text-transform:uppercase;color:var(--oro-scuro);margin:0 0 1.4rem;
}
.scena .occhiello{color:var(--oro-luce)}

.guida{color:var(--ink-2);max-width:54ch;font-size:1.0625rem}
.scena .guida{color:var(--su-scuro-2)}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--testo);font-size:calc(.78rem * var(--corpo));font-weight:500;letter-spacing:calc(.2em * var(--tracc));
  text-transform:uppercase;text-decoration:none;cursor:pointer;background:none;
  padding:1.05rem 2.2rem;border:1px solid var(--oro);color:var(--oro-scuro);
  position:relative;overflow:hidden;isolation:isolate;transition:color var(--mezza) var(--arco);
}
.scena .btn{color:var(--oro-luce)}
.btn::after{content:"";position:absolute;inset:0;background:var(--oro);z-index:-1;
  transform:translateY(101%);transition:transform var(--mezza) var(--arco)}
.btn:hover{color:var(--nero)}
.btn:hover::after{transform:translateY(0)}

/* ============================================================
   ① L'ATTACCO — l'apertura
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  background:var(--nero);overflow:hidden;isolation:isolate;
}
.hero__foto{
  position:absolute;inset:0;z-index:0;
  background:url("img/hero.jpg?f=2") center 28%/cover no-repeat;
  opacity:0;transform:scale(1.16);filter:brightness(.35) saturate(.75);
  transition:opacity 1.5s var(--arco),transform 3.2s var(--arco),filter 2.4s ease;
}
.hero.is-open .hero__foto{opacity:1;transform:scale(1);filter:none}

.hero__velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(var(--rgb-scuro),.9) 0%,rgba(var(--rgb-scuro),.55) 34%,transparent 62%),
    linear-gradient(180deg,rgba(var(--rgb-scuro),.72) 0%,transparent 26%,rgba(var(--rgb-scuro),.5) 62%,var(--nero) 100%);
  opacity:0;transition:opacity 1.6s var(--arco) var(--sedicesimo);
}
.hero.is-open .hero__velo{opacity:1}

#attacco{position:absolute;inset:0;z-index:3;pointer-events:auto}
#attacco canvas{position:absolute;inset:0;width:100%;height:100%}
#attacco.is-done{display:none}

.hero__testo{
  position:relative;z-index:2;align-self:end;justify-self:stretch;
  width:100%;max-width:var(--max);margin-inline:auto;
  padding:0 var(--pad) clamp(5.5rem,15vh,9rem);
  text-align:left;
  opacity:0;transition:opacity var(--lunga) var(--arco) var(--mezza)}
.hero.is-open .hero__testo{opacity:1}

.hero h1{
  /* piu' contenuto di prima: a 8,6rem il nome attraversava mezza orchestra */
  font-size:clamp(2.5rem,7.6vw,6.2rem);color:var(--titolo-scuro);
  letter-spacing:-.025em;margin:0 0 1rem;max-width:14ch;
}
.hero h1 em{display:block;font-style:italic;color:var(--oro-luce);
  font-size:.42em;letter-spacing:.02em;margin-top:.35em}
.hero__riga{
  font-family:var(--display);font-style:italic;color:var(--su-scuro-3);
  font-size:clamp(1.05rem,2.1vw,1.5rem);max-width:24ch;margin:0 0 clamp(1.8rem,3.5vw,2.6rem);
}
.hero__azioni{display:flex;gap:1rem 1.4rem;justify-content:flex-start;flex-wrap:wrap}

.hero__giu{
  position:absolute;right:clamp(1.4rem,5vw,4rem);bottom:clamp(1.2rem,3.5vh,2.4rem);z-index:2;
  display:grid;justify-items:center;gap:.7rem;
  font-size:calc(.6875rem * var(--corpo));letter-spacing:calc(.22em * var(--tracc));text-transform:uppercase;color:var(--su-scuro-2);
  opacity:0;transition:opacity var(--battuta) var(--arco) 1.4s;
}
.hero.is-open .hero__giu{opacity:1}
.hero__giu i{display:block;width:1px;height:40px;background:linear-gradient(180deg,var(--oro),transparent);
  animation:cala 2.4s ease-in-out infinite}
@keyframes cala{0%,100%{transform:scaleY(.25);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* da telefono il ritratto si sposta: il volto deve restare in campo */
@media (max-width:760px){
  .hero__foto{background-position:38% 20%}
  .hero h1{font-size:clamp(2.4rem,11vw,3.6rem);max-width:none}
  .hero__testo{padding-bottom:clamp(4.5rem,12vh,7rem)}
  .hero__azioni{flex-direction:column;align-items:stretch}
  .hero__azioni .btn{justify-content:center}
  .hero__giu{display:none}          /* da telefono si scorre e basta */
}

/* ============================================================
   ② LE SALE — la banda che non si ferma mai
   ============================================================ */
.sale{background:var(--nero);border-block:1px solid rgba(var(--rgb-acc),.2);
  padding:clamp(1.1rem,2.4vw,1.7rem) 0;overflow:hidden}
.sale__pista{display:flex;width:max-content;animation:scorri 58s linear infinite}
.sale__gruppo{display:flex;align-items:center;flex:none}
.sale__voce{font-family:var(--display);font-size:clamp(.95rem,1.9vw,1.45rem);
  color:var(--su-scuro-1);white-space:nowrap;padding:0 clamp(1rem,2.2vw,1.9rem)}
.sale__punto{width:3px;height:3px;border-radius:50%;background:var(--oro);flex:none}
@keyframes scorri{to{transform:translateX(-50%)}}

/* ============================================================
   ③ IL RITRATTO — colonna e perno
   ============================================================ */
.sez{padding-block:clamp(5rem,13vw,10rem);position:relative}
.sez--bianca{background:var(--bianco)}

.perno{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:920px){
  .perno{grid-template-columns:1fr .88fr;align-items:start}
  .perno__media{position:sticky;top:12vh}
}
.perno__media img{width:100%;height:auto}
.perno h2{font-size:clamp(2.1rem,5.4vw,4rem)}
.perno h2 em{font-style:italic;color:var(--oro-scuro)}
.perno__lista{margin:clamp(2rem,4vw,2.8rem) 0 0;padding:0;list-style:none;display:grid;gap:1.6rem}
.perno__lista li{border-top:1px solid var(--filo-chiaro);padding-top:1.4rem;
  font-size:clamp(1.02rem,1.9vw,1.18rem);line-height:1.55}
.perno__lista b{display:block;font-family:var(--display);font-weight:400;color:var(--oro-scuro);
  font-size:.75rem;letter-spacing:calc(.19em * var(--tracc));text-transform:uppercase;margin-bottom:.5rem;
  font-family:var(--testo)}

/* ============================================================
   ④ IL CAROSELLO CURVO — la firma visiva
   ============================================================ */
/* la sezione è alta: dentro, il blocco si aggancia e le fotografie girano con lo scroll */
.giostra{
  background:var(--nero-2);position:relative;overflow:visible;
  height:260vh;
  --lh:clamp(230px,50svh,560px);
  --lw:calc(var(--lh) / 1.44);
}
.giostra__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1rem,3vh,2.4rem);
}
.giostra__testa{text-align:center;margin:0}
.giostra__testa h2{color:var(--titolo-scuro);font-size:clamp(2rem,5vw,3.6rem)}
.giostra__testa h2 em{font-style:italic;color:var(--oro-luce)}
.giostra__testa p{color:var(--su-scuro-2);font-size:.9rem;margin:.9rem 0 0;letter-spacing:.02em}

/* La profondità è tutta qui: la lastra davanti sta esattamente sul piano della
   prospettiva, quindi non si deforma mai; le altre affondano davvero. */
.giostra__stage{perspective:clamp(820px,74vw,1300px);perspective-origin:50% 46%;
  height:calc(var(--lh) + 3rem);width:100%;
  display:grid;place-items:center;cursor:grab;touch-action:pan-y}
.giostra.is-drag .giostra__stage{cursor:grabbing}
.giostra__track{position:relative;width:var(--lw);height:var(--lh);
  transform-style:preserve-3d;will-change:transform}
.lastra{position:absolute;inset:0;overflow:hidden;background:var(--nero-3);
  transform:rotateY(var(--ang)) translateZ(var(--raggio));
  backface-visibility:hidden;
  box-shadow:0 34px 80px rgba(0,0,0,.72);border:1px solid rgba(var(--rgb-acc),.22)}
.lastra::after{                       /* un velo d'oro sul vetro, appena accennato */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(var(--rgb-acc-luce),.16),transparent 42%);
}
.lastra img{width:100%;height:100%;object-fit:cover}
.lastra figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.1rem .9rem .8rem;
  background:linear-gradient(0deg,rgba(var(--rgb-scuro),.95),transparent);
  font-size:calc(.6875rem * var(--corpo));letter-spacing:calc(.19em * var(--tracc));text-transform:uppercase;color:var(--oro-luce);
}
.giostra__comandi{display:flex;gap:1rem;justify-content:center;margin:0}
.giostra__comandi button{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(var(--rgb-acc),.45);
  background:none;color:var(--oro-luce);cursor:pointer;font-size:1rem;line-height:1;
  transition:background-color var(--sedicesimo) var(--arco),border-color .35s ease}
.giostra__comandi button:hover{background:rgba(var(--rgb-acc),.16);border-color:var(--oro)}

/* ============================================================
   ⑤ LA DIDATTICA — il titolo che si riempie, i nove concorsi
   ============================================================ */
/* 🔴 Prima la metà «non ancora riempita» era inchiostro al 20%: praticamente invisibile,
   e se l'animazione non partiva la frase restava illeggibile per sempre. Ora i due stati
   sono ENTRAMBI leggibili — si passa da inchiostro pieno a oro, non da niente a oro. */
.riempi{
  background:linear-gradient(90deg,var(--oro-scuro) 50%,var(--ink-2) 50%) 0 0/200% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-position:0 0;
}
@supports (animation-timeline: view()){
  .riempi{background-position:100% 0;animation:riempi linear both;
    animation-timeline:view();animation-range:entry 25% cover 52%}
}
@keyframes riempi{from{background-position:100% 0}to{background-position:0 0}}

.albo{margin:clamp(2.5rem,6vw,4rem) 0 0;padding:0;list-style:none;
  border-top:1px solid var(--filo-chiaro)}
.albo li{
  display:flex;align-items:baseline;gap:clamp(.8rem,2vw,1.6rem);
  padding:clamp(.95rem,2.2vw,1.35rem) 0;border-bottom:1px solid var(--filo-chiaro);
  transition:padding-left var(--mezza) var(--arco),background-color .5s var(--arco);
}
.albo li:hover{padding-left:clamp(.6rem,2vw,1.6rem);background:rgba(var(--rgb-acc),.05)}
.albo em{font-style:normal;font-family:var(--testo);font-size:calc(.75rem * var(--corpo));letter-spacing:calc(.18em * var(--tracc));
  color:var(--oro-scuro);flex:none;width:2.2rem;font-weight:500}
.albo b{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,2.9vw,1.9rem);
  line-height:1.2}
.albo span{margin-left:auto;font-size:calc(.75rem * var(--corpo));letter-spacing:calc(.18em * var(--tracc));text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;padding-left:.8rem}
@media (max-width:640px){
  .albo li{flex-wrap:wrap;gap:.4rem .9rem}
  .albo span{margin-left:0;width:100%;padding-left:2.2rem}
}
.albo__coda{display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;align-items:center;
  margin-top:clamp(2.4rem,5vw,3.4rem)}
.albo__coda p{margin:0;color:var(--ink-2);font-size:.95rem;max-width:36ch}

/* le cattedre */
.cattedre{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1px;background:var(--filo-chiaro);margin-top:clamp(3rem,7vw,5rem)}
.cattedre>div{background:var(--avorio);padding:clamp(1.4rem,3vw,2.1rem)}
.sez--bianca .cattedre>div{background:var(--bianco)}
.cattedre span{display:block;font-size:calc(.6875rem * var(--corpo));letter-spacing:calc(.2em * var(--tracc));text-transform:uppercase;
  color:var(--oro-scuro);margin-bottom:.8rem}
.cattedre strong{font-family:var(--display);font-weight:400;font-size:1.25rem;display:block;line-height:1.25}
.cattedre small{display:block;color:var(--ink-3);font-size:.78rem;margin-top:.45rem}

/* ============================================================
   ⑥ IL FILM — il concerto vero
   ============================================================ */
/* 🔴 Un video non si mostra MAI piu' largo della sua risoluzione vera: sopra
   quella soglia si sgrana e basta. `--nativa` la porta addosso ogni video. */
.film{position:relative;background:var(--nero);overflow:hidden;
  padding-block:clamp(4rem,10vw,7.5rem)}
.film__schermo{
  position:relative;width:min(100%, var(--nativa, 1100px));margin-inline:auto;
  border:1px solid rgba(var(--rgb-acc),.24);background:var(--nero-3);
  overflow:hidden;cursor:pointer;isolation:isolate;
  transition:border-color var(--mezza) var(--arco);
}
.film__schermo:hover,.film__schermo:focus-visible{border-color:rgba(var(--rgb-acc),.6)}
.film video{width:100%;height:auto;display:block;opacity:.92;transition:opacity var(--mezza) var(--arco)}
.film__schermo:hover video{opacity:1}
.film__sopra{max-width:var(--max);margin:0 auto clamp(2rem,4.5vw,3.2rem);padding-inline:var(--pad)}
.film h2{color:var(--titolo-scuro);font-size:clamp(1.9rem,5vw,3.6rem);max-width:14ch}
.film h2 em{font-style:italic;color:var(--oro-luce)}
.audio{
  margin-top:clamp(1.6rem,3vw,2.4rem);display:inline-flex;align-items:center;gap:.7rem;
  border:1px solid rgba(var(--rgb-acc),.5);background:rgba(var(--rgb-scuro),.5);backdrop-filter:blur(8px);
  color:var(--oro-luce);padding:.8rem 1.4rem;border-radius:999px;cursor:pointer;
  font-family:var(--testo);font-size:calc(.75rem * var(--corpo));font-weight:500;letter-spacing:calc(.18em * var(--tracc));text-transform:uppercase;
}
.audio i{width:8px;height:8px;border-radius:50%;background:var(--su-scuro-2);flex:none;transition:background-color var(--sedicesimo)}
.audio.is-on i{background:var(--oro);box-shadow:0 0 12px var(--oro)}

/* ============================================================
   ⑦ FESTIVAL · CONTATTI · PIEDE
   ============================================================ */
.doppia{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:920px){.doppia{grid-template-columns:1fr 1fr;align-items:center}}
.doppia h2{font-size:clamp(2rem,5vw,3.4rem)}
.doppia h2 em{font-style:italic;color:var(--oro-scuro)}

.chiusa h2{font-size:clamp(2.2rem,6.5vw,4.6rem);max-width:15ch}
.chiusa h2 em{font-style:italic;color:var(--oro-scuro)}
.chiusa .nota{margin-top:clamp(2rem,4vw,2.8rem);padding-top:1.5rem;
  border-top:1px solid var(--filo-chiaro);color:var(--ink-3);font-size:.92rem;max-width:46ch}

footer{background:var(--nero);color:var(--su-scuro-2);padding-block:clamp(2.4rem,5vw,3.4rem)}
.piede{display:flex;flex-wrap:wrap;gap:1.1rem 2.4rem;justify-content:space-between;align-items:center}
.piede p{margin:0;font-size:.72rem;letter-spacing:.1em}
.piede a{color:var(--oro-luce);text-decoration:none}
.piede a:hover{text-decoration:underline}

/* ---------- testata ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:90;display:flex;align-items:center;gap:1.2rem;
  padding:1rem var(--pad);mix-blend-mode:normal;transition:background-color var(--mezza),padding .5s,box-shadow .5s}
.top.is-fissa{background:rgba(var(--rgb-chiaro),.94);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--filo-chiaro);padding-block:.6rem}
.top__marchio{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none;
  animation:appare 1.1s ease 2.7s both}
@keyframes appare{from{opacity:0}to{opacity:1}}
.top__marchio img{width:22px;height:30px}
.top__marchio b{font-family:var(--display);font-weight:400;font-size:.9rem;letter-spacing:.16em;
  color:var(--titolo-scuro);white-space:nowrap;transition:color var(--mezza)}
.top.is-fissa .top__marchio b{color:var(--ink)}
.menu{display:flex;gap:clamp(.9rem,2.4vw,2rem);margin-left:auto;align-items:center}
.menu a{font-size:calc(.75rem * var(--corpo));font-weight:500;letter-spacing:calc(.18em * var(--tracc));text-transform:uppercase;
  text-decoration:none;color:var(--su-scuro-1);transition:color var(--mezza);white-space:nowrap}
.top.is-fissa .menu a{color:var(--ink-2)}
.menu a:hover{color:var(--oro-luce)}
.top.is-fissa .menu a:hover{color:var(--oro-scuro)}
.menu .lingua{border:1px solid rgba(var(--rgb-acc),.5);padding:.35rem .65rem;color:var(--oro-luce)!important}
.top.is-fissa .menu .lingua{border-color:var(--filo)}
@media (max-width:880px){.menu a:not(.lingua):not(.chiave){display:none}}
/* 🔴 Il marchio in testata e' lo STESSO da telefono e da computer.
   Prima sotto i 560px il nome spariva e restava solo il monogramma: il logo
   sembrava minuscolo. Sotto gli 880px il menu e' gia' un solo tasto, quindi
   lo spazio c'e'. Se lo schermo e' davvero stretto si stringe la spaziatura
   delle lettere, non si butta via il nome. */
@media (max-width:360px){
  .top__marchio{gap:.5rem}
  .top__marchio b{font-size:.82rem;letter-spacing:.1em}
}

/* ---------- il cursore-bacchetta ---------- */
.bacchetta{position:fixed;inset:0;z-index:120;pointer-events:none}
body.bacchetta-on .scena,body.bacchetta-on .scena *{cursor:none}
@media (hover:none),(pointer:coarse){.bacchetta{display:none}}

/* ---------- i reveal, guidati dallo scroll ---------- */
@supports (animation-timeline: view()){
  .rev{animation:entra linear both;animation-timeline:view();animation-range:entry 4% cover 30%}
}
@keyframes entra{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.no-timeline .rev{opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--arco),transform .9s var(--arco)}
.no-timeline .rev.is-in{opacity:1;transform:none}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero__foto{opacity:1;transform:none;filter:none}
  .hero__velo,.hero__testo,.hero__giu{opacity:1}
  .top__marchio{animation:none;opacity:1}
  #attacco{display:none}
  .sale__pista{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .rev{opacity:1;transform:none}
  .bacchetta{display:none}
}


/* ============================================================
   EFFETTI IN PIÙ — 22/08
   ============================================================ */

/* ---------- le note che aleggiano nelle zone scure ----------
   Un velo per ogni fascia scura: sta a z-index -1 dentro una sezione che si
   isola, quindi copre il nero della sezione ma resta SOTTO ogni contenuto.
   Cosi' non serve toccare la posizione di nessun elemento: e' l'errore che
   aveva sfondato la hero. */
.aleggia{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero,.soglia,.sale,.film,.mosaico,.chiusa,footer{isolation:isolate}

/* 🔴 Il velo che copre TUTTA la pagina, non solo le fasce scure.
   Sta fisso dietro al contenuto: le sezioni di lettura non hanno fondale
   proprio, quindi le note si vedono passare anche li'.

   ⚠️ Qui si alza SOLO `main` e `footer`. La testata e il sipario NON si
   toccano: hanno gia' il loro z-index e sono FISSI. Il 22 agosto 2026 una
   riga che dava loro `position:relative` li ha rimessi in flusso, ha spinto
   la hero 808px sotto la piega e ha fatto sparire l'ouverture. */
.aleggia--tutto{position:fixed;inset:0;z-index:0;pointer-events:none}
main,footer{position:relative;z-index:1}
/* nella hero le note stanno sopra la fotografia ma sotto il velo e il testo:
   durante l'ouverture sono l'unica cosa viva sul nero. */
.hero>.aleggia{z-index:0}
@media (prefers-reduced-motion:reduce){ .aleggia{display:none} }

/* ---------- le immagini entrano da un taglio, non da una sfumatura ---------- */
.taglia{clip-path:inset(0 0 0 0)}
@supports (animation-timeline: view()){
  .taglia{animation:taglia linear both;animation-timeline:view();animation-range:entry 6% cover 34%}
}
@keyframes taglia{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.no-timeline .taglia{clip-path:inset(0 0 100% 0);transition:clip-path var(--battuta) var(--arco)}
.no-timeline .taglia.is-in{clip-path:inset(0 0 0 0)}

/* ---------- parallasse: l'immagine scorre più lenta della pagina ---------- */
.cornice{overflow:hidden;position:relative}
.cornice img{width:100%;display:block}
@supports (animation-timeline: view()){
  .cornice img{animation:para linear;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@keyframes para{from{transform:translateY(-4%) scale(1.1)}to{transform:translateY(4%) scale(1.1)}}

/* ---------- il filetto d'oro che si disegna sotto i titoli ---------- */
.filo-oro{position:relative;padding-bottom:1.1rem}
.filo-oro::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--oro),transparent);transform-origin:left;transform:scaleX(1);
}
@supports (animation-timeline: view()){
  .filo-oro::after{animation:tira linear both;animation-timeline:view();animation-range:entry 18% cover 44%}
}
@keyframes tira{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- l'invito durante l'ouverture ---------- */
.entra{
  position:absolute;left:50%;bottom:clamp(2rem,7vh,4.5rem);z-index:4;transform:translateX(-50%);
  font-size:calc(.6875rem * var(--corpo));letter-spacing:calc(.22em * var(--tracc));text-transform:uppercase;color:rgba(var(--rgb-acc),.72);
  opacity:0;pointer-events:none;white-space:nowrap;
  animation:vieni 1s ease 2.2s forwards;
}
@keyframes vieni{to{opacity:1}}
body:not(.ouverture) .entra{display:none}

/* ---------- la descrizione del metodo ---------- */
.metodo{display:grid;gap:clamp(1.5rem,3vw,2.2rem) clamp(2rem,4vw,3.4rem);
  margin-top:clamp(2.4rem,5vw,3.4rem);max-width:64rem}
@media (min-width:760px){.metodo{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.metodo{grid-template-columns:repeat(3,1fr)}}
.metodo div{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.65;
  border-top:1px solid var(--filo-chiaro);padding-top:1.1rem}
.metodo b{display:block;font-family:var(--display);font-weight:400;
  color:var(--oro-scuro);font-size:1.16rem;margin-bottom:.4rem;line-height:1.2}

@media (prefers-reduced-motion:reduce){
  .aleggia{display:none}
  .taglia{clip-path:none!important;animation:none!important}
  .cornice img{animation:none!important;transform:none!important}
  .filo-oro::after{animation:none!important;transform:scaleX(1)!important}
  .entra{display:none}
}


/* ---------- il carosello agganciato allo scroll ---------- */
.giostra__testa h2{margin:0}
.giostra__testa p{margin:.7rem 0 0}
@media (max-width:760px){
  .giostra{height:220vh;--lh:clamp(220px,44svh,420px)}
  .giostra__comandi{display:none}   /* da telefono comanda lo scroll */
}
@media (prefers-reduced-motion:reduce){
  .giostra{height:auto;padding-block:5rem}
  .giostra__pin{position:static;height:auto;overflow:visible}
}

/* ============================================================
   ⑨ IL MOSAICO — il muro di fotografie
   Ogni tessera occupa lo spazio che la sua foto chiede: le verticali
   prendono due righe, le orizzontali due colonne. Nessun ritaglio brutale.
   ============================================================ */
.mosaico{background:var(--nero);position:relative;overflow:hidden;
  padding-block:clamp(4.5rem,11vw,9rem)}
.mosaico__testa{text-align:center;margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.mosaico__testa h2{color:var(--titolo-scuro);font-size:clamp(2rem,5vw,3.6rem)}
.mosaico__testa h2 em{font-style:italic;color:var(--oro-luce)}
.mosaico__testa p{color:var(--su-scuro-2);margin:.9rem 0 0}

/* 🔴 A colonne, non a caselle fisse. Con le caselle fisse ogni foto andrebbe
   ritagliata per forza, ed e' esattamente il difetto che ci e' stato segnalato:
   qui invece ogni fotografia si vede INTERA, con le sue proporzioni. */
.mosaico__griglia{columns:2;column-gap:clamp(.35rem,.9vw,.8rem)}
@media (min-width:700px){ .mosaico__griglia{columns:3} }
@media (min-width:1180px){ .mosaico__griglia{columns:4} }

.tessera{
  position:relative;overflow:hidden;margin:0 0 clamp(.35rem,.9vw,.8rem);padding:0;border:0;
  background:var(--nero-3);cursor:zoom-in;isolation:isolate;
  break-inside:avoid;-webkit-column-break-inside:avoid;display:block;width:100%;
}

.tessera img{
  width:100%;height:auto;display:block;
  filter:brightness(.78) saturate(.82);
  transform:scale(1.02);
  transition:transform var(--battuta) var(--arco),filter var(--mezza) var(--arco);
}
.tessera:hover img,.tessera:focus-visible img{filter:none;transform:scale(1.08)}

/* il filo d'oro che si accende sul bordo */
.tessera::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(var(--rgb-acc),0);
  transition:box-shadow var(--mezza) var(--arco);
}
.tessera:hover::after,.tessera:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(var(--rgb-acc),.75)}



/* 🔴 SULLE IMMAGINI NON SI SCRIVE.
   Le didascalie in sovrimpressione («lo sguardo sulla tastiera», «bacchetta fra
   le mani») sono state tolte da tutto il sito il 22 agosto 2026: dicevano cose
   che si vedono gia' e sporcavano la fotografia. La descrizione vive solo
   nell'`alt`, che non si vede. Non rimettere <figcaption> sulle figure. */

/* ---------- la galleria si apre solo se la vuoi tutta ---------- */
/* Trentotto foto una sotto l'altra allungavano troppo la pagina: se ne vedono
   dodici, e le altre arrivano con un tocco. */
.mosaico__griglia.is-corta .tessera:nth-child(n+13){display:none}
/* niente sfumatura in fondo: con le colonne di altezza diversa taglia le foto
   a meta' e sembrano rovinate. Taglio netto e il pulsante sotto: si capisce meglio. */
.mosaico__oltre{display:flex;justify-content:center;margin-top:clamp(2rem,4vw,3rem)}
.mosaico__oltre .btn{color:var(--oro-luce);border-color:rgba(var(--rgb-acc),.5)}
.mosaico__oltre .btn:hover{color:var(--nero)}

/* ============================================================
   ⑩ LA SALA — i video, tutti muti finché non decidi tu
   ============================================================ */
.sala{background:var(--nero-2);padding-block:clamp(4.5rem,11vw,9rem);position:relative;overflow:hidden}
.sala__testa{text-align:center;margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.sala__testa h2{color:var(--titolo-scuro);font-size:clamp(2rem,5vw,3.6rem)}
.sala__testa h2 em{font-style:italic;color:var(--oro-luce)}
.sala__testa p{color:var(--su-scuro-2);margin:.9rem 0 0}

/* anche qui a colonne: un video verticale e tre orizzontali dentro una griglia
   a caselle lasciavano un buco vuoto. Cosi' si incastrano da soli. */
.sala__griglia{columns:1;column-gap:clamp(.6rem,1.4vw,1.1rem)}
@media (min-width:640px){ .sala__griglia{columns:2} }

.riquadro{
  position:relative;display:block;width:100%;max-width:var(--nativa,none);
  margin:0 0 clamp(.6rem,1.4vw,1.1rem);padding:0;
  border:1px solid rgba(var(--rgb-acc),.2);background:var(--nero);
  overflow:hidden;cursor:pointer;aspect-ratio:16/10;isolation:isolate;
  break-inside:avoid;-webkit-column-break-inside:avoid;
  transition:border-color var(--mezza) var(--arco);
}
.riquadro--ritto{aspect-ratio:9/16}
.riquadro:hover,.riquadro:focus-visible{border-color:rgba(var(--rgb-acc),.72)}
.riquadro video,.riquadro img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.86);transition:filter var(--mezza) var(--arco),transform var(--battuta) var(--arco)}
.riquadro:hover video,.riquadro:hover img{filter:none;transform:scale(1.03)}

/* il triangolino: dice «questo si apre» senza scrivere Play */
/* niente triangolo da «play»: questi video suonano gia, il clic accende l audio */
/* l'etichetta dice sempre in che stato sei: muto oppure audio acceso */
.suono{
  position:absolute;top:.7rem;right:.7rem;z-index:4;
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--testo);font-size:calc(.62rem * var(--corpo));font-weight:500;
  letter-spacing:calc(.14em * var(--tracc));text-transform:uppercase;
  color:var(--su-scuro-2);background:rgba(var(--rgb-scuro),.66);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);padding:.36rem .62rem;pointer-events:none;
  transition:color var(--sedicesimo) var(--arco),border-color .3s ease,background-color .3s ease;
}
.suono i{                                   /* tre stanghette: un piccolo indicatore di livello */
  width:11px;height:9px;display:block;flex:none;
  background:
    linear-gradient(var(--su-scuro-2) 0 0) 0 100%/2px 40% no-repeat,
    linear-gradient(var(--su-scuro-2) 0 0) 50% 100%/2px 70% no-repeat,
    linear-gradient(var(--su-scuro-2) 0 0) 100% 100%/2px 25% no-repeat;
  transition:background-image var(--sedicesimo) var(--arco);
}
.is-suono .suono{color:var(--oro-luce);border-color:rgba(var(--rgb-acc),.6);
  background:rgba(var(--rgb-scuro),.82)}
.is-suono .suono i{
  background:
    linear-gradient(var(--oro-luce) 0 0) 0 100%/2px 55% no-repeat,
    linear-gradient(var(--oro-luce) 0 0) 50% 100%/2px 100% no-repeat,
    linear-gradient(var(--oro-luce) 0 0) 100% 100%/2px 70% no-repeat;
  animation:livelli 1.1s ease-in-out infinite alternate;
}
@keyframes livelli{to{transform:scaleY(.55)}}
@media (prefers-reduced-motion:reduce){ .is-suono .suono i{animation:none} }

.riquadro__muto{
  position:absolute;top:.7rem;right:.7rem;z-index:3;
  font-family:var(--testo);font-size:calc(.62rem * var(--corpo));font-weight:500;
  letter-spacing:calc(.14em * var(--tracc));text-transform:uppercase;
  color:var(--su-scuro-2);background:rgba(var(--rgb-scuro),.62);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);padding:.34rem .6rem;pointer-events:none;
}

/* ============================================================
   ⑪ LA LENTE — foto e video a schermo pieno
   ============================================================ */
.lente{
  /* minmax(0,1fr) e non 1fr: con 1fr la riga non si lascia comprimere sotto il
     contenuto e la foto sfonda in basso, mangiandosi la didascalia. */
  position:fixed;inset:0;z-index:99990;display:grid;grid-template-rows:minmax(0,1fr) auto;
  background:rgba(var(--rgb-scuro),.97);backdrop-filter:blur(18px);
  opacity:0;pointer-events:none;transition:opacity var(--sedicesimo) var(--arco);
}
.lente.is-on{opacity:1;pointer-events:auto}
.lente__palco{position:relative;display:grid;place-items:center;
  padding:clamp(2.2rem,5vw,3.6rem);min-height:0;overflow:hidden}
.lente__palco img,.lente__palco video{
  max-width:100%;max-height:100%;width:auto;height:auto;
  min-width:0;min-height:0;object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.lente__piede{
  display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap;
  padding:0 clamp(1rem,4vw,2rem) clamp(1.4rem,4vh,2.4rem);text-align:center;
}
.lente__dida{
  margin:0;font-family:var(--testo);font-size:calc(.74rem * var(--corpo));font-weight:500;
  letter-spacing:calc(.18em * var(--tracc));text-transform:uppercase;color:var(--oro-luce);
}
/* aprendo una foto non c'e' piu' nessuna didascalia: la riga sparisce del
   tutto invece di lasciare uno spazio vuoto sotto l'immagine. */
.lente__dida:empty{display:none}
.lente__conta{margin:0;font-size:calc(.7rem * var(--corpo));color:var(--su-scuro-2);
  letter-spacing:calc(.14em * var(--tracc))}
.lente button{
  background:none;border:1px solid rgba(var(--rgb-acc),.42);color:var(--oro-luce);
  cursor:pointer;display:grid;place-items:center;transition:background-color var(--sedicesimo) var(--arco),border-color .3s ease;
}
.lente button:hover{background:rgba(var(--rgb-acc),.18);border-color:var(--oro)}
.lente__chiudi{position:absolute;top:clamp(.8rem,2vw,1.4rem);right:clamp(.8rem,2vw,1.4rem);
  z-index:4;width:44px;height:44px;border-radius:50%;font-size:1.1rem;line-height:1}
.lente__prec,.lente__succ{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:48px;height:48px;border-radius:50%;font-size:1.1rem;line-height:1}
.lente__prec{left:clamp(.5rem,2vw,1.6rem)}
.lente__succ{right:clamp(.5rem,2vw,1.6rem)}
.lente__audio{
  border-radius:999px;padding:.7rem 1.3rem;font-family:var(--testo);
  font-size:calc(.66rem * var(--corpo));font-weight:500;
  letter-spacing:calc(.18em * var(--tracc));text-transform:uppercase;
}
@media (max-width:640px){
  .lente__prec,.lente__succ{width:42px;height:42px}
  .lente__piede{gap:.9rem}
}
body.lente-aperta{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .tessera img,.riquadro video,.riquadro img,.lente{transition:none}
}


/* 🔴 Le proprieta' con `transition` (color, border-color, background-color...)
   restano appese al VECCHIO valore quando a cambiare e' la variabile invece
   della regola: e' un comportamento noto dei browser. Al cambio di variante si
   spengono per un istante, cosi' tutto ricalcola pulito e non c'e' nemmeno la
   sfumatura confusa di quaranta colori che viaggiano a velocita' diverse. */
html.senza-transizioni *,
html.senza-transizioni *::before,
html.senza-transizioni *::after{transition:none !important}


/* ---------- l'apertura resta scura anche nella variante chiara ----------
   Una fotografia non sopporta un velo bianco al 90%: diventa una nebbia.
   Le variabili si ereditano, quindi basta ridichiararle dentro .hero (e nella
   testata finche' galleggia sopra la foto) e tutto quello che sta dentro segue. */
[data-tema="chiaro"] .hero,
[data-tema="chiaro"] .top:not(.is-fissa){
  --nero:#0B1524;
  --nero-2:#101C2E;
  --rgb-scuro:11,21,36;
  --titolo-scuro:#F2F6FB;
  --su-scuro-1:#DCE6F2;
  --su-scuro-2:#A9BAD0;
  --su-scuro-3:#E4CFA6;
  --oro:#C9A227;
  --oro-luce:#E8CE8F;
  --oro-scuro:#DCBE72;
  --rgb-acc:201,162,39;
  --rgb-acc-luce:232,206,143;
}

/* ============================================================
   ⑫ LE VARIANTI DI COLORE
   Si accendono dal pannello «Aa»: scrive data-tema sull'elemento
   radice e da qui in giu' cambiano solo i valori, mai le regole.
   🔴 Attenzione alla trappola: --ink, --ink-2, --ink-3, --oro-scuro
   e --filo-chiaro sono i colori che stanno SOPRA --avorio e --bianco.
   Se una variante rende scuri anche quei due fondi, quei cinque
   devono diventare chiari, se no il testo sparisce.
   ============================================================ */

/* ---------- Oro e avorio (com'era prima: fasce scure e fasce chiare) ---------- */
[data-tema="oro"]{
  --nero:#06080B;
  --nero-2:#0C1016;
  --nero-3:#0A0D12;
  --rgb-scuro:6,8,11;
  --avorio:#F4F3F2;
  --bianco:#FFFFFF;
  --rgb-chiaro:244,243,242;
  --ink:#1A2430;
  --ink-2:#455565;
  --ink-3:#5B6B7B;
  --filo-chiaro:rgba(26,36,48,.13);
  --titolo-scuro:#F4F3F2;
  --su-scuro-1:#C9CFD6;
  --su-scuro-2:#8093A3;
  --su-scuro-3:#D8CDB8;
  --oro:#C9A227;
  --oro-luce:#E8CE8F;
  --oro-scuro:#8C6634;
  --rgb-acc:201,162,39;
  --rgb-acc-luce:232,206,143;
}

/* ---------- Luci Spente (uguale al tema di partenza) ---------- */
/* Sala a luci spente: ogni fascia è un grigio notte appena diverso dall'altro, i testi sono avorio caldo e l'oro resta l'unica luce accesa. */
[data-tema="notte"]{
  --nero:#06080B;
  --nero-2:#0D1116;
  --nero-3:#080A0E;
  --rgb-scuro:6,8,11;
  --avorio:#101418;
  --bianco:#161B21;
  --rgb-chiaro:16,20,24;
  --ink:#F2EFE9;
  --ink-2:#BDB8AE;
  --ink-3:#948E85;
  --filo-chiaro:rgba(242,239,233,.13);
  --titolo-scuro:#F4F1EA;
  --su-scuro-1:#F4F1EA;
  --su-scuro-2:#B7B2A9;
  --su-scuro-3:#D8C39A;
  --oro:#C9A227;
  --oro-luce:#E8CE8F;
  --oro-scuro:#DCBE72;
  --rgb-acc:201,162,39;
  --rgb-acc-luce:232,206,143;
}

/* ---------- Golfo Mistico ---------- */
/* Sala a luci spente prima dell'attacco: tutto vira al blu notturno, le sezioni di lettura sono blu-grigio appena piu' alte del buio, e l'oro resta ma raffreddato a ottone perche' sul blu legge come strumento e non come decorazione. */
[data-tema="blu"]{
  --nero:#070C16;
  --nero-2:#0D1524;
  --nero-3:#090F1A;
  --rgb-scuro:7,12,22;
  --avorio:#131C2C;
  --bianco:#1A2436;
  --rgb-chiaro:19,28,44;
  --ink:#EAEEF6;
  --ink-2:#B8C3D6;
  --ink-3:#909DB5;
  --filo-chiaro:rgba(206,218,240,.14);
  --titolo-scuro:#F0F3F9;
  --su-scuro-1:#F0F3F9;
  --su-scuro-2:#AEBACE;
  --su-scuro-3:#E4CFA6;
  --oro:#C6A24A;
  --oro-luce:#E8CE8F;
  --oro-scuro:#D9BE7A;
  --rgb-acc:198,162,74;
  --rgb-acc-luce:232,206,143;
}

/* ---------- Carta Blu ---------- */
/* Tutto il sito diventa carta fredda: azzurro pallido dove prima c'era il buio, blu profondo d'inchiostro al posto dell'oro, come un programma di sala stampato su carta pregiata. */
[data-tema="chiaro"]{
  --nero:#DCE5F0;
  --nero-2:#E7EDF6;
  --nero-3:#D7E1EE;
  --rgb-scuro:220,229,240;
  --avorio:#F3F6FA;
  --bianco:#FBFCFE;
  --rgb-chiaro:243,246,250;
  --ink:#0F1F38;
  --ink-2:#3A5170;
  --ink-3:#566F8F;
  --filo-chiaro:rgba(15,31,56,.14);
  --titolo-scuro:#0F1F38;
  --su-scuro-1:#0F1F38;
  --su-scuro-2:#3A5170;
  --su-scuro-3:#6B4426;
  --oro:#1D4482;
  --oro-luce:#2C5390;
  --oro-scuro:#14356E;
  --rgb-acc:29,68,130;
  --rgb-acc-luce:44,83,144;
}

/* ============================================================
   ⑬ LE PAGINE INTERNE
   La soglia, la posa, le cifre e gli stacchi. Sono i mattoni con
   cui è costruita ogni pagina che non è la home.
   ============================================================ */

/* ---------- la soglia: la testa di una pagina interna ---------- */
.soglia{
  position:relative;background:var(--nero);overflow:hidden;
  padding-block:clamp(7rem,17vh,12rem) clamp(3.5rem,8vw,6rem);
  border-bottom:1px solid rgba(var(--rgb-acc),.14);
}
.soglia h1{
  color:var(--titolo-scuro);font-size:clamp(2.6rem,7.4vw,6rem);
  letter-spacing:-.025em;margin:0;max-width:16ch;
}
.soglia h1 em{font-style:italic;color:var(--oro-luce)}
.soglia .guida{margin-top:clamp(1.4rem,3vw,2.2rem);max-width:46ch}

/* ---------- la posa: una sezione di testo ---------- */
.posa{padding-block:clamp(3.5rem,8vw,6.5rem);position:relative}
.posa__testa{max-width:44rem;margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.posa__testa h2{font-size:clamp(1.8rem,4.4vw,3.1rem);line-height:1.08}
.posa__griglia{
  display:grid;gap:clamp(1.5rem,3vw,2.4rem) clamp(2rem,4vw,3.6rem);
  grid-template-columns:1fr;
}
@media (min-width:700px){ .posa__griglia{grid-template-columns:1fr 1fr} }
@media (min-width:1120px){ .posa__griglia{grid-template-columns:repeat(3,1fr)} }
.posa__voce{
  color:var(--ink-2);font-size:1rem;line-height:1.65;
  border-top:1px solid var(--filo-chiaro);padding-top:1.05rem;
  position:relative;
}
/* il filo si accende d'oro sul primo tratto: un accento, non una decorazione */
.posa__voce::before{
  content:"";position:absolute;top:-1px;left:0;width:2.2rem;height:1px;
  background:var(--oro);opacity:.85;
}
.posa__voce b{
  display:block;font-family:var(--display);font-weight:400;
  color:var(--oro-luce);font-size:1.18rem;margin-bottom:.4rem;line-height:1.2;
}

/* ---------- le cifre: i numeri che si ricordano ---------- */
.cifre{
  display:grid;gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));
  margin-top:clamp(2.6rem,6vw,4.2rem);
  border-top:1px solid var(--filo-chiaro);padding-top:clamp(1.8rem,4vw,2.8rem);
}
.cifre b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(3rem,7vw,4.8rem);line-height:.9;color:var(--oro-luce);
  letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;
}
.cifre span{
  display:block;margin-top:.7rem;font-size:calc(.72rem * var(--corpo));font-weight:500;
  letter-spacing:calc(.18em * var(--tracc));text-transform:uppercase;color:var(--ink-3);
}

/* ---------- lo stacco: le immagini che spezzano il testo ----------
   Riga giustificata: in una riga flessibile ogni foto cresce in proporzione
   al proprio rapporto, così le altezze combaciano da sole e NESSUNA foto
   viene ritagliata. È il modo con cui si impaginano le gallerie vere. */
.stacco{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  display:flex;gap:clamp(.5rem,1.2vw,1rem);align-items:flex-start;
}
.stacco--video{
  display:block;position:relative;width:min(calc(100% - 2*var(--pad)), var(--nativa,1100px));
  margin-inline:auto;border:1px solid rgba(var(--rgb-acc),.24);background:var(--nero-3);
  overflow:hidden;cursor:pointer;isolation:isolate;transition:border-color var(--mezza) var(--arco);
}
.stacco--video:hover,.stacco--video:focus-visible{border-color:rgba(var(--rgb-acc),.6)}
.stacco--video video{width:100%;height:auto;display:block;opacity:.92;transition:opacity var(--mezza) var(--arco)}
.stacco--video:hover video{opacity:1}

.stacco__foto{
  flex:var(--r,1.5) 1 0;margin:0;position:relative;overflow:hidden;
  background:var(--nero-3);cursor:zoom-in;isolation:isolate;
}
.stacco__foto img{
  width:100%;height:auto;display:block;
  filter:brightness(.86) saturate(.9);
  transform:scale(1.015);
  transition:transform var(--battuta) var(--arco),filter var(--mezza) var(--arco);
}
.stacco__foto:hover img,.stacco__foto:focus-visible img{filter:none;transform:scale(1.05)}
.stacco__foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(var(--rgb-acc),0);transition:box-shadow var(--mezza) var(--arco);
}
.stacco__foto:hover::after,.stacco__foto:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(var(--rgb-acc),.7)}

/* 🔴 Una fotografia verticale da sola: nella riga crescerebbe fino a tutta la
   colonna e, a rapporto 0,86, sarebbe alta quasi millequattrocento pixel —
   due schermate per una foto sola. Le si da' un tetto e la si mette in mezzo:
   legge come un ritratto incorniciato, non come un manifesto. */
.stacco--ritta{justify-content:center}
.stacco--ritta .stacco__foto{flex:0 1 auto}
.stacco--ritta .stacco__foto img{
  width:auto;max-width:100%;max-height:min(76vh,740px);display:block}
@media (max-width:640px){
  /* da telefono la colonna e' gia' stretta: comanda la larghezza, non l'altezza */
  .stacco--ritta .stacco__foto img{max-height:none;width:100%}
}


/* da telefono tre foto in fila diventano illeggibili: si impilano */
@media (max-width:640px){
  .stacco--tre{flex-wrap:wrap}
  .stacco--tre .stacco__foto{flex:1 1 100%}
  .stacco--tre .stacco__foto:first-child{flex:1 1 100%}
}

/* ---------- il piede, con le sue voci ---------- */
.piede__voci{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}
.piede__voci a{
  text-decoration:none;font-size:calc(.72rem * var(--corpo));font-weight:500;
  letter-spacing:calc(.16em * var(--tracc));text-transform:uppercase;
  color:var(--su-scuro-2);transition:color var(--sedicesimo) var(--arco);
}
.piede__voci a:hover{color:var(--oro-luce)}

/* ============================================================
   ⑭ IL NERO COME SALA
   Un fondale nero è piatto. Una sala no: ha una volta più chiara
   in alto, gli angoli che sprofondano, e una pozza di luce calda
   che si sposta di sezione in sezione. Sopra a tutto una grana
   finissima: toglie le fasce dalle sfumature e fa sembrare fondo
   e fotografie impressionati sulla stessa pellicola.
   ============================================================ */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -12%,
      color-mix(in srgb, var(--nero) 82%, #ffffff) 0%,
      var(--nero-2) 42%,
      var(--nero) 100%);
}
/* la grana: un solo velo fisso, niente immagini, niente peso */
body::after{
  content:"";position:fixed;inset:-50%;z-index:-1;pointer-events:none;
  opacity:.028;mix-blend-mode:overlay;
  background-image:
    repeating-conic-gradient(#fff 0% 25%, #000 0% 50%);
  background-size:3px 3px;
}
@media (prefers-reduced-motion:reduce){ body::after{opacity:.02} }

/* ogni sezione ha la sua pozza di luce, e le pozze si alternano:
   scorrendo, la luce passa da sinistra a destra e mai due schermate
   consecutive sono illuminate allo stesso modo */
.posa,.soglia,.mosaico,.sala,.film,.giostra{position:relative;isolation:isolate}
.posa::before,.mosaico::before,.sala::before,.film::before{
  content:"";position:absolute;inset:-10% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(68% 54% at var(--fuoco,28%) 38%,
    rgba(var(--rgb-acc),.055) 0%, rgba(var(--rgb-acc),.018) 42%, transparent 72%);
}
.posa:nth-of-type(even)::before{--fuoco:74%}
.mosaico::before{--fuoco:62%}
.sala::before{--fuoco:34%}
.film::before{--fuoco:52%}

/* ============================================================
   ⑮ LE FOTOGRAFIE PRENDONO PESO
   Prima erano rettangoli incollati: bordo netto, zero ombra, zero
   appoggio. Ora hanno un filo di luce sul bordo alto, un'ombra di
   contatto sotto, e una sola gradazione — interni caldi, palchi blu
   e bianco e nero devono sembrare la stessa mano.
   ============================================================ */
.stacco__foto,.tessera,.lastra,.cornice,.film__schermo,.stacco--video,.riquadro{
  border-radius:2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 34px 70px -30px rgba(0,0,0,.95),
    0 2px 0 rgba(var(--rgb-acc),.09);
}
/* il riflesso obliquo: la luce di sala che scivola sul vetro */
.stacco__foto::before,.tessera::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(202deg,rgba(255,255,255,.07) 0%,transparent 38%);
}
/* una sola temperatura per tutte: al tocco torna il colore pieno */
.stacco__foto img,.tessera img,.lastra img{
  filter:brightness(.88) saturate(.86) contrast(1.04);
}
.stacco__foto:hover img,.tessera:hover img,
.stacco__foto:focus-visible img,.tessera:focus-visible img{filter:none}

/* ============================================================
   ⑯ LETTERE DI CHIAMATA E SEGNO DI RESPIRO
   Come in una partitura d'orchestra: ogni sezione si apre con la
   sua lettera dentro un quadrato dorato, e fra una sezione e
   l'altra c'è la virgola del fiato.
   ============================================================ */
.occhiello[data-lettera]{display:flex;align-items:center;gap:.85rem}
.occhiello[data-lettera]::before{
  content:attr(data-lettera);flex:none;
  display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;
  border:1px solid var(--oro);color:var(--oro-luce);
  font-family:var(--display);font-weight:400;font-size:.85rem;letter-spacing:0;
  text-transform:none;
}
/* il respiro: un filetto d'oro interrotto al centro dalla virgola del fiato */
.respiro{
  --colore:rgba(var(--rgb-acc),.34);
  display:flex;align-items:center;justify-content:center;gap:1rem;
  max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  padding-block:clamp(1.6rem,4vw,2.8rem);
}
.respiro::before,.respiro::after{
  content:"";flex:1 1 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--colore));
}
.respiro::after{background:linear-gradient(270deg,transparent,var(--colore))}
.respiro i{
  flex:none;width:14px;height:16px;position:relative;display:block;
}
/* la virgola del fiato, disegnata: due archi che si assottigliano */
.respiro i::before{
  content:"";position:absolute;inset:0;
  border-right:1.5px solid var(--oro);
  border-radius:0 60% 0 0;
  transform:rotate(6deg);
}

/* ============================================================
   ⑰ L'ACCORDATURA — la firma, in fondo alla pagina
   Il monogramma apre in silenzio, il diapason chiude con un suono.
   ============================================================ */
.accordo{
  display:grid;justify-items:center;gap:1.1rem;
  padding-block:clamp(3rem,7vw,5rem);
  border-top:1px solid var(--filo-chiaro);
  margin-top:clamp(3rem,7vw,5rem);
}
.accordo__tasto{
  width:64px;height:64px;display:grid;place-items:center;
  background:none;border:1px solid rgba(var(--rgb-acc),.34);border-radius:50%;
  color:var(--oro-luce);cursor:pointer;
  transition:border-color var(--mezza) var(--arco),background-color var(--mezza) var(--arco),
             transform var(--sedicesimo) var(--arco);
}
.accordo__tasto:hover{border-color:var(--oro);background:rgba(var(--rgb-acc),.1)}
.accordo__tasto:active{transform:scale(.94)}
.accordo.is-suona .accordo__tasto{border-color:var(--oro);background:rgba(var(--rgb-acc),.16)}
.accordo__tasto svg{width:26px;height:60px;display:block;overflow:visible}
.accordo__tasto path{
  fill:none;stroke:currentColor;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
}
/* i rebbi si aprono di un soffio mentre suona: il diapason vibra davvero */
.accordo.is-suona .accordo__tasto svg{animation:rebbi 2.2s var(--arco)}
@keyframes rebbi{
  0%,100%{transform:scaleX(1)}
  8%{transform:scaleX(1.055)}
  22%{transform:scaleX(.975)}
  46%{transform:scaleX(1.018)}
}
.accordo canvas{width:min(100%,520px);height:40px;display:block}
.accordo__nota{
  margin:0;font-family:var(--testo);font-size:calc(.62rem * var(--corpo));font-weight:500;
  letter-spacing:calc(.28em * var(--tracc));text-transform:uppercase;
  color:var(--ink-3);transition:color var(--mezza) var(--arco);
}
.accordo.is-suona .accordo__nota{color:var(--oro-luce)}
.accordo__invito{
  margin:0;font-family:var(--testo);font-size:calc(.68rem * var(--corpo));font-weight:500;
  letter-spacing:calc(.2em * var(--tracc));text-transform:uppercase;color:var(--ink-3);
}
@media (prefers-reduced-motion:reduce){ .accordo.is-suona .accordo__tasto svg{animation:none} }

/* ============================================================
   ⑱ I TITOLI SALGONO PAROLA PER PAROLA
   Non appaiono più tutti insieme: salgono da sotto una feritoia,
   una parola alla volta, e la parola in corsivo dorato arriva per
   ultima e più lenta — la nota che risolve la frase.
   ============================================================ */
.par{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em}
.par > i{
  display:inline-block;font-style:inherit;
  transform:translate3d(0,110%,0);
  transition:transform var(--lunga) var(--arco);
  transition-delay:calc(var(--i) * 62ms);
}
.is-scritto .par > i{transform:none}
/* la parola dorata prende un respiro in più: entra per ultima */
.par > i > em{font-style:italic;color:var(--oro-luce)}
.par:has(em) > i{transition-duration:calc(var(--lunga) + var(--mezza));
  transition-delay:calc(var(--i) * 62ms + var(--sedicesimo))}
@media (prefers-reduced-motion:reduce){
  .par > i{transform:none !important;transition:none}
}

/* ============================================================
   ⑲ TUTTO RISPONDE COME UN TASTO
   Fotografie, blocchi e pulsanti si abbassano sotto il dito come
   un tasto di pianoforte, e risalgono con un rimbalzo corto.
   ============================================================ */
.stacco__foto,.tessera,.riquadro,.film__schermo,.stacco--video,.btn,.accordo__tasto{
  will-change:transform;
}
.stacco__foto:active,.tessera:active,.riquadro:active,
.film__schermo:active,.stacco--video:active,.btn:active{
  transform:translate3d(0,3px,0) scale(.994);
  transition-duration:var(--sedicesimo);
}

/* i blocchi della posa si accendono uno dopo l'altro, come tasti premuti
   in sequenza: sopra ciascuno la linea dorata si disegna da sinistra */
.posa__voce::before{transform:scaleX(0);transform-origin:left;
  transition:transform var(--battuta) var(--arco)}
.posa.is-dentro .posa__voce::before{transform:scaleX(1)}
.posa.is-dentro .posa__voce:nth-child(2)::before{transition-delay:90ms}
.posa.is-dentro .posa__voce:nth-child(3)::before{transition-delay:180ms}
.posa.is-dentro .posa__voce:nth-child(4)::before{transition-delay:270ms}
.posa.is-dentro .posa__voce:nth-child(5)::before{transition-delay:360ms}
.posa.is-dentro .posa__voce:nth-child(6)::before{transition-delay:450ms}
@media (prefers-reduced-motion:reduce){
  .posa__voce::before{transform:scaleX(1);transition:none}
}

/* ============================================================
   ⑳ GERARCHIA NELL'APERTURA
   Due pulsanti gemelli sono due inviti che si annullano. Uno chiama,
   l'altro accompagna.
   ============================================================ */
.btn--pieno{
  background:var(--oro);border-color:var(--oro);color:#0A0A0A !important;
}
.btn--pieno::after{background:var(--oro-luce)}
.btn--pieno:hover{color:#0A0A0A !important}
.btn--nudo{
  border:0;padding-inline:0;padding-block:1.05rem;
  background-image:linear-gradient(var(--oro),var(--oro));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
  transition:background-size var(--mezza) var(--arco),color var(--mezza) var(--arco);
}
.btn--nudo::after{display:none}
.btn--nudo:hover{background-size:100% 1px;color:var(--oro-luce) !important}
@media (hover:hover){
  .btn--nudo{background-size:0% 1px}
  .btn--nudo:hover{background-size:100% 1px}
}

/* ---------- la chiusa: l'ultima schermata, un palcoscenico nero ---------- */
.chiusa{
  background:var(--nero);position:relative;isolation:isolate;
  padding-block:clamp(7rem,17vh,12rem) clamp(3rem,7vw,5rem);
}
.chiusa::before{
  content:"";position:absolute;inset:-10% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(64% 52% at 50% 46%,
    rgba(var(--rgb-acc),.06) 0%, rgba(var(--rgb-acc),.02) 44%, transparent 72%);
}
.chiusa h2{color:var(--titolo-scuro);font-size:clamp(2.2rem,6vw,4.4rem);max-width:18ch}
.chiusa h2 em{font-style:italic;color:var(--oro-luce)}
.chiusa .guida{margin-top:clamp(1.4rem,3vw,2rem);max-width:44ch}
.chiusa .nota{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.2rem;
  border-top:1px solid var(--filo-chiaro);max-width:44ch;
  color:var(--ink-3);font-size:.95rem;
}

/* ============================================================
   ㉑ CORREZIONI DALL'AUDIT
   ============================================================ */
/* i bersagli da toccare erano alti 20px: sotto il minimo per un dito */
.menu a{padding-block:.55rem;display:inline-flex;align-items:center}
.menu .lingua{padding-block:.35rem}
.piede__voci a{padding-block:.5rem;display:inline-flex;align-items:center}
.piede a{padding-block:.2rem;display:inline-block}

/* la testata, quando si posa, deve coprire davvero quello che le passa sotto */
.top.is-fissa{
  background:rgba(var(--rgb-chiaro),.96);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(var(--rgb-acc),.18);
}

/* ============================================================
   ㉒ IL SIPARIO — il menù da telefono
   Con sette pagine, «Contatti · EN» non è una navigazione.
   Si alza come un sipario: le voci entrano una dopo l'altra.
   ============================================================ */
.apri-menu{
  display:none;margin-left:auto;width:44px;height:44px;padding:0;
  background:none;border:0;cursor:pointer;position:relative;z-index:120;
}
.apri-menu i{
  position:absolute;left:11px;width:22px;height:1px;background:var(--su-scuro-1);
  transition:transform var(--mezza) var(--arco),background-color var(--mezza) var(--arco);
}
.apri-menu i:first-child{top:19px}
.apri-menu i:last-child{top:25px}
.top.is-fissa .apri-menu i{background:var(--ink)}
body.sipario-aperto .apri-menu i{background:var(--oro-luce)}
body.sipario-aperto .apri-menu i:first-child{transform:translateY(3px) rotate(45deg)}
body.sipario-aperto .apri-menu i:last-child{transform:translateY(-3px) rotate(-45deg)}

.sipario{
  position:fixed;inset:0;z-index:110;display:grid;align-content:center;
  gap:.2rem;padding:clamp(4rem,14vh,7rem) var(--pad);
  background:rgba(var(--rgb-scuro),.985);backdrop-filter:blur(20px);
  opacity:0;pointer-events:none;transition:opacity var(--mezza) var(--arco);
}
.sipario[hidden]{display:none}
body.sipario-aperto .sipario{opacity:1;pointer-events:auto}
.sipario nav{display:grid}
.sipario a{
  display:flex;align-items:baseline;gap:1rem;
  padding-block:clamp(.55rem,1.6vh,.9rem);text-decoration:none;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.7rem,7.5vw,2.6rem);line-height:1.12;color:var(--titolo-scuro);
  border-bottom:1px solid var(--filo-chiaro);
  opacity:0;transform:translateY(18px);
  transition:opacity var(--battuta) var(--arco),transform var(--battuta) var(--arco),color var(--mezza) var(--arco);
}
body.sipario-aperto .sipario a{opacity:1;transform:none}
.sipario a:nth-child(1){transition-delay:60ms}
.sipario a:nth-child(2){transition-delay:120ms}
.sipario a:nth-child(3){transition-delay:180ms}
.sipario a:nth-child(4){transition-delay:240ms}
.sipario a:nth-child(5){transition-delay:300ms}
.sipario a:nth-child(6){transition-delay:360ms}
.sipario a:hover,.sipario a:focus-visible{color:var(--oro-luce)}
.sipario a em{
  font-family:var(--testo);font-style:normal;font-weight:500;
  font-size:.62rem;letter-spacing:calc(.2em * var(--tracc));color:var(--oro-scuro);
  flex:none;width:2.2rem;
}
.sipario__lingua{
  justify-self:start;margin-top:clamp(1.4rem,4vh,2.4rem);
  text-decoration:none;border:1px solid rgba(var(--rgb-acc),.5);
  padding:.6rem 1.2rem;color:var(--oro-luce);
  font-family:var(--testo);font-size:calc(.7rem * var(--corpo));font-weight:500;
  letter-spacing:calc(.2em * var(--tracc));text-transform:uppercase;
  opacity:0;transition:opacity var(--battuta) var(--arco) 420ms;
}
body.sipario-aperto .sipario__lingua{opacity:1}
body.sipario-aperto{overflow:hidden}
/* col menu o con una foto aperta il pannello «Aa» non deve restare a galla:
   sono due tende a tutto schermo, dietro non ci sta niente. */
body.sipario-aperto #car-apri,body.sipario-aperto #car-pan,
body.lente-aperta #car-apri,body.lente-aperta #car-pan{display:none}

@media (max-width:880px){
  .apri-menu{display:block}
  .menu{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sipario a,.sipario__lingua{transition:none;opacity:1;transform:none}
}

/* 🔴 A sipario aperto la testata deve salire SOPRA il sipario, se no la × per
   chiudere resta sotto: `.top` ha un suo z-index e fa da contenitore, quindi
   il pulsante non può scavalcarlo da solo. */
body.sipario-aperto .top{z-index:120;background:none;box-shadow:none;backdrop-filter:none}
body.sipario-aperto .top__marchio b{color:var(--titolo-scuro)}

/* una data non è un numero: sta in riga, non urla come una cifra sola */
.cifre--lunga b{font-size:clamp(1.7rem,3.6vw,2.6rem);letter-spacing:-.01em}

/* il marchio in testata è un link: da telefono deve essere afferrabile col dito */
.top__marchio{min-width:44px;min-height:44px;padding-right:.3rem}

/* 🔴 QUI c'era una riga che dava `position:relative` a .top e a .sipario per
   metterli sopra le note. Ma .top e .sipario sono FISSI: rimessi in flusso
   occupavano 808px e spingevano la hero — con tutta l'ouverture — sotto la
   piega. All'apertura si vedeva una fascia nera vuota e nient'altro.
   Le note non hanno bisogno di spostare niente: stanno dentro le sezioni
   scure, sotto il contenuto e sopra il nero della sezione. */