/* ==========================================================================
   PAGINE INTERNE — /storia/, /albo-d-oro/, /candidature/, /informazioni-ufficiali/

   Stesse famiglie di impaginazione della home, non una terza lingua:
   - "banda": fascia a piena larghezza con filigrana grande dietro, lati
     alternati, fotografia con parallasse. E' la famiglia della carriera.
   - "cascata": tre voci sfalsate in diagonale, apertura a clip-path. E' la
     famiglia della giuria.
   Le griglie di schede affiancate non si usano: sono state bocciate.

   Mobile first. html ha font-size 10px, quindi 1rem = 10px. Un solo salto a
   desktop con @media (min-width: 1024px).

   I valori di ripiego dentro var() sono lo stato di riposo: senza JavaScript
   la pagina resta ferma e corretta, non rotta.
   ========================================================================== */

:root {
  --white: #f0f0f0;
  --black: #080808;
  --gold: #D4AF37;
  --gold-lt: #F5E096;
  --gold-dp: #8a6d1c;
  --carta: #f4f2ee;
  --fondo: #0a0204;
  --bordo-oro: rgba(212, 175, 55, 0.15);
  --margine: 2.4rem;
}

body {
  background: var(--fondo);
  color: var(--carta);
  font-family: 'Tenor Sans', sans-serif;
  padding-top: 8rem;
}

/* Sfondo fisso in filigrana: rompe il nero piatto senza competere con il
   testo. E' il primo elemento del body, quindi l'ordine del DOM basta a
   tenerlo sotto header/main/footer senza bisogno di z-index.

   Un materiale per pagina: seta (candidature, sponsor), carta d'archivio
   (storia), marmo (albo d'oro, informazioni). Le immagini riempiono tutta
   l'inquadratura: il buio lo mette la maschera qui sotto, non il file, cosi'
   restano riusabili se cambia l'impaginazione. */
.pg-fondo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* SETA — angolo in alto a sinistra, il taglio dell'immagine e' gia' scuro */
.pg-fondo--seta {
  background-image: url(images/sfondi/seta_mobile.webp);
  background-position: -14rem -8rem;
  background-size: 60rem auto;
  opacity: 0.3;
  -webkit-mask-image: radial-gradient(ellipse 46rem 50rem at 8% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 46rem 50rem at 8% 0%, #000 0%, transparent 72%);
}

/* MARMO — copre tutto, molto spento: da' grana al nero senza diventare texture */
.pg-fondo--marmo {
  background-image: url(../misstrieste_source/images/sfondi/marmo_mobile.jpg);
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
}

/* CARTA — l'immagine e' chiara, quindi va tenuta molto bassa. Niente
   soft-light: su un fondo quasi nero non produce quasi nulla (l'ho misurato).
   In fusione normale a opacita' bassissima il nero diventa un bruno caldo e
   la fibra della carta si vede appena, che e' l'effetto voluto. */
.pg-fondo--carta {
  background-image: url(../misstrieste_source/images/sfondi/carta_mobile.jpg);
  opacity: 0.075;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
}

/* VELLUTO — l'unico materiale gia' scuro e gia' nella tinta del sito, quindi
   regge un'opacita' molto piu' alta senza schiarire il fondo. */
.pg-fondo--velluto {
  background-image: url(../misstrieste_source/images/sfondi/velluto_mobile.jpg);
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.4) 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.4) 55%, transparent 100%);
}

/* OTTONE — molto chiaro e molto caldo: alzarlo vira l'intera pagina al
   giallo, quindi resta bassissimo e serve solo a dare il riflesso del metallo. */
.pg-fondo--ottone {
  background-image: url(../misstrieste_source/images/sfondi/ottone_mobile.jpg);
  opacity: 0.07;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.42) 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.42) 58%, transparent 100%);
}

/* PIETRA CARSICA — chiara come la carta, ma molto piu' contrastata: i buchi
   della roccia diventano rumore se non la si tiene bassa. */
.pg-fondo--pietra {
  background-image: url(../misstrieste_source/images/sfondi/pietra_mobile.jpg);
  opacity: 0.07;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
}

/* Il sito applica il maiuscolo a tappeto: va bene per un occhiello, non per
   un articolo di mille parole. */
.pg *,
.pg *::before,
.pg *::after { box-sizing: border-box; }
.pg { text-transform: none; }

/* global.css impone alle <section> height:100vh e width:100vw: senza questo
   reset ogni fascia riempirebbe lo schermo da sola. */
#brx-content section { height: auto; width: auto; }

.pg-limite {
  max-width: 132rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margine);
  padding-right: var(--margine);
}

.pg-stretto { max-width: 72rem; }

/* Scorciatoia per chi naviga da tastiera: fuori campo finche' non prende
   il fuoco, non un link azzurro in cima alla pagina. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1001;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 1.2rem 2rem;
  background: var(--gold);
  color: var(--fondo);
  text-decoration: none;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   TESTA DI PAGINA
   ========================================================================== */

/* La fotografia sta in una cornice sua, con un rapporto vicino a quello
   originale: usata come fondo a tutta larghezza veniva decapitata, perche'
   nessuno di questi scatti e' nato panoramico. */

/* Su telefono la testa non si impunta a tutta altezza: fra ritratto, titolo
   su tre righe e occhiello non ci starebbe, e il titolo finirebbe sotto la
   piega. Scorre, e basta. */
.pg-testa {
  position: relative;
  overflow: clip;
  display: flex;
  align-items: flex-end;
  padding: 3rem 0 5rem;
}

/* Parola o anno gigante: e' la firma grafica del sito. Passa SOPRA la
   fotografia e sotto il testo. Prima stava sotto a tutto, e su telefono - dove
   la foto occupa quasi tutta la larghezza - il numero spariva del tutto. */
.pg-testa-filigrana {
  position: absolute;
  right: -5vw;
  bottom: 1rem;
  translate: 0 var(--deriva-filigrana, 0%);
  z-index: 1;
  font-family: 'PP Eiko', 'Bodoni Moda', serif;
  font-weight: 100;
  font-size: clamp(10rem, 36vw, 18rem);
  line-height: 0.8;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  transition: opacity 2s ease 0.5s;
}

.e-entrata .pg-testa-filigrana { opacity: var(--luce-filigrana, 0.09); }

/* z-index: auto di proposito. Con un valore numerico la griglia diventa un
   piano a se' e la filigrana non puo' piu' infilarsi fra la foto e il testo. */
.pg-testa-griglia {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.pg-testa-ritratto {
  position: relative;
  z-index: 0;
  order: -1;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 46vh;
  overflow: clip;
  border: 1px solid var(--bordo-oro);
  /* chiusa in partenza: si apre dal basso quando la pagina entra in scena */
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.e-entrata .pg-testa-ritratto { clip-path: inset(0 0 0 0); }

.pg-testa-ritratto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50% 30%);
  display: block;
  scale: var(--zoom-ritratto, 1.06);
  translate: 0 var(--deriva-ritratto-testa, 0%);
}

