/* ---------------------------------------------------------------
   Newsreader — il carattere dei titoli.

   Ospitato qui, non richiamato da Google: il sito non dipende da
   nessuno e chi legge non viene tracciato da terzi. È un font
   variabile, quindi un file solo copre tutti i pesi che usiamo.
   `font-display: swap` fa comparire subito il testo con il carattere
   di sistema, e lo sostituisce quando il font è arrivato: meglio un
   titolo che cambia forma che un titolo che non c'è.
   --------------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader';
  src: url('font/newsreader-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Newsreader';
  src: url('font/newsreader-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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;
}

/* ---------------------------------------------------------------
   gianniaureli.it — foglio di stile

   Impianto: fondo nero da proiezione per le sezioni che vivono di
   fotografie, fondo osso per quelle che vivono di testo.
   L'accento è uno smeraldo scuro — il verde dello scoutismo, che
   attraversa metà del lavoro di Gianni, portato su un nero da sala.
   --------------------------------------------------------------- */

:root {
  /* I neri non sono neutri: hanno dentro una goccia di verde, così lo
     smeraldo dell'accento non ci si stacca sopra come un adesivo. */
  --nero:      #0B100E;   /* sala buia */
  --nero-alto: #131A17;   /* superfici sollevate sul nero */
  --osso:      #E6E9E4;   /* carta */
  --osso-alto: #F1F3EE;
  --inchiostro:#101512;
  --tenue:     #8B9590;   /* grigio verdastro */
  --tenue-osso:#576059;
  --accento:      #1FA07B;  /* smeraldo: l'accento del sito */
  --smeraldo:     #0A4A38;  /* verde profondo: fondi interi, non dettagli */
  --smeraldo-orlo:#0F6047;  /* separazioni dentro il verde */
  --su-smeraldo:  #A9C8B9;  /* testo secondario sul verde profondo */
  --smeraldo-cupo:#0C5B44;  /* lo stesso verde su fondo chiaro, per il testo */
  --linea-nera:#232D28;
  --linea-osso:#C4CEC5;

  --serif: 'Newsreader', 'Iowan Old Style', Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --misura: 34rem;         /* larghezza di lettura, ~65 caratteri */
  --gronda: clamp(1.25rem, 5vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--nero);
  color: var(--osso);
  font: 400 17px/1.6 var(--sans);
  font-synthesis: none;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }

/* ---------- struttura ---------- */

.fascia { padding: clamp(3.5rem, 9vw, 7.5rem) var(--gronda); }
.fascia--osso { background: var(--osso); color: var(--inchiostro); }
.dentro { max-width: 74rem; margin: 0 auto; }

/* Le etichette di sezione in grigio si perdevano: sono piccole e in
   maiuscoletto, e senza colore non reggono il peso di dire dove sei. */
.etichetta {
  font-size: 11px; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--accento);
}
.fascia--osso .etichetta { color: var(--smeraldo-cupo); }

h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 400; line-height: 1.12; letter-spacing: -.015em;
  text-wrap: balance; margin-top: .6rem;
}

p { max-width: var(--misura); }
.fascia--osso p { color: #242A26; }

/* ---------- barra di navigazione ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: baseline; gap: clamp(.9rem, 2.4vw, 2rem);
  padding: 1rem var(--gronda);
  background: rgba(11, 16, 14, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea-nera);
  font-size: 14px;
}
.nav .firma {
  font-family: var(--serif); font-size: 17px; letter-spacing: .01em;
  margin-right: auto; text-decoration: none;
}
.nav a { color: var(--tenue); text-decoration: none; }
.nav a:hover, .nav a:focus-visible { color: var(--osso); }
.nav .contatto { color: var(--accento); }

/* Su schermo stretto il menu va a capo invece di perdere voci: nascondere
   tre pagine su sette per far stare tutto in una riga era una scorciatoia
   che rendeva metà del sito irraggiungibile dal telefono. */
.nav { flex-wrap: wrap; row-gap: .5rem; }
@media (max-width: 44rem) {
  .nav { font-size: 13.5px; gap: .55rem .9rem; padding: .8rem var(--gronda); }
  .nav .firma { flex-basis: 100%; margin-right: 0; margin-bottom: .1rem; }
}

/* ---------- apertura ---------- */

.apertura { position: relative; min-height: min(86vh, 46rem); display: flex; }
.apertura img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 45% 42%;
}
/* la chiusura della sfumatura è già il verde della banda sottostante:
   l'apertura sfuma dentro lo smeraldo invece di finire nel nero */
