/* Sui monitor molto grandi la pagina non deve restare un'isola piccola in
   mezzo al vuoto: alzando la base in rem crescono titoli, testi e spaziature
   tutti insieme, senza ritoccare una clamp alla volta. */
@media(min-width:1800px){html{font-size:18px}}
@media(min-width:2200px){html{font-size:20px}}
@media(min-width:2800px){html{font-size:22px}}

/* ============================================================
   LA CAMERA DELLE MERAVIGLIE (e altre storie false)

   Impianto ripreso da Shopify Editions "The Renaissance Edition":
   titoli enormi in bold con tracking negativo, narrativa in serif
   grande con capolettera, fondale unico dietro tutta la pagina.
   Navigazione: barra in alto, nessuna colonna laterale.
   Palette: nero, carta e oro. Immagini a colori.
   ============================================================ */

:root{
  --nero:#000000;
  --pece:#0C0C0B;
  --pece-alto:#141312;

  --carta:#E7E0CE;                   /* carta di giornale ingiallita */
  --carta-cupa:#DED7C3;
  --carta-bordo:#DED5C0;                /* la carta lungo i bordi strappati */

  --avorio:#F4F1EA;
  --inchiostro:#22211C;
  --fumo:#8E877B;
  --fumo-scuro:#666057;
  --pietra-scura:#7A7266;

  --oro:#B79A63;
  --oro-chiaro:#DDC28A;
  --oro-carta:#6E5A31;

  --filo:rgba(183,154,99,.28);
  --filo-carta:rgba(26,24,21,.16);

  --rail:0px;                        /* nessuna colonna laterale */
  --gutter:clamp(18px,4.4vw,132px);  /* margine della pagina, generoso sui monitor grandi */
  --curva:cubic-bezier(.16,1,.3,1);          /* scattante: bottoni, teca */
  /* La curva sopra parte velocissima e frena di colpo: va bene su un click,
     ma su una comparsa legata allo scorrimento si legge come uno scatto.
     Questa sotto accelera e rallenta con calma. */
  --curva-morbida:cubic-bezier(.25,.58,.3,1);
  /* la dissolvenza con cui il bordo basso di una fotografia si scioglie nel
     fondo, da telefono: usata dalle scene e dalla testata degli artisti */
  --dissolvenza-basso:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.88) 62%,rgba(0,0,0,.55) 76%,rgba(0,0,0,.2) 90%,transparent 100%);
  /* la stessa cosa ai due capi: serve alla testata, dove anche il bordo alto
     della fotografia confina con il nero della pagina */
  /* I due capi di un fotogramma a tutta pagina: dove due fotografie si
     incontrano non c'e' una riga, c'e' un passaggio dal nero. Serve poco,
     il 9% per parte: l'immagine resta quella, spariscono solo i bordi. */
  --strappo-h:clamp(26px,3.2vw,46px);
  --sfumo-bordi:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 3.4%,#000 9%,#000 91%,rgba(0,0,0,.5) 96.6%,transparent 100%);
  --dissolvenza-doppia:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 4%,#000 11%,#000 46%,rgba(0,0,0,.88) 64%,rgba(0,0,0,.52) 78%,rgba(0,0,0,.18) 91%,transparent 100%);
  --freccia:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6h17M12 1l5.5 5L12 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* bordi di carta strappata, disegnati con rumore a piu' ottave */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{
  background:var(--nero);
  color:var(--avorio);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  font-size:clamp(15px,.98vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--oro);color:var(--nero)}
:focus-visible{outline:1px solid var(--oro-chiaro);outline-offset:4px}

/* ============================================================
   TIPOGRAFIA
   Titoli: bold, interlinea corta, tracking negativo, non maiuscoli.
   Narrativa: serif grande, interlinea corta, capolettera.
   ============================================================ */
/* I caratteri della prova: tutti i titoli in Bodoni Moda, il serif ad
   alto contrasto. Minuscolo e maiuscolo come si scrive, niente
   tutto-maiuscolo: il Bodoni vive del contrasto fra aste spesse e
   filetti, e in maiuscolo diventa un'insegna. */
.display,.titolone{
  font-family:'Bodoni Moda',Georgia,'Times New Roman',serif;
  font-weight:400;
  line-height:.96;
  letter-spacing:-.022em;
  text-transform:none;
  text-wrap:balance;
}
.t-xl{font-size:clamp(2.7rem,8.6vw,7.4rem)}
.t-l{font-size:clamp(2.3rem,5.6vw,4.5rem)}
.t-m{font-size:clamp(1.6rem,3vw,2.45rem)}

.narrativa,.narrativa p{
  font-family:'Instrument Serif',Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(1.35rem,3vw,2.7rem);
  line-height:1.04;
  letter-spacing:-.028em;
}
.narrativa{max-width:22ch}
.narrativa.larga{max-width:none;width:min(100%,75%)}
.narrativa p + p{margin-top:.6em}

/* testo corrente, dove serve leggere molto */
.corpo{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.2rem,1.75vw,1.62rem);
  line-height:1.45;letter-spacing:-.012em;max-width:54ch;
}
.corpo p + p{margin-top:.75em}
em{font-style:italic}

/* etichette e microtesti */
.occhiello{
  font-family:'Archivo',sans-serif;font-weight:500;
  font-size:.84rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fumo);
}
.date{
  margin-top:26px;
  font-family:'Archivo',sans-serif;font-weight:500;
  font-size:clamp(.95rem,1.15vw,1.2rem);letter-spacing:.06em;color:var(--oro-chiaro);
}
.blocco.carta .date{color:var(--oro-carta)}
.minuscolo{font-family:'Archivo',sans-serif;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fumo)}

.capolettera::first-letter{
  float:left;
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:3.3em;line-height:.76;
  padding:.04em .1em 0 0;
  color:inherit;
}

/* nessun filetto di separazione: lo stacco lo fa lo spazio */

/* ============================================================
   LA BARRA IN ALTO — logo al centro, nessun filo
   ============================================================ */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  padding:16px var(--gutter);color:var(--avorio);
  transition:transform .55s var(--curva);
}
/* Nessuno sfondo sotto la barra: la leggibilita' sta nelle ombre delle singole
   voci, cosi' niente taglia la fotografia. */
.barra .voci a,.barra .marchio{text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 18px rgba(0,0,0,.8)}

/* Sopra una pagina di carta quelle ombre non servono e il grigio chiaro non si
   legge: la barra si rovescia in inchiostro. La classe la mette site.js
   guardando che cosa c'e' sotto la barra. */