.pg-testa-corpo {
  position: relative;
  z-index: 2;
  translate: 0 var(--deriva-corpo, 0%);
}

.pg-occhiello {
  font-size: 1.2rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 2rem;
  opacity: 0;
  translate: 0 1.2rem;
  transition: opacity 1s ease 0.5s, translate 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.e-entrata .pg-occhiello { opacity: 1; translate: 0 0; }

.pg-titolo {
  font-family: 'PP Eiko', 'Bodoni Moda', serif;
  font-weight: 100;
  font-size: clamp(4rem, 11vw, 9.5rem);
  line-height: 1;
  color: var(--white);
  margin: 0;
}

/* Ogni riga sale da sotto la propria feritoia, sfalsata rispetto alla
   precedente: e' quello che da' il movimento al titolo. */
.pg-riga {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.pg-riga > span {
  display: block;
  translate: 0 110%;
  transition: translate 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(0.25s + var(--i, 0) * 0.12s);
}

.e-entrata .pg-riga > span { translate: 0 0; }

.pg-lede {
  font-size: 1.7rem;
  line-height: 1.7;
  color: rgba(244, 242, 238, 0.72);
  margin: 2.8rem 0 0;
  max-width: 54rem;
  opacity: 0;
  translate: 0 1.2rem;
  transition: opacity 1.2s ease 0.75s, translate 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.75s;
}

.e-entrata .pg-lede { opacity: 1; translate: 0 0; }

/* Invito a scorrere: una linea che scende e risale senza sosta */
.pg-scorri {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 4rem;
  font-size: 1.1rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-dp);
  opacity: 0;
  transition: opacity 1.2s ease 1.1s;
}

.e-entrata .pg-scorri { opacity: 1; }

.pg-scorri::after {
  content: "";
  width: 5rem;
  height: 1px;
  background: var(--gold-dp);
  transform-origin: left;
  animation: filo-scorri 2.6s ease-in-out infinite;
}

@keyframes filo-scorri {
  0%, 100% { transform: scaleX(0.35); opacity: 0.5; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .pg-testa-ritratto { will-change: clip-path; }
  .pg-testa-ritratto img { will-change: scale, translate; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-testa-ritratto { clip-path: none; transition: none; }
  .pg-testa-ritratto img { scale: 1; translate: none; }
  .pg-riga > span { translate: 0 0; transition: none; }
  .pg-occhiello, .pg-lede, .pg-scorri { opacity: 1; translate: 0 0; transition: none; }
  .pg-testa-filigrana { opacity: 0.09; transition: none; translate: -50% 0; }
  .pg-scorri::after { animation: none; transform: scaleX(1); }
  .pg-testa-corpo { translate: none; }
}

/* ==========================================================================
   TESTA "REGISTRO" — solo per l'albo d'oro

   L'albo non e' un racconto: e' un elenco. Se anche lui apre con un ritratto
   singolo accanto al titolo diventa indistinguibile dalla storia. Qui il
   titolo sta da solo e sotto scorre il muro dei volti: si vede subito che la
   pagina contiene molti nomi, non una vicenda.
   ========================================================================== */

.pg-testa--registro {
  display: block;
  padding: 6rem 0 0;
  min-height: 0;
}

.pg-testa--registro .pg-testa-griglia { display: block; }
.pg-testa--registro .pg-lede { max-width: 60rem; }

.muro {
  margin-top: 5rem;
  overflow: hidden;
  border-top: 1px solid var(--bordo-oro);
  border-bottom: 1px solid var(--bordo-oro);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  opacity: 0;
  transition: opacity 1.6s ease 0.6s;
}

.e-entrata .muro { opacity: 1; }

.muro-nastro {
  display: flex;
  width: max-content;
  animation: muro-scorre 90s linear infinite;
}

.muro-nastro img {
  display: block;
  width: 14rem;
  height: 18rem;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.55;
  border-right: 1px solid rgba(212, 175, 55, 0.12);
}

@keyframes muro-scorre {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .muro-nastro { animation: none; }
  .muro { opacity: 1; transition: none; }
}

/* ==========================================================================
   RIVELAZIONE GENERICA
   Il blocco sale e si scopre dall'alto mentre attraversa il quadro.
   ========================================================================== */

.rivela {
  clip-path: inset(calc((1 - var(--apertura, 1)) * 100%) 0 0 0);
  translate: 0 calc((1 - var(--apertura, 1)) * 2.4rem);
}

@media (prefers-reduced-motion: no-preference) {
  .rivela { will-change: clip-path, translate; }
}

@media (prefers-reduced-motion: reduce) {
  .rivela { clip-path: none; translate: none; }
  .pg-testa-sfondo img { translate: none; scale: 1.08; }
  .pg-filo { transform: scaleX(1); transition: none; }
}

/* EMERSIONE — per i riquadri alti (il blocco dell'agenzia).
   Niente taglio: il blocco sale di poco e schiarisce, e il bordo dorato si
   accende. La corsa e' breve e finisce appena il blocco entra, non quando lo
   si e' gia' oltrepassato. */
.emerge {
  opacity: calc(0.25 + var(--emersione, 1) * 0.75);
  translate: 0 calc((1 - var(--emersione, 1)) * 2.6rem);
  border-color: rgba(212, 175, 55, calc(0.04 + var(--emersione, 1) * 0.16));
}

@media (prefers-reduced-motion: no-preference) {
  .emerge { will-change: translate, opacity; }
}

@media (prefers-reduced-motion: reduce) {
  .emerge { opacity: 1; translate: none; }
}

/* SCORTA — entrata laterale, alternata dal lato indicato in data-verso.
   Serve dove ci sono piu' blocchi uguali di fila (i pilastri): se si
   aprissero tutti dall'alto, quattro affermazioni diventerebbero un unico
   movimento ripetuto quattro volte. */
.scorta {
  opacity: var(--apertura, 1);
  translate: calc((1 - var(--apertura, 1)) * var(--lato, -4rem)) 0;
}

.scorta[data-verso="d"] { --lato: 4rem; }

@media (prefers-reduced-motion: no-preference) {
  .scorta { will-change: translate, opacity; }
}

@media (prefers-reduced-motion: reduce) {
  .scorta { opacity: 1; translate: none; }
}

/* ==========================================================================
   BANDA — famiglia della carriera
   Fascia a piena larghezza, filigrana grande dietro, lati alternati.
   ========================================================================== */

/* Queste liste portano anche .pg-limite, che le centra e le tiene lontane dai
   bordi. Scrivere qui margin:0 o padding:0 lo annullerebbe (stessa specificita',
   ma queste regole vengono dopo): si azzerano solo i margini verticali. */
.bande { list-style: none; margin-block: 0; }

.banda {
  position: relative;
  margin-bottom: 9rem;
  padding-top: 3rem;
}

/* L'anno passa sopra la fotografia: la foto e' larga 82% e il numero sta sul
   bordo opposto, quindi sotto restava mangiato per meta'. */
.banda-filigrana {
  position: absolute;
  top: -1rem;
  z-index: 2;
  color: var(--gold);
  opacity: var(--luce-anno, 0.12);
  font-family: 'PP Eiko', 'Bodoni Moda', serif;
  font-weight: 100;
  font-size: clamp(9rem, 24vw, 22rem);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  translate: 0 var(--deriva-anno, 0%);
}

.banda[data-lato="sinistra"] .banda-filigrana { right: 0; }
.banda[data-lato="destra"] .banda-filigrana { left: 0; }

.banda-figura {
  position: relative;
  z-index: 1;
  width: 82%;
  margin: 0 0 2.4rem;
  aspect-ratio: 3 / 4;
  overflow: clip;
  border: 1px solid var(--bordo-oro);
}

.banda[data-lato="destra"] .banda-figura { margin-left: auto; }

.banda-figura img,
.banda-figura video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50% 28%);
  display: block;
  transform-origin: center;
  scale: var(--zoom-foto, 1);
  translate: 0 var(--deriva-foto, 0%);
}

@media (prefers-reduced-motion: no-preference) {
  .banda-figura img,
  .banda-figura video { will-change: scale, translate; }
  .banda-filigrana { will-change: translate, opacity; }
}

@media (prefers-reduced-motion: reduce) {
  .banda-figura img,
  .banda-figura video { scale: 1; translate: none; }
  .banda-filigrana { translate: none; opacity: 0.12; }
}

.banda-testo { position: relative; z-index: 3; }

.banda-anno {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--gold);
  margin: 0 0 0.8rem;
}

