/* ==========================================================================
   style.css – l'aspetto della pagina lorenzospini.com

   Indice:
      1. Caratteri (font)
      2. Variabili: colori, caratteri e misure usati in tutto il file
      3. Regole di base
      4. Bianco e nero delle immagini
      5. Testata: logo e menu
      6. Hero: la fascia con i fotogrammi del video
      7. Fascia sotto la hero: ultimi post e "About me"
      8. Sezioni dei progetti
      9. Miniature dei video
     10. Riquadro scuro in sovrimpressione (video e foto ingrandite)
     11. Finestre di testo (About, Privacy)
     12. Fondo pagina
     13. Schermi piccoli (smartphone)
     14. Animazioni e preferenze di accessibilità

   Unità di misura usate:
     rem  = multiplo della dimensione base del testo (1rem = 16 pixel di norma)
     em   = multiplo della dimensione del testo dell'elemento stesso
     vw   = centesimi della larghezza della finestra (50vw = metà larghezza)
     vh   = centesimi dell'altezza della finestra
     fr   = frazione dello spazio disponibile in una griglia

   clamp(minimo, ideale, massimo): la misura "ideale" cresce o cala con la
   finestra, ma senza mai scendere sotto il minimo né superare il massimo.

   La pagina è pensata prima per gli schermi stretti; le regole dentro
   "@media (min-width: ...)" aggiungono le varianti per gli schermi più larghi.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CARATTERI
   I file dei caratteri stanno nella cartella assets/fonts, quindi non viene
   contattato alcun servizio esterno. "font-display: swap" mostra subito il
   testo con un carattere di sistema e lo sostituisce appena il file è pronto.
   -------------------------------------------------------------------------- */

/* Jost: senza grazie, geometrico, simile alle lettere del logo.
   Un solo file contiene tutti gli spessori da 200 (sottile) a 500 (medio). */
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-normal.woff2") format("woff2");
  font-weight: 200 500;
  font-style: normal;
  font-display: swap;
}
/* EB Garamond: con grazie, per i testi e i titoli. Versione normale... */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-normal.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* ...e versione corsiva */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2. VARIABILI
   Valori definiti una sola volta e richiamati con var(--nome).
   Cambiando un valore qui, cambia in tutta la pagina.
   -------------------------------------------------------------------------- */

:root {
  --ink: #000;        /* nero: testo */
  --paper: #fff;      /* bianco: sfondo */
  --grey: #6b6b6b;    /* grigio: testi secondari (date, sottotitoli, didascalie) */
  --line: #dcdcdc;    /* grigio chiaro: linee di separazione */

  /* Elenchi di caratteri: se il primo non è disponibile si usa il successivo */
  --sans: "Jost", "Century Gothic", "Futura", sans-serif;
  --serif: "EB Garamond", "Garamond", Georgia, serif;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);        /* margine ai lati della pagina */
  --gap: clamp(0.375rem, 0.7vw, 0.625rem);      /* spazio fra le miniature delle foto */

  /* Altezza della testata. Questo è solo un valore di partenza: lo script
     (main.js) lo sostituisce con l'altezza misurata davvero. */
  --header-h: 6.5rem;
}


/* --------------------------------------------------------------------------
   3. REGOLE DI BASE
   -------------------------------------------------------------------------- */

/* Larghezza e altezza di ogni elemento comprendono bordi e spazi interni:
   rende i calcoli delle misure molto più prevedibili */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Impedisce a iPhone di ingrandire il testo da solo ruotando lo schermo */
  -webkit-text-size-adjust: 100%;
  /* Cliccando una voce del menu, la sezione si ferma sotto la testata
     invece di finirci dietro */
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;   /* 17 pixel */
  line-height: 1.5;       /* interlinea: una volta e mezza l'altezza del testo */
}

/* Le immagini non escono mai dal loro contenitore e mantengono le proporzioni */
img { display: block; max-width: 100%; height: auto; }

/* I link prendono il colore del testo che li circonda */
a { color: inherit; }

/* Azzera i margini che il browser aggiunge da solo: gli spazi sono decisi
   caso per caso più sotto */