.barra.su-carta .voci a,.barra.su-carta .marchio{text-shadow:0 1px 2px rgba(231,224,206,.9)}
.barra.su-carta .voci a{color:var(--pietra-scura)}
.barra.su-carta .voci a:hover,.barra.su-carta .voci a[aria-current="page"]{color:var(--inchiostro)}
.barra.su-carta .marchio img{filter:invert(1) brightness(.22)}
.barra.su-carta .biglietti{background:var(--inchiostro);color:var(--carta);box-shadow:0 2px 14px rgba(34,33,28,.25)}
.barra.su-carta .biglietti:hover,.barra.su-carta .biglietti:focus-visible{background:#15140F}
/* Scorrendo in giu' la barra si ritira, ma il bottone dei biglietti resta:
   mentre si legge e' l'unica cosa che serve davvero a portata di pollice. */
.barra .voci,.barra .marchio{transition:transform .55s var(--curva),opacity .35s ease}
.barra.su .voci,.barra.su .marchio{transform:translateY(-240%);opacity:0;pointer-events:none}
.barra.su .biglietti{box-shadow:0 10px 30px rgba(0,0,0,.45)}
.marchio{display:flex;justify-content:center;line-height:0}
.marchio img{height:clamp(30px,3vw,44px);width:auto;transition:opacity .4s ease}
.marchio:hover img{opacity:.72}
/* Sulla home il marchio della barra resta nascosto finche' si vede
   l'apertura: altrimenti il segno comparirebbe due volte nella stessa
   schermata. Prima compariva di colpo a 80px di scorrimento, e lo scatto
   si vedeva; ora cresce e si accende seguendo il marchio grande che esce
   dall'alto, con la stessa curva morbida delle altre comparse. Opacita' e
   scala stanno sull'immagine e non sul contenitore, perche' al contenitore
   serve la sua trasformazione per ritirarsi su insieme alla barra. */
.marchio.in-attesa{pointer-events:none}
.barra.solida .marchio.in-attesa{pointer-events:auto}
.marchio.in-attesa img{
  opacity:0;transform:scale(.72);transform-origin:50% 50%;
  transition:none;will-change:opacity,transform;
}
html:not(.js) .marchio.in-attesa img{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .marchio.in-attesa img{transform:none}
}
.voci{display:flex;gap:clamp(14px,2.4vw,38px);align-items:center;white-space:nowrap}
.voci a{
  font-family:'Archivo',sans-serif;font-weight:500;
  font-size:.92rem;letter-spacing:-.01em;color:var(--fumo);transition:color .35s ease;
}
.voci a:hover,.voci a[aria-current="page"]{color:var(--avorio)}
.azione{display:flex;justify-content:flex-end}

.colonna{position:relative}
.fuori{width:100%;margin-left:0}

@media(max-width:760px){
  .barra{padding:12px var(--gutter);gap:10px}
  .voci{gap:14px}
  .voci a{font-size:.78rem}
  .marchio img{height:26px}
  .barra .biglietti{padding:10px 15px;font-size:.7rem;gap:6px}
  .barra .biglietti::after{width:12px;height:8px}
}
/* sotto i 600px il marchio al centro non ci sta: resta nell'apertura,
   nella barra tengono il posto le due voci e il bottone */
@media(max-width:600px){
  .barra .marchio{visibility:hidden}
  .voci a{font-size:.8rem}
  .barra .biglietti{padding:10px 15px;font-size:.7rem}
}
@media(max-width:400px){
  .barra{padding:10px var(--gutter);gap:8px}
  .voci{gap:11px}
  .voci a{font-size:.72rem}
  .barra .biglietti{padding:9px 12px;font-size:.64rem;gap:5px}
  .barra .biglietti::after{width:11px;height:7px}
}

/* ---------- il bottone dei biglietti ----------
   Capsula piena: e' l'unica azione della pagina, deve staccare dal fondo
   senza cornici. La freccia avanza al passaggio del mouse. */
.biglietti{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border:0;border-radius:999px;
  background:var(--avorio);color:var(--pece);
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:.86rem;letter-spacing:-.01em;white-space:nowrap;
  transition:background .4s var(--curva),transform .4s var(--curva),box-shadow .4s var(--curva);
  box-shadow:0 2px 18px rgba(0,0,0,.35);
}
.biglietti::after{
  content:"";width:15px;height:9px;flex:none;
  background:currentColor;
  -webkit-mask:var(--freccia) center/contain no-repeat;mask:var(--freccia) center/contain no-repeat;
  transition:transform .4s var(--curva);
}
.biglietti:hover,.biglietti:focus-visible{background:#FFFDF8;transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.biglietti:hover::after,.biglietti:focus-visible::after{transform:translateX(4px)}
.biglietti.grande{padding:19px 36px;font-size:1rem;gap:12px}
.biglietti.grande::after{width:18px;height:11px}
/* sulla carta si inverte: inchiostro pieno, scritta color carta */
.biglietti.chiara{background:var(--inchiostro);color:var(--carta);box-shadow:0 2px 14px rgba(34,33,28,.22)}
.biglietti.chiara:hover,.biglietti.chiara:focus-visible{background:#15140F;box-shadow:0 8px 24px rgba(34,33,28,.3)}

/* ============================================================
   MOVIMENTO
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  /* un filo d'aria sopra e sotto: gli accenti e le code delle lettere
     del Bodoni escono dal quadratello e la finestrella le taglierebbe */
  .mask{display:block;overflow:hidden;
    padding:.1em 0 .26em;margin:-.1em 0 -.26em}
  .mask > i{display:block;font-style:inherit;transform:translateY(135%);
    transition:transform 1.5s var(--curva-morbida);transition-delay:var(--d,0s)}
  .mask.in > i{transform:none}
  .rivela{opacity:0;transform:translateY(34px);
    transition:opacity 1.5s var(--curva-morbida),transform 1.4s var(--curva-morbida);
    transition-delay:var(--d,0s)}
  .rivela.in{opacity:1;transform:none}
  .sipario{clip-path:inset(0 0 100% 0);transition:clip-path 1.7s var(--curva-morbida);transition-delay:var(--d,0s)}
  .sipario.in{clip-path:inset(0 0 0 0)}
  .dissolve{opacity:0;transition:opacity 1.9s var(--curva-morbida);transition-delay:var(--d,0s)}
  .dissolve.in{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.velo-pagina{
  position:fixed;inset:0;z-index:200;background:var(--nero);
  pointer-events:none;transform:translateY(100%);transition:transform .68s var(--curva);
}
html.js .velo-pagina{transform:translateY(0)}
html.js.entrata .velo-pagina{transform:translateY(-100%)}
html.js.uscita .velo-pagina{transform:translateY(0)}

.cursore{
  position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--oro-chiaro);pointer-events:none;z-index:210;
  transform:translate(-50%,-50%);opacity:.85;display:none;
  transition:width .35s ease,height .35s ease,background .35s ease,opacity .35s ease;
}
@media (hover:hover) and (pointer:fine){.cursore{display:block}}
.cursore.largo{width:54px;height:54px;background:rgba(183,154,99,.24)}
.cursore.via{opacity:0}

/* ============================================================
   IL FONDALE — un solo livello fisso dietro tutta la pagina
   ============================================================ */
.fondale{
  position:sticky;top:0;left:0;z-index:0;
  width:100%;height:100svh;margin-bottom:-100svh;
  overflow:hidden;pointer-events:none;background:var(--nero);
}
.quadro{position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1);will-change:opacity,transform}
/* quando il motore scrive l'opacita' a ogni fotogramma la transizione CSS
   darebbe battaglia: qui si spegne e il passaggio lo guida lo scorrimento */
.fondale.continuo .quadro{transition:none}
.quadro.acceso{opacity:1}
.quadro img,.quadro video{width:100%;height:100%;object-fit:cover;object-position:center 50%;transform-origin:center 46%;will-change:transform;display:block;transition:transform .5s linear}
.quadro video{object-position:center 62%}

/* ---------- l'avvicinamento della locandina ----------
   due scale annidate: qui dentro la corsa d'ingresso, sull'immagine lo zoom
   legato allo scorrimento. Moltiplicandosi non si danno fastidio. */
.avvicina{position:absolute;inset:0;transform-origin:center 42%;
  animation:avvicinamento 24s cubic-bezier(.18,.62,.26,1) both,schiarita 2.6s ease-out both}
.avvicina img[data-apertura]{object-position:center 30%;transform-origin:center 36%}
@keyframes avvicinamento{from{transform:scale(1)}to{transform:scale(1.11)}}
@keyframes schiarita{from{opacity:0}to{opacity:1}}
.fondale-velo{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(0,0,0,.66) 0%,rgba(0,0,0,.2) 34%,rgba(0,0,0,.14) 62%,rgba(0,0,0,.44) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.06) 32%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.6) 100%);
}

/* ---------- apertura ---------- */
.hero{position:relative;z-index:1;height:210vh;pointer-events:none}
.hero-dentro{
  /* min-height e non height: su schermi bassi (telefono in orizzontale) il
     contenuto cresce invece di traboccare sopra la barra */
  position:sticky;top:0;min-height:100svh;
  /* griglia e non flex: il marchio sta in alto e il blocco del titolo si
     centra da solo nello spazio che avanza */
  display:grid;grid-template-rows:auto 1fr;justify-items:center;text-align:center;
  /* margini laterali stretti: il titolo deve poter andare da lato a lato */
  padding:clamp(46px,6vh,80px) clamp(12px,3vw,46px) clamp(44px,6vh,78px);
}
/* il blocco del titolo scende verso il basso: i due volti della locandina
   restano liberi nella meta' alta dello schermo */
.hero-basso{align-self:end;width:100%;padding-bottom:2.4vh}
.hero-dentro::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(30% 22% at 50% 15%,rgba(6,6,5,.6) 0%,rgba(6,6,5,.34) 46%,rgba(6,6,5,.06) 78%,transparent 100%),radial-gradient(76% 46% at 50% 100%,rgba(6,6,5,.72) 0%,rgba(6,6,5,.4) 44%,transparent 100%);
}
.hero-dentro a,.hero-dentro button{pointer-events:auto}
.hero-marchio{width:clamp(88px,8.6vw,8.4rem);height:auto;margin:0}
/* da lato a lato, ma con due tetti: 1700px perche' oltre la grafica
   comincia a perdere nitidezza (l'originale e' 1371px), e 118vh perche' su
   uno schermo basso e largo la scritta deve restare nello spazio fra i due
   volti della locandina invece di passarci sopra */
.hero-titolo{width:min(84vw,660px,calc(46svh * 1.177));height:auto;margin:0 0 clamp(14px,2vh,24px)}
.hero-basso{display:flex;flex-direction:column;align-items:center}
/* L'apertura resta muta finche' l'intro non e' finita: poi marchio, titolo,
   frase e bottone salgono uno dopo l'altro.
   Nessun `filter` su questi PNG: un drop-shadow o un blur animato, dentro un
   livello composito, su alcune GPU li fa rasterizzare come rettangoli bianchi. */
.hero-dentro.attesa .hero-marchio,
.hero-dentro.attesa .hero-basso > *,
.hero-dentro.attesa .scrolla{opacity:0}
.hero-dentro.svelato .hero-marchio,
.hero-dentro.svelato .hero-basso > *,
.hero-dentro.svelato .scrolla{
  /* dissolvenza lunga e senza scatti: curva quasi lineare in uscita, corsa
     breve, ritardi piccoli, cosi' le scritte salgono praticamente insieme */
  animation:comparsa 2.6s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:var(--d,0s);
}
@keyframes comparsa{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.hero-dentro .scrolla{transform:translateX(-50%)}
.hero-dentro.svelato .scrolla{animation-name:comparsa-scrolla}
@keyframes comparsa-scrolla{
  from{opacity:0;transform:translateX(-50%) translateY(10px)}
  to{opacity:1;transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .hero-dentro.attesa .hero-marchio,
  .hero-dentro.attesa .hero-basso > *,
  .hero-dentro.attesa .scrolla{opacity:1}
  .hero-dentro.svelato .hero-marchio,
  .hero-dentro.svelato .hero-basso > *,
  .hero-dentro.svelato .scrolla{animation:none}
}
.hero-claim{
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(1.3rem,2.6vw,2.2rem);line-height:1.15;letter-spacing:-.028em;
  max-width:26ch;color:var(--avorio);
}
.hero-dati{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;margin-top:26px;
  font-family:'Archivo',sans-serif;font-weight:500;font-size:.92rem;color:var(--oro-chiaro);
}
.hero-dati .punto{color:var(--oro);opacity:.6}
.hero-azione{margin-top:30px}
.scrolla{
  position:absolute;left:50%;bottom:26px;z-index:2;
  font-family:'Archivo',sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fumo);
  display:flex;align-items:center;gap:12px;
}
.scrolla i{display:block;width:46px;height:1px;background:linear-gradient(to right,var(--oro),transparent);transform-origin:left}
@media (prefers-reduced-motion:no-preference){
  .scrolla i{animation:filo 2.6s ease-in-out infinite}
  @keyframes filo{0%,100%{transform:scaleX(.4);opacity:.5}50%{transform:scaleX(1);opacity:1}}
}


/* ---------- capitoli ---------- */
.capitolo{position:relative;z-index:1;height:230vh;background:transparent;pointer-events:none}
.capitolo-dentro{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;gap:18px;
  padding:0 var(--gutter);will-change:transform,opacity;
}
.capitolo .indice{
  font-family:'Archivo',sans-serif;font-weight:500;font-size:.86rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--oro-chiaro);
}
.capitolo .parola{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(3.4rem,13.4vw,12rem);line-height:.86;letter-spacing:-.038em;
  color:var(--avorio);text-shadow:0 6px 50px rgba(0,0,0,.8);
}
.capitolo .riga{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.3rem,2.9vw,2.5rem);line-height:1.06;letter-spacing:-.028em;
  color:var(--avorio);max-width:20ch;text-shadow:0 4px 30px rgba(0,0,0,.8);
}
@media(max-width:760px){.capitolo{height:190vh}}

/* ============================================================
   BORDO DI CARTA STRAPPATA
   Il foglio non ha una striscia incollata sopra: e' il foglio stesso
   a essere ritagliato da due maschere alpha (disegnate con rumore a
   piu' ottave + fibre), cosi' la grana della carta arriva fino al filo
   dello strappo. L'ombra portata segue la maschera, quindi cade esatta
   sul bordo frastagliato e la carta sembra appoggiata sopra la scena.
   ============================================================ */
.strappo{position:relative}
/* Lo strappo non e' piu' una maschera sulla sezione intera con sopra
   un'ombra filtrata: quella costringeva il browser a ridisegnare e
   risfumare tutto il foglio, alto anche duemila pixel, a ogni
   fotogramma di scorrimento, e si sentiva (la pagina passava da 19 a
   35 fotogrammi al secondo togliendo la sola ombra).

   Adesso il bordo frastagliato, la sua ombra e il filo chiaro della
   carta strappata stanno dentro due strisce alte quanto lo strappo,
   disegnate una volta sola e salvate come immagini. La sezione tiene
   un bordo trasparente alto quanto lo strappo e ritaglia il proprio
   fondo dentro quel bordo, cosi' nei buchi dello strappo si vede la
   fotografia sotto e non la carta. */