.banda-nome {
  font-family: 'PP Eiko', 'Bodoni Moda', serif;
  font-weight: 100;
  font-size: clamp(2.8rem, 7vw, 4.4rem);
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 1.6rem;
}

.banda-corpo {
  font-size: 1.6rem;
  line-height: 1.75;
  color: rgba(244, 242, 238, 0.72);
  margin: 0;
  max-width: 52rem;
}

/* Filo sotto il nome, si disegna all'ingresso */
.banda-nome::after {
  content: "";
  display: block;
  width: 8rem;
  height: 1px;
  margin-top: 1.6rem;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.banda.e-visibile .banda-nome::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .banda-nome::after { transform: scaleX(1); transition: none; }
}

/* --------------------------------------------------------------------------
   FONTI — rimandi esterni sotto un'affermazione.
   Devono leggersi come una nota a pie' di pagina, non come pulsanti: stanno
   sotto il testo che verificano, piu' piccole e piu' spente, e diventano oro
   pieno solo al passaggio. La riga di separazione le lega al paragrafo sopra.
   -------------------------------------------------------------------------- */
.fonti {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.4rem 0 0;
  max-width: 52rem;
  border-top: 1px solid rgba(212, 175, 55, 0.16);
  font-size: 1.3rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.fonti a {
  color: rgba(212, 175, 55, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.fonti a:hover,
.fonti a:focus-visible {
  color: var(--gold-lt, var(--gold));
  border-bottom-color: var(--gold);
}

/* Freccetta d'uscita: dice che il link porta fuori dal sito senza bisogno di
   scriverlo, e resta fuori dal bordo sottolineato. */
.fonti a::after {
  content: "\2197";
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.85em;
}

/* Nella cascata lo spazio e' stretto: nota piu' compatta, senza filo sopra. */
.fonti--cascata {
  margin-top: 1.2rem;
  padding-top: 0;
  border-top: 0;
  font-size: 1.2rem;
  line-height: 1.8;
}

/* Ponte fra due pagine: sta in mezzo al percorso delle candidature e porta
   all'albo. Deve leggersi come un inciso, non come un richiamo pubblicitario. */
.rimando {
  margin: 0;
  padding-left: 2rem;
  border-left: 1px solid rgba(212, 175, 55, 0.28);
  font-size: 1.5rem;
  line-height: 1.8;
  color: rgba(244, 242, 238, 0.6);
}

.rimando a {
  display: inline-block;
  color: var(--gold-lt, var(--gold));
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  transition: border-color 0.3s ease;
}

.rimando a:hover,
.rimando a:focus-visible { border-bottom-color: var(--gold); }

.dopo-chiusura {
  margin: 1rem 0 0;
  font-family: 'Bodoni Moda', serif;
  font-size: 1.8rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(244, 242, 238, 0.8);
}

/* ==========================================================================
   CASCATA — famiglia della giuria
   Tre voci sfalsate in diagonale, ognuna con apertura propria.
   ========================================================================== */

.cascata { list-style: none; margin-block: 0; }

.cascata-voce {
  position: relative;
  margin-bottom: 7rem;
}

.cascata-ritratto {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: clip;
  border: 1px solid var(--bordo-oro);
  margin: 0 0 1.8rem;
  translate: 0 var(--deriva-ritratto, 0px);
  clip-path: inset(calc((1 - var(--apertura, 1)) * 100%) 0 0 0);
}

.cascata-ritratto img,
.cascata-ritratto video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50% 25%);
  display: block;
}

.cascata-testo { translate: 0 var(--deriva-nome, 0px); }

.cascata-anno {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: 2rem;
  color: var(--gold);
  margin: 0 0 0.4rem;
}

.cascata-nome {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.06em;
  color: var(--white);
  margin: 0 0 0.8rem;
}

.cascata-nota {
  font-size: 1.4rem;
  line-height: 1.65;
  color: rgba(244, 242, 238, 0.62);
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .cascata-ritratto { will-change: translate, clip-path; }
}

@media (prefers-reduced-motion: reduce) {
  .cascata-ritratto { translate: none; clip-path: none; }
  .cascata-testo { translate: none; }
}

/* ==========================================================================
   NASTRO — momento video a piena larghezza
   ========================================================================== */

.nastro {
  position: relative;
  margin: 10rem 0;
  overflow: clip;
  border-top: 1px solid var(--bordo-oro);
  border-bottom: 1px solid var(--bordo-oro);
}

.nastro-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: clip;
}

.nastro-media img,
.nastro-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50% 35%);
  display: block;
  scale: var(--zoom-foto, 1.06);
  translate: 0 var(--deriva-foto, 0%);
}

.nastro-didascalia {
  position: absolute;
  left: var(--margine);
  right: var(--margine);
  bottom: 3rem;
  z-index: 2;
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.3;
  color: var(--white);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
  margin: 0;
}

.nastro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 2, 4, 0.85) 0%, transparent 55%);
}

/* ==========================================================================
   VIDEO DELLA PROCLAMAZIONE — sezione sedi /storia/
   Il filmato è verticale (9:16, stessa inquadratura della hero): si presenta
   come una figura verticale centrata, con cornice oro e didascalia sotto.
   ========================================================================== */

.proclamazione {
  margin: 6rem auto 0;
  max-width: min(88vw, 46rem);
  position: relative;
  border: 1px solid var(--bordo-oro);
  background: #000;
}

