/* Veste presa dai materiali del progetto: la carta beige della copertina
   del libro, il blu della locandina del corto come accento, la panna dei
   loro testi e un inchiostro seppia per filetti e rigo.
   New Icon per i titoli, Source Serif 4 per il testo, Homemade Apple per
   i sottotitoli, Aquiline Two per il titolo del corto. */

@font-face {
  font-family: 'New Icon';
  src: url('../fonts/NewIconSerif-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Aquiline Two';
  src: url('../fonts/AquilineTwo.woff2') format('woff2');
  font-display: swap;
}

:root {
  --c-ink: #1b1917;
  --c-paper: #e1dfd4;       /* copertina del libro */
  --c-rule: #a08a6c;        /* inchiostro seppia: filetti, rigo, bordi */
  --c-blue: #4572b5;        /* accento storico della veste */
  --c-cream: #f2eee6;       /* testi delle locandine */
  /* il blu pieno sulla carta beige non regge il testo piccolo: per link e
     segni attivi lo si scurisce appena verso l'inchiostro */
  --c-accent: color-mix(in srgb, var(--c-blue) 80%, var(--c-ink));
  --font-title: 'New Icon', Georgia, serif;
  /* Source Serif 4: un tondo pensato per lo schermo, con un corsivo vero
     che resta leggibile anche piccolo */
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-script: 'Homemade Apple', 'Brush Script MT', cursive;
  --measure: 38rem;
  --gutter: 1.5rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.site {
  margin: 0;
  padding: var(--gutter);
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* Grana della carta: rumore SVG desaturato (feColorMatrix saturate 0),
   così non introduce alcuna tinta e resta valido con qualunque palette.
   In multiply si comporta come fibra della carta, non come velo grigio. */
body.site::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;                /* sotto l'iride (50): la chiusura resta piena */
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

a { color: var(--c-accent); }

img, canvas { max-width: 100%; }

/* --- testata --- */
.site-header { text-align: center; margin-bottom: 1.5rem; }
.site-eyebrow,
.site-subtitle { margin: 0; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }
.site-title { margin: .2rem 0; font-family: var(--font-title); font-weight: normal; font-size: 3.2rem; line-height: 1.1; letter-spacing: .03em; }
/* il sottotitolo e' scritto a mano, come sulla locandina della mostra */
.site-subtitle { font-family: var(--font-script); font-size: 1rem; letter-spacing: 0; text-transform: none; margin-top: .3rem; }
.site-title-link { color: inherit; text-decoration: none; }

/* --- navigazione --- */
.nav { margin: 0 auto 2.5rem; max-width: 60rem; }

/* pentagramma (desktop) */
/* Cinque righe, una nota per pagina a un grado diverso, stanghette di
   battuta fra l'una e l'altra, e la corona posata sulla nota corrente. Il
   rigo della biografia e' un'altra cosa: interlinea piu' larga, note piu'
   grandi e l'asta del metronomo al posto della corona. */
.stave {
  --stave-space: .45rem;
  --stave-height: calc(var(--stave-space) * 4);
  /* Da qui comincia il rigo. Le cinque righe sono un fondo assoluto e le
     note stanno nel flusso: se i due valori non coincidono, la melodia
     scende sotto il proprio pentagramma e le stanghette gli escono di
     sotto. Un nome solo per entrambi, cosi' non possono piu' separarsi. */
  --stave-top: 2.1rem;
  position: relative;
  /* sopra: un gambo in su arriva tre interlinee e mezzo oltre la testa, e la
     corona deve stargli sopra senza sfiorarlo; sotto, l'aria per le
     etichette che vanno a capo su due righe */
  padding: var(--stave-top) 1.1rem 3.4rem;
}

/* le cinque righe: una riga ogni interlinea, l'ultima chiude il rigo */
.stave-lines {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  top: var(--stave-top);
  height: calc(var(--stave-height) + 1px);
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--c-rule) 85%, transparent) 0 1px,
    transparent 1px var(--stave-space));
}

.stave-bars {
  display: flex;
  gap: .35rem;
  height: calc(var(--stave-height) + 1px);
}

.stave-note {
  position: relative;
  flex: 1 1 0;
  text-decoration: none;
  color: var(--c-ink);
}

/* stanghetta di battuta: sta nello spazio fra due note */
.stave-note + .stave-note::before {
  content: '';
  position: absolute;
  left: calc(-.175rem - .5px);
  top: 0;
  bottom: 0;
  border-left: 1px solid color-mix(in srgb, var(--c-rule) 70%, transparent);
}

/* Figure: il glifo e' un SVG disegnato da nav.js, con la testa centrata nel
   proprio riquadro. Qui si posiziona quel centro sul grado della nota. */
.stave-note {
  --note-ink: var(--c-rule);
  /* +.5px: il grado 0 sta sul centro della prima riga, non sul suo bordo */
  --note-y: calc(var(--degree, 4) * var(--stave-space) / 2 + .5px);
}
.stave-note:hover { --note-ink: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.stave-note.is-active { --note-ink: var(--c-accent); }

/* Il riquadro del glifo e' 24x64 con la testa in (8,32): ogni misura discende
   dalla sua altezza, cosi' il rigo della biografia puo' portare note piu'
   grandi cambiando solo --glyph-h. */
.stave-glyph {
  position: absolute;
  left: 50%;
  /* meta' dell'altezza: porta il centro della testa sul grado */
  bottom: calc(var(--note-y) - var(--glyph-h, 4rem) / 2);
  width: calc(var(--glyph-h, 4rem) * .375);         /* 24 unita' su 64 */
  height: var(--glyph-h, 4rem);
  margin-left: calc(var(--glyph-h, 4rem) * -.125);  /* 8 su 64: ricentra la testa */
  color: var(--note-ink);
  overflow: visible;
  transition: color .3s ease, transform .3s ease;
}
/* l'ingrandimento ruota attorno alla testa, non al riquadro */
.stave-note:hover .stave-glyph,
.tl-note-button:hover .stave-glyph,
.tl-note-button:focus-visible .stave-glyph {
  transform: scale(1.12);
  transform-origin:
    calc(var(--glyph-h, 4rem) * .125) calc(100% - var(--glyph-h, 4rem) / 2);
}

/* Le etichette stanno sotto il rigo, non dentro: in mezzo alle cinque righe
   le parole restavano tagliate. Sotto c'e' anche l'aria per i gambi in giu'. */
.stave-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 1.15rem);
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  line-height: 1.35;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink) 68%, transparent);
  transition: color .3s ease;
}
.stave-note:hover .stave-label { color: var(--c-ink); }
.stave-note.is-active .stave-label { color: var(--c-accent); }

/* Corona: arco piu' punto, come in partitura. Non un mezzo cerchio ma una
   calotta di 120 gradi, che e' la curva che si stampa davvero: il disegno e'
   un cerchio intero di raggio --f-r, ritagliato in cima.

   Con un arco di 120 gradi la corda vale r*sqrt(3) e la freccia r/2: da li'
   escono la larghezza, l'altezza e il ritaglio (in basso resta fuori il 75%
   del cerchio, ai lati il 6.7% per parte). */
.fermata {
  --f-r: .62rem;
  width: calc(var(--f-r) * 1.732);
  height: calc(var(--f-r) * .5);
  margin-left: calc(var(--f-r) * -.866);   /* mezza corda: ricentra la corona */
}
.fermata::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--f-r) * 2);
  height: calc(var(--f-r) * 2);
  margin-left: calc(var(--f-r) * -1);
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  clip-path: inset(0 6.7% 75% 6.7%);
}
.fermata::after {
  content: '';
  position: absolute;
  top: calc(var(--f-r) * .5 + .2rem);
  left: 50%;
  width: .16rem;
  height: .16rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--c-accent);
}

/* si posa sopra la nota corrente, fuori dal rigo, cosi' non contende lo
   spazio a gambi e code */
.stave-mark {
  position: absolute;
  top: .35rem;
  left: 0;
  opacity: 0;
  transition: transform .55s cubic-bezier(.3,.9,.25,1), opacity .2s;
}


/* programma di sala (mobile) */
.playbill { border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule); text-align: center; }
.playbill-toggle {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: .75rem 1rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
}
.playbill-toggle::after { content: ' \2013'; opacity: .5; }
.playbill.is-open .playbill-toggle::after { content: ' \00D7'; }
.playbill-list { list-style: none; margin: 0; padding: 0 0 .75rem; border-top: 1px solid var(--c-rule); }
.playbill-entry + .playbill-entry { margin-top: .1rem; }
.playbill-link {
  display: block;
  padding: .7rem .5rem;
  color: var(--c-ink);
  text-decoration: none;
  font-size: .95rem;
  letter-spacing: .1em;
}
.playbill-link.is-active { color: var(--c-accent); }
.playbill-link.is-active::before,
.playbill-link.is-active::after { content: '\00B7'; margin: 0 .5rem; }

/* elenco (ripiego) */
.nav-list { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; list-style: none; margin: 0; padding: 0; }

/* --- pagina --- */
/* Il testo resta sulla misura di lettura; galleria e mappa possono
   allargarsi fino al limite della pagina. */