.blocco.strappo{
  border-top:var(--strappo-h) solid transparent;
  border-bottom:var(--strappo-h) solid transparent;
  background-clip:padding-box;
  padding-top:clamp(58px,9.5vh,118px);
  padding-bottom:clamp(58px,9.5vh,118px);
  margin-top:calc(-1 * var(--strappo-h));
  margin-bottom:calc(-1 * var(--strappo-h));
  z-index:3;
}
.strappo.carta::before,.strappo.carta::after{
  content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:2;
  background-repeat:no-repeat;background-size:100% 100%;
}
/* le due strisce stanno sul bordo trasparente, non dentro l'imbottitura:
   per un figlio assoluto lo zero e' il bordo interno, quindi vanno tirate
   fuori di uno strappo (e di due, in basso, perche' l'ombra cade sulla
   sezione seguente) */
/* Un pixel di sovrapposizione sulla carta: lo strappo e' alto 3.2vw,
   cioe' quasi sempre un numero con la virgola, e il suo bordo cadeva a
   meta' pixel. Dove il browser arrotondava restava una riga sottile che
   lasciava vedere la fotografia sotto. */
.strappo.carta::before{
  top:calc(-1 * var(--strappo-h));height:calc(var(--strappo-h) + 1px);
  background-image:url(strappo-alto.webp);
}
.strappo.carta::after{
  bottom:calc(-2 * var(--strappo-h));height:calc(var(--strappo-h) * 2 + 1px);
  background-image:url(strappo-basso.webp);
}
/* la scena accanto non deve mai salire sopra la carta */
.scena,.galleria,.nastro-video,.citazione{z-index:1}

.blocco,.fascia,.citazione,.vetrina-sez,.richiamo,.piede{position:relative;z-index:1}

