@charset "utf-8";

/* =========================================================================
   Solchi di balsamico — La tradizione è viva
   Foglio di stile unico. Nessuna dipendenza esterna: tutto ciò che serve
   (caratteri compresi) è servito dal dominio.
   ========================================================================= */

/* ---------- caratteri ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/cormorant-garamond-300.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;
  src:url(../fonts/cormorant-garamond-300-italic.woff2) format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/lora-400.woff2) format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/lora-400-italic.woff2) format('woff2')}
/* Il 600 serve ai nomi propri dentro le sinossi. Non si preordina come gli
   altri: sta dentro due testi che su telefono partono chiusi, e anticiparlo
   ruberebbe banda alla prima schermata. */
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/lora-600.woff2) format('woff2')}

/* ---------- variabili ---------- */
:root{
  --ink:#14110e; --ink2:#0d0b09; --paper:#efe7d8;
  --gold:#b68235; --gold-lt:#e2c48d; --gold-dk:#8a6127;
  --txt:#ece5d8; --dim:#c8bda8; --mute:#7f7462;
  --e:cubic-bezier(.16,1,.3,1);
  --px:clamp(20px,6vw,96px);
  --sa-l:env(safe-area-inset-left,0px); --sa-r:env(safe-area-inset-right,0px);
  --sa-t:min(env(safe-area-inset-top,0px),32px); --sa-b:env(safe-area-inset-bottom,0px);
  --hdr-h:60px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 12px)}
body{margin:0;background:var(--ink);color:var(--txt);
  font-family:'Lora',Georgia,'Times New Roman',serif;font-size:16px;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture{display:block;max-width:100%}
/* Gli attributi width/height servono a riservare lo spazio prima del
   caricamento: senza height:auto resterebbero anche dopo, deformando. */
img{height:auto}
a{color:var(--gold);text-decoration:none}
button{font:inherit;color:inherit;margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:rgba(182,130,53,.3);color:#fff}
h1,h2,h3,p,blockquote,figure,ol,ul{margin:0}
.ser{font-family:'Cormorant Garamond','Cormorant',Georgia,serif;font-weight:300}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- puntatore: il tragno della Consorteria ----------
   Solo dove esiste un puntatore fine: sul tocco un cursore non si vede e
   sostituirlo rallenterebbe soltanto la resa. Il PNG serve ai browser che
   non disegnano i cursori SVG (Safari). */
@media (hover:hover) and (pointer:fine){
  /* Su tutto, non solo sugli elementi attivi: l'alternanza fra tragno e
     freccia era un difetto, non una distinzione. Il PNG serve ai browser che
     non disegnano i cursori SVG (Safari). */
  *,*::before,*::after{
    cursor:url(../img/cursor-tragno.svg) 16 24,
           url(../img/cursor-tragno.png) 16 24, default}
}

/* ---------- fotografie: nessun invito al prelievo ----------
   Non è una protezione crittografica — chi conosce gli strumenti del browser
   arriva comunque al file — ma toglie di mezzo trascinamento, menu contestuale
   e "salva immagine" del tocco prolungato, cioè tutte le vie ordinarie. */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;pointer-events:none}
.shot{position:relative;display:block;overflow:hidden}
.shot::after{content:"";position:absolute;inset:0;z-index:2}

/* ---------- lingua: scambio in CSS, nessun ciclo JS ---------- */
.lgsw{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
#lg-it:checked ~ * [data-en]{display:none!important}
#lg-en:checked ~ * [data-it]{display:none!important}

/* ---------- comparse ---------- */
.js .rise{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--e) var(--d,0ms),transform 1.05s var(--e) var(--d,0ms)}
.js .rise.in{opacity:1;transform:none}
.js .rule{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--e)}
.js .rule.in{transform:none}