.proclamazione-media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: clip;
}

.proclamazione-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50% 30%);
  display: block;
  scale: var(--zoom-foto, 1.04);
  translate: 0 var(--deriva-foto, 0%);
}

.proclamazione-didascalia {
  margin: 0;
  padding: 1.6rem 0 0;
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.4;
  color: var(--carta);
  text-align: center;
}

.proclamazione-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 2, 4, 0.55) 0%, transparent 35%);
}

/* ==========================================================================
   ELENCO CRONOLOGICO — albo d'oro
   ========================================================================== */

/* Il decennio resta appeso in alto mentre si scorre il suo gruppo: in un
   elenco di sessantotto nomi serve sapere sempre in che anni si e'. E' la
   differenza fra un registro consultabile e un rotolo. */
.decennio { margin-bottom: 5rem; position: relative; }

.decennio-testata {
  position: sticky;
  top: 7rem;
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.2rem 0;
  margin-bottom: 0.8rem;
  background: linear-gradient(to bottom, var(--fondo) 70%, transparent);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.decennio-etichetta {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(2.2rem, 6vw, 3rem);
  line-height: 1;
  color: var(--gold);
  margin: 0;
  user-select: none;
}

.decennio-conteggio {
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.4);
}

.albo-lista { list-style: none; padding: 0; margin: 0; }

.albo-voce {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  align-items: center;
  gap: 1.6rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.albo-voce--conRitratto { grid-template-columns: 5.6rem 5.6rem 1fr; }

.albo-anno {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: 1.7rem;
  color: var(--gold);
}

.albo-ritratto {
  width: 5.6rem;
  height: 5.6rem;
  overflow: clip;
  border-radius: 50%;
  border: 1px solid var(--bordo-oro);
  margin: 0;
}

.albo-ritratto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50% 22%);
  display: block;
  filter: grayscale(0.4);
  transition: filter 0.6s ease, scale 0.6s ease;
}

.albo-voce:hover .albo-ritratto img { filter: grayscale(0); scale: 1.06; }

.albo-nome {
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--white);
}

.albo-nota {
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-top: 0.4rem;
}

.albo-voce--missItalia { background: rgba(212, 175, 55, 0.045); }

/* ==========================================================================
   PERCORSO — candidature

   La linea non e' un bordo su ogni voce (si interrompeva a ogni tappa e
   finiva tagliata di netto in fondo): e' un filo unico disegnato sul
   contenitore, che sfuma in entrata e in uscita e si accende dall'alto
   verso il basso mentre si scorre (--percorso, scritto da pagine.js).
   ========================================================================== */

.tappe {
  position: relative;
  list-style: none;
  margin-block: 0;
  padding: 0 0 0 2.6rem;
}

/* binario spento */
.tappe::before,
.tappe::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0;
  width: 1px;
  height: 100%;
  border-radius: 1px;
}

/* Le sfumature sono in percentuale, non in rem: il filo non finisce mai di
   netto, si spegne gradualmente in coda qualunque sia l'altezza dell'elenco.
   Era questo il "taglio" che si vedeva in fondo. */
.tappe::before {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(212, 175, 55, 0.18) 7%,
    rgba(212, 175, 55, 0.18) 68%,
    transparent 100%);
}

/* filo acceso: la stessa sfumatura, rivelata dall'alto in proporzione */
.tappe::after {
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--gold) 7%,
    var(--gold) 68%,
    transparent 100%);
  opacity: 0.8;
  clip-path: inset(0 0 calc((1 - var(--percorso, 1)) * 100%) 0);
}

@media (prefers-reduced-motion: reduce) {
  .tappe::after { clip-path: none; }
}

.tappa {
  position: relative;
  padding: 0 0 6rem;
}

.tappa:last-child { padding-bottom: 0; }

/* Il segno della tappa: un rombo sottile, non un numero dentro un cerchio. */
.tappa::before {
  content: "";
  position: absolute;
  left: -2.6rem;
  top: 0.7rem;
  width: 0.6rem;
  height: 0.6rem;
  translate: -50% 0;
  rotate: 45deg;
  background: var(--gold);
  box-shadow: 0 0 0 0.5rem var(--fondo), 0 0 1.2rem rgba(212, 175, 55, 0.5);
}

.tappa h3 {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.8rem;
}

.tappa p {
  font-size: 1.5rem;
  line-height: 1.7;
  color: rgba(244, 242, 238, 0.65);
  margin: 0 0 2rem;
  max-width: 52rem;
}

/* Cornice verticale: le fotografie sorgente sono tutte 2:3. Un riquadro
   panoramico su un ritratto decapita il soggetto — era il taglio sbagliato,
   non il fuoco sbagliato. */
.tappa-figura {
  overflow: clip;
  border: 1px solid var(--bordo-oro);
  aspect-ratio: 3 / 4;
  margin: 0;
}

.tappa-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50% 30%);
  display: block;
  scale: var(--zoom-foto, 1.04);
}

/* ==========================================================================
   REQUISITI
   ========================================================================== */

.requisiti { list-style: none; padding: 0; margin: 0; }

.requisito {
  position: relative;
  padding: 1.8rem 0 1.8rem 2.8rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
  font-size: 1.6rem;
  line-height: 1.6;
  color: rgba(244, 242, 238, 0.82);
}

.requisito::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.7rem;
  width: 1.6rem;
  height: 1px;
  background: var(--gold);
}

.requisiti-nota {
  margin: 2.4rem 0 0;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--gold-dp);
}

/* ==========================================================================
   LETTERA — richiamo all'azione delle candidature
   Non un bottone pubblicitario: un foglio scritto a mano, che si compone
   mentre si scorre fino a li'. La rosa in filigrana e' decorativa (screen su
   fondo quasi nero: il nero del file sparisce, resta solo il disegno).
   ========================================================================== */

.lettera {
  position: relative;
  overflow: clip;
  padding: 6rem var(--margine) 5.4rem;
  margin: 9rem 0;
  border: 1px solid var(--bordo-oro);
}

.lettera::after {
  content: "";
  position: absolute;
  right: -9rem;
  bottom: -11rem;
  width: 42rem;
  height: 34rem;
  background: url(images/sfondi/rose_angolo.webp) center/cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
}

.lettera-fregio {
  display: block;
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: 4rem;
  line-height: 1;
  color: var(--gold-dp);
  margin: 0 0 1.6rem;
}

.lettera-cappello {
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 2.2rem;
}

.lettera-corpo {
  position: relative;
  max-width: 46rem;
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1.32;
  color: var(--white);
  margin: 0 0 4rem;
  clip-path: inset(0 calc((1 - var(--scrivi, 1)) * 100%) 0 0);
}

@media (prefers-reduced-motion: no-preference) {
  .lettera-corpo { will-change: clip-path; }
}

@media (prefers-reduced-motion: reduce) {
  .lettera-corpo { clip-path: none; }
}

.lettera-firma {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: 1.9rem;
  color: var(--gold-lt);
  text-decoration: none;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gold-dp);
  transition: border-color 0.4s ease, gap 0.4s ease;
}