/* ---------- il calendario delle dodici sere ---------- */
.calendario{
  margin-top:clamp(40px,5vw,66px);
  display:grid;grid-template-columns:repeat(5,1fr);
  /* i filetti stanno sulle celle e non nei vuoti della griglia: cosi' un
     riquadro spaiato non lascia una fascia di colore diverso */
  border-top:1px solid var(--filo-carta);border-left:1px solid var(--filo-carta);
}
.sera{
  border-right:1px solid var(--filo-carta);border-bottom:1px solid var(--filo-carta);
  padding:clamp(18px,2vw,26px) clamp(14px,1.6vw,20px);
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
}
.sera .g{font-family:'Archivo',sans-serif;font-weight:500;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--pietra-scura)}
.sera .n{font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(2.2rem,3.4vw,3.1rem);line-height:.95;letter-spacing:-.04em;color:var(--inchiostro)}
.sera .m{font-family:'Archivo',sans-serif;font-size:.82rem;letter-spacing:.02em;color:#57514A}
.sera .ore{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sera .o{
  display:inline-block;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.86rem;letter-spacing:.01em;
  color:var(--oro-carta);border:1px solid var(--oro-carta);border-radius:999px;padding:5px 12px;
  transition:background .35s var(--curva),color .35s var(--curva),transform .35s var(--curva);
}
a.sera-o-placeholder{}
.sera a.o:hover,.sera a.o:focus-visible{
  background:var(--inchiostro);border-color:var(--inchiostro);color:var(--carta);
  transform:translateY(-1px);
}
@media(max-width:980px){.calendario{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.calendario{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.calendario{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   SEZIONI
   ============================================================ */
section{position:relative}
.blocco{padding:clamp(58px,9.5vh,118px) var(--gutter);background:var(--pece)}
.blocco.alt{background:var(--pece)}
.blocco.carta{
  color:var(--inchiostro);
  background-color:var(--carta);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"),
    radial-gradient(60% 40% at 12% 8%,rgba(150,120,70,.13),transparent 70%),
    radial-gradient(48% 34% at 88% 24%,rgba(150,120,70,.11),transparent 72%),
    radial-gradient(70% 44% at 40% 96%,rgba(140,112,64,.14),transparent 70%),
    linear-gradient(to bottom,rgba(160,132,80,.09),transparent 22%,transparent 78%,rgba(160,132,80,.12));
  background-blend-mode:multiply,multiply,multiply,multiply,normal;
  background-size:300px 300px,auto,auto,auto,auto;
}
.blocco.carta.strappo{
  /* Vicino ai due bordi strappati la carta ha un tono fisso (--carta-bordo):
     le macchie e le sfumature del foglio sono in percentuale, quindi il loro
     colore al bordo cambiava con la larghezza dello schermo e l'altezza della
     sezione, e la striscia dello strappo, che e' un'immagine, non poteva
     combaciare. Le due fasce coprono le macchie per 26px e poi le lasciano
     riaffiorare con una sfumatura lunga, che non si vede. La grana resta
     sopra a tutto, uguale ovunque. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"),
    linear-gradient(to bottom,var(--carta-bordo) 0,var(--carta-bordo) 26px,rgba(222,213,192,0) 170px),
    linear-gradient(to top,var(--carta-bordo) 0,var(--carta-bordo) 26px,rgba(222,213,192,0) 170px),
    radial-gradient(60% 40% at 12% 8%,rgba(150,120,70,.13),transparent 70%),
    radial-gradient(48% 34% at 88% 24%,rgba(150,120,70,.11),transparent 72%),
    radial-gradient(70% 44% at 40% 96%,rgba(140,112,64,.14),transparent 70%),
    linear-gradient(to bottom,rgba(160,132,80,.09),transparent 22%,transparent 78%,rgba(160,132,80,.12));
  background-blend-mode:multiply,normal,normal,multiply,multiply,multiply,normal;
  background-size:300px 300px,100% 100%,100% 100%,auto,auto,auto,auto;
}
.centro{text-align:center}
.centro .filetto{margin-left:auto;margin-right:auto}
.centro .occhiello::before{display:none}
/* Era .stretto{max-width:none}, cioe' una classe che non faceva
   niente: sulla pagina dello spettacolo i paragrafi correvano da un
   bordo all'altro dello schermo, in sans, lunghi il doppio di quanto
   un occhio segue senza perdere il capo della riga. */
.stretto{width:min(100%,70ch);margin-left:auto;margin-right:auto}
.stretto > .display,.stretto > .occhiello{text-align:center}
.stretto > div > p,.stretto > p{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.18rem,1.7vw,1.58rem);
  line-height:1.45;letter-spacing:-.012em;
}
.stretto > div > p + p,.stretto > p + p{margin-top:.75em}
.blocco.carta .stretto > div > p,.blocco.carta .stretto > p{color:#3A362F}
.blocco.alt .stretto > div > p,.blocco.alt .stretto > p{color:var(--fumo)}

/* inversioni sulla carta */
.blocco.carta .occhiello{color:var(--oro-carta)}
.blocco.carta .occhiello::before{background:var(--oro-carta)}
.blocco.carta .capolettera::first-letter{color:var(--oro-carta)}
.blocco.carta .link-oro{color:var(--oro-carta)}
.blocco.carta .link-oro::after{background:var(--oro-carta)}
.blocco.carta .carattere h3{color:var(--inchiostro)}
.blocco.carta .carattere .segno{stroke:var(--oro-carta)}
.blocco.carta .carattere p{color:#57514A}
.blocco.carta .duo figcaption{color:var(--pietra-scura)}
.blocco.carta .artista p,.blocco.carta .corpo{color:#3A362F}
.blocco.carta .artista .ruolo{color:var(--oro-carta)}
.blocco.carta .alloro span{color:var(--inchiostro)}
.blocco.carta .alloro svg{stroke:var(--oro-carta)}
.blocco.carta .manifesti figcaption{color:var(--pietra-scura)}
.blocco.carta .minuscolo{color:var(--pietra-scura)}

.fascia{
  padding:30px var(--gutter);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 46px;
}
/* sulla home la fascia galleggia sopra il fondale: nessun bordo netto,
   solo una velatura sfumata che tiene leggibile la riga */
.fascia.sopra-foto{
  justify-content:center;gap:16px 54px;padding:46px var(--gutter);
  background:linear-gradient(to bottom,transparent,rgba(4,4,3,.78) 30%,rgba(4,4,3,.82) 50%,rgba(4,4,3,.78) 70%,transparent);
}
.fascia.sopra-foto .dato{flex-direction:column;align-items:center;gap:7px;text-align:center}
.fascia.sopra-foto .k{font-size:.74rem;letter-spacing:.17em}
.fascia .dato{display:flex;align-items:baseline;gap:12px}
.fascia .k{font-family:'Archivo',sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fumo)}
.fascia .v{font-family:'Archivo',sans-serif;font-weight:600;font-size:1.18rem;letter-spacing:-.015em;color:var(--avorio)}

.duo{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(34px,5vw,86px);align-items:center}
.duo.rovescio .testo{order:2}

/* La foto non sta dentro un riquadro: sborda oltre il margine della pagina,
   e' piu' alta che larga, e dentro la cornice l'immagine e' sovradimensionata
   cosi' puo' scorrere in parallasse mentre si sale. */
.duo figure{position:relative;margin:0}
.duo figure .taglio{
  position:relative;overflow:hidden;aspect-ratio:4/4.7;
  clip-path:inset(0 0 100% 0);transition:clip-path 1.8s var(--curva-morbida);
}
.duo figure .taglio.in{clip-path:inset(0 0 0 0)}
.duo figure .taglio img{
  position:absolute;left:0;top:-9%;width:100%;height:118%;
  object-fit:cover;will-change:transform;
}
.duo:not(.rovescio) figure{margin-right:calc(var(--gutter) * -1)}
.duo.rovescio figure{margin-left:calc(var(--gutter) * -1)}
/* lo sbordo non supera mai il margine: oltre i 1500px usciva dalla pagina */
.duo:not(.rovescio) figcaption{padding-right:var(--gutter)}
.duo.rovescio figcaption{padding-left:var(--gutter)}
.duo figcaption{margin-top:16px;font-family:'Archivo',sans-serif;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fumo)}
@media(max-width:860px){
  .duo,.duo.rovescio{grid-template-columns:1fr}
  .duo.rovescio .testo{order:0}
}

/* ============================================================
   LA SCENA A TUTTA LARGHEZZA
   Il fotogramma resta intero in orizzontale: l'altezza della sezione e'
   esattamente 16/9 della finestra, cosi' non si taglia niente ai lati.
   Il testo sta sopra, nella meta' sinistra, su una velatura che sfuma
   verso destra e lascia scoperto il soggetto.
   ============================================================ */
.scena{
  position:relative;z-index:1;display:flex;align-items:center;overflow:hidden;
  background:var(--pece);
  min-height:min(56.25vw,92svh);
  padding:clamp(70px,9vh,120px) var(--gutter);
}
.scena .alone{display:none}
.scena .sfondo{position:absolute;inset:0;z-index:0}
.scena .sfondo img{width:100%;height:100%;object-fit:cover;object-position:center}
.scena .velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right,rgba(5,5,4,.94) 0%,rgba(5,5,4,.9) 24%,rgba(5,5,4,.66) 42%,rgba(5,5,4,.22) 60%,transparent 76%),
    linear-gradient(to top,rgba(5,5,4,.55),transparent 36%);
}
.scena.rovescio .velo{
  background:
    linear-gradient(to left,rgba(5,5,4,.94) 0%,rgba(5,5,4,.9) 24%,rgba(5,5,4,.66) 42%,rgba(5,5,4,.22) 60%,transparent 76%),
    linear-gradient(to top,rgba(5,5,4,.55),transparent 36%);
}
.scena.rovescio{justify-content:flex-end;text-align:right}
/* ancoraggi alternativi, per non ripetere la stessa inquadratura */
/* Il testo sta a destra: a sinistra c'e' il volto dell'illusionista e
   la frase gli finiva addosso. A destra pero' passa il braccio in
   piena luce, e le lettere chiare ci si perdevano sopra: il velo di
   questa scena scende anche da destra, piu' fitto dove sta il testo
   e trasparente dalla parte del volto. */
.scena.basso{align-items:flex-end;justify-content:flex-end}
.scena.basso .dentro{margin-left:auto}
.scena.basso .velo{
  background:
    linear-gradient(to left,rgba(6,6,5,.82) 0%,rgba(6,6,5,.6) 26%,rgba(6,6,5,.12) 52%,transparent 68%),
    linear-gradient(to top,rgba(6,6,5,.72) 0%,rgba(6,6,5,.22) 24%,transparent 46%);
}
.scena.alto{align-items:flex-start}

/* variante a due nomi: il titolo in alto a sinistra, i due artisti nominati
   in basso ciascuno sotto la propria figura */
.scena.duetto{align-items:flex-start}
/* La fotografia degli artisti riempie una fascia 16:9, che e' la
   stessa proporzione del file: con object-fit:cover e i due rapporti
   uguali non viene tagliato niente, teste e mani comprese. Il file e'
   stato allargato ai fianchi con il buio della sala, proprio per
   arrivare al 16:9 senza toccare le figure. Le scritte stanno sopra
   la fotografia, agli angoli dove la sala e' scura. */
.scena.duetto{
  min-height:0;aspect-ratio:16 / 9;
  align-items:flex-start;
  padding:clamp(26px,4vh,56px) var(--gutter);
}
.scena.duetto .sfondo{inset:0}
.scena.duetto .sfondo img{width:100%;height:100%;object-fit:cover;object-position:center center}
.scena.duetto .alone{display:none}
.scena.duetto .velo{
  background:
    linear-gradient(to bottom,rgba(6,6,5,.72) 0%,rgba(6,6,5,.2) 18%,transparent 34%),
    linear-gradient(to top,rgba(6,6,5,.78) 0%,rgba(6,6,5,.24) 20%,transparent 38%);
}

/* Sul telefono una fascia 16:9 e' alta due dita: la fotografia resta
   16:9 in cima e il titolo con i nomi scende sotto, sul nero. */
@media(max-width:900px){
  /* Su telefono la fascia degli artisti tiene la stessa proporzione del
     file, 16:9: cosi' object-fit:cover non taglia niente, teste e mani
     comprese, e le scritte possono stare sopra la fotografia. Gli allori
     spariscono: in una fascia alta due dita non ci stavano senza coprire
     i due volti, e sulla pagina degli artisti ci sono per intero. */
  .scena.duetto{
    aspect-ratio:16 / 9;display:block;min-height:0;
    padding:clamp(14px,3vw,22px) var(--gutter);
  }
  /* Sul telefono il 16:9 e' alto due dita e le scritte coprirebbero i due
     volti: la fascia passa a 4:3. Il ritaglio porta via circa un settimo
     per lato, cioe' quasi esattamente il buio aggiunto ai fianchi del
     file: la fotografia vera resta intera, teste e mani comprese. */
  @media(max-width:620px){
    .scena.duetto{aspect-ratio:4 / 3}
  }
  .scena.duetto .alone{display:none}
  .scena.duetto .sfondo{position:absolute;inset:0;aspect-ratio:auto;z-index:1}
  .scena.duetto .sfondo img{object-fit:cover;object-position:center center}
  .scena.duetto .velo{
    display:block;inset:0;z-index:2;
    background:
      linear-gradient(to bottom,rgba(6,6,5,.66) 0%,rgba(6,6,5,.14) 20%,transparent 36%),
      linear-gradient(to top,rgba(6,6,5,.8) 0%,rgba(6,6,5,.3) 20%,transparent 40%);
  }
  .scena.duetto .dentro{
    position:absolute;z-index:3;top:clamp(14px,3vw,22px);
    left:var(--gutter);right:var(--gutter);max-width:none;padding:0;
  }
  .scena.duetto .dentro .display{font-size:clamp(1.5rem,7vw,2.4rem);margin-top:0}
  .scena.duetto .nomi{
    position:absolute;z-index:3;left:0;right:0;bottom:0;
    grid-template-columns:1fr 1fr;gap:12px;align-items:end;
    padding:0 var(--gutter) clamp(14px,3.4vw,24px);
  }
  .scena.duetto .nomi a:last-child{text-align:right}
  .scena.duetto .nomi .allori{display:none}
  /* i nomi stanno su una riga per colonna: a meta' schermo "Niccolo'
     Fontana" andava a capo e si accavallava con l'altro */
  .scena.duetto .nomi .n{font-size:clamp(.78rem,3.3vw,1.08rem);line-height:1.1}
  /* il titolo scende sotto la barra: a sezione aperta ci finiva dentro */
  .scena.duetto .dentro{top:clamp(50px,12vw,78px)}
}
.scena.duetto .dentro{max-width:min(60%,760px)}
.scena.duetto .nomi{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 var(--gutter) clamp(44px,6vh,76px);
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;
}
.scena.duetto .nomi a{display:block;transition:opacity .4s ease}
.scena.duetto .nomi a:last-child{text-align:right}
.scena.duetto .nomi a:hover{opacity:.74}
.scena.duetto .nomi .n{
  display:block;font-family:'Bodoni Moda',Georgia,serif;font-weight:500;
  font-size:clamp(1.4rem,2.7vw,2.25rem);letter-spacing:-.016em;color:var(--avorio);
  text-shadow:0 2px 18px rgba(0,0,0,.9);
}
.scena.duetto .nomi small{
  display:block;margin-top:8px;font-family:'Archivo',sans-serif;font-weight:500;
  font-size:.82rem;letter-spacing:.07em;color:var(--oro-chiaro);
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}
@media(max-width:760px){

}
.scena .dentro{position:relative;z-index:2;max-width:min(46%,620px)}
.scena .dentro > *{text-shadow:0 2px 18px rgba(0,0,0,.85)}
.scena .ruolo{
  display:block;margin-top:10px;
  font-family:'Archivo',sans-serif;font-weight:500;font-size:.92rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--oro-chiaro);
}
.scena p{margin-top:20px;font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.1rem,1.45vw,1.38rem);line-height:1.46;color:#E6E1D6}
.scena .allori{margin-top:30px}
.scena.rovescio .allori{justify-content:flex-end}
.scena .link-oro{margin-top:26px}

/* Sul telefono il fotogramma resta intero e orizzontale in cima, e il testo
   scende sotto. Perche' non sembri appiccicato su una lastra nera, la stessa
   foto riempie tutta la sezione sfocata e scurita: il testo poggia sui colori
   della scena, e il bordo basso del fotogramma ci si scioglie dentro. */
@media(max-width:900px){
  .scena{
    display:flex;align-items:flex-end;
    min-height:min(92svh,164vw);
    padding:clamp(44px,8vh,78px) var(--gutter);
    background:var(--pece);
  }
  .scena .alone{display:none}
  .scena .alone img{
    width:100%;height:100%;object-fit:cover;
    transform:scale(1.35);
    filter:blur(34px) saturate(.8) brightness(.38);
  }
  /* La fotografia riempie la sezione anche da telefono e le scritte ci
     stanno sopra: prima era una fascia 16:9 con il testo sotto, sul nero.
     Il ritaglio stretto porta via i fianchi, quindi ogni scena dice con
     --fuoco-x da che parte tenere il soggetto. */
  .scena .sfondo{
    position:absolute;inset:0;aspect-ratio:auto;z-index:1;
    -webkit-mask-image:none;mask-image:none;
  }
  .scena .sfondo img{object-position:var(--fuoco-x,50%) var(--fuoco-y,50%)}
  .scena .velo,.scena.rovescio .velo{
    top:0;bottom:0;height:auto;z-index:2;
    background:linear-gradient(to bottom,rgba(6,6,5,.5) 0%,rgba(6,6,5,.08) 22%,transparent 38%,rgba(6,6,5,.5) 64%,rgba(6,6,5,.86));
  }
  .scena .dentro,.scena.rovescio .dentro{
    position:relative;z-index:3;max-width:none;margin:0;text-align:left;
  }
  /* nel filo di aghi il volto sta a sinistra: il ritaglio lo segue */
  .scena.basso{--fuoco-x:24%}
  .scena.rovescio{text-align:left}
  .scena.rovescio .allori{justify-content:flex-start}
  /* lo stesso vale per la variante a due nomi */
  .scena.duetto .nomi{z-index:2}
}

/* citazione a tutta pagina */
.citazione{
  position:relative;min-height:clamp(400px,64vh,640px);background:var(--pece);
  display:flex;align-items:flex-end;
  padding:clamp(60px,9vh,110px) var(--gutter);overflow:hidden;
}
.citazione .sfondo{position:absolute;inset:-8%;z-index:0}
.citazione img{width:100%;height:100%;object-fit:cover}
.citazione .velo{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.3) 60%,rgba(0,0,0,.6))}
.citazione .dentro{position:relative;z-index:2;max-width:min(100%,1180px)}
/* La citazione e' un titolo come gli altri: prende il Bodoni da .display.
   Il carattere calligrafico sta su .firma, una riga sola in tutta la pagina. */
.citazione .frase{
  font-size:clamp(1.9rem,5.2vw,4.2rem);line-height:1;letter-spacing:-.026em;
  color:var(--avorio);
}

.citazione .manoscritta{
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(1.4rem,3vw,2.4rem);color:var(--oro-chiaro);line-height:1.1;margin-top:18px;letter-spacing:-.02em;
}

/* i quattro caratteri */
.caratteri{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(28px,3.4vw,54px);margin-top:56px;text-align:left}
.carattere{display:flex;flex-direction:column;gap:14px}
.carattere .segno{width:30px;height:30px;stroke:var(--oro);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.carattere h3{font-family:'Bodoni Moda',Georgia,serif;font-weight:500;font-size:1.24rem;letter-spacing:-.016em;color:var(--avorio)}
.carattere p{font-family:'Instrument Serif',Georgia,serif;font-size:1.12rem;line-height:1.35;letter-spacing:-.012em;color:var(--fumo);max-width:32ch}

/* la vetrina */
.vetrina-sez{background:var(--nero);padding:clamp(80px,12vh,150px) 0 0}
.vetrina-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:0 var(--gutter) clamp(30px,5vh,52px)}
.vetrina-testa .conteggio{font-family:'Archivo',sans-serif;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fumo)}
.vetrina{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--nero)}
.cassetto{
  position:relative;display:block;border:0;padding:0;margin:0;cursor:pointer;
  background:var(--nero);overflow:hidden;text-align:left;font:inherit;color:inherit;aspect-ratio:4/5;
}
.cassetto img{width:100%;height:100%;object-fit:cover;filter:brightness(.9);transition:transform 1.5s var(--curva),filter 1s ease}
.cassetto:hover img,.cassetto:focus-visible img{transform:scale(1.06);filter:brightness(1.05)}
.cassetto .numero{position:absolute;top:16px;left:16px;z-index:2;font-family:'Archivo',sans-serif;font-weight:600;font-size:.74rem;color:var(--oro-chiaro)}
.cassetto .etichetta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 18px;background:linear-gradient(to top,rgba(0,0,0,.94),transparent);display:flex;flex-direction:column;gap:5px}
.cassetto .etichetta .t{font-family:'Archivo',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-.02em;color:var(--avorio)}
.cassetto .etichetta .s{font-family:'Archivo',sans-serif;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fumo);transition:color .5s ease}
.cassetto:hover .etichetta .s{color:var(--oro-chiaro)}
@media(max-width:820px){.vetrina{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.vetrina{grid-template-columns:1fr}}

/* la teca aperta */
.teca{position:fixed;inset:0;z-index:180;background:var(--nero);visibility:hidden}
.teca.aperta{visibility:visible}
.teca-media{position:absolute;inset:0;overflow:hidden}
.teca-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.6s var(--curva)}
.teca.aperta .teca-media img{transform:scale(1)}
.teca-velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.1) 52%,rgba(0,0,0,.6))}
.teca-testo{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(30px,6vh,64px) var(--gutter);
  display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateY(18px);transition:opacity .8s ease .35s,transform .8s var(--curva) .35s;
}
.teca.aperta .teca-testo{opacity:1;transform:none}
.teca-testo .numero{font-family:'Archivo',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.1em;color:var(--oro-chiaro)}
.teca-testo h3{font-family:'Bodoni Moda',Georgia,serif;font-weight:500;font-size:clamp(1.9rem,4.9vw,3.6rem);line-height:.96;letter-spacing:-.02em;color:var(--avorio)}
.teca-testo p{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.3;letter-spacing:-.018em;color:#CEC7BA;max-width:44ch}
.teca-chiudi{
  position:absolute;top:18px;right:var(--gutter);z-index:3;
  background:transparent;border:1px solid var(--oro);color:var(--avorio);cursor:pointer;
  padding:11px 20px;font-family:'Archivo',sans-serif;font-size:.72rem;
  opacity:0;transition:opacity .6s ease .45s,background .5s ease,color .5s ease;
}
.teca.aperta .teca-chiudi{opacity:1}
.teca-chiudi:hover{background:var(--oro);color:var(--nero);border-color:var(--oro)}
.teca-passi{position:absolute;bottom:0;right:0;z-index:3;display:flex;opacity:0;transition:opacity .6s ease .45s}
.teca.aperta .teca-passi{opacity:1}
.teca-passi button{
  background:transparent;border:1px solid rgba(255,255,255,.16);border-right:0;color:var(--avorio);cursor:pointer;
  padding:15px 22px;font-family:'Archivo',sans-serif;font-size:.8rem;transition:background .5s ease,color .5s ease;
}
.teca-passi button:last-child{border-right:1px solid rgba(255,255,255,.16)}
.teca-passi button:hover{background:var(--oro);color:var(--nero)}
@media(max-width:700px){
  .teca-testo{padding-bottom:70px}
  .teca-passi{bottom:0;left:0;right:auto}
}

/* artisti */
/* I due ritratti non sono due riquadri appaiati: sono sfalsati, sbordano
   ciascuno dal proprio lato e si aprono con una tendina dal basso. */
.coppia{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,5vw,96px);margin-top:clamp(48px,7vw,96px);align-items:start;
}
.coppia a{position:relative;display:block;overflow:hidden;background:var(--nero)}
.coppia a:first-child{margin-left:calc(var(--gutter) * -1)}
.coppia a:last-child{margin-right:calc(var(--gutter) * -1);margin-top:clamp(36px,8vw,132px)}

