/* antoniolagrotta.eu — layout ispirato a suffomoncloa.com (codice scritto da zero) */

:root {
  --fs: 10px;           /* corpo del testo: 9px nel sito di riferimento */
  --lh: 13px;
  --gap: 8px;           /* spazio fra le immagini */
  --head: 300px;        /* spazio riservato all'intestazione sulla prima riga */
  --shift: 56px;      /* quanto il CONTENUTO scende dal bordo alto su schermo largo (nome e menu no: restano in alto) */
}

* { box-sizing: border-box; }
html, body { background: #fff; }
body {
  margin: 0;
  min-height: 100vh;
  color: #000;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--fs);
  line-height: var(--lh);
  text-transform: lowercase;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
::selection { background: #000; color: #fff; }

h1, h2, h3, strong, b {
  margin: 0;
  font: inherit;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .07em;
}
p, ul { margin: 0 0 var(--lh); padding: 0; }
p:last-child, ul:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: underline; }
img { display: block; border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }

/* copyright in fondo a ogni pagina (la pagina riempie lo schermo, il © resta in basso) */
body.home, body.section, body.page-text { display: flex; flex-direction: column; }
.copy { text-align: right; }
/* il © parte dalla stessa lettera iniziale del menu: la parola invisibile ha la larghezza della voce più lunga */
.copy .ghost { display: block; height: 0; overflow: hidden; visibility: hidden; text-transform: uppercase; letter-spacing: .07em; }
.copy-in { display: inline-block; text-align: left; }
.hud .copy { text-align: left; }
@media (max-width: 991px) { .copy .ghost { display: none; } }
footer.copy { margin-top: auto; padding: 40px 8px 16px; }
@media (min-width: 992px) { footer.copy { padding-right: 16px; } }       /* stesso bordo destro del menu */

.fade-in { animation: fade .5s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- intestazione: nome a sinistra, menu a destra ---------- */
#top {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; z-index: 30; padding: 8px;
  text-transform: uppercase; letter-spacing: .07em;
}
#top a { text-decoration: none; }
#top .name { text-decoration: none; }     /* il nome non è mai sottolineato */
#menu { position: relative; text-align: right; }
.menu-btn { text-transform: uppercase; letter-spacing: .07em; }
.menu-btn:hover, #top.open .menu-btn { border-bottom: 1px solid; }
#menu-list {
  display: none; list-style: none; margin: 0; padding: 12px 8px 8px;
  position: absolute; right: -8px; top: 100%; background: #fff; min-width: 150px; text-align: right;
}
#top.open #menu-list { display: block; }
#menu-list li { margin: 0; }
#menu-list a { display: inline-block; }
#menu-list a:hover, #menu-list a[aria-current="page"] { border-bottom: 1px solid; }

@media (min-width: 992px) {
  #top { position: absolute; top: 0; left: 0; right: 0; padding: 16px; pointer-events: none; }      /* nome e menu restano in alto (Antonio, 2026-11-14: «riporta in alto il nome, menu»); scende solo il contenuto (--shift) */
  #top > * { pointer-events: auto; }
  .menu-btn { display: none; }
  #menu-list { display: block; position: static; padding: 0; min-width: 0; background: none; text-align: left; }
  /* nella home (e nelle griglie) nome e menu restano fissi quando si scorre; bianco + «difference»: sul fondo bianco sono neri,
     sopra le immagini scure diventano chiari, così si leggono sempre */
  body.home #top, body.section #top, body.page-text #top { position: fixed; color: #fff; mix-blend-mode: difference; }
  body.home #top a, body.section #top a, body.page-text #top a { color: inherit; }
  /* con nome e menu fissi, le tessere non devono passarci sotto: margine a sinistra (nome) e a destra (menu); niente più spazio riservato in alto a destra */
  body.home #grid, body.section #grid { padding-left: 140px; padding-right: 140px; padding-top: calc(8px + var(--shift)); }      /* la prima riga parte più in basso, sotto nome e menu che restano in alto */
  body.home .reserve, body.section .reserve { display: none; }
  body.home .reserve + .thumb, body.section .reserve + .thumb { margin-left: var(--gap); }
}
/* telefono: in tutte le pagine che scorrono il nome e il pulsante del menu restano fissi, su fondo bianco (le pagine progetto lo sono già) */
@media (max-width: 991px) {
  body.home #top, body.section #top, body.page-text #top { position: fixed; left: 0; right: 0; top: 0; background: #fff; }
  body.home, body.section, body.page-text { padding-top: 36px; }
  body.home #grid, body.section #grid { padding-top: 24px; }
}

/* ---------- griglia della home ---------- */
#grid { text-align: center; padding: 4px; }
.thumb {
  display: inline-block;
  position: relative;
  margin: 4px;
  text-align: left;
  vertical-align: baseline;
  text-decoration: none;
  max-width: calc(100vw - 16px);
}
.thumb img { width: 100%; height: auto; }
/* --k = altezza dell'immagine in % dello schermo (impostata per ogni tessera nell'HTML);
   sul telefono la larghezza segue la stessa proporzione: 50 -> tutta la larghezza, 25 -> metà */
.thumb { --k: 50; width: calc(min(100, var(--k) * 2) * 1% - 8px); }
.thumb .text {
  position: absolute; top: 0; left: 0;
  max-width: 100%;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* niente scambio su touch: il tocco apre subito il progetto */
@media (hover: hover) and (min-width: 992px) {
  .thumb:hover { z-index: 20; }
  .thumb:hover .image { opacity: 0; }
  .thumb:hover .text { opacity: 1; pointer-events: auto; }
  .thumb.notext:hover .image { opacity: 1; }
  /* i testi completi sono più larghi dell'immagine: coprono ciò che sta accanto finché si passa sopra */
  .thumb .text { width: max(100%, 300px); max-width: none; min-height: 100%; overflow: visible; background: #fff; padding-bottom: 6px; }
  .thumb .text.long  { width: max(100%, 440px); }
  .thumb .text.xlong { width: max(100%, 580px); }
  .thumb.flip .text { left: auto; right: 0; }       /* vicino al bordo destro il testo si apre verso sinistra */
}

.reserve { display: none; }
.rowbreak { display: none; }

@media (min-width: 992px) {
  #grid { padding: 8px; }
  /* spazio libero in alto a destra per il menu: la prima riga di immagini gli scorre accanto */
  .reserve { display: block; float: right; width: 150px; height: 150px; }
  .thumb { margin: var(--gap); width: auto !important; max-width: calc(100vw - 2 * var(--gap)); }
  .reserve + .thumb { margin-left: var(--head); }
  .rowbreak { display: block; width: 100%; height: 0; }          /* a capo forzato tra due tessere (layout.json -> row_break) */
  .thumb img { width: auto; height: calc(var(--k) * 1vh); max-width: 100%; object-fit: contain; }
}

/* ---------- progetto: scorrimento a schermo intero ---------- */
.project #top { position: fixed; left: 0; right: 0; top: 0; }
.close { display: block; padding: 4px 8px 4px 0; margin: 0 0 0 -2px; }
.close i { display: block; width: 9px; height: 9px; position: relative; transform: rotate(45deg); }
.close i::before, .close i::after { content: ""; position: absolute; background: #000; }
.close i::before { top: 0; left: 4px; width: 1px; height: 100%; }
.close i::after  { left: 0; top: 4px; height: 1px; width: 100%; }

.slides { position: fixed; inset: 0; overflow: hidden; }
.slide { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 64px 12px 40px; }
.slide.on { display: flex; }
.slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.slide.cap .capfig { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.slide.cap .capfig img { max-width: 100%; max-height: calc(100vh - 88px - 170px); }
.slide.cap .caption { width: 0; min-width: 100%; margin: 1.2em 0 0; text-align: left; }          /* testo sotto l'immagine (es. i tag): largo quanto l'immagine, allineato a sinistra con lei */
@media (min-width: 992px) { .slide { padding: calc(48px + var(--shift)) 170px 40px; } }   /* lascia libero il menu a destra; 104 px in alto = spazio sotto nome e menu */

.slide.text { align-items: flex-start; justify-content: flex-start; overflow: auto; padding: 72px 16px 64px; }
.slide.text .col { max-width: 560px; width: 100%; }
.slide.text .text-img { margin: calc(var(--lh) * 2) 0 0; }
.slide.text .text-img img { display: block; width: 100%; height: auto; }          /* immagine (gif) sotto il testo */
.slide.text h1 { margin-bottom: calc(var(--lh) * 2); }
@media (min-width: 992px) { .slide.text { padding: calc(64px + var(--shift)) 170px 64px var(--head); } }

.zone { position: fixed; top: 48px; bottom: 40px; width: 50%; z-index: 5; }
@media (min-width: 992px) { .zone { top: calc(48px + var(--shift)); } }
.zone.prev { left: 0; cursor: w-resize; }
.zone.next { right: 0; cursor: e-resize; }
/* sulla pagina di testo il click per andare avanti vale solo sul bordo destro, così il testo resta selezionabile */
.slides.is-text ~ .zone.prev { display: none; }
.slides.is-text ~ .zone.next { width: 30%; }

.hud { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-between; padding: 12px 16px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud .counter button { padding: 0 6px; }
.hud .counter { white-space: nowrap; }
/* in basso: info a sinistra, contatore al centro, © a destra (allineato al menu in alto a destra) */
.hud .copy { position: absolute; right: 16px; bottom: 12px; pointer-events: none; }
.hud .counter { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); }
.hud a.back-btn { text-decoration: none; }
.hud .hud-left { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em; }          /* "images" sopra, "map" sotto, allineati a sinistra */
.hud a.map-btn { text-decoration: none; color: inherit; }
.hud a.track-btn { text-decoration: none; color: inherit; }
.hud .info-btn.map-btn[hidden] { display: block; visibility: hidden; }          /* sulle immagini "map" non si vede ma tiene il posto: "back" resta dove stava "images" */
.hud .info-btn[hidden] { display: none; }
.hud .info-btn:hover { border-bottom: 1px solid; }
.single .zone, .single .counter, .nocount .counter { display: none; }       /* niente "1 / 1" né "2 / 2" */

/* ---------- pagine di testo (info, workshop, shop) ---------- */
.page { padding: 28px 16px 64px; max-width: 720px; }
.page h1 { margin-bottom: calc(var(--lh) * 2); }
/* titoli di sezione (pagina Contacts/bio): corpo 3,6x (1,2x di prima, poi altre 3 volte); sul telefono si adattano alla larghezza */
.page .sec { font-size: min(3.6em, 8.5vw); line-height: 1.15; margin: calc(var(--lh) * 3) 0 var(--lh); max-width: none; overflow-wrap: anywhere; }
.page > .sec:first-child { margin-top: 0; }
/* pagina progetto "a griglia": in alto il testo con la prima foto (ridotta) accanto, poi tutte le altre foto */
.gallery .lead { padding: 28px 16px 16px; }
.gallery .lead-row { display: flex; flex-direction: column; gap: 24px; }
.gallery .lead-text { min-width: 0; }
.gallery .lead-text h1 { margin-bottom: calc(var(--lh) * 2); }
.gallery .lead-img { margin: 0; width: 100%; }
.gallery .lead-img img { width: 100%; height: auto; }
.gallery .lead-rest { margin-top: 24px; }
@media (min-width: 992px) {
  .gallery .lead { padding: calc(64px + var(--shift)) 170px 16px var(--head); }
  /* la foto sta in basso, con il bordo inferiore sulla riga dove finisce la frase indicata (layout.json: lead_after) */
  .gallery .lead-row { flex-direction: row; align-items: flex-end; gap: 40px; }
  .gallery .lead-text { flex: 0 1 520px; }
  .gallery .lead-img { flex: 0 0 auto; width: clamp(200px, calc(100vw - 1030px), 460px); }
  .gallery .lead-rest { margin-top: 0; max-width: 520px; }
}
/* griglia modulare (layout.json: mode "modular"): 12 colonne con spazi uguali, ogni foto occupa colonne intere */
@media (min-width: 992px) {
  #grid.modular { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 36px 16px; padding: 24px 16px 8px; text-align: left; }
  #grid.modular .cell { grid-column: var(--c) / span var(--s); grid-row: var(--r); align-self: end; justify-self: start;
                        margin: 0; width: 100% !important; max-width: calc(var(--w, 99999) * 1px); }
  #grid.modular .thumb img { width: 100%; height: auto; max-width: none; }
  #grid.modular .pair { display: flex; gap: 16px; align-items: flex-end; white-space: normal; }
  #grid.modular .pair .thumb { flex: var(--fr) 1 0%; min-width: 0; margin: 0; width: auto !important; max-width: none; }
}
.pair { display: inline-block; white-space: nowrap; }                    /* due foto che restano sulla stessa riga */
@media (max-width: 991px) { .pair { display: contents; } }
.page figure { margin: calc(var(--lh) * 2) 0; }
.page figure img { max-width: 100%; height: auto; }
@media (min-width: 992px) { .page { padding: calc(64px + var(--shift)) 170px 80px var(--head); max-width: none; } .page > * { max-width: 560px; } }

/* titolo e sottotitolo ravvicinati, come dietro le foto della home */
h1.tight { margin-bottom: 0 !important; }
.sub { margin: 0 0 calc(var(--lh) * 2); }

/* pagine di testo con scelta della lingua: testo un po' più grande (+20%) */
.slide.text.big { --fs: 12px; --lh: 16px; font-size: var(--fs); line-height: var(--lh); }
.slide.text.big .col { max-width: 640px; }
.langbar { margin-bottom: calc(var(--lh) * 2); }
.langbar a { text-decoration: none; }
.langbar a:hover, .langbar .on { border-bottom: 1px solid; }

/* prove di griglie (prove-griglie/) */
.proof { padding: 28px 16px 16px; }
@media (min-width: 992px) { .proof { padding: 64px 16px 16px; } }
.proof .note { max-width: 640px; margin-bottom: calc(var(--lh) * 2); }
ul.note { list-style: none; }
ul.note li { margin-bottom: var(--lh); }
.proof .eq { display: grid; gap: 16px; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.proof .eq .cell { aspect-ratio: var(--ar); background: #f3f3f3; }
.proof .eq .cell img { display: block; width: 100%; height: 100%; object-fit: var(--fit); }
.proof .just { display: flex; flex-wrap: wrap; gap: 12px; }
.proof .just .j { flex-grow: var(--r); flex-basis: calc(var(--r) * 230px); }
.proof .just::after { content: ""; flex-grow: 1000000; }
.proof .just img { display: block; width: 100%; height: auto; }
.proof .cols { column-count: var(--cols); column-gap: 16px; }
.proof .cols .c { break-inside: avoid; margin-bottom: 16px; }
.proof .cols img { display: block; width: 100%; height: auto; }
@media (max-width: 991px) { .proof .eq { --cols: 2 !important; } .proof .cols { column-count: 2; } }

/* barra per passare da una prova di griglia all'altra: sempre visibile */
.proofnav { position: fixed; z-index: 40; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; align-items: baseline;
            background: #fff; padding: 8px 14px; box-shadow: 0 0 0 1px #000; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
@media (min-width: 992px) { .proofnav { top: 10px; bottom: auto; } }
.proofnav span { opacity: .55; }
.proofnav a { text-decoration: none; }
.proofnav a.on, .proofnav a:hover { border-bottom: 2px solid; }
.proofnav a.cur { margin-left: 8px; opacity: .7; }

/* album di figurine: blocchi quadrati 6x6, due formati in proporzione 1:2; caselle vuote tratteggiate e numerate */
.album { --g: 14px; display: grid; grid-template-columns: 1fr; gap: var(--g); max-width: 1380px; margin: 0 auto; padding: 0; }
@media (min-width: 992px) { .album { grid-template-columns: 1fr 1fr; } }
.blk { display: grid; grid-template: repeat(6, 1fr) / repeat(6, 1fr); gap: var(--g); aspect-ratio: 1; }
.slot { min-width: 0; min-height: 0; position: relative; }
.slot img { display: block; width: 100%; height: 100%; }
.slot.empty { background: #fff; }        /* casella vuota: bianco, senza tratteggio né numero */
.b1 .a1 { grid-area: 1 / 1 / 5 / 7; } .b1 .a2 { grid-area: 5 / 1 / 7 / 4; } .b1 .a3 { grid-area: 5 / 4 / 7 / 7; }
.b1v .a1 { grid-area: 3 / 1 / 7 / 7; } .b1v .a2 { grid-area: 1 / 1 / 3 / 4; } .b1v .a3 { grid-area: 1 / 4 / 3 / 7; }
.b2 .a1 { grid-area: 1 / 1 / 7 / 5; } .b2 .a2 { grid-area: 1 / 5 / 4 / 7; } .b2 .a3 { grid-area: 4 / 5 / 7 / 7; }
.b2v .a1 { grid-area: 1 / 3 / 7 / 7; } .b2v .a2 { grid-area: 1 / 1 / 4 / 3; } .b2v .a3 { grid-area: 4 / 1 / 7 / 3; }
.b3 .a1 { grid-area: 1 / 1 / 3 / 4; } .b3 .a2 { grid-area: 1 / 4 / 3 / 7; } .b3 .a3 { grid-area: 3 / 1 / 5 / 4; }
.b3 .a4 { grid-area: 3 / 4 / 5 / 7; } .b3 .a5 { grid-area: 5 / 1 / 7 / 4; } .b3 .a6 { grid-area: 5 / 4 / 7 / 7; }
.b4 .a1 { grid-area: 1 / 1 / 4 / 3; } .b4 .a2 { grid-area: 1 / 3 / 4 / 5; } .b4 .a3 { grid-area: 1 / 5 / 4 / 7; }
.b4 .a4 { grid-area: 4 / 1 / 7 / 3; } .b4 .a5 { grid-area: 4 / 3 / 7 / 5; } .b4 .a6 { grid-area: 4 / 5 / 7 / 7; }

/* pagine di testo con scelta della lingua: "back" in cima, barra in basso leggibile sopra il testo */
.topback { margin-bottom: calc(var(--lh) * 1.5); }
.topback a { text-decoration: none; }
.topback a:hover { border-bottom: 1px solid; }
body.single .hud { background: #fff; }

/* striscia orizzontale: foto attaccate una all'altra, tutte alla stessa altezza (quella della più piccola) */
.proof .strip { display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; margin: 0 -16px; padding: 0 16px;
                height: calc(100vh - 230px); min-height: calc(var(--h) + 40px); }
.proof .strip img { flex: none; display: block; height: var(--h); width: auto; }

/* striscia grande: foto alte ~62% dello schermo, stessa altezza per tutte, spazio ampio e ben visibile fra l'una e l'altra */
.proof .strip.big { --h: min(62vh, 680px); gap: 96px; }


/* barra di scorrimento orizzontale della striscia: una linea sottile (2 px) */
.proof .strip { scrollbar-width: none; }
.proof .strip::-webkit-scrollbar { display: none; }

/* pagina progetto a due schermate: 1) testo (con foto accanto) 2) striscia orizzontale di foto */
.slide.text.lead-slide .col { max-width: none; }
.lead-slide .lead-row { display: flex; flex-direction: column; gap: 24px; }
.lead-slide .lead-text { min-width: 0; }
.lead-slide .lead-img { margin: 0; width: 100%; }
.lead-slide .lead-img img { width: 100%; height: auto; }
.lead-slide .lead-rest { margin-top: 24px; }
@media (min-width: 992px) {
  .lead-slide .lead-row { flex-direction: row; align-items: flex-end; gap: 40px; }
  .lead-slide .lead-text { flex: 0 1 520px; }
  .lead-slide .lead-img { flex: 0 0 auto; width: clamp(200px, calc(100vw - 1030px), 460px); }
  .lead-slide .lead-rest { margin-top: 0; max-width: 520px; }
}
.slide.strip-slide { padding: 0 0 44px; align-items: stretch; }
.slide.strip-slide .strip { display: flex; align-items: center; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; padding: 0 16px;
                            gap: 96px; --h: min(62vh, 680px); }
.slide.strip-slide .strip img { flex: none; display: block; height: var(--h); width: auto; max-width: none; max-height: none; }
@media (max-width: 991px) { .slide.strip-slide .strip { gap: 48px; } }
.slide.strip-slide .strip { scrollbar-width: none; }          /* niente linea di scorrimento (Antonio, 2026-11-13): la striscia scorre con trackpad, rotellina, frecce o dito */
.slide.strip-slide .strip::-webkit-scrollbar { display: none; }
.slides.is-strip ~ .zone { display: none; }          /* sulla striscia il click non cambia schermata */


/* testo della pagina Re muto della stessa grandezza di quello di Federica (12px): colonna del testo un po' più larga */
@media (min-width: 992px) { .lead-slide.big .lead-text { flex-basis: 640px; } .lead-slide.big .lead-rest { max-width: 640px; } }

/* ---------- schermate impaginate come pagine di un libro (compositions in layout.json) ---------- */
.slide.comp { overflow: auto; }
.slide.comp .canvas { position: relative; flex: none; aspect-ratio: var(--r); container-type: inline-size;
                      width: calc(min(100%, calc((100vh - 96px) * var(--r))) * var(--k, 1)); }
.slide.comp .canvas img { position: absolute; display: block; height: auto; max-width: none; max-height: none; }
.slide.comp .canvas p { position: absolute; margin: 0; font-size: calc(var(--s) * 1cqw); line-height: 1.42; overflow-wrap: break-word; }
.slide.comp .canvas p.r { text-align: right; }

.thumb[data-href] { cursor: pointer; }

/* mappa cliccabile (Paradise Discotheque): puntini e nomi sono link */
.slide.comp .canvas a.dot { position: absolute; display: block; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.slide.comp .canvas a.dot:hover, .slide.comp .canvas a.dot:focus-visible { box-shadow: 0 0 0 1px #000; }
.slide.comp .canvas p a { text-decoration: none; }
.slide.comp .canvas p a:hover { text-decoration: underline; }

.slides.is-links ~ .zone { display: none; }          /* sulla mappa cliccabile le zone di click destra/sinistra non coprono i link */

/* nomi sulla mappa delle discoteche: carattere senza grazie come nell'infografica SS36 */
.slide.comp .canvas p.map { color: #3a3a3a; line-height: 1.36; white-space: nowrap; }          /* stesso font del sito (spaziatura fissa, minuscolo) */

.slide.comp .canvas p.map.blue, .slide.comp .canvas p.map.blue a { color: #223a66; }          /* nomi delle discoteche in blu scuro come i puntini (34,58,102) */


/* ---------- PROVA «testi»: prove-home/ — i testi (che di norma stanno dietro) sono in vista, l'immagine compare al passaggio del mouse ---------- */
@media (hover: hover) and (min-width: 992px) {
  body.text-first .thumb { width: calc(var(--k) * 1vh * var(--r)) !important; min-height: calc(var(--k) * 1vh); vertical-align: top; }          /* stessa larghezza e altezza dell'immagine: i formati restano quelli di prima */
  body.text-first .thumb .image { position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; pointer-events: none; }
  body.text-first .thumb .text { position: static; opacity: 1; pointer-events: auto; width: auto !important; min-height: 0; padding: 0 6px 8px 0; background: none; overflow: visible; }
  body.text-first .thumb:hover .image { opacity: 1; }
  body.text-first .thumb:hover .text { opacity: 0; }
  /* la tessera senza testo (es. la foto fra DISCO e The Alpine Lab) è vuota e compare SOLO al passaggio del mouse, come le altre (Antonio, 2026-11-14): vale la regola generale sopra */
}


/* ---------- schermata a tre parti (es. Saluti da): elenco a sinistra, immagine, elenco a destra, ognuno su due colonne ---------- */
.slide.trio { flex-direction: row; gap: 28px; align-items: center; justify-content: center; --sw: clamp(190px, 19vw, 300px); }
.slide.trio .side { flex: 0 0 var(--sw); width: var(--sw); }
.slide.trio .side-title { margin: 0 0 var(--lh); }
.slide.trio ul.cols { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 18px; }
.slide.trio ul.cols li { break-inside: avoid; margin: 0; }
.slide.trio ul.cols.one { column-count: 1; }          /* elenco su una sola colonna */
.slide.trio figure { margin: 0; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 2 * var(--sw) - 56px); }
.slide.trio figure img { max-width: 100%; max-height: calc(100vh - 88px); }
@media (max-width: 991px) {
  .slide.trio { flex-direction: column; justify-content: flex-start; align-items: stretch; overflow: auto; gap: 16px; }
  .slide.trio .side { flex: none; width: auto; }
  .slide.trio figure { max-width: 100%; align-self: center; }
  .slide.trio figure img { max-height: 55vh; }
}

/* elenco di nomi scritto come testo, con le colonne dell'immagine originale (layout.json -> names_slides) */
.slide.names pre.namelist { margin: 0; font: inherit; font-size: min(15px, calc((100vw - 32px) / (var(--cols) * .6))); line-height: 1.6; white-space: pre; letter-spacing: 0; max-width: 100%; overflow: visible; text-transform: none; }   /* i nomi restano MAIUSCOLI come nell'originale */

/* didascalia fissa in basso su una schermata a striscia (es. "chapter IV / the raven"): non scorre con le foto */
.slide.strip-slide .strip-cap { position: absolute; left: 16px; bottom: 76px; margin: 0; }

/* striscia con copertina: lo spazio fra la prima foto e la seconda è il TRIPLO di quello fra le altre (96 -> 288 px; telefono 48 -> 144 px) */
.slide.strip-slide .strip.cover-first img:first-child { margin-right: 192px; }
@media (max-width: 991px) { .slide.strip-slide .strip.cover-first img:first-child { margin-right: 96px; } }

/* link scritti sulla prima schermata, a destra (es. i capitoli di SS36): sotto al menu, allineati a sinistra come lui */
.slide.has-nav .slide-nav { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; width: max-content; z-index: 6; }
@media (max-width: 991px) {
  .slide.has-nav img { max-height: calc(100% - 72px); }
  .slide.has-nav .slide-nav { top: auto; bottom: 48px; left: 12px; right: 12px; transform: none; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
}

/* i link dei capitoli: niente sottolineatura, allineati a sinistra con le voci del menu (la parola invisibile li fa larghi come il menu) */
.slide.has-nav .slide-nav a { text-decoration: none; }
.slide.has-nav .slide-nav .ghost { display: block; height: 0; overflow: hidden; visibility: hidden; text-transform: uppercase; letter-spacing: .07em; }
@media (max-width: 991px) { .slide.has-nav .slide-nav .ghost { display: none; } }

/* foto con UNA riga di didascalia sotto (layout.json -> slide_captions): resta più spazio alla foto che con i tag */
.slide.cap.short .capfig img { max-height: calc(100vh - 88px - 56px); }

/* testo di una schermata impaginata in maiuscolo come i titoli del sito (cls: "up") */
.slide.comp .canvas p.up { text-transform: uppercase; letter-spacing: .07em; }

@media (min-width: 992px) {
  .slide.cap .capfig img { max-height: calc(100vh - 40px - 48px - var(--shift) - 170px); }
  .slide.cap.short .capfig img { max-height: calc(100vh - 40px - 48px - var(--shift) - 56px); }
  .slide.trio figure img { max-height: calc(100vh - 40px - 48px - var(--shift)); }
}
/* tessera con scatola propria (layout.json -> text_box): in modalità «testi» la scatola ha la misura di prima (--kt altezza, --r rapporto) e la foto nuova,
   di un altro formato, ci sta DENTRO in proporzione, larga quanto la scatola */
@media (hover: hover) and (min-width: 992px) {
  body.text-first .thumb.fitbox { width: calc(var(--kt) * 1vh * var(--r)) !important; min-height: calc(var(--kt) * 1vh); }
  body.text-first .thumb.fitbox .image { width: 100%; }
  body.text-first .thumb.fitbox .image img { width: 100%; height: auto; }
}