.lettera-firma:hover,
.lettera-firma:focus-visible {
  border-color: var(--gold);
  gap: 1.6rem;
}

.lettera-freccia { transition: translate 0.4s ease; }

.lettera-firma:hover .lettera-freccia,
.lettera-firma:focus-visible .lettera-freccia { translate: 0.3rem 0; }

.lettera-nota {
  position: relative;
  max-width: 40rem;
  margin: 3rem 0 0;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  color: rgba(244, 242, 238, 0.5);
}

/* Sta sotto alla nota ma prima che si esca dal sito: il bottone porta su un
   altro dominio, in una scheda nuova, e da li' nessuno torna indietro a
   leggere che cosa succede ai propri dati. */
.lettera-privacy {
  position: relative;
  max-width: 46rem;
  margin: 1.6rem 0 0;
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: rgba(244, 242, 238, 0.42);
}

.lettera-privacy a {
  color: rgba(244, 242, 238, 0.72);
  text-decoration: none;
  border-bottom: 1px solid var(--bordo-oro);
  padding-bottom: 0.2rem;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.lettera-privacy a:hover,
.lettera-privacy a:focus-visible { color: var(--gold-lt); border-color: var(--gold); }

/* ==========================================================================
   DOMANDE
   ========================================================================== */

.domande { list-style: none; margin: 0; padding: 0; }

.domanda {
  padding: 3.2rem 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.domanda h3 {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  line-height: 1.35;
  color: var(--gold-lt);
  margin: 0 0 1.4rem;
}

.domanda p {
  font-size: 1.6rem;
  line-height: 1.75;
  color: rgba(244, 242, 238, 0.75);
  margin: 0;
}

/* ==========================================================================
   PROSA
   ========================================================================== */

.prosa { max-width: 68rem; }

.prosa h2 {
  font-family: 'PP Eiko', 'Bodoni Moda', serif;
  font-weight: 100;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.15;
  color: var(--white);
  margin: 7rem 0 2.4rem;
}

.prosa p {
  font-size: 1.7rem;
  line-height: 1.8;
  color: rgba(244, 242, 238, 0.75);
  margin: 0 0 2.2rem;
}

.prosa strong { color: var(--white); font-weight: 400; }

/* Segni del racconto: capolettera all'attacco e citazione fra un capitolo e
   l'altro. Servono a dire "questo si legge", contro l'albo che si consulta. */
.prosa--attacco > p:first-of-type::first-letter {
  float: left;
  font-family: 'PP Eiko', 'Bodoni Moda', serif;
  font-weight: 100;
  font-size: 7.2rem;
  line-height: 0.78;
  color: var(--gold);
  padding: 0.6rem 1.4rem 0 0;
}

/* margin-block, non margin: .pg-limite centra con i margini laterali automatici
   e azzerarli in blocco la butterebbe a sinistra. */
.citazione {
  margin-block: 0;
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
}

.citazione blockquote {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.35;
  color: var(--white);
  margin: 0;
  max-width: 76rem;
  margin-left: auto;
  margin-right: auto;
}

.citazione figcaption {
  margin-top: 2.4rem;
  font-size: 1.2rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-dp);
}

.sezione-titolo {
  font-family: 'PP Eiko', 'Bodoni Moda', serif;
  font-weight: 100;
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 4rem;
}

.sezione-occhiello {
  font-size: 1.2rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.6rem;
}

.blocco { padding: 8rem 0; }

/* ==========================================================================
   FASCIA FOTO — pausa fotografica fra due blocchi di testo

   Il quadro e' verticale (le foto sorgente sono 2:3) e la didascalia sta
   fuori dall'immagine, non sopra: sovrapporre testo a una fotografia scura
   costringe a una velatura che spegne la foto.
   ========================================================================== */

.fascia-foto {
  display: grid;
  gap: 1.6rem;
  margin: 2rem 0;
  padding: 0 var(--margine);
}

.fascia-foto-quadro {
  overflow: clip;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--bordo-oro);
}

.fascia-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50% 30%);
  display: block;
  /* la deriva la scrive pagine.js: la foto si muove nel suo quadro */
  scale: var(--zoom-foto, 1.08);
  translate: 0 var(--deriva-foto, 0%);
}

.fascia-foto figcaption {
  align-self: end;
  font-size: 1.35rem;
  line-height: 1.65;
  color: rgba(244, 242, 238, 0.55);
}

/* ==========================================================================
   REEL — le clip verticali, sfalsate invece che affiancate
   ========================================================================== */

.reel-scena {
  display: grid;
  gap: 3.2rem;
  margin-top: 4rem;
}

.reel {
  margin: 0;
  translate: 0 var(--deriva-reel, 0);
}

.reel video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border: 1px solid var(--bordo-oro);
  background: #000;
}

.reel figcaption {
  margin-top: 1rem;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.42);
}

/* ==========================================================================
   TESTATA FISSA
   ========================================================================== */

#header-istituzionale {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(10, 2, 4, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordo-oro);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-direction: column;
  padding: 1.4rem var(--margine);
  max-width: 140rem;
  margin: 0 auto;
}

.header-logo { height: 3.6rem; width: auto; display: block; }

/* Cinque voci su una riga sola anche a 360px: a capo lasciava
   "Informazioni" isolata sulla seconda riga. */
#header-istituzionale .nav {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
}

#header-istituzionale .nav a {
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.3s ease, color 0.3s ease;
}

#header-istituzionale .nav a:hover { opacity: 1; color: var(--gold-lt); }
#header-istituzionale .nav a.is-active { color: var(--gold); opacity: 1; }

/* "Informazioni" da sola mandava il menu a capo su telefono, lasciandola
   isolata sulla seconda riga. Li' si abbrevia. */
.voce-lunga { display: none; }
.voce-breve { display: inline; }

/* ==========================================================================
   PROPOSTA AGLI SPONSOR — /diventa-sponsor/

   Quarta famiglia: qui non si racconta (storia), non si consulta (albo), non
   si percorre (candidature). Si argomenta. I pilastri sono affermazioni
   grandi, numerate, una sotto l'altra: si leggono anche solo scorrendo.
   ========================================================================== */

/* Una striscia sola. Contiene tre copie identiche del gruppo e trasla di
   -33.333%, cioe' di una copia intera: al termine del giro si trova
   esattamente dove era partita, quindi non c'e' salto. */