.coppia img{
  width:100%;aspect-ratio:3/4.3;object-fit:cover;
  transition:transform 1.5s var(--curva);
}
.coppia a:hover img{transform:scale(1.055)}
.coppia .nome{
  position:absolute;left:0;right:0;bottom:0;padding:30px clamp(22px,3vw,40px);
  background:linear-gradient(to top,rgba(0,0,0,.94),transparent);
  font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.2rem,2.2vw,1.9rem);line-height:1;color:var(--avorio);
}
.coppia .nome small{display:block;font-weight:500;font-size:.82rem;letter-spacing:.06em;color:var(--oro-chiaro);margin-top:10px}
@media(max-width:700px){
  .coppia{grid-template-columns:1fr;gap:34px}
  .coppia a:last-child{margin-top:0}
  .coppia a:first-child{margin-right:calc(var(--gutter) * -1)}
  .coppia a:last-child{margin-left:calc(var(--gutter) * -1)}
}

.artista{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,4vw,66px);align-items:center}
.artista.rovescio{grid-template-columns:1.2fr .8fr}
.artista.rovescio .ritratto{order:2}
.artista .ritratto{position:relative;overflow:hidden;aspect-ratio:4/5.3}
.artista .ritratto img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}
.artista:not(.rovescio) .ritratto{margin-left:calc(var(--gutter) * -1)}
.artista.rovescio .ritratto{margin-right:calc(var(--gutter) * -1)}
.artista h2{margin-bottom:10px}
.artista .ruolo{
  font-family:'Archivo',sans-serif;font-weight:500;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--oro);margin-bottom:26px;display:block;
}
.artista p{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.08rem,1.5vw,1.4rem);line-height:1.38;letter-spacing:-.014em;color:#CEC7BA;max-width:52ch}
.artista p + p{margin-top:.7em}
@media(max-width:860px){
  .artista,.artista.rovescio{grid-template-columns:1fr}
  .artista.rovescio .ritratto{order:0}
}

.allori{display:flex;flex-wrap:wrap;gap:22px 38px;margin-top:32px;align-items:center}
.alloro{display:flex;align-items:center;gap:8px}
.alloro svg{width:15px;height:38px;stroke:var(--oro);fill:none;stroke-width:1;opacity:.85}
.alloro span{font-family:'Archivo',sans-serif;font-size:.7rem;letter-spacing:.06em;line-height:1.6;color:var(--avorio);text-align:center}

.link-oro{
  position:relative;display:inline-block;margin-top:26px;
  font-family:'Archivo',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:-.01em;
  color:var(--oro-chiaro);padding-bottom:5px;
}
.link-oro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.4;transform-origin:right;transition:transform .6s var(--curva)}
.link-oro:hover::after{transform:scaleX(0);transform-origin:left}

/* manifesti storici */
.manifesti{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(20px,2.6vw,40px);margin-top:52px}
.manifesti figure{display:flex;flex-direction:column;gap:14px}
.manifesti img{width:100%;aspect-ratio:2/2.7;object-fit:cover;transition:transform 1.2s var(--curva)}
.manifesti figure:hover img{transform:scale(1.04)}
.manifesti figcaption{font-family:'Archivo',sans-serif;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fumo)}

/* comparabili internazionali */
.format{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(26px,3.2vw,52px);margin-top:52px}
.format .voce-f{padding:0;display:flex;flex-direction:column;gap:4px}
.blocco.carta .format .luogo{color:var(--oro-carta)}
.blocco.carta .format ul{color:#57514A}
.format h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.03em}
.format .luogo{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:1.4rem;color:var(--oro-chiaro);line-height:1.1;margin-bottom:12px;letter-spacing:-.02em}
.format ul{list-style:none;font-family:'Archivo',sans-serif;font-size:.84rem;color:var(--fumo);line-height:1.9}

/* testata pagine interne */
.testata{
  position:sticky;top:0;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(340px,58vh,560px);background:var(--nero);
  padding:clamp(90px,14vh,150px) var(--gutter) clamp(40px,6vh,66px);overflow:hidden;
}
.testata .sfondo{position:absolute;inset:-6%;z-index:0}
.testata .sfondo img{width:100%;height:100%;object-fit:cover}
.testata .velo{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.4) 60%,rgba(0,0,0,.66))}
.testata .dentro{position:relative;z-index:2}
.testata .alone{display:none}

/* Ogni fotogramma a tutta pagina entra e esce dal nero, invece di finire
   contro il bordo di quello dopo. Vale per le scene, le testate e le
   citazioni: scorrendo, le fotografie si susseguono senza mai toccarsi. */
.scena .sfondo,.testata .sfondo,.citazione .sfondo{
  -webkit-mask-image:var(--sfumo-bordi);
  mask-image:var(--sfumo-bordi);
}
/* Velatura leggera, e solo in fondo, sotto le scritte. Quella piena scuriva
   anche la fascia dove stanno i volti e li spegneva. */
.testata.morbida .velo{
  background:
    linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.66) 14%,rgba(0,0,0,.34) 30%,rgba(0,0,0,.08) 44%,transparent 56%),
    linear-gradient(to right,rgba(0,0,0,.4) 0%,rgba(0,0,0,.12) 30%,transparent 52%);
}
.testata.morbida .sfondo img{object-position:center 42%}
/* su una fotografia chiara l'occhiello grigio spariva: qui prende il colore
   della carta e due ombre strette, come le voci della barra */
.testata.morbida .occhiello{
  color:var(--carta);
  text-shadow:0 1px 8px rgba(0,0,0,.66),0 0 26px rgba(0,0,0,.5);
}
/* e su uno schermo molto largo la testata cresce insieme alla larghezza,
   altrimenti il fotogramma si riduce a una striscia e i due ci stanno a
   malapena */
/* il 56vw e' il guinzaglio: tenendo la testata piu' bassa di poco piu' della
   meta' della larghezza, il riquadro resta sempre piu' largo della fotografia
   e il ritaglio puo' solo mangiare sopra e sotto, mai di lato */
