/* =========================================================
   NUGARA — design tokens
   Palette pulled from the band's own press kit mood board
   (deep space black + burnt vermilion), not reproduced imagery.
   ========================================================= */

/* ---------- font, tutti serviti dal sito stesso ----------
   Prima c'era un @import da Google Fonts: il browser doveva scaricare
   questo foglio, leggerlo, scaricare il CSS di Google e solo allora i
   font — tre viaggi in fila, con il cambio di carattere a pagina già
   visibile. Ora i file stanno in assets/fonts/ e vengono precaricati
   dall'HTML.
   Inter e Fredoka sono font variabili: un solo file copre tutti i pesi
   (per questo font-weight indica un intervallo, non un valore).
   I blocchi "latin-ext" servono solo per caratteri fuori dall'alfabeto
   di base: grazie a unicode-range il browser li scarica soltanto se in
   pagina compaiono davvero. */
@font-face{
  font-family: 'Inter';
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  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, U+FFFD;
}
@font-face{
  font-family: 'Inter';
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  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, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Fredoka';
  src: url('assets/fonts/fredoka-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, U+FFFD;
}
@font-face{
  font-family: 'Fredoka';
  src: url('assets/fonts/fredoka-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, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Caxo — font display della band, già presente in locale. */
@font-face{
  font-family: 'Caxo';
  src: url('assets/fonts/Caxo.woff2') format('woff2'),
       url('assets/fonts/Caxo.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #0a0908;
  --bg-elevated: #131210;
  --bg-elevated-2: #1b1917;
  --ink: #f4f1ea;
  --ink-muted: #a39c92;
  --ink-faint: #6e6862;
  --line: rgba(244,241,234,0.14);
  --line-strong: rgba(244,241,234,0.32);
  --accent: #d9531f;
  --accent-bright: #ff7a3d;
  --accent-dim: #5a2410;
  --accent-wash: rgba(217,83,31,0.12);

  /* secondo accento: il blu della locandina del Summer Tour.
     Arancio = presente, azioni, prossime date. Blu = archivio,
     passato, Point Of Convergency. */
  --accent-2: #2f6bff;
  --accent-2-bright: #5c8dff;
  --accent-2-dim: #14224f;
  --accent-2-wash: rgba(47,107,255,0.12);

  /* il filo: la riga sottile che apre ogni sezione */
  --hairline: rgba(244,241,234,0.30);

  --font-display: 'Caxo', 'Michroma', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Fredoka', 'JetBrains Mono', 'SF Mono', monospace;

  --max-w: 1180px;
  --gutter: clamp(24px, 5vw, 64px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

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

.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- eyebrow / mono labels ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content: "";
  width: 20px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

/* ---------- headings ---------- */
h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0;
}
h1{ font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: 0.01em; }
h2{ font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
h3{ font-size: clamp(1.05rem, 2vw, 1.3rem); }

p{ margin: 0 0 1em; color: var(--ink-muted); }
p:last-child{ margin-bottom: 0; }
strong{ color: var(--ink); font-weight: 600; }

/* ---------- nav ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,9,8,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  max-width: none;
  padding-left: clamp(24px, 4vw, 56px);
  padding-right: clamp(24px, 4vw, 56px);
}
.logo{
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--line-strong);
  padding: 6px 12px;
  line-height: 1;
}
.logo span{ color: var(--accent-bright); }

.credit-link{
  display: inline-block;
  border: 1px solid var(--line-strong);
  padding: 4px 10px;
  margin-left: 4px;
  color: var(--accent-bright);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.credit-link:hover{
  transform: scale(1.06);
  border-color: var(--accent-bright);
  color: var(--ink);
}

.nav-toggle{
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  width: 42px;
  height: 42px;
  font-family: var(--font-mono);
  cursor: pointer;
}
/* icona a forma di casa (inserita da nav.js); a pannello aperto
   diventa arancione, così si capisce che ripremendo si richiude */
.nav-toggle-icon{
  width: 22px;
  height: 22px;
  display: block;
  transition: transform .25s ease, color .2s ease;
}
.nav-toggle.is-open{ border-color: var(--accent-bright); color: var(--accent-bright); }
.nav-toggle.is-open .nav-toggle-icon{ transform: scale(0.92); }

.nav-group{
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 30px);
  /* social e selettore lingua allineati al margine destro della pagina */
  margin-right: 0;
}

.lang-switch{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  border: 1px solid var(--line-strong);
  padding: 6px 12px;
  transition: all .2s ease;
}
.lang-switch:hover{ color: var(--accent-bright); border-color: var(--accent-bright); }

/* icone social nell'header, tra il menu e il selettore lingua */
.header-social{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: clamp(16px, 2.5vw, 36px);
}
.header-social a{
  display: flex;
  color: var(--ink-muted);
  transition: color .2s ease;
}
.header-social svg{ width: 18px; height: 18px; }
.header-social a:hover{ color: var(--accent-bright); }
@media (max-width: 900px){
  .header-social{ display: none; }
}

nav.main-nav ul{
  list-style: none;
  display: flex;
  gap: clamp(18px, 2.5vw, 36px);
  margin: 0;
  padding: 0;
}
nav.main-nav a{
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color .2s ease;
}
nav.main-nav a:hover{ color: var(--ink); }
nav.main-nav a.active{ color: var(--accent-bright); }
nav.main-nav a.active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -14px;
  height: 2px;
  background: var(--accent-bright);
}

/* ---------- pannello di navigazione (sotto 1180px) ----------
   Il gruppo che sul desktop sta in riga nell'header (voci + social +
   lingua) diventa qui un pannello a tutta altezza che entra da destra.
   Rispetto al vecchio menu a tendina non c'è più un'altezza massima
   fissa da indovinare: il pannello occupa lo schermo e scorre da solo
   se le voci non ci stanno, e i social tornano raggiungibili. */
@media (max-width: 1180px){
  /* Il blur dell'header creerebbe un blocco contenitore per i figli in
     position:fixed: il pannello si dimensionerebbe sull'header (84px)
     invece che sullo schermo. Qui lo togliamo e compensiamo con uno
     sfondo pieno, che su telefono resta comunque leggibile. */
  .site-header{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
  }
  /* L'header è sticky con z-index 50: crea un contesto di
     impilamento, quindi il pannello (figlio) resterebbe sotto al velo
     nonostante lo z-index più alto, e il velo intercetterebbe i tocchi
     sulle voci. Con il pannello aperto alziamo tutto l'header. */
  body.nav-open .site-header{ z-index: 320; }

  .nav-toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    position: relative;
    z-index: 320;
  }

  .nav-group{
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 310;
    width: min(84vw, 340px);
    background: var(--bg);
    border-left: 1px solid var(--line-strong);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 92px var(--gutter) 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .3s ease;
    /* da chiuso il pannello resta fuori schermo e inerte: i tocchi non
       lo raggiungono e nav.js lo toglie anche dal giro delle tabulazioni
       con l'attributo inert. Evitiamo visibility, che essendo ereditata
       si presta a errori di ricalcolo sui figli. */
    pointer-events: none;
  }
  .nav-group.open{
    transform: translateX(0);
    pointer-events: auto;
  }

  /* velo scuro sul resto della pagina: creato da nav.js */
  .nav-backdrop{
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(10,9,8,0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .nav-backdrop.open{
    opacity: 1;
    pointer-events: auto;
  }

  nav.main-nav ul{
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  nav.main-nav a{
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 6px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }
  nav.main-nav a.active::after{ content: none; }
  /* l'ultima voce non porta la riga: sotto c'e' gia' quella dei social */
  nav.main-nav li:last-child a{ border-bottom: none; }

  /* social e lingua: nascosti nell'header, tornano dentro il pannello */
  .header-social{
    display: flex;
    justify-content: flex-start;
    gap: 26px;
    margin: 30px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--line);
  }
  .header-social a{ padding: 8px; margin: -8px; }
  .header-social svg{ width: 22px; height: 22px; }

  .lang-switch{
    margin: 26px 0 0 !important;
    align-self: flex-start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
  }

  /* con il pannello aperto la pagina sotto non deve scorrere */
  body.nav-open{ overflow: hidden; }
}

/* ---------- buttons ---------- */
.btn{
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn:hover{ border-color: var(--accent-bright); color: var(--accent-bright); }
.btn-solid{
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0908;
  font-weight: 600;
}
.btn-solid:hover{ background: var(--accent-bright); border-color: var(--accent-bright); color: #0a0908; }

/* I due pulsanti dell'hero stanno sopra una fotografia: da trasparenti
   con bordo sottile si leggevano poco. Il primo (le date) è pieno e fa
   da azione principale, il secondo è scuro e compatto ma ben staccato
   dallo sfondo. */
.btn-chip{
  font-weight: 600;
  padding: 16px 30px;
  background: rgba(10,9,8,0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-color: rgba(244,241,234,0.7);
  color: var(--ink);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-chip:hover{
  transform: translateY(-2px);
  border-color: var(--ink);
  background: rgba(10,9,8,0.8);
}
/* azione principale: pieno color accento */
.btn-row .btn-chip:first-child{
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: #0a0908;
  box-shadow: 0 6px 26px rgba(217,83,31,0.45);
}
.btn-row .btn-chip:first-child:hover{
  background: var(--ink);
  border-color: var(--ink);
  color: #0a0908;
}
.btn-row{ display: flex; flex-wrap: wrap; gap: 14px; }
.btn svg{ width: 13px; height: 13px; }

/* ---------- hairline divider ---------- */
.hr{ height: 1px; background: var(--line); border: 0; margin: 0; }
.section{ padding: clamp(56px, 9vw, 120px) 0; position: relative; }
.section + .section{ border-top: 1px solid var(--line); }
.section-head{ margin-bottom: clamp(28px, 5vw, 52px); }
.section-head .eyebrow{ margin-bottom: 14px; }

/* ---------- hero ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 13vw, 150px) 0 clamp(60px, 10vw, 100px);
  border-bottom: 1px solid var(--line);
}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 82% 8%, var(--accent-wash), transparent 60%),
    linear-gradient(180deg, transparent 60%, var(--bg) 100%);
  pointer-events: none;
}
.hero-inner{ position: relative; max-width: 760px; }
.hero-tag{ margin: 22px 0 30px; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink-muted); max-width: 46ch; }
.hero h1{ margin-top: 18px; }
.hero .kicker{ display:block; font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; color: var(--accent-bright); margin-bottom: 6px; }

/* ---------- hero with full-bleed photo (Home) ---------- */
.hero-photo{
  padding: 0;
  border-bottom: 1px solid var(--line);
  min-height: min(92vh, 900px);
  display: flex;
  align-items: flex-end;
}
.hero-photo::before{ content: none; }
.hero-bg{ position: absolute; inset: 0; z-index: 0; overflow: hidden; transform-origin: center 38%; }
.hero-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transform-origin: center 38%; filter: grayscale(0.15) contrast(1.05); }
.hero-scrim{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,9,8,0) 0%, rgba(10,9,8,0) 48%, rgba(10,9,8,0.94) 100%);
}
.hero-photo .hero-inner{ position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding-bottom: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-title-block{ display: inline-flex; flex-direction: column; align-items: center; }
.hero-photo .hero-title-block .hero-tag{ text-align: center; }
.brand-name{
  display: inline-block;
  border: 1px solid var(--line-strong);
  padding: 0.15em 0.4em 0.22em;
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  letter-spacing: 0.02em;
  line-height: 1;
  background: rgba(10,9,8,0.35);
}
.hero-photo .kicker{ margin-top: 26px; }
.hero-photo .hero-tag{
  margin-top: 10px;
  color: var(--ink);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
@media (max-width: 600px){
  .hero-photo{ align-items: flex-end; }
  .brand-name{ font-size: clamp(2.6rem, 15vw, 4rem); }
}

/* ---------- page hero with photo (Chi Siamo, Musica, Live, Contatti) ---------- */
/* Foto come background cover (mai distorta), titolo IN ALTO A SINISTRA.
   Su Chi Siamo il testo va IN BASSO su pannello semitrasparente, così non
   copre i volti nella parte centrale della foto. */
.page-hero{
  position: relative;
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.page-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(10,9,8,0.48) 0%,
    rgba(10,9,8,0.16) 22%,
    rgba(10,9,8,0.10) 52%,
    rgba(10,9,8,0.32) 100%
  );
}
.page-hero > .wrap{ position: relative; z-index: 1; width: 100%; }
/* titolo in alto a sinistra, stessa altezza su tutte le pagine */
.page-hero .hero-head{
  padding-top: clamp(44px, 6vw, 76px);
  padding-bottom: clamp(40px, 8vw, 90px);
  text-align: left;
}
.page-hero .hero-head h1{
  margin: 0;
  text-shadow: 0 2px 28px rgba(0,0,0,0.7);
}
.page-hero .hero-head .hero-tag{
  margin-bottom: 0;
  text-shadow: 0 1px 14px rgba(0,0,0,0.8);
}

/* Variante Chi Siamo: banner alto, testo ancorato in basso su pannello scuro */
.page-hero--about{
  min-height: clamp(560px, 84vh, 880px);
  background-position: center 22%;
  border-bottom: none;   /* il pannello sfuma su nero pieno: nessuna linea di giunzione */
}
/* Su desktop l'hero adotta le proporzioni esatte della foto (3:2):
   la foto si vede TUTTA (nessun taglio sopra o sotto) e il testo,
   ancorato in fondo, cade più in basso, lontano dai volti. */
@media (min-width: 801px){
  .page-hero--about{
    aspect-ratio: 3 / 2;
    background-position: center top;
  }
}
.page-hero--about .hero-head{ padding-bottom: 0; }
.page-hero--about .hero-body{
  margin-top: auto;               /* spinge il testo in fondo alla foto */
  position: relative;
  z-index: 1;
  padding-top: clamp(36px, 5vw, 60px);
  padding-bottom: clamp(36px, 5vw, 60px);
}
/* pannello semitrasparente: sfuma dolcemente in alto (nessuna linea visibile)
   e chiude su nero pieno in basso, fondendosi con la sezione successiva */
.page-hero--about .hero-body::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(10,9,8,0) 0%,
    rgba(10,9,8,0.30) 12%,
    rgba(10,9,8,0.62) 30%,
    rgba(10,9,8,0.78) 60%,
    rgba(10,9,8,1) 100%);
}
/* Chi Siamo: stessa dimensione, stesso interlinea e stessa distanza fra
   i paragrafi in entrambe le colonne (prima alcuni <p> avevano stili
   inline diversi dagli altri) */
.page-hero--about .hero-body p{
  color: var(--ink);
  font-size: 1.08em;
  line-height: 1.65;
  margin: 0 0 1em;
}
.page-hero--about .hero-body > div > p:first-child{ margin-top: 18px; }
.page-hero--about .hero-body p:last-child{ margin-bottom: 0; }
.page-hero--about .hero-body .meta,
.page-hero--about .hero-body .role{ color: var(--ink-muted); }

/* Mobile: il testo in colonna coprirebbe i volti, quindi la foto (con il
   titolo in alto a sinistra) sta sopra e il testo scorre sotto, su fondo pieno */
@media (max-width: 800px){
  .page-hero--about{
    min-height: 0;
    background-image: none !important;
  }
  .page-hero--about::before{ content: none; }
  .page-hero--about .hero-head{
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center 20%;
    min-height: 104vw;                /* mostra la parte alta della foto: volti visibili */
    display: flex;
    flex-direction: column;
    padding-top: clamp(28px, 7vw, 44px);
    position: relative;
  }
  .page-hero--about .hero-head::before{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.05) 30%, rgba(10,9,8,0) 60%, rgba(10,9,8,0.55) 100%);
    pointer-events: none;
  }
  .page-hero--about .hero-head h1{ position: relative; }
  .page-hero--about .hero-body{ margin-top: 0; }
  .page-hero--about .hero-body::before{ background: var(--bg); }
}

/* ---------- member bio: testo + slot foto a destra ---------- */
.member-bio{
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 32px;
  align-items: start;
}
.member-photo{
  border: 1px solid var(--line);
  overflow: hidden;
}
.member-photo img{
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
@media (max-width: 700px){
  .member-bio{ grid-template-columns: 1fr; }
  .member-photo{ max-width: 300px; }
}

/* ---------- photo strip ---------- */
.photo-strip{ border-bottom: 1px solid var(--line); }
.photo-strip img{ width: 100%; filter: grayscale(0.15) contrast(1.05); }

/* ---------- quote ---------- */
.quote-block{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(40px, 7vw, 70px) 0;
}
.quote-block blockquote{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  text-transform: none;
  line-height: 1.55;
  letter-spacing: 0.005em;
  max-width: 880px;
}
.quote-block cite{
  display: block;
  margin-top: 22px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ---------- rassegna stampa: quote in evidenza + griglia ---------- */
.press-featured{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
.press-featured .quote-block{
  border: 1px solid var(--line);
  padding: clamp(24px, 2.6vw, 32px);
}
.press-featured .quote-block blockquote{
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: none;
}
.press-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.press-grid[hidden]{ display: none; }
.press-card{
  border: 1px solid var(--line);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.press-card .press-quote{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink);
  flex: 1;
}
.press-card .press-quote::before{
  content: "\201C";
  color: var(--accent-bright);
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.32em;
  margin-right: 2px;
}

/* attribuzione recensione: nome ben leggibile + testata in evidenza */
.quote-block cite,
.press-card cite{
  display: block;
  margin-top: 18px;
  font-style: normal;
}
.cite-name{
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.cite-pub{
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.press-card .cite-pub{ color: var(--accent-bright); }

.press-toggle{ cursor: pointer; }

@media (max-width: 900px){
  .press-featured{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .press-featured{ grid-template-columns: 1fr; }
}

/* ---------- grid / cards ---------- */
.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); }
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-3 > *{ background: var(--bg); padding: 28px; }
@media (max-width: 820px){
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
}

.card{ border: 1px solid var(--line); padding: 30px; }

/* dash list — reused from the band's own tour-poster device */
.dash-list{ list-style: none; margin: 0; padding: 0; }
.dash-list li{
  position: relative;
  padding: 18px 0 18px 26px;
  border-bottom: 1px solid var(--line);
}
.dash-list li:first-child{ border-top: 1px solid var(--line); }
.dash-list li::before{
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.dash-list .label{ font-weight: 600; color: var(--ink); }
.dash-list .meta{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); letter-spacing: .04em; }

/* ---------- album cards (discografia) ---------- */
.album-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 720px){ .album-grid{ grid-template-columns: 1fr; } }
.album-card{
  display:block;
  border: 1px solid var(--line);
  transition: border-color .2s ease;
}
.album-card:hover{ border-color: var(--line-strong); }
.album-card .cover{ aspect-ratio: 1/1; overflow:hidden; border-bottom:1px solid var(--line); }
.album-card .cover img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.album-card:hover .cover img{ transform: scale(1.03); }
/* tutta la scheda porta alla pagina del disco (vedi nav.js): il cursore
   lo segnala anche sulla fascia scura sotto la copertina */
.album-card.scheda-cliccabile{ cursor: pointer; }
.album-card.scheda-cliccabile .meta-block h3{ transition: color .2s ease; }
.album-card.scheda-cliccabile:hover .meta-block h3{ color: var(--accent-bright); }
/* il testo resta selezionabile e i comandi mantengono il loro cursore */
.album-card.scheda-cliccabile a,
.album-card.scheda-cliccabile button{ cursor: pointer; }
.album-card.scheda-cliccabile .meta-block p{ cursor: text; }

.album-card .meta-block{ padding: 22px 24px 26px; }
.album-card .meta-block h3{ margin-top:8px; font-size: 1.3rem; }
.album-card .meta-block p{ margin-top:10px; }
.album-card .go{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family: var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--accent-bright); }
.album-card .go::after{ content:"→"; transition: transform .2s ease; }
.album-card:hover .go::after{ transform: translateX(4px); }
.album-card .go.go-ext::after{ content: none; }

/* ---------- album detail page ---------- */
.album-hero{ display:grid; grid-template-columns: minmax(240px, 420px) 1fr; gap: clamp(28px,5vw,64px); align-items:start; }
.album-hero .cover{ border:1px solid var(--line-strong); aspect-ratio:1/1; overflow:hidden; }
.album-hero .cover img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 780px){ .album-hero{ grid-template-columns: 1fr; } .album-hero .cover{ max-width: 420px; } }

/* ---------- copertina/retro: click o scorrimento per vedere il retro ---------- */
.cover-flip{ position: relative; cursor: pointer; }
.cover-track{
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cover-track::-webkit-scrollbar{ display: none; }
.cover-slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-slide img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* la retro non è quadrata come la fronte: la mostriamo intera, senza tagliarla */
.cover-slide.is-back img{ object-fit: contain; }
.cover-hint{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: rgba(10,9,8,0.72);
  border: 1px solid rgba(244,241,234,0.3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  pointer-events: none;
  transition: opacity .2s ease;
}
.cover-dots{
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.cover-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(244,241,234,0.35);
  transition: background .2s ease, transform .2s ease;
}
.cover-dot.is-active{ background: var(--accent-bright); transform: scale(1.2); }

/* ---------- members ---------- */
.member{ border-bottom: 1px solid var(--line); }
.member:first-of-type{ border-top: 1px solid var(--line); }
.member summary{
  padding: 26px 0;
  display: grid;
  grid-template-columns: 90px 1fr 32px;
  gap: 24px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.member summary::-webkit-details-marker{ display: none; }
.member .idx{ font-family: var(--font-mono); color: var(--accent); font-size: 13px; }
.member h3{ margin-bottom: 4px; }
.member .role{ font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.member-toggle{
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--ink-faint);
  text-align: right;
  transition: transform .2s ease, color .2s ease;
}
.member[open] .member-toggle{ transform: rotate(45deg); color: var(--accent-bright); }
.member summary:hover .member-toggle{ color: var(--accent-bright); }
.member-bio{ padding: 0 0 28px 114px; }
.member-bio > div:first-child{ max-width: 60ch; }
.member-bio p{ color: var(--ink-muted); }
@media (max-width: 600px){
  .member summary{ grid-template-columns: 50px 1fr 24px; gap: 12px; }
  .member-bio{ padding-left: 0; }
}

/* ---------- dates poster (photo background + overlaid date list) ---------- */
.dates-poster{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 620px;
  display: flex;
  align-items: center;
}
.dates-poster-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% center;
}
.dates-poster-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,9,8,0.96) 0%, rgba(10,9,8,0.88) 28%, rgba(10,9,8,0.4) 52%, rgba(10,9,8,0.05) 68%);
}
.poster-dates{
  position: relative; z-index: 2;
  list-style: none;
  margin: 0;
  padding: clamp(32px, 6vw, 56px) clamp(24px, 5vw, 64px);
  max-width: 620px;
  width: 100%;
}
.poster-dates li{
  position: relative;
  padding: 14px 0 14px 24px;
  border-bottom: 1px solid rgba(244,241,234,0.16);
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.poster-dates li:first-child{ border-top: 1px solid rgba(244,241,234,0.16); }
.poster-dates li::before{
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-bright);
}
.pd-date{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-bright);
  white-space: nowrap;
  min-width: 72px;
}
.pd-year{ display: block; color: rgba(244,241,234,0.5); font-size: 10.5px; margin-top: 2px; }
.pd-info{ flex: 1; min-width: 0; }
.pd-city{ display: block; font-weight: 600; color: #f4f1ea; }
.pd-venue{ display: block; font-family: var(--font-mono); font-size: 11.5px; color: rgba(244,241,234,0.65); margin-top: 2px; }
.pd-link{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.65);
  border: 1px solid rgba(244,241,234,0.28);
  padding: 6px 12px;
  white-space: nowrap;
  transition: all .2s ease;
}
.pd-link:hover{ color: #0a0908; background: var(--accent-bright); border-color: var(--accent-bright); }
@media (max-width: 780px){
  .dates-poster{ min-height: 0; }
  .dates-poster-scrim{ background: rgba(10,9,8,0.9); }
  .poster-dates{ max-width: none; }
  .pd-link{ display: none; }
}

/* ---------- video grid (YouTube previews) ---------- */
.video-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
@media (max-width: 720px){ .video-grid{ grid-template-columns: 1fr; } }
.video-card{ display: block; border: 1px solid var(--line); transition: border-color .2s ease; }
.video-card:hover{ border-color: var(--line-strong); }
.video-thumb{
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(150deg, var(--bg-elevated-2), var(--bg));
  border-bottom: 1px solid var(--line);
}
.video-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.video-card:hover .video-thumb img{ transform: scale(1.04); }
.video-thumb-photo{ transition: transform .4s ease; }
.video-card:hover .video-thumb-photo{ transform: scale(1.04); }
.play-btn{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
  box-shadow: 0 4px 24px rgba(217,83,31,0.35);
}
.play-btn svg{ width: 20px; height: 20px; fill: #0a0908; margin-left: 3px; }
.video-card:hover .play-btn{ background: var(--accent-bright); border-color: var(--accent-bright); transform: translate(-50%, -50%) scale(1.08); }
.video-meta{ padding: 18px 20px 22px; }
.video-meta h3{ font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; text-transform: none; letter-spacing: 0; margin-bottom: 6px; }

/* ---------- footer ---------- */
footer{ border-top: 1px solid var(--line); padding: clamp(40px,7vw,64px) 0 34px; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-grid h3{ font-size: .8rem; letter-spacing: .14em; color: var(--ink-faint); margin-bottom: 16px; }
.footer-grid a, .footer-grid p{ font-size: 14px; }
.footer-links a{ display: block; padding: 6px 0; color: var(--ink-muted); }
.footer-links a:hover{ color: var(--accent-bright); }
.footer-bottom{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-faint); text-transform: uppercase; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ---------- album player in sovraimpressione sulla copertina (Musica) ---------- */
.album-card .cover.ap-cover{ position: relative; }
.ap-cover-link-full{
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ap-overlay{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  padding: 14px 16px 22px;
  background: linear-gradient(180deg, rgba(10,9,8,0.94) 0%, rgba(10,9,8,0.72) 55%, rgba(10,9,8,0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.album-card:hover .ap-overlay,
.album-card:focus-within .ap-overlay{
  opacity: 1;
  pointer-events: auto;
}
.ap-discover{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.9);
  border: 1px solid rgba(244,241,234,0.45);
  padding: 10px 20px;
  background: rgba(10,9,8,0.25);
  opacity: 0;
  transition: opacity .2s ease;
}
.album-card:hover .ap-discover,
.album-card:focus-within .ap-discover{ opacity: 1; }
.ap-overlay .ap-now{ padding: 0; gap: 10px; }
.ap-overlay .ap-playbtn{ width: 30px; height: 30px; border-color: rgba(244,241,234,0.55); }
.ap-overlay .ap-playbtn svg{ width: 11px; height: 11px; }
.ap-overlay .ap-now-title{ font-size: 0.85rem; }
.ap-overlay .ap-now-feat{ font-size: 10px; }
.ap-overlay .ap-now-time{ font-size: 11px; }
.ap-overlay .ap-progress{ margin: 8px 0 0; background: rgba(244,241,234,0.25); }
.ap-overlay .ap-nav{ padding: 7px 0 0; justify-content: flex-end; gap: 6px; }
.ap-overlay .ap-nav button{ width: 26px; height: 26px; border-color: rgba(244,241,234,0.4); color: var(--ink); }
.ap-overlay .ap-nav button:hover{ border-color: var(--accent-bright); color: var(--accent-bright); }
.ap-overlay .ap-nav svg{ width: 11px; height: 11px; }
.album-card-links{ display: flex; align-items: center; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.album-card-links .go{ margin-top: 0; }
.meta-block h3 a{ color: inherit; }
.meta-block h3 a:hover{ color: var(--accent-bright); }

/* ---------- album player: barra "now playing" + copertina ---------- */
.album-player{
  border: 1px solid var(--line);
}
.ap-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.ap-title{ font-family: var(--font-display); font-size: 1.3rem; color: var(--accent-bright); }
.ap-by{ margin-top: 4px; font-size: 14px; color: var(--ink-muted); }
.ap-by .ap-year{ color: var(--ink-faint); }
.ap-links{ display: flex; gap: 18px; flex-shrink: 0; }
.ap-links a{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-bright);
  border-bottom: 1px solid transparent;
}
.ap-links a:hover{ border-color: var(--accent-bright); }

/* barra traccia corrente */
.ap-now{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px 12px;
}
.ap-playbtn{
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
  flex-shrink: 0;
}
.ap-playbtn svg{ width: 12px; height: 12px; fill: currentColor; margin-left: 1px; }
.ap-playbtn:hover{ border-color: var(--accent-bright); color: var(--accent-bright); }
.album-player.playing .ap-playbtn{ background: var(--accent); border-color: var(--accent); color: #0a0908; }
.ap-now-info{ flex: 1; min-width: 0; }
.ap-now-info-row{ display: flex; align-items: baseline; gap: 8px; }
.ap-now-num{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); flex-shrink: 0; }
.ap-now-title{ font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-now-feat{ display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); font-weight: 400; margin-top: 2px; }
.ap-now-time{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); white-space: nowrap; flex-shrink: 0; }
.ap-elapsed{ color: var(--accent-bright); }

.ap-progress{
  height: 4px;
  background: var(--line);
  cursor: pointer;
  margin: 0 24px;
}
.ap-progress-bar{ height: 100%; width: 0%; background: var(--accent-bright); transition: width .15s linear; }

.ap-nav{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 24px 20px;
}
.ap-nav button{
  width: 32px; height: 32px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.ap-nav button:hover{ border-color: var(--accent-bright); color: var(--accent-bright); }
.ap-nav svg{ width: 14px; height: 14px; fill: currentColor; }

/* copertina con play overlay + link alla pagina album */
.ap-cover{ position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-top: 1px solid var(--line); }
.ap-cover img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-cover-play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(244,241,234,0.6);
  background: rgba(10,9,8,0.4);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease, border-color .2s ease;
}
.ap-cover:hover .ap-cover-play{ opacity: 1; }
.ap-cover-play:hover{ background: rgba(10,9,8,0.65); border-color: var(--accent-bright); color: var(--accent-bright); }
.ap-cover-play svg{ width: 22px; height: 22px; fill: currentColor; margin-left: 2px; }
.album-player.playing .ap-cover-play{ opacity: 1; }
.ap-cover-scrim{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 10px;
  background: linear-gradient(180deg, rgba(10,9,8,0) 0%, rgba(10,9,8,0.85) 100%);
  pointer-events: none;
}
.ap-cover-link{
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  pointer-events: auto;
  border-bottom: 1px solid rgba(244,241,234,0.4);
}
.ap-cover-link:hover{ color: var(--accent-bright); border-color: var(--accent-bright); }

.album-player .placeholder-note{ margin: 0 24px 20px; }

/* ---------- player album su touch ----------
   Sul touch l'hover non esiste mai: senza queste regole i comandi
   resterebbero invisibili e non toccabili (.ap-overlay nasce con
   opacity 0 e pointer-events none) e il tap sulla copertina finirebbe
   sempre sul link a tutta area verso la pagina album.
   Qui i comandi restano sempre in vista, sopra quel link, e le aree di
   tocco salgono a 44px; la parte bassa della copertina continua a
   portare alla pagina dell'album. */
/* sui dispositivi con mouse la copertina resta come prima: i comandi
   compaiono al passaggio, senza il pulsante tondo */
@media (hover: hover){
  .ap-cover-play{ display: none; }
}

@media (hover: none){
  /* Al primo sguardo la copertina si vede per intera: c'è solo un
     pulsante tondo al centro. I comandi completi compaiono dopo il
     primo tocco (classe aggiunta da nav.js) o mentre suona — è il
     corrispettivo touch del passaggio del mouse sul computer. */
  .ap-overlay{
    opacity: 0;
    pointer-events: none;
  }
  .album-player.ap-attivo .ap-overlay,
  .album-player.playing .ap-overlay{
    opacity: 1;
    pointer-events: auto;
  }
  .ap-cover-play{
    opacity: 1;
    z-index: 3;
    width: 62px;
    height: 62px;
    background: rgba(10,9,8,0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  /* a comandi aperti il tondo sparisce: il play è già nella barra */
  .album-player.ap-attivo .ap-cover-play{
    opacity: 0;
    pointer-events: none;
  }
  /* il richiamo alla pagina dell'album scende in basso, così non
     finisce sotto il pulsante */
  .ap-discover{
    opacity: 1;
    top: auto;
    bottom: 14px;
    transform: translateX(-50%);
    font-size: 11px;
    padding: 8px 14px;
  }
  .album-player.ap-attivo .ap-discover{ opacity: 0; }
  .ap-overlay .ap-playbtn{ width: 44px; height: 44px; }
  .ap-overlay .ap-playbtn svg{ width: 15px; height: 15px; }
  .ap-overlay .ap-nav{ gap: 10px; }
  .ap-overlay .ap-nav button{ width: 44px; height: 44px; }
  .ap-overlay .ap-nav svg{ width: 15px; height: 15px; }
  /* barra di avanzamento: resta sottile ma con un'area toccabile più alta */
  .ap-overlay .ap-progress{
    height: 16px;
    padding: 6px 0;
    background-color: transparent;
    background-image: linear-gradient(var(--line), var(--line));
    background-size: 100% 4px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .ap-overlay .ap-progress-bar{ height: 4px; margin-top: 6px; }
}

/* ---------- inline album player ---------- */
.playlist{ list-style: none; margin: 0; padding: 0; }
.pl-track{
  display: grid;
  grid-template-columns: 44px 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.pl-track:first-child{ border-top: 1px solid var(--line); }
.pl-play{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
  flex-shrink: 0;
}
.pl-play svg{ width: 14px; height: 14px; fill: currentColor; margin-left: 1px; }
.pl-play:hover{ border-color: var(--accent-bright); color: var(--accent-bright); }
.pl-track.playing .pl-play{
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0908;
}
.pl-num{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.pl-track.active .pl-num{ color: var(--accent-bright); }
.pl-title{ font-weight: 600; color: var(--ink); min-width: 0; }
.pl-feat{ display: block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--ink-faint); letter-spacing: .04em; margin-top: 2px; }
.pl-time{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.pl-elapsed{ color: var(--accent-bright); }
.pl-elapsed:empty{ display: none; }
.pl-elapsed:not(:empty)::after{ content: " / "; color: var(--ink-faint); }

/* Avanzamento del brano in corso: riga a sé sotto la voce, visibile
   solo sul brano attivo. L'elemento lo crea nav.js. Il riempimento
   verticale allarga l'area toccabile senza ingrossare la riga vista,
   così si può spostare il punto di ascolto anche col dito. */
.pl-progress{
  grid-column: 1 / -1;
  position: relative;
  height: 20px;          /* zona sensibile: comoda anche col dito */
  display: none;
  cursor: pointer;
  margin-top: 2px;
  touch-action: none;    /* trascinando si sposta il brano, non la pagina */
}
.pl-track.active .pl-progress{ display: block; }

/* il binario su cui scorre l'avanzamento */
.pl-progress::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 5px;
  transform: translateY(-50%);
  background: var(--line-strong);
  border-radius: 3px;
  transition: background .2s ease;
}
.pl-progress:hover::before{ background: var(--ink-faint); }

/* la parte già ascoltata.
   Va posizionata in modo assoluto: essendo uno <span> resterebbe
   altrimenti in linea e l'altezza verrebbe ignorata, lasciando vedere
   il solo binario grigio. */
.pl-progress-bar{
  position: absolute;
  left: 0; top: 50%;
  height: 5px;
  width: 0%;
  transform: translateY(-50%);
  background: var(--accent-bright);
  border-radius: 3px;
  transition: width .12s linear;
}
/* pallino sul punto raggiunto: rende evidente che si può trascinare */
.pl-progress-bar::after{
  content: "";
  position: absolute;
  right: -6px; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-bright);
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(10,9,8,0.55);
  transition: transform .15s ease;
}
.pl-progress:hover .pl-progress-bar::after,
.pl-progress.in-uso .pl-progress-bar::after{ transform: translateY(-50%) scale(1.25); }
/* mentre si trascina l'avanzamento segue il dito senza ritardo */
.pl-progress.in-uso .pl-progress-bar{ transition: none; }
@media (max-width: 600px){
  .pl-track{ grid-template-columns: 40px 28px 1fr auto; gap: 10px; }
}

/* ---------- misc utility ---------- */
.mt-lg{ margin-top: clamp(32px,5vw,56px); }
.mt-sm{ margin-top: 14px; }
.award-group-label{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 30px;
}
.award-group-label:first-child{ margin-top: 0; }
.center{ text-align: center; }
.tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  padding: 4px 10px;
  margin: 0 8px 8px 0;
}
/* ---------- griglia foto stampa scaricabili ---------- */
.photo-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.photo-grid a{
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
}
.photo-grid img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.photo-grid a:hover img{ transform: scale(1.05); }
.photo-download{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,9,8,0);
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.photo-grid a:hover .photo-download{
  opacity: 1;
  background: rgba(10,9,8,0.4);
}
.photo-download svg{
  width: 28px;
  height: 28px;
  color: var(--ink);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

/* ---------- bottoni documento (Press Kit / Rider) ---------- */
.doc-row{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.doc-btn{
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line-strong);
  padding: 18px 20px;
  flex: 1 1 220px;
  transition: border-color .2s ease;
}
.doc-btn:hover{ border-color: var(--accent-bright); }
.doc-btn svg{
  width: 26px;
  height: 26px;
  color: var(--accent-bright);
  flex-shrink: 0;
}
.doc-btn .doc-title{
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
}
.doc-btn .doc-type{
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.placeholder-note{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  border-left: 2px solid var(--accent-dim);
  padding-left: 10px;
  margin-top: 6px;
}

.photo-credit{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  margin-top: 14px;
}

/* ---------- galleria foto dal vivo: scorrimento orizzontale + lightbox ---------- */
.live-gallery-wrap{ position: relative; }
.live-gallery-wrap::before,
.live-gallery-wrap::after{
  content: "";
  position: absolute;
  top: 0; bottom: 4px;
  width: clamp(24px, 5vw, 64px);
  z-index: 1;
  pointer-events: none;
}
.live-gallery-wrap::before{
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(10,9,8,0) 100%);
}
.live-gallery-wrap::after{
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, rgba(10,9,8,0) 100%);
}
.live-gallery{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.live-gallery::-webkit-scrollbar{ display: none; }
.lg-item{
  flex: 0 0 auto;
  width: clamp(200px, 27vw, 320px);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  overflow: hidden;
  padding: 0;
  background: none;
  cursor: pointer;
  transition: border-color .2s ease;
}
.lg-item:hover{ border-color: var(--line-strong); }
.lg-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.lg-item:hover img{ transform: scale(1.06); }
.lg-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  background: rgba(10,9,8,0.75);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all .2s ease;
}
.lg-arrow:hover{ border-color: var(--accent-bright); color: var(--accent-bright); }
.lg-arrow--left{ left: -8px; }
.lg-arrow--right{ right: -8px; }
@media (max-width: 700px){
  .lg-arrow{ display: none; }
}

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10,9,8,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox[hidden]{ display: none; }
.lightbox img{
  /* Ingrandimento moderato: mai oltre la dimensione reale del file
     (il limite in px viene impostato da nav.js sulla naturalWidth),
     così le foto a bassa risoluzione non vengono mai scalate in su. */
  width: auto;
  height: auto;
  max-width: min(100%, 1100px);
  max-height: min(100%, 78vh);
  object-fit: contain;
  border: 1px solid var(--line-strong);
}
.lightbox-close{
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  transition: all .2s ease;
}
.lightbox-close:hover{ border-color: var(--accent-bright); color: var(--accent-bright); }

/* =========================================================
   MOTION — hero entrance + scroll reveal
   Un solo momento "orchestrato" al caricamento (hero home),
   il resto sono reveal discreti allo scroll. Rispetta sempre
   prefers-reduced-motion (vedi regola globale in cima al file).
   ========================================================= */

/* ---------- hero entrance (home, al load) ---------- */
@keyframes heroRise{
  from{ opacity: 0; transform: translateY(22px); }
  to{ opacity: 1; transform: translateY(0); }
}
.hero-photo .brand-name{ animation: heroRise .9s cubic-bezier(.16,.8,.3,1) both; }
.hero-photo .hero-tag{ animation: heroRise .9s cubic-bezier(.16,.8,.3,1) both; animation-delay: .14s; }
.hero-photo .btn-row{ animation: heroRise .9s cubic-bezier(.16,.8,.3,1) both; animation-delay: .26s; }

/* ---------- scroll reveal (tutte le pagine) ---------- */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
/* stagger leggero per elementi affiancati (card, righe, membri) */
.reveal:nth-child(2){ transition-delay: .08s; }
.reveal:nth-child(3){ transition-delay: .16s; }
.reveal:nth-child(4){ transition-delay: .24s; }
.reveal:nth-child(5){ transition-delay: .32s; }
.reveal:nth-child(6){ transition-delay: .4s; }
.reveal:nth-child(7){ transition-delay: .48s; }

/* =========================================================
   CONTACT FORM
   ========================================================= */
.contact-form{
  display: grid;
  gap: 22px;
  max-width: 640px;
}
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 600px){ .form-row{ grid-template-columns: 1fr; } }
.field{ display: flex; flex-direction: column; gap: 8px; }
.field label{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field label .req{ color: var(--accent-bright); }
.field input,
.field select,
.field textarea{
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  transition: border-color .2s ease, background .2s ease;
}
.field textarea{ resize: vertical; min-height: 140px; }
.field input::placeholder,
.field textarea::placeholder{ color: var(--ink-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--accent-bright);
  background: var(--bg-elevated-2);
}
.field select{ appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='6,9 12,15 18,9' fill='%23a39c92'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}
/* honeypot anti-spam: nascosto ai visitatori, visibile ai bot */
.field-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}
.form-status{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  display: none;
}
.form-status.is-visible{ display: block; }
.form-status.ok{ border-color: var(--accent); color: var(--accent-bright); }
.form-status.err{ border-color: var(--line-strong); color: var(--ink-muted); }

/* =========================================================
   LIVE PAGE — foto unica come hero + timeline date collegate

   Logica di impaginazione:
   - Il box NON ha un'altezza fissa e non ritaglia mai la foto
     (object-fit: contain): cresce per contenere titolo + tutte
     le date future, che restano sempre visibili senza scorrere.
   - Le date passate sono isolate in un blocco separato con
     un'altezza limitata: solo quella parte scorre.
   ========================================================= */
.dates-poster--hero{
  height: auto;
  min-height: clamp(480px, 46vw, 640px);
  border: none;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.dates-poster--hero .dates-poster-bg{
  object-fit: contain;
  object-position: right center;
}
.dates-poster--hero .poster-content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 5vw, 48px);
}
.dates-poster--hero .hero-head{
  flex-shrink: 0;
  align-self: flex-start;
  max-width: 460px;
  margin: 0 0 clamp(20px, 3vw, 32px);
}
.dates-poster--hero .hero-head h1{
  text-shadow: 0 2px 28px rgba(0,0,0,0.7);
  margin-top: 0;
}
/* restringiamo la fascia scura e la colonna di testo perché
   resti a sinistra dei soggetti nella foto */
.dates-poster--hero .dates-poster-scrim{
  background: linear-gradient(90deg,
    rgba(10,9,8,0.97) 0%,
    rgba(10,9,8,0.9) 20%,
    rgba(10,9,8,0.5) 34%,
    rgba(10,9,8,0.1) 44%,
    rgba(10,9,8,0) 52%);
}

.pd-timeline-wrap{
  position: relative;
  max-width: 380px;
  width: 100%;
  margin: 0;
  align-self: flex-start;
}

/* =========================================================
   Timeline scorrevole unica: tutte le date (future + passate)
   dentro un solo contenitore che scorre, con un'unica linea
   continua. Altezza calibrata per mostrare di default tutte le
   date future più una passata; oltre si scorre (anche con due
   dita sul trackpad) sia verso più passato che, se in futuro ci
   fossero più date future di quante ne stiano, verso l'alto.
   ========================================================= */
.pd-timeline-scroll{
  position: relative;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18px, #000 calc(100% - 22px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18px, #000 calc(100% - 22px), transparent 100%);
}
.pd-timeline-scroll::-webkit-scrollbar{ width: 4px; }
.pd-timeline-scroll::-webkit-scrollbar-track{ background: transparent; }
.pd-timeline-scroll::-webkit-scrollbar-thumb{ background: var(--accent); }

/* wrapper interno: altezza naturale (non limitata), qui vive la
   linea continua che quindi scorre insieme a tutto il contenuto */
.pd-timeline-inner{ position: relative; }
.pd-timeline-inner::before{
  content: "";
  position: absolute;
  left: 24px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: rgba(244,241,234,0.22);
}

/* indicatori "altre date in arrivo" / "date passate": spostati a
   sinistra della linea, come fossero un nodo in più sulla linea */
.pd-more,
.pd-past-arrow{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  /* il pallino (18px) va centrato sulla linea: linea a left:24px + 0.5px
     di spessore = centro 24.5px, quindi 24.5 - 9 = 15.5px di padding */
  padding-left: 15.5px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.5);
}
.pd-more .pd-arrow,
.pd-past-arrow .pd-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent-bright);
  color: var(--accent-bright);
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
  z-index: 1;
}

.dates-poster--hero .poster-dates{
  position: relative;
  padding: 0;
  max-width: none;
}

/* stile condiviso da tutte le date (future e passate) */
.dates-poster--hero .poster-dates li{
  position: relative;
  padding: 12px 0 12px 48px;
  border-bottom: none;
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.dates-poster--hero .poster-dates li::before{
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent-bright);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px rgba(244,241,234,0.25);
}
/* la prossima data in assoluto: nodo un filo più grande, per farla risaltare */
.dates-poster--hero .poster-dates li.pd-next::before{
  width: 13px; height: 13px;
  left: 18px;
}
@keyframes pdPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,122,61,0.55); }
  70%{ box-shadow: 0 0 0 12px rgba(255,122,61,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,122,61,0); }
}
.dates-poster--hero .poster-dates li.pd-next::after{
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 13px; height: 13px;
  border-radius: 50%;
  transform: translateY(-50%);
  animation: pdPulse 2s ease-out infinite;
  pointer-events: none;
}
.pd-more--pulse .pd-arrow{
  animation: pdPulse 2s ease-out infinite;
}
/* date già passate: attenuate, senza link biglietti, nodo spento */
.dates-poster--hero .poster-dates li.is-past{ opacity: 0.5; }
.dates-poster--hero .poster-dates li.is-past .pd-link{ display: none; }
.dates-poster--hero .poster-dates li.is-past::before{
  background: var(--ink-faint);
  box-shadow: none;
}


@media (max-width: 780px){
  .dates-poster--hero .hero-head,
  .pd-timeline-wrap{ max-width: none; }
  .dates-poster--hero .poster-dates li{ padding-left: 40px; }
  .pd-timeline-inner::before{ left: 18px; }
  .dates-poster--hero .poster-dates li::before{ left: 14px; }
  .dates-poster--hero .poster-dates li.pd-next::before{ left: 12px; }
  /* qui la linea è a 18px (centro 18.5px): 18.5 - 9 = 9.5px */
  .pd-more,
  .pd-past-arrow{ padding-left: 9.5px; }
}

/* =========================================================
   CONTATTI — stessa foto-hero non ritagliata usata in Live,
   ma con titolo a sinistra e "Booking & Management" a destra
   (la foto ha molto spazio vuoto sulla destra dei soggetti).
   ========================================================= */
.contact-hero .dates-poster-bg{
  /* eventuale spazio vuoto (contain) va a destra, dove serve
     comunque spazio per il blocco Booking & Management */
  object-position: left center;
}
.contact-hero .dates-poster-scrim{
  /* scura sia a sinistra (titolo) sia a destra (Booking &
     Management), trasparente al centro dove ci sono i soggetti */
  background: linear-gradient(90deg,
    rgba(10,9,8,0.9) 0%,
    rgba(10,9,8,0.55) 10%,
    rgba(10,9,8,0.1) 18%,
    rgba(10,9,8,0) 26%,
    rgba(10,9,8,0) 62%,
    rgba(10,9,8,0.25) 70%,
    rgba(10,9,8,0.75) 80%,
    rgba(10,9,8,0.92) 90%,
    rgba(10,9,8,0.95) 100%);
}
.contact-hero .poster-content{ flex: 1; flex-direction: row; align-items: flex-start; justify-content: space-between; }
.contact-hero .hero-head{ margin: 0; }
.contact-hero-info{
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: clamp(4px, 1.5vw, 18px);
  max-width: 330px;
  text-align: left;
  padding-left: 20px;
}
.contact-hero .poster-content{ padding-right: clamp(8px, 1.5vw, 14px); }
.contact-hero-info .eyebrow{ font-size: 13px; color: rgba(244,241,234,0.6); }
.contact-hero-info h2{
  margin-top: 12px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  text-shadow: 0 2px 22px rgba(0,0,0,0.75);
}
.contact-hero-info .dash-list{ margin-top: 22px; }
.contact-hero-info .dash-list li{
  padding: 12px 0;
  border: none;
}
.contact-hero-info .dash-list li:first-child{ border: none; }
.contact-hero-info .dash-list li::before{ display: none; }
.contact-hero-info .dash-list .label{ font-size: 1.15rem; }
.contact-hero-info .dash-list .label a{
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(0,0,0,0.8);
}
.contact-hero-info .dash-list .label a:hover{ color: var(--accent-bright); }
.contact-hero-info .dash-list .meta{ font-size: 14px; color: rgba(244,241,234,0.82); text-shadow: 0 1px 12px rgba(0,0,0,0.85); }

@media (max-width: 900px){
  .contact-hero .poster-content{ flex-direction: column; gap: 28px; padding-right: clamp(24px, 5vw, 48px); }
  .contact-hero-info{ align-self: flex-start; padding-left: 0; max-width: none; }
}

/* =========================================================
   MUSICA — foto silhouette (sfondo bianco) come momento
   visivo forte tra l'hero e la discografia. Niente testo
   sopra: il fondo chiaro non si presta bene al testo chiaro
   usato nel resto del sito, quindi la lasciamo respirare da
   sola, con una dissolvenza in alto per fonderla dolcemente
   con lo sfondo scuro della pagina invece di un taglio netto.
   ========================================================= */
/* =========================================================
   MUSICA — hero adattato alla foto silhouette (sfondo bianco):
   titolo e sottotitolo in inchiostro scuro su un pannello
   bianco che si fonde senza cuciture con la foto sottostante
   (stesso bianco, nessun taglio netto visibile).
   ========================================================= */
.musica-hero{ background: #fff; }
.musica-hero .hero-head{
  padding-top: clamp(44px, 6vw, 76px);
  padding-bottom: clamp(8px, 1.5vw, 16px);
  text-align: left;
}
.musica-hero .hero-head h1{
  margin: 0;
  color: var(--bg);
}
.musica-hero .hero-head .hero-tag{
  margin-top: 14px;
  margin-bottom: 0;
  color: rgba(10,9,8,0.6);
}
.music-photo{ margin: 0; }
.music-photo img{
  display: block;
  width: 100%;
  height: auto;
}
.member-hotspots{
  display: flex;
  width: 100%;
  aspect-ratio: 2200 / 1261;
  overflow: hidden;
}
.member-hotspot{
  position: relative;
  display: block;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
  /* ogni sagoma è un link alla bio del musicista (vedi nav.js) */
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.member-hotspot:focus-visible{
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}
/* il <picture> serve solo a scegliere il ritaglio giusto: non deve
   introdurre una scatola in linea che scombini l'altezza */
.member-hotspot picture{
  display: block;
  width: 100%;
  height: 100%;
}
.member-hotspot img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.member-hotspot:hover img,
.member-hotspot:focus-visible img{ transform: scale(1.08); }
.member-hotspot-label{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(10,9,8,0) 0%, rgba(10,9,8,0.82) 100%);
  opacity: 0;
  transition: opacity .25s ease;
}
.member-hotspot:hover .member-hotspot-label,
.member-hotspot:focus-visible .member-hotspot-label{ opacity: 1; }
@media (hover: none){
  /* sul touch non esiste hover: il nome resta visibile, così si capisce
     che le sagome sono cliccabili */
  .member-hotspot-label{ opacity: 1; }
}


/* link social in riga orizzontale (pagina Contatti) */
.social-row{
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.social-row li{ margin: 0; }
.social-row a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 14.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.social-row a:hover{ border-color: var(--accent-bright); color: var(--accent-bright); }


/* =========================================================
   LINGUAGGIO VISIVO — il reticolo tecnico
   Tre elementi che ritornano ovunque: il filo (riga da 1px che
   apre le sezioni), le parentesi angolari (due L agli angoli di
   schede e foto) e l'etichetta tecnica in monospaziato.
   Sotto: la coppia arancio/blu, la grana sul nero e le
   animazioni legate allo scorrimento.
   ========================================================= */

/* ---------- il filo: apertura di sezione ---------- */
body{ counter-reset: nugara-sec; }

.section-head{
  position: relative;
  padding-top: 22px;
  counter-increment: nugara-sec;
}
.section-head::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hairline);
  transform-origin: left center;
}
/* il nodo che chiude il filo a destra, come sulla timeline dei concerti */
.section-head::after{
  content: "";
  position: absolute;
  top: -3px; right: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-bright);
}
/* numero progressivo di sezione, al posto del trattino */
.section-head .eyebrow::before{
  content: counter(nugara-sec, decimal-leading-zero);
  width: auto;
  height: auto;
  background: none;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

/* ---------- le parentesi angolari ----------
   --bk-inset dice dove appoggiare la L rispetto al bordo della scheda:
   -1px la fa cadere ESATTAMENTE sopra il bordo da 1px (nessun gradino),
   0 serve dove il contenitore ritaglia (overflow:hidden), altrimenti
   la parentesi verrebbe tagliata via. */
.press-card,
.press-featured .quote-block,
.member-photo,
.lg-item,
.album-card{ position: relative; --bk-inset: -1px; --bk-size: 14px; }

.member-photo,
.lg-item{ --bk-inset: 0px; }

.press-card::before, .press-card::after,
.press-featured .quote-block::before, .press-featured .quote-block::after,
.member-photo::before, .member-photo::after,
.lg-item::before, .lg-item::after,
.album-card::before, .album-card::after{
  content: "";
  position: absolute;
  width: var(--bk-size); height: var(--bk-size);
  border: 0 solid var(--line-strong);
  pointer-events: none;
  z-index: 5;
  transition: width .25s ease, height .25s ease, border-color .25s ease;
}
.press-card::before,
.press-featured .quote-block::before,
.member-photo::before,
.lg-item::before,
.album-card::before{
  top: var(--bk-inset); left: var(--bk-inset);
  border-top-width: 1px;
  border-left-width: 1px;
}
.press-card::after,
.press-featured .quote-block::after,
.member-photo::after,
.lg-item::after,
.album-card::after{
  bottom: var(--bk-inset); right: var(--bk-inset);
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.press-card:hover,
.press-featured .quote-block:hover,
.member-photo:hover,
.lg-item:hover, .lg-item:focus-visible,
.album-card:hover{ --bk-size: 24px; }

.press-card:hover::before, .press-card:hover::after,
.press-featured .quote-block:hover::before, .press-featured .quote-block:hover::after,
.member-photo:hover::before, .member-photo:hover::after,
.lg-item:hover::before, .lg-item:hover::after,
.lg-item:focus-visible::before, .lg-item:focus-visible::after,
.album-card:hover::before, .album-card:hover::after{
  border-color: var(--accent-bright);
}
.press-card,
.press-featured .quote-block{ transition: border-color .25s ease; }
.press-card:hover,
.press-featured .quote-block:hover{ border-color: var(--line-strong); }

/* ---------- il blu: tutto ciò che è passato o d'archivio ---------- */
.dates-poster--hero .poster-dates li.is-past::before{
  background: var(--accent-2);
  box-shadow: 0 0 0 1px rgba(47,107,255,0.28);
}
.pd-more .pd-arrow,
.pd-past-arrow .pd-arrow{ transition: color .25s ease, border-color .25s ease; }
.pd-more:first-of-type .pd-arrow{
  border-color: var(--accent-2-bright);
  color: var(--accent-2-bright);
}
/* Point Of Convergency: il disco più vecchio ha una temperatura fredda */
.album-poc .eyebrow{ color: var(--accent-2-bright); }
.album-poc .section-head::after{ background: var(--accent-2-bright); }
.album-poc .btn:hover{ border-color: var(--accent-2-bright); color: var(--accent-2-bright); }
.album-poc .lg-item:hover::before, .album-poc .lg-item:hover::after,
.album-poc .album-card:hover::before, .album-poc .album-card:hover::after{
  border-color: var(--accent-2-bright);
}

/* le sagome della sezione Musica si accendono di blu */
.member-hotspot{ isolation: isolate; }
.member-hotspot::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-2);
  opacity: 0;
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity .3s ease;
}
.member-hotspot:hover::after,
.member-hotspot:focus-visible::after{ opacity: 0.55; }