.loghi-nastro {
  margin-top: 4rem;
  padding: 2.2rem 0;
  border-top: 1px solid var(--bordo-oro);
  border-bottom: 1px solid var(--bordo-oro);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.4s ease 0.7s;
  /* i loghi sfumano nel fondo ai due bordi invece di essere tranciati */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.e-entrata .loghi-nastro { opacity: 1; }

.loghi-fila {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}

.loghi-fila { animation: loghi-scorre 56s linear infinite; }

.loghi-gruppo {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-right: 1.2rem;
}

/* -33.333% = una copia esatta delle tre emesse dal build. */
@keyframes loghi-scorre {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-33.3333%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .loghi-fila { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .loghi-nastro { -webkit-mask-image: none; mask-image: none; }
  /* fermo il nastro, le copie sarebbero doppioni visibili: ne resta una */
  .loghi-fila .loghi-gruppo + .loghi-gruppo { display: none; }
  .loghi-gruppo { flex-wrap: wrap; justify-content: center; }
}

/* flex, non grid: in griglia la riga si auto-dimensiona sull'immagine, quindi
   una percentuale sull'immagine si misurava su se stessa e i loghi piu'
   grandi sfondavano il chip. In flex l'altezza del contenitore e' definita e
   il massimo si risolve su quella. */
.logo-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 10rem;
  height: 5.4rem;
  padding: 0.8rem 1.2rem;
  background: #efece6;
  border-radius: 0.3rem;
}

.logo-chip img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: var(--fusione, normal);
}

.loghi-nota {
  margin: 2rem 0 0;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.42);
  text-align: center;
}

.pilastri { list-style: none; margin-block: 0; }

.pilastro {
  padding: 5rem 0;
  border-top: 1px solid rgba(212, 175, 55, 0.16);
}

.pilastro-affermazione {
  font-family: 'PP Eiko', 'Bodoni Moda', serif;
  font-weight: 100;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.12;
  color: var(--white);
  margin: 0 0 2.4rem;
}

.pilastro-corpo p {
  font-size: 1.65rem;
  line-height: 1.75;
  color: rgba(244, 242, 238, 0.72);
  margin: 0 0 1.8rem;
  max-width: 58rem;
}

.pilastro-corpo p:last-child { margin-bottom: 0; }

/* Cosa riceve concretamente uno sponsor: elenco spuntato, non prosa. */
.dotazione { list-style: none; margin-block: 0; }

.dotazione li {
  position: relative;
  padding: 2rem 0 2rem 3.6rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
  font-size: 1.6rem;
  line-height: 1.65;
  color: rgba(244, 242, 238, 0.8);
}

.dotazione li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.9rem;
  width: 1.8rem;
  height: 1px;
  background: var(--gold);
}

.dotazione strong { color: var(--white); font-weight: 400; }

/* Blocco agenzia: fondo appena staccato, per dire "chi lo fa" senza gridare */
.agenzia {
  padding: 5rem 3rem;
  border: 1px solid var(--bordo-oro);
  background: rgba(212, 175, 55, 0.025);
}

.dotazione-chiusura {
  margin: 2.6rem 0 0;
  font-size: 1.45rem;
  line-height: 1.7;
  color: rgba(244, 242, 238, 0.5);
}

.agenzia .dotazione { margin-top: 1.2rem; }

/* Il nome della referenza e' il link: chi vuole controllare parte da li'. */
.agenzia .dotazione strong a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.2rem;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.agenzia .dotazione strong a:hover,
.agenzia .dotazione strong a:focus-visible { color: var(--gold); }

.agenzia-chiusura {
  margin: 3.2rem 0 0;
  font-size: 1.55rem;
  line-height: 1.7;
  color: rgba(244, 242, 238, 0.66);
}

.agenzia-verifica {
  margin: 1.6rem 0 0;
  font-size: 1.4rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: rgba(244, 242, 238, 0.5);
}

/* Su telefono i due indirizzi non stanno su una riga: vanno in colonna e il
   punto di separazione sparisce, invece di restare appeso a fine riga. */
.agenzia-verifica a {
  display: block;
  width: fit-content;
  margin-top: 0.6rem;
  color: var(--gold-lt, var(--gold));
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  white-space: nowrap;
  transition: border-color 0.3s ease;
}

.verifica-sep { display: none; }

.agenzia-verifica a:hover,
.agenzia-verifica a:focus-visible { border-bottom-color: var(--gold); }

.agenzia-numeri {
  list-style: none;
  margin: 3.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2rem;
}

.numero-cifra {
  display: block;
  font-family: 'PP Eiko', 'Bodoni Moda', serif;
  font-weight: 100;
  font-size: clamp(3.2rem, 9vw, 4.6rem);
  line-height: 1;
  color: var(--gold-lt);
}

.numero-voce {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.5);
}

/* Avvio del contatto: i due pulsanti portano gia' scritto da dove arrivi. */
.avvio {
  padding: 6rem 3rem;
  border: 1px solid var(--bordo-oro);
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.055), transparent 72%);
  text-align: center;
}

.avvio-claim {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.35;
  color: var(--white);
  margin: 0 0 1.6rem;
}

.avvio-nota {
  font-size: 1.45rem;
  line-height: 1.65;
  color: rgba(244, 242, 238, 0.62);
  margin: 0 auto 3.6rem;
  max-width: 46rem;
}

.avvio-bottoni {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: stretch;
}

.bottone {
  display: inline-block;
  padding: 1.8rem 3.2rem;
  font-size: 1.35rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background 0.35s ease, color 0.35s ease, letter-spacing 0.35s ease;
}

.bottone--pieno { background: var(--gold); color: var(--fondo); }
.bottone--pieno:hover { background: var(--gold-lt); letter-spacing: 0.26em; }

.bottone--vuoto { border: 1px solid var(--gold-dp); color: var(--gold-lt); }
.bottone--vuoto:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.08); }

.avvio-recapito {
  margin: 3.2rem 0 0;
  font-size: 1.35rem;
  color: rgba(244, 242, 238, 0.5);
}

.avvio-recapito a { color: rgba(244, 242, 238, 0.78); text-decoration: none; }
.avvio-recapito a:hover { color: var(--gold-lt); }

/* ==========================================================================
   PIEDE DI PAGINA
   Il piede della home vive nel foglio della home, con classi che qui non
   sono caricate: senza un piede proprio restava una riga di testo nuda con
   le etichette doppie dell'effetto hover. Questo e' autonomo.
   ========================================================================== */