.apertura::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,16,14,.58) 0%, rgba(11,16,14,.15) 36%,
                                      rgba(9,38,29,.86) 80%, var(--smeraldo) 100%);
}
.apertura .testo {
  position: relative; z-index: 1; align-self: flex-end;
  padding: 0 var(--gronda) clamp(2.5rem, 6vw, 4.5rem);
  max-width: 46rem;
}
.apertura h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 6.2vw, 4.25rem);
  line-height: 1.05; letter-spacing: -.02em; text-wrap: balance;
  margin: .5rem 0 1rem;
}
.apertura .sottotitolo { font-size: clamp(1rem, 1.9vw, 1.2rem); color: #C9D0CB; }
/* sopra una fotografia il grigio tenue sparisce: qui l'etichetta va schiarita */
.apertura .etichetta { color: #BCC4BE; }
.credito-foto {
  position: absolute; right: var(--gronda); bottom: 1rem; z-index: 1;
  font-size: 10.5px; letter-spacing: .05em; color: rgba(230,233,228,.42);
}

/* ---------- i numeri ---------- */

/* Una banda intera di verde profondo sotto l'apertura: è il punto in cui il
   colore smette di essere un dettaglio e diventa struttura. */
.numeri {
  display: grid; gap: 1px; background: var(--smeraldo-orlo);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.numero { background: var(--smeraldo); padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--gronda); }
.numero .cifra {
  font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 2.8rem);
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--osso);
}
.numero .cosa { margin-top: .5rem; font-size: 14px; color: var(--su-smeraldo); max-width: 16rem; }
/* la provenienza del dato, detta piano: rende la cifra più solida, non più fragile */
.numero .fonte {
  display: block; margin-top: .3rem; font-size: 11.5px; letter-spacing: .02em;
  color: #9BC0AE;   /* più chiaro del previsto: a 11px serve contrasto vero */
}

/* ---------- schede dei film ---------- */

.film { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 52rem) {
  .film { grid-template-columns: 1.15fr 1fr; }
  .film--rovescio > figure { order: 2; }
}
.film + .film { margin-top: clamp(3.5rem, 8vw, 6rem); }
.film figure { position: relative; }
.film img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.film figcaption {
  margin-top: .6rem; font-size: 11px; letter-spacing: .05em; color: var(--tenue);
}
.film .anno {
  font-family: var(--serif); font-size: 14px; color: var(--accento);
  font-variant-numeric: tabular-nums;
}
.film p { margin-top: 1rem; color: #B6BEB8; }
.film .riconoscimenti {
  margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--linea-nera);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: 13.5px; color: var(--tenue);
}

/* ---------- il mestiere ---------- */

.mestiere { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 52rem) { .mestiere { grid-template-columns: 1fr 1.2fr; } }
/* i ritratti verticali non vanno tagliati sulla fronte: si mostrano interi */
.mestiere img { width: 100%; height: auto; object-fit: contain; }
/* stessa griglia, testo a sinistra e ritratto a destra */
@media (min-width: 52rem) {
  .mestiere--rovescio { grid-template-columns: 1.2fr 1fr; }
  .mestiere--rovescio > figure { order: 2; }
}
.citazione {
  font-family: var(--serif); font-size: clamp(1.35rem, 2.7vw, 1.95rem);
  line-height: 1.3; text-wrap: balance; max-width: 26rem;
  color: #86D3B4;
}
.citazione + p { margin-top: 1.25rem; }

/* ---------- dietro le quinte / il canale ---------- */