h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }   /* elenchi senza puntini */

/* Contorno ben visibile sull'elemento selezionato quando si naviga con la
   tastiera (tasto Tab). Con il mouse non compare. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Contenitore centrato: larghezza massima di 1320 pixel e margini ai lati.
   Si trova dentro la testata, ogni sezione e il fondo pagina. */
.wrap {
  max-width: 82.5rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* --------------------------------------------------------------------------
   4. BIANCO E NERO
   Ogni immagine con la classe "bw" appare in bianco e nero e torna a colori
   quando ci si passa sopra. I file sono a colori: è il browser a toglierli.
   -------------------------------------------------------------------------- */

.bw {
  filter: grayscale(1);            /* 1 = tutto grigio, 0 = colori originali */
  transition: filter 0.5s ease;    /* il passaggio dura mezzo secondo */
}
/* "(hover: hover)" = dispositivi con un puntatore (mouse). Sui telefoni la
   regola non si applica, altrimenti il colore resterebbe "incastrato" dopo
   un tocco. La seconda parte dà lo stesso effetto navigando con la tastiera. */
@media (hover: hover) {
  .bw:hover, a:focus-visible .bw { filter: none; }
}


/* --------------------------------------------------------------------------
   5. TESTATA: logo, sottotitolo e menu
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;   /* resta attaccata in alto mentre la pagina scorre */
  top: 0;
  z-index: 10;        /* sta sopra al resto della pagina */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
/* Logo a sinistra, menu a destra, allineati al centro in verticale */
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  padding-block: 0.75rem;
}
/* Logo e sottotitolo sono il titolo principale della pagina (<h1>), utile ai
   motori di ricerca. "font: inherit" gli toglie l'aspetto da titolo. */
.brand-heading {
  display: flex;
  font: inherit;
}
/* Il link che contiene logo e sottotitolo, uno sopra l'altro e centrati */
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
/* Dimensione del logo: per ingrandirlo o ridurlo basta cambiare l'altezza */
.brand img {
  height: 4.75rem;
  width: auto;
}
/* La scritta "~ eclectic guitar ~" sotto il logo */
.brand-sub {
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-weight: 300;              /* leggero */
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.16em;        /* lettere distanziate, come nel logo originale */
  text-transform: uppercase;     /* mostrata in maiuscolo (nell'HTML è minuscola) */
  white-space: nowrap;           /* mai spezzata su due righe */
}

/* Il menu: voci in fila, allineate a destra */
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem clamp(1.25rem, 2.6vw, 2.5rem);
}
.site-nav a {
  display: block;
  padding-block: 0.35rem;
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  /* La sottolineatura è una linea di sfondo alta 1 pixel, larga zero a
     riposo: allargandola (qui sotto) sembra "disegnarsi" da sinistra */
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size 0.25s ease;
}
/* Sottolineatura completa al passaggio del mouse e sulla voce del progetto
   che si sta guardando (aria-current viene impostato da main.js) */
.site-nav a:hover,
.site-nav a[aria-current="true"] { background-size: 100% 1px; }


/* --------------------------------------------------------------------------
   6. HERO: la fascia con i fotogrammi del video
   -------------------------------------------------------------------------- */

.hero-band {
  position: relative;
  /* Altezza: il 46% della finestra, mai meno di 240 né più di 480 pixel.
     Cambiando il valore centrale la fascia diventa più alta o più bassa. */
  height: clamp(15rem, 46vh, 30rem);
  overflow: hidden;            /* nasconde ciò che esce dalla fascia */
  background: var(--ink);
}
/* L'immagine fissa e la tela (canvas) dei fotogrammi occupano entrambe tutta
   la fascia, una sopra l'altra: la tela copre l'immagine appena lo script
   inizia a disegnare */
.hero-band img,
.hero-band canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Immagine fissa di ripiego (prima del caricamento, o senza JavaScript):
   riempie la fascia mostrando l'angolo in basso a sinistra, dove sta la mano */
.hero-band img {
  object-fit: cover;
  object-position: 0% 100%;
}


