/* ===========================================================
   THE BEGGARS — Componenti
   Ordine: navbar · hero · live · musica · band · festival ·
           gallery · contatti · lightbox
   =========================================================== */

/* -----------------------------------------------------------
   NAVBAR — nascosta sull'hero, entra quando l'hero esce
   ----------------------------------------------------------- */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--c-bg) 82%, transparent);
  border-bottom: 1px solid var(--c-line);
  transform: translateY(-100%);
  transition: transform var(--dur) var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .nav { backdrop-filter: blur(14px) saturate(120%); }
}

.nav.is-visible { transform: none; }

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  width: min(100% - (var(--gutter) * 2), var(--container-max));
  margin-inline: auto;
}

.nav__logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

.nav__logo img {
  height: 1.55rem;
  width: auto;
  filter: invert(1);
  transition: opacity var(--dur-fast) var(--ease);
}
.nav__logo:hover img { opacity: 0.7; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
  margin-inline-start: auto;
}

.nav__link {
  position: relative;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  padding-block: 0.4rem;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link.is-active { color: var(--c-ink); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav__lang {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-ink-dim);
  border: 1px solid var(--c-line);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav__lang:hover { color: var(--c-ink); border-color: var(--c-line-strong); }

.nav__burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  position: relative;
}

.nav__burger span,
.nav__burger span::before,
.nav__burger span::after {
  position: absolute;
  left: 50%;
  width: 1.5rem;
  height: 2px;
  background: var(--c-ink);
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__burger span { top: 50%; margin-top: -1px; }
.nav__burger span::before { content: ""; top: -7px; left: 0; transform: none; }
.nav__burger span::after { content: ""; top: 7px; left: 0; transform: none; }

body.menu-open .nav__burger span { background: transparent; }
body.menu-open .nav__burger span::before { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span::after { transform: translateY(-7px) rotate(-45deg); }

/* Pannello mobile a tutto schermo */
.nav__panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  padding: calc(var(--nav-h) + var(--s-6)) var(--gutter) var(--s-8);
  background: var(--c-bg);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

body.menu-open .nav__panel { display: flex; opacity: 1; }
body.menu-open { overflow: hidden; }

/* A menu aperto la barra resta sopra il pannello, altrimenti la X per
   chiudere sparirebbe insieme alla navbar nascosta sull'hero. */
body.menu-open .nav {
  z-index: calc(var(--z-overlay) + 1);
  transform: none;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.nav__panel a {
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 3.4rem);
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--s-3);
}
.nav__panel a:hover,
.nav__panel a:focus-visible { color: var(--c-accent); }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }

  /* Un solo margine automatico in tutta la barra: con due, il flex si divide
     lo spazio libero fra i due e nessuno dei due va a fondo corsa. */
  .nav__lang { margin-inline-start: auto; }

  /* Lo stacco fra logo e comandi lo fa il margine automatico qui sopra: il
     gap regola solo la distanza fra lingua e burger. */
  .nav__inner { gap: var(--s-3); }
}

/* -----------------------------------------------------------
   HERO — video in loop a tutta pagina
   ----------------------------------------------------------- */
/* Ridefinisce per sé i due token di corpo che condivide con le sezioni, così
   la scala generale può cambiare senza toccarla. Serve anche font-size: il
   testo eredita i px calcolati sul body, non la variabile. */
.hero {
  --t-base: var(--t-hero-base);
  --t-md: var(--t-hero-md);
  font-size: var(--t-base);
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Fondo di riserva se il poster non carica. */
  background: var(--c-bg-deep);
}

/* <picture> non è un elemento sostituito: senza un'altezza esplicita collassa
   sul rapporto dell'immagine e l'height: 100% dell'<img> non ha niente contro
   cui risolversi. */
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Se il video non c'è (o l'utente ha chiesto meno movimento) resta il poster,
   animato con un Ken Burns lentissimo per non sembrare un'immagine morta. */
.hero__media img {
  animation: kenburns 28s ease-in-out infinite alternate;
}
.hero__media video { display: none; }
.hero.has-video .hero__media video { display: block; }
.hero.has-video .hero__media img { display: none; }

@keyframes kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
}