.dietro { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); }
@media (min-width: 46rem) { .dietro { grid-template-columns: 1fr 1fr; } }
.dietro img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.dietro figcaption {
  margin-top: .5rem; font-size: 11px; letter-spacing: .05em; color: var(--tenue);
}

/* ---------- spina dorsale: press kit e contatti ---------- */

.spina { display: grid; gap: 1px; background: var(--linea-osso); margin-top: 2.5rem; }
@media (min-width: 52rem) { .spina { grid-template-columns: 1fr 1fr; } }
.spina article { background: var(--osso-alto); padding: clamp(1.75rem, 4vw, 2.75rem); }
.spina h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.5rem;
  margin-bottom: .75rem; color: var(--smeraldo-cupo);
}
.spina p { font-size: 15.5px; }
.spina .porta {
  display: inline-block; margin-top: 1.5rem; font-size: 14px; font-weight: 600;
  color: var(--accento); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ---------- chiusura ---------- */

.chiusura {
  background: var(--smeraldo);
  padding: 3rem var(--gronda);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline;
  font-size: 13.5px; color: var(--su-smeraldo);
}
.chiusura .webreak { margin-left: auto; }
.chiusura a { color: var(--osso); }

/* ---------- pagina Cinema ---------- */

.intestazione { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.intestazione h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.08; letter-spacing: -.02em; text-wrap: balance;
  margin: .6rem 0 1.1rem; max-width: 24ch;
}
.occhiello { color: var(--tenue); font-size: 16px; }
.fascia--osso .occhiello { color: var(--tenue-osso); }

.titolo-film {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-top: .3rem; letter-spacing: -.01em;
}
/* una frase di Gianni, staccata dal resto: è voce, non descrizione */
.postilla {
  margin-top: 1rem; padding-left: 1rem;
  border-left: 2px solid var(--smeraldo-orlo);
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.45;
  color: #86D3B4;
}
.attrezzi { margin-top: 1.25rem; font-size: 14px; }
.attrezzi a {
  color: var(--accento); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* il percorso: elenco tipografico, non schede. Deve mostrare che c'è, non farsi leggere tutto. */
.percorso h2 { margin-bottom: 1.5rem; }
.percorso .occhiello { margin: -.75rem 0 1.75rem; }

.elenco { list-style: none; counter-reset: none; }
.elenco li {
  display: grid; gap: .35rem 2rem;
  padding: 1.4rem 0; border-top: 1px solid var(--linea-nera);
}
@media (min-width: 44rem) { .elenco li { grid-template-columns: 9rem 1fr; } }
.elenco .quando {
  font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accento); font-variant-numeric: tabular-nums; padding-top: .3rem;
}
.elenco h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.elenco p { margin-top: .4rem; color: #B6BEB8; font-size: 15.5px; }

.minuto { list-style: none; }
.minuto li {
  padding: .85rem 0; border-top: 1px solid var(--linea-nera);
  font-size: 15.5px; color: var(--tenue);
}
.minuto b { color: var(--osso); font-weight: 500; }

/* ---------- fotogrammi del film ---------- */

/* Gli still veri sono in formato scope: vanno mostrati nel loro rapporto,
   non ritagliati come le fotografie di scena. */
img.scope { aspect-ratio: 2.39 / 1; object-fit: cover; }
/* i documentari sono girati in 16:9: stessa logica, altro formato */
img.pieno { aspect-ratio: 16 / 9; object-fit: cover; }
.pellicola img.pieno { aspect-ratio: 16 / 9; }

.pellicola {
  display: grid; gap: clamp(.5rem, 1.4vw, .9rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 46rem) { .pellicola { grid-template-columns: repeat(3, 1fr); } }
.pellicola img {
  width: 100%; aspect-ratio: 2.39 / 1; object-fit: cover; background: #000;
}
.didascalia-pellicola {
  margin-top: .7rem; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tenue);
}

/* una fotografia a piena larghezza sotto l'intestazione di una pagina:
   apre il capitolo senza rubare il posto all'apertura della home, che resta
   l'unica immagine con il titolo sopra */
.banda-foto { margin: 0 0 clamp(2rem, 5vw, 3.25rem); }
.banda-foto img {
  width: 100%; height: clamp(15rem, 46vh, 28rem);
  object-fit: cover; object-position: 50% 38%; display: block; background: #000;
}
/* una foto di gruppo non si taglia: si mostra intera, sul fondo scuro */
.banda-foto--intera img {
  width: auto; max-width: 100%; height: auto; max-height: 68vh;
  margin: 0 auto; background: none;
}
.banda-foto--intera figcaption { text-align: center; }
.banda-foto figcaption {
  padding: .7rem var(--gronda) 0; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tenue);
}

/* l'avvertenza accanto a un titolo non ancora definitivo */
.postilla-titolo {
  font-size: 11px; font-weight: 400; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tenue); margin-left: .6rem;
  white-space: nowrap;
}
.fascia--osso .postilla-titolo { color: var(--tenue-osso); }