/* --------------------------------------------------------------------------
   7. FASCIA SOTTO LA HERO: ultimi post di Mastodon e foto "About me"
   -------------------------------------------------------------------------- */

.intro {
  padding-block: clamp(1.75rem, 4vh, 2.75rem);
  border-bottom: 1px solid var(--line);
}
/* Su schermi stretti post e foto stanno uno sotto l'altro; la disposizione
   affiancata è definita più in basso, in "min-width: 56rem" */
.intro-body {
  display: grid;
  gap: 1.75rem clamp(1.5rem, 3vw, 3rem);
}
/* La scritta "Latest posts" */
.news-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  color: var(--grey);
}
/* La riga "More on @lorenzo@mastodon.art" sotto i post */
.news-more {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--grey);
}
.news-more a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.news-more a:hover { color: var(--ink); }
/* L'elenco dei post, riempito da main.js */
.posts {
  display: grid;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  gap: 1.25rem clamp(1rem, 2.5vw, 2rem);
  /* Altezza minima: tiene il posto mentre i post arrivano, così il resto
     della pagina non "salta" quando compaiono */
  min-height: 7rem;
  margin-top: 0.75rem;
}
/* Ogni post è un riquadro con il solo contorno, grigio chiaro e con gli
   angoli arrotondati, che scendendo sfuma fino a sparire nello sfondo:
   così i riquadri più vuoti si notano meno.

   Come si ottiene: il bordo è trasparente e ha due sfondi sovrapposti.
     1. il primo (bianco) riempie solo l'interno del riquadro (padding-box)
     2. il secondo è una sfumatura dal grigio al bianco che arriva fin sotto
        il bordo (border-box): del secondo resta visibile solo la striscia
        del bordo, cioè il contorno sfumato.
   Nella sfumatura, "45%" è il punto fino a cui il contorno resta pieno e
   "100%" quello in cui è sparito del tutto: abbassando il primo numero il
   contorno comincia a svanire prima.

   Il testo usa lo stesso carattere senza grazie della data (Jost), a 12 pixel.
   min-width: 0 permette al testo lungo di andare a capo invece di allargare
   la colonna. I riquadri di una stessa riga hanno tutti la stessa altezza:
   è la griglia (.posts) ad allungarli fino al più alto. */
.post {
  min-width: 0;
  padding: 0.85rem 1rem 1rem;      /* spazio fra il contorno e il contenuto */
  border: 1px solid transparent;
  border-radius: 0.75rem;          /* arrotondamento degli angoli (0 = squadrati) */
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(to bottom, var(--line) 45%, var(--paper) 100%) border-box;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.5;
}
/* La data (solo testo), grigia e un po' più piccola del testo: 11 pixel.
   Nel post delle prossime date al suo posto c'è la scritta "Upcoming Gigs",
   con lo stesso aspetto. */
.post-date {
  display: block;
  font-size: 0.6875rem;
  color: var(--grey);
}
/* Testo del post, tagliato a cinque righe con i puntini finali.
   Per mostrare più o meno righe basta cambiare il numero di -webkit-line-clamp
   (il prefisso "-webkit-" è richiesto da tutti i browser per questa funzione). */
