/* Alfonso Paoletta — sito personale.
   Direzione: la regia. Fondo notte blu-viola, luce di palco che sfuma dal blu al viola, riquadri
   con bordo sottile e tre piani d'ombra. Un solo carattere (Archivo) usato a due larghezze:
   stretto e pesante nei titoli, come i titoli di coda; normale nel testo.
   Il tratto distintivo sta in un punto solo: il muro di monitor della home. Il resto è quieto. */

/* Archivo (licenza SIL OFL, caratteri/OFL.txt) servito dal sito stesso: prima arrivava da Google Fonts, che riceveva
   l'indirizzo IP di ogni visitatore. Variabile: larghezza 62-125%, peso 300-800. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300 800; font-stretch: 62% 125%; font-display: swap;
  src: url('caratteri/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300 800; font-stretch: 62% 125%; font-display: swap;
  src: url('caratteri/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --notte: #090a1c;
  --notte-2: #0e1030;
  --indaco: #191c4f;
  --blu: #3d5cff;
  --viola: #8b4dff;
  --lilla: #cbbeff;
  --carta: #f4f3ff;
  --testo: #edecff;
  --testo-2: #aeadd2;
  --inchiostro: #12133a;
  --inchiostro-2: #4a4b78;
  --linea: rgb(203 190 255 / 0.16);
  --linea-forte: rgb(203 190 255 / 0.32);
  --sfuma: linear-gradient(100deg, var(--blu) 0%, var(--viola) 100%);
  --sfuma-chiara: linear-gradient(100deg, #8fa2ff 0%, #c4a3ff 100%);
  --in-onda: #ff3b4e;
  --pronto: #38e08a;

  --ombra-superficie: 0 1px 2px rgb(3 4 20 / 0.5), 0 8px 20px -10px rgb(3 4 20 / 0.7);
  --ombra-sollevata: 0 2px 4px rgb(3 4 20 / 0.5), 0 18px 36px -14px rgb(3 4 20 / 0.8), 0 40px 70px -30px rgb(61 92 255 / 0.35);
  --ombra-flottante: 0 1px 1px rgb(3 4 20 / 0.4), 0 16px 32px -12px rgb(3 4 20 / 0.8), 0 60px 100px -40px rgb(139 77 255 / 0.45);
  --luce: inset 0 1px 0 rgb(255 255 255 / 0.08);

  --molla: cubic-bezier(0.22, 1, 0.36, 1);
  --raggio: 24px;
  --raggio-piccolo: 12px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --larghezza: 76rem;
  --spazio-sezione: clamp(4.5rem, 9vw, 8rem);
  --carattere: 'Archivo', 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--notte);
  color: var(--testo);
  font-family: var(--carattere);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lilla); outline-offset: 3px; border-radius: 6px; }
.solo-lettore { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; border-radius: 999px; background: #fff; color: var(--inchiostro); }
.salta:focus { top: 1rem; }

/* ---------- tipografia ---------- */
h1, h2, h3, .titolone { font-stretch: 78%; font-variation-settings: 'wdth' 78; font-weight: 700; line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; }
h1, .titolone { font-size: clamp(2.9rem, 8.2vw, 7rem); font-weight: 800; letter-spacing: -0.025em; line-height: 0.94; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.75rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.1; }
.sottotitolo { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.45; color: var(--testo-2); max-width: 38rem; text-wrap: pretty; }
.testo-2 { color: var(--testo-2); }
.prosa { max-width: 40rem; }
.prosa > * + * { margin-top: 1.1em; }
.prosa strong { color: #fff; font-weight: 600; }
/* la frase che chiude un racconto: piu' grande, stretta come i titoli, con la luce della casa */
.prosa__chiusa { font-stretch: 78%; font-variation-settings: 'wdth' 78; font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.15; color: #fff; text-wrap: balance; }
.nota { font-size: 0.875rem; line-height: 1.5; color: var(--testo-2); }

/* ---------- impianto ---------- */
.largo { width: min(100% - 2 * var(--gutter), var(--larghezza)); margin-inline: auto; }
.sezione { padding-block: var(--spazio-sezione); position: relative; }
.sezione__testa { display: grid; gap: 1.25rem; margin-bottom: clamp(2.25rem, 5vw, 4rem); max-width: 50rem; }
.due { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 60rem) { .due { grid-template-columns: 1fr 1fr; } .due--stretta { grid-template-columns: 5fr 7fr; } .due--rovescia > :first-child { order: 2; } }

/* il foglio: una sezione che sale sopra la precedente, cambio di piano e non taglio */
.foglio { position: relative; z-index: 1; margin-top: -2.5rem; border-radius: 2.5rem 2.5rem 0 0; background: var(--notte-2); box-shadow: 0 -24px 60px -30px rgb(3 4 20 / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.06); }
.foglio--notte { background: var(--notte); }
.foglio--carta { background: var(--carta); color: var(--inchiostro); --testo-2: var(--inchiostro-2); --linea: rgb(18 19 58 / 0.12); }
.foglio--carta .prosa strong { color: var(--inchiostro); }
.foglio--luce { background: radial-gradient(70rem 36rem at 88% -10%, rgb(139 77 255 / 0.34), transparent 65%), radial-gradient(50rem 30rem at -5% 105%, rgb(61 92 255 / 0.3), transparent 65%), var(--notte-2); }

/* ---------- testata ---------- */
.testata { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem var(--gutter); pointer-events: none; }
.testata > * { pointer-events: auto; }
.firma { font-stretch: 78%; font-variation-settings: 'wdth' 78; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; text-decoration: none; padding: 0.5rem 0.2rem; text-shadow: 0 1px 12px rgb(3 4 20 / 0.7); }
.capsula { position: relative; display: none; align-items: center; gap: 0.15rem; padding: 0.3rem; border-radius: 999px; border: 1px solid var(--linea); background: rgb(14 16 48 / 0.62); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: var(--luce), var(--ombra-superficie); }
.capsula a { position: relative; z-index: 1; padding: 0.55rem 1.05rem; border-radius: 999px; font-size: 0.95rem; font-weight: 500; text-decoration: none; color: var(--testo-2); transition: color 240ms var(--molla); white-space: nowrap; }
.capsula a:hover, .capsula a[aria-current='page'] { color: #fff; }
.capsula__cursore { position: absolute; top: 0.3rem; bottom: 0.3rem; left: 0; width: 0; border-radius: 999px; background: linear-gradient(100deg, rgb(61 92 255 / 0.55), rgb(139 77 255 / 0.55)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18); opacity: 0; transition: transform 520ms var(--molla), width 520ms var(--molla), opacity 240ms ease; }
.apri-menu { display: grid; gap: 6px; place-content: center; width: 2.9rem; height: 2.9rem; border-radius: 999px; border: 1px solid var(--linea); background: rgb(14 16 48 / 0.7); backdrop-filter: blur(14px); cursor: pointer; }
.apri-menu span:not(.solo-lettore) { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform 240ms var(--molla); }
.apri-menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.apri-menu[aria-expanded='true'] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
.testata .bottone--piccolo { display: none; }
.menu-telefono { position: fixed; inset: 4.6rem var(--gutter) auto var(--gutter); z-index: 49; display: grid; padding: 0.6rem; border-radius: var(--raggio); border: 1px solid var(--linea); background: rgb(14 16 48 / 0.92); backdrop-filter: blur(20px); box-shadow: var(--ombra-flottante); }
.menu-telefono[hidden] { display: none; }
.menu-telefono a { padding: 0.95rem 1rem; border-radius: 14px; text-decoration: none; font-size: 1.15rem; font-weight: 500; }
.menu-telefono a[aria-current='page'] { background: rgb(139 77 255 / 0.22); }
@media (min-width: 60rem) { .capsula { display: flex; } .apri-menu, .menu-telefono { display: none !important; } .testata .bottone--piccolo { display: inline-flex; } }

/* ---------- bottoni ---------- */
.bottone { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.85rem 1.6rem; border: 0; border-radius: 999px; font: inherit; font-weight: 600; text-decoration: none; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #6f7dff 0%, #5a55f5 46%, #6a35e0 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.36), inset 0 -1px 0 rgb(3 4 20 / 0.35), 0 1px 2px rgb(3 4 20 / 0.4), 0 14px 28px -10px rgb(110 70 255 / 0.7);
  transition: box-shadow 240ms var(--molla), transform 140ms var(--molla); }
.bottone::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% -20%, rgb(255 255 255 / 0.4), transparent 60%); opacity: 0; transition: opacity 240ms var(--molla); }
.bottone svg { width: 1.15rem; height: 1.15rem; flex: none; transition: transform 520ms var(--molla); }
.bottone--piccolo { min-height: 2.75rem; padding: 0.55rem 1.2rem; font-size: 0.95rem; }
.bottone--vuoto { background: rgb(255 255 255 / 0.04); border: 1px solid var(--linea-forte); box-shadow: var(--luce); backdrop-filter: blur(8px); }
.foglio--carta .bottone--vuoto { color: var(--inchiostro); border-color: rgb(18 19 58 / 0.3); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .bottone:hover::before { opacity: 1; }
  .bottone:not(.bottone--vuoto):hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -1px 0 rgb(3 4 20 / 0.35), 0 2px 4px rgb(3 4 20 / 0.4), 0 20px 36px -12px rgb(110 70 255 / 0.85); }
  .bottone:hover svg { transform: translateX(3px); }
}
.bottone:active { transform: translateY(1px) scale(0.985); }
.azioni { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.link-freccia { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; text-decoration: none; color: var(--lilla); }
.foglio--carta .link-freccia { color: #4a35d6; }
.link-freccia svg { width: 1.1em; height: 1.1em; transition: transform 240ms var(--molla); }
@media (hover: hover) { .link-freccia:hover svg, a:hover > .link-freccia svg { transform: translateX(4px); } }

/* ---------- apertura ---------- */
.apertura { position: relative; min-height: min(100svh, 60rem); display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.apertura__sfondo { position: absolute; inset: 0; z-index: -2; }
.apertura__sfondo img { width: 100%; height: 100%; object-fit: cover; }
.apertura::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(9 10 28 / 0.55) 0%, rgb(9 10 28 / 0) 22%, rgb(9 10 28 / 0.1) 45%, rgb(9 10 28 / 0.86) 78%, var(--notte) 100%),
              linear-gradient(95deg, rgb(25 28 79 / 0.78) 0%, rgb(61 92 255 / 0.18) 50%, rgb(139 77 255 / 0.28) 100%); }
.apertura__dentro { padding-block: 8rem clamp(4.5rem, 8vw, 7rem); display: grid; gap: 1.6rem; }
.apertura .sottotitolo { color: #d9d7f5; }
.apertura__segnale { position: absolute; right: var(--gutter); bottom: clamp(4.5rem, 8vw, 7rem); display: none; align-items: center; gap: 0.7rem; padding: 0.5rem 0.9rem; border-radius: 10px; border: 1px solid var(--linea); background: rgb(9 10 28 / 0.6); backdrop-filter: blur(10px); font-variant-numeric: tabular-nums; font-size: 0.9rem; letter-spacing: 0.04em; color: #d9d7f5; }
@media (min-width: 60rem) { .apertura__segnale { display: flex; } }
/* una riga su dove e' stata scattata la foto d'apertura, discreta come una didascalia di scena */
.apertura__didascalia { position: absolute; left: var(--gutter); top: 5.2rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--linea); background: rgb(9 10 28 / 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 0.85rem; color: #d9d7f5; }
@media (min-width: 60rem) { .apertura__didascalia { top: auto; left: auto; right: var(--gutter); bottom: clamp(4.5rem, 8vw, 7rem); } }
.spia { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--in-onda); box-shadow: 0 0 0 0 rgb(255 59 78 / 0.6); animation: spia 2.4s ease-out infinite; }
@keyframes spia { 70%, 100% { box-shadow: 0 0 0 0.6rem rgb(255 59 78 / 0); } }
@media (prefers-reduced-motion: reduce) { .spia { animation: none; } }

.apertura--pagina { min-height: min(78svh, 46rem); }

/* apertura col ritratto in piedi (home): sul telefono la foto riempie lo schermo, sul computer sta intera
   a destra e sfuma nel buio verso il testo. Il fondo della foto e' gia' notte: basta non tagliarla. */
.apertura__ruoli strong { display: block; margin-bottom: 0.45rem; font-size: 1.32em; font-weight: 700; line-height: 1.15; color: #fff; }
.apertura__ruoli span { display: block; margin-top: 0.7rem; font-weight: 600; color: var(--lilla); }
.apertura--ritratto::before { background: linear-gradient(180deg, rgb(9 10 28 / 0.6) 0%, rgb(9 10 28 / 0) 18%, rgb(9 10 28 / 0) 40%, rgb(9 10 28 / 0.82) 62%, var(--notte) 100%); }
.apertura--ritratto .apertura__sfondo img { object-position: 50% 24% !important; }
@media (min-width: 60rem) {
  .apertura--ritratto { background: radial-gradient(56rem 40rem at 6% 96%, rgb(61 92 255 / 0.2), transparent 65%), radial-gradient(44rem 32rem at 34% -6%, rgb(139 77 255 / 0.16), transparent 62%), var(--notte); }
  .apertura--ritratto::before { background: linear-gradient(180deg, rgb(9 10 28 / 0.5) 0%, rgb(9 10 28 / 0) 14%, rgb(9 10 28 / 0) 84%, var(--notte) 100%); }
  .apertura--ritratto .apertura__sfondo { left: auto; width: min(54%, 48rem);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 9%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, transparent 9%, #000 42%); }
  .apertura--ritratto .apertura__sfondo img { object-position: 50% 30% !important; }
  .apertura--ritratto .apertura__dentro > * { max-width: min(36rem, 46vw); }
}

/* ---------- il muro di monitor (solo in home) ---------- */
.muro { display: grid; gap: 1rem; }
@media (min-width: 60rem) { .muro { grid-template-columns: 7fr 5fr; grid-template-rows: 1fr 1fr; gap: 1.25rem; } .muro > :first-child { grid-row: span 2; } }
.monitor { position: relative; display: grid; align-content: end; min-height: 19rem; padding: 0; border-radius: var(--raggio); overflow: hidden; isolation: isolate; text-decoration: none; color: #fff;
  border: 1px solid transparent; background: linear-gradient(var(--notte-2), var(--notte-2)) padding-box, linear-gradient(140deg, rgb(203 190 255 / 0.4), rgb(203 190 255 / 0.08) 40%, rgb(139 77 255 / 0.5)) border-box;
  box-shadow: var(--luce), var(--ombra-sollevata); transition: box-shadow 520ms var(--molla), transform 520ms var(--molla); }
@media (min-width: 60rem) { .monitor { min-height: 17rem; } .muro > :first-child { min-height: 36rem; } }
.monitor__immagine { position: absolute; inset: 0; z-index: -2; }
.monitor__immagine img, .monitor__immagine video { width: 100%; height: 100%; object-fit: cover; transition: scale 1400ms var(--molla); }
.monitor::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(9 10 28 / 0) 30%, rgb(9 10 28 / 0.88) 100%), linear-gradient(120deg, rgb(61 92 255 / 0.22), rgb(139 77 255 / 0.12)); }
.monitor__testo { padding: 1.5rem 1.5rem 1.25rem; display: grid; gap: 0.5rem; }
.monitor__testo p { color: #d9d7f5; max-width: 30rem; }
.monitor__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.5rem; border-top: 1px solid rgb(203 190 255 / 0.18); background: rgb(9 10 28 / 0.55); backdrop-filter: blur(8px); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-stretch: 88%; font-variation-settings: 'wdth' 88; color: #cfcdf0; }
.monitor__barra span:first-child { display: inline-flex; align-items: center; gap: 0.55rem; }
.monitor__barra i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--pronto); box-shadow: 0 0 10px rgb(56 224 138 / 0.7); transition: background 240ms ease, box-shadow 240ms ease; }
.monitor__barra em { font-style: normal; color: var(--testo-2); transition: color 240ms ease; }
.monitor__barra em::before { content: 'Pronto'; }
@media (hover: hover) and (pointer: fine) {
  .monitor:hover { box-shadow: var(--luce), var(--ombra-flottante); transform: translateY(-3px); }
  .monitor:hover .monitor__immagine img, .monitor:hover .monitor__immagine video { scale: 1.04; }
  .monitor:hover .monitor__barra i, .monitor:focus-visible .monitor__barra i { background: var(--in-onda); box-shadow: 0 0 12px rgb(255 59 78 / 0.8); }
  .monitor:hover .monitor__barra em { color: #fff; }
  .monitor:hover .monitor__barra em::before { content: 'In onda'; }
}

/* ---------- schede ---------- */
.scheda { display: block; padding: 1.75rem; border-radius: var(--raggio); border: 1px solid var(--linea); background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015)); box-shadow: var(--luce), var(--ombra-superficie); text-decoration: none; }
.foglio--carta .scheda { background: #fff; border-color: rgb(18 19 58 / 0.1); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(18 19 58 / 0.06), 0 10px 24px -12px rgb(18 19 58 / 0.18); }
a.scheda { transition: transform 520ms var(--molla), box-shadow 520ms var(--molla), border-color 240ms ease; }
@media (hover: hover) and (pointer: fine) { a.scheda:hover { transform: translateY(-3px); border-color: var(--linea-forte); box-shadow: var(--luce), var(--ombra-sollevata); } }
.scheda > * + * { margin-top: 0.7rem; }
.scheda h3 { font-size: 1.35rem; }
.tessera { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: var(--raggio-piccolo); background: linear-gradient(140deg, rgb(61 92 255 / 0.3), rgb(139 77 255 / 0.3)); border: 1px solid rgb(203 190 255 / 0.22); color: var(--lilla); margin-bottom: 1.1rem; }
.foglio--carta .tessera { background: linear-gradient(140deg, #e4e8ff, #ece2ff); border-color: rgb(90 85 245 / 0.18); color: #4a35d6; }
.tessera svg { width: 1.4rem; height: 1.4rem; }
.griglia-3 { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .griglia-3 { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 72rem) { .griglia-3 { grid-template-columns: repeat(3, 1fr); } }
.griglia-2 { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .griglia-2 { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }

/* ---------- foto ---------- */
.foto { position: relative; overflow: hidden; border-radius: var(--raggio); box-shadow: var(--ombra-flottante); background: var(--indaco); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--alta { aspect-ratio: 4 / 5; }
.foto--larga { aspect-ratio: 3 / 2; }
.foto--cinema { aspect-ratio: 16 / 9; }
.foto--quadra { aspect-ratio: 1; }
.foto--libera { box-shadow: none; background: none; border-radius: 0; overflow: visible; }
.foto--libera img { object-fit: contain; filter: drop-shadow(0 30px 40px rgb(18 19 58 / 0.35)); }
.foto figcaption, .didascalia { font-size: 0.875rem; color: var(--testo-2); margin-top: 0.7rem; }

/* collage alla maniera di un muro di riquadri: titolo, immagine, una riga */
.collage { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .collage { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; } .c-3 { grid-column: span 3; } .c-2 { grid-column: span 2; } .c-4 { grid-column: span 4; } .c-6 { grid-column: span 6; } }
.riquadro { position: relative; display: grid; align-content: end; min-height: 20rem; border-radius: var(--raggio); overflow: hidden; isolation: isolate; border: 1px solid var(--linea); box-shadow: var(--luce), var(--ombra-sollevata); }
.riquadro--alto { min-height: 26rem; }
.riquadro .sfondo { position: absolute; inset: 0; z-index: -2; }
.riquadro .sfondo img { width: 100%; height: 100%; object-fit: cover; }
.riquadro::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(9 10 28 / 0.05) 25%, rgb(9 10 28 / 0.9) 100%); }
.riquadro__testo { padding: 1.5rem; display: grid; gap: 0.4rem; }
.riquadro__testo p { color: #d9d7f5; font-size: 1rem; max-width: 32rem; }

/* cosa produce l'impresa: righe tipografiche con un filetto, titolo a sinistra e due righe a destra */
.servizi { margin: 0; border-top: 1px solid var(--linea-forte); }
.servizi > div { display: grid; gap: 0.4rem 2.5rem; padding-block: 1.4rem; border-bottom: 1px solid var(--linea); }
.servizi dt { font-stretch: 78%; font-variation-settings: 'wdth' 78; font-weight: 700; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.1; }
.servizi dd { margin: 0; color: var(--testo-2); max-width: 46rem; }
@media (min-width: 48rem) { .servizi > div { grid-template-columns: minmax(12rem, 1fr) 2.4fr; align-items: baseline; } }

/* elenco di nomi: chi c'è stato dall'altra parte del lavoro */
.nomi { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.nomi li { padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--linea); background: rgb(255 255 255 / 0.03); font-weight: 500; font-size: 0.98rem; }

/* ---------- il percorso (linea del tempo: qui l'ordine è vero, quindi si numera con gli anni) ---------- */
.tempo { position: relative; display: grid; gap: clamp(3rem, 7vw, 6rem); padding-left: 2rem; }
.tempo::before { content: ''; position: absolute; left: 0.45rem; top: 0.5rem; bottom: 0; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--blu), var(--viola) 60%, rgb(139 77 255 / 0)); }
.tappa { position: relative; display: grid; gap: 1.5rem; align-items: center; }
.tappa::before { content: ''; position: absolute; left: -2rem; top: 0.55rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--notte); border: 2px solid var(--lilla); box-shadow: 0 0 0 5px rgb(139 77 255 / 0.18); }
.tappa__quando { font-stretch: 78%; font-variation-settings: 'wdth' 78; font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 0.95; letter-spacing: -0.02em; background: var(--sfuma-chiara); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tappa__testo { display: grid; gap: 0.9rem; }
.tappa h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.08; }
@media (min-width: 60rem) { .tempo { padding-left: 3rem; } .tappa::before { left: -3rem; } .tappa { grid-template-columns: 6fr 5fr; gap: 4rem; } .tappa:nth-child(even) > .tappa__foto { order: -1; } }
.foto-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
/* incontri: una parete di foto senza didascalie (i nomi non si dicono). Righe alte uguali, le foto larghe
   prendono due colonne: niente buchi e niente colonne che finiscono ad altezze diverse */
.incontri { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 13rem; grid-auto-flow: dense; gap: 0.75rem; }
.incontri .foto { height: 100%; box-shadow: var(--ombra-sollevata); }
.incontri .foto img { height: 100%; }
.incontri .doppia { grid-column: span 2; }
@media (min-width: 60rem) { .incontri { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(15rem, 21vw, 19rem); gap: 1.25rem; } }

/* ---------- video ---------- */
.schermo { position: relative; border-radius: var(--raggio); overflow: hidden; border: 1px solid var(--linea-forte); box-shadow: var(--ombra-flottante); background: #000; }
.schermo video { width: 100%; height: auto; }
.schermo--alto { max-width: 24rem; margin-inline: auto; }
/* due video affiancati: lo show (orizzontale) e la sala regia (verticale), alti uguali sul computer */
.coppia-video { display: grid; gap: 1rem; }
.coppia-video .schermo:last-child { max-width: 24rem; width: 100%; margin-inline: auto; }
@media (min-width: 60rem) { .coppia-video { grid-template-columns: 16fr 5.06fr; gap: 1.25rem; align-items: start; } .coppia-video .schermo:last-child { max-width: none; } }
.nota-collage { margin-top: 1.75rem; color: var(--testo-2); font-size: 1.05rem; }
.nota-collage strong { color: #fff; font-weight: 600; }
.foglio--carta .nota-collage strong { color: var(--inchiostro); }
@media (min-width: 60rem) { .due--allineata { align-items: start; } }

/* ---------- stampa ---------- */
.ritaglio { display: grid; gap: 1rem; align-content: start; }
.ritaglio .foto { aspect-ratio: 4 / 3; box-shadow: var(--ombra-superficie); }
.ritaglio__fonte { font-weight: 700; font-stretch: 78%; font-variation-settings: 'wdth' 78; font-size: 1.35rem; }

/* dove si compra */
.librerie { display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .librerie { grid-template-columns: repeat(2, 1fr); } }
.librerie a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; border-radius: 16px; border: 1px solid rgb(18 19 58 / 0.14); background: #fff; text-decoration: none; font-weight: 600; box-shadow: 0 1px 2px rgb(18 19 58 / 0.06); transition: transform 240ms var(--molla), box-shadow 240ms var(--molla); }
.librerie a svg { width: 1.2rem; height: 1.2rem; color: #4a35d6; }
@media (hover: hover) { .librerie a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgb(18 19 58 / 0.3); } }

/* ---------- chiusura e piede ---------- */
.contatti { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .contatti { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .contatti { grid-template-columns: repeat(4, 1fr); } }
.contatti .testo-2 { overflow-wrap: anywhere; }
.piede { position: relative; z-index: 1; border-top: 1px solid var(--linea); padding-block: 3.5rem 2rem; background: #06071a; }
.piede__griglia { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .piede__griglia { grid-template-columns: 2fr 1fr 1fr; } }
.piede__nome { font-stretch: 78%; font-variation-settings: 'wdth' 78; font-weight: 800; font-size: 1.6rem; margin-bottom: 0.4rem; }
.piede__frase { font-weight: 600; color: #fff; margin-bottom: 0.35rem; }
.piede__griglia > div:first-child .testo-2 { max-width: 26rem; }
.piede nav, .piede__fuori { display: grid; gap: 0.55rem; align-content: start; }
.piede a { text-decoration: none; color: var(--testo-2); }
.piede a:hover { color: #fff; }
.piede__fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); font-size: 0.875rem; color: var(--testo-2); }

/* ---------- movimento: un solo momento orchestrato (l'apertura), il resto risponde allo scorrere ---------- */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra 900ms var(--molla) both; animation-delay: var(--ritardo, 0ms); }
  @keyframes entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .apertura__sfondo img { animation: assesta 2400ms var(--molla) both; }
  @keyframes assesta { from { scale: 1.08; } to { scale: 1; } }

  .js .rivela { clip-path: inset(9% 7% 9% 7% round var(--raggio)); transition: clip-path 1100ms var(--molla); }
  .js .rivela img { scale: 1.14; transition: scale 1600ms var(--molla); }
  .js .rivela.visto { clip-path: inset(0 0 0 0 round var(--raggio)); }
  .js .rivela.visto img { scale: 1; }

  .js [data-appare] { opacity: 0; transform: translateY(16px); transition: opacity 800ms var(--molla) var(--ritardo, 0ms), transform 800ms var(--molla) var(--ritardo, 0ms); }
  .js [data-appare].visto { opacity: 1; transform: none; }
  .js [data-appare] .tessera svg { transform: scale(0.6) rotate(-16deg); opacity: 0; transition: transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1) calc(var(--ritardo, 0ms) + 260ms), opacity 300ms ease calc(var(--ritardo, 0ms) + 260ms); }
  .js [data-appare].visto .tessera svg { transform: none; opacity: 1; }

  @supports (animation-timeline: view()) {
    .tempo::before { transform-origin: top; animation: cresce linear both; animation-timeline: view(); animation-range: cover 0% cover 75%; }
    @keyframes cresce { from { transform: scaleY(0.02); } to { transform: scaleY(1); } }
  }
}

/* le foto con un rapporto fisso: l'immagine riempie la cornice, non la deforma */
.foto--alta img, .foto--larga img, .foto--cinema img, .foto--quadra img, .ritaglio .foto img { position: absolute; inset: 0; }
.ritaglio { gap: 0.5rem; }
.ritaglio > * + * { margin-top: 0; }
.ritaglio .foto { margin-bottom: 0.75rem; }
@media (min-width: 60rem) { .monitor { min-height: 19.5rem; } .muro > :first-child { min-height: 40.25rem; } }
.monitor::after { background: linear-gradient(180deg, rgb(9 10 28 / 0) 22%, rgb(9 10 28 / 0.55) 55%, rgb(9 10 28 / 0.94) 100%), linear-gradient(120deg, rgb(61 92 255 / 0.22), rgb(139 77 255 / 0.12)); }

/* la linea del tempo tiene il suo margine anche contro l'azzeramento degli elenchi */
:root .tempo { padding-left: 2rem; }
@media (min-width: 60rem) { :root .tempo { padding-left: 3rem; } }
/* nel collage le foto riempiono la riga: stessa altezza per tutta la fila */
@media (min-width: 48rem) { .collage > .foto { aspect-ratio: auto; min-height: 24rem; height: 100%; } .collage > .foto.c-4 { min-height: 30rem; } }
.schermo--alto { max-width: 27rem; }
/* sul telefono i monitor sono più alti: il testo sta sotto il viso, non sopra */
@media (max-width: 59.99rem) { .monitor { min-height: 25rem; } }
.monitor__immagine video { object-position: 50% 12%; }