/* ============================================================
   LIBRO 3D (02/11/2026): le regole del visore copiate da css/site.css di Spazio Paradiso
   (righe 327–445 del 27/10/2026), con le variabili del sito di Matteo: fondo bianco.
   Il visore è js/libro.js, uguale a quello di Spazio Paradiso.
   ============================================================ */
@font-face{ font-family:"Plex"; src:url("../assets/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"ArchivoV"; src:url("../assets/fonts/Archivo-var.ttf") format("truetype"); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
/* le variabili valgono solo per il libro (03/11/2026): su :root cambiavano i colori del resto della pagina di Poem */
.libro, .info-oggetto, .is-libro{ --ink:#16161A; --paper:#FFFFFF; --soft:#6E6E73; --line:#E2E2E5; --pad:clamp(16px,3vw,32px); }
.btn-link{ white-space:nowrap; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
.libro, .libro-libro-testo{ font-family:"Plex", sans-serif; font-size:12px; letter-spacing:.04em; color:var(--ink); }
.libro .btn-link{ text-transform:uppercase; font-size:11px; letter-spacing:.08em; }
.libro .btn-link:hover{ color:#B4342A; }
/* il libro 3D nell'Info di un progetto (14/10/2026, il primo è Poem Against the Sea): a destra, a metà altezza del
   pannello, dove fino al 12/10 c'era il microscopio. Il libro chiuso gira e si gira trascinandolo; un clic breve apre la
   pagina grande (js/libro.js) */
.info-oggetto{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;
  align-items:center;gap:4px;color:inherit;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.info-oggetto-3d{display:block;height:150px;aspect-ratio:3/4;touch-action:pan-y;position:relative;z-index:0}
.info-oggetto-3d canvas{display:block;cursor:grab;transition:opacity .4s ease}
.info-oggetto-3d canvas:active{cursor:grabbing}
/* finché il libro non è disegnato, la copertina intera come immagine, grande quanto il libro nel riquadro; poi si
   scambiano in dissolvenza (14/10/2026: prima il riquadro restava vuoto finché non arrivava il 3D) */
.info-oggetto-3d::before{content:"";position:absolute;inset:var(--attesa-inset,15.96% 16.02% 19.29%);z-index:-1;pointer-events:none;opacity:0;
  background:center/contain no-repeat;transition:opacity .4s ease}
/* l'immagine la chiede progetto.js quando parte il libro, a pagina ferma, e mette is-copertina quando è arrivata tutta:
   non ruba banda alla fila delle foto e non si vede a metà. È la copertina leggera (113 kB, metà lato), la stessa che
   il libro usa nel riquadro: con la texture piena da 815 kB, aprendo l'Info presto, il riquadro restava vuoto per
   secondi (correzione del 14/10/2026). Dal 14/10/2026, sera, l'immagine è quella del libro del progetto (--attesa, la
   mette progetto.js dai dati del pannello) e sta nello stesso riquadro in cui js/libro.js inquadra il libro chiuso,
   largo 1,3 volte la pagina e alto 1,2 volte: un box del 77% x 83,3% (inset 8,33% e 11,5%), con contain. Per Poem e per
   i formati più larghi di 7 a 10 comanda la larghezza, ed è la misura di prima (86,6 x 110 px per Poem); per un formato
   stretto comanda l'altezza, come nel libro 3D. Correzione del 14/10/2026: prima era larga il 77% con l'altezza libera,
   e un libro 11 x 23 perdeva il 17% dell'immagine, sopra e sotto, ed era più grande del libro che la sostituisce.
   Dal 26/10/2026 il libro nel riquadro è visto da più in alto e più lontano (INCLINA in js/libro.js), e l'inset lo
   calcola progetto.js (insetAttesa) dalla proporzione dell'immagine, appena arrivata: la stessa area e lo stesso centro
   della copertina 3D del primo fotogramma, per ogni libro. Quello qui è il valore per le proporzioni di Poem */
.info-oggetto-3d.is-copertina::before{background-image:var(--attesa)}
.info-oggetto-3d.is-attesa::before{opacity:1}
.info-oggetto-3d.is-attesa canvas{opacity:0}
.info-oggetto-3d.is-attesa.is-pronto::before{opacity:0}
.info-oggetto-3d.is-attesa.is-pronto canvas{opacity:1}
.info-oggetto-3d.is-errore{background:var(--attesa) center/contain no-repeat}
.info-oggetto-nome{font-size:11px;color:var(--soft);transition:color .3s ease}
.info-oggetto:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media (hover:hover){.info-oggetto:hover .info-oggetto-nome{color:var(--ink)}}
.info-meta-libro{display:none}
.info-meta-libro .btn-link{text-decoration:underline;text-underline-offset:.15em}
/* con il libro l'Info è alta almeno quanto il riquadro e la scritta sotto (14/10/2026): un progetto con poco testo, o un
   film senza testo, aveva il pannello basso e il libro ne usciva, con «Click to open» sotto la barra in fondo */
@media (min-width:768px) and (min-height:521px){.info.con-libro{min-height:206px}}
/* la pagina grande del libro 3D (14/10/2026, nata per Poem Against the Sea): sopra il progetto come il visore, sul
   fondo del sito. Un clic va avanti, trascinando si gira il libro (il dito e le due dita li gestisce js/libro.js:
   touch-action none); Close in alto a destra, la guida in basso, lo zoom e Reset view in basso a destra */
.libro{position:fixed;inset:0;z-index:60;background:var(--paper);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease}
.libro.is-on{opacity:1;visibility:visible}
.libro-scena{position:absolute;inset:0;cursor:grab;touch-action:none}
.libro-scena.is-trascina{cursor:grabbing}
.libro-scena canvas{display:block}
.libro-vista{position:absolute;right:var(--pad);bottom:var(--pad);display:flex;gap:clamp(14px,2vw,24px);z-index:2}
/* spenti con aria-disabled, che lascia il fuoco sul pulsante (js/libro.js, correzione del 14/10/2026) */
.libro-vista .btn-link[aria-disabled=true],.libro-comandi .btn-link[aria-disabled=true]{opacity:.3;cursor:default}
/* sul telefono e sul tablet −, + e Reset view hanno ognuno la sua area di 44 pixel, attaccate: con l'area allargata di
   .btn-link (in fondo, pointer:coarse) quelle di − e + si sovrapponevano e il tocco sul − arrivava al + (correzione del
   14/10/2026). Il gruppo scende di quanto l'area cresce sotto il testo, così le scritte restano dov'erano */
@media (pointer:coarse){
  .libro-vista{gap:0;bottom:calc(var(--pad) - 13px)}
  .libro-vista .btn-link{min-width:44px;min-height:44px}
}
/* ingranditi o girati, il libro passa sotto le barre: in alto e in basso il fondo sfuma sopra le pagine, così comandi e
   guida si leggono e non coprono il testo (correzione del 14/10/2026; la classe is-ingrandito la mette js/libro.js) */
.libro::before,.libro::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .3s ease}
.libro::before{top:0;height:calc(var(--pad) + 44px);background:linear-gradient(var(--paper) 50%,transparent)}
.libro::after{bottom:0;height:calc(var(--pad) + 44px);background:linear-gradient(transparent,var(--paper) 50%)}
.libro.is-ingrandito::before,.libro.is-ingrandito::after{opacity:1}
@media (max-width:899px){.libro::after{height:calc(var(--pad) + 76px)}}
.libro-bar{position:absolute;left:0;right:0;top:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  padding:var(--pad);z-index:2;pointer-events:none}
.libro-capitoli,.libro-comandi{display:flex;gap:clamp(12px,2vw,24px);pointer-events:auto}
.libro-capitoli .btn-link{color:var(--soft)}
.libro-capitoli .btn-link.is-on{color:var(--ink)}
.libro-guida{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);text-align:center;font-size:11px;
  color:var(--soft);pointer-events:none;transition:opacity .4s ease;z-index:2}
@media (max-width:899px){.libro-guida{bottom:calc(var(--pad) + 34px)}}   /* sopra lo zoom, che a destra non lascia spazio */

/* la scheda accanto al libro aperto (03/11/2026), come la scheda di SpineIndex: a sinistra autori, titolo grande,
   descrizione e crediti; sotto, la tendina delle specifiche. «Info» la chiude e la riapre; aperta, la scena del libro
   si stringe a destra (il visore rifà la misura da solo, con il ResizeObserver). Sul telefono sale dal basso */
.libro{ --scheda:min(380px, 32vw); }
.libro-scheda{ position:absolute; left:0; top:0; bottom:0; width:var(--scheda); z-index:3; background:var(--paper);
  border-right:1px solid var(--line); overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(-100%); transition:transform .35s ease, visibility .35s ease; visibility:hidden; }
.libro.con-scheda .libro-scheda{ transform:none; visibility:visible; }
/* libro chiuso: la scheda e il suo pulsante spariscono davvero. Prima la scheda restava «visible» dentro il libro
   nascosto (un figlio visible vince sul genitore hidden): invisibile ma sopra la home, e i clic sui lavori sotto di
   lei andavano persi (trovato dalla verifica del 03/11/2026) */
.libro:not(.is-on) .libro-scheda, .libro.con-scheda:not(.is-on) .libro-scheda,
.libro:not(.is-on) .libro-scheda-tira{ visibility:hidden; pointer-events:none; }
.libro.con-scheda .libro-scena{ left:var(--scheda); }
.libro.con-scheda .libro-bar{ left:var(--scheda); }
.libro.con-scheda .libro-guida{ left:calc(var(--scheda) + var(--pad)); }
.libro-scheda-corpo{ padding:calc(var(--pad) + 4px) var(--pad) 72px; }
.ls-autori{ margin:0 0 6px; font-family:"Plex",sans-serif; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.ls-titolo{ margin:0 0 22px; font-family:"ArchivoV",sans-serif; font-weight:600; font-size:31.6px; line-height:1.05;
  letter-spacing:-.01em; color:var(--ink); }
.ls-pagina{ display:inline-block; margin:-10px 0 20px; padding:6px 0; font-family:"Plex",sans-serif; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--ink); }
.ls-pagina:hover{ color:#B4342A; border-color:#B4342A; }
.ls-testo p{ margin:0 0 .8em; font-family:"ArchivoV",sans-serif; font-size:13.3px; line-height:1.55; color:var(--ink); max-width:62ch; }
.ls-elenco{ margin:20px 0 0; padding-top:12px; border-top:1px solid var(--line); display:grid;
  grid-template-columns:minmax(88px, 34%) 1fr; gap:6px 14px; font-family:"Plex",sans-serif; font-size:11px; line-height:1.45; }
.ls-elenco dt{ color:var(--soft); }
.ls-elenco dd{ margin:0; color:var(--ink); }
.ls-specifiche{ margin-top:20px; border-top:1px solid var(--line); }
.ls-specifiche summary{ list-style:none; cursor:pointer; padding:12px 0 2px; font-family:"Plex",sans-serif; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink); display:flex; justify-content:space-between; }
.ls-specifiche summary::-webkit-details-marker{ display:none; }
.ls-specifiche summary::after{ content:"+"; }
.ls-specifiche[open] summary::after{ content:"\2212"; }
.ls-specifiche summary:hover{ color:#B4342A; }
.ls-specifiche .ls-elenco{ border-top:0; margin-top:6px; }
.libro-scheda-tira{ position:absolute; left:var(--pad); bottom:var(--pad); z-index:4; font-family:"Plex",sans-serif;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.libro-scheda-tira:hover{ color:#B4342A; }
.libro.con-scheda .libro-scheda-tira{ left:0; bottom:0; width:var(--scheda); padding:14px var(--pad); text-align:left;
  background:var(--paper); border-top:1px solid var(--line); border-right:1px solid var(--line); }
@media (max-width:760px){
  .libro-scheda{ top:auto; right:0; width:auto; max-height:62vh; border-right:0; border-top:1px solid var(--line);
    transform:translateY(100%); }
  .libro.con-scheda .libro-scheda{ transform:none; }
  .libro.con-scheda .libro-scena,.libro.con-scheda .libro-bar{ left:0; }
  .libro.con-scheda .libro-guida{ left:var(--pad); }
  .libro-scheda-corpo{ padding:20px 16px 64px; }
  .ls-titolo{ font-size:23.7px; margin-bottom:14px; }
  .libro-scheda-tira{ bottom:calc(var(--pad) + 4px); }
  .libro.con-scheda .libro-scheda-tira{ width:auto; right:0; border-right:0; }
  .libro.con-scheda .libro-scheda{ bottom:45px; max-height:calc(52vh - 45px); }
  /* con la scheda aperta il libro sale nella metà sopra (il visore rifà la misura), e lo zoom si toglie finché la
     scheda copre il basso: prima il libro spariva sotto la scheda e lo zoom restava sotto Hide info */
  .libro.con-scheda .libro-scena{ bottom:52vh; }
  .libro.con-scheda .libro-vista, .libro.con-scheda .libro-guida{ display:none; }
  .libro-comandi .btn-link, .libro-capitoli .btn-link, .libro-scheda-tira{ min-height:44px; }   /* bersagli per il dito */
}