/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media (min-width: 1024px) {
  body { padding-top: 9rem; }

  .pg-fondo--seta {
    background-image: url(images/sfondi/seta_desktop.webp);
    background-position: -12rem -14rem;
    background-size: 90rem auto;
    opacity: 0.4;
    -webkit-mask-image: radial-gradient(ellipse 74rem 64rem at 0% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 74rem 64rem at 0% 0%, #000 0%, transparent 70%);
  }

  .pg-fondo--marmo {
    background-image: url(../misstrieste_source/images/sfondi/marmo_desktop.jpg);
    opacity: 0.18;
  }

  .pg-fondo--carta {
    background-image: url(../misstrieste_source/images/sfondi/carta_desktop.jpg);
    opacity: 0.09;
  }

  .pg-fondo--velluto {
    background-image: url(../misstrieste_source/images/sfondi/velluto_desktop.jpg);
    opacity: 0.46;
  }

  .pg-fondo--ottone {
    background-image: url(../misstrieste_source/images/sfondi/ottone_desktop.jpg);
    opacity: 0.08;
  }

  .pg-fondo--pietra {
    background-image: url(../misstrieste_source/images/sfondi/pietra_desktop.jpg);
    opacity: 0.08;
  }

  .header-inner {
    flex-direction: row;
    justify-content: space-between;
    padding: 1.8rem var(--margine);
  }

  .header-logo { height: 4.4rem; }
  #header-istituzionale .nav { gap: 3.2rem; }
  #header-istituzionale .nav a { font-size: 1.3rem; letter-spacing: 0.16em; }
  .voce-lunga { display: inline; }
  .voce-breve { display: none; }

  /* Testa a due: il titolo da una parte, la fotografia dall'altra, con la
     filigrana che passa dietro entrambi. */
  .pg-testa { min-height: 94vh; padding: 16rem 0 8rem; align-items: center; }

  .pg-testa-griglia {
    display: grid;
    grid-template-columns: 1.05fr 0.85fr;
    align-items: center;
    gap: 7rem;
  }

  .pg-testa-ritratto { order: 0; aspect-ratio: 4 / 5; max-height: 72vh; }
  /* In alto a sinistra, sopra il titolo: e' l'unico spazio che la
     composizione lascia libero, e la fotografia non la copre. */
  .pg-testa-filigrana {
    right: auto;
    left: -1.5vw;
    bottom: auto;
    top: 5rem;
    font-size: clamp(18rem, 22vw, 32rem);
  }
  .pg-titolo { font-size: clamp(5rem, 6.5vw, 9.5rem); }

  /* La banda diventa a due colonne: fotografia da un lato, testo dall'altro,
     alternati. Non e' una griglia di schede: e' una fascia sola per volta. */
  .banda {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 6rem;
    margin-bottom: 14rem;
  }

  .banda-figura { width: 100%; margin: 0; }

  .banda[data-lato="destra"] .banda-figura { order: 2; margin: 0; }
  .banda[data-lato="destra"] .banda-testo { order: 1; }

  .banda-filigrana { font-size: clamp(16rem, 18vw, 26rem); top: -6rem; }

  .cascata { max-width: 110rem; margin: 0 auto; }

  .cascata-voce {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 12rem;
  }

  /* Sfalsamento diagonale: ogni voce entra piu' avanti della precedente */
  .cascata-voce:nth-child(1) { margin-left: 0; margin-right: 22%; }
  .cascata-voce:nth-child(2) { margin-left: 14%; margin-right: 8%; }
  .cascata-voce:nth-child(3) { margin-left: 26%; margin-right: 0; }

  .cascata-voce:nth-child(even) .cascata-ritratto { order: 2; }
  .cascata-voce:nth-child(even) .cascata-testo { order: 1; }

  .nastro-media { aspect-ratio: 21 / 9; }
  .nastro-didascalia { left: 6rem; right: 6rem; bottom: 5rem; max-width: 70rem; }

  .albo-voce { grid-template-columns: 8rem 1fr; gap: 2.4rem; padding: 1.8rem 0; }
  .albo-voce--conRitratto { grid-template-columns: 8rem 6.4rem 1fr; }
  .albo-ritratto { width: 6.4rem; height: 6.4rem; }
  .albo-nome { font-size: 1.8rem; }
  .albo-nota { display: inline; margin-left: 2rem; margin-top: 0; }

  .decennio { margin-bottom: 9rem; }

  .blocco { padding: 12rem 0; }


  .logo-chip { width: 13rem; height: 6.6rem; }
  .loghi-gruppo { gap: 1.6rem; padding-right: 1.6rem; }
  .loghi-nastro { gap: 1.6rem; }

  /* Il pilastro si apre a due: l'affermazione tiene la colonna di sinistra e
     resta leggibile da sola, la spiegazione le sta accanto. */
  .pilastro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    padding: 7rem 0;
  }

  .pilastro-affermazione { margin-bottom: 0; }

  .agenzia { padding: 7rem 6rem; }
  .agenzia-verifica a { display: inline; margin-top: 0; }
  .verifica-sep { display: inline; padding: 0 1rem; opacity: 0.45; }
  .agenzia-numeri { grid-template-columns: repeat(4, 1fr); }

  /* La fotografia tiene una colonna, la didascalia le sta accanto in basso:
     l'immagine resta verticale e intera, il testo non ci finisce sopra. */
  .fascia-foto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 4rem;
    max-width: 132rem;
    margin: 4rem auto;
  }

  .fascia-foto-quadro { aspect-ratio: 4 / 5; }
  .fascia-foto[data-verso="d"] .fascia-foto-quadro { order: 2; }
  .fascia-foto figcaption { font-size: 1.5rem; max-width: 40rem; padding-bottom: 2rem; }

  /* Le due clip non sono affiancate in griglia: la seconda scende, cosi'
     leggono come una diagonale e non come due schede. */
  .reel-scena {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6rem;
    max-width: 84rem;
  }

  .reel[data-indice="1"] { margin-top: 10rem; }

  /* Nel percorso la fotografia sta accanto al testo, non sotto: la colonna
     verticale regge un ritratto senza doverlo tagliare. */
  .tappe { padding-left: 4rem; }
  .tappe::before,
  .tappe::after { left: 0.5rem; }

  /* Due colonne sole: il testo (gia' impacchettato in .tappa-testo) e la
     fotografia. Nessuna riga da distribuire, nessun vuoto da spiegare. */
  .tappa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 5rem;
    align-items: start;
    padding-bottom: 9rem;
  }

  .tappa::before { left: -4rem; top: 1rem; }
  .tappa p { margin-bottom: 0; }
  .tappa-figura { aspect-ratio: 4 / 5; }

  .lettera { padding: 8rem 9rem 7.4rem; }
  .avvio { padding: 8rem 6rem; }
  .avvio-bottoni { flex-direction: row; justify-content: center; }
  .bottone { min-width: 26rem; }
}

/* ==========================================================================
   PAGINE DI LEGGE — privacy e cookie
   Solo testo. Gli elenchi qui non sono decorativi: sono la parte che si
   consulta davvero (quali dati, per quanto tempo, a chi vanno), quindi hanno
   la stessa dimensione della prosa e un trattino oro che li stacca.
   ========================================================================== */

.legale-elenco {
  list-style: none;
  margin: 0 0 2.2rem;
  padding: 0;
}

.legale-elenco li {
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 1.6rem;
  font-size: 1.7rem;
  line-height: 1.8;
  color: rgba(244, 242, 238, 0.75);
}

.legale-elenco li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.7;
}

/* Le sezioni di legge stanno piu' vicine fra loro della prosa narrativa: qui
   il bianco fra un capitolo e l'altro non e' respiro, e' distanza da colmare
   scorrendo per cercare una riga. */
.prosa--legale h2 { margin-top: 5rem; }
.prosa--legale > div:first-child h2 { margin-top: 0; }