.page { max-width: 62rem; margin: 0 auto; outline: none; }
.page-section { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.page-section + .page-section { margin-top: 2.5rem; }
.page-title { font-family: var(--font-title); font-weight: normal; font-size: 1.6rem; letter-spacing: .04em; margin: 0 0 .75rem; }
.page-lead { font-size: 1.05rem; }

/* Congedo: l'ultima riga di una pagina di testo, staccata dal corpo da un
   filetto corto, come la chiusa di un capitolo. */
.page-envoi {
  margin-top: 2rem;
  font-size: 1.05rem;
  font-style: italic;
}

/* --- il corto: la locandina dentro la pagina --- */
.page-section--corto {
  padding: 2.5rem 2rem 2rem;
  text-align: center;
}
/* Aquiline Two e' una corsiva inglese: svolazzi e code escono dal quadrato
   della lettera, e il punto interrogativo di «Chi ascoltera'?» scende ben
   sotto la riga. Con line-height: 1 la riga seguente gli finisce addosso -
   di quanto dipende da come il sistema disegna i caratteri, e su macOS
   bastava a farli sovrapporre. L'interlinea larga e' lo spazio che quelle
   code chiedono, e vale per tutti i titoli scritti con questa mano. */
.corto-title {
  margin: 0 0 1rem;
  font-family: 'Aquiline Two', var(--font-title);
  font-weight: normal;
  font-size: clamp(3rem, 11vw, 5.5rem);
  line-height: 1.22;
}
.page-envoi::before {
  content: '';
  display: block;
  width: 3rem;
  margin: 0 0 1.2rem;
  border-top: 1px solid var(--c-rule);
}
.page-loading { text-align: center; opacity: .6; }
.page-note { font-size: .8rem; opacity: .6; }

/* --- catalogo delle opere --- */
.work-list { list-style: none; margin: 0; padding: 0; }
.work-item { padding: .9rem 0; border-bottom: 1px solid color-mix(in srgb, var(--c-rule) 45%, transparent); }
.work-item:first-child { border-top: 1px solid color-mix(in srgb, var(--c-rule) 45%, transparent); }
.work-title { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; margin: 0; }
.work-meta { margin: .15rem 0 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .78; }

/* --- elenco in evidenza (home) --- */
.highlight-list { list-style: none; margin: 0; padding: 0; }
.highlight-item + .highlight-item { margin-top: .4rem; }

/* --- riquadri con titolo (sito, libro) --- */
.feature-title { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; letter-spacing: .04em; margin: 0 0 .75rem; }

/* --- galleria: linguette d'archivio --- */
.page-section--gallery { max-width: 52rem; margin-left: auto; margin-right: auto; }

.archive-tabs { display: flex; gap: .25rem; align-items: flex-end; border-bottom: 1px solid var(--c-rule); }
.archive-tab {
  flex: 0 1 auto;
  padding: .55rem .9rem;
  border: 1px solid var(--c-rule);
  border-bottom: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .78;
  transform: translateY(.25rem);
  transition: transform .25s, opacity .25s;
}
.archive-tab:hover { opacity: .85; }
.archive-tab.is-active { opacity: 1; transform: translateY(0); padding-bottom: .8rem; }

/* --- galleria: rullino --- */
.filmstrip-head { text-align: center; margin: 1.75rem 0 1.25rem; }
.filmstrip-title { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; margin: 0; letter-spacing: .06em; }
.filmstrip-note { font-size: .85rem; opacity: .7; margin: .3rem 0 0; }

.filmstrip-reel {
  list-style: none;
  margin: 0;
  padding: 1.5rem 1.75rem;
  border-left: 1px solid var(--c-rule);
  border-right: 1px solid var(--c-rule);
  /* perforazioni della pellicola */
  background:
    repeating-linear-gradient(to bottom, var(--c-rule) 0 .5rem, transparent .5rem 1.4rem) left top / 2px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--c-rule) 0 .5rem, transparent .5rem 1.4rem) right top / 2px 100% no-repeat;
  background-position: .5rem 0, calc(100% - .5rem) 0;
}

/* --d (0 al centro dello schermo, 1 ai margini) arriva da gallery.js:
   scala e opacità seguono lo scroll con continuità, senza transizione,
   altrimenti inseguirebbero il dito con un ritardo visibile. */
.filmstrip-frame {
  --d: 1;
  position: relative;
  margin: 0 auto 3.5rem;
  max-width: 34rem;
  scroll-snap-align: center;
  transform: scale(calc(1 - .22 * var(--d)));
  opacity: calc(1 - .78 * var(--d));
  filter: blur(calc(3px * var(--d)));
  will-change: transform, filter;
}

/* Lo "sviluppo" sta sull'immagine, non sul fotogramma: sono due filtri
   diversi (uno animato nel tempo, uno legato allo scroll) e sullo stesso
   elemento si sovrascriverebbero a vicenda. */
.frame-image { filter: contrast(0) brightness(1.9); transition: filter 1.1s ease; }
.filmstrip-frame.is-developed .frame-image { filter: none; }

/* Lo scroll si assesta su un fotogramma, ma con proximity: non imprigiona
   mai chi vuole scorrere via. Il contenitore di scroll è il viewport.
   L'aggancio si accende solo quando il rullino occupa lo schermo (classe
   messa da gallery.js): sopra, fra titolo e introduzione, si scorre libero. */
html.gallery-snap:has(body[data-page="galleria"]) { scroll-snap-type: y proximity; }

.frame-number {
  position: absolute;
  top: -1.1rem;
  left: 0;
  font-size: .74rem;
  letter-spacing: .18em;
  opacity: .5;
}
.frame-image { margin: 0; }
.frame-image:not(.is-ready) { min-height: 14rem; }

/* Una sezione della galleria che c'e' ma non ha ancora fotografie: una riga
   sola, discreta, al posto del rullino vuoto. */
.filmstrip-empty {
  margin: 2.5rem 0 3.5rem;
  text-align: center;
  font-size: .82rem;
  opacity: .55;
}

.frame-caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: .5rem 0 0;
  font-size: .8rem;
  /* piena vicino al centro, spenta ben prima dei bordi */
  opacity: calc(.8 - 1.6 * var(--d));
}
.frame-year { letter-spacing: .12em; opacity: .7; }

/* --- luoghi: scheda a sinistra, mappa a destra --- */
.page-section--places { max-width: 62rem; margin-left: auto; margin-right: auto; }

.places { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; align-items: start; }

.place-head { margin-bottom: 1rem; }
.place-name { font-family: var(--font-body); font-weight: 600; font-size: 1.5rem; margin: 0; }
.place-years { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin: .2rem 0 .8rem; }
.place-photos { display: grid; gap: 1.25rem; }
.place-photo:not(.is-ready) { min-height: 12rem; }

/* Le foto del luogo emergono salendo, sfalsate: accompagnano la lettura
   della scheda senza rubare la scena alla mappa. */
.place-photo {
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.place-photo.is-visible { opacity: 1; transform: none; }

/* La colonna di destra scorre per conto suo: trenta segnalini fanno un
   elenco piu' alto dello schermo, e appiccicato in cima come stava prima
   gli ultimi nomi restavano sotto il bordo, irraggiungibili finche' non si
   era finito di scorrere le fotografie a sinistra. Ora e' un riquadro alto
   quanto la finestra, con la sua barra: mappa ed elenco si scorrono
   indipendentemente dalla scheda.

   overscroll-behavior: arrivati in fondo all'elenco la pagina sotto non
   riparte da sola, cosi' la rotellina resta dentro al riquadro finche' ci
   si vuole stare. La rotellina sulla mappa scorre il riquadro e non
   ingrandisce: lo zoom si accende al primo clic (places.js).

   La barra di scorrimento resta nascosta: una striscia di grigio di sistema
   in mezzo alla pagina si vedeva piu' della mappa. Il riquadro scorre lo
   stesso - rotellina, dita, e i tasti quando il fuoco e' su un segnalino o
   sulla mappa - e l'elenco che si taglia sul bordo dice da se' che sotto
   c'e' dell'altro. */
.place-aside {
  position: sticky;
  top: 1.5rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;              /* Firefox */
}
.place-aside::-webkit-scrollbar { display: none; }   /* Chrome, Safari */
.place-map { height: 26rem; border: 1px solid var(--c-rule); }
.place-map .leaflet-tile-pane { filter: sepia(.55) saturate(.7) contrast(.92) brightness(1.04); }
.place-map .leaflet-container { background: var(--c-paper); font-family: var(--font-body); }

.place-marker-pin {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--c-paper);
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-ink);
  transition: transform .25s;
}
.place-marker.is-active .place-marker-pin { transform: scale(1.45); }
/* luoghi ancora senza fotografie */
.place-marker.is-empty .place-marker-pin { background: var(--c-rule); }
.place-index-item.is-empty { opacity: .4; }
.place-empty { font-size: .85rem; opacity: .7; }

.place-index { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; padding: 0; }
.place-index-item {
  border: 1px solid var(--c-rule);
  background: none;
  color: inherit;
  font: inherit;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .6rem;
  cursor: pointer;
  opacity: .65;
}
.place-index-item.is-active { opacity: 1; border-color: var(--c-accent); color: var(--c-accent); }

/* --- biografia: rigo orizzontale sopra, testo disteso sotto --- */
/* Il rigo e' proporzionale: bio.js scrive --at su ogni segno (posizione
   dell'anno, in percentuale) e --now sul contenitore, da cui dipendono
   l'asta di lettura e la velatura che le resta dietro. Nessun segno viene
   mai scostato dal proprio anno: i titoli stanno nella riga fissa sotto il
   rigo, non accanto ai segni. */
.page-section--bio { max-width: 62rem; margin-left: auto; margin-right: auto; }

.bio-timeline {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: .4rem 0 .5rem;
  background: var(--c-paper);
  border-bottom: 1px solid color-mix(in srgb, var(--c-rule) 50%, transparent);
}

/* Il rigo della biografia non e' quello della navigazione: interlinea piu'
   larga, note piu' grandi, e al posto della corona un'asta che scorre. A
   colpo d'occhio i due righi non si confondono. */
.tl-staff {
  --stave-space: .62rem;
  --stave-height: calc(var(--stave-space) * 4);
  position: relative;
  /* 2.2rem sopra per l'anno letto, 1.9rem sotto per gambi ed etichette */
  height: calc(var(--stave-height) + 4.1rem);
  margin: 0 1.2rem;
}