/* Velo: scurisce il video e garantisce il contrasto del testo */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 35%, transparent 30%, rgb(var(--c-shade-rgb) / 0.72) 100%),
    linear-gradient(to bottom, rgb(var(--c-shade-rgb) / 0.55) 0%, rgb(var(--c-shade-rgb) / 0.1) 35%, rgb(var(--c-shade-rgb) / 0.85) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  text-align: center;
  padding: var(--s-8) var(--gutter);
}

.hero__title {
  margin: 0;
  line-height: 0;
}

.hero__logo {
  width: min(78vw, 46rem);
  filter: invert(1) drop-shadow(0 6px 30px rgba(0, 0, 0, 0.55));
}

.hero__tagline {
  font-family: var(--f-display);
  font-size: var(--t-md);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}

/* Chip "prossima data": la prima informazione che cerca chi arriva qui */
.hero__next {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding: 0.6rem 1rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-bg) 55%, transparent);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hero__next:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.hero__next[hidden] { display: none; }
.hero__next .label { color: var(--c-accent); font-weight: 700; }
.hero__next:hover .label { color: var(--c-ink); }

/* Freccia di scroll: sola icona, l'etichetta resta come aria-label */
.hero__scroll {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: 50%;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
  color: var(--c-ink-dim);
}
.hero__scroll:hover { color: var(--c-ink); }
.hero__scroll i {
  font-size: 1.5rem;
  animation: nudge 2.2s var(--ease) infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50% { transform: translateY(0.45rem); opacity: 1; }
}

/* Gemello dello switch di lingua, ancorato alla hero: scorre via con essa,
   quindi non si sovrappone mai a quello della navbar. */
.hero__lang {
  position: absolute;
  top: clamp(1rem, 3vh, 2rem);
  right: var(--gutter);
  z-index: 3;
  background: color-mix(in srgb, var(--c-bg) 45%, transparent);
}

@supports (backdrop-filter: blur(1px)) {
  .hero__lang { backdrop-filter: blur(10px); }
}

/* -----------------------------------------------------------
   LIVE
   ----------------------------------------------------------- */
.live__list { display: flex; flex-direction: column; }

.live__row {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr auto;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  padding-block: clamp(0.9rem, 1.4vw, 1.6rem);
  border-bottom: 1px solid var(--c-line);
  transition: background var(--dur-fast) var(--ease);
}
.live__row:hover { background: var(--c-wash); }

/* Il riquadro tiene giorno e mese sopra e l'anno sotto: in fila su una riga
   sola i riquadri finivano di larghezze diverse e le date non si allineavano.
   Una larghezza minima tiene tutti i riquadri della stessa misura, altrimenti
   "MAR" e "SEP" ne darebbero due diverse. */
.live__date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-self: start;
  min-width: 8.5ch;
  padding: 0.18em 0.5em;
  background: var(--c-ink);
  color: var(--c-bg);
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: 1.06;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.live__year { font-size: 0.72em; letter-spacing: 0.06em; }
.live__row:hover .live__date { background: var(--c-accent); color: var(--c-ink); }

/* min-width: 0 toglie il minimo implicito delle celle grid, altrimenti un nome
   lungo ("Axa Briga Pagan Festival") allargherebbe la colonna invece di andare
   a capo; break-word copre il caso limite della parola singola più larga della
   colonna, che andrebbe comunque a sbordare. */
.live__place {
  min-width: 0;
  overflow-wrap: break-word;
}

/* La riga in evidenza: evento, locale o città (vedi placeLines in
   js/modules/live.js). */
.live__title {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: 1.05;
  text-wrap: balance;
}

.live__where {
  font-style: italic;
  color: var(--c-ink-dim);
  font-size: var(--t-sm);
}

.live__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.live__tag {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3em 0.6em;
  border: 1px solid currentColor;
}
.live__tag--soldout { color: var(--c-accent); }
.live__tag--cancelled { color: var(--c-ink-faint); }
.live__tag--private { color: var(--c-ink-dim); }

.live__row--cancelled .live__title,
.live__row--cancelled .live__where,
.live__row--cancelled .live__date { text-decoration: line-through; }
.live__row--cancelled { opacity: 0.55; }