.scatti {
  display: flex; flex-wrap: wrap; gap: .8rem;
  align-items: flex-start; margin-top: 1.2rem;
}
.scatti .scatto img { height: 11rem; width: auto; max-width: 100%; }
@media (max-width: 44rem) { .scatti .scatto img { height: 8rem; } }

/* la dicitura di una singola immagine, dentro una riga di .scatti */
.scatto span {
  display: block; margin-top: .45rem;
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tenue);
}
.fascia--osso .scatto span { color: var(--tenue-osso); }

/* dentro la scheda di un film il manifesto comanda e la foto di lavorazione
   gli sta accanto, più bassa: allineate sul fondo sembrano una cosa sola */
.scatti--film { align-items: flex-end; }
.scatti--film .locandina img { height: 16rem; width: auto; max-width: 100%; }
@media (max-width: 44rem) {
  .scatti--film .locandina img { height: 12rem; }
}

/* un ritratto affiancato al testo: presente ma non ingombrante, il posto
   principale resta di quello che c'è scritto accanto */
.ritratto-misurato img { max-width: 20rem; margin-left: auto; }
.ritratto-misurato figcaption { max-width: 20rem; margin-left: auto; }

/* premi e selezioni di un corto: una riga in verde, non un elenco puntato */
.elenco .allori {
  margin-top: .5rem; font-size: 13px; line-height: 1.5;
  color: var(--accento);
}

/* la riga premi funziona anche dentro una scheda film, non solo nell'elenco */
.film .allori {
  margin-top: 1rem; font-size: 13.5px; line-height: 1.55; color: var(--accento);
  max-width: var(--misura);
}

/* ---------- pagina Contatti ---------- */

/* Un indirizzo solo, quattro porte: l'oggetto della mail smista al posto di
   quattro caselle diverse da tenere in ordine. */