/* ---------- impianto ---------- */
.sec{position:relative;padding:clamp(64px,11vh,140px) var(--px)}
.sec--paper{background:var(--paper);color:#201f1d;padding-bottom:clamp(50px,9vh,110px)}
/* Una parola sola portata avanti dal colore: l'oro chiaro della palette, che
   sul fondo scuro della fascia è la tinta più calda che resti pienamente
   leggibile — il --gold pieno, a questa misura, si spegne. */
.caldo{color:var(--gold-lt)}
.sec--band{background:var(--ink2);padding-block:clamp(70px,13vh,150px);
  border-top:1px solid rgba(182,130,53,.22);border-bottom:1px solid rgba(182,130,53,.22)}
.wrap{max-width:1240px;margin-inline:auto}
.wrap--n{max-width:1000px;margin-inline:auto;text-align:center}
.wrap--w{max-width:1500px;margin-inline:auto}
/* Nessuna scritta sotto i 12 px, in nessun punto della pagina: se un'etichetta
   merita di esserci merita di leggersi. Gli occhielli partono da 13 px e la
   spaziatura scende da .36em a .28em, altrimenti su colonna stretta la riga
   diventa più larga dello schermo. */
.eyebrow{font-size:clamp(16px,1.75vw,18px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);line-height:1.6}
.eyebrow--dk{color:var(--gold-dk)}
.hr{height:1px;background:#d9cdb6;margin:clamp(28px,5vh,54px) 0 clamp(34px,6vh,62px)}
.hr--gold{background:rgba(182,130,53,.28)}

/* ---------- testata ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:10px;min-height:var(--hdr-h);
  padding:10px calc(clamp(14px,4vw,46px) + var(--sa-r)) 10px calc(clamp(14px,4vw,46px) + var(--sa-l));
  padding-top:calc(10px + var(--sa-t))}
.hdr__bg{position:absolute;inset:0;background:rgba(13,11,9,0);
  transition:background .45s ease,backdrop-filter .45s ease;pointer-events:none}
.hdr.solid .hdr__bg{background:rgba(13,11,9,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* Sopra le fasce su fondo crema la testata si inverte: chiaro su chiaro
   sarebbe illeggibile. */
.hdr.on-light .brand,.hdr.on-light .nav a{color:#6b5a3e}
.hdr.on-light .nav a:hover{color:#201f1d}
.hdr.on-light .lang label,.hdr.on-light .burger{color:rgba(43,40,35,.62)}
#lg-it:checked ~ .hdr.on-light label[for="lg-it"],
#lg-en:checked ~ .hdr.on-light label[for="lg-en"]{color:#201f1d;border-color:var(--gold-dk)}
.hdr.on-light.solid .hdr__bg{background:rgba(239,231,216,.92)}
.hdr.on-light .hdr__pg{background:linear-gradient(90deg,var(--gold-dk),var(--gold))}
.hdr__pg{position:absolute;top:0;left:0;height:2px;width:100%;transform:scaleX(0);
  transform-origin:left;background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt));pointer-events:none}
/* Il marchio non è in Cormorant come i titoli: a questa misura un display da
   300 perde le aste sottili, e in maiuscoletto spaziato si legge male. Lora è
   un carattere da testo, tiene il peso in piccolo, ed è lo stesso registro
   delle altre maiuscole minute della pagina — i pulsanti, i numeri dei
   capitoli. Essendo più largo di Cormorant, la spaziatura fra le lettere
   rientra per non far toccare al marchio i pulsanti della lingua. */
.brand{position:relative;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'Lora',Georgia,serif;font-weight:400;font-size:clamp(14px,2.7vw,19px);
  letter-spacing:clamp(.02em,.32vw,.17em);text-transform:uppercase;color:#ece2cf}
.hdr__r{position:relative;display:flex;align-items:center;gap:clamp(4px,1.6vw,22px);flex:0 0 auto}
.nav{display:flex;align-items:center;gap:clamp(10px,1.8vw,26px)}
.nav a{font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(236,229,216,.66);
  padding:14px 2px;transition:color .3s ease}
.nav a:hover{color:#f0e2c6}
.lang{position:relative;display:flex;align-items:center;gap:2px;flex:0 0 auto}
.lang label{display:flex;align-items:center;justify-content:center;
  min-height:44px;min-width:40px;padding:6px 8px;background:none;border:1px solid transparent;
  border-radius:4px;color:rgba(236,229,216,.42);font-size:14.5px;letter-spacing:.16em;
  transition:color .3s ease,border-color .3s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#lg-it:checked ~ * label[for="lg-it"],
#lg-en:checked ~ * label[for="lg-en"]{color:#f0e2c6;border-color:var(--gold)}
.lgsw:focus-visible ~ * label[for="lg-it"],
.lgsw:focus-visible ~ * label[for="lg-en"]{outline:2px solid var(--gold);outline-offset:3px}

/* pulsante del sommario (solo su schermi stretti) */
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  padding:0;background:none;border:0;color:rgba(236,229,216,.78);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.burger span{display:block;position:relative;width:20px;height:1px;background:currentColor;
  transition:transform .35s var(--e),background .2s ease}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1px;
  background:currentColor;transition:transform .35s var(--e)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.hdr.menu-open .burger span{background:transparent}
.hdr.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.hdr.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* sommario a tutta pagina */
.menu{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(18px,4vh,34px);
  background:rgba(13,11,9,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.menu.on{opacity:1;visibility:visible}
.menu a{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(30px,9vw,52px);line-height:1;color:#f0e2c6;padding:8px 14px}
.menu .eyebrow{margin-bottom:6px}

/* ---------- velario ---------- */
.curtain{position:fixed;inset:0;z-index:9998;pointer-events:none}
.curtain i{position:absolute;top:0;bottom:0;width:50.2%;background:var(--ink2);display:block}
.curtain i:first-child{left:0;animation:curtL 1.35s cubic-bezier(.76,0,.24,1) .2s both}
.curtain i:last-child{right:0;animation:curtR 1.35s cubic-bezier(.76,0,.24,1) .2s both}
@keyframes curtL{to{transform:translateX(-101%)}}
@keyframes curtR{to{transform:translateX(101%)}}
@keyframes wordUp{from{transform:translateY(115%) rotate(2.2deg)}to{transform:none}}
@keyframes softIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- la scarica di immagini ----------
   Dodici fotogrammi, duecento millisecondi l'uno, in ciclo continuo: è la
   sequenza del sito precedente, stesse fotografie e stesso passo. Gira
   soltanto mentre è sullo schermo, e parte quando i fotogrammi sono
   decodificati — altrimenti si vedrebbero lampeggiare dei vuoti. */
.manifesto{position:relative;height:100vh;height:100svh;min-height:520px;max-height:1100px;
  overflow:hidden;background:var(--ink2);isolation:isolate}
.manifesto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
/* Prima del via resta in scena il fotogramma da cui partirà il ciclo: mai un
   riquadro nero, e nessuno scarto quando la sequenza si avvia. */
.manifesto.pronto img.avvio{opacity:1}
.manifesto.gira img{opacity:0;
  animation:flash var(--tot,2400ms) steps(1,end) infinite;will-change:opacity}
@keyframes flash{0%{opacity:1}10%{opacity:1}11%{opacity:0}100%{opacity:0}}
.manifesto__veil{position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.32) 0%,rgba(13,11,9,.64) 60%,rgba(13,11,9,.9) 100%)}
.manifesto__w{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,6vw,80px);text-align:center}
.manifesto__w p{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(34px,8.4vw,104px);line-height:1.04;color:#f2e4c6;
  /* Due ombre: quella larga del vecchio sito e una stretta che stacca le
     lettere anche sui fotogrammi più chiari, senza scurire le fotografie. */
  text-shadow:0 2px 10px rgba(0,0,0,.75),0 4px 32px rgba(0,0,0,.85);
  text-wrap:balance}
.manifesto__w em{font-style:italic;color:var(--gold-lt)}
@media (max-height:560px) and (orientation:landscape){
  .manifesto{height:auto;min-height:0;aspect-ratio:16/9}
  .manifesto__w p{font-size:clamp(26px,6vh,54px)}
}

/* ---------- apertura ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:center;
  background:var(--ink2);overflow:hidden;isolation:isolate}
/* Fotografia e video stanno nella stessa cornice: lo scorrimento muove quella,
   non i due elementi separatamente. La fotografia resta sotto come poster —
   se il video non parte (autoplay negato, risparmio energetico, rete lenta)
   non si vede alcun buco. */
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;will-change:transform}
.hero__img,.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__img{opacity:.92;transition:opacity 1.4s ease}
.hero__vid{opacity:0;transition:opacity 1.4s ease;background:var(--ink2)}
/* Quando il filmato è in scena la fotografia esce del tutto. Se restasse
   sotto, anche solo per la frazione lasciata scoperta dall'opacità del video,
   si mescolerebbe a ogni fotogramma: una macchia ferma sopra le immagini in
   movimento. Il video va quindi a opacità piena e il poster si dissolve. */
.hero__vid.on{opacity:1}
.hero.video-on .hero__img{opacity:0}
/* Il filmato è più chiaro della fotografia e cambia inquadratura ogni paio di
   secondi, quindi il velo va ritoccato — ma il meno possibile: scurire
   comprime la gamma tonale e fa comparire i gradini nei cieli. Questi valori
   sono il minimo che tiene leggibile il titolo sui fotogrammi più chiari. */
.hero.video-on .hero__veil--a{
  background:linear-gradient(95deg,rgba(13,11,9,.93) 0%,rgba(13,11,9,.8) 42%,rgba(13,11,9,.44) 72%,rgba(13,11,9,.72) 100%)}
.hero.video-on .hero__veil--b{
  background:linear-gradient(to top,rgba(13,11,9,.82),rgba(13,11,9,.1) 60%)}

.hero__veil{position:absolute;inset:0;z-index:-1}
.hero__veil--a{background:linear-gradient(95deg,rgba(13,11,9,.94) 0%,rgba(13,11,9,.8) 42%,rgba(13,11,9,.42) 72%,rgba(13,11,9,.72) 100%)}
.hero__veil--b{background:linear-gradient(to top,rgba(13,11,9,.82),transparent 55%)}
.hero__in{padding:clamp(88px,11vh,132px) clamp(20px,5vw,84px);
  padding-left:calc(clamp(20px,5vw,84px) + var(--sa-l));padding-right:calc(clamp(20px,5vw,84px) + var(--sa-r))}
.hero__col{max-width:1060px}
/* I due titoli hanno lo stesso rango: «Solchi di balsamico» è il titolo del
   libro, «La tradizione è viva» quello del film. Stessa misura e stesso peso;
   a distinguerli restano il colore — avorio il libro, oro il film — e il
   corsivo. */
.hero h1,.hero__sub{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(36px,9.2vw,112px);line-height:.94;letter-spacing:-.015em;text-wrap:balance}
.hero h1{color:#f6efe2}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 b{display:block;font-weight:inherit}
.js .hero h1 b{animation:wordUp 1.4s var(--e) var(--t0,1.15s) both}
.hero__sub{margin-top:clamp(10px,1.8vh,22px);font-style:italic;color:var(--gold-lt)}
.js .hero__sub{animation:softIn 1.1s ease-out calc(var(--t0,1.15s) + .45s) both}
.js .hero__foot{animation:softIn 1.1s ease-out calc(var(--t0,1.15s) + .63s) both}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
/* I pulsanti stanno sotto il testo, non a fianco: affiancati spezzavano la
   bandiera a sinistra e il blocco perdeva il suo asse. */
.hero__foot{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(24px,3.6vh,40px);margin-top:clamp(26px,4.6vh,50px)}
/* Testo giustificato: la sillabazione, guidata dall'attributo lang, spezza le
   parole lunghe e tiene regolari gli spazi fra le parole. */
.hero__foot p{max-width:none;font-size:clamp(15px,1.25vw,18px);line-height:1.75;color:#d3c9b6;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3;
  orphans:2;widows:2}
.hero__down{position:absolute;left:50%;bottom:calc(18px + var(--sa-b));translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:rgba(236,229,216,.62)}
.hero__down i{display:block;width:1px;height:34px;background:linear-gradient(rgba(182,130,53,.05),var(--gold))}
.js .hero__down{animation:softIn 1.2s ease-out calc(var(--t0,1.15s) + .9s) both}

/* ---------- pulsanti ---------- */
.cta{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 clamp(17px,3vw,26px);
  border:1px solid var(--gold);border-radius:4px;background:rgba(182,130,53,.06);color:#f0e2c6;
  font-family:'Lora',Georgia,serif;font-size:clamp(13.5px,1.25vw,15px);letter-spacing:.12em;text-transform:uppercase;
  transition:background .4s ease,color .4s ease,transform .4s var(--e),border-color .4s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cta i{display:inline-block;width:0;height:0;border-left:9px solid currentColor;
  border-top:6px solid transparent;border-bottom:6px solid transparent;flex:0 0 auto}
.cta--dk{background:transparent;color:#6b4a16;border-color:var(--gold-dk)}
.cta--fill{background:var(--gold);border-color:var(--gold);color:#14110e}
@media (hover:hover){
  .cta:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
  .cta--fill:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:#14110e}
}
.cta:active{background:var(--gold);color:var(--ink);transform:translateY(0)}
.cta--fill:active{background:var(--gold-lt);color:#14110e}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- citazione ---------- */
.quote{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-style:italic;
  font-size:clamp(25px,4.6vw,58px);line-height:1.16;color:#f2ead9;text-wrap:pretty}

/* ---------- sinossi ---------- */
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.head h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(32px,6.4vw,84px);line-height:.98;letter-spacing:-.015em}
.head__sub{margin-top:10px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(23px,2.4vw,30px);line-height:1.25;color:var(--gold-dk)}
.head__note{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(21px,2vw,26px);line-height:1.3;color:#6b5a3e}
.lede{margin-bottom:clamp(28px,4vh,46px);font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(21px,2.6vw,34px);line-height:1.35;color:#2b2823;max-width:32ch;text-wrap:pretty}
/* I nomi delle persone e delle istituzioni portano un 600 vero, non il finto
   grassetto che il browser fabbrica ingrossando il 400: su un carattere da
   testo quello sbava le grazie, e una parola sola in mezzo a una colonna
   giustificata deve stare ferma. Il nero scende appena sotto quello del
   corpo — a fare il lavoro è il peso, non il colore. */
.cols strong{font-weight:600;color:#241f19}
.cols{columns:2 340px;column-gap:clamp(28px,4vw,60px);column-rule:1px solid #ddd0b9;
  font-size:clamp(15px,1.1vw,17px);line-height:1.85;text-align:justify;
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3;
  text-wrap:pretty;orphans:2;widows:2;color:#2e2b26}
.cols p{margin:0 0 1.25em}
.cols p:last-child{margin-bottom:0}
.cap0{float:left;font-family:'Cormorant Garamond',Georgia,serif;font-size:3.3em;line-height:.78;
  padding:.06em .12em 0 0;color:var(--gold-dk)}

/* ---------- l'opera: copertina o locandina, poi la sinossi ----------
   L'immagine precede sempre il testo — anche nel flusso del documento, così
   chi legge con la tastiera o con un lettore di schermo la incontra prima —
   e resta agganciata mentre la sinossi scorre. */
.opera{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start;margin-bottom:clamp(34px,5vh,56px)}
.opera__fig{margin:0;position:sticky;top:calc(var(--hdr-h) + 24px)}
.opera__fig .shot{box-shadow:0 22px 60px rgba(32,31,29,.28);background:#20201e;border-radius:2px}
.opera__fig img{width:100%;height:auto}
.opera__cap{margin-top:16px;font-size:14.5px;letter-spacing:.16em;text-transform:uppercase;color:#6d6455;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.opera__cap b{font-weight:400;color:var(--gold-dk);letter-spacing:.2em}
/* La frase d'apertura delle due sinossi. Una sola regola per entrambe: prima
   quella del film stava dentro le colonne e si portava dietro una misura
   diversa. */
.opera__lede{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(25px,2.6vw,34px);line-height:1.34;color:#2b2823;text-wrap:pretty;
  margin-bottom:clamp(26px,3.2vh,34px)}

/* ---------- continua a leggere ----------
   Sul telefono le due sinossi valgono sette schermate su venti. Restano in
   vista l'incipit e i primi capoversi, il resto sfuma: la dissolvenza dice
   «c'è dell'altro, ed è qui» meglio di qualunque etichetta, e chi legge
   continua qualcosa che ha già cominciato invece di aprire una scatola chiusa.
   Il testo resta comunque nel documento — nasconderlo con il CSS non costa
   nulla, caricarlo dopo toglierebbe indicizzazione, ricerca nella pagina e
   lettori di schermo. */
.apri{display:none}
.apri[aria-expanded="false"] .apri__meno,
.apri[aria-expanded="true"] .apri__piu{display:none}

/* segnale di ingrandimento sulle fotografie impaginate */
.zoom{display:block;position:relative;width:100%;padding:0;border:0;background:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.zoom .shot::before{content:"";position:absolute;z-index:3;right:12px;bottom:12px;width:34px;height:34px;
  border-radius:50%;background:rgba(13,11,9,.55) center/14px 14px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2c48d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 3H3v6M15 21h6v-6M3 15v6h6M21 9V3h-6'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.82);transition:opacity .35s ease,transform .45s var(--e);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@media (hover:hover) and (pointer:fine){
  .zoom:hover .shot::before,.zoom:focus-visible .shot::before{opacity:1;transform:none}
  .zoom .shot img{transition:filter .6s ease}
  .zoom:hover .shot img,.zoom:focus-visible .shot img{filter:brightness(1.07) saturate(1.04)}
}
@media (hover:none){.zoom .shot::before{opacity:.85;transform:none}}

/* ---------- capitoli ---------- */
.chapters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:start}
.plates{position:relative;aspect-ratio:4/3;background:var(--ink2);overflow:hidden}
.plates .plate{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transform:scale(1.06);pointer-events:none;
  transition:opacity 1s var(--e),transform 1.3s var(--e)}
.plates .plate.on{opacity:1;transform:none;pointer-events:auto}
.plates .shot{height:100%}
.plates picture{display:block;height:100%}
.plates img{width:100%;height:100%;object-fit:cover}
.chaplist{list-style:none;margin:0;padding:0;border-top:1px solid rgba(236,229,216,.14)}
.chaplist li{border-bottom:1px solid rgba(236,229,216,.14)}
.chap{display:flex;align-items:baseline;gap:clamp(14px,2vw,30px);width:100%;min-height:60px;
  padding:clamp(14px,2.2vh,24px) 4px;background:none;border:0;text-align:left;
  color:rgba(236,229,216,.62);transition:color .4s ease,padding-left .5s var(--e);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.chap[aria-current="true"]{color:#f6efe2;padding-left:18px}
.chap .n{font-family:'Lora',Georgia,serif;font-size:14.5px;letter-spacing:.16em;
  color:rgba(182,130,53,.55);transition:color .4s ease;font-variant-numeric:tabular-nums;flex:0 0 auto}
.chap[aria-current="true"] .n{color:var(--gold-lt)}
.chap .t{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(22px,3.4vw,44px);line-height:1.05;min-width:0}

/* ---------- galleria ---------- */
/* Senza JavaScript vale l'incolonnamento del CSS. Con JavaScript le colonne le
   costruisce il copione e le bilancia per altezza: l'incolonnamento del CSS non
   può spezzare i blocchi, e quando le fotografie hanno formati molto diversi
   lascia l'ultima colonna molto più lunga delle altre, con un vuoto accanto. */
.gal{columns:3 300px;column-gap:14px}
.gal > .rise{margin:0 0 14px;break-inside:avoid;-webkit-column-break-inside:avoid}
.js .gal{columns:auto;display:flex;align-items:flex-start;gap:14px}
.js .gal > .rise{margin:0}
.gal__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.gal figure{margin:0;background:var(--ink2)}
.gal img{width:100%;height:auto}
.galhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px;margin:0 6px clamp(26px,4vh,46px)}
.galnote{margin:clamp(26px,4vh,42px) 6px 0;font-size:14.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);line-height:1.8}

/* ---------- i luoghi ----------
   Due porte verso l'esterno, trattate come le tavole dei capitoli: la
   fotografia sta sotto, attenuata, e si scalda al passaggio del puntatore.
   Sul tocco resta leggibile senza bisogno di scaldarsi. */
.luoghi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,3vw,34px);margin-top:clamp(30px,5vh,54px)}
.luogo{position:relative;display:block;overflow:hidden;background:var(--ink);
  border:1px solid rgba(182,130,53,.18);border-radius:2px;
  -webkit-tap-highlight-color:transparent}
.luogo .shot{position:absolute;inset:0}
.luogo picture,.luogo img{width:100%;height:100%;object-fit:cover}
.luogo img{opacity:.42;transition:opacity 1s var(--e),transform 1.4s var(--e)}
.luogo__veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(13,11,9,.95) 8%,rgba(13,11,9,.55) 52%,rgba(13,11,9,.25) 100%)}
.luogo__in{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(300px,34vw,420px);padding:clamp(22px,3vw,38px);
  /* Una velatura dietro al solo blocco di testo: la fotografia della
     Consorteria ha una fascia chiara di etichette proprio all'altezza
     dell'occhiello, che senza questa scenderebbe a 4,1:1 di contrasto. In alto
     l'immagine resta scoperta. */
  background:linear-gradient(to top,rgba(13,11,9,.7) 0,rgba(13,11,9,.6) 42%,rgba(13,11,9,0) 64%)}
.luogo__h{margin-top:12px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(23px,2.6vw,34px);line-height:1.08;color:#f6efe2;text-wrap:balance}
.luogo__go{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(18px,2.6vh,28px);
  font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:rgba(226,196,141,.86);
  transition:color .4s ease}
.luogo__go i{display:block;width:32px;height:1px;background:currentColor;
  transition:width .6s var(--e)}
@media (hover:hover){
  .luogo:hover img{opacity:.62;transform:scale(1.035)}
  .luogo:hover{border-color:rgba(182,130,53,.45)}
  .luogo:hover .luogo__go{color:var(--gold-lt)}
  .luogo:hover .luogo__go i{width:58px}
}
.luogo:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- fotogramma del film ---------- */
.filmfig{margin:clamp(40px,7vh,76px) auto 0;max-width:min(660px,100%)}
.filmfig img{width:100%}
.filmfig figcaption{margin:16px 2px 0;font-size:clamp(15px,1.3vw,17.5px);letter-spacing:.03em;
  line-height:1.5;color:#5d5546}

/* ---------- chiusa ---------- */
.foot{position:relative;background:var(--ink2);border-top:1px solid rgba(182,130,53,.22);
  padding:clamp(70px,12vh,150px) var(--px) calc(clamp(40px,6vh,70px) + var(--sa-b))}
.foot__grid{display:flex;flex-wrap:wrap;gap:clamp(30px,5vw,80px);align-items:flex-start;justify-content:space-between}
.foot__a{flex:1 1 320px;min-width:0}
.foot__b{flex:1 1 300px;min-width:0;font-size:14px;line-height:1.95;color:#b3a894}
.foot__b p{margin-bottom:1.2em}
.foot__b p:last-child{margin-bottom:0}
/* I due enti stanno affiancati sotto i pulsanti: chi custodisce e chi ospita,
   alla pari. L'indirizzo del Museo è lungo trentotto caratteri e in colonna
   stretta non ci starebbe: nel testo c'è un punto di capo dichiarato dopo la
   chiocciola, così se deve spezzarsi lo fa dove un indirizzo si spezza. */
.foot__rec{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,44px);
  margin-top:clamp(28px,4.4vh,48px);font-size:14px;line-height:1.95;color:#b3a894}
/* Sotto una certa larghezza i due enti si impilano invece di stringersi: a
   colonna stretta l'indirizzo del Museo si spezzerebbe a metà parola, e due
   righe pulite valgono più di tre storte. */
.foot__ente{flex:1 1 240px;min-width:0}
.foot__rec p{margin-bottom:.45em}
.foot__rec p:last-child{margin-bottom:0}
.foot__rec .lab{margin-bottom:.9em}
.foot__rec a{overflow-wrap:break-word}
.foot__rec a{color:var(--gold-lt);border-bottom:1px solid rgba(226,196,141,.28);
  transition:color .35s ease,border-color .35s ease}
@media (hover:hover){.foot__rec a:hover{color:#f1e3c6;border-color:#f1e3c6}}
.foot__b .lab,.foot__rec .lab{display:block;margin-bottom:.5em;color:var(--mute);letter-spacing:.16em;
  font-size:13.5px;text-transform:uppercase}
.foot h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(30px,5.4vw,68px);line-height:1;color:#f6efe2}
.foot__it{margin-top:12px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(24px,2.6vw,32px);line-height:1.25;color:var(--gold-lt)}
.foot__tag{margin-top:18px;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.foot .ctas{margin-top:clamp(24px,4vh,42px)}
.colophon{font-size:clamp(13px,1.8vw,14.5px);letter-spacing:.14em;text-transform:uppercase;color:#837964;line-height:1.75}
.colophon span{display:block;margin-top:12px;letter-spacing:.01em;text-transform:none;color:#8a8170;font-size:14px;line-height:1.7}

/* ---------- prenotazione del libro ---------- */
/* Il modulo si apre dov'è, sotto la copertina: prenotare è un momento di
   impegno, e ogni passaggio che porta via dalla copertina perde qualcuno.
   Chiuso, il blocco è una frase e un pulsante; aperto, sei campi e i recapiti
   diretti per chi preferisce una persona a un modulo. */
/* L'invito chiude la sezione del libro e sta al centro: in fondo a una
   colonna di testo giustificato, un pulsante a bandiera sinistra si legge
   come la coda del paragrafo. Centrato e staccato diventa un gesto a sé. */
.pren{margin-top:clamp(48px,7vh,88px);text-align:center}
.pren__apri{padding:0 clamp(24px,3.4vw,38px);
  font-size:clamp(13.5px,1.2vw,15px);letter-spacing:.18em}
/* Il pulsante si richiude. Aperto, però, smette di essere pieno: due pulsanti
   d'oro uno sopra l'altro — l'invito e l'invio — si contenderebbero l'azione.
   Aperto resta un comando quieto, con la freccia girata all'insù. */
.pren__apri i{display:block;width:8px;height:8px;flex:0 0 auto;border:0;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s var(--e)}
/* L'etichetta non cambia mai: qualunque parola per il comando di chiusura
   — chiudi, annulla, più tardi — descrive una ritirata, e suona male per
   forza. Il nome resta il soggetto, la freccia porta lo stato. A dire che
   il modulo è già aperto pensa anche il pieno che se ne va: il copione
   toglie cta--fill e mette cta--dk, il pulsante quieto della tavolozza. */
.pren__apri.aperto i{transform:rotate(-135deg) translate(-2px,-2px)}
/* Senza JavaScript il modulo è semplicemente aperto e funziona da sé: parte
   verso prenota.php e il server risponde con una pagina di cortesia. È il
   copione che lo chiude e mette il pulsante al suo posto — per questo la
   chiusura pende dalla classe .js e non da un attributo nel markup. */
.pren__fatto[hidden],.pren__err[hidden]{display:none}
.pren__box{margin:clamp(30px,4.6vh,46px) auto 0;max-width:720px;text-align:left}
.pren__apri{display:none}
.js .pren__apri{display:inline-flex}
.js .pren__apri[hidden]{display:none}
.js .pren__box{display:none}
.js .pren__box.aperto{display:block;animation:softIn .5s ease-out both}

.pren__riga{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,22px)}
.pren__riga>.campo{flex:1 1 220px;min-width:0}
.campo{display:block;margin-bottom:clamp(14px,2vw,20px)}
.campo--breve{flex:0 0 108px!important}
.campo__lab{display:block;margin-bottom:.5em;font-size:13.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#7c6a4c}
.campo__lab em{font-style:normal;letter-spacing:.06em;text-transform:none;color:#9c8c71}
.campo input,.campo textarea{display:block;width:100%;box-sizing:border-box;
  padding:13px 14px;border:1px solid rgba(138,97,39,.34);border-radius:2px;
  background:rgba(255,255,255,.55);color:#2e2b26;
  font-family:'Lora',Georgia,serif;font-size:16px;line-height:1.5;
  transition:border-color .3s ease,background .3s ease}
.campo textarea{resize:vertical;min-height:84px}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--gold);
  background:#fff}
.campo input:user-invalid{border-color:#a4471f}
/* Il campo-trappola esce dallo schermo invece di sparire: display:none e
   visibility:hidden i programmi li riconoscono e saltano il campo. */
.pren__esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pren__piede{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.4vw,26px);
  margin-top:clamp(6px,1.4vh,12px)}
.pren__nota{flex:1 1 260px;font-size:14px;line-height:1.6;color:#7c7261;margin:0}
.pren__err{margin:0 0 14px;padding:11px 14px;border-left:2px solid #a4471f;
  background:rgba(164,71,31,.07);font-size:15px;line-height:1.6;color:#8a3a18}
.pren__fatto{margin:clamp(24px,3.4vh,34px) auto 0;max-width:54ch;padding:22px 26px;
  border:1px solid rgba(182,130,53,.38);background:rgba(182,130,53,.07);
  font-size:clamp(16px,1.6vw,18px);line-height:1.65;color:#3a352d;text-align:center}

/* I recapiti diretti valgono quanto il modulo: chi preferisce una persona
   deve leggerli senza sforzo, non trovarli in nota. */
.pren__diretti{margin-top:clamp(26px,4vh,36px);padding-top:clamp(20px,3vh,26px);
  border-top:1px solid rgba(138,97,39,.24);font-size:clamp(16px,1.35vw,17.5px);
  line-height:2.05;color:#5f5648;text-align:center}
/* Il numero, fatto di cifre larghe e spaziate, appare già più grande
   dell'indirizzo, che è una fila lunga di minuscole. Per leggersi alla pari
   l'indirizzo deve misurare qualcosa in più, non altrettanto. */
.pren__diretti a[href^="mailto"]{font-size:1.09em}
.pren__diretti .campo__lab{margin-bottom:.7em;font-size:14px}
.pren__diretti a{color:var(--gold-dk);border-bottom:1px solid rgba(138,97,39,.3);
  transition:color .3s ease,border-color .3s ease}
@media (hover:hover){.pren__diretti a:hover{color:var(--gold);border-color:var(--gold)}}
.pren__sep{padding:0 10px;color:#b3a894}
@media (max-width:520px){
  /* Su colonna stretta i due recapiti stanno uno per riga: affiancati, il
     lungo indirizzo del Museo manderebbe il numero a capo da solo. */
  .pren__diretti a{display:block}
  .pren__sep{display:none}
  .pren__piede .cta{width:100%;justify-content:center}
}

/* ---------- ingrandimento a schermo intero ---------- */
.lb{position:fixed;inset:0;width:100%;max-width:100%;height:100%;max-height:100%;
  margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:var(--txt);
  /* I margini del palco sono dichiarati una volta sola: servono sia al
     riempimento sia al limite di altezza della fotografia, e le percentuali
     annidate non basterebbero a calcolarlo. */
  --lb-t:calc(56px + var(--sa-t)); --lb-b:calc(56px + var(--sa-b));
  --lb-x:clamp(10px,3vw,72px)}
.lb::backdrop{background:rgba(6,5,4,.92)}
.lb__bg{position:absolute;inset:0;background:rgba(6,5,4,.985)}
.lb__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:var(--lb-t) var(--lb-x) var(--lb-b);touch-action:none;overflow:hidden}
.lb__box{position:relative;line-height:0;max-width:100%;max-height:100%;
  transform-origin:50% 50%;will-change:transform}
.lb__box img{display:block;width:auto;height:auto;
  max-width:calc(100vw - var(--lb-x) - var(--lb-x));
  max-height:calc(100vh - var(--lb-t) - var(--lb-b));
  box-shadow:0 30px 90px rgba(0,0,0,.6)}
@supports (height:100dvh){
  .lb__box img{max-height:calc(100dvh - var(--lb-t) - var(--lb-b))}
}
/* Sopra la fotografia c'è uno scudo trasparente: il menu contestuale e il
   tocco prolungato trovano lui, non l'immagine. */
.lb__box::after{content:"";position:absolute;inset:0}
.lb__btn{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;background:rgba(20,17,14,.6);border:1px solid rgba(182,130,53,.3);
  border-radius:50%;color:#f0e2c6;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .3s ease,border-color .3s ease,opacity .3s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (hover:hover){.lb__btn:hover{background:rgba(182,130,53,.9);border-color:var(--gold);color:#14110e}}
.lb__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.lb__x{top:calc(12px + var(--sa-t));right:calc(12px + var(--sa-r))}
.lb__nav{top:50%;margin-top:-24px}
.lb__prev{left:calc(12px + var(--sa-l))}
.lb__next{right:calc(12px + var(--sa-r))}
.lb__nav[hidden]{display:none}
html.lb-open,body.lb-open{overflow:hidden}

/* ================= adattamenti ================= */
@media (max-width:1000px){
  .opera{grid-template-columns:minmax(0,1fr);gap:clamp(24px,5vw,40px)}
  .opera__fig{position:static;max-width:min(360px,78%);margin-inline:auto;text-align:center}
  .opera__cap{justify-content:center}
}
@media (max-width:900px){
  .chapters{grid-template-columns:minmax(0,1fr)}
}
/* Con le voci ingrandite il sommario disteso non sta più accanto al marchio
   sotto i mille pixel: sotto questa soglia passa al pannello. Meglio un
   pulsante che un marchio troncato. */
@media (max-width:1009px){
  .nav{display:none}
  .burger{display:flex}
}
@media (max-width:820px){
  .opera__txt{position:relative}
  .js .opera__txt[data-chiuso]{max-height:56vh;overflow:hidden}
  .js .opera__txt[data-chiuso]::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;
    height:min(190px,26vh);pointer-events:none;
    background:linear-gradient(to top,var(--paper) 14%,rgba(239,231,216,.88) 44%,rgba(239,231,216,0))}
  .js .apri{display:inline-flex;align-items:center;justify-content:center;gap:14px;
    width:100%;min-height:54px;margin-top:22px;padding:0 20px;
    background:none;border:1px solid var(--gold-dk);border-radius:4px;color:#6b4a16;
    font-family:'Lora',Georgia,serif;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;
    transition:color .35s ease,border-color .35s ease;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .apri i{display:block;width:8px;height:8px;flex:0 0 auto;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s var(--e)}
  .apri[aria-expanded="true"] i{transform:rotate(-135deg) translate(-2px,-2px)}
  .apri[aria-expanded="true"]{color:#8a7c61;border-color:rgba(138,97,39,.42)}

  /* Sui telefoni l'apertura è un manifesto: il filmato prende tutto lo
     schermo e il titolo si appoggia in basso, sull'ombra. Alzarne l'altezza
     al contenuto — come si faceva prima — comprimeva l'inquadratura per
     lasciar spuntare in fondo la citazione, che restava tagliata a metà:
     due cose sacrificate per non darne intera nessuna. */
  .hero{min-height:100svh;align-items:end}
  /* Il blocco non si appoggia al bordo: sta sul terzo basso e sotto gli
     resta aria, che è anche quella che separa il richiamo a scorrere dai
     pulsanti. Appoggiato in fondo il manifesto risultava pesante da un lato
     solo. */
  .hero__in{padding-top:calc(var(--sa-t) + 88px);
    padding-bottom:calc(clamp(104px,14.5vh,144px) + var(--sa-b))}
  /* Il richiamo a scorrere: senza la citazione che spuntava serve un segno
     che dica che la pagina continua. Filetto e parola più corti che su
     schermo largo — qui la scena è del filmato — e con aria sotto i
     pulsanti, altrimenti sembra un refuso attaccato al bordo. */
  .hero__down{bottom:calc(12px + var(--sa-b));font-size:11.5px;
    letter-spacing:.2em;gap:7px}
  .hero__down i{height:24px}
  /* I veli cambiano verso: in verticale non si scurisce un fianco ma il piede.
     In mezzo il filmato resta quasi scoperto — è lui il protagonista — e il
     buio si concentra dove ci sono le parole, in cima per la testata e in
     fondo per il titolo. */
  .hero__veil--a,.hero.video-on .hero__veil--a{
    background:linear-gradient(to bottom,rgba(13,11,9,.82) 0,rgba(13,11,9,.56) 5%,
      rgba(13,11,9,.34) 11%,rgba(13,11,9,.2) 19%,rgba(13,11,9,.14) 30%,
      rgba(13,11,9,.12) 44%,rgba(13,11,9,.12) 100%)}
  .hero__veil--b,.hero.video-on .hero__veil--b{
    background:linear-gradient(to top,rgba(13,11,9,.93) 0,rgba(13,11,9,.87) 24%,
      rgba(13,11,9,.6) 42%,rgba(13,11,9,.22) 58%,transparent 72%)}
  /* La frase d'occhiello smette di essere un paragrafo giustificato: su una
     colonna stretta i buchi fra le parole si allargavano e l'ultima riga
     restava con due parole sole. Ora è a bandiera, senza sillabazione, e gli
     spazi uniti nel testo tengono insieme «sessantesimo anniversario» e
     «della Consorteria»: il capo cade fra le due cose che nomina — le opere
     e l'occasione — invece che dove capita. */
  .hero__foot p{text-align:left;hyphens:none;-webkit-hyphens:none;
    font-size:clamp(15px,4.2vw,18px);line-height:1.5;color:#d8cebc}
  .hero__foot{margin-top:clamp(18px,2.8vh,28px)}
  /* I due pulsanti a tutta larghezza pesavano quanto il titolo. Impilati ma
     stretti sulla parola più lunga restano una coppia sola, allineata alla
     bandiera del testo, e il filmato torna in primo piano. */
  .hero__cta{flex-direction:column;align-items:stretch;width:max-content;
    max-width:100%;gap:9px}
  .hero__cta .cta{width:auto;min-height:46px;padding:0 20px;
    font-size:12.5px;letter-spacing:.13em;justify-content:center}
}
@media (max-width:760px){
  .luoghi{grid-template-columns:minmax(0,1fr)}
  .luogo__in{min-height:clamp(260px,58vw,340px)}
}
@media (max-width:720px){
  /* Resta giustificato anche su colonna stretta: la sillabazione (guidata
     dall'attributo lang) spezza le parole lunghe, così gli spazi fra le parole
     restano regolari invece di allargarsi a fisarmonica. */
  .cols{font-size:15.5px;line-height:1.72;column-rule:0;hyphenate-limit-chars:5 3 3}
  /* Su colonna stretta il solo cambio di carattere non basta a distinguere
     l'apertura dal corpo: a 25 px contro 15,5 la differenza di misura c'è, ma
     i due neri restano troppo simili. Il colore d'accento della sezione — lo
     stesso del capolettera e dell'occhiello — la porta al rango che le spetta,
     e un filetto la stacca dal testo che comincia. */
  .opera__lede{color:var(--gold-dk);padding-bottom:clamp(20px,2.6vh,26px);
    border-bottom:1px solid rgba(138,97,39,.26)}
  .cap0{font-size:3em}
  .head{gap:16px}
  .head__note{display:none}
  .hero__foot{gap:26px}
  .quote{font-size:clamp(24px,6.4vw,40px)}
}
@media (max-width:640px){
  /* Sotto questa soglia i pulsanti si impilano a tutta larghezza in entrambe
     le lingue: l'etichetta inglese è più lunga e affiancarli costringerebbe a
     comprimere troppo il testo. Meglio identici che ottimizzati per una sola. */
  .ctas{width:100%;gap:12px}
  .ctas .cta{width:100%;justify-content:center}
  .lb{--lb-b:calc(132px + var(--sa-b))}
  .lb__nav{top:auto;bottom:calc(76px + var(--sa-b));margin-top:0}
}
@media (max-width:560px){
  /* Alzata la misura, il marchio non ci sta più con la spaziatura ampia: la
     si stringe e si recupera qualche pixel dai pulsanti della lingua. Meglio
     una scritta stretta che una scritta troncata. */
  .brand{letter-spacing:.05em}
  .lang label{min-width:36px;padding:6px 6px}
}
@media (max-width:520px){
  .hero h1,.hero__sub{font-size:clamp(34px,10.8vw,56px)}
  .hero__sub{margin-top:10px}
  .eyebrow{letter-spacing:.2em}
  .chap .t{font-size:clamp(21px,6vw,30px)}
  .foot__grid{gap:34px}
  .cta{width:100%;justify-content:center;letter-spacing:.16em}
  .hero__in{padding-top:calc(var(--sa-t) + 100px)}
  .hero__foot{gap:22px}
}
@media (max-width:400px){
  /* Sugli schermi più stretti il marchio ingrandito non ci starebbe: lo spazio
     si recupera dalla spaziatura fra le lettere, dai margini della testata e
     dai pulsanti della lingua, e la misura scende di mezzo punto. Meglio una
     riga intera un filo più piccola che una troncata a metà parola. */
  /* Misura fluida, non fissa: sotto i 400 px ogni pixel di larghezza conta, e
     una misura sola o tronca il marchio a 360 o lo lascia piccolo a 393. */
  .brand{font-size:clamp(12.6px,3.6vw,14.3px);letter-spacing:.005em}
  .hdr{padding-left:calc(10px + var(--sa-l));padding-right:calc(10px + var(--sa-r))}
  .lang label{min-width:32px;padding:6px 4px}
}
@media (max-width:340px){
  /* Sui pochissimi schermi da 320 px nemmeno la spaziatura basta: il marchio
     si accorcia invece di troncarsi a metà parola. Accorciato, però, di spazio
     ne avanza: torna grande e respirato. */
  .brand__coda{display:none}
  .brand{font-size:15px;letter-spacing:.07em}
}
@media (max-width:380px){
  .hero h1,.hero__sub{font-size:10.8vw}
  .cols{font-size:15.5px}
}
/* schermi larghissimi */
@media (min-width:1800px){ .wrap--w{max-width:1680px} }
/* orientamento orizzontale su telefono: l'apertura non deve occupare tutto */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:0}
  .hero__in{padding-top:calc(var(--sa-t) + 84px);
    padding-bottom:calc(clamp(56px,14vh,80px) + var(--sa-b))}
}
/* chi chiede meno movimento ne riceve meno: niente velario, niente scarica */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .curtain{display:none!important}
  .manifesto.gira img{animation:none}
  .manifesto img:first-of-type{opacity:1}
  .js .rise{opacity:1;transform:none}
  .js .rule{transform:none}
}
@media print{
  .hdr,.curtain,.menu,.lb,.hero__down,.zoom .shot::before{display:none!important}
  body{background:#fff;color:#000}
  .sec,.foot{padding:24px 0}
  .opera{display:block}
}