.live__row--past { opacity: 0.5; }
.live__row--past .live__date { background: transparent; color: var(--c-ink-dim); border: 1px solid var(--c-line); }

/* L'opacità sul contenitore fa gruppo: il link dentro non può risalirla da
   solo, e su una data annullata i due valori si moltiplicano (0.5 x 0.55).
   Si schiarisce la riga intera, e focus-within perché il link è raggiungibile
   da tastiera. */
.live__row--past:hover,
.live__row--past:focus-within { opacity: 1; }

.live__toggle {
  margin-top: var(--s-6);
  color: var(--c-ink-dim);
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: 0.2rem;
}
.live__toggle:hover { color: var(--c-accent); }

.live__past { display: none; }
.live__past.is-open { display: block; }
.live__past-title {
  font-size: var(--t-md);
  color: var(--c-ink-faint);
  margin-block: var(--s-6) var(--s-3);
}

.live__empty {
  border: 1px dashed var(--c-line-strong);
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.live__empty h3 { font-size: var(--t-xl); }
.live__empty .btn { margin-top: var(--s-3); }

/* Data e luogo restano affiancati, i bottoni scendono sotto al luogo.
   Posizionamento per colonna e non con grid-template-areas: una riga senza
   bottoni non deve creare una seconda riga vuota, che il row-gap
   trasformerebbe in una banda di spazio in fondo. */
@media (max-width: 720px) {
  .live__row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--s-4);
    row-gap: var(--s-3);
  }

  .live__date { grid-column: 1; }
  .live__place { grid-column: 2; }
  .live__actions {
    grid-column: 2;
    justify-content: flex-start;
  }
  .live__actions:empty { display: none; }
}

/* -----------------------------------------------------------
   MUSICA
   ----------------------------------------------------------- */
.albums {
  display: grid;
  gap: clamp(3rem, 6vw, 6rem);
}

.album {
  display: grid;
  grid-template-columns: minmax(0, var(--col-1)) minmax(0, var(--col-2));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

/* A righe alterne la copertina passa nella seconda colonna: le larghezze si
   scambiano con lei, altrimenti resterebbe la 0.9fr per una e la 1.1fr per
   l'altra e le copertine verrebbero di due misure diverse. Sono variabili e
   non un altro grid-template-columns perché sotto gli 860 px la griglia
   diventa a colonna unica: una regola :nth-child vincerebbe per specificità. */
.album { --col-1: 0.9fr; --col-2: 1.1fr; }
.album:nth-child(even) { --col-1: 1.1fr; --col-2: 0.9fr; }
.album:nth-child(even) .album__cover { order: 2; }

/* Il bordo dà alla copertina un margine che l'artwork non garantisce: una
   foto a pieno taglio con gli angoli scuri sconfina nel fondo della pagina. */
.album__cover {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
}

.album__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.album:hover .album__cover img { transform: scale(1.03); }

.album__body { display: flex; flex-direction: column; gap: var(--s-4); }

.album__title { font-size: var(--t-xl); }

.album__meta {
  font-size: var(--t-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

.album__desc { color: var(--c-ink-dim); max-width: 52ch; }

/* La riga del titolo è il <summary>: sotto i 720 px apre e chiude l'elenco,
   sopra è solo un'intestazione (vedi syncTracklists in js/modules/music.js). */
.album__tracks-summary {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--c-line-strong);
  list-style: none;
  cursor: default;
}
.album__tracks-summary::-webkit-details-marker { display: none; }
.album__tracks-summary h4 { margin: 0; }

.album__tracks-count {
  margin-left: auto;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--c-ink-faint);
}

/* La freccia compare solo sotto la soglia, dove il summary apre e chiude. */
.album__tracks-chevron {
  display: none;
  font-size: 0.75em;
  color: var(--c-ink-dim);
  transition: transform var(--dur) var(--ease);
}

/* Il contenitore che l'animazione ritaglia (vedi animateTracklist in
   js/modules/music.js). Fuori dall'apertura non deve fare nulla: nessun
   overflow, nessuna altezza imposta. */
.album__tracks-body {
  min-width: 0;
  padding-top: var(--s-4);
}

/* Due colonne con columns, non con grid: il numero di tracce cambia da disco
   a disco e columns si bilancia da solo, senza contarle. */
.album__tracks ol {
  counter-reset: track;
  columns: 2;
  column-gap: var(--s-5);
}

.album__tracks li {
  counter-increment: track;
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  break-inside: avoid;
  font-size: var(--t-sm);
  color: var(--c-ink-dim);
  border-bottom: 1px dotted var(--c-line);
  padding-bottom: 0.35rem;
  margin-bottom: 0.35rem;
}
.album__tracks li::before {
  content: counter(track, decimal-leading-zero);
  font-family: var(--f-display);
  color: var(--c-ink-faint);
  min-width: 2ch;
}

/* Colonne di pari larghezza: in fila l'ultimo bottone va a capo spaiato. */
.album__links {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--s-3);
}

