* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #000; color: #fff;
  /* un solo font per tutti i testi (Jost, da light a bold); i titoli in Instrument Serif */
  font-family: Jost, "Helvetica Neue", Arial, sans-serif; font-weight: 400;
  -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------- board ---------- */
#viewport { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
#viewport.drag, #viewport.drag * { cursor: grabbing !important; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- filtri ---------- */
#filtri { position: fixed; left: 20px; bottom: 20px;
  max-width: calc(100vw - 40px); pointer-events: none; }
#filtri > * { pointer-events: auto; }
#macro { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.grp { position: relative; display: flex; justify-content: center; }
/* sotto categorie: compaiono sopra la macro solo al passaggio del mouse */
.subs { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 8px; }
.grp:hover .subs { display: flex; }
/* pulsanti a pillola: solo quello selezionato è "acceso" */
#filtri button, #sezioni button { font-size: 14px; letter-spacing: .01em; white-space: nowrap;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: color .2s, border-color .2s; }
#filtri button:hover, #sezioni button:hover { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.6); }
#filtri button.on, #sezioni button.on { color: #fff; border-color: #fff; border-width: 1.5px; padding: 6.5px 15.5px; }
.subs button { font-size: 13px; padding: 5px 13px; }

/* selettore delle sezioni, in alto a sinistra */
#sezioni { position: fixed; left: 20px; top: 20px; z-index: 4; display: flex; flex-wrap: wrap; gap: 10px; }
#sezioni[hidden] { display: none; }
#filtri[hidden] { display: none; }

/* ---------- scheda archetipo ---------- */
/* fluttuante: staccata dai bordi, dall'altezza delle pillole in alto a quelle in basso */
#scheda { position: fixed; top: 20px; bottom: 20px; right: 20px; z-index: 5;
  display: flex; color: #fff;
  border: 1.5px solid rgba(255,255,255,.9); border-radius: 32px;
  background: rgba(0,0,0,.42); backdrop-filter: blur(22px) brightness(.7);
  -webkit-backdrop-filter: blur(22px) brightness(.7);
  width: 64px; overflow: hidden;
  transition: width .45s cubic-bezier(.65,0,.35,1), border-radius .45s; }
#scheda[hidden] { display: none; }
#scheda.open { width: min(460px, calc(100vw - 40px)); border-radius: 22px; }
#sc-toggle { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding-top: 30px; align-self: stretch; }
#sc-toggle svg { width: 20px; height: 20px; stroke-width: 2.2; transition: transform .45s; }
#scheda.open #sc-toggle svg { transform: rotate(180deg); }
#sc-nome { font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: 34px; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; }
#sc-body { flex: 0 0 calc(min(460px, 100vw - 40px) - 64px); overflow-y: auto;
  padding: 26px 26px 30px 6px; font-size: 13px; line-height: 1.38;
  opacity: 0; transition: opacity .3s; -webkit-user-select: text; user-select: text; }
#scheda.open #sc-body { opacity: 1; transition-delay: .15s; }
#sc-body h2 { font-size: 17px; font-weight: 600; margin-bottom: 18px; }
#sc-body h3 { font-size: 13px; font-weight: 700; margin-top: 16px; }
#sc-body ul { padding-left: 18px; }
/* testo leggero (come l'apertura), titoletti in grassetto: si distinguono a colpo d'occhio */
#sc-body p, #sc-body li { font-weight: 300;
  font-size: 14px; opacity: .94; }
#sc-body, #sc-nome { text-shadow: 0 0 10px rgba(0,0,0,.6); }

/* ---------- pagine di apertura ---------- */
#apertura { position: fixed; inset: 0; z-index: 20; overflow: hidden; touch-action: none; }
#ap-track { transition: transform 1s cubic-bezier(.65,0,.35,1); }
/* altezza di una pagina = schermo visibile (sul telefono senza le barre del browser);
   lo scorrimento usa la stessa misura, così ogni pagina combacia con lo schermo */