/* le cinque righe, e sopra di esse i tre strati che vi si appoggiano */
.tl-wash,
.tl-lines,
.tl-bars,
.tl-notes {
  position: absolute;
  left: 0;
  right: 0;
  top: 2.2rem;
  height: calc(var(--stave-height) + 1px);
  margin: 0;
  padding: 0;
}

/* Quel che si e' gia' letto resta acceso dietro al rigo: il foglio si tinge
   fino al punto in cui si e' arrivati. Sta prima delle righe nel markup,
   cosi' le righe restano nitide sopra la velatura. */
.tl-wash {
  right: auto;
  width: var(--now, 0%);
  pointer-events: none;
  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
  transition: width .12s linear;
}
.tl-lines {
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--c-rule) 85%, transparent) 0 1px,
    transparent 1px var(--stave-space));
}
.tl-bars { pointer-events: none; }
.tl-notes { list-style: none; }

/* stanghette: decenni sottili, la nascita apre, la morte chiude doppia */
.tl-bar {
  position: absolute;
  left: var(--at);
  top: 0;
  bottom: 0;
  border-left: 1px solid color-mix(in srgb, var(--c-rule) 70%, transparent);
}
.tl-bar::after {
  content: attr(data-label);
  position: absolute;
  top: calc(100% + .75rem);
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: .74rem;
  letter-spacing: .12em;
  opacity: .5;
}
.tl-bar[data-kind="start"],
.tl-bar[data-kind="end"] { border-left-color: var(--c-ink); opacity: .75; }
/* la doppia finale cade dentro il rigo, non oltre il suo ultimo pixel */
.tl-bar[data-kind="end"] { margin-left: -.16rem; }
/* la stanghetta finale e' doppia: sottile piu' spessa, come in partitura */
.tl-bar[data-kind="end"]::before {
  content: '';
  position: absolute;
  left: .16rem;
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--c-ink);
}
.tl-bar[data-kind="start"]::after,
.tl-bar[data-kind="end"]::after { opacity: .85; font-weight: bold; }
/* la stanghetta dell'anno in lettura si accende come le sue note */
.tl-bar.is-active { border-left-color: var(--c-accent); opacity: 1; }
.tl-bar.is-active::after { color: var(--c-accent); opacity: 1; }
/* agli estremi l'etichetta rientra invece di sbordare fuori dal rigo */
.tl-bar[data-kind="start"]::after { transform: none; }
.tl-bar[data-kind="end"]::after { transform: translateX(-100%); }

/* Stanghetta dell'anno in lettura: passa dietro alle note e dice che il
   rosso vale per l'anno, non per una nota sola. La tinta e' piena, non
   trasparente, cosi' due segni sullo stesso anno non la raddoppiano. */
.tl-tick {
  position: absolute;
  left: var(--at);
  top: -.45rem;
  bottom: -.45rem;
  border-left: 1px solid color-mix(in srgb, var(--c-accent) 30%, var(--c-paper));
  opacity: 0;
  transition: opacity .2s ease;
}
.tl-tick.is-active { opacity: 1; }

/* note: la testa cade esattamente sull'anno */
.tl-note {
  position: absolute;
  left: var(--at);
  top: 0;
  bottom: 0;
  width: 0;
  transform: translateX(var(--nudge, 0));
  /* la testa del glifo e' alta 8.8 unita' su 64: a 4.5rem viene esattamente
     un'interlinea, che e' la proporzione della stampa musicale */
  --glyph-h: 4.5rem;
  --note-ink: color-mix(in srgb, var(--c-rule) 75%, transparent);
  /* +.5px: il grado 0 sta sul centro della prima riga, non sul suo bordo */
  --note-y: calc(var(--degree, 4) * var(--stave-space) / 2 + .5px);
}
/* la nota si inchiostra quando la lettura la supera: il rigo si scrive
   mentre lo si legge */
.tl-note.is-past { --note-ink: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.tl-note.is-active { --note-ink: var(--c-accent); }

/* il bersaglio del mouse e' piu' largo della nota, ma non tanto da
   sconfinare sull'anno vicino */
.tl-note-button {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.2rem;
  margin-left: -.6rem;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* il nome serve ai lettori di schermo, non allo sguardo: la didascalia
   sotto il rigo dice la stessa cosa senza spostare niente */
.tl-note-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Asta di lettura: qui non c'e' una corona (quella e' il segno della
   navigazione) ma l'asta del metronomo, che attraversa il rigo e porta in
   cima l'anno a cui si e' arrivati. */
.tl-cursor {
  position: absolute;
  left: var(--now, 0%);
  top: 1.75rem;
  height: calc(var(--stave-height) + .8rem);
  border-left: 1px solid var(--c-accent);
  pointer-events: none;
  transition: left .12s linear;
}
.tl-readout {
  position: absolute;
  bottom: calc(100% + .28rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--c-accent);
}

/* didascalia: una riga sola, altezza fissa, non sposta mai il rigo */
/* didascalia a sinistra e legenda a destra, sulla stessa riga: una riga di
   testo in meno sotto il rigo */
.tl-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin: .35rem 1.2rem 0;
  min-height: 1.4rem;
}
.tl-caption {
  margin: 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--c-accent);
}

.tl-legend { list-style: none; display: flex; gap: 1.1rem; margin: 0; padding: 0; flex: 0 0 auto; }
.tl-legend-item { display: flex; align-items: center; gap: .35rem; }
/* Il glifo stretto sta dentro la riga: niente traboccamento sulla didascalia.
   --tight-h, che scrive glyphs.js, dice quante interlinee e' alto il ritaglio,
   e l'altezza lo segue: cosi' la testa della semibreve viene grande quanto
   quella della minima, invece del doppio, e la legenda accosta note della
   stessa misura. */
.stave-glyph--tight {
  position: static;
  width: auto;
  height: calc(var(--tight-h, 2) * .55rem);
  margin: 0;
  color: var(--c-rule);
}
.tl-legend-label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }

/* --- testo --- */
.bio-text { max-width: var(--measure); margin: 2rem auto 0; }
.bio-chapter + .bio-chapter { margin-top: 2.25rem; }
.bio-chapter-title { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; margin: 0 0 .5rem; }
.bio-chapter-body p { margin: 0 0 1rem; }
.bio-empty { font-size: .85rem; opacity: .7; }


/* --- cronologia: corridoio a tre corsie --- */
/* Una scatola buia dentro la pagina chiara, come la camera oscura in fondo
   allo studio. La geometria la fa cronologia.js; qui c'e' solo la veste: le
   tinte delle tre corsie (lette dal foglio, non dai dati: --cr-rgb-N serve
   anche al canvas), i cartellini e la scheda che si apre di lato. */
.page-section--cronologia { max-width: 62rem; }

.cronologia {
  --cr-rgb-1: 122, 148, 128;       /* Vignola: verderame */
  --cr-rgb-2: 193, 92, 60;         /* vita, al centro: terra bruciata */
  --cr-rgb-3: 186, 154, 92;        /* musica: ottone */
  --cr-rule-rgb: 242, 238, 230;    /* la panna delle locandine, usata come luce */
  --cr-1: rgb(var(--cr-rgb-1));
  --cr-2: rgb(var(--cr-rgb-2));
  --cr-3: rgb(var(--cr-rgb-3));
  margin-top: 1.25rem;
}

/* legenda: le tre voci, ciascuna col suo filetto, come l'organico in testa
   a una partitura */
.cr-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 0 0 .7rem;
  padding: 0;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
}
.cr-legend-item { display: flex; align-items: center; gap: .5rem; }
.cr-legend-item::before {
  content: '';
  width: 1.1rem;
  height: 2px;
  background: var(--cr-1);
}
.cr-legend-item[data-lane="1"]::before { background: var(--cr-2); }
.cr-legend-item[data-lane="2"]::before { background: var(--cr-3); }

/* la scatola: fondo d'inchiostro, cornice doppia come il cartoncino di una
   stampa d'epoca */
.cr-stage {
  position: relative;
  height: clamp(21rem, 60vh, 36rem);
  overflow: hidden;
  /* non nero: seppia scura, la stessa terra d'ombra delle stampe del
     fondo. Il fondo deve restare piu' chiaro dei cartellini di carta ma
     non spegnere le tre tinte del pavimento. */
  background:
    radial-gradient(130% 100% at 50% 30%, #6b5f52 0%, #4e453c00 62%),
    #4e453c;
  border: 1px solid var(--c-rule);
  box-shadow:
    inset 0 0 0 1px rgba(242, 238, 230, .12),
    inset 0 0 5rem rgba(0, 0, 0, .22);
  cursor: grab;
  outline: none;
  /* su schermo tattile lo scorrimento verticale resta della pagina: nel
     corridoio si viaggia con il dito di lato, o con il cursore qui sotto */
  touch-action: pan-y;
  user-select: none;
}
.cr-stage.is-dragging { cursor: grabbing; }
.cr-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--c-accent); }

/* a tutto schermo il corridoio prende tutta l'altezza disponibile, non piu'
   solo la sua striscia nella pagina */
#cronologia:fullscreen { display: flex; flex-direction: column; background: #201c18; padding: 1rem 1.4rem; }
#cronologia:fullscreen .cr-stage { flex: 1 1 auto; height: auto; }

/* il bottone a tutto schermo: nell'angolo, come il segno di una stampa,
   discreto finche' non serve */
.cr-fullscreen {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(242, 238, 230, .78);
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(242, 238, 230, .3);
  border-radius: 2px;
  cursor: pointer;
  opacity: .55;
  transition: opacity .25s ease, background .25s ease;
}
.cr-fullscreen:hover,
.cr-fullscreen:focus-visible { opacity: 1; background: rgba(0, 0, 0, .45); }
/* il segno di schermo intero: quattro angoli, come i crocini di taglio di
   una stampa; a schermo intero si stringono verso il centro. */