.album__platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  width: 100%;
  max-width: 32rem;
}

.album__platforms .btn { justify-content: start; }

/* Figlio diretto di .album__body, che è flex column: senza align-self il
   bottone si stirerebbe per tutta la larghezza della scheda. */
.album__booklet { align-self: start; }

/* Bottoni di ascolto: l'icona porta il colore della piattaforma, l'hover
   resta quello standard (inversione ad alto contrasto) */
.btn--platform i { color: var(--brand, currentColor); transition: color var(--dur-fast) var(--ease); }
.btn--platform:hover i { color: inherit; }

.btn--spotify { --brand: var(--c-spotify); }
.btn--apple   { --brand: var(--c-apple); }
.btn--amazon  { --brand: var(--c-amazon); }
.btn--youtube { --brand: var(--c-youtube); }

@media (max-width: 860px) {
  .album,
  .album:nth-child(even) .album__cover {
    grid-template-columns: 1fr;
    order: initial;
  }
  .album__cover { max-width: 26rem; }
}

/* Sotto la soglia del telefono la tracklist diventa un dropdown chiuso: qui
   il summary prende l'aspetto di un comando. */
@media (max-width: 720px) {
  .album__tracks-summary { cursor: pointer; }
  .album__tracks-chevron { display: inline-block; }
  .album__tracks[open] .album__tracks-chevron { transform: rotate(180deg); }

  /* Lo spazio sopra l'elenco sta nel padding del contenitore, non nel margine
     della lista: i margini restano fuori dall'altezza animata e comparirebbero
     tutti insieme al primo fotogramma. */
  .album__tracks-body { padding-top: var(--s-3); }
}

/* Solo dove c'è un puntatore vero: su touch :hover resta attaccato dopo il
   tap. Il conteggio non si accende mai — è un'etichetta, non un comando. */
@media (max-width: 720px) and (hover: hover) {
  .album__tracks-summary:hover .album__tracks-chevron { color: var(--c-accent); }
}

/* Su schermo stretto due colonne di tracce spezzano i titoli lunghi, e i
   bottoni affiancati diventano illeggibili: entrambi in colonna singola. */
@media (max-width: 560px) {
  .album__tracks ol { columns: 1; }
  .album__platforms { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   BAND
   ----------------------------------------------------------- */
.band__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.band__bio p + p { margin-top: var(--s-4); }
.band__bio p { max-width: 68ch; color: var(--c-ink-dim); }
.band__bio i { color: var(--c-ink); font-style: italic; }

/* La riga d'accento lega la citazione alla colonna di testo, senza riquadro. */
.band__quote {
  border-inline-start: 2px solid var(--c-accent);
  padding-inline-start: var(--s-5);
}

.band__quote p {
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.3;
}

.band__quote figcaption {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.band__quote figcaption a { color: inherit; }
.band__quote figcaption a:hover { color: var(--c-accent); }

/* Tre colonne fisse: con auto-fit i sei componenti vanno 5+1. Il tetto di
   larghezza evita schede da 384px, quanto una copertina. */
.members,
.members__title {
  max-width: 58rem;
  margin-inline: auto;
}

.members {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

/* Allineata al bordo sinistro della griglia, non al centro della sezione. */
.members__title { margin-bottom: var(--s-5); }

.member { position: relative; }

.member__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-elev);
}

.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.member:hover .member__photo img,
.member:focus-within .member__photo img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.04);
}