.testata.morbida{min-height:min(clamp(340px,max(58vh,30vw),980px),56vw)}

/* Sotto i 900px una fotografia orizzontale, riempiendo tutta la testata,
   taglierebbe fuori uno dei due. Allora il fotogramma resta intero in cima,
   alla sua proporzione, e il titolo scende sotto: non si perde nessuno.
   E' lo stesso impianto delle scene, con la stessa dissolvenza in basso. */
@media(max-width:900px){
  .testata{
    min-height:0;display:block;
    /* il fondo e' lo stesso nero del fotogramma, che e' stato riportato a
       (12,12,11) apposta: cosi' non c'e' niente da nascondere ai bordi */
    padding:clamp(40px,10vw,76px) 0 clamp(26px,5vw,48px);background:var(--pece);
  }
  .testata .sfondo{
    position:relative;inset:auto;z-index:1;
    /* la fotografia si apre dal nero e ci rientra: nessun filo, ne' sopra
       sotto la barra del menu, ne' sotto dove cominciano le scritte */
    -webkit-mask-image:var(--dissolvenza-doppia);
    mask-image:var(--dissolvenza-doppia);
  }
  .testata .velo{
    top:0;bottom:0;height:auto;z-index:1;
    background:linear-gradient(to bottom,transparent 54%,rgba(6,6,5,.3) 80%,rgba(6,6,5,.46));
  }
  .testata.morbida .velo{
    background:linear-gradient(to bottom,transparent 58%,rgba(6,6,5,.26) 82%,rgba(6,6,5,.42));
  }
  /* il fotogramma tiene la propria proporzione, qualunque foto ci sia */
  .testata .sfondo img{height:auto;object-fit:contain}
  .testata .alone{display:block;position:absolute;inset:0;z-index:0;overflow:hidden}
  .testata .alone img{
    width:100%;height:100%;object-fit:cover;
    transform:scale(1.35);filter:blur(34px) saturate(.8) brightness(.5);
  }
  /* le scritte salgono dentro il fotogramma, sul suo nero, invece di stare
     su una lastra scura attaccata sotto */
  .testata .dentro{margin:-17vw var(--gutter) 0}
}
.testata .sottotitolo{
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(1.3rem,2.6vw,2.2rem);color:var(--oro-chiaro);line-height:1.1;margin-top:12px;letter-spacing:-.02em;
}

/* richiamo finale */
.richiamo{
  padding:clamp(90px,15vh,180px) var(--gutter);
  background:radial-gradient(62% 120% at 50% 0%,rgba(183,154,99,.1),transparent 66%),var(--nero);
}
.richiamo p{color:var(--fumo);margin-bottom:32px}

/* piede */
.piede{background:var(--pece);padding:clamp(56px,8vh,90px) var(--gutter) 32px}
.piede-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:38px}
.piede h4{font-family:'Archivo',sans-serif;font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--oro);margin-bottom:14px}
.piede p,.piede a{font-family:'Archivo',sans-serif;font-size:.84rem;color:var(--fumo);line-height:1.9}
.piede a{transition:color .4s}
.piede a:hover{color:var(--oro-chiaro)}
.piede .marchio img{width:clamp(130px,11vw,13rem);height:auto;opacity:.9}
.piede-coda{
  margin-top:60px;
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  font-family:'Archivo',sans-serif;font-size:.8rem;color:var(--fumo-scuro);
}


/* ============================================================
   L'APERTURA IN VIDEO
   Il teaser gira in continuo. A ogni giro si dissolve nel nero
   e riparte: la dissolvenza la guida site.js leggendo il tempo
   del filmato, non un cronometro a parte, cosi' resta in passo
   anche se il video parte in ritardo.
   ============================================================ */
.apertura-video{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 46%;
  will-change:opacity;
}
/* il teaser non ha bisogno dell'avvicinamento della locandina:
   la camera si muove gia' dentro al filmato */
.avvicina.ferma{animation:schiarita 1.2s ease-out both}
@media(prefers-reduced-motion:reduce){
  .apertura-video{opacity:1 !important}
}

/* ============================================================
   LE NOTE "INGRANDIRE" DEL FOGLIO DEI TESTI (17 ottobre)
   ============================================================ */

/* gli allori dei premi, sulle schede degli artisti e in home */
.alloro svg{width:19px;height:48px}
.alloro span{font-size:.86rem;letter-spacing:.05em}
.allori{gap:24px 44px;margin-top:36px}

/* i link in fondo alle schede: niccolofontana.com, pierovenesia.com */
.link-oro{font-size:.95rem}

/* il bottone dei biglietti e le voci di menu */
.biglietti{font-size:.95rem;padding:16px 30px}
.biglietti.grande{font-size:1.02rem;padding:19px 36px}
.voci a{font-size:1.02rem}
@media(max-width:900px){
  .voci a{font-size:.92rem}
  .barra .biglietti{font-size:.8rem;padding:11px 17px}
}
@media(max-width:760px){
  .alloro svg{width:17px;height:42px}
  .alloro span{font-size:.78rem}
  .voci a{font-size:.86rem}
  .barra .biglietti{font-size:.76rem;padding:10px 15px}
}
@media(max-width:420px){
  .voci a{font-size:.78rem}
  .barra .biglietti{font-size:.7rem;padding:9px 13px}
}

/* il piede, "piu' grande!" su tutte le righe */
.piede h4{font-size:.84rem;letter-spacing:.1em}
.piede p,.piede a{font-size:1rem;line-height:1.95}
.piede-coda{font-size:.84rem}

/* ============================================================
   LE SEZIONI NUOVE DELLA HOME (foglio dei testi, 17 ottobre)
   ============================================================ */

/* ---------- lo spazio del trailer: entra da destra ---------- */
/* La fotografia del trailer va da un bordo all'altro dello schermo:
   i margini laterali li tiene solo la riga sotto. Il padding orizzontale
   sta sulla didascalia e non sulla sezione, cosi' il fotogramma non ha
   niente che lo stringa. L'overflow nascosto serve all'entrata da destra:
   il fotogramma parte spostato e il suo sborso non deve allargare la pagina. */
.nastro-video{
  position:relative;z-index:1;background:var(--pece);
  padding:0;
  overflow:hidden;
}
.nastro-dentro{
  width:100%;margin:0;transform-origin:50% 100%;
  aspect-ratio:16/9;overflow:hidden;
  background:var(--nero);
  will-change:transform,opacity;
}
.nastro-film{width:100%;height:100%;object-fit:cover;display:block}
/* Un velo appena accennato sul fondo della fotografia: non una fascia
   nera sotto l'immagine, ma l'ombra che le fotografie hanno di loro, e
   che tiene leggibile la didascalia su qualunque cosa ci capiti sotto. */
.nastro-video::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:min(26%,220px);pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,9,.66),rgba(10,10,9,.3) 42%,transparent);
}

/* La didascalia sta dentro la fotografia, in basso a sinistra: fuori
   avrebbe bisogno di una fascia nera, ed e' proprio il nero che non
   deve esserci. Il margine in basso tiene conto dello strappo del foglio
   che segue, che sborda qui sopra. */
.nastro-nota{
  position:absolute;z-index:3;left:var(--gutter);
  bottom:calc(var(--strappo-h) + clamp(16px,2.4vh,30px));
  margin:0;
  font-family:'Archivo',sans-serif;font-weight:500;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--avorio);
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 18px rgba(0,0,0,.8);
}
/* Niente sfumature sui bordi: la fotografia tocca la sezione sopra e il
   foglio strappato sotto, quindi non confina con il nero da nessuna parte
   e non ha niente in cui sciogliersi. */

/* ---------- il video al posto di una fotografia ---------- */
.scena-video{width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block}

/* ---------- gli allori sotto i nomi, in home ---------- */
.nomi .allori{display:flex;margin-top:10px;justify-content:flex-start}
.nomi a:last-child .allori{justify-content:flex-end}
.nomi .alloro span{color:var(--oro-chiaro);font-size:.78rem}
.nomi .alloro svg{width:16px;height:40px}

/* ---------- la galleria a riquadri ----------
   Fotografie piccole una accanto all'altra; al clic si aprono a tutto
   schermo dentro la lente. Il file grande si scarica solo in quel
   momento, quindi la pagina non porta sei immagini intere sulle spalle. */
/* Niente margini laterali ne' fughe fra una fotografia e l'altra: la
   griglia va da un bordo all'altro dello schermo e i riquadri si
   toccano, come i fotogrammi di un provino a contatto. */