.cr-fullscreen span {
  position: relative;
  display: block;
  width: .95rem;
  height: .95rem;
}
.cr-fullscreen .cr-fs-a,
.cr-fullscreen .cr-fs-b {
  position: absolute;
  width: .4rem;
  height: .4rem;
  border: 1.6px solid currentColor;
}
.cr-fullscreen .cr-fs-a { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cr-fullscreen .cr-fs-b { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.cr-fullscreen .cr-fs-c { position: absolute; bottom: 0; left: 0; width: .4rem; height: .4rem; border: 1.6px solid currentColor; border-right: 0; border-top: 0; }
.cr-fullscreen .cr-fs-d { position: absolute; bottom: 0; right: 0; width: .4rem; height: .4rem; border: 1.6px solid currentColor; border-left: 0; border-top: 0; }
.cr-stage.is-fullscreen .cr-fs-a { top: .22rem; left: .22rem; }
.cr-stage.is-fullscreen .cr-fs-b { top: .22rem; right: .22rem; }
.cr-stage.is-fullscreen .cr-fs-c { bottom: .22rem; left: .22rem; }
.cr-stage.is-fullscreen .cr-fs-d { bottom: .22rem; right: .22rem; }

.cr-floor { position: absolute; inset: 0; display: block; }

/* l'anno in cui ci si trova, in alto come l'intestazione di un registro */
.cr-readout {
  position: absolute;
  top: .8rem;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-title);
  font-size: 1.2rem;
  letter-spacing: .34em;
  text-indent: .34em;
  color: rgba(242, 238, 230, .82);
  pointer-events: none;
}
.cr-readout::after {
  content: '';
  display: block;
  width: 2.2rem;
  height: 1px;
  margin: .5rem auto 0;
  background: rgba(242, 238, 230, .3);
}

.cr-panels { position: absolute; inset: 0; }

/* Cartellino: una scheda di carta in piedi sul pavimento. Sta a scala 1
   quando l'anno e' quello dell'osservatore; a tutto il resto pensa la
   transform, percio' qui le misure sono fisse. */
.cr-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 152px;
  margin: 0;
  padding: 5px;
  transform-origin: 50% 100%;
  display: block;
  text-align: left;
  font: inherit;
  color: var(--c-ink);
  background: linear-gradient(#f7f4ed, var(--c-cream));
  border: 0;
  box-shadow:
    inset 0 0 0 1px rgba(27, 25, 23, .1),
    0 .5rem 1.2rem rgba(0, 0, 0, .5);
  cursor: pointer;
  will-change: transform, opacity;
}
.cr-panel[hidden] { display: none; }   /* vince sul display: block qui sopra */

/* il filetto della corsia, in alto: e' l'unico colore sulla scheda */
.cr-panel::before {
  content: '';
  display: block;
  height: 3px;
  margin: -5px -5px 5px;
  background: var(--cr-1);
}
.cr-panel[data-lane="1"]::before { background: var(--cr-2); }
.cr-panel[data-lane="2"]::before { background: var(--cr-3); }

.cr-panel:hover,
.cr-panel:focus-visible {
  outline: none;
  background: #fbf9f4;
  box-shadow:
    inset 0 0 0 1px rgba(69, 114, 181, .45),
    0 .7rem 1.6rem rgba(0, 0, 0, .55);
}

.cr-panel-thumb {
  display: block;
  height: 82px;
  margin-bottom: 5px;
  /* dall'alto: di una pagina di rivista la miniatura deve mostrare la testata,
     non la piega di mezzo */
  background: #cfc5b2 center top / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(27, 25, 23, .12);
}
.cr-panel-body { display: block; padding: 0 3px 3px; }
.cr-panel-when {
  display: block;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink) 68%, transparent);
}
/* le vicende che durano portano la loro durata anche in fondo alla scheda,
   dove il tappeto acceso sul pavimento comincia */
.cr-panel[data-span] .cr-panel-when { color: var(--c-accent); }
.cr-panel-title {
  display: block;
  margin-top: .12rem;
  font-family: var(--font-body);
  font-size: .84rem;
  line-height: 1.25;
}

/* scheda dell'evento: entra da destra e lascia visibile il corridoio */
.cr-sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(23rem, 80%);
  z-index: 5000;
  overflow: auto;
  overscroll-behavior: contain;   /* in fondo al testo non si passa alla pagina */
  padding: 1.5rem 1.6rem 2rem;
  background: var(--c-paper);
  border-left: 1px solid var(--c-rule);
  box-shadow: -1rem 0 2.5rem rgba(0, 0, 0, .45);
}
.cr-sheet-close {
  position: absolute;
  top: .35rem;
  right: .6rem;
  padding: .2rem .4rem;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: .45;
}
.cr-sheet-close:hover { opacity: 1; }
.cr-sheet-lane {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .78;
}
.cr-sheet-when {
  margin: .35rem 0 0;
  font-family: var(--font-body);
  font-size: 1.35rem;
  line-height: 1.2;
}
.cr-sheet-title {
  margin: .15rem 0 .9rem;
  padding-bottom: .8rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--c-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-rule) 60%, transparent);
}
.cr-sheet-figure:not(:empty) { margin: 0 0 1rem; }
.cr-sheet-figure > * + * { margin-top: 1rem; }
.cr-sheet-text p { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.6; }
/* Il rimando in fondo alla scheda della cronologia: e' il bottone del
   catalogo, ripreso tale e quale perche' porta nello stesso posto. */
.cr-sheet-go { margin: .2rem 0 1rem; }

.cr-sheet-source {
  margin: 1rem 0 0;
  font-size: .74rem;
  letter-spacing: .1em;
  opacity: .55;
  white-space: pre-line;
}

/* invito, finche' non si tocca nulla */
.cr-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .9rem;
  margin: 0;
  text-align: center;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242, 238, 230, .6);
  pointer-events: none;
  transition: opacity .6s ease;
}
.cr-stage.is-touched .cr-hint { opacity: 0; }

/* cursore degli anni: una guida sottile, non un comando da modulo */
.cr-rail { margin-top: .7rem; }
.cr-slider {
  display: block;
  width: 100%;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.cr-slider { padding: .6rem 0; }
.cr-slider::-webkit-slider-runnable-track { height: 2px; background: var(--c-rule); }
.cr-slider::-moz-range-track { height: 2px; background: var(--c-rule); }
/* la maniglia, piu' grande di un cursore qualsiasi: e' lei il comando
   principale del corridoio, non un dettaglio da modulo */
.cr-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: -.58rem;
  background: var(--c-accent);
  border: 2px solid var(--c-paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 55%, transparent),
    0 .1rem .35rem rgba(0, 0, 0, .35);
  cursor: grab;
}
.cr-slider::-moz-range-thumb {
  width: 1.15rem;
  height: 1.15rem;
  background: var(--c-accent);
  border: 2px solid var(--c-paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 55%, transparent),
    0 .1rem .35rem rgba(0, 0, 0, .35);
  cursor: grab;
}
.cr-slider:active::-webkit-slider-thumb,
.cr-slider:active::-moz-range-thumb { cursor: grabbing; }
.cr-slider:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 4px; }
.cr-rail-ends {
  display: flex;
  justify-content: space-between;
  margin-top: .1rem;
  font-size: .74rem;
  letter-spacing: .14em;
  opacity: .5;
}
.cr-empty { font-size: .85rem; opacity: .7; }


/* --- catalogo delle opere --- */
/* Duecento voci: un elenco d'archivio, non una tabella. Ogni riga porta il
   suo numero di catalogo a sinistra, il titolo in tondo, il sottotitolo in
   corsivo e, sotto, la riga breve che dice forma, organico e anno. La scheda
   completa si apre sul posto, cosi' l'elenco resta scorrevole.

   Le opere che hanno una pagina propria (colonna "Scheda" del csv) sono in
   oro: si vedono da lontano, e sono le uniche che portano altrove. */
.page-section--opere { max-width: 46rem; }

.opere {
  --op-gold-1: #8c6a1f;
  --op-gold-2: #d9b455;
  margin-top: 1.5rem;
}

/* la ricerca: un rigo, non un modulo */
.op-tools { margin-bottom: 1.6rem; }
.op-search-label {
  display: block;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .78;
}
.op-search {
  display: block;
  width: 100%;
  margin: .3rem 0 0;
  padding: .35rem 0;
  font: inherit;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--c-ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-rule);
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.op-search::placeholder { color: color-mix(in srgb, var(--c-ink) 35%, transparent); }
.op-search:focus { border-bottom-color: var(--c-accent); }
.op-search::-webkit-search-cancel-button { -webkit-appearance: none; }
.op-count {
  margin: .45rem 0 0;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .78;
}

/* rubrica alfabetica */
.op-group + .op-group { margin-top: 1.6rem; }
.op-rubric {
  margin: 0 0 .3rem;
  padding-bottom: .25rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--c-ink) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-rule) 55%, transparent);
}

.op-items { list-style: none; margin: 0; padding: 0; }
.op-item {
  border-bottom: 1px solid color-mix(in srgb, var(--c-rule) 32%, transparent);
}

/* la riga */
.op-head {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: .6rem .2rem .65rem 0;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.op-head:hover { background: color-mix(in srgb, var(--c-rule) 12%, transparent); }
.op-head:focus-visible {
  outline: 1px solid var(--c-accent);
  outline-offset: -1px;
}

.op-n {
  font-size: .74rem;
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--c-ink) 40%, transparent);
  font-variant-numeric: tabular-nums;
}
.op-body { display: block; }
.op-name {
  display: block;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}
.op-sub {
  display: block;
  margin-top: .05rem;
  font-style: italic;
  font-size: .82rem;
  opacity: .7;
}
.op-meta {
  display: block;
  margin-top: .2rem;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink) 68%, transparent);
}