.member__name {
  margin-top: var(--s-3);
  font-size: var(--t-md);
}

.member__instruments {
  margin-top: var(--s-1);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--c-ink-dim);
}

/* In colonna la riga d'accento passa da sinistra a sopra. */
@media (max-width: 860px) {
  .band__intro { grid-template-columns: 1fr; }
  .band__quote {
    border-inline-start: 0;
    border-block-start: 2px solid var(--c-accent);
    padding-inline-start: 0;
    padding-block-start: var(--s-4);
  }
}

/* Tre schede sotto i 560px starebbero in 100px l'una: si passa a due. */
@media (max-width: 560px) {
  .members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -----------------------------------------------------------
   FESTIVAL
   ----------------------------------------------------------- */
.festivals {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  row-gap: var(--s-3);
}

/* L'etichetta non si stringe: se lo spazio finisce va a capo l'elenco. */
.festivals__label { flex: none; }

.festivals__list {
  --sep: clamp(0.6rem, 2vw, 1.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sep);
  row-gap: var(--s-2);
  font-family: var(--f-display);
  font-size: var(--t-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.festivals__item { display: flex; align-items: center; }

/* Separatore disegnato e non scritto: un "·" nel contenuto generato entra
   nell'albero di accessibilità e viene letto fra un nome e l'altro. Il
   margine pareggia il column-gap, o il quadratino resterebbe attaccato al
   nome che precede.

   In coda e non in testa: andando a capo resta appeso alla riga di sopra,
   mentre in testa aprirebbe la riga nuova e la farebbe leggere come un elenco
   puntato. */
.festivals__item:not(:last-child)::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-inline-start: var(--sep);
  background: var(--c-accent);
}

/* Sei nomi lunghi su schermo stretto occupano quattro righe: un corpo più
   piccolo ne fa risparmiare una, e la fascia resta una fascia. */
@media (max-width: 560px) {
  .festivals__list { font-size: var(--t-sm); }
}

/* -----------------------------------------------------------
   GALLERY
   ----------------------------------------------------------- */
.showreel {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-elev);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.showreel img,
.showreel iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

.showreel__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: var(--s-4);
  background: rgb(var(--c-shade-rgb) / 0.35);
  transition: background var(--dur) var(--ease);
}
.showreel__play:hover { background: rgb(var(--c-shade-rgb) / 0.15); }

.showreel__play .disc {
  width: clamp(4rem, 8vw, 6.5rem);
  height: clamp(4rem, 8vw, 6.5rem);
  display: grid;
  place-items: center;
  border: 2px solid var(--c-ink);
  border-radius: 50%;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.showreel__play:hover .disc {
  background: var(--c-accent);
  border-color: var(--c-accent);
  transform: scale(1.06);
}

.showreel__label {
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  font-family: var(--f-display);
  font-size: var(--t-md);
  text-transform: uppercase;
}

/* Griglia foto a colonne: effetto masonry senza JS */
.gallery__title { margin-bottom: var(--s-5); }

.gallery__grid {
  columns: 3;
  column-gap: clamp(0.6rem, 1.2vw, 1.2rem);
}
@media (max-width: 1024px) { .gallery__grid { columns: 2; } }
@media (max-width: 560px) { .gallery__grid { columns: 1; } }
@media (min-width: 2200px) { .gallery__grid { columns: 4; } }

.gallery__item {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: clamp(0.6rem, 1.2vw, 1.2rem);
  position: relative;
  overflow: hidden;
  background: var(--c-bg-elev);
  cursor: zoom-in;
}

.gallery__item img {
  width: 100%;
  height: auto;
  filter: grayscale(0.35);
  transition: filter var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
.gallery__item:hover img { filter: none; transform: scale(1.03); }

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.gallery__item:hover::after { border-color: var(--c-accent); }

/* -----------------------------------------------------------
   CONTATTI + FOOTER
   ----------------------------------------------------------- */
/* Il bordo inferiore della fascia è il bordo superiore di .socials: non se ne
   aggiunge un secondo. */
.contacts__title { margin-bottom: var(--s-5); }

/* 13rem e non di più: con 14rem fra 721 e 735 px la griglia scende a due
   colonne e il terzo contatto va a capo da solo, filetto verticale compreso. */
.contacts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  border-top: 1px solid var(--c-line);
}

.contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1rem, 2vw, 2rem);
  transition: background var(--dur) var(--ease);
}
.contact:hover { background: var(--c-wash); }