.galleria{
  position:relative;z-index:1;background:var(--pece);
  padding:clamp(52px,8vh,104px) 0 0;
}
.galleria > .occhiello{margin-bottom:clamp(26px,3.4vh,44px);padding:0 var(--gutter)}
.riquadri{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}
.riquadro{
  appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;
  background:var(--nero);cursor:pointer;overflow:hidden;
  aspect-ratio:3/2;position:relative;display:block;
}
.riquadro img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* il ritaglio del riquadro segue il soggetto: senza questo, in una
     fotografia verticale la testa restava fuori dalla miniatura */
  object-position:var(--fuoco-x,50%) var(--fuoco-y,50%);
  transition:transform 1.1s var(--curva),opacity .5s ease;
}
.riquadro:hover img,.riquadro:focus-visible img{transform:scale(1.045);opacity:.86}
.riquadro:focus-visible{outline:2px solid var(--oro-chiaro);outline-offset:3px}
@media(max-width:1000px){.riquadri{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.riquadri{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- da telefono la galleria diventa una foto sola ----------
   Una fotografia per volta che cambia da sola ogni due secondi, con due
   frecce ai lati. La finestra e' la sezione, la fila e' .riquadri: si
   sposta tutta insieme di una larghezza di schermo per volta. */
@media(max-width:620px){
  .galleria{overflow:hidden}
  .riquadri.scorre{
    display:flex;gap:0;width:100%;
    transition:transform .75s var(--curva);will-change:transform;
  }
  .riquadri.scorre .riquadro{flex:0 0 100%;width:100%;aspect-ratio:3/2}
  .freccia-foto{
    position:absolute;top:calc(50% + clamp(26px,3.4vh,44px));
    transform:translateY(-50%);z-index:3;
    appearance:none;-webkit-appearance:none;
    width:44px;height:44px;border-radius:50%;
    background:rgba(12,12,11,.46);border:1px solid rgba(244,241,234,.3);
    color:var(--avorio);font-size:1.1rem;line-height:1;
    display:grid;place-items:center;cursor:pointer;
    transition:background .3s ease,border-color .3s ease;
  }
  .freccia-foto.sx{left:10px}
  .freccia-foto.dx{right:10px}
  .freccia-foto:active{background:rgba(12,12,11,.68)}
  .freccia-foto:focus-visible{outline:2px solid var(--oro-chiaro);outline-offset:3px}
}
@media (prefers-reduced-motion:reduce){.riquadri.scorre{transition:none}}

/* con la lente aperta la barra si toglie di mezzo: il bottone dei
   biglietti sbucava da sotto il velo e si pestava col tasto di chiusura */
html.con-lente .barra{opacity:0;pointer-events:none;transition:opacity .3s ease}

/* ---------- la lente ---------- */
.lente{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:rgba(8,8,7,.94);
  padding:clamp(40px,6vh,80px) clamp(16px,5vw,90px);
  opacity:0;transition:opacity .4s ease;
}
.lente[hidden]{display:none}
.lente.aperta{opacity:1}
.lente-dentro{margin:0;max-width:100%;max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:14px}
.lente-dentro img{
  max-width:100%;max-height:calc(100svh - clamp(130px,20vh,220px));
  width:auto;height:auto;object-fit:contain;display:block;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  opacity:0;transform:scale(.985);
  transition:opacity .45s ease,transform .6s var(--curva);
}
.lente.pronta .lente-dentro img{opacity:1;transform:none}
.lente-dentro figcaption{
  font-family:'Archivo',sans-serif;font-size:.82rem;letter-spacing:.04em;
  color:var(--fumo);text-align:center;max-width:62ch;
}
.lente button{
  position:absolute;appearance:none;-webkit-appearance:none;
  background:rgba(244,241,234,.08);border:1px solid rgba(244,241,234,.22);
  color:var(--avorio);cursor:pointer;
  width:46px;height:46px;border-radius:50%;
  font-size:1.1rem;line-height:1;display:grid;place-items:center;
  transition:background .3s ease,border-color .3s ease;
}
.lente button:hover{background:rgba(244,241,234,.18);border-color:rgba(244,241,234,.45)}
.lente button:focus-visible{outline:2px solid var(--oro-chiaro);outline-offset:3px}
.lente-chiudi{top:clamp(14px,3vh,28px);right:clamp(14px,3vw,34px)}
.lente-passo{top:50%;transform:translateY(-50%);font-size:1.6rem}
.lente-passo.indietro{left:clamp(10px,2vw,30px)}
.lente-passo.avanti{right:clamp(10px,2vw,30px)}
@media(max-width:620px){
  .lente-passo{top:auto;bottom:clamp(14px,3vh,26px);transform:none}
}
@media (prefers-reduced-motion:reduce){
  .lente,.lente-dentro img,.riquadro img{transition:none}
  .lente-dentro img{opacity:1;transform:none}
}

/* ---------- il video al posto di una fotografia ---------- */
.scena-video{width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block}

/* ---------- gli allori sotto i nomi, in home ---------- */
.nomi .allori{display:flex;margin-top:10px;justify-content:flex-start}
.nomi a:last-child .allori{justify-content:flex-end}
.nomi .alloro span{color:var(--oro-chiaro);font-size:.78rem}
.nomi .alloro svg{width:16px;height:40px}

/* ---------- la galleria: una foto che scorre ----------
   Non tre fotografie impilate, ma una sola finestra: le lastre
   stanno in fila dentro la pista e la pista slitta di lato di
   una larghezza intera. L'altezza sta sulla finestra, non sulle
   lastre, cosi' la fila non si sfalda quando cambia il formato. */
.galleria{position:relative;z-index:1;background:var(--pece)}
.vetrina-foto{
  position:relative;overflow:hidden;
  height:min(92svh,62vw);
}
.pista-foto{
  display:flex;height:100%;width:100%;
  will-change:transform;
  transition:transform 1.05s var(--curva);
}
.galleria .lastra{
  position:relative;margin:0;
  flex:0 0 100%;width:100%;height:100%;overflow:hidden;
}
.galleria .lastra img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--fuoco-x,50%) var(--fuoco-y,50%);
  will-change:transform;
}
@media(min-width:901px){
  .vetrina-foto{
    -webkit-mask-image:var(--sfumo-bordi);mask-image:var(--sfumo-bordi);
  }
}
/* su schermo stretto o quasi quadrato la foto resta intera */
@media(max-width:900px),(max-aspect-ratio:6/5){
  .vetrina-foto{height:auto;aspect-ratio:16/9}
}

/* i tre segni sotto la foto: tre fili d'oro, quello acceso si allunga */
.segni-foto{
  position:absolute;left:0;right:0;bottom:clamp(18px,2.6vh,34px);
  z-index:2;display:flex;justify-content:center;
  gap:clamp(9px,1.1vw,14px);pointer-events:none;
}
.segni-foto .segno-foto{
  pointer-events:auto;
  appearance:none;-webkit-appearance:none;border:0;padding:0;
  width:clamp(22px,3vw,40px);height:2px;border-radius:2px;
  background:rgba(255,252,243,.34);cursor:pointer;
  transition:background .5s ease,width .6s var(--curva),transform .3s ease;
}
.segni-foto .segno-foto:hover{background:rgba(255,252,243,.6)}
.segni-foto .segno-foto.acceso{
  background:var(--oro-chiaro);
  width:clamp(44px,6vw,78px);
}
.segni-foto .segno-foto:focus-visible{outline:2px solid var(--oro-chiaro);outline-offset:5px}
@media (prefers-reduced-motion:reduce){
  .pista-foto{transition:none}
  .segni-foto .segno-foto{transition:none}
}

/* ---------- l'apertura: le righe "piu' grandi" del foglio ---------- */
.hero-claim{font-size:clamp(1.25rem,2.5vw,2.1rem)}
.hero-dati{font-size:clamp(.92rem,1.3vw,1.18rem);letter-spacing:.05em}

/* ============================================================
   LE SCHEDE DEGLI ARTISTI CON IL RITRATTO VERTICALE
   Una fotografia 2:3 non puo' fare da fondale orizzontale: a
   tutta larghezza ne resterebbe una striscia. Qui sta come una
   lastra accanto al testo, e dietro c'e' la stessa foto sfocata
   perche' il fondo non sia una lastra nera piatta.
   ============================================================ */
.scena.ritratto{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  gap:clamp(30px,4.5vw,80px);
  min-height:min(96svh,78vw);
  padding:clamp(74px,10vh,130px) var(--gutter);
  text-align:left;
}
.scena.ritratto.rovescio{
  grid-template-columns:minmax(0,.56fr) minmax(0,.44fr);
  justify-content:initial;text-align:left;
}
.scena.ritratto.rovescio .lastra-ritratto{order:2}
.scena.ritratto.rovescio .dentro{order:1}
.scena.ritratto.rovescio .allori{justify-content:flex-start}

.lastra-ritratto{
  position:relative;z-index:2;margin:0;width:100%;
  aspect-ratio:2/3;max-height:80svh;justify-self:center;
  overflow:hidden;background:var(--nero);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.lastra-ritratto img{
  width:100%;height:100%;object-fit:cover;object-position:center 44%;
  display:block;
}
.scena.ritratto .dentro{position:relative;z-index:2;max-width:48ch;margin:0}
.scena.ritratto .alone{display:block;position:absolute;inset:0;z-index:0;overflow:hidden}
.scena.ritratto .alone img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.3);filter:blur(40px) saturate(.9) brightness(.4);
}
.scena.ritratto .velo{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(6,6,5,.55),rgba(6,6,5,.3) 40%,rgba(6,6,5,.6));
}

@media(max-width:900px){
  .scena.ritratto,.scena.ritratto.rovescio{
    grid-template-columns:1fr;gap:clamp(26px,5vh,44px);
    min-height:0;padding:clamp(56px,8vh,90px) var(--gutter);
  }
  .scena.ritratto .lastra-ritratto,
  .scena.ritratto.rovescio .lastra-ritratto{order:1;max-height:70svh}
  .scena.ritratto .dentro,
  .scena.ritratto.rovescio .dentro{order:2;max-width:none}
}

/* Chi sta accanto a un foglio strappato deve lasciare aria da quella
   parte: la frangia della carta entra di --strappo-h nella sezione
   vicina, e senza questo spazio i nomi finivano sotto il bordo. */
@media(min-width:761px){
  .scena:has(+ .blocco.strappo) .nomi{
    padding-bottom:calc(clamp(44px,6vh,76px) + var(--strappo-h));
  }
}
/* niente piu' padding da allungare qui: la didascalia tiene gia' conto
   dello strappo, e la fotografia deve restare attaccata al foglio */

/* Da telefono i due nomi sono incolonnati a sinistra: anche la corona
   del secondo va a sinistra, altrimenti resta appesa al bordo destro.
   Sta qui in fondo perche' la regola che la mandava a destra viene
   dopo il blocco del telefono e, a parita' di peso, vincerebbe lei. */
@media(max-width:760px){
  .nomi a:last-child .allori{justify-content:flex-start}
}

/* ============================================================
   LE ANIMAZIONI DELLA PROVA
   Gli stessi movimenti dell'artifact di prova, portati qui sopra
   la struttura e i testi che il sito ha gia'. Il verde della prova
   non esiste in questa palette: al suo posto l'oro della carta.
   ============================================================ */

/* ---------- la firma calligrafica ----------
   Pinyon Script e' di tratto fine: va usata grande e una volta sola. */
.firma{
  display:block;
  font-family:'Pinyon Script',Georgia,cursive;
  font-weight:400;
  font-size:clamp(2rem,4.6vw,3.6rem);
  line-height:1.25;
  letter-spacing:0;
  color:var(--oro-chiaro);
  margin-top:.3em;
}
.blocco.carta .firma{color:var(--oro-carta)}

/* ---------- la piastra che sale ----------
   Due copie della stessa parola: quella sotto in inchiostro, quella
   sopra in carta, ritagliata esattamente all'altezza del rettangolo.
   Niente mix-blend-mode, cosi' il colore e' quello giusto ovunque. */
.piastra{position:relative;display:inline-block}
.piastra .lastra{
  position:absolute;left:-.1em;right:-.1em;top:-.05em;bottom:-.1em;
  background:var(--oro-carta);
  transform:translate3d(0,100%,0);
  will-change:transform;z-index:0;
}
.piastra .sotto{position:relative;z-index:1}
.piastra .sopra{
  position:absolute;left:0;top:0;z-index:2;
  color:var(--carta);
  clip-path:inset(100% 0 0 0);
  will-change:clip-path;pointer-events:none;white-space:pre-wrap;
}

/* ---------- le lettere che salgono ----------
   ogni lettera dentro una finestra che la taglia */
.display .parola-intera{white-space:nowrap;display:inline-block}
.display .lettera{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-top:.16em;margin-top:-.16em;
  /* spazio anche sotto: senza, la finestrella tagliava le code di g, p, q */
  padding-bottom:.26em;margin-bottom:-.26em}
.display .lettera i{display:inline-block;font-style:normal;will-change:transform}