.post-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  margin-top: 0.2rem;
  white-space: pre-line;       /* rispetta gli "a capo" del post originale */
  overflow-wrap: anywhere;     /* spezza anche parole o link molto lunghi */
}
/* Miniatura dell'immagine o del video allegato (è un pulsante) */
.post-media {
  display: block;
  width: 100%;
  max-width: 11rem;
  margin-top: 0.6rem;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.post-media img {
  width: 100%;
  aspect-ratio: 16 / 9;   /* forma fissa */
  object-fit: cover;      /* l'immagine riempie la forma, tagliando l'eccesso */
}

/* La foto profilo "About me": cliccandola si apre il testo.
   Foto rotonda con la scritta sotto, centrate una sull'altra. */
.about-card {
  display: grid;
  justify-items: center;   /* foto e scritta centrate in orizzontale */
  gap: 0.6rem;             /* spazio fra foto e scritta */
  text-decoration: none;
}
.about-card img {
  width: 10rem;                    /* diametro sugli schermi stretti (160 pixel) */
  aspect-ratio: 1 / 1;             /* quadrata... */
  border-radius: 50%;              /* ...e con gli angoli arrotondati al massimo: un cerchio */
  object-fit: cover;
  object-position: 55% 28%;        /* punto della foto da tenere visibile: il viso */
}
/* La scritta, con la stessa sottolineatura animata delle voci del menu */
.about-card span {
  padding-block: 0.2rem;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size 0.25s ease;
}
/* Al passaggio del mouse (anche sopra la scritta): foto a colori e
   sottolineatura */
@media (hover: hover) {
  .about-card:hover .bw { filter: none; }
  .about-card:hover span { background-size: 100% 1px; }
}

/* Da 640 pixel di larghezza: i post si dispongono su tre colonne */
@media (min-width: 40rem) {
  .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Da 896 pixel: post a sinistra (tutto lo spazio disponibile) e foto
   "About me" a destra, larga fra 176 e 224 pixel */
@media (min-width: 56rem) {
  .intro-body {
    grid-template-columns: minmax(0, 1fr) clamp(11rem, 18vw, 14rem);
    align-items: start;
  }
  /* Se i post non sono disponibili resta solo la colonna della foto
     (la classe "intro--no-news" viene aggiunta da main.js) */
  .intro--no-news .intro-body { grid-template-columns: clamp(11rem, 18vw, 14rem); }
  .about-card img { width: 100%; }   /* qui il cerchio occupa tutta la colonna */
}


/* --------------------------------------------------------------------------
   8. SEZIONI DEI PROGETTI
   Struttura di ogni sezione:
     .project
       .project-head    titolo e sottotitolo
       .project-body    griglia a due colonne
         .project-text    il testo
         .project-media   foto (o logo) e video
   -------------------------------------------------------------------------- */

.project {
  padding-block: clamp(2.25rem, 5vh, 3.5rem);   /* spazio sopra e sotto */
}
/* Linea di separazione fra un progetto e il successivo
   ("+" = solo quando un progetto segue subito un altro progetto) */
.project + .project { border-top: 1px solid var(--line); }

.project-head { margin-bottom: clamp(1rem, 2.5vh, 1.75rem); }
/* Titolo del progetto */
.project-head h2 {
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
/* Sottotitolo in corsivo grigio ("Jazz and beyond...") */
.tagline {
  margin-top: 0.15rem;
  font-style: italic;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.3;
  color: var(--grey);
}

/* Su schermi stretti testo e immagini stanno uno sotto l'altro;
   le due colonne sono definite più in basso */
.project-body {
  display: grid;
  gap: 1.75rem clamp(2rem, 4vw, 4rem);
}
/* Il testo non supera mai una larghezza comoda da leggere */
.project-text { max-width: 38rem; }
/* Spazio fra un paragrafo e il successivo
   ("* + *" = ogni elemento che ne segue un altro) */
.project-text > * + * { margin-top: 0.65em; }
/* Titoletto interno (es. "Pezzi Scomposti – opera teatral-musicale") */
.project-text h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
/* La citazione di Frank Vignola */
.project-text blockquote {
  padding-bottom: 0.25rem;
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
}
/* Il nome dell'autore sotto la citazione */
.project-text blockquote footer {
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--grey);
}

/* Colonna delle immagini: foto (o logo) sopra, video sotto */
.project-media {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  min-width: 0;
}

/* Miniature delle foto, tutte della stessa forma.
   Il numero di colonne è scritto nell'HTML di ogni galleria
   (style="--cols: 3"); se manca, vale 4. */
.gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: var(--gap);
}
.gallery a {
  display: block;
  cursor: zoom-in;   /* il puntatore diventa una lente: la foto si ingrandisce al clic */
}
.gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;   /* forma della miniatura */
  object-fit: cover;      /* la foto riempie la forma; la parte in più viene tagliata */
}

/* Loghi di Scarzy & Gnudy e Funkaroni (a colori: non hanno la classe "bw").
   L'altezza è fissata in anticipo, così lo spazio è riservato anche prima
   che l'immagine sia scaricata e la pagina non si sposta quando compare. */