/* ---------- grana sul nero ---------- */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  /* niente mix-blend-mode: su tutta la viewport costringerebbe il
     browser a ricomporre l'intera pagina a ogni scroll */
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- barra di avanzamento della lettura ---------- */
body::before{
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 500;
  pointer-events: none;
  background: linear-gradient(90deg, var(--accent-bright) 0%, var(--accent-2-bright) 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- animazioni legate allo scorrimento (CSS puro) ----------
   Dove non sono supportate, semplicemente non partono: il filo resta
   disegnato e la barra resta invisibile. Nessuna libreria, nessun JS. */
@keyframes nug-progress{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@keyframes nug-hairline{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    body::before{
      animation: nug-progress linear both;
      animation-timeline: scroll(root block);
    }
    .section-head::before{
      animation: nug-hairline linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
  }
}

@media (max-width: 700px){
  .section-head{ padding-top: 18px; }
  .press-card,
  .press-featured .quote-block,
  .member-photo,
  .lg-item,
  .album-card{ --bk-size: 10px; }
}


/* =========================================================
   PRIMA SCHERMATA — più aria che si muove
   Il mirino, la deriva lenta della foto, la parallasse allo
   scorrimento e l'invito a scendere. Tutto in CSS.
   ========================================================= */




/* le due temperature sulla foto: arancio in alto a destra, blu in basso a sinistra */
.hero-scrim{
  background:
    radial-gradient(ellipse 55% 45% at 84% 12%, rgba(255,122,61,0.16), transparent 62%),
    linear-gradient(180deg, rgba(10,9,8,0) 0%, rgba(10,9,8,0) 48%, rgba(10,9,8,0.94) 100%);
}

/* il nome si compone allargandosi: tipografia in movimento */
.hero-photo .brand-name{ animation: nug-brand-in 1.2s cubic-bezier(.16,.8,.3,1) both; }
@keyframes nug-brand-in{
  from{ opacity: 0; transform: translateY(22px); letter-spacing: 0.32em; }
  to  { opacity: 1; transform: translateY(0); letter-spacing: 0.02em; }
}

/* parallasse e dissolvenza allo scorrimento */
@keyframes nug-hero-out{
  from{ opacity: 1; transform: translateY(0); }
  to  { opacity: 0; transform: translateY(-40px); }
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hero-photo .hero-inner{
      animation: nug-hero-out linear both;
      animation-timeline: view();
      animation-range: exit 10% exit 70%;
    }
  }
}

/* =========================================================
   PIÙ COLORE — arancio e blu che ritornano
   ========================================================= */

/* il filo di sezione parte acceso e si spegne nel bianco */
.section-head::before{
  background: linear-gradient(90deg,
    var(--accent-bright) 0%,
    var(--accent) 6%,
    var(--hairline) 22%,
    var(--hairline) 100%);
}
.album-poc .section-head::before{
  background: linear-gradient(90deg,
    var(--accent-2-bright) 0%,
    var(--accent-2) 6%,
    var(--hairline) 22%,
    var(--hairline) 100%);
}

/* selezione del testo nei colori del gruppo */
::selection{ background: var(--accent); color: #0a0908; }

/* le miniature dal vivo si scaldano al passaggio, quelle di studio si raffreddano */
.live-gallery .lg-item img{ transition: transform .4s ease, filter .4s ease; }
#live-gallery .lg-item:hover img{ filter: saturate(1.15) contrast(1.04); }
.album-poc .live-gallery .lg-item:hover img{ filter: saturate(0.85) hue-rotate(-8deg) brightness(1.05); }

/* copertine: un alone caldo (o freddo) quando ci passi sopra */
.album-card{ transition: border-color .2s ease, box-shadow .35s ease; }
.album-card:hover{ box-shadow: 0 0 0 1px var(--accent-dim), 0 18px 60px -30px rgba(255,122,61,0.55); }
.album-poc .album-card:hover{ box-shadow: 0 0 0 1px var(--accent-2-dim), 0 18px 60px -30px rgba(47,107,255,0.55); }




/* =========================================================
   PRIMA SCHERMATA — respiro e movimento
   La foto non è più ferma: deriva lentissima, aura di colore
   che si muove, una passata di luce ogni tanto e un invito a
   scorrere in fondo. Tutto si spegne con prefers-reduced-motion.
   ========================================================= */

@keyframes nug-drift{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
@keyframes nug-aura{
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-4%, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes nug-sweep{
  0%   { transform: translateY(-10%); opacity: 0; }
  8%   { opacity: 0.5; }
  55%  { opacity: 0.5; }
  70%  { transform: translateY(110%); opacity: 0; }
  100% { transform: translateY(110%); opacity: 0; }
}
@keyframes nug-cue{
  0%   { transform: scaleY(0); transform-origin: top center; }
  45%  { transform: scaleY(1); transform-origin: top center; }
  55%  { transform: scaleY(1); transform-origin: bottom center; }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}
@keyframes nug-parallax{
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* aura di colore dietro la foto: caldo in alto a destra, freddo in basso a
   sinistra. È la fonte di colore principale della prima schermata. */
.hero-photo .hero-bg::after{
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
  background:
    radial-gradient(ellipse 46% 42% at 84% 12%, rgba(255,122,61,0.30), transparent 66%);
}
/* passata di luce, come una scansione */
.hero-photo .hero-scrim::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,241,234,0.55), transparent);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference){
  .hero-photo .hero-bg img{ animation: nug-drift 34s ease-in-out infinite; }
  .hero-photo .hero-bg::after{ animation: nug-aura 26s ease-in-out infinite; }
  .hero-photo .hero-scrim::after{ animation: nug-sweep 11s ease-in-out infinite; }
}

/* allontanandosi, la foto si avvicina appena: un avvicinamento invece di uno
   spostamento, così i bordi non si scoprono mai e nessuno viene tagliato */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hero-photo .hero-bg{
      animation: nug-parallax linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

/* parentesi angolari attorno al nome, come sulle schede */
.brand-name{ position: relative; }
.brand-name::before,
.brand-name::after{
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 0 solid var(--accent-bright);
  pointer-events: none;
}
.brand-name::before{ top: -9px; left: -9px; border-top-width: 1px; border-left-width: 1px; }
.brand-name::after{ bottom: -9px; right: -9px; border-bottom-width: 1px; border-right-width: 1px; }

/* invito a scorrere */
.hero-scroll{
  position: relative;
  z-index: 2;
  margin-top: clamp(26px, 4vw, 40px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color .25s ease;
}
.hero-scroll:hover{ color: var(--accent-bright); }
.hero-scroll-line{
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-2-bright));
}
@media (prefers-reduced-motion: no-preference){
  .hero-scroll-line{ animation: nug-cue 2.6s ease-in-out infinite; }
}

/* =========================================================
   PIÙ COLORE — il blu legato al significato, non sparso a caso
   ========================================================= */

::selection{ background: var(--accent-bright); color: #0a0908; }

/* Point Of Convergency porta il suo blu anche in home e nei rimandi */
.album-card[href*="point-of-convergency"] .go,
.album-card[href*="point-of-convergency"] .eyebrow{ color: var(--accent-2-bright); }
.album-card[href*="point-of-convergency"]:hover{ border-color: var(--accent-2-bright); }
.album-card[href*="point-of-convergency"]:hover::before,
.album-card[href*="point-of-convergency"]:hover::after{ border-color: var(--accent-2-bright); }

/* i video sono materiale d'archivio: accento freddo */
.video-card:hover{ border-color: var(--accent-2-bright); }
.video-card:hover .play-btn{
  background: var(--accent-2-bright);
  border-color: var(--accent-2-bright);
}


/* le foto delle gallerie riprendono colore al passaggio */
.lg-item img{ filter: saturate(0.85); transition: transform .4s ease, filter .4s ease; }
.lg-item:hover img,
.lg-item:focus-visible img{ filter: saturate(1.15) contrast(1.04); }


/* =========================================================
   SOCIAL NEI COLORI DEI RISPETTIVI MARCHI
   I colori vengono dai selettori sull'indirizzo, così valgono
   in italiano e in inglese senza toccare l'HTML.
   ========================================================= */
:root{
  --c-instagram: #e1306c;
  --c-facebook:  #3b82f6;
  --c-youtube:   #ff3b30;
  --c-spotify:   #1db954;
  --c-bandcamp:  #4d9fb5;
}

/* pulsanti nella sezione contatti */
.social-row a[href*="instagram"]{ color: var(--c-instagram); border-color: color-mix(in srgb, var(--c-instagram) 45%, transparent); }
.social-row a[href*="facebook"] { color: var(--c-facebook);  border-color: color-mix(in srgb, var(--c-facebook) 45%, transparent); }
.social-row a[href*="youtube"]  { color: var(--c-youtube);   border-color: color-mix(in srgb, var(--c-youtube) 45%, transparent); }
.social-row a[href*="spotify"]  { color: var(--c-spotify);   border-color: color-mix(in srgb, var(--c-spotify) 45%, transparent); }
.social-row a[href*="bandcamp"] { color: var(--c-bandcamp);  border-color: color-mix(in srgb, var(--c-bandcamp) 45%, transparent); }

.social-row a[href*="instagram"]:hover{ border-color: var(--c-instagram); background: color-mix(in srgb, var(--c-instagram) 14%, transparent); color: var(--c-instagram); }
.social-row a[href*="facebook"]:hover { border-color: var(--c-facebook);  background: color-mix(in srgb, var(--c-facebook) 14%, transparent);  color: var(--c-facebook); }
.social-row a[href*="youtube"]:hover  { border-color: var(--c-youtube);   background: color-mix(in srgb, var(--c-youtube) 14%, transparent);   color: var(--c-youtube); }
.social-row a[href*="spotify"]:hover  { border-color: var(--c-spotify);   background: color-mix(in srgb, var(--c-spotify) 14%, transparent);   color: var(--c-spotify); }
.social-row a[href*="bandcamp"]:hover { border-color: var(--c-bandcamp);  background: color-mix(in srgb, var(--c-bandcamp) 14%, transparent);  color: var(--c-bandcamp); }

/* icone nell'intestazione: grigie a riposo, nel colore del marchio al passaggio */
.header-social a[href*="instagram"]:hover{ color: var(--c-instagram); }
.header-social a[href*="facebook"]:hover { color: var(--c-facebook); }
.header-social a[href*="youtube"]:hover  { color: var(--c-youtube); }
.header-social a[href*="bandcamp"]:hover { color: var(--c-bandcamp); }

/* =========================================================
   RITOCCHI DI SPAZIO E DETTAGLIO
   ========================================================= */

/* meno vuoto fra le foto dal vivo e la rassegna stampa */
#foto-live{ padding-bottom: clamp(20px, 3vw, 34px); }
#stampa{ padding-top: clamp(30px, 4.5vw, 56px); }

/* bandierine dei paesi nelle recensioni */
.cite-flag{
  margin-right: 0.35em;
  font-size: 1.05em;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  vertical-align: -0.05em;
}

/* =========================================================
   RIFINITURA TELEFONO
   Ultimo blocco del foglio: qui stanno solo correzioni di
   leggibilità e di area toccabile per gli schermi piccoli.
   ========================================================= */
@media (max-width: 700px){

  /* Sagome dei musicisti: su telefono viene caricata (vedi <picture>
     nell'HTML) una versione ritagliata stretta attorno a ciascuna figura.
     Nella foto originale ogni sagoma ha molto bianco intorno — solo a
     sinistra di Simone erano 202px — che a schermo stretto sprecava
     spazio e rimpiccioliva i musicisti. Qui la striscia è più alta, le
     figure quasi si toccano e occupano tutta la larghezza.
     Le larghezze seguono le proporzioni dei nuovi ritagli e devono
     scavalcare quelle scritte nell'HTML, da cui !important. */
  /* titolo e sottotitolo delle sezioni con foto salgono: si guadagna
     spazio verticale e le sagome entrano insieme al testo */
  .page-hero .hero-head,
  .musica-hero .hero-head{
    padding-top: 18px;
    padding-bottom: 4px;
  }
  .page-hero .hero-head .hero-tag,
  .musica-hero .hero-head .hero-tag{ margin-top: 10px; }

  /* la striscia esce dai margini del contenitore e occupa tutta la
     larghezza dello schermo: le figure guadagnano spazio */
  .music-photo{
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  .member-hotspots{ aspect-ratio: 1763 / 1221; }
  .member-hotspot:nth-child(1){ width: 31.93% !important; }
  .member-hotspot:nth-child(2){ width: 30.46% !important; }
  .member-hotspot:nth-child(3){ width: 37.61% !important; }

  /* Fascia scura sotto le foto: sta su ogni sagoma ma occupa tutta la
     larghezza della sua colonna e ha ovunque la stessa altezza, quindi
     le tre si uniscono in una banda continua da un capo all'altro.
     Prima lo sfondo stava sull'etichetta, che essendo stretta creava
     tre riquadri di larghezze diverse. */
  .member-hotspot::before{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 88px;
    background: linear-gradient(180deg, rgba(10,9,8,0) 0%, rgba(10,9,8,0.55) 45%, rgba(10,9,8,0.9) 100%);
    pointer-events: none;
    z-index: 1;
  }
  /* nome e cognome sempre su due righe, anche quando la colonna sarebbe
     abbastanza larga da tenerli insieme: così le tre etichette hanno la
     stessa forma. Il limite è più stretto della parola più lunga, che
     quindi non viene spezzata: l'a capo cade sempre sullo spazio. */
  .member-hotspot-label{
    font-size: 11px;
    letter-spacing: .06em;
    max-width: 6em;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 12px;
    background: none;   /* la sfumatura ora è la fascia continua qui sopra */
    z-index: 2;
  }


  /* Rassegna stampa: quattro recensioni affiancate a due a due, una per
     Paese. Le citazioni lunghe in evidenza vengono spostate da nav.js
     dentro "Tutte le recensioni", dove tornano a una colonna sola. */
  /* minmax(0,1fr) e non 1fr: altrimenti una parola lunga allarga la sua
     colonna e le due schede affiancate risultano di larghezza diversa */
  .press-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .press-card{ padding: 16px 14px; }
  .press-card .press-quote{ font-size: 13.5px; line-height: 1.5; }
  .press-featured{ grid-template-columns: 1fr; }

  /* Le citazioni in evidenza, una volta spostate dentro "Tutte le
     recensioni", tornerebbero al loro stile originale (riquadro alto,
     senza bordi laterali, testo grande). Qui prendono lo stesso aspetto
     delle altre schede, così la griglia resta omogenea. */
  .press-grid > .quote-block{
    border: 1px solid var(--line);
    padding: 16px 14px;
    margin: 0;
  }
  .press-grid > .quote-block blockquote{
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 400;
    max-width: none;
  }
  .press-grid > .quote-block blockquote::before,
  .press-grid > .quote-block blockquote::after{ content: none; }

  /* Hero: la foto orizzontale su schermo verticale veniva tagliata
     moltissimo (se ne vedeva solo un terzo). Su telefono viene caricato
     un ritaglio verticale che contiene tutti e tre i musicisti, e
     l'altezza segue la sua proporzione, così non si perde nulla ai lati.
     Il gruppo resta in vista sopra il titolo. */
  .hero-photo{
    min-height: 0;
    display: block;      /* foto sopra, testo sotto: niente sovrapposizioni */
  }
  .hero-photo .hero-bg{ position: relative; height: auto; }
  .hero-photo .hero-bg picture{ display: block; }
  .hero-photo .hero-bg img{
    position: static;
    width: 100%;
    height: auto;
  }
  /* la velatura resta solo sul fondo della foto, per l'attacco col testo */
  .hero-photo .hero-scrim{
    top: auto;
    height: 90px;
    background: linear-gradient(180deg, rgba(10,9,8,0) 0%, var(--bg) 100%);
  }
  .hero-photo .hero-scrim::after{ content: none; }
  .hero-photo .hero-inner{
    position: relative;
    /* il testo risale verso la foto: la velatura in fondo all'immagine
       sfuma nel fondo, quindi l'attacco resta morbido */
    margin-top: -14px;
    padding: 0 var(--gutter) 30px;
  }
  .hero-photo .brand-name{ margin-top: 0; }

  /* i due richiami dell'hero occupano tutta la larghezza: più leggibili
     sulla foto e più facili da centrare col pollice */
  .hero-photo .btn-row{ width: 100%; gap: 12px; }
  .hero-photo .btn-chip{
    flex: 1 1 100%;
    justify-content: center;
    padding: 17px 22px;
    font-size: 14.5px;
  }

  /* Foto aperte: su telefono devono sfruttare tutto lo schermo senza
     essere tagliate. Il bordo superiore più alto lascia posto alla X. */
  .lightbox{ padding: 60px 8px 14px; }
  .lightbox img{
    max-width: 100%;
    max-height: 100%;
  }
  .lightbox-close{ top: 10px; right: 10px; }

  /* --- aree toccabili: minimo consigliato 44px --- */
  .album-card-links{ gap: 8px; }
  .album-card-links .go{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .dash-list .label a,
  .social-row a{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .lang-switch{ min-height: 44px; }

  /* --- leggibilità: nessun testo sotto i 13px ---
     I selettori ricalcano quelli delle regole originali (es.
     ".album-card .go"): con il solo ".go" la regola di partenza,
     più specifica, continuerebbe a vincere. */
  .album-card .go{ font-size: 13px; }
  .member .role{ font-size: 13px; }
  .dash-list .meta{ font-size: 13px; }
  .eyebrow{ font-size: 13px; }
  .placeholder-note{ font-size: 13px; }
  .pd-venue{ font-size: 13px; }
  .cite-pub{ font-size: 13px; }
  .ap-now-feat{ font-size: 12px; }
  /* email e telefono del footer: sono i recapiti per il booking,
     devono restare leggibili e comodi da toccare */
  .footer-bottom{ font-size: 13px; }
  .form-note{ font-size: 13px; }
  .footer-bottom a{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}