:root { --ph: 100vh; }
@supports (height: 100dvh) { :root { --ph: 100dvh; } }
.pagina { position: relative; height: var(--ph); background: #000; }
/* freccina per andare avanti, con un leggero movimento per farsi notare */
.giu { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  width: 48px; height: 48px; display: grid; place-items: center; opacity: .8;
  animation: giu 2s ease-in-out infinite; }
.giu:hover { opacity: 1; }
.giu svg { width: 30px; height: 30px; stroke-width: 1.2; }
@keyframes giu { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }
#p-title { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px; }
#p-title h1 { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(44px, 7.4vw, 124px); line-height: 1; }
#p-title p, .intro p { font-weight: 300; }
#p-title p { font-size: clamp(17px, 1.9vw, 30px); margin-top: .7em; }
.intro { display: flex; flex-direction: column; justify-content: flex-end; gap: 1.4em;
  padding: 0 6.6vw 16vh; font-size: clamp(16px, 1.6vw, 26px); line-height: 1.5; }
.intro p { max-width: 50em; }
/* torcia: sotto il testo l'archivio al buio, che si illumina attorno al cursore (o al dito) */
.intro { overflow: hidden; }
.intro p { position: relative; z-index: 1; }
.intro .giu { z-index: 1; }
.intro p { text-shadow: 0 0 18px #000, 0 0 6px #000; }
.torcia { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background-color: #000; background-repeat: repeat; background-size: 1500px auto; }
/* strato nero con un foro sfumato: si sposta solo con transform (fluido, niente ridisegni) */
/* disegnato piccolo (800px) e ingrandito 8 volte: poca memoria, copre fino a 6400px */
.buio { position: absolute; left: 0; top: 0; width: 800px; height: 800px;
  margin: -400px 0 0 -400px; will-change: transform;
  background: radial-gradient(circle at center, rgba(0,0,0,.2) 0, rgba(0,0,0,.45) 9.4px, #000 23.75px); }

/* ---------- lightbox ---------- */
#lightbox { position: fixed; inset: 0; background: #000; z-index: 10;
  display: grid; place-items: center; touch-action: none; }
#lightbox[hidden] { display: none; }
/* stesso riquadro 2:1 per tutte le immagini: niente bande che cambiano da una all'altra */
/* il riquadro riempie lo schermo (tra 2:1 e 2.4:1) lasciando in basso la fascia del titolo */
/* --pad: spazio minimo sopra; --tb: fascia del titolo sotto (titolo centrato al suo interno) */
#lightbox { --pad: 40px; --tb: 120px;
  --fh: min(calc(var(--ph) - var(--pad) - var(--tb)), calc(100vw / 2));
  --fw: min(100vw, calc(var(--fh) * 2.4));
  --top: max(var(--pad), calc((var(--ph) - var(--fh) - var(--tb)) / 2)); }
#lb-stage { position: absolute; inset: 0; }
#lb-frame { position: absolute; top: var(--top); left: calc((100vw - var(--fw)) / 2);
  width: var(--fw); height: var(--fh); overflow: hidden; }
#lb-img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
#lightbox.intera #lb-img { object-fit: contain; }
/* titolo centrato nello spazio sotto il riquadro */
#lb-info { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--top) + var(--fh));
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .5em;
  padding: 0 16px; text-align: center; line-height: 1.2;
  font-size: 17px; letter-spacing: .03em; pointer-events: none; }
#lb-info span:last-child { opacity: .55; }
#lb-close, #lb-prev, #lb-next { position: absolute; opacity: .7; text-shadow: 0 0 8px #000; }
#lb-close:hover, #lb-prev:hover, #lb-next:hover { opacity: 1; }
#lb-close { top: 14px; right: 18px; font-size: 22px; padding: 6px; }
#lb-prev, #lb-next { top: 50%; transform: translateY(-50%); font-size: 48px; font-weight: 300; padding: 10px 18px; }
#lb-prev { left: 4px; }
#lb-next { right: 4px; }
#lb-play { position: absolute; width: 84px; height: 84px; border-radius: 50%;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.6); display: grid; place-items: center; }
#lb-play[hidden] { display: none; }
#lb-play svg { width: 36px; height: 36px; fill: #fff; stroke: none; margin-left: 4px; }

@media (max-width: 600px) {
  #filtri { left: 12px; bottom: 12px; }
  #macro { gap: 6px; }
  #filtri button, #sezioni button { font-size: 12px; padding: 5px 11px; }
  #filtri button.on, #sezioni button.on { padding: 4.5px 10.5px; }
  #scheda { top: 56px; bottom: 56px; right: 12px; width: 48px; border-radius: 24px; }
  #scheda.open { width: calc(100vw - 24px); border-radius: 18px; }
  #sc-body { flex-basis: calc(100vw - 24px - 48px); }
  #sc-toggle { flex-basis: 48px; padding-top: 18px; }
  #sc-nome { font-size: 26px; }
  #lb-prev, #lb-next { font-size: 36px; padding: 10px; }
  #lb-info { font-size: 15px; }
  #lightbox { --pad: 24px; --tb: 90px; }
}