.project-logo img {
  width: auto;
  height: clamp(9rem, 30vh, 17rem);
  object-fit: contain;    /* il logo è sempre visibile per intero */
  object-position: left;  /* se la colonna è più stretta del logo, resta a sinistra */
  /* Nessun margine automatico: il logo sta a sinistra, allineato al titolo
     della sezione e alle miniature dei video sotto di lui */
}

/* Da 896 pixel di larghezza: due colonne */
@media (min-width: 56rem) {
  /* Disposizione normale: testo stretto a sinistra (5 parti),
     immagini larghe a destra (7 parti) */
  .project-body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  /* Varianti, scelte nell'HTML aggiungendo una classe a .project-body:
     --text-wide  testo largo a sinistra (per i testi lunghi, es. Duri di Legno)
     --flip       immagini a sinistra e testo a destra */
  .project-body--text-wide,
  .project-body--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .project-body--flip .project-text { order: 2; }   /* il testo passa per secondo */
}


/* --------------------------------------------------------------------------
   9. MINIATURE DEI VIDEO
   -------------------------------------------------------------------------- */

/* La scritta "Video" */
.videos h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  color: var(--grey);
}
/* La frase in corsivo sotto i video di Songs2Swing */
.videos-note {
  margin-top: 0.6rem;
  font-style: italic;
}
/* Griglia delle miniature: tante colonne quante ce ne stanno, ognuna larga
   almeno 92 pixel ("auto-fill" le calcola da solo) */
.videos ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.6rem;
}
/* Ogni miniatura è un link: immagine sopra, titolo sotto */
.video {
  display: block;
  text-decoration: none;
}
.video-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink);
}
.video-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Il triangolino "play" nell'angolo in basso a sinistra. Non è un'immagine:
   è un elemento vuoto il cui bordo sinistro, bianco, forma il triangolo. */
.video-thumb::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  bottom: 0.4rem;
  border-left: 0.5rem solid var(--paper);
  border-block: 0.32rem solid transparent;
  filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.6));   /* ombra, per vederlo su fondi chiari */
}
/* Titolo del brano: grigio, diventa nero al passaggio del mouse */
.video-title {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--grey);
  transition: color 0.25s ease;
}
.video:hover .video-title,
.video:focus-visible .video-title { color: var(--ink); }


/* --------------------------------------------------------------------------
   10. RIQUADRO SCURO IN SOVRIMPRESSIONE (<dialog class="player">)
   Mostra i video e le foto ingrandite; viene aperto e chiuso da main.js.
   -------------------------------------------------------------------------- */