/* Padding orizzontale uguale su tutte le colonne, esterne comprese, altrimenti
   i filetti risultano asimmetrici. I bordi restano larghi quanto il
   contenitore, allineati alla fascia dei social. */
.contact + .contact { border-inline-start: 1px solid var(--c-line); }

/* Fuori dal maiuscolo di h1-h4: qui dentro c'è anche un indirizzo email. */
.contact__name {
  font-family: var(--f-body);
  font-size: calc(var(--t-md) * 1.12);
  font-weight: 600;
  letter-spacing: normal;
  line-height: var(--lh-snug);
  text-transform: none;
  overflow-wrap: anywhere;
}

/* Niente margin-top: auto qui: le schede sono alte quanto la più alta della
   riga, e il bottone si staccherebbe dal testo che lo riguarda. */
.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-top: var(--s-2);
}

/* Un gradino più grandi dei .btn--sm standard. */
.contact__links .btn {
  padding: 0.55em 1.05em;
  font-size: var(--t-sm);
}
.contact__links .btn i { font-size: 1.05em; }
.btn--whatsapp:hover { --btn-bg: var(--c-whatsapp); --btn-bd: var(--c-whatsapp); --btn-fg: #06210f; }
.btn--mail:hover { --btn-bg: var(--c-mail); --btn-bd: var(--c-mail); --btn-fg: var(--c-bg); }

/* La colonna singola va imposta: l'auto-fit ne terrebbe due fin sotto i 500 px
   e i filetti orizzontali qui sotto, scritti per una colonna sola, uscirebbero
   larghi mezza fascia. Senza filetti verticali il padding laterale non separa
   più nulla e sparisce. */
@media (max-width: 720px) {
  .contacts__list { grid-template-columns: 1fr; }
  .contact { padding-inline: 0; }
  .contact + .contact {
    border-inline-start: 0;
    border-block-start: 1px solid var(--c-line);
  }
}

/* Porta lei il bordo superiore: chiude la fascia dei contatti al posto di
   .socials, che la segue. */
.contacts__epk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3) var(--s-5);
  padding-block: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--c-line);
  text-align: center;
}

.contacts__epk-title {
  font-size: var(--t-md);
  font-weight: 600;
}

.contacts__epk-desc {
  font-size: var(--t-sm);
  color: var(--c-ink-dim);
}

/* Va tenuto dopo la regola base qui sopra: stessa specificità, vince
   l'ultimo. Insieme agli altri blocchi a 720 px verrebbe sovrascritto. */
@media (max-width: 720px) {
  .contacts__epk {
    justify-content: flex-start;
    text-align: start;
  }
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-block: 1px solid var(--c-line);
}

.social {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
}
.social i { font-size: 1.35em; transition: transform var(--dur-fast) var(--ease); }
.social:hover { color: var(--brand, var(--c-ink)); }
.social:hover i { transform: translateY(-2px); }

.social--facebook { --brand: var(--c-facebook); }
.social--instagram { --brand: var(--c-instagram); }
.social--spotify { --brand: var(--c-spotify); }
.social--apple { --brand: var(--c-apple); }
.social--amazon { --brand: var(--c-amazon); }
.social--youtube { --brand: var(--c-youtube); }

/* Sei voci in fila chiedono ~780px: sotto i 900 vanno a capo 5+1. Griglia a
   colonne pari, tre e poi due. Il blocco a 560 px va tenuto dopo questo:
   stessa specificità, vince l'ultimo. */
@media (max-width: 900px) {
  .socials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3) var(--s-4);
    justify-items: start;
  }
}