.legale-nota {
  font-size: 1.45rem;
  line-height: 1.7;
  color: rgba(244, 242, 238, 0.5);
  border-left: 1px solid var(--bordo-oro);
  padding-left: 1.8rem;
  margin: 0 0 2.2rem;
}

.legale-aggiornamento {
  margin-top: 6rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--bordo-oro);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: rgba(244, 242, 238, 0.45);
}

.legale-rimando {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  color: var(--carta);
  text-decoration: none;
  border-bottom: 1px solid var(--bordo-oro);
  padding-bottom: 0.3rem;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.legale-rimando:hover,
.legale-rimando:focus-visible { color: var(--gold-lt); border-color: var(--gold); }

/* ==========================================================================
   MODULI DA FIRMARE — pagina /moduli/

   Sono fogli, non contenuti da leggere sullo schermo: qui vivono nella
   grafica del sito, ma il blocco @media print piu' sotto li ribalta su carta
   bianca, uno per pagina. Le righe da compilare sono puntini veri nel testo,
   non bordi disegnati in CSS: cosi' restano anche se il foglio viene
   copiato e incollato altrove.
   ========================================================================== */

.moduli { margin-top: 6rem; }

.modulo {
  border: 1px solid var(--bordo-oro);
  padding: 4rem 3.2rem;
  margin-bottom: 5rem;
  background: rgba(255, 255, 255, 0.015);
}

.modulo-etichetta {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.6rem;
}

.modulo-titolo {
  font-family: 'PP Eiko', 'Bodoni Moda', serif;
  font-weight: 100;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 2.4rem;
}

.modulo-premessa,
.modulo-revoca,
.modulo-chiusura,
.modulo-allegati {
  font-size: 1.5rem;
  line-height: 1.75;
  color: rgba(244, 242, 238, 0.72);
  margin: 0 0 2rem;
}

.modulo-premessa {
  border-left: 1px solid var(--bordo-oro);
  padding-left: 1.8rem;
}

.modulo-campi {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0;
}

.modulo-campi li {
  font-size: 1.5rem;
  line-height: 2.4;
  color: rgba(244, 242, 238, 0.8);
}

.modulo-attacco {
  font-size: 1.5rem;
  color: var(--white);
  margin: 0 0 1.2rem;
}

.modulo-dichiarazioni {
  margin: 0 0 2.4rem;
  padding-left: 2.4rem;
}

.modulo-dichiarazioni li,
.modulo-limiti li {
  font-size: 1.5rem;
  line-height: 1.75;
  color: rgba(244, 242, 238, 0.72);
  margin-bottom: 1.4rem;
}

.modulo-sottotitolo {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.4rem;
}

.modulo-limiti { margin: 0 0 2.4rem; padding-left: 2.4rem; }

.modulo-firme {
  list-style: none;
  margin: 3.2rem 0 0;
  padding: 0;
}

.modulo-firme li {
  font-size: 1.5rem;
  line-height: 2.8;
  color: rgba(244, 242, 238, 0.8);
}

.modulo-titolare {
  margin: 3rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(212, 175, 55, 0.14);
  font-size: 1.2rem;
  line-height: 1.6;
  color: rgba(244, 242, 238, 0.45);
}

/* Su schermo stretto i puntini di una riga da compilare andavano a capo da
   soli, lasciando mozziconi di puntini su righe vuote. Qui la riga non si
   spezza e scorre: l'etichetta - la parte che si legge - resta all'inizio,
   e i puntini escono di lato. Tanto e' un foglio da stampare, non da
   compilare col dito. */
@media (max-width: 699px) {
  .modulo { padding: 3rem 2rem; }

  .modulo-campi li,
  .modulo-firme li {
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .modulo-campi li::-webkit-scrollbar,
  .modulo-firme li::-webkit-scrollbar { display: none; }
}

.moduli-stampa {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.4rem 2.8rem;
  border: 1px solid var(--gold);
  background: none;
  color: var(--gold-lt);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.moduli-stampa:hover,
.moduli-stampa:focus-visible { background: var(--gold); color: #0a0204; }

/* --------------------------------------------------------------------------
   LA STAMPA — qui il sito sparisce e restano due fogli

   Su carta il fondo scuro sarebbe una lastra di inchiostro: si ribalta tutto
   in nero su bianco. Menu, piede, banner e testa di pagina non si stampano,
   e ogni modulo comincia su una pagina sua.
   -------------------------------------------------------------------------- */

@media print {
  @page { size: A4; margin: 18mm 16mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt;
    /* il padding-top di 8rem serve a scansare il menu fisso, che in stampa
       non c'e': senza azzerarlo il primo foglio si apre con tre dita di vuoto */
    padding-top: 0 !important;
    margin: 0 !important;
  }

  .pg, .blocco, .pg-limite, .pg-stretto {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  #header-istituzionale,
  .pie,
  .pg-fondo,
  .pg-testa,
  .skip-link,
  .ck,
  .moduli-stampa,
  .prosa--legale { display: none !important; }

  .moduli { margin: 0; }

  .modulo {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    break-after: page;
    page-break-after: always;
  }

  .modulo:last-child { break-after: auto; page-break-after: auto; }

  .modulo-etichetta { color: #666 !important; margin-bottom: 3mm; font-size: 8pt; }
  .modulo-titolo { color: #000 !important; font-size: 16pt; margin-bottom: 6mm; }
  .modulo-sottotitolo { color: #000 !important; font-size: 9pt; margin-bottom: 2.5mm; }

  /* Misure strette: a corpo pieno ogni modulo sforava di un dito e finiva a
     cavallo di due fogli. Le righe da compilare restano comunque alte
     abbastanza per scriverci sopra a penna. */
  .modulo-campi li { line-height: 2.1; }
  .modulo-firme li { line-height: 2.5; }
  .modulo-campi, .modulo-dichiarazioni, .modulo-limiti { margin-bottom: 4mm; }
  .modulo-dichiarazioni li, .modulo-limiti li { margin-bottom: 2mm; line-height: 1.5; }
  .modulo-premessa, .modulo-revoca, .modulo-chiusura { margin-bottom: 4mm; line-height: 1.5; }
  .modulo-firme { margin-top: 6mm; }
  .modulo-titolare { margin-top: 5mm; padding-top: 2mm; }

  .modulo-campi li,
  .modulo-firme li,
  .modulo-dichiarazioni li,
  .modulo-limiti li,
  .modulo-premessa,
  .modulo-revoca,
  .modulo-chiusura,
  .modulo-allegati,
  .modulo-attacco { color: #000 !important; font-size: 9.5pt; }

  .modulo-premessa { border-left: 1px solid #999; }

  .modulo-titolare {
    color: #444 !important;
    border-top: 1px solid #999;
    font-size: 8pt;
  }

  /* Le dichiarazioni non vanno spezzate a meta' fra due pagine: una riga di
     un impegno firmato deve stare con quelle che la spiegano. */
  .modulo-dichiarazioni li,
  .modulo-limiti li,
  .modulo-firme li { break-inside: avoid; page-break-inside: avoid; }
}