/* ---------- il conteggio sopra il calendario ---------- */
.conteggio-sere{
  display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);flex-wrap:wrap;
  margin-top:40px;
}
.conteggio-sere b{
  font-family:'Bodoni Moda',Georgia,serif;font-weight:400;
  font-size:clamp(3.6rem,9.6vw,7.6rem);line-height:.86;
  letter-spacing:-.03em;color:var(--oro-carta);
  font-variant-numeric:tabular-nums;
}
.conteggio-sere span{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.1rem,2vw,1.6rem);line-height:1.2;
  letter-spacing:-.018em;color:#3A362F;
}

/* ---------- la tendina e il respiro ----------
   il clip-path convive con la maschera a sfumatura che il bordo basso
   delle fotografie ha gia' */
.scena .sfondo.tendina{will-change:clip-path}
.scena .sfondo.respiro img{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .piastra .lastra{transform:none}
  .piastra .sopra{clip-path:inset(0 0 0 0)}
  .display .lettera i{transform:none}
  .scena .sfondo.tendina{clip-path:none !important}
  .scena .sfondo.respiro img{transform:none !important}
}

/* ---------- la copertina del trailer ----------
   Al posto del filmato, la fotografia con il tasto play al centro.
   Il tasto diventa un vero bottone solo quando c'e' un codice YouTube:
   finche' non c'e', e' un disegno e non si puo' nemmeno mettere a fuoco
   con la tastiera, perche' un comando che non fa niente e' peggio che
   nessun comando. */
.nastro-dentro.copertina{position:relative;overflow:hidden;background:var(--nero)}
.nastro-foto{width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block}
/* La sigla e il tasto, incolonnati al centro della fotografia: la
   scritta grande come nel riferimento, il play subito sotto. */
.sigla-dentro{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2.4vh,30px);pointer-events:none;
  padding:0 var(--gutter);
}
.sigla{
  margin:0;
  font-family:'Bodoni Moda',Georgia,'Times New Roman',serif;font-weight:400;
  font-size:clamp(3.4rem,11vw,10rem);line-height:.9;
  letter-spacing:.01em;color:var(--avorio);
  text-shadow:0 6px 40px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.35);
}
.tasto-play{
  width:clamp(56px,6.4vw,86px);height:clamp(56px,6.4vw,86px);
  display:grid;place-items:center;pointer-events:none;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));
  transition:transform .5s var(--curva);
}
.tasto-play svg{width:100%;height:100%;display:block}
.tasto-play circle{fill:rgba(12,12,11,.42);stroke:var(--avorio);stroke-width:1.6;
  vector-effect:non-scaling-stroke}
.tasto-play path{fill:var(--avorio)}
/* con il video collegato il tasto si accende e si comporta da bottone */
.nastro-dentro.copertina.viva{cursor:pointer}
button.tasto-play{
  appearance:none;-webkit-appearance:none;border:0;padding:0;background:none;
  pointer-events:auto;cursor:pointer;
}
.nastro-dentro.copertina.viva:hover .tasto-play{transform:scale(1.07)}
.nastro-dentro.copertina.viva:hover .tasto-play circle{fill:rgba(12,12,11,.62)}
button.tasto-play:focus-visible{outline:2px solid var(--oro-chiaro);outline-offset:6px;border-radius:50%}
.nastro-dentro.copertina iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* la testata degli artisti porta lo stesso scatto scurissimo della home:
   stesso filo di luce in piu', altrimenti resta una lastra nera */
.testata.morbida .sfondo img{filter:brightness(1.2) contrast(1.05);object-position:center 44%}
@media (prefers-reduced-motion:reduce){.tasto-play{transition:none}}

/* ============================================================
   L'IMPAGINATO DEI FOGLI DI CARTA
   I titoli grossi al centro e i testi disposti sotto invece che
   appoggiati tutti al margine sinistro, che lasciava mezza pagina
   vuota. Il testo di lettura resta allineato a sinistra: una
   colonna lunga centrata si legge male, perche' l'occhio perde il
   capo della riga a ogni ritorno.
   ============================================================ */
.centrato{text-align:center}
.display.centrato{margin-left:auto;margin-right:auto}

.blocco.carta > .occhiello,
.blocco.carta > .display,
.blocco.carta > .minuscolo{
  text-align:center;margin-left:auto;margin-right:auto;
}
/* la narrativa di apertura: una colonna sola, al centro della pagina */
.blocco.carta > .narrativa{
  max-width:52ch;margin-left:auto;margin-right:auto;text-align:left;
}
/* il corpo da solo (senza l'incisione accanto) sta al centro */
.blocco.carta > .corpo{margin-left:auto;margin-right:auto}
.blocco.carta > .calendario,
.blocco.carta > .caratteri{margin-left:auto;margin-right:auto}
.blocco.carta > .conteggio-sere{justify-content:center}

/* ---------- il testo di apertura a tutta larghezza ----------
   Un blocco solo sotto il titolo, da un margine all'altro, non due
   colonne affiancate. La misura resta leggibile perche' il corpo del
   testo cresce con la larghezza. */
.blocco.carta > .corpo.largo{
  max-width:none;margin-top:clamp(26px,3.6vh,46px);
  font-size:clamp(1.14rem,1.42vw,1.52rem);line-height:1.5;
}
.blocco.carta > .corpo.largo p + p{margin-top:.9em}

@media (prefers-reduced-motion:reduce){.sigla{text-shadow:none}}

/* la firma chiude il foglio, al centro sotto le due colonne */
.blocco.carta > .firma{margin-left:auto;margin-right:auto;margin-top:clamp(30px,4.6vh,56px)}

/* ============================================================
   LA PAGINA DEGLI ARTISTI, SU UN FOGLIO SOLO
   Prima ogni scheda aveva per fondale la propria fotografia
   sfocata: due schermate, due colori, due livelli di buio, e il
   ritratto che poggiava su una versione sgranata di se stesso.
   Qui il fondo e' uno, chiaro e uguale per tutte e due, e le
   fotografie sono due lastre appoggiate sopra la carta.
   ============================================================ */
.foglio-artisti{
  padding-left:0;padding-right:0;
  padding-top:clamp(56px,9vh,110px);
  padding-bottom:clamp(56px,9vh,110px);
}
.scheda{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(30px,4.6vw,84px);
  padding:clamp(40px,6vh,80px) var(--gutter);
  text-align:left;
}
.scheda.rovescio{grid-template-columns:minmax(0,.58fr) minmax(0,.42fr)}
.scheda.rovescio .lastra-ritratto{order:2}
.scheda.rovescio .dentro{order:1}

/* La fotografia e' appoggiata sulla carta: niente cornice bianca, solo
   l'ombra che fa un oggetto posato su un foglio. L'ombra e' una sola e
   larga, cosi' il bordo resta netto e sotto si apre il distacco. */
.foglio-artisti .lastra-ritratto{
  /* la larghezza segue il tetto d'altezza, altrimenti con max-height
     la lastra resta larga quanto la colonna e il 2:3 si perde */
  aspect-ratio:2/3;max-height:74svh;width:min(100%,calc(74svh * 2 / 3));
  background:none;padding:0;
  box-shadow:0 30px 60px -18px rgba(34,33,28,.42),0 4px 10px rgba(34,33,28,.14);
  will-change:transform;
}
.foglio-artisti .lastra-ritratto img{object-position:center 44%}

/* i colori del testo sulla carta */
.scheda .display{color:var(--inchiostro)}
.scheda .ruolo{
  display:block;margin-top:14px;
  font-family:'Archivo',sans-serif;font-weight:500;
  font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro-carta);
}
.scheda p{
  margin-top:22px;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.08rem,1.5vw,1.36rem);line-height:1.42;letter-spacing:-.012em;
  color:#3A362F;max-width:46ch;
}
.scheda .allori{margin-top:30px}
.scheda .link-oro{margin-top:26px}

@media(max-width:900px){
  .scheda,.scheda.rovescio{
    grid-template-columns:1fr;gap:clamp(26px,4vh,40px);
    padding:clamp(34px,5vh,56px) var(--gutter);
  }
  .scheda.rovescio .lastra-ritratto,.scheda .lastra-ritratto{order:1;max-height:62svh}
  .scheda.rovescio .dentro,.scheda .dentro{order:2}
}

/* la testa del foglio degli artisti */
.testa-foglio{text-align:center;padding:0 var(--gutter) clamp(20px,3vh,44px)}
.testa-foglio .occhiello{color:var(--oro-carta)}
.testa-foglio .sottotitolo{
  margin-top:18px;
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.8rem);letter-spacing:-.02em;color:var(--oro-carta);
}

/* ---------- la citazione ----------
   La frase sta in basso a sinistra, dove la fotografia e' scura e vuota,
   e si tiene stretta: prima arrivava sotto la figura dell'uomo bendato.
   Il fuoco dello scatto e' spostato a destra per lasciarle il posto. */
/* La frase sta in basso a sinistra, sulla fascia scura del primo piano,
   dove non incontra la figura dell'uomo bendato. La misura e' in vw e
   non in ch: `ch` qui si misura sul corpo del contenitore, non su quello
   del titolo, e veniva fuori una colonna stretta un terzo del dovuto. */
.citazione{align-items:flex-end}
.citazione .dentro{max-width:min(100%,62vw)}
.citazione .frase{margin:0}
/* la virgoletta d'apertura sporge nel margine, come in un libro */
.citazione .frase .mask:first-child{margin-left:-.42em}
@media(max-width:900px){.citazione .dentro{max-width:100%}}

/* ---------- due colonne di testo sopra una fotografia ----------
   Tre paragrafi incolonnati facevano una striscia alta quanto tutta la
   scena; affiancati occupano la larghezza e lasciano respirare la foto. */
.due-colonne{
  margin-top:26px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,44px) clamp(26px,3vw,56px);
  align-items:start;
}
.due-colonne > p{margin:0}
.due-colonne > p:last-child{grid-column:1 / -1;max-width:62ch}
@media(max-width:860px){
  .due-colonne{grid-template-columns:1fr;gap:18px}
  .due-colonne > p:last-child{grid-column:auto}
}
/* un paragrafo solo e stretto: la fotografia deve restare leggibile */
.scena.basso .dentro{max-width:min(100%,640px)}
.scena p.stretta{max-width:46ch}


/* ---------- gli artisti su telefono: ultime messe a punto ----------
   Stanno in fondo al foglio perche' le regole di base dei nomi vengono
   dopo il blocco a 900px e, a parita' di peso, vincevano loro. */
@media(max-width:620px){
  .scena.duetto .nomi .n{font-size:clamp(.76rem,3.2vw,1rem);line-height:1.12}
  .scena.duetto .nomi small{font-size:.68rem}
  .scena.duetto .dentro .display{font-size:clamp(1.4rem,6.4vw,2.1rem)}
}