/* la parola cercata, accesa dentro il titolo */
.op-hit {
  background: color-mix(in srgb, var(--c-accent) 16%, transparent);
  color: inherit;
}

/* --- opere con una pagina propria: oro --- */
.op-head--scheda { grid-template-columns: 2.4rem 1fr auto; }
.op-item[data-scheda] .op-n { color: var(--op-gold-1); opacity: .8; }
.op-item[data-scheda] .op-name { color: var(--op-gold-1); }

/* Il lustro vero: il titolo diventa la finestrella su una lamina d'oro che
   scorre. Dove il ritaglio sul testo non c'e', resta l'oro pieno di sopra. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .op-item[data-scheda] .op-name {
    background-image: linear-gradient(100deg,
      var(--op-gold-1) 0%, var(--op-gold-1) 34%,
      var(--op-gold-2) 47%, #f0dc9e 51%, var(--op-gold-2) 55%,
      var(--op-gold-1) 68%, var(--op-gold-1) 100%);
    background-size: 280% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position .9s ease;
  }
  .op-head--scheda:hover .op-name,
  .op-head--scheda:focus-visible .op-name { background-position: 0 0; }
}
.op-head--scheda:hover { background: color-mix(in srgb, var(--op-gold-2) 12%, transparent); }

/* il segno che dice "di qui si esce": una stella, non una freccia */
.op-scheda-mark {
  align-self: center;
  padding-left: .6rem;
  font-size: .7rem;
  color: var(--op-gold-1);
  transition: transform .3s ease, opacity .3s ease;
  opacity: .75;
}
.op-head--scheda:hover .op-scheda-mark,
.op-head--scheda:focus-visible .op-scheda-mark,
.op-item[data-scheda].is-open .op-scheda-mark {
  opacity: 1;
  transform: scale(1.25) rotate(15deg);
}
.op-item[data-scheda].is-open .op-name { background-position: 0 0; }

/* Note che salgono dal margine destro della riga: ferme e invisibili a
   riposo, si alzano quando la voce e' toccata o aperta. */
.op-head--scheda { position: relative; overflow: hidden; }
.op-notes {
  position: absolute;
  inset: 0 0 0 auto;
  width: 9rem;
  pointer-events: none;
}
.op-note {
  position: absolute;
  bottom: -.4rem;
  font-size: .85rem;
  line-height: 1;
  color: var(--op-gold-2);
  opacity: 0;
}
.op-note--1 { right: 1.6rem; animation-delay: 0s; }
.op-note--2 { right: 3.8rem; animation-delay: .7s;  font-size: .7rem; }
.op-note--3 { right: 6rem;   animation-delay: 1.4s; }
.op-note--4 { right: 2.7rem; animation-delay: 2.1s; font-size: .75rem; }
.op-head--scheda:hover .op-note,
.op-head--scheda:focus-visible .op-note,
.op-item[data-scheda].is-open .op-note {
  animation-name: op-note-rise;
  animation-duration: 2.8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
@keyframes op-note-rise {
  0%   { opacity: 0;   transform: translate(0, 0) rotate(-8deg); }
  20%  { opacity: .9; }
  100% { opacity: 0;   transform: translate(-.8rem, -3.2rem) rotate(12deg); }
}
.op-item[data-scheda].is-open {
  background: color-mix(in srgb, var(--op-gold-2) 9%, transparent);
}

/* il bottone per la pagina dell'opera, in oro, in cima alla scheda */
.op-scheda-go { margin: .2rem 0 1rem; }
.op-scheda-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.3rem;
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fbf4df;
  text-decoration: none;
  background: linear-gradient(100deg, var(--op-gold-1), #b48e38 50%, var(--op-gold-1));
  background-size: 200% 100%;
  border: 1px solid var(--op-gold-1);
  transition: background-position .6s ease, box-shadow .25s;
}
.op-scheda-link:hover,
.op-scheda-link:focus-visible {
  background-position: 100% 0;
  box-shadow: 0 .2rem .8rem color-mix(in srgb, var(--op-gold-1) 35%, transparent);
  outline: none;
}
.op-scheda-link:hover .op-away-mark,
.op-scheda-link:focus-visible .op-away-mark { transform: translateX(.2em); }

@media (prefers-reduced-motion: reduce) {
  .op-note { animation: none !important; }
}

/* --- scheda d'archivio, aperta sul posto --- */
.op-record {
  padding: .2rem 0 1rem 2.4rem;
  font-size: .82rem;
}
.op-record dl {
  display: grid;
  /* la colonna delle etichette si allarga quanto la piu' lunga
     (PRESENTAZIONE, PUBBLICAZIONE): nessuna va piu' a capo */
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .3rem 1.1rem;
  margin: 0;
}
.op-record dt {
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink) 68%, transparent);
  padding-top: .18rem;
  white-space: nowrap;
}
.op-record dd { margin: 0; }
@media (max-width: 30rem) {
  .op-record { padding-left: 0; }
  .op-record dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .op-record dt { padding-top: .5rem; }
}
.op-item.is-open { background: color-mix(in srgb, var(--c-rule) 9%, transparent); }

/* Il video dell'opera, dentro la scheda: largo quanto la colonna dei dati
   e non piu' di un fermo immagine comodo, perche' il catalogo resta un
   elenco da scorrere e non una sala di proiezione. */
.op-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 32rem;
  margin: 1rem 0 .2rem;
  /* La stessa montatura delle fotografie, in piccolo: un cartoncino color
     carta, un capello di filetto seppia e un'ombra corta. Il video non va a
     filo del bordo ma sta dentro il suo passe-partout. */
  background: var(--c-paper);
  border: 1px solid color-mix(in srgb, var(--c-rule) 70%, transparent);
  box-shadow: 0 5px 14px -12px color-mix(in srgb, var(--c-ink) 70%, transparent);
}
/* L'inset non e' zero: quel mezzo millimetro di carta tutt'intorno e' la
   cornice. Un elemento in posizione assoluta si misura sul riquadro interno
   del genitore, quindi il margine si scrive qui e non come padding la'.

   Le misure vanno dette per esteso. Un iframe e' un elemento sostituito, e
   per quelli 'width: auto' non vuol dire «riempi lo spazio fra i due lati»
   ma «prendi la tua misura naturale», che per un iframe e' 300 × 150 px:
   sullo schermo grande il video restava di quella taglia in mezzo al
   cartoncino, con la carta scoperta a destra e in basso. */
.op-embed iframe {
  position: absolute;
  inset: .3rem;
  width: calc(100% - .6rem);
  height: calc(100% - .6rem);
  border: 0;
}

/* Rimandi fuori dal sito: lo stesso bottone squadrato del fascicolo
   sfogliabile, con il segno che dice dove si va a finire. */
/* I crediti dell'incisione, come la didascalia di una fotografia. */
.op-credit {
  max-width: 32rem;
  margin: .4rem 0 0;
  font-size: .8rem;
  font-style: italic;
  line-height: 1.45;
  opacity: .7;
}

.op-away {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .9rem 0 0;
}
.op-away-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 1rem;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-decoration: none;
  background: none;
  border: 1px solid color-mix(in srgb, var(--c-rule) 70%, transparent);
  opacity: .7;
  transition: opacity .25s, border-color .25s, background-color .25s;
}
.op-away-link:hover,
.op-away-link:focus-visible {
  opacity: 1;
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 6%, transparent);
  outline: none;
}
.op-away-mark { font-size: .8em; transition: transform .25s ease; }
.op-opac:hover .op-away-mark,
.op-opac:focus-visible .op-away-mark { transform: translate(.12em, -.12em); }

/* L'ascolto porta il verde di Spotify, ma solo quando lo si tocca: a riposo
   resta della carta, come tutto il resto della pagina. */
.op-ascolto {
  --verde: #1a7a43;
}
.op-ascolto:hover,
.op-ascolto:focus-visible {
  color: var(--verde);
  border-color: var(--verde);
  background: color-mix(in srgb, var(--verde) 8%, transparent);
}
.op-ascolto:hover .op-away-mark,
.op-ascolto:focus-visible .op-away-mark { transform: scale(1.2); }

/* YouTube: stessa sobrieta', altro colore quando lo si tocca. */
.op-video { --rosso: #a02121; }
.op-video:hover,
.op-video:focus-visible {
  color: var(--rosso);
  border-color: var(--rosso);
  background: color-mix(in srgb, var(--rosso) 8%, transparent);
}
.op-video:hover .op-away-mark,
.op-video:focus-visible .op-away-mark { transform: scale(1.2); }

/* Sulla riga chiusa, il segno che di quest'opera esiste un'incisione. */
.op-rec-mark {
  margin-left: .5rem;
  font-size: .85em;
  color: #1a7a43;
  opacity: .75;
}

.op-none,
.op-loading { font-size: .85rem; opacity: .65; }

@media (prefers-reduced-motion: reduce) {
  .op-item[data-scheda] .op-name,
  .op-scheda-mark,
  .op-away-link,
  .op-away-mark { transition: none; }
}


/* --- il progetto --- */
/* Le quattro parti sono un programma di sala: numero d'ordine, che cosa e',
   e il titolo. I crediti sono un colophon: ruolo a sinistra, nomi a destra. */
.parti {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  counter-reset: parte;
}
.parte {
  position: relative;
  counter-increment: parte;
  padding: .9rem 0 .9rem 3rem;
  border-top: 1px solid color-mix(in srgb, var(--c-rule) 45%, transparent);
}
.parte:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--c-rule) 45%, transparent);
}
/* il numero d'ordine, in cifre romane come nei programmi stampati */
.parte::before {
  content: counter(parte, upper-roman);
  position: absolute;
  left: 0;
  top: 1.05rem;
  font-family: var(--font-title);
  font-size: .7rem;
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--c-ink) 40%, transparent);
}
.parte-tipo {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink) 68%, transparent);
}
.parte-titolo {
  margin: .15rem 0 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.3;
}