.player {
  width: min(92vw, 68rem);   /* quasi tutta la finestra, al massimo 1088 pixel */
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
/* Lo sfondo scuro che copre il resto della pagina (0.88 = quasi opaco) */
.player::backdrop { background: rgb(0 0 0 / 0.88); }
/* Il contenitore del video, in formato 16:9 */
.player-frame {
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  margin-inline: auto;
  background: var(--ink);
}
/* Il lettore di YouTube riempie il contenitore */
.player-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Per foto e video dei post il contenitore non impone il 16:9
   (la classe "player--photo" viene aggiunta da main.js) */
.player--photo .player-frame {
  aspect-ratio: auto;
  background: none;
}
.player-frame img,
.player-frame video {
  display: block;
  max-width: 100%;
  max-height: 80vh;      /* mai più alti dell'80% della finestra */
  margin-inline: auto;
}
/* Pulsante "Close", bianco, in alto a destra */
.player-close {
  display: block;
  margin: 0 0 0.75rem auto;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
}
/* Su fondo scuro il contorno della tastiera deve essere bianco */
.player-close:focus-visible { outline-color: var(--paper); }


/* --------------------------------------------------------------------------
   11. FINESTRE DI TESTO (<dialog class="text-dialog">): About e Privacy
   -------------------------------------------------------------------------- */

.text-dialog {
  width: min(92vw, 40rem);   /* al massimo 640 pixel */
  max-height: 88vh;          /* se il testo è più lungo, scorre all'interno */
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 0;
  background: var(--paper);
  color: var(--ink);
}
/* Sfondo oscurato, più leggero di quello dei video */
.text-dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.text-dialog h2 {
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1.1;
}
.text-dialog-body { margin-top: 1rem; }
/* Spazio fra i paragrafi */
.text-dialog-body > * + *,
.text-dialog-body div > * + * { margin-top: 0.65em; }
/* Titolo della seconda parte (la versione inglese della Privacy),
   separata da una linea */
.text-dialog-body h3 {
  margin-top: 1.5em;
  padding-top: 1.25em;
  border-top: 1px solid var(--line);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
}
.text-dialog-body a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
/* La riga "Ultimo aggiornamento" */
.text-dialog-note {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--grey);
}
/* Pulsante "Close", in alto a destra accanto al titolo */
.text-dialog-close {
  float: right;
  margin: -0.25rem 0 0.5rem 1rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   12. FONDO PAGINA
   Il fondo pagina si allunga quanto basta perché "ultimo progetto + fondo
   pagina" riempiano almeno una schermata: così il menu può portare anche
   l'ultimo titolo subito sotto la testata.
     altezza minima = altezza della finestra
                      - altezza della testata      (--header-h)
                      - altezza dell'ultimo progetto (--last-h)
   Le due misure sono calcolate da main.js. Senza JavaScript --last-h vale
   100vh, il risultato è negativo e il fondo pagina resta alto quanto il suo
   contenuto.
   -------------------------------------------------------------------------- */

.site-footer {
  display: grid;
  align-content: center;   /* contenuto centrato in verticale */
  /* Scritta due volte: la prima riga vale per i browser più vecchi; la
     seconda usa "svh", l'altezza della finestra dei telefoni quando la barra
     dell'indirizzo è visibile, ed è quella usata dai browser recenti */
  min-height: calc(100vh - var(--header-h) - var(--last-h, 100vh));
  min-height: calc(100svh - var(--header-h) - var(--last-h, 100vh));
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vh, 4rem);
  text-align: center;
}
/* L'icona con la chitarra */
.site-footer img {
  width: 4rem;
  margin: 0 auto 1rem;
}
/* La riga del contatto email */
.contact {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.125rem, 2.6vw, 1.625rem);
  line-height: 1.3;
}
.contact a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
/* Copyright e link "Privacy & cookie" */
.copyright {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--grey);
}


/* --------------------------------------------------------------------------
   13. SCHERMI PICCOLI: sotto i 768 pixel di larghezza
   -------------------------------------------------------------------------- */

@media (max-width: 47.99rem) {
  /* Testata: logo sopra, menu sotto, tutto centrato */
  .site-header .wrap {
    flex-direction: column;
    gap: 0.35rem;
    padding-block: 0.6rem 0.4rem;
  }
  .brand img { height: 3rem; }                            /* logo più piccolo */
  .brand-sub { margin-top: 0.3rem; font-size: 0.75rem; }  /* scritta più piccola */
  /* Menu su una sola riga, con le voci distribuite su tutta la larghezza */
  .site-nav { width: 100%; }
  .site-nav ul { flex-wrap: nowrap; justify-content: space-between; gap: 0 0.5rem; }
  /* Il carattere si riduce con la larghezza dello schermo, fra 12 e 14 pixel,
     perché le quattro voci stiano sempre sulla stessa riga */
  .site-nav a { font-size: clamp(0.75rem, 3.5vw, 0.875rem); letter-spacing: 0; padding-block: 0.3rem; }
}


/* --------------------------------------------------------------------------
   14. ANIMAZIONI E PREFERENZE DI ACCESSIBILITÀ
   Alcune persone impostano il proprio dispositivo per ridurre i movimenti
   sullo schermo: "prefers-reduced-motion" permette di rispettare la scelta.
   -------------------------------------------------------------------------- */

/* Nessuna preferenza: cliccando il menu la pagina scorre in modo fluido */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Movimenti ridotti: niente transizioni (colore delle foto, sottolineature) */
@media (prefers-reduced-motion: reduce) {
  .bw, .site-nav a, .video-title, .about-card span { transition: none; }
}