@media (max-width: 560px) {
  .socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.site-footer {
  position: relative;
  z-index: 2;
  background: var(--c-bg-deep);
  padding-block: var(--s-6);
  font-size: var(--t-xs);
  color: var(--c-ink-faint);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  align-items: center;
}

/* Riga intera: copyright e ritorno in cima vanno a capo sotto, insieme.
   Vuoto va nascosto, o il row-gap lascerebbe una riga fantasma. Lo stacco
   in più è un margine e non il row-gap, che separerebbe anche copyright e
   ritorno in cima quando vanno a capo fra loro. */
.credits {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  gap: var(--s-2) var(--s-6);
  margin-block-end: var(--s-3);
}
.credits:empty { display: none; }
.credits b { color: var(--c-ink-dim); font-weight: 600; }

/* Il ruolo e i nomi che gli appartengono stanno su una riga sola finché ci
   stanno: --sep è l'unica misura che separa un nome dall'altro, e vale anche
   fra i due punti e il primo nome. */
.credits__group {
  --sep: var(--s-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sep);
  row-gap: var(--s-1);
}
.credits__role { flex: none; }

.credits__name { display: flex; align-items: center; }

/* Come nella fascia dei festival: separatore disegnato e non scritto, che così
   non entra nell'albero di accessibilità e non si può confondere con la
   punteggiatura del nome. In coda e non in testa, o andando a capo aprirebbe
   la riga nuova come un elenco puntato. Il margine pareggia il column-gap. */
.credits__name:not(:last-child)::after {
  content: "";
  flex: none;
  width: 3px;
  height: 3px;
  margin-inline-start: var(--sep);
  background: var(--c-ink-faint);
}

/* inline-flex allinea l'icona alla riga di testo invece che alla base del
   carattere; em e non rem perché deve seguire il corpo del credito.

   Il glifo misura 10 px: il padding porta il bersaglio a 24, il minimo
   tollerabile al tocco. I margini negativi lo riassorbono, o l'icona
   allargherebbe il credito di 14 px per parte e lo alzerebbe di altrettanti:
   resta attaccata al nome cui si riferisce e lontana dal separatore. */
.credits__link {
  display: inline-flex;
  padding: 0.45rem;
  margin-inline-start: calc(var(--s-1) - 0.45rem);
  margin-inline-end: -0.45rem;
  margin-block: -0.45rem;
  font-size: 0.85em;
  color: var(--c-ink-faint);
  transition: color var(--dur-fast) var(--ease);
}
.credits__link:hover { color: var(--c-accent); }

/* Il margine automatico si prende tutto lo spazio libero della riga e tiene
   il ritorno in cima a destra a qualsiasi larghezza, anche quando non sta
   accanto al copyright e va a capo da solo. */
.to-top {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: auto;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.to-top:hover { color: var(--c-accent); }

@media (max-width: 860px) {
  .site-footer__inner { gap: var(--s-4); }
}

/* -----------------------------------------------------------
   LIGHTBOX
   ----------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: none;
  place-items: center;
  background: rgb(var(--c-shade-rgb) / 0.96);
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: grid; }

.lightbox__img {
  max-width: min(100%, 1600px);
  max-height: 82svh;
  width: auto;
  object-fit: contain;
}

.lightbox__caption {
  margin-top: var(--s-4);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--c-ink-dim);
  font-style: italic;
}

.lightbox__btn {
  position: absolute;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  color: var(--c-ink-dim);
  border: 1px solid var(--c-line);
  background: rgb(var(--c-shade-rgb) / 0.6);
  font-size: 1.1rem;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lightbox__btn:hover { color: var(--c-ink); border-color: var(--c-ink); }
.lightbox__btn--close { top: var(--s-5); right: var(--s-5); }
.lightbox__btn--prev { left: var(--s-4); top: 50%; translate: 0 -50%; }
.lightbox__btn--next { right: var(--s-4); top: 50%; translate: 0 -50%; }

.lightbox__counter {
  position: absolute;
  bottom: var(--s-5);
  left: 50%;
  translate: -50% 0;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--c-ink-faint);
}

/* -----------------------------------------------------------
   STAMPA — l'EPK finisce spesso stampato o in PDF
   ----------------------------------------------------------- */
@media print {
  .nav, .hero__scroll, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
}