/* colophon */
.crediti {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: .45rem 1.2rem;
  margin: 1.2rem 0 0;
}
.crediti dt {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink) 68%, transparent);
  padding-top: .12rem;
}
.crediti dd { margin: 0; font-size: .95rem; }

/* patrocini e ringraziamenti, in calce come su una locandina */
.page-section--patrocini {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--c-rule);
  text-align: center;
}
.patrocinio-label {
  margin: 1.4rem 0 .5rem;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink) 68%, transparent);
}
.page-section--patrocini > .patrocinio-label:first-child { margin-top: 0; }
/* I marchi si allineano sulla linea di base ottica, non sulla scatola: uno
   stemma e' alto e stretto, una scritta e' bassa e larga, e a parita' di
   altezza il primo schiaccerebbe la seconda. Quindi l'altezza si dichiara
   per ciascuno, secondo quanto pesa a occhio. */
.loghi {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.4rem 2.6rem;
  margin: 0;
  padding: 0;
}
/* La casella si misura sul marchio, non il contrario: senza questo, la
   larghezza dell'immagine dipenderebbe da quella della casella, che dipende
   dall'immagine, e il giro si chiude a zero (regola img { max-width: 100% }
   in testa al foglio). */
.loghi li { display: flex; flex: 0 0 auto; }
.logo {
  display: block;
  width: auto;
  max-width: none;
}
.logo--vignola { height: 6.5rem; }
.logo--guiglia { height: 5.8rem; }
.logo--bcc { height: 2.6rem; }
.logo--rs { height: 3rem; }
.patrocinio-testo { margin: 0; font-size: .88rem; }


/* --- transizione a iris fra le categorie --- */
.iris {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--c-ink);
  pointer-events: none;
  clip-path: circle(0% at 50% 45%);
  visibility: hidden;
}
.iris.is-active { visibility: visible; clip-path: circle(150% at 50% 45%); transition: clip-path .48s ease-in; }
.iris.is-active.is-open { clip-path: circle(0% at 50% 45%); transition: clip-path .48s ease-out; }

/* --- immagini protette --- */
.protected-image {
  position: relative;
  display: block;
  margin: 1.5rem 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.protected-image-canvas { display: block; width: 100%; height: auto; pointer-events: none; }
.protected-image-shield { position: absolute; inset: 0; display: block; background: transparent; }
/* Montatura da stampa: la foto non è più a filo, ma appoggiata su un
   cartoncino con un capello di filetto e un'ombra corta. Tutte le tinte
   derivano dalle variabili di base, nessun colore nuovo. */
.frame-image,
.place-photo,
.mostra-locandina {
  padding: .6rem;
  background: var(--c-paper);
  border: 1px solid color-mix(in srgb, var(--c-rule) 70%, transparent);
  box-shadow: 0 6px 16px -12px color-mix(in srgb, var(--c-ink) 70%, transparent);
}

.protected-image-caption { font-size: .8rem; opacity: .7; margin-top: .4rem; }
.protected-image.is-missing::before {
  content: 'immagine non disponibile';
  display: block; padding: 2rem; text-align: center;
  border: 1px dashed var(--c-rule); font-size: .8rem; opacity: .6;
}
body.is-veiled .protected-image-canvas { filter: blur(28px); }

/* --- fascicolo sfogliabile --- */
.page-section--flipbook { max-width: 62rem; margin-left: auto; margin-right: auto; }
.flipbook {
  margin: 1.5rem 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* La misura si limita qui: sul riquadro interno il visore scrive un
   max-width in linea, che avrebbe la meglio su questo foglio. */
.flipbook { max-width: 62rem; margin-left: auto; margin-right: auto; }
/* pan-y lascia scorrere la pagina col dito in verticale: la sfogliata
   orizzontale resta al visore */
.flipbook-stage { touch-action: pan-y; }
.flipbook-stage canvas { display: block; }

.flipbook-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1rem;
}
.flipbook-button {
  border: 1px solid color-mix(in srgb, var(--c-rule) 70%, transparent);
  border-radius: 0;
  padding: .35rem 1rem;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .7;
  transition: opacity .25s, border-color .25s;
}
.flipbook-button:hover:not(:disabled),
.flipbook-button:focus-visible { opacity: 1; border-color: var(--c-accent); }
.flipbook-button:disabled { opacity: .3; cursor: default; }
.flipbook-status {
  margin: 0;
  min-width: 11ch;
  text-align: center;
  font-size: .8rem;
  opacity: .7;
}
.flipbook-empty {
  padding: 2rem;
  text-align: center;
  border: 1px dashed var(--c-rule);
  font-size: .8rem;
  opacity: .6;
}
body.is-veiled .flipbook-stage { filter: blur(28px); }

/* --- grammofono: il lettore delle incisioni ---------------------------
   Un blocco da ripetere tale e quale sotto ogni opera incisa: il disegno
   e i comandi li costruisce gramophone.js, qui c'e' solo come sono fatti.

   La macchina e' un'incisione d'epoca in pubblico dominio, usata come
   maschera e non come immagine: il PNG dice soltanto dove c'e' inchiostro,
   il colore lo mette questa regola. Cosi' il grammofono e' dello stesso
   nero del testo, e se un giorno la veste cambiasse tinta cambierebbe
   anche lui. */
.gramophone {
  margin: 2rem auto;
  max-width: 27rem;
  text-align: center;
}
.gramophone-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  margin: 0 0 .4rem;
}

.gramophone-stage {
  position: relative;
  aspect-ratio: 968 / 881;
  cursor: pointer;
}
.gramophone-machine {
  position: absolute;
  inset: 0 0 0 20.66%;        /* i 200 unita' di respiro davanti alla tromba */
  -webkit-mask: url('../img/web/gramofono/grammofono.png') center / contain no-repeat;
  mask: url('../img/web/gramofono/grammofono.png') center / contain no-repeat;
}
/* L'inchiostro si versa solo dove la maschera esiste davvero: senza questa
   prudenza, un browser che non la conoscesse mostrerebbe un rettangolo nero
   grande quanto la scena. */
