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

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Caxo — the band's display font. Drop Caxo.otf / Caxo.woff2 into assets/fonts/
   to activate it. Falls back to Michroma (already close in spirit) until then. */
@font-face{
  font-family: 'Caxo';
  src: url('assets/fonts/Caxo.woff2') format('woff2'),
       url('assets/fonts/Caxo.otf') format('opentype'),
       url('assets/fonts/Caxo.ttf') format('truetype');
  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 tre barre (le barre le inserisce nav.js) che diventa una X
   quando il pannello è aperto */
.nav-toggle-bar{
  display: block;
  width: 20px;
  height: 1.5px;
  margin: 0 auto;
  background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle-bar + .nav-toggle-bar{ margin-top: 5px; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2){ opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.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; }

.btn-chip{
  color: var(--accent-bright);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.btn-chip:hover{
  transform: scale(1.06);
  border-color: var(--accent-bright);
  color: var(--ink);
}
.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); }
.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. */
@media (hover: none){
  .ap-overlay{
    opacity: 1;
    pointer-events: auto;
  }
  .ap-discover{ opacity: 1; }
  .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); }
.pl-progress{
  grid-column: 1 / -1;
  height: 4px;
  background: var(--line);
  cursor: pointer;
  display: none;
  margin-top: 4px;
}
.pl-track.active .pl-progress{ display: block; }
.pl-progress-bar{ height: 100%; width: 0%; background: var(--accent-bright); transition: width .15s linear; }
@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;
}
.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){

  /* Le tre sagome ritagliate scendono a ~115px l'una: a quella
     dimensione non si leggono e non si toccano bene. Su telefono i
     musicisti restano raggiungibili dalle schede della sezione "Il
     trio"; su computer le sagome restano come sono. */
  .music-photo{ display: none; }

  /* pulsante "mostra tutto" degli elenchi accorciati (creato da nav.js) */
  .lista-toggle{ margin-top: 20px; }

  /* --- 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;
  }
}