.recapiti { display: grid; gap: 1px; background: var(--linea-osso); margin-top: 2.25rem; }
@media (min-width: 46rem) { .recapiti { grid-template-columns: 1fr 1fr; } }
.recapiti a {
  background: var(--osso-alto); padding: 1.25rem 1.4rem;
  text-decoration: none; display: block; min-height: 5rem;
  transition: background .14s;
}
.recapiti a:hover, .recapiti a:focus-visible { background: #E7EBE4; }
.recapiti .voce {
  display: block; font-family: var(--serif); font-size: 1.25rem;
  color: var(--smeraldo-cupo);
}
.recapiti .spiega {
  display: block; margin-top: .3rem; font-size: 14px; color: var(--tenue-osso);
}
.indirizzo-nudo { margin-top: 1.5rem; font-size: 15px; color: var(--tenue-osso); }
.indirizzo-nudo a { color: var(--smeraldo-cupo); }
.fascia--osso .occhiello { color: var(--tenue-osso); }

/* ---------- pagina Canale ---------- */

.video-griglia { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
@media (min-width: 40rem) { .video-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .video-griglia { grid-template-columns: repeat(3, 1fr); } }
.video-scheda { text-decoration: none; display: block; }
.video-scheda img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000;
  border: 1px solid var(--linea-nera); transition: border-color .14s;
}
.video-scheda:hover img, .video-scheda:focus-visible img { border-color: var(--accento); }
.video-scheda .titolo {
  margin-top: .7rem; font-size: 15.5px; line-height: 1.35; font-weight: 500;
}
.video-scheda .quando {
  margin-top: .25rem; font-size: 12.5px; color: var(--tenue);
}

/* ---------- press kit ---------- */

.materiali { list-style: none; margin-top: 2rem; }
.materiali li {
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  padding: 1.4rem 0; border-top: 1px solid var(--linea-nera);
}
.materiali h2 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin: 0; }
.materiali p { margin-top: .35rem; font-size: 15px; color: var(--tenue); }
.materiali > li > div { flex: 1 1 20rem; }
.materiali a[download] {
  background: var(--accento); color: #06110D; text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
  padding: .7rem 1.4rem; border-radius: 8px; white-space: nowrap;
}
.materiali a[download]:hover { background: #27B98E; }
/* quello che non c'è ancora si dice, non si nasconde */
.materiali .stato {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tenue); border: 1px solid var(--linea-nera);
  padding: .55rem 1rem; border-radius: 8px; white-space: nowrap;
}
.materiali .attesa h2 { color: var(--tenue); }
/* il peso di un file scaricabile: chi è in mobilità vuole saperlo prima */
.materiali .peso {
  white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--tenue); opacity: .8;
}
.materiali .peso::before { content: "· "; }
.nota-materiali {
  margin-top: 1.75rem; font-size: 13.5px; color: var(--tenue);
  max-width: var(--misura);
}

.titolo-rassegna {
  font-family: var(--serif); font-weight: 400; font-size: 1.35rem;
  margin: 2.5rem 0 .5rem; color: var(--smeraldo-cupo);
}
.uscite { list-style: none; }
.uscite li {
  display: grid; gap: .2rem 1.5rem; padding: .95rem 0;
  border-top: 1px solid var(--linea-osso);
}
@media (min-width: 44rem) { .uscite li { grid-template-columns: 13rem 1fr; } }
.uscite .testata {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tenue-osso); padding-top: .15rem;
}
.uscite a { color: var(--inchiostro); text-decoration: none; font-size: 16px;
  border-bottom: 1px solid var(--linea-osso); }
.uscite a:hover, .uscite a:focus-visible {
  color: var(--smeraldo-cupo); border-color: var(--smeraldo-cupo); }
.uscite .firma-data { margin-top: .3rem; font-size: 13.5px; color: var(--tenue-osso); }