@supports (mask-image: url('')) or (-webkit-mask-image: url('')) {
  .gramophone-machine { background: var(--c-ink); }
}
.gramophone-air { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Le onde esistono solo mentre suona: e' l'unico segno che serva, e senza
   di esse l'incisione resta quello che e', una figura ferma sulla carta. */
.gram-waves {
  fill: none;
  stroke: color-mix(in srgb, var(--c-rule) 85%, var(--c-ink));
  stroke-width: 8;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .5s ease;
}
.gramophone.is-playing .gram-waves { opacity: 1; }
/* Ferme, le onde non ci sono: esistono solo mentre l'animazione le disegna.
   Senza questo, al primo tocco le tre comparivano tutte insieme, larghe e
   piene - lo stato di riposo del disegno - e solo dopo cominciavano a
   uscire dalla tromba una per volta; e alla pausa tornavano a mostrarsi
   tutte prima di sbiadire. */
.gram-waves path { opacity: 0; }
.gramophone.is-playing .gram-waves path {
  /* "backwards": durante l'attesa del proprio turno l'onda tiene lo stato
     dello 0% - stretta e invisibile - invece di quello di riposo. */
  animation: gram-wave 2.4s ease-out infinite backwards;
  transform-origin: 90px 270px;
}
.gramophone.is-playing .gram-waves path:nth-child(2) { animation-delay: .8s; }
.gramophone.is-playing .gram-waves path:nth-child(3) { animation-delay: 1.6s; }

@keyframes gram-wave {
  0%   { opacity: 0; transform: scale(.72); }
  35%  { opacity: .85; }
  100% { opacity: 0; transform: scale(1.12); }
}

/* --- i comandi --- */
.gramophone-controls {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .6rem;
}
.gramophone-play {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s ease;
}
.gramophone-play:hover { background: color-mix(in srgb, var(--c-rule) 22%, transparent); }
.gramophone-play:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* triangolo o due sbarre: la stessa forma che sta su ogni lettore */
.gramophone-play-icon {
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.gramophone.is-playing .gramophone-play-icon {
  width: 8px; height: 10px;
  border-width: 0 3px;
  border-color: currentColor;
}
.gramophone-seek {
  flex: 1;
  min-width: 4rem;
  accent-color: var(--c-accent);
  cursor: pointer;
}
.gramophone-seek:disabled { cursor: default; opacity: .5; }
.gramophone-time {
  margin: 0;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  opacity: .7;
  white-space: nowrap;
}
.gramophone-credit { margin: .7rem 0 0; font-size: .78rem; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  /* Nessuna onda in movimento: restano ferme, tutte e tre, come nelle
     reclame d'epoca. L'opacita' va rimessa a mano, perche' qui non c'e'
     piu' un'animazione a darla. */
  .gramophone.is-playing .gram-waves path { animation: none; opacity: .7; }
}

@media print { .protected-image, .flipbook, .cronologia { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .stave-mark, .archive-tab, .frame-caption { transition: none; }
  .filmstrip-frame { transform: none; opacity: 1; filter: none; transition: none; }
  .filmstrip-frame .frame-caption { opacity: .8; }
  .frame-image { filter: none; transition: none; }
  .stave-glyph, .stave-label { transition: none; }
  .place-photo { opacity: 1; transform: none; transition: none; }
  .tl-cursor, .tl-wash, .tl-tick { transition: none; }
  html:has(body[data-page="galleria"]) { scroll-snap-type: none; }
  .iris { display: none; }
}

/* Provenienza delle fotografie, in calce alle pagine che ne mostrano. */
.image-credit {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding-top: .8rem;
  border-top: 1px solid color-mix(in srgb, var(--c-rule) 60%, transparent);
  font-size: .75rem;
  line-height: 1.5;
  text-align: center;
  opacity: .7;
  text-wrap: balance;   /* evita l'ultima riga con una parola sola */
}

/* --- piè di pagina --- */
.site-footer { max-width: var(--measure); margin: 4rem auto 0; padding-top: 1rem; border-top: 1px solid var(--c-rule); }
.site-footer-note { font-size: .75rem; opacity: .7; text-align: center; }

.noscript-note { text-align: center; }

/* --- mobile (stessa soglia di MOBILE_MAX in nav.js) --- */
@media (max-width: 700px) {
  :root { --gutter: 1rem; }
  .site-title { font-size: 1.9rem; }
  .nav { margin-bottom: 2rem; }

  /* su mobile niente finestrella: tutti i fotogrammi a piena luce */
  .archive-tabs { overflow-x: auto; }
  .archive-tab { flex: 0 0 auto; }
  .filmstrip-reel { padding: 1rem .9rem; background-position: .3rem 0, calc(100% - .3rem) 0; }
  .frame-image, .place-photo { padding: .4rem; }   /* montatura più stretta */
  .filmstrip-frame { transform: none; opacity: 1; filter: none; margin-bottom: 2.5rem; }
  .filmstrip-frame .frame-caption { opacity: .8; }
  /* lo snap resta: è l'unico effetto che su mobile aiuta invece di pesare */

  /* mappa sopra, scheda sotto */
  .places { grid-template-columns: 1fr; }
  /* In colonna unica il riquadro a se' non ha senso: mappa, elenco e scheda
     stanno uno sotto l'altro e scorrono insieme, con la pagina. */
  .place-aside {
    position: static;
    order: -1;
    max-height: none;
    overflow: visible;
  }
  .place-map { height: 18rem; }

  /* Sotto i 700px il rigo mentirebbe: trentasette anni in poche centinaia di
     pixel sovrapporrebbero le note. Restano testo e catalogo. */
  .bio-timeline { display: none; }
  .bio-text { margin-top: 0; }

  .loghi { gap: 1.2rem 1.8rem; }
  .logo--vignola { height: 6.5rem; }
  .logo--guiglia { height: 5.8rem; }
  .logo--bcc { height: 2.1rem; }
  .logo--rs { height: 4rem; }

  /* il colophon del progetto: ruolo sopra, nomi sotto */
  .crediti { grid-template-columns: 1fr; gap: .1rem; }
  .crediti dd { margin-bottom: .7rem; }

  /* Il corridoio invece regge: e' profondo, non largo. Solo un po' piu'
     basso, e la scheda si prende tutta la scatola. */
  .cr-stage { height: clamp(17rem, 48vh, 24rem); }
  .cr-sheet { width: 100%; border-left: 0; }
}


/* --- pagina d'opera (#/campanaro) --- */
/* Un programma di sala: frontespizio in oro, personaggi come in locandina,
   la sinossi in colonna di lettura con le didascalie in corsivo. */
.page-section--opera {
  --op-gold-1: #8c6a1f;
  --op-gold-2: #d9b455;
  max-width: var(--measure);
}
/* le figure affiancate al testo (.opera-figure) sono flottanti: senza
   questo, il loro ingombro sfonda nella sezione successiva invece di
   fermarsi in fondo alla propria. */
.page-section--opera::after { content: ''; display: table; clear: both; }
.opera-back { margin: 0 0 1.5rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.opera-back a { color: var(--c-accent); text-decoration: none; }
.opera-back a:hover { text-decoration: underline; }

.opera-head { text-align: center; margin-bottom: 2rem; }
.opera-kicker,
.opera-label {
  margin: 0;
  font-size: .74rem;
  font-weight: normal;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--op-gold-1);
}
.opera-title { margin: .4rem 0; color: var(--op-gold-1); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .opera-title {
    background: linear-gradient(100deg, var(--op-gold-1) 20%, var(--op-gold-2) 48%, #f0dc9e 52%, var(--op-gold-2) 56%, var(--op-gold-1) 80%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: opera-shine 7s ease-in-out infinite;
  }
}
@keyframes opera-shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.opera-byline { margin: 0; font-style: italic; font-size: .9rem; opacity: .75; }

.opera-cast {
  padding: 1.2rem 1.4rem;
  border-top: 1px solid var(--op-gold-1);
  border-bottom: 1px solid var(--op-gold-1);
}
.opera-cast .opera-label { text-align: center; margin-bottom: .8rem; }
.opera-cast dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem 1rem;
  margin: 0;
}
.opera-cast dt { font-family: var(--font-body); }
.opera-cast dd { margin: 0; font-style: italic; opacity: .75; text-align: right; }
.opera-place { margin: 1rem 0 0; text-align: center; font-size: .85rem; font-style: italic; }

/* Il titolo d'atto scende sempre sotto le immagini affiancate: accanto a una
   figura a filo destro gli restava una colonnina stretta, e "Una recensione
   coeva ed entusiasta" - centrato, maiuscoletto, spaziato - ci si spezzava in
   tre righe. Con clear prende la larghezza piena e sta su una riga sola.

   L'aria sopra e' divisa fra margine e padding perche' resti in entrambi i
   casi: quando il titolo scorre nel testo i due fanno insieme i 2,2rem di
   prima; quando invece scende sotto una figura il margine viene assorbito
   dall'allineamento al piede dell'immagine, e il padding e' quel che tiene
   il titolo staccato dalla didascalia. */
.opera-act {
  clear: both;
  margin: 0rem 0 1rem;
  font-family: var(--font-body);
  font-weight: normal;
  font-size: 1.1rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-align: center;
  color: var(--op-gold-1);
}
.opera-act::before,
.opera-act::after { content: '♪'; margin: 0 .8rem; font-size: .8em; opacity: .6; }
.opera-stage { font-style: italic; }
.opera-verse {
  margin: 1.2rem 0 1.2rem 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--op-gold-2);
  font-style: italic;
}
.opera-verse p { margin: 0; }


/* Una citazione lunga in prosa - una recensione d'epoca, una lettera. Non
   e' .opera-verse, che serve ai versi: qui il corsivo su tre capoversi
   stancherebbe, e quello che conta e' che si veda dove finisce la voce
   del sito e comincia quella della fonte. */
.opera-quote {
  margin: 1.4rem 0 .6rem;
  padding: .2rem 0 .2rem 1.2rem;
  border-left: 2px solid var(--op-gold-2);
  font-size: .95rem;
}
.opera-quote p { margin: 0 0 .8rem; line-height: 1.7; }
.opera-quote p:last-child { margin-bottom: 0; }
/* I versi di una cantata: centrati in pagina. Il filetto a sinistra qui se
   ne va - serve a segnare una citazione in prosa, e accanto a un testo
   centrato resterebbe spaiato - e le strofe si distanziano un po' di piu'. */
.opera-quote--versi {
  padding-left: 0;
  border-left: 0;
  text-align: center;
}
.opera-quote--versi p { margin-bottom: 1.4rem; }
.opera-quote-source {
  margin: 0 0 1.4rem 1.2rem;
  font-size: .78rem;
  opacity: .7;
}
.opera-sources { list-style: none; margin: 1.2rem 0; padding: 0; }
.opera-sources li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem 1rem;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-rule) 45%, transparent);
}
.opera-source-name { font-family: var(--font-body); }
.opera-source-meta { grid-column: 1; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.opera-sources .op-away-link { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 34rem) {
  .opera-sources li { grid-template-columns: 1fr; }
  .opera-sources .op-away-link { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .opera-title { animation: none; }
}

/* trailer del corto: riquadro 16:9 che segue la larghezza della colonna */
.corto-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 1.5rem 0;
  background: #000;
}
.corto-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* sotto il titolo in Aquiline: le code della corsiva scendono oltre la
   riga, e su macOS finivano sull'etichetta; il margine alto le lascia spazio */
.corto-video-label {
  position: relative;
  margin: 2.6rem 0 -.9rem;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .8;
}

/* testo del corto: sulla locandina blu, ma a bandiera per leggerlo bene */
.corto-text {
  max-width: 36rem;
  margin: 2.2rem auto 0;
  text-align: left;
  hyphens: auto;
}
.corto-sub {
  margin: 2rem 0 2rem;
  font-family: 'Aquiline Two', var(--font-title);
  font-weight: normal;
  font-size: 2rem;
  line-height: 1.22;
  text-align: center;
}
.corto-text p { margin: 0; line-height: 1.75; }

/* il libro: introduzione in evidenza, le due parti come capitoli */
.libro-text { max-width: var(--measure); hyphens: auto; }
.libro-text p { line-height: 1.75; }
.libro-text cite { font-style: italic; }
.libro-part {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 .6rem;
  font-family: var(--font-body);
  font-weight: normal;
  font-size: .75rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.libro-part::before,
.libro-part::after { content: ''; flex: 1; border-top: 1px solid var(--c-rule); }

/* home: il ritratto accanto all'introduzione, sopra di essa sui telefoni */
.page-section--intro { display: grid; gap: 0 2.5rem; max-width: 56rem; }
.page-section--intro > :not(.home-portrait) { grid-column: 1; }
.home-portrait {
  margin: 0 0 1.5rem;
  max-width: 22rem;
  box-shadow: 0 .6rem 1.8rem rgba(27, 25, 23, .22);
}
@media (min-width: 48rem) {
  .page-section--intro { grid-template-columns: 1fr minmax(14rem, 20rem); align-items: start; }
  .home-portrait { grid-column: 2; grid-row: 1 / span 4; margin: .3rem 0 0; }
}

/* --- Mezaluna, l'associazione che promuove il progetto --- */
.logo--mezaluna { height: 6.5rem; }

/* in home: logo e nome, come un timbro in fondo all'introduzione */
.promotore { max-width: var(--measure); }
.promotore-link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 0;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}
.promotore-logo { flex: 0 0 auto; width: auto; height: 5.5rem; max-width: none; }
.promotore-testo { display: flex; flex-direction: column; gap: .15rem; }
.promotore-label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.promotore-nome { font-weight: 600; line-height: 1.35; }
.promotore-more { margin-top: .2rem; font-size: .9rem; color: var(--c-accent); }
.promotore-link:hover .promotore-more,
.promotore-link:focus-visible .promotore-more { text-decoration: underline; }

/* nella pagina del progetto: il logo accanto al paragrafo che la presenta */
.progetto-promotore::after { content: ''; display: table; clear: both; }
.progetto-promotore-logo {
  float: right;
  width: auto;
  height: 6rem;
  max-width: none;
  margin: .2rem 0 .6rem 1.2rem;
}

/* titoli di coda del corto: colonna centrata, ruolo piccolo sopra i nomi */
.corto-credits {
  max-width: 30rem;
  margin: 3rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--c-rule);
}
.credit { margin: 1.6rem 0 0; }
.credit p { margin: 0; }
.credit-role {
  margin-bottom: .3rem !important;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .8;
}
.credit-name { font-size: 1.05rem; line-height: 1.45; }
.credit-note { font-size: .9rem; opacity: .85; }
.credit-cast { margin: 0; text-align: left; }
.credit-cast div {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  line-height: 1.6;
}
/* i puntini fra personaggio e interprete, come nei titoli stampati */
.credit-cast dt { flex: 0 1 auto; font-style: italic; }
.credit-cast dd {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: .4rem;
  margin: 0;
  text-align: right;
}
.credit-cast dd::before {
  content: '';
  flex: 1 1 1rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--c-ink) 45%, transparent);
  transform: translateY(-.3em);
}
/* i marchi nei titoli di coda: le altezze sono quelle dei patrocini */
.credit-loghi { margin: .6rem 0 0; }
.credit-copy { margin: 2.2rem 0 0; font-size: .85rem; letter-spacing: .1em; opacity: .8; }
@media (max-width: 30rem) {
  .credit-cast div { flex-wrap: wrap; justify-content: center; text-align: center; }
  .credit-cast dd { flex: 0 0 100%; justify-content: center; }
  .credit-cast dd::before { display: none; }
}

/* introduzione all'opera, fra il frontespizio e i personaggi */
.opera-intro { margin: 0 0 2.2rem; hyphens: auto; }
.opera-intro p { line-height: 1.75; }

/* immagine affiancata al testo dell'introduzione; sopra il testo sui telefoni */
.opera-figure {
  float: right;
  width: min(15rem, 45%);
  margin: .4rem 0 1rem 1.6rem;
}
.opera-intro::after { content: ''; display: table; clear: both; }
@media (max-width: 34rem) {
  .opera-figure { float: none; width: auto; max-width: 18rem; margin: 1.2rem auto; }
}
.opera-figure--wide { width: min(21rem, 50%); }

/* sfalsata a sinistra, per alternare il verso delle immagini lungo la
   pagina invece di accodarle tutte sullo stesso lato */
.opera-figure--left { float: left; margin: .4rem 1.6rem 1rem 0; }
@media (max-width: 34rem) {
  .opera-figure--left { float: none; margin: 1.2rem auto; }
}

/* la locandina della mostra: in mezzo alla colonna, grande quanto basta
   perche' le date si leggano senza aprirla */
.mostra-locandina {
  width: min(28rem, 100%);
  margin: 0 auto 2rem;
}
.mostra-locandina:not(.is-ready) { min-height: 20rem; }
.mostra-locandina .protected-image-caption { text-align: center; }

/* scenografie: una fila che scorre di lato, una lastra alla volta */
.opera-reel {
  display: flex;
  gap: 1rem;
  margin: 1.2rem 0 0;
  padding: 0 0 .8rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--c-rule) transparent;
}
.opera-reel:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 4px; }
.opera-reel-item {
  flex: 0 0 min(34rem, 88%);
  scroll-snap-align: center;
}
.opera-reel-item .protected-image { margin: 0; }
.opera-reel-item .protected-image-caption { text-align: center; letter-spacing: .1em; }

/* --- home: la copertina ------------------------------------------------ */
/* Come una locandina: Gazzotti occupa tutto lo schermo, virato seppia e
   scurito perche' il titolo si legga; il titolo sta al centro e l'indice
   (il pentagramma) in fondo. Sotto la copertina riprende la carta.
   Fuori dalla home la copertina e il timbro non esistono. */
.home-cover,
.home-badge { display: none; }

body[data-page="home"] .masthead {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) 2.5rem;
  padding: var(--gutter);
  overflow: hidden;
  isolation: isolate;
  /* dentro la copertina l'inchiostro diventa panna e l'accento oro */
  --c-ink: var(--c-cream);
  --c-rule: rgba(242, 238, 230, .55);
  --c-accent: #e6c983;
  color: var(--c-cream);
}
body[data-page="home"] .home-cover {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #1b1917 url("../img/web/home/ritratto@2x.jpg") 50% 28% / cover no-repeat;
  filter: sepia(.45) brightness(.5) contrast(1.05);
  transform: scale(1.08);
  animation: home-cover-in 9s ease-out forwards;
}
/* una velatura in fondo, dove sta il pentagramma, e una leggera in cima */
body[data-page="home"] .home-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(27, 25, 23, .35) 0%, rgba(27, 25, 23, 0) 30%,
    rgba(27, 25, 23, 0) 55%, rgba(27, 25, 23, .75) 100%);
}
@keyframes home-cover-in { to { transform: scale(1); } }

body[data-page="home"] .site-header {
  margin: auto 0;
  padding: 3rem 0 2rem;
  text-shadow: 0 1px 1.2rem rgba(0, 0, 0, .45);
}
body[data-page="home"] .site-title { font-size: clamp(3rem, 9vw, 5.6rem); }
body[data-page="home"] .site-eyebrow,
body[data-page="home"] .site-subtitle { font-size: .95rem; }
body[data-page="home"] .site-subtitle { font-size: 1.25rem; margin-top: .6rem; }

body[data-page="home"] .nav {
  width: 100%;
  margin-bottom: 0;
}
body[data-page="home"] .stave-label { color: rgba(242, 238, 230, .85); }

/* il timbro della Mezaluna, in alto a sinistra */
body[data-page="home"] .home-badge {
  display: flex;
  align-items: center;
  gap: .7rem;
  position: absolute;
  top: calc(var(--gutter) + .2rem);
  left: calc(var(--gutter) + .2rem);
  z-index: 1;
  max-width: 16rem;
  color: var(--c-cream);
  text-decoration: none;
  font-size: .72rem;
  letter-spacing: .06em;
  line-height: 1.35;
  opacity: .9;
  transition: opacity .25s;
}
body[data-page="home"] .home-badge:hover,
body[data-page="home"] .home-badge:focus-visible { opacity: 1; }
body[data-page="home"] .home-badge img {
  flex: 0 0 auto;
  width: auto;
  height: 3.6rem;
  max-width: none;
  mix-blend-mode: screen;
}
@media (max-width: 40rem) {
  body[data-page="home"] .home-badge {
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    text-align: center;
    max-width: 14rem;
  }
  body[data-page="home"] .home-badge span { display: none; }
  body[data-page="home"] .home-badge img { height: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home-cover { animation: none; transform: none; }
}

/* La home e' solo la copertina: niente sotto, niente da scorrere. Fa
   eccezione il menu a tendina dei telefoni, che quando si apre deve poter
   stare tutto sullo schermo. */
html:has(body[data-page="home"]),
body[data-page="home"] { overflow: hidden; height: 100%; }
body[data-page="home"] .masthead { height: 100vh; height: 100svh; margin-bottom: 0; }
body[data-page="home"] #page,
body[data-page="home"] .site-footer { display: none; }
html:has(body[data-page="home"] .playbill.is-open),
html:has(body[data-page="home"] .playbill.is-open) body { overflow: auto; height: auto; }
body[data-page="home"]:has(.playbill.is-open) .masthead { height: auto; min-height: 100svh; }

/* nomi della biografia che aprono un approfondimento: in oro, come le
   voci del catalogo che hanno una pagina propria */
.bio-approfondimento {
  color: #8c6a1f;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, #d9b455 70%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .25s, text-decoration-color .25s;
}
.bio-approfondimento:hover,
.bio-approfondimento:focus-visible { color: #6f5317; text-decoration-color: #8c6a1f; }

/* --- indice del libro (libro.js): righe del catalogo, abstract e autori --- */
.lb-record { font-size: .9rem; }
.lb-abstract p { margin: 0 0 .6rem; line-height: 1.55; }
.lb-authors { margin-top: .9rem; }
.lb-authors-label {
  margin: 0 0 .35rem;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink) 68%, transparent);
}
.lb-author { border-left: 1px solid color-mix(in srgb, var(--c-rule) 55%, transparent); }
.lb-author + .lb-author { margin-top: .4rem; }
.lb-author-btn {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  padding: .35rem .8rem;
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.lb-author-btn:hover { background: color-mix(in srgb, var(--c-rule) 14%, transparent); }
.lb-author-btn:focus-visible { outline: 1px solid var(--c-accent); outline-offset: -1px; }
.lb-author-mark { color: var(--c-accent); transition: transform .2s; }
.lb-author.is-open .lb-author-mark { transform: rotate(45deg); }
.lb-bio { padding: .1rem .8rem .6rem; }
.lb-bio p { margin: 0 0 .5rem; line-height: 1.5; }
.lb-bio-role {
  font-style: italic;
  opacity: .75;
}
.lb-head--still { cursor: default; }
.lb-head--still:hover { background: none; }