/* l'elenco del percorso, quando sta sul fondo chiaro */
.fascia--osso .elenco li { border-top-color: var(--linea-osso); }
.fascia--osso .elenco .quando { color: var(--smeraldo-cupo); }
.fascia--osso .elenco h3 { color: var(--inchiostro); }
.fascia--osso .elenco p { color: #3A423C; }

/* ---------- il manifesto in home ---------- */

.manifesto { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 2rem; }
@media (min-width: 56rem) {
  .manifesto { grid-template-columns: 1fr 1.4fr; align-items: start; }
  .manifesto figure { position: sticky; top: 6rem; }
}
.manifesto img { width: 100%; height: auto; }
.testo-manifesto p + p { margin-top: 1.1rem; }
.testo-manifesto p { color: #B6BEB8; }
.testo-manifesto .citazione { color: #86D3B4; margin-bottom: 1.5rem; max-width: 30rem; }
/* la formula è il cuore del discorso: sta su fondo verde, staccata */
.testo-manifesto .formula {
  margin-top: 1.75rem; padding: 1.25rem 1.4rem;
  background: var(--smeraldo); border-left: 3px solid var(--accento);
  color: var(--su-smeraldo);
}
.testo-manifesto .formula b { color: var(--osso); }

/* i titoli cliccabili nell'elenco dei lavori su commissione */
.minuto a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea-nera); }
.minuto a:hover, .minuto a:focus-visible { color: var(--accento); border-color: var(--accento); }

/* ---------- il video in evidenza ---------- */

/* L'ultimo video pubblicato: grande, con il titolo sopra l'immagine.
   Serve a far capire in un colpo d'occhio che il canale è vivo. */
.video-grande {
  display: block; position: relative; text-decoration: none;
  border: 1px solid var(--linea-nera); overflow: hidden;
  transition: border-color .14s;
}
.video-grande:hover, .video-grande:focus-visible { border-color: var(--accento); }
.video-grande img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.video-grande .sopra {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(180deg, rgba(11,16,14,0) 0%, rgba(11,16,14,.88) 62%);
}
.video-grande .titolo {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  line-height: 1.2; max-width: 34rem; color: var(--osso);
}
.video-grande .quando { margin-top: .4rem; font-size: 13px; color: var(--su-smeraldo); }

/* ---------- i videoclip ---------- */

/* Due title track dirette da lui: meritano un'immagine, non una riga di elenco. */
.clip { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: 1.5rem; }
@media (min-width: 44rem) { .clip { grid-template-columns: 1fr 1fr; } }
.clip a { text-decoration: none; display: block; }
.clip img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000;
  border: 1px solid var(--linea-nera); transition: border-color .14s;
}
.clip a:hover img, .clip a:focus-visible img { border-color: var(--accento); }
.clip .titolo {
  margin-top: .7rem; font-family: var(--serif); font-size: 1.25rem; color: var(--osso);
}
.clip .sotto { margin-top: .2rem; font-size: 13.5px; color: var(--tenue); }

/* il marchio di YouTube accanto al nome del canale: serve a capire
   in un colpo d'occhio di che piattaforma si sta parlando */
.marchio-canale { margin-top: 1.5rem; }
.marchio-canale a {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--osso);
}
.logo-yt { height: 1.35rem; width: auto; color: var(--osso); }
.nome-canale { font-size: 15px; color: var(--tenue); }
.marchio-canale a:hover .nome-canale { color: var(--osso); }

/* ---------- le locandine ---------- */

/* Accanto al testo, grandi abbastanza da leggersi: un manifesto è un lavoro
   di qualcuno, non una miniatura. Un clic le apre a piena pagina. */
.elenco li:has(.locandina) { grid-template-columns: 1fr; }
@media (min-width: 44rem) {
  .elenco li:has(.locandina) { grid-template-columns: 7rem 12rem 1fr; }
}
/* .scatto è una fotografia dalla lavorazione: stesso clic della locandina,
   ma non è un manifesto e non va chiamata così. Sta in fondo alla voce, in
   una riga di .scatti tutte della stessa altezza — così una verticale e una
   orizzontale convivono senza che una schiacci l'altra. */
.locandina, .scatto { display: block; align-self: start; }
.locandina img, .scatto img {
  width: 100%; max-width: 12rem; height: auto;
  border: 1px solid var(--linea-nera); transition: border-color .14s, transform .14s;
}
.locandina:hover img, .locandina:focus-visible img,
.scatto:hover img, .scatto:focus-visible img {
  border-color: var(--accento); transform: scale(1.03);
}
.fascia--osso .locandina img, .fascia--osso .scatto img { border-color: var(--linea-osso); }

/* la locandina aperta */
.lente {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; cursor: zoom-out;
  background: rgba(6, 10, 8, .95); padding: 2rem;
}
.lente[data-aperta] { display: flex; }
.lente img { max-width: min(92vw, 40rem); max-height: 90vh; object-fit: contain; }
.lente .chiudi {
  position: absolute; top: 1.25rem; right: 1.5rem;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue);
}
@media (prefers-reduced-motion: reduce) { .locandina img, .scatto img { transition: none; } }

/* dentro una scheda film la fotografia grande è tagliata in 3:2; le immagini
   della riga in fondo — manifesto e foto di lavorazione — no: vanno mostrate
   per intero, ciascuna nelle sue proporzioni */
.scatti .locandina img, .scatti .scatto img {
  aspect-ratio: auto; object-fit: contain;
}