/* ============================================================
   GIANCARLO DEL VITTO — sito ufficiale
   Foglio di stile principale.

   Per cambiare colori o font in un secondo momento, modifica
   SOLO i valori qui sotto in :root — il resto del CSS li
   usa automaticamente in tutte le pagine.
   ============================================================ */

:root {
  /* --- palette: ripresa dal duotone teal/nero della copertina di
     "On The Green Side" — acqua marina + inchiostro notturno + carta
     chiara, al posto del verde muschio/ottone delle prime bozze --- */
  --bg: #0a1815;
  --bg-raised: #12211d;
  --bg-raised-2: #17302a;
  --surface: rgba(238,244,241,0.045);
  --surface-hover: rgba(238,244,241,0.08);
  --surface-line: rgba(238,244,241,0.10);
  --paper: #eef4f1;
  --paper-dim: #b9c9c3;
  --ink: #0e1b17;
  --green: #2f6b5e;
  --green-deep: #1c3a33;
  --green-bright: #74c2b4;
  --gold: #3ecfae;
  --rust: #9a4a29;
  --nav-bg: rgba(10, 24, 21, 0.7);

  /* --- tipografia --- */
  --font-display: "Baloo 2", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --measure: 62ch;

  /* --- geometria: raggi misurati, non più i 3px "da form aziendale"
     ma nemmeno vistosamente arrotondati --- */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;

  /* --- profondità: quasi assente. Solo un'ombra minima dove serve
     davvero a separare un elemento sovrapposto (menu, modale) --- */
  --shadow-sm: 0 1px 2px rgba(6,14,12,0.2);
  --shadow-md: 0 8px 20px rgba(6,14,12,0.28);
  --shadow-lg: 0 20px 48px rgba(6,14,12,0.35);

  --ease-out: cubic-bezier(.16,1,.3,1);

  /* --- scala degli spazi verticali: usata per il padding di sezioni/
     intestazioni e per il distacco titolo↔contenuto in tutto il sito,
     cambiare qui per correggere ovunque invece che sezione per sezione --- */
  --space-2xs: 0.5rem;   /* 8px  — badge/eyebrow, dettagli minuti */
  --space-xs: 1rem;      /* 16px — hr.hairline, badge sopra i titoli */
  --space-sm: 1.5rem;    /* 24px — gap tra titolo e contenuto sotto */
  --space-md: 2rem;      /* 32px — gap tra card in una griglia */
  --space-section-y: clamp(2.5rem, 4.5vw, 3.75rem); /* 40–60px — padding verticale sezioni/header pagina */
  --space-title-gap: 0.35em; /* margin-bottom di h1–h4 */

  /* --- grana sottile per le superfici scure: un rumore in scala di
     grigi a bassissima opacità (incorporata nell'SVG stesso, non via
     filtro CSS) per un feeling "vinile/carta" invece di colore piatto.
     Si applica come background-image aggiuntivo, mai da sola: va sempre
     abbinata a un background-color/gradient esistente. --- */
  --grain: 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.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

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

html { scroll-behavior: smooth; }

/* Niente rettangolo blu di "tap highlight" del browser mobile sui pulsanti
   tondi (icone social, play del player): è sempre un rettangolo che segue
   il bounding box dell'elemento, non il suo bordo arrotondato, quindi
   sui pulsanti circolari si vede uno spigolo evidente. L'anello di focus
   per la tastiera (:focus-visible, qui sopra) resta invariato. */
* { -webkit-tap-highlight-color: transparent; }

/* anello di focus coerente col brand per la navigazione da tastiera:
   prima solo due input di form lo avevano, il resto (nav, bottoni,
   icone social, frecce del carosello) restava sull'anello di default
   del browser. :focus-visible non scatta sul click col mouse, quindi
   non aggiunge alcun ingombro visivo alla navigazione normale. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Elementi senza un border-radius proprio (link/testo semplice): qui va
   bene l'angolo smussato di default. I bottoni rotondi/quadrati del sito
   hanno già il loro border-radius (spesso 50%) e non vanno toccati qui,
   altrimenti al focus (anche solo dopo un click su alcuni trackpad/
   browser) perdono la forma e diventano un quadrato con angoli smussati
   — è quello che rendeva "a caso" il pulsante play del player un
   quadrato invece che un cerchio. */
a:focus-visible,
[tabindex]:focus-visible {
  border-radius: var(--radius-sm);
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--grain);
  background-repeat: repeat;
  background-size: 180px 180px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--ink); }

/* scrollbar sottile e coerente con la palette (Firefox + WebKit) */
html { scrollbar-width: thin; scrollbar-color: var(--green) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--green); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--green-bright); }

img, svg { max-width: 100%; display: block; }
/* "img, svg" qui sopra forza display:block anche sugli <img hidden>
   (es. lo stamp "Sold out" nello shop, nascosto via JS con
   elemento.hidden = true): essendo entrambe regole "autore", quella con
   più specificità vince a prescindere dall'ordine, e senza questa riga
   lo stamp restava visibile pure quando l'articolo non è esaurito. */
[hidden] { display: none !important; }

a { color: inherit; }

/* Titoli: stesso carattere bold/condensed usato sulla copertina di
   "On The Green Side" per "OnTheGreenSide" (Anton, l'unico peso che ha
   è 400 — da qui font-weight:400 invece del 600 di prima, per non far
   sintetizzare un grassetto posticcio al browser). --font-display
   (Baloo 2) resta invariato e riservato ai corsivi decorativi che
   Anton non può rendere (promo banner, monogramma GDV, citazioni). */
h1, h2, h3, h4 {
  font-family: "Anton", var(--font-display);
  font-weight: 400;
  margin: 0 0 var(--space-title-gap);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.8rem, 7.4vw, 6.4rem); letter-spacing: -0.04em; line-height: 0.9; }
@media (max-width: 640px) {
  /* Sotto i 640px il minimo sopra è troppo per titoli lunghi: su un
     telefono stretto andrebbero a capo su più righe e sembrerebbero
     sproporzionati. Qui scala in modo più aggressivo verso il basso. */
  h1 { font-size: clamp(2rem, 10.5vw, 2.6rem); }
}
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.005em; }

p { max-width: var(--measure); margin: 0 0 1.1em; }

.eyebrow-free { /* marker class: intentionally no all-caps eyebrow labels used site-wide */ }

/* ---------- layout helpers ---------- */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

section { padding: var(--space-section-y) 0; }

.section-alt {
  background-color: var(--bg-raised);
  background-image: var(--grain);
  background-repeat: repeat;
  background-size: 180px 180px;
}
.section-paper { background: var(--paper); color: var(--ink); }
.section-paper h1, .section-paper h2, .section-paper h3 { color: var(--ink); }
.section-paper a:not(.btn) { color: var(--green-deep); }
.section-paper .btn:not(.btn-solid):not(.btn-quiet) { color: var(--ink); border-color: var(--green-deep); }
.section-paper .btn:not(.btn-solid):not(.btn-quiet):hover { color: var(--ink); border-color: var(--gold); }

hr.hairline {
  border: none;
  border-top: 3px solid var(--gold);
  opacity: 0.6;
  margin: var(--space-xs) 0;
  width: 64px;
}

/* ---------- banner promozionale "On The Green Side" (sotto il menu) ---------- */
.promo-banner { background: var(--gold); }
.promo-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.2rem;
  flex-wrap: wrap;
  padding: 0.65rem 0;
  text-align: center;
}
.promo-banner-icon { width: 15px; height: 15px; flex: none; color: var(--ink); }
.promo-banner-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-size: 0.86rem;
  text-decoration: none;
}
.promo-banner-link em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05em;
}

/* ---------- navigation: barra "flottante" con bordi arrotondati e
   vetro sfocato, staccata dal bordo dello schermo invece di occupare
   l'intera larghezza — il pattern di nav più diffuso nei siti disegnati
   di recente, al posto della vecchia barra piena a spigolo vivo. ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 0.9rem clamp(1rem, 3.4vw, 1.8rem) 0;
  pointer-events: none; /* riabilitato dal contenuto interno (.wrap) */
}

/* Quando un pulsante della pagina porta a un'ancora interna (es. "Scopri i
   materiali gratuiti" in didattica.html), il browser normalmente allinea
   il titolo della sezione proprio al bordo superiore dello schermo — dove
   però il menu sticky resta fisso sopra e lo coprirebbe in parte. Questo
   margine "virtuale" dice al browser di fermarsi un po' più in basso,
   lasciando il titolo interamente visibile sotto il menu. */
section[id] { scroll-margin-top: 96px; }

/* Nota tecnica: il vetro sfocato NON sta direttamente su .wrap ma su uno
   pseudo-elemento. Un elemento con backdrop-filter diventa "containing
   block" per i suoi discendenti in position:fixed — se lo mettessimo
   qui, il menu mobile a schermo intero (anch'esso position:fixed,
   dentro .wrap) resterebbe intrappolato nei confini della pillola alta
   64px invece di coprire tutto lo schermo. Uno pseudo-elemento non ha
   figli, quindi evita del tutto il problema. */
.site-nav .wrap {
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0.5rem 0 1.5rem;
  border-radius: 999px;
}
.site-nav .wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--surface-line);
  border-radius: inherit;
  box-shadow: var(--shadow-md);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* stato "scrolled": la pillola diventa più opaca e con un'ombra un filo
   più marcata non appena si comincia a scorrere la pagina, così si stacca
   meglio dal contenuto sottostante invece di restare sempre uguale a
   quando è sovrapposta alla foto dell'hero. Classe aggiunta via JS
   (main.js) oltre una piccola soglia di scroll. */
.site-nav.is-scrolled .wrap::before {
  background: rgba(10, 24, 21, 0.92);
  box-shadow: var(--shadow-lg);
}

/* Il nome del sito in nav/footer nello stesso carattere della scritta
   "GIANCARLO DEL VITTO" sulla copertina (Bebas Neue, maiuscolo, tracking
   stretto) — senza l'allungamento verticale di .nome-artista, che qui
   nella barra di navigazione, compatta, andrebbe a tagliare le lettere. */
.brand {
  font-family: "Bebas Neue", var(--font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--paper);
}
.brand em { color: var(--ra, var(--green-bright)); font-style: normal; }

.nav-links {
  display: flex;
  gap: 0.2rem;
  list-style: none;
  margin: 0; padding: 0;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--paper-dim);
  position: relative;
  padding: 0.55em 0.95em;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-links a:hover { color: var(--paper); background: var(--surface-hover); }
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--gold); }

/* icona hamburger disegnata in CSS (due barre → X), non più il
   carattere "☰": si anima morbidamente in apertura/chiusura */
.nav-toggle {
  display: none;
  position: relative;
  background: none; border: none; color: var(--paper);
  font-size: 0; cursor: pointer;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex: none;
  margin-right: -0.5rem; /* riassorbe lo spazio extra sul bordo destro */
}
.nav-toggle::before, .nav-toggle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 19px; height: 2px;
  background: var(--paper);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
.nav-toggle::before { transform: translate(-50%, -50%) translateY(-4px); }
.nav-toggle::after { transform: translate(-50%, -50%) translateY(4px); }
.nav-toggle[aria-expanded="true"]::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; z-index: 310; }

  /* menu mobile: overlay a schermo intero, non più un pannello a tendina —
     link enormi nel font display, con una comparsa scalare leggera */
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 6rem clamp(1.5rem, 8vw, 3rem) 3rem;
    gap: 0.3rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s;
  }
  .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; }
  /* Stessa "pillola" dei link della nav desktop (vedi .nav-links a sopra),
     solo in scala più grande: il riquadro dell'hover deve abbracciare il
     testo, non allargarsi a tutta riga — con width:100% e lo stesso
     border-radius:999px del desktop, il riquadro diventava un rettangolo
     larghissimo e basso che quel raggio deformava in una pillola
     schiacciata e innaturale invece che in un bordo arrotondato pulito.
     Il margine negativo compensa il padding orizzontale aggiunto, così il
     testo resta allineato allo stesso bordo sinistro di prima. */
  .nav-links a {
    font-family: "Anton", var(--font-display);
    font-size: clamp(2rem, 9vw, 2.8rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--paper);
    background: none;
    padding: 0.15em 0.5em;
    margin-left: -0.5em;
    width: auto;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), color 0.2s ease, background 0.2s ease;
  }
  .nav-links a[aria-current="page"] { background: none; color: var(--gold); }
  .nav-links.open a { opacity: 1; transform: translateY(0); }
  .nav-links a:nth-child(1) { transition-delay: 0.05s; }
  .nav-links a:nth-child(2) { transition-delay: 0.1s; }
  .nav-links a:nth-child(3) { transition-delay: 0.15s; }
  .nav-links a:nth-child(4) { transition-delay: 0.2s; }
  .nav-links a:nth-child(5) { transition-delay: 0.25s; }
  .nav-links a:nth-child(6) { transition-delay: 0.3s; }
  .nav-links a:nth-child(7) { transition-delay: 0.35s; }
}

/* ---------- buttons: forma a pillola (richiama il disco/vinile del
   brand), non più il rettangolo a spigolo vivo — con un vero
   sollevamento all'hover invece del solo cambio di colore ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  border: 1px solid var(--gold);
  color: var(--paper);
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.btn:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn-solid { background: var(--gold); color: var(--ink); box-shadow: 0 10px 26px -8px rgba(62,207,174,0.55); }
.btn-solid:hover { background: var(--paper); border-color: var(--paper); box-shadow: 0 14px 32px -8px rgba(62,207,174,0.4); }
.btn-quiet { background: var(--surface); border-color: var(--surface-line); color: var(--paper-dim); }
.btn-quiet:hover { background: var(--surface-hover); border-color: var(--paper); color: var(--paper); box-shadow: var(--shadow-sm); }

/* utility: contenuto presente per gli screen reader ma invisibile a schermo */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* bottone "solo icona" (es. Condividi): stessa altezza degli altri bottoni,
   ma rotondo e senza etichetta visibile */
.btn-icon {
  padding: 0;
  width: 2.65em;
  height: 2.65em;
  justify-content: center;
  border-radius: 999px;
  gap: 0;
  position: relative;
}
.btn-icon svg.icon-inline, .btn.btn-icon svg.icon-inline { width: 18px; height: 18px; }
/* piccolo fumetto di conferma quando il messaggio viene copiato */
.btn-icon[data-tooltip-active]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  padding: 0.4em 0.7em;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}
.btn-icon[data-tooltip-active]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
  pointer-events: none;
}

/* ---------- intestazione delle pagine interne (Biografia, Musica, Tour,
   Shop, Didattica, Contatti, Privacy, Cookie): stesso sfondo piatto del
   resto della pagina (nessuna fascia colorata sotto il menu), solo con
   il padding per dare respiro al titolo. ---------- */
.page-header {
  padding: var(--space-section-y) 0 clamp(1.5rem, 3vw, 2rem);
}
.page-header .lede { font-size: 1.1rem; color: var(--paper-dim); max-width: 52ch; }
@media (max-width: 640px) {
  .page-header { padding: clamp(1.2rem, 5vw, 1.8rem) 0 1.25rem; }
}

/* ---------- hero ---------- */
.hero {
  min-height: var(--hero-vh, 82vh);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 55% 60% at 12% 100%, rgba(62,207,174,0.10), transparent 60%),
    radial-gradient(ellipse 65% 60% at 88% 0%, rgba(116,194,180,0.16), transparent 62%);
}
@media (max-width: 860px) {
  .hero-portrait { width: min(420px, 100%); height: auto; }
}
@media (max-width: 640px) {
  .hero-portrait { width: 100%; height: auto; }
}
/* Sotto i 760px (tutti gli smartphone, anche i più larghi, e i tablet in
   verticale piccoli) l'altezza dell'hero non viene più forzata in "vh":
   su mobile il "vh" del browser include spazio che la barra degli
   indirizzi occupa o libera durante lo scroll, e questo faceva sembrare
   la sezione tagliata a metà o a 3/4 mentre si scorreva. Impostando
   min-height:0 l'hero si adatta sempre all'altezza reale del suo
   contenuto, così ogni sezione si vede per intero, come già accade su
   desktop. Non riguarda .home-hero, che sotto ridefinisce sempre
   un'altezza piena con "svh" — la stessa identica esigenza, risolta lì
   in un modo che non taglia mai la foto. */
@media (max-width: 760px) {
  .hero { min-height: 0; padding: clamp(2.8rem, 11vw, 4.2rem) 0 2.6rem; }
}

/* ---------- photo-hero: hero a tutto schermo con foto di sfondo e nav
   sovrapposta in trasparenza ----------
   Si applica all'header di ogni pagina che apre con una foto/copertina
   a tutto schermo (home, le tre pagine album, e in futuro le pagine di
   solo testo quando avranno una foto): su desktop l'immagine riempie
   l'intero schermo (100vh/100svh); su mobile ne mostra solo una parte,
   lasciando intravedere il contenuto sotto per invitare allo scroll
   (stessa logica della pagina /tour di jacobcollier.com). Le pagine
   senza ancora una foto propria (biografia, contatti, didattica, shop)
   usano lo stesso hero ma senza background-image: restano sul
   gradiente di marchio qui sotto finché non arriva la foto reale, che
   basterà aggiungere come background-image inline sull'header.
   .site-nav resta sticky e nel flusso normale del documento; qui la
   "solleviamo" visivamente sopra la foto con un margine negativo pari
   alla sua altezza, così la foto arriva fino al bordo dello schermo e
   la nav, semi-trasparente, sembra fluttuarci sopra invece di stare in
   una fascia separata. */
.photo-hero {
  --hero-nav-h: calc(0.9rem + 64px);
  margin-top: calc(-1 * var(--hero-nav-h));
  padding-top: var(--hero-nav-h);
  min-height: 100vh;
  justify-content: center;
  text-align: center;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 55% 60% at 12% 100%, rgba(62,207,174,0.10), transparent 60%),
    radial-gradient(ellipse 65% 60% at 88% 0%, rgba(116,194,180,0.16), transparent 62%);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  /* leggero effetto "zoom" mentre si scorre via dall'hero (main.js,
     gdvHeroParallax): solo transform, mai background-position — che resta
     libero per la messa a punto specifica da mobile qui sotto — così i due
     effetti non entrano mai in conflitto. */
  transform: scale(1);
  will-change: transform;
}
.photo-hero .hero-actions { justify-content: center; }
/* "100svh" esclude lo spazio che la barra degli indirizzi del browser
   mobile occupa o libera durante lo scroll: senza, su telefono l'hero
   sembrerebbe tagliato o "salterebbe" mentre si scorre. */
@supports (height: 100svh) {
  .photo-hero { min-height: 100svh; }
}
/* Su mobile l'hero non deve occupare tutto lo schermo (qui sarebbe
   indistinguibile da una pagina "vuota" prima dello scroll): resta a
   circa il 60% dell'altezza, con il contenuto della pagina che si
   intravede appena sotto. */
@media (max-width: 760px) {
  .photo-hero { min-height: 60vh; }
}
@supports (height: 100svh) {
  @media (max-width: 760px) {
    .photo-hero { min-height: 60svh; }
  }
}

/* home-hero: messa a punto della sola foto della home (composizione e
   ritaglio specifici di quella foto) sopra il comportamento generico
   di .photo-hero */
.home-hero {
  background-position: 56% 30%;
}
/* Su schermi stretti e alti (telefoni in verticale) "cover" non deve
   più tagliare la foto in orizzontale ma quasi per niente in verticale:
   l'immagine, quasi quadrata, finisce per mostrarsi per intero in
   altezza, comprese la scritta del titolo dell'album in alto e la
   fascia nera con tracklist in basso — che qui non c'entrano, sono
   pensate per la copertina, non per lo sfondo dell'hero. Ingrandendo
   di più lo sfondo forziamo un ritaglio verticale che tiene sempre
   fuori dall'inquadratura sia l'una che l'altra. */
@media (max-width: 760px) {
  .home-hero {
    background-size: auto 190%;
    background-position: 63% 32%;
  }
}

/* band-photo-hero: foto verticale (formato storia) usata come sfondo
   dell'hero di green-side. Su desktop "cover" la ingrandisce parecchio
   in verticale (essendo l'immagine molto più alta che larga): senza
   questa messa a punto si vede solo la parte bassa dell'inquadratura
   (pancia/gambe) invece dei volti della band. */
.band-photo-hero {
  background-position: center 70%;
}
@media (max-width: 760px) {
  .band-photo-hero { background-position: center bottom; }
}

/* no-nav: pagine come green-side-vinile.html che non hanno il menù in
   alto — il margine/padding negativi di .photo-hero servivano solo a
   far scorrere la foto sotto la pillola della nav, qui vanno annullati
   altrimenti la foto risulterebbe tagliata dello stesso valore in cima. */
.photo-hero.no-nav {
  margin-top: 0;
  padding-top: clamp(1.6rem, 4vw, 2.6rem);
}

/* overlay leggero sulla foto: più marcato ai bordi (dove passano nav,
   titolo e azioni) che al centro, così il testo resta sempre leggibile
   qualunque sia la luminosità o il soggetto dell'immagine scelta */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    var(--grain),
    linear-gradient(180deg, rgba(16,25,15,0.55) 0%, rgba(16,25,15,0.32) 42%, rgba(16,25,15,0.7) 100%);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, auto;
}
/* Sulle pagine album la tinta dell'overlay usa i colori --rt/--rm di
   quella uscita (vedi "per-release color themes" più sotto) invece del
   verde neutro di brand, così la copertina a tutto schermo resta
   riconoscibile come "quel" disco anche sotto l'overlay di leggibilità. */
.release-page .hero-overlay {
  background-image:
    var(--grain),
    linear-gradient(180deg, color-mix(in srgb, var(--rt) 70%, transparent) 0%, color-mix(in srgb, var(--rm) 45%, transparent) 42%, color-mix(in srgb, var(--rm) 80%, transparent) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--green-bright);
  margin-bottom: var(--space-xs);
}
.hero-kicker::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.hero h1 { color: var(--paper); }

/* ---------- tipografia da copertina: due classi riutilizzabili ----------
   Riprendono i due caratteri della copertina di "On The Green Side":
   Anton per il titolo dell'album (il logotipo "OnTheGreenSide"),
   Bebas Neue con allungamento verticale per il nome dell'artista
   sotto di esso ("GIANCARLO DEL VITTO"). Le dimensioni della copertina
   diventano qui un clamp() per restare leggibili a ogni larghezza,
   ma ai limiti superiori (schermi larghi) coincidono con quelle
   originali (5rem e 2.2rem). */
.titolo-album {
  font-family: "Anton", sans-serif;
  font-size: clamp(2.6rem, 9vw, 5rem);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin: 0;
}
.nome-artista {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
  /* allungamento verticale per replicare l'altezza "schiacciata" della
     scritta sulla copertina, dove Bebas Neue è più bassa dell'originale */
  display: inline-block;
  transform: scaleY(1.35);
  transform-origin: top left;
}
.hero .lede { font-size: 1.15rem; color: var(--paper-dim); max-width: 46ch; }
/* Sotto i 640px il secondo paragrafo dell'hero (crediti estesi dei
   musicisti, dove presente) va a capo su 3-4 righe e, sommato al resto
   del testo, spinge l'altezza dell'hero ben oltre il 60svh previsto per
   .photo-hero su mobile — la foto (verticale, quasi non ritagliata a
   quella larghezza) finisce per riempire tutto lo schermo invece di
   lasciare intravedere il contenuto sotto. Le stesse informazioni sono
   già ripetute più sotto in "La storia del disco" e "Crediti", quindi
   qui si può nascondere senza perdere nulla. Non tocca il desktop. */
@media (max-width: 640px) {
  .hero .lede + .lede { display: none; }
  /* Con un solo paragrafo visibile, il blocco titolo+testo va rifinito
     per sembrare disegnato apposta per lo spazio più stretto invece che
     un semplice adattamento di quello desktop: badge più vicino al
     titolo, e niente margine finale che sposti il blocco fuori centro
     dentro l'hero (che lo centra verticalmente). */
  .release-tag { margin-bottom: 0.7rem; }
  .hero .lede:last-child { margin-bottom: 0; }
}
.hero-actions { display: flex; align-items: center; gap: 1rem; margin-top: var(--space-sm); flex-wrap: wrap; }

/* animazione "a calamita" dell'hero della home, applicata via main.js:
   titolo/sottotitolo/CTA entrano con un leggero rimbalzo invece del
   semplice fade usato altrove nel sito (.reveal) */
.hero-magnet-in {
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease-out;
}
.hero-magnet-in.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- portrait-slot: riquadro per l'illustrazione vettoriale del
   chitarrista — prima affiancava il testo dell'hero, ora che l'hero è
   una foto a tutto schermo la si ritrova qui, nella griglia essenziale
   subito sotto, al posto del vecchio "Foto: ritratto (da sostituire)" ---------- */
.portrait-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  margin: 0 auto 1.6rem;
}
/* bagliore morbido dietro l'illustrazione: la trasforma da "disegno al
   tratto isolato" a un vero soggetto illuminato di scena */
.portrait-slot::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116,194,180,0.30), transparent 68%);
  filter: blur(6px);
  z-index: -1;
}

@keyframes gdv-spin { to { transform: rotate(360deg); } }

/* foto della band, ritagliata a cerchio dentro il portrait-slot */
.hero-portrait {
  height: 100%;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center bottom;
  border-radius: 50%;
  color: var(--green-bright);
  filter: drop-shadow(0 30px 40px rgba(6,14,12,0.45));
  transition: transform 0.45s var(--ease-out);
}
/* al passaggio del mouse, l'illustrazione si "anima": si ingrandisce
   leggermente e si inclina appena */
.hero-portrait:hover {
  transform: scale(1.045) rotate(-1.2deg);
}

/* generic underlined text link (versione non nella pillola .btn), usata
   dove basta un rimando discreto invece di un bottone */
.text-link {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--paper-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.text-link:hover { color: var(--gold); }

/* ---------- highlights: griglia essenziale subito sotto l'hero ----------
   Le tre fasce di contenuto che un tempo si alternavano (sfondo scuro,
   sfondo verde, sfondo carta) diventano qui un'unica griglia minimale
   su un solo sfondo, senza riquadri: molto più respiro tra i blocchi,
   in linea con il layout pulito richiesto sotto la foto a tutto
   schermo dell'hero. */
.highlights { padding: var(--space-section-y) 0; }

/* breve introduzione (ritratto + due righe su Giancarlo) sopra il
   titolo "Discografia": unico blocco non a griglia della sezione */
.highlights-intro {
  max-width: 30rem;
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.highlights-intro .portrait-slot { max-width: 170px; }

.highlights h2.section-heading,
#tour h2.section-heading { text-align: center; }
#tour hr.hairline { margin-left: auto; margin-right: auto; margin-bottom: var(--space-sm); }
.highlights hr.hairline { margin-left: auto; margin-right: auto; margin-bottom: var(--space-sm); }

.highlight-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.highlight-block h3 { margin-bottom: 0.5em; }
/* pallino del colore-tema della pagina dedicata di ogni uscita (vedi
   :root delle pagine green-side/wink-at-me/waltz-n17): reso visibile
   anche qui, prima del titolo nel carosello, così si capisce a colpo
   d'occhio che "ogni disco ha il suo mondo visivo" prima ancora di
   entrare nella sua pagina. Il colore arriva da --swatch, impostato
   inline su ogni slide. */
.album-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--swatch, var(--ra, var(--gold)));
  margin-right: 0.5em;
  box-shadow: 0 0 0 3px rgba(238,244,241,0.08);
  vertical-align: middle;
}
.highlight-block p { margin-bottom: 1.3em; }
.highlight-block .social-row { justify-content: center; margin-top: 0.3rem; }
.highlight-cover {
  width: min(220px, 70%);
  aspect-ratio: 1 / 1;
  margin: 0 auto 1.6rem;
  box-shadow: var(--shadow-md);
}
.album-swiper .highlight-cover {
  width: min(360px, 90%);
}
.highlight-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

/* ---------- discografia: carosello 3D coverflow (Swiper.js) ----------
   Pannello nero a sé, più scuro dello sfondo della pagina, per far
   risaltare il contrasto delle copertine come in un espositore. Swiper
   gestisce da solo prospettiva/rotazione/scala di ogni slide (opzione
   effect:"coverflow" in index.html); qui aggiungiamo solo lo scurimento
   delle copertine laterali e nascondiamo testo/link ovunque tranne che
   sulla slide attiva, mantenendo tutte le card alla stessa altezza. */
.discography-panel {
  background-color: #050a08;
  background-image: var(--grain);
  background-repeat: repeat;
  background-size: 180px 180px;
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 4vw, 3rem);
  box-shadow: inset 0 0 0 1px var(--surface-line);
}
.discography-title {
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.28em;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--paper);
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}

.album-swiper {
  position: relative;
  width: 100%;
  padding: 1rem 0 3rem;
}
.album-swiper .swiper-slide {
  width: clamp(240px, 48vw, 400px);
  transition: opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}
.album-swiper .swiper-slide .highlight-block { cursor: pointer; }
.album-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.55;
  filter: brightness(0.45);
}
.album-swiper .swiper-slide-active {
  opacity: 1;
  filter: none;
}
.album-swiper .swiper-slide:not(.swiper-slide-active) h3,
.album-swiper .swiper-slide:not(.swiper-slide-active) .album-year,
.album-swiper .swiper-slide:not(.swiper-slide-active) .highlight-actions {
  visibility: hidden;
}
.album-swiper .swiper-slide-active .highlight-block { cursor: default; }
/* Sulla slide attiva il resto della card non è cliccabile (il titolo, il
   testo), ma la copertina sì: apre la pagina dedicata dell'album (vedi
   lo script in index.html). Il puntatore lo segnala anche qui. */
.album-swiper .swiper-slide-active .highlight-cover { cursor: pointer; }

.album-swiper-arrow {
  position: absolute;
  top: 40%;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  color: var(--paper-dim);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.album-swiper-arrow:hover {
  background: var(--surface-hover);
  border-color: var(--paper);
  color: var(--paper);
}
.album-swiper-arrow:active { transform: scale(0.94); }
.album-swiper-arrow svg { width: 17px; height: 17px; }
.album-swiper-arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }
.album-swiper-prev { left: clamp(0.25rem, 2vw, 1.25rem); }
.album-swiper-next { right: clamp(0.25rem, 2vw, 1.25rem); }
@media (max-width: 560px) {
  .album-swiper-arrow { width: 34px; height: 34px; }
  .album-swiper-prev { left: 0.1rem; }
  .album-swiper-next { right: 0.1rem; }
}

/* riga di chiusura della sezione: dove ascoltare, valida per tutta la
   discografia e non per un singolo album */
.highlights-listen {
  text-align: center;
  margin-top: var(--space-sm);
}
.highlights-listen h3 { margin-bottom: 0.6em; }
.highlights-listen .social-row { justify-content: center; }

/* ---------- discografia.html: "scaffale" di copertine ----------
   Sostituisce il carosello coverflow (rimasto solo nella home) con uno
   scroll orizzontale nativo (niente libreria JS): su mobile le copertine
   occupano quasi tutto lo schermo e si scorrono una alla volta con lo
   swipe, con lo scroll-snap che le "aggancia" al centro; su desktop
   diventano uno scaffale di dischi leggermente inclinati, uno diverso
   dall'altro, che si raddrizzano e si sollevano al passaggio del mouse —
   più vicino all'idea di sfogliare una crate di vinili che a un solito
   carosello con le frecce. Ogni copertina è un link vero (<a>): premerla
   (o toccarla su mobile) apre la pagina di quell'album. */
.disco-shelf { margin: 0 auto; }
.disco-shelf-track {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 8vw 1.4rem;
  margin: 0 -8vw;
  scrollbar-width: none;
}
.disco-shelf-track::-webkit-scrollbar { display: none; }

.disco-card {
  flex: 0 0 78vw;
  max-width: 360px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.disco-card-cover {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #050a08;
}
.disco-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.disco-card-meta { padding: 1rem 1.2rem 1.3rem; }
.disco-card-meta h3 { margin-bottom: 0.35em; font-size: 1.05rem; }
.disco-card-meta .album-year { display: block; }
.disco-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.7em;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--gold);
}
.disco-card-cta svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .disco-card:hover .disco-card-cta svg { transform: translateX(3px); }
}

/* indicatori a puntini: solo su mobile, per segnalare "ce ne sono altri"
   e per saltare direttamente a un album senza scorrere uno a uno */
.disco-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.2rem; }
.disco-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--surface-line);
  cursor: pointer;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.disco-dot.is-active { background: var(--gold); transform: scale(1.25); }

/* Da qui in su (tablet/desktop) le copertine non occupano più quasi
   tutto lo schermo: diventano uno scaffale, con dimensione fissa e un
   leggero disallineamento verticale/rotazione — alternati via
   nth-child, non inline, così vale anche per i titoli aggiunti in
   futuro senza dover ritoccare l'HTML di ognuno. */
@media (min-width: 760px) {
  .disco-shelf-track {
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    padding: 2.5rem 0.5rem 1rem;
    margin: 0;
    gap: 2.4rem;
  }
  .disco-card {
    flex: 0 0 clamp(220px, 22vw, 280px);
    transform: rotate(var(--disco-tilt, 0deg));
  }
  .disco-card:nth-child(3n+1) { --disco-tilt: -2.5deg; margin-top: 0.6rem; }
  .disco-card:nth-child(3n+2) { --disco-tilt: 1.8deg; margin-top: -0.4rem; }
  .disco-card:nth-child(3n+3) { --disco-tilt: -1.2deg; margin-top: 1rem; }
  .disco-card:hover {
    transform: rotate(0deg) translateY(-10px) scale(1.045);
    box-shadow: 0 22px 40px rgba(6,14,12,0.4);
    z-index: 2;
  }
  .disco-dots { display: none; }
}

/* ---------- photo placeholder blocks (no real photos yet) ----------
   Non un riquadro tratteggiato con scritta "da sostituire" — che legge
   come una pagina incompiuta — ma una superficie con un motivo grafico
   proprio (gradiente + monogramma), pensata per stare bene anche se
   restasse così: quando arriverà una foto vera basta sostituire questo
   blocco con un tag <img>. */
.photo-slot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 20%, rgba(62,207,174,0.16), transparent 55%),
    linear-gradient(155deg, var(--bg-raised-2) 0%, var(--bg-raised) 55%, var(--bg) 100%);
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  min-height: 220px;
  box-shadow: inset 0 0 0 1px var(--surface-line);
}
.photo-slot::before {
  content: "GDV";
  position: absolute;
  z-index: -1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 5rem;
  color: rgba(238,244,241,0.05);
  letter-spacing: -0.02em;
}
.section-paper .photo-slot {
  background:
    radial-gradient(circle at 30% 20%, rgba(28,58,51,0.08), transparent 55%),
    linear-gradient(155deg, #fff 0%, #f2ecdc 100%);
  color: #6b6455;
  box-shadow: inset 0 0 0 1px rgba(18,24,15,0.1);
}
.section-paper .photo-slot::before { color: rgba(18,24,15,0.05); }

/* ---------- cards ---------- */
.grid { display: grid; gap: var(--space-sm); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

/* two-column split sections (foto/testo) — impilano su mobile */
.split-60-40 { grid-template-columns: 1.3fr 0.7fr; }
.split-story { grid-template-columns: 1.2fr 0.8fr; }
.split-even { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
  .split-60-40, .split-story, .split-even { grid-template-columns: 1fr; }
}

.album-card {
  background: var(--bg-raised);
  border-radius: var(--radius-lg);
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .album-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}
.album-card h3 { margin-bottom: 0; }
.album-year { font-family: var(--font-mono); color: var(--green-bright); font-size: 0.85rem; }
.album-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; }
.album-links a {
  font-size: 0.85rem;
  text-decoration: none;
  border: 1px solid rgba(238,244,241,0.3);
  border-radius: 999px;
  padding: 0.4em 0.9em;
  color: var(--paper-dim);
}
.album-links a:hover { border-color: var(--gold); color: var(--gold); }
.album-links a.social-icon { padding: 0; width: 38px; height: 38px; border-radius: 50%; }
.album-links a.social-icon svg { width: 18px; height: 18px; }

/* vinyl abstract cover art */
.cover-art { aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; }

/* ---------- shop ---------- */

/* Vetrina vinile: su desktop lo spazio resta come le altre pagine
   interne; su smartphone comprimiamo l'intestazione e i margini
   intorno alla card così la copertina, il prezzo e il pulsante
   d'acquisto entrano meglio in una sola schermata, senza dover
   scorrere subito per vedere il vinile. */
.shop-vinyl-section { padding: var(--space-section-y) 0 clamp(2.4rem, 8vw, 4rem); }
@media (max-width: 640px) {
  .shop-vinyl-section { padding: 0.4rem 0 1.8rem; }
  .shop-vinyl-section .grid { gap: 1.1rem; }
  .shop-card { padding: 1.1rem; gap: 0.65rem; }
  .shop-card-body { gap: 0.55rem; }
  .shop-card h3 { margin-bottom: 0.1em; }
  .shop-card p { margin-bottom: 0.6em; }
}

.shop-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow: var(--shadow-md);
}
.shop-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.shop-card .price { font-family: var(--font-mono); font-size: 1.1rem; }
.shop-card p { color: #3c3830; }
.shop-card.is-soldout .price { text-decoration: line-through; opacity: 0.55; }
.cover-wrap { position: relative; }

/* Quando un articolo è esaurito, la copertina e il blocco testuale si
   "spengono" (sbiaditi e non cliccabili), MA lo stamp "Sold out" e
   l'etichetta "Esaurito" restano sempre a piena luminosità e ben in
   vista sopra l'immagine — non vanno mai sbiaditi, perché sono
   proprio l'indicazione che l'articolo non è disponibile. Il
   pulsante "Avvisami" resta anch'esso sempre a piena luminosità e
   pienamente cliccabile. */
.shop-card.is-soldout .cover-wrap .cover-real {
  opacity: 0.35;
  filter: grayscale(0.6);
}
/* la copertina di un articolo esaurito non deve reagire al passaggio del
   mouse (niente inclinazione/ingrandimento) — solo il timbro si muove */
.shop-card.is-soldout .cover-real,
.shop-card.is-soldout .cover-real:hover {
  transform: none;
  box-shadow: none;
}
.shop-card.is-soldout .shop-card-body {
  opacity: 0.38;
  filter: grayscale(0.55);
  pointer-events: none;
  user-select: none;
}
.notify-btn { display: none; margin-top: 0.2rem; opacity: 1; pointer-events: auto; box-shadow: 0 0 0 3px rgba(62,207,174,0.18); }
.shop-card.is-soldout .notify-btn { display: inline-flex; }
/* la campanella "suona" da sola qualche istante dopo l'arrivo sulla pagina,
   come promemoria che si può chiedere di essere avvisati — poi si ferma */
.notify-btn .icon-inline {
  transform-origin: 50% 15%;
  animation: gdv-bell-ring 2.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) 2;
  animation-delay: 0.7s;
}
@keyframes gdv-bell-ring {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(4deg); }
  30%  { transform: rotate(-3deg); }
  45%  { transform: rotate(2deg); }
  60%  { transform: rotate(-1.4deg); }
  75%  { transform: rotate(0.6deg); }
  90%  { transform: rotate(-0.3deg); }
  100% { transform: rotate(0deg); }
}
/* al passaggio del mouse su qualsiasi punto del rettangolo dell'articolo
   esaurito, l'intero pulsante "Avvisami" oscilla come una campanella
   appesa, con il perno al centro in alto */
.notify-btn {
  transform-origin: 50% -10px;
}
.shop-card.is-soldout:hover .notify-btn {
  animation: gdv-bell-swing 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1;
}
@keyframes gdv-bell-swing {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(1.5deg); }
  30%  { transform: rotate(-1.1deg); }
  45%  { transform: rotate(0.7deg); }
  60%  { transform: rotate(-0.5deg); }
  75%  { transform: rotate(0.25deg); }
  87%  { transform: rotate(-0.1deg); }
  100% { transform: rotate(0deg); }
}
.stamp-soldout {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  transform: translate(-50%, -50%) rotate(-10deg);
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
  user-select: none;
  z-index: 1;
}
/* al passaggio del mouse sull'album esaurito, il timbro "Sold out" fa un
   piccolo "colpo di timbro" (si ingrandisce e oscilla) per farsi notare */
.shop-card.is-soldout:hover .stamp-soldout {
  animation: gdv-stamp-thump 0.55s ease;
}
@keyframes gdv-stamp-thump {
  0%   { transform: translate(-50%, -50%) rotate(-10deg) scale(1); }
  25%  { transform: translate(-50%, -50%) rotate(-17deg) scale(1.14); }
  55%  { transform: translate(-50%, -50%) rotate(-4deg) scale(0.96); }
  80%  { transform: translate(-50%, -50%) rotate(-12deg) scale(1.03); }
  100% { transform: translate(-50%, -50%) rotate(-10deg) scale(1); }
}
/* ---------- tour ---------- */
.tour-list { display: flex; flex-direction: column; gap: 1.1rem; }
.tour-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tour-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}
.tour-date { font-family: var(--font-mono); text-align: center; min-width: 70px; flex: none; }
.tour-date .day { font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--green-deep); }
.tour-date .month { font-size: 0.75rem; letter-spacing: 0.06em; color: #6b6455; }
.tour-info { flex: 1 1 240px; min-width: 220px; }
.tour-info h3 { margin-bottom: 0.15em; }
.tour-info .tour-city { font-family: var(--font-mono); font-size: 0.85rem; color: var(--green-deep); margin-bottom: 0.3em; }
.tour-info p { color: #3c3830; margin-bottom: 0; font-size: 0.92rem; }
.tour-action { margin-left: auto; flex: none; }
.badge-free {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border: 1px solid var(--green-deep);
  color: var(--green-deep);
  padding: 0.45em 0.95em;
  border-radius: 999px;
}

/* data già svolta (sotto le 5 date totali restano in lista, sbiadite,
   invece di sparire — vedi lo script del Tour in index.html): la riga
   di "annullato" attraversa l'intera card (data, luogo e azione),
   non solo il pulsante, così si legge a colpo d'occhio sull'intera riga. */
.tour-card-past { position: relative; opacity: 0.7; }
.tour-card-past .tour-date .day,
.tour-card-past .tour-date .month,
.tour-card-past .tour-info .tour-city { color: #8a8478; }
.tour-card-past::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1.5px;
  background: #8a8478;
  transform: translateY(-50%) rotate(-0.6deg);
  pointer-events: none;
}
/* stessa etichetta che avrebbe avuto da evento futuro (biglietto,
   ingresso libero...) ma svuotata: niente più pillola piena come per una
   data disponibile, solo il contorno — la riga che la "annulla" è già
   quella dell'intera card qui sopra. */
.tour-action-past {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  background: transparent;
  border: 1px dashed #8a8478;
  color: #8a8478;
  pointer-events: none;
  cursor: default;
}
@media (max-width: 760px) { .tour-action-past { min-width: 0; } }

/* In verticale il rettangolo della data (giorno grande sopra il mese)
   affiancato al testo su tre righe occupa troppo spazio e lascia il
   pulsante isolato in fondo a destra: la data diventa una riga compatta
   in cima ("24 OTT"), tutto il resto si impila a piena larghezza e il
   pulsante/etichetta si estende quanto la card invece di restare
   piccolo in un angolo. */
@media (max-width: 760px) {
  .tour-card {
    flex-direction: column;
    align-items: stretch;
    padding: 1.3rem 1.4rem;
    gap: 0.7rem;
  }
  .tour-date {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.4em;
    text-align: left;
    min-width: 0;
  }
  .tour-date .day { font-size: 1.25rem; }
  .tour-info { flex: 1 1 auto; min-width: 0; }
  .tour-action { margin-left: 0; }
  .tour-action .btn,
  .tour-action .badge-free {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

.tour-empty, .shop-empty {
  font-family: var(--font-mono);
  color: var(--paper-dim);
  font-size: 0.95rem;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--surface-line);
  border-radius: var(--radius);
  padding: 1.6rem;
}

/* ---------- pagina riservata (backstage) ---------- */
.backstage-lock { max-width: 380px; margin: 2rem auto 0; }
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--green-bright);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field input[type="time"],
.field input[type="url"],
.field textarea {
  background: var(--bg-raised-2);
  border: none;
  box-shadow: inset 0 0 0 1px var(--surface-line);
  border-radius: var(--radius);
  color: var(--paper);
  padding: 0.65em 0.8em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  width: 100%;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.field-counter {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--paper-dim);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.admin-card {
  background: var(--bg-raised);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-sm);
}
.admin-card h3 { margin-bottom: 1em; }
.notify-admin-block {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px dashed rgba(238,244,241,0.2);
}
.notify-admin-block .admin-note { font-size: 0.85rem; }
.switch-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; }
.switch-row .switch-label {
  font-size: 0.92rem;
  color: var(--paper-dim);
  opacity: 0.55;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.switch-row .switch-label.is-active { color: var(--paper); opacity: 1; font-weight: 600; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(238,244,241,0.25);
  border-radius: 999px; transition: 0.2s;
}
.switch .slider::before {
  content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
  background: var(--paper); border-radius: 50%; transition: 0.2s;
}
.switch input:checked + .slider { background: var(--green-bright); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.admin-toolbar { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; margin: 1.6rem 0; }
.admin-note {
  font-size: 0.85rem;
  color: var(--paper-dim);
  background: rgba(62,207,174,0.08);
  border: 1px solid rgba(62,207,174,0.25);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  max-width: 70ch;
}
.admin-remove {
  font-size: 0.8rem;
  color: var(--rust);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: var(--font-body);
}
.save-toast { font-family: var(--font-mono); font-size: 0.85rem; color: var(--green-bright); margin-top: 0.7rem; min-height: 1.2em; }
.backstage-locked-hint { color: var(--paper-dim); font-size: 0.9rem; }
#backstage-error { color: #e59a7a; font-size: 0.88rem; min-height: 1.2em; }

/* ---------- timeline (bio page — a genuine sequence) ---------- */
.timeline { border-left: 1px solid rgba(62,207,174,0.4); padding-left: 1.6rem; display: flex; flex-direction: column; gap: 2.2rem; }
.timeline-item { position: relative; }
.timeline-item::before {
  content: "";
  position: absolute; left: -1.68rem; top: 0.35rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
}
.timeline-year { font-family: var(--font-mono); color: var(--green-bright); font-size: 0.9rem; }
.timeline-title { display: flex; align-items: center; gap: 0.6em; }
.timeline-cover {
  width: 2.1em;
  height: 2.1em;
  flex: none;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: var(--shadow-sm);
}

/* ---------- contatti: icona accanto a email e telefono ---------- */
.contact-line { display: flex; align-items: center; gap: 0.65em; }
.contact-icon { width: 1.15em; height: 1.15em; flex: none; color: var(--paper-dim); }
/* riquadro "card" per i blocchi di contatto/social, sullo stesso
   pattern già usato altrove (vedi .lesson-banner): superficie rialzata,
   angoli morbidi, ombra minima — dà struttura visibile invece di
   lasciare testo nudo sullo sfondo della pagina */
.contact-card {
  background: var(--bg-raised);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.2rem) clamp(1.6rem, 4vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  max-width: 32rem;
}
.contact-card h3:first-child { margin-top: 0; }

/* ---------- tracklist / accordion (green-side page) ---------- */
.tracklist { border-top: 1px solid rgba(238,244,241,0.18); }
.track {
  border-bottom: 1px solid rgba(238,244,241,0.18);
}
.track-row {
  width: 100%;
  background: none;
  border: none;
  color: var(--paper);
  display: grid;
  grid-template-columns: 2.15rem 2.4rem 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0.2rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.02rem;
  text-align: left;
}
@media (max-width: 480px) {
  /* Stessa riga unica del desktop (numero, titolo, durata, freccia tutti
     allineati), solo con colonne più strette: prima la durata finiva su
     una seconda riga sotto il titolo, rompendo la coerenza con il resto
     del sito. Il titolo tronca con "..." nei casi più lunghi invece di
     andare a capo o spingere fuori la durata. */
  .track-row {
    grid-template-columns: 2.3rem 1.6rem 1fr auto auto;
    gap: 0.5rem;
    font-size: 0.92rem;
  }
  /* Il pulsante "ascolta" resta comodo da toccare col dito anche sugli
     schermi più stretti: qui è il controllo più usato della pagina, non
     va rimpicciolito rispetto al desktop. */
  .track-play-btn { width: 2.1rem; height: 2.1rem; }
  .track-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.track-row:hover { color: var(--gold); }
.track-num { font-family: var(--font-mono); color: var(--green-bright); font-size: 0.9rem; }
.track-title-wrap { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

/* ---------- pulsante "ascolta" accanto al nome della traccia ---------- */
.track-play-btn {
  width: 2.05rem;
  height: 2.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(238, 244, 241, 0.35);
  background: rgba(238, 244, 241, 0.06);
  color: var(--paper);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.track-play-btn svg { width: 0.95rem; height: 0.95rem; }
.track-play-btn .icon-pause { display: none; }
.track-play-btn.is-playing .icon-play { display: none; }
.track-play-btn.is-playing .icon-pause { display: block; }
.track-play-btn:hover { border-color: var(--ra, var(--gold)); color: var(--ra, var(--gold)); }
.track-play-btn:active { transform: scale(0.9); }
.track-play-btn.is-playing {
  background: var(--ra, var(--gold));
  border-color: var(--ra, var(--gold));
  color: var(--ink);
}

/* riga con pulsante "ascolta" per le pagine a brano singolo (es. Waltz n. 17) */
.track-embed-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.track-panel-inner .track-note { grid-column: 1 / -1; margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--paper-dim); }
.track-panel-inner .track-note a { color: inherit; }
.track-dur { font-family: var(--font-mono); font-size: 0.85rem; color: var(--paper-dim); }
.track-caret { font-size: 0.8rem; transition: transform 0.25s ease; color: var(--paper-dim); }
.track[data-open="true"] .track-caret { transform: rotate(90deg); }

.track-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.track[data-open="true"] .track-panel { max-height: 640px; }
/* Colonna unica a piena larghezza: prima Composizione/Formazione stavano
   in una seconda colonna stretta a destra (pensata per stare accanto al
   pulsante "Ascolta il brano", ora rimosso), lasciando i crediti compressi
   in 320px invece di usare tutto lo spazio disponibile a sinistra. */
.track-panel-inner { padding: 0 0.2rem 1.6rem; display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.track-credits--full { grid-column: 1 / -1; }
.track-credits dt { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-bright); margin-top: 0.7em; }
.track-credits dt:first-of-type { margin-top: 0; }
.track-credits dd { margin: 0.15em 0 0; font-size: 0.95rem; line-height: 1.4; color: var(--paper-dim); }
.track-embed iframe { border-radius: var(--radius); border: none; }

/* ---------- credits list ---------- */
.credits-grid {
  display: grid;
  grid-template-columns: minmax(110px, 160px) 1fr;
  column-gap: 1.2rem;
  row-gap: 0.75rem;
  align-items: baseline;
  margin: 0;
}
.credit-item { display: contents; }
.credits-grid dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0;
}
.credits-grid dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}
/* icona social inline accanto a un nome nei crediti (es. Instagram del
   fonico o dello studio di registrazione), invece della riga intera di
   .social-icon pensata per il footer/"Ascolta di più". */
.credit-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  margin-left: 0.45em;
  color: var(--green-deep);
  vertical-align: -0.28em;
  transition: color 0.2s ease;
}
.credit-social svg { width: 100%; height: 100%; display: block; }
.credit-social:hover { color: var(--gold); }
@media (max-width: 480px) {
  .credits-grid { grid-template-columns: minmax(88px, 118px) 1fr; column-gap: 0.8rem; row-gap: 0.6rem; }
  .credits-grid dt { font-size: 0.62rem; }
}

/* ---------- social / platform icon buttons ---------- */
.social-row { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.social-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(238,244,241,0.3);
  color: var(--paper-dim);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.social-icon svg { width: 20px; height: 20px; display: block; }
.social-icon:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.section-paper .social-icon { border-color: rgba(18,24,15,0.25); color: var(--ink); }
.release-page .social-icon:hover { border-color: var(--ra); color: var(--ra); }

/* text links that live alongside icon buttons in the same row (e.g. "Tutta la discografia") */
.social-row a.text-link {
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--paper-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.social-row a.text-link:hover { color: var(--gold); }
.release-page .social-row a.text-link:hover { color: var(--ra); }

/* small inline icon inside a text button, e.g. "Ascolta su Spotify" */
.btn svg.icon-inline, .album-links a svg.icon-inline { width: 16px; height: 16px; flex: none; }
/* icona accanto ad "Acquista il vinile": più grande delle altre icone dei
   bottoni, alta quanto una lettera maiuscola, per essere visibile */
.icon-buy.icon-inline, .btn .icon-buy.icon-inline { width: 1.3em; height: 1.3em; flex: none; }


/* ---------- footer ----------
   Più sottile del resto del sito di proposito: qui non c'è più nulla
   da leggere, solo da raggiungere (privacy, cookie, social), quindi
   meno spazio, icone più piccole e un font-size ridotto rispetto al
   resto della pagina. */
footer {
  position: relative;
  padding: 1.75rem 0 1.5rem;
  font-size: 0.82rem;
  color: var(--paper-dim);
}
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--surface-line) 20%, var(--surface-line) 80%, transparent);
}
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.9rem; }
footer .brand { font-size: 1.05rem; }
footer p { margin: 0.25em 0 0; }
footer .social-row { gap: 0.4rem; }
footer .social-icon { width: 30px; height: 30px; }
footer .social-icon svg { width: 14px; height: 14px; }

/* ---------- per-release color themes ----------
   Ogni pagina-album imposta --rt / --rm / --ra (top, mid, accento)
   con un piccolo <style> nel <head>, campionati dai colori reali
   della pagina Spotify di quella uscita. Il resto del sito
   (nav, footer) resta sul brand fisso qui sopra. */
.release-page .hero-kicker { color: var(--ra); }
.release-page hr.hairline { border-top-color: var(--ra); }
.release-page .track-num { color: var(--ra); }
.release-page .track-row:hover { color: var(--ra); }
.release-page .track-credits dt { color: var(--ra); }
.release-page .credits-grid dt { color: var(--ra); }
/* Nella sezione "Crediti" lo sfondo diventa chiaro (.section-paper):
   il colore accento dell'uscita è pensato per sfondi scuri e lì
   risulterebbe poco leggibile, quindi qui torniamo al verde scuro
   del brand per garantire contrasto. */
.release-page .section-paper .credits-grid dt { color: var(--green-deep); }
.release-page .btn { border-color: var(--ra); }
.release-page .btn:hover { background: var(--ra); color: #14100f; }
.release-page .btn-solid { background: var(--ra); color: #14100f; }
.release-page .btn-solid:hover { background: var(--paper); border-color: var(--paper); }
/* linea sottile che separa l'azione principale (Ascolta) dalle azioni
   secondarie (Torna/Vai, Condividi), per una gerarchia più leggibile */
.release-page .hero-actions .actions-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(238,244,241,0.22);
}
@media (max-width: 560px) { .release-page .hero-actions .actions-divider { display: none; } }
.release-page .social-row a:hover { border-color: var(--ra); color: var(--ra); }
/* Il link "Tutta la discografia" è un .btn dentro .social-row: deve
   comportarsi in hover come gli altri bottoni pieni (es. "Ascolta su
   Spotify"), non come le icone social accanto a cui si trova. */
.release-page .social-row .btn:hover { color: #14100f; border-color: var(--paper); }

.release-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ra);
  border: 1px solid var(--ra);
  border-radius: 999px;
  padding: 0.3em 0.9em;
  margin-bottom: 1rem;
}
/* Credito dell'artista sotto il titolo dell'album, come sulla
   copertina di "On The Green Side": "OnTheGreenSide" (.titolo-album)
   seguito subito sotto da "GIANCARLO DEL VITTO" (.nome-artista). */
.release-hero .nome-artista { display: block; margin: 0.35em 0 1em; color: var(--paper-dim); }

.cover-real { width: 100%; border-radius: var(--radius); display: block; object-fit: cover; }

/* small cover thumb inside discography cards */
.album-card .cover-real, .shop-card .cover-real { aspect-ratio: 1/1; }

/* ---------- profondità al passaggio del mouse sulle copertine (solo con mouse reale) ---------- */
@media (hover: hover) and (pointer: fine) {
  .cover-real, .release-row img {
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.4s ease;
  }
  .cover-real:hover {
    transform: rotate(-1.2deg) scale(1.025);
    box-shadow: 0 20px 46px rgba(0,0,0,0.4);
  }
  .release-row img:hover {
    transform: rotate(-2deg) scale(1.08);
    position: relative;
    z-index: 2;
    box-shadow: 0 14px 30px rgba(0,0,0,0.4);
  }
}

/* ---------- reveal allo scroll ----------
   Le classi vengono aggiunte via JS (main.js): se JS è disattivato,
   gli elementi restano semplicemente visibili fin da subito. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* release swatch used in the discography list on musica.html */
.release-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1.4rem;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(238,244,241,0.14);
}
.release-row img { width: 96px; height: 96px; border-radius: var(--radius); object-fit: cover; }
.release-meta { font-family: var(--font-mono); font-size: 0.82rem; color: var(--paper-dim); }
@media (max-width: 640px) {
  .release-row { grid-template-columns: 64px 1fr; }
  .release-row img { width: 64px; height: 64px; }
  .release-row .album-links { grid-column: 1 / -1; }
}

/* ---------- legal pages (privacy / cookie) ---------- */
.legal-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 2.4rem;
}
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 1.8em; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1.05rem; color: var(--green-deep); margin-top: 1.3em; }
.legal p, .legal li { color: var(--ink); }
.legal ul, .legal ol { max-width: var(--measure); margin: 0 0 1.1em; padding-left: 1.3em; }
.legal li { margin-bottom: 0.5em; line-height: 1.5; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal .btn { margin-top: 0.4rem; }

/* ---------- footer legal links ---------- */
.legal-links { margin: 0.5rem 0 0; font-size: 0.82rem; }
.legal-links a, .legal-links button.linklike {
  color: var(--paper-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none; border: none; padding: 0;
  font: inherit; cursor: pointer;
}
.legal-links a:hover, .legal-links button.linklike:hover { color: var(--gold); }
.legal-links .sep { opacity: 0.5; margin: 0 0.45em; }

/* ---------- cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 500;
  display: flex;
  justify-content: center;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  flex-wrap: wrap;
  max-width: 900px;
  width: 100%;
  background: var(--bg-raised-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--surface-line);
  padding: 1.2rem 1.5rem;
}
.cookie-banner p { margin: 0; max-width: 60ch; font-size: 0.86rem; color: var(--paper-dim); }
.cookie-banner a { color: var(--gold); }
.cookie-banner-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; flex: none; }
.btn-sm { padding: 0.55em 1.15em; font-size: 0.82rem; }
@media (max-width: 640px) { .cookie-banner-inner { flex-direction: column; align-items: flex-start; } }
@media (max-width: 640px) {
  /* area di tocco più comoda per il pulsante "chiudi" del modale, solo
     su mobile: a schermo intero e col dito, un target piccolo si sbaglia
     più facilmente che col mouse */
  .modal-close { padding: 0.6rem; top: 0.35rem; right: 0.35rem; }
}

/* ---------- modale "Avvisami quando di nuovo disponibile" ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(8,12,8,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--bg-raised);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.7rem 1.7rem;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--surface-line);
}
.modal-box h3 { margin-top: 0; margin-bottom: 0.3em; }
.modal-item-label { font-family: var(--font-mono); font-size: 0.85rem; color: var(--gold); margin: 0 0 1.1em; }
.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  background: none;
  border: none;
  color: var(--paper-dim);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.3rem;
}
.modal-close:hover { color: var(--paper); }
.modal-error { color: #e08a6a; font-size: 0.85rem; min-height: 1.2em; margin: 0.5em 0 0; }
.modal-success { color: var(--green-bright); font-size: 0.92rem; margin: 0.3em 0 0; }
.modal-box .btn { width: 100%; justify-content: center; margin-top: 0.4rem; }

/* ---------- carosello videoclip (green-side-vinile.html) ----------
   Stesso "pannello nero" del carosello discografia in home, ma qui i
   video restano sempre visibili (a differenza di .track-embed, pensato
   per nascondere l'iframe "sorgente" dietro al player col vinile): lo
   scoping sotto .video-swiper riscrive solo qui la regola generica
   ".track-embed iframe { display:none }" più sotto in questo file. */
.video-panel {
  background-color: #050a08;
  background-image: var(--grain);
  background-repeat: repeat;
  background-size: 180px 180px;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: inset 0 0 0 1px var(--surface-line);
}
.video-swiper { position: relative; width: 100%; padding: 1rem 0 0.5rem; }
/* stesso trattamento 3D coverflow del carosello discografia in home
   (.album-swiper): slide attiva grande e frontale, le altre più piccole,
   scurite e non cliccabili finché non diventano quella centrale. */
.video-swiper .swiper-slide {
  width: clamp(260px, 66vw, 860px);
  transition: opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}
/* Sotto i 640px il 66vw sopra tocca quasi sempre il minimo di 260px: essendo
   il video in 16:9 (a differenza delle foto, verticali 4:5, che restano
   "sostanziose" anche strette), a 260px di larghezza l'altezza scende a
   circa 146px e la slide sembra minuscola sul telefono. Qui la slide cresce
   quasi a piena larghezza del pannello. */
@media (max-width: 640px) {
  .video-swiper .swiper-slide { width: clamp(260px, 88vw, 620px); }
}
.video-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.55;
  filter: brightness(0.45);
  pointer-events: none;
}
.video-swiper .swiper-slide-active { opacity: 1; filter: none; }
.video-swiper .video-embed-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.video-swiper .video-embed-frame iframe {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.video-swiper .embed-consent-gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: rgba(5,10,8,0.85);
}
.video-swiper .embed-consent-gate p { max-width: 40ch; }
.video-swiper-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  color: var(--paper-dim);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.video-swiper-arrow:hover { background: var(--surface-hover); border-color: var(--paper); color: var(--paper); }
.video-swiper-arrow:active { transform: translateY(-50%) scale(0.94); }
.video-swiper-arrow svg { width: 17px; height: 17px; }
.video-swiper-arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }
.video-swiper-prev { left: clamp(-0.5rem, 1vw, 0.5rem); }
.video-swiper-next { right: clamp(-0.5rem, 1vw, 0.5rem); }
@media (max-width: 560px) {
  .video-swiper-arrow { width: 34px; height: 34px; }
}

/* ---------- carosello foto (green-side-vinile.html) ----------
   Stesso "pannello nero" e stesso trattamento 3D coverflow del carosello
   videoclip qui sopra. Le foto vere (Rec/Press) hanno proporzioni miste
   (verticali e orizzontali): invece di forzarle tutte in un riquadro
   4:5 con object-fit:cover — che le ritagliava, tagliando via pezzi di
   inquadratura — ogni slide qui prende la larghezza della propria
   immagine (slidesPerView:"auto" in JS legge questa larghezza), mentre
   l'altezza è comune a tutte le foto: mostra la proporzione originale
   per intero, il più grande possibile nello spazio disponibile. */
.photo-panel {
  position: relative;
  background-color: #050a08;
  background-image: var(--grain);
  background-repeat: repeat;
  background-size: 180px 180px;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: inset 0 0 0 1px var(--surface-line);
}
/* Finché autoHeight (JS, sotto) non calcola l'altezza sulla prima foto
   caricata, .photo-swiper resta a 0px: senza un minimo fisso il
   pannello collassava a una striscia vuota, e le foto — essendo
   loading="lazy" — restavano "lontane dallo schermo" secondo il
   browser proprio perché il loro contenitore era invisibile, ritardando
   il caricamento di qualche secondo invece di essere immediato. */
.photo-swiper { position: relative; width: 100%; padding: 1rem 0 0.5rem; min-height: clamp(280px, 60vh, 640px); }
/* Il minimo qui sopra serve solo prima che Swiper calcoli l'altezza
   vera (autoHeight) sulla prima foto caricata — una volta pronta (vedi
   .is-ready aggiunta da gdvInitPhotoSwiper insieme a .is-loaded sullo
   spinner), va tolto: altrimenti restava un floor fisso più alto della
   foto reale, e su mobile — dove le foto orizzontali sono già strette
   di suo — si vedeva un'enorme fascia vuota sotto la foto. */
.photo-swiper.is-ready { min-height: 0; }
/* Spinner mostrato sopra il pannello finché la prima foto della galleria
   non è pronta (vedi gdvInitPhotoSwiper in fondo alla pagina, che gli
   toglie .is-loaded al load del primo <img>) — coprendo così anche il
   tempo di scaricamento vero e proprio della foto, non solo il ritardo
   dovuto al collasso qui sopra. */
.photo-swiper-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}
.photo-swiper-loader.is-loaded { opacity: 0; }
.photo-swiper-loader span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--surface-line);
  border-top-color: var(--paper-dim);
  animation: gdv-spin 0.8s linear infinite;
}
@keyframes gdv-spin { to { transform: rotate(360deg); } }
.photo-swiper .swiper-slide {
  width: auto;
  transition: opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}
.photo-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.55;
  filter: brightness(0.45);
  pointer-events: none;
}
.photo-swiper .swiper-slide-active { opacity: 1; filter: none; }
.photo-swiper .swiper-slide img {
  /* max-height + max-width (invece di un height fisso più object-fit:
     contain) lasciano che sia il riquadro stesso ad adattarsi alle
     proporzioni della foto: con un height fisso, le foto molto
     orizzontali finivano per sforare il max-width, e object-fit:contain
     doveva "letterboxare" il riquadro ormai fuori proporzione con due
     fasce nere sopra/sotto invece di mostrare la foto a piena area. */
  display: block;
  height: auto;
  width: auto;
  max-height: clamp(280px, 60vh, 640px);
  max-width: min(86vw, 900px);
  border-radius: var(--radius);
  background: #000;
}
.photo-swiper-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Sfondo scuro pieno (non --surface, quasi trasparente) e bordo/icona
     chiari: senza, la freccia si vedeva solo se la foto sotto era già
     scura di suo — con una foto chiara alle spalle spariva quasi del
     tutto. Uno scrim scuro fisso resta leggibile sopra qualunque foto. */
  background: rgba(5, 10, 8, 0.6);
  border: 1px solid rgba(238, 244, 241, 0.4);
  color: var(--paper);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.photo-swiper-arrow:hover { background: rgba(5, 10, 8, 0.8); border-color: var(--paper); color: var(--paper); }
.photo-swiper-arrow:active { transform: translateY(-50%) scale(0.94); }
.photo-swiper-arrow svg { width: 19px; height: 19px; }
.photo-swiper-arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }
.photo-swiper-prev { left: clamp(-0.5rem, 1vw, 0.5rem); }
.photo-swiper-next { right: clamp(-0.5rem, 1vw, 0.5rem); }
@media (max-width: 560px) {
  .photo-swiper-arrow { width: 34px; height: 34px; }
}

/* Pulsante "schermo intero" delle gallerie Rec/Press: stesso stile
   tondo delle frecce, ma in alto a destra del pannello invece che ai
   lati, per non essere scambiato per un terzo verso di navigazione. */
.photo-swiper-fullscreen {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 11;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(5, 10, 8, 0.6);
  border: 1px solid rgba(238, 244, 241, 0.4);
  color: var(--paper);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.photo-swiper-fullscreen:hover { background: rgba(5, 10, 8, 0.8); border-color: var(--paper); color: var(--paper); }
.photo-swiper-fullscreen svg { width: 19px; height: 19px; }
@media (max-width: 560px) {
  .photo-swiper-fullscreen { width: 34px; height: 34px; }
}

/* ---------- lightbox condiviso (gallerie Rec/Press a schermo intero) ---------- */
.gdv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 10, 8, 0.94);
  padding: clamp(1rem, 5vw, 3rem);
}
.gdv-lightbox[hidden] { display: none; }
body.gdv-lightbox-open { overflow: hidden; }
.gdv-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  /* Gli attributi width/height (messi in JS da gdvRenderLightbox, presi
     dalla <img> originale nel carosello) danno subito il riquadro della
     proporzione giusta, prima ancora che la foto sia scaricata: senza,
     l'immagine vuota collassava alla sua dimensione minima (lo sfondo
     scuro dietro sembrava "stringersi") per poi riallargarsi di scatto
     a foto arrivata. Resta comunque invisibile (opacity) finché non è
     pronta, al posto dello spinner qui sopra. */
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.gdv-lightbox-img.is-loaded { opacity: 1; }
.gdv-lightbox-loader {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.2s var(--ease-out);
  pointer-events: none;
}
.gdv-lightbox-loader.is-loaded { opacity: 0; }
.gdv-lightbox-loader span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--surface-line);
  border-top-color: var(--paper-dim);
  animation: gdv-spin 0.8s linear infinite;
}
.gdv-lightbox-close,
.gdv-lightbox-arrow {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  color: var(--paper-dim);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.gdv-lightbox-close:hover,
.gdv-lightbox-arrow:hover { background: var(--surface-hover); border-color: var(--paper); color: var(--paper); }
.gdv-lightbox-close {
  top: clamp(0.75rem, 3vw, 1.5rem);
  right: clamp(0.75rem, 3vw, 1.5rem);
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  z-index: 1;
}
.gdv-lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
}
.gdv-lightbox-arrow svg { width: 20px; height: 20px; }
.gdv-lightbox-prev { left: clamp(0.5rem, 3vw, 1.5rem); }
.gdv-lightbox-next { right: clamp(0.5rem, 3vw, 1.5rem); }
.gdv-lightbox-counter {
  position: absolute;
  bottom: clamp(0.75rem, 3vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--paper-dim);
}
@media (max-width: 560px) {
  .gdv-lightbox-arrow { width: 38px; height: 38px; }
  .gdv-lightbox-arrow svg { width: 16px; height: 16px; }
}

/* ---------- third-party embed consent gate (Spotify player) ---------- */
/* L'iframe Spotify "classico" (verde) resta nel DOM (serve per il consenso
   cookie e come sorgente dell'ID traccia) ma non deve mai essere visibile:
   l'unica interfaccia di ascolto che l'utente vede è il player col vinile. */
.track-embed iframe { display: none; }
.embed-consent-gate {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--surface-line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.embed-consent-gate p { margin: 0 0 0.8em; max-width: none; font-size: 0.85rem; color: var(--paper-dim); }
.embed-consent-gate[hidden] { display: none; }


/* ---------- trust bar (credenziali compatte, riprova sociale) ---------- */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 0.9em;
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(238,244,241,0.18);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--paper-dim);
}
.trust-bar span { white-space: nowrap; }
.trust-bar span:not(:last-child)::after { content: "·"; margin-left: 0.9em; opacity: 0.5; }

/* ---------- testimonial cards ---------- */
.testimonial-note {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--paper-dim);
  margin: -1.2rem 0 2rem;
}
.testimonial-card {
  background: var(--bg-raised);
  border-radius: var(--radius-lg);
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
}
.testimonial-quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--paper);
}
.testimonial-quote::before { content: "\201C"; color: var(--gold); margin-right: 0.15em; }
.testimonial-author {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--green-bright);
  margin: 0;
}

/* ---------- FAQ / obiezioni (accordion nativo) ---------- */
.faq-list { display: flex; flex-direction: column; gap: 0.7rem; max-width: 62ch; }
.faq-item {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0 1.2rem;
  transition: background 0.2s ease;
}
.faq-item:hover { background: var(--surface-hover); }
.faq-item[open] { background: var(--surface-hover); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.6rem 1.1rem 0;
  position: relative;
  font-weight: 500;
  color: var(--paper);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 1.1rem;
  font-family: var(--font-mono);
  color: var(--gold);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0 0 1.2rem;
  color: var(--paper-dim);
  line-height: 1.55;
}

/* ---------- banner "prenota una lezione" ---------- */
.lesson-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  background: var(--bg-raised);
  border-radius: var(--radius-lg);
  padding: 1.7rem 2rem;
  margin-top: 2.2rem;
  box-shadow: var(--shadow-sm);
}
.lesson-banner-text h3 {
  margin: 0 0 0.35em;
  color: var(--paper);
}
.section-paper .lesson-banner-text h3 { color: var(--paper); }
.lesson-banner-text p {
  margin: 0;
  max-width: 46ch;
  color: var(--paper-dim);
}
.lesson-banner .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .lesson-banner { flex-direction: column; align-items: flex-start; }
}

/* ---------- materiali didattici ---------- */
.materiali-search {
  position: relative;
  max-width: 420px;
  margin-bottom: 1.6rem;
}
.materiali-search input {
  width: 100%;
  background: var(--bg-raised-2);
  box-shadow: inset 0 0 0 1px var(--surface-line);
  border: none;
  border-radius: 999px;
  color: var(--paper);
  padding: 0.7em 1.1em 0.7em 2.5em;
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.materiali-search input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.materiali-search input::placeholder { color: var(--paper-dim); }
.materiali-search svg {
  position: absolute;
  left: 0.9em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--paper-dim);
  pointer-events: none;
}
.materiali-count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #6b6656;
  margin: -1rem 0 1.4rem;
}

/* Una sola "lista" con bordo esterno e righe separate da un divisore
   sottile, invece di card sparse: più compatta e più facile da scorrere. */
.materiali-grid {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.material-card {
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  border-bottom: 1px solid rgba(18,24,15,0.12);
  padding: 1.05rem 1.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  transition: background 0.15s ease;
}
.material-card:last-child { border-bottom: none; }
.material-card:hover { background: rgba(18,24,15,0.035); }
.material-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.material-card-icon {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.material-card-icon svg { width: 0.95rem; height: 0.95rem; }
.material-card-text {
  flex-grow: 1;
  min-width: 0;
}
.material-card h3 {
  margin: 0;
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.material-card p {
  color: #3c3830;
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.material-card-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.material-card-actions .btn { white-space: nowrap; }
/* Il pulsante "Scarica il PDF" qui sta su una riga chiara (non su uno
   sfondo scuro come altrove nel sito): l'hover di .btn-solid di
   default schiarisce verso il colore della pagina e ci si confonde.
   Qui invece scurisce verso il verde della palette, restando sempre
   leggibile sulla carta chiara. */
.material-card-actions .btn-solid:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--paper);
}
.material-card-social {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(60,56,48,0.3);
  color: var(--ink);
}
.material-card-social:hover { border-color: var(--gold); color: var(--rust); }
.material-card-social svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 640px) {
  .material-card { flex-wrap: wrap; }
  .material-card-text { flex-basis: 100%; }
  .material-card-actions { flex-basis: 100%; margin-top: 0.4rem; }
  .material-card h3 { white-space: normal; }
}
.materiali-empty, .materiali-error {
  color: #6b6656;
  font-size: 0.95rem;
}
.materiali-skeleton {
  background: rgba(18,24,15,0.05);
  border-radius: var(--radius);
  min-height: 84px;
}
.materiali-skeleton + .materiali-skeleton { margin-top: 0.6rem; }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 2.4rem;
}
.page-btn {
  min-width: 2.3rem;
  height: 2.3rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(238,244,241,0.3);
  background: transparent;
  color: var(--paper-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.page-btn.is-active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ============================================================
   PLAYER SPOTIFY CUSTOM — vinile che gira (musica.html e pagine
   uscita). Su mobile occupa gran parte dello schermo dal basso,
   su desktop diventa un piccolo widget in basso a destra.
   ============================================================ */
body.gdv-player-open { overflow: hidden; }
@media (min-width: 760px) { body.gdv-player-open { overflow: auto; } }
/* Player minimizzato: il resto della pagina torna leggibile e scorribile
   (vedi .gdv-player.is-minimized poco sotto, che toglie anche lo sfondo
   scuro a tutto schermo) — coerente col senso stesso di "minimizzare". */
body.gdv-player-open.gdv-player-minimized { overflow: auto; }

.gdv-player {
  position: fixed;
  inset: 0;
  z-index: 610;
  display: flex;
  background: rgba(8, 12, 8, 0.72);
  backdrop-filter: blur(6px);
}
.gdv-player[hidden] { display: none; }

.gdv-player-inner {
  position: relative;
  width: 100%;
  margin-top: auto;
  background-image: var(--grain), linear-gradient(180deg, var(--bg-raised-2, #17302a), var(--bg, #0a1815));
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, auto;
  border-top: 1px solid var(--surface-line);
  padding: 1rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}

.gdv-player-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--surface-line);
  background: var(--surface);
  color: var(--paper-dim);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.gdv-player-close:hover { background: var(--surface-hover); border-color: var(--ra, var(--gold)); color: var(--ra, var(--gold)); }

/* margin-top: deve superare il bordo inferiore dei pulsanti chiudi/
   minimizza (top 0.8rem + altezza 2.6rem = 3.4rem), altrimenti il titolo
   del brano — ora il primo testo visibile, essendo stata tolta la
   dicitura "Ora in riproduzione" — parte troppo in alto e rischia di
   toccarli. */
.gdv-player-info { text-align: center; padding: 0 1.6rem; min-width: 0; margin-top: 3.6rem; }
.gdv-player-track {
  font-family: "Anton", var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.45rem;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gdv-player-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  margin-top: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gdv-player-vinyl-wrap {
  position: relative;
  width: min(66vw, 250px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.gdv-player-vinyl-wrap:focus-visible {
  outline: 2px solid var(--ra, var(--gold));
  outline-offset: 4px;
  border-radius: 50%;
}
.gdv-player-vinyl {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-radial-gradient(circle at 50% 50%, #161616 0, #161616 2px, #1f1f1f 2px, #1f1f1f 4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(238, 244, 241, 0.08);
  animation: gdv-spin 9s linear infinite;
  animation-play-state: paused;
}
.gdv-player-vinyl::after {
  content: "";
  position: absolute;
}
.gdv-player-vinyl img {
  width: 40%;
  height: 40%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ra, var(--gold));
}

/* Puntina / braccio del giradischi: sostituisce il vecchio pulsante play.
   Si tocca il vinile stesso per avviare/mettere in pausa: la base è
   montata in alto a destra del vinile, con l'asta rivolta verso il
   basso. Da ferma resta verticale fuori dal disco, quando suona ruota
   verso sinistra fino a poggiare sui solchi del vinile. */
.gdv-player-tonearm-mount {
  position: absolute;
  top: 3%;
  right: -10%;
  width: 15%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, #3a3a3a, #0c0c0c);
  border-radius: 22%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  z-index: 3;
}
.gdv-player-tonearm-arm {
  position: absolute;
  top: calc(3% + 7.5%);
  right: calc(-10% + 7.5%);
  width: 64%;
  height: 5px;
  background: linear-gradient(90deg, #d8d8d8, #9a9a9a 55%, #6c6c6c);
  border-radius: 3px;
  transform-origin: right center;
  transform: rotate(-90deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  z-index: 3;
}
.gdv-player-tonearm-head {
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 10px;
  background: linear-gradient(160deg, #3a3a3a, #0c0c0c);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.gdv-player-vinyl-wrap.is-playing .gdv-player-tonearm-arm { transform: rotate(-73deg); }
.gdv-player-vinyl-wrap.is-playing .gdv-player-vinyl { animation-play-state: running; }

/* Riga controlli: precedente / play-pausa / successivo */
.gdv-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}

/* Pulsante play/pausa esplicito, oltre al gesto di toccare il vinile */
.gdv-player-playbtn {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: none;
  background: var(--ra, var(--gold));
  color: var(--ink, #0e1b17);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
  transition: filter 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.gdv-player-playbtn:hover { filter: brightness(1.08); }
.gdv-player-playbtn:active { transform: scale(0.92); }
.gdv-player-playbtn svg { width: 1.2rem; height: 1.2rem; }
.gdv-player-playbtn .icon-pause { display: none; }
.gdv-player-playbtn.is-playing .icon-play { display: none; }
.gdv-player-playbtn.is-playing .icon-pause { display: block; }

/* Pulsanti precedente / successivo — stesso trattamento delle frecce
   del carosello della discografia (.album-swiper-arrow), per un
   linguaggio coerente tra tutti i controlli "a cerchio" del sito. */
.gdv-player-navbtn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--surface-line);
  background: var(--surface);
  color: var(--paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.gdv-player-navbtn svg { width: 1rem; height: 1rem; }
.gdv-player-navbtn:hover { background: var(--surface-hover); border-color: var(--ra, var(--gold)); color: var(--ra, var(--gold)); }
.gdv-player-navbtn:active { transform: scale(0.9); }
.gdv-player-navbtn[hidden] { display: none; }

.gdv-player-embed-host {
  position: fixed !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}
/* L'API di Spotify inserisce qui dentro un vero <iframe>, spesso con
   dimensioni proprie: le forziamo comunque a 1x1 così, qualunque cosa
   Spotify imposti, resta invisibile e l'unica UI vista è il vinile. */
.gdv-player-embed-host iframe {
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
}

/* Mobile: il pannello del player occupa quasi tutta l'altezza dello
   schermo (non solo lo spazio minimo del suo contenuto) e il vinile si
   ingrandisce di conseguenza, per un'esperienza di ascolto più immersiva. */
@media (max-width: 759px) {
  /* Il pannello sale quasi fino in cima allo schermo (prima si fermava
     all'88%, lasciando molto sfondo sfocato sopra) e il contenuto si
     allinea in alto invece di restare centrato nel riquadro: così lo
     spazio in più guadagnato in alto viene davvero usato, invece di
     restare vuoto sopra e sotto in parti uguali. */
  .gdv-player-inner {
    min-height: 96vh;
    min-height: 96dvh;
    justify-content: flex-start;
    gap: 1.8rem;
  }
  .gdv-player-vinyl-wrap { width: min(84vw, 360px); }
}

/* Desktop: stessa "vista" del mobile (vinile + info impilati, verticale),
   ma dentro una finestrella piccola fissa in basso a destra invece del
   pannello a tutto schermo. */
@media (min-width: 760px) {
  .gdv-player {
    inset: auto;
    top: auto;
    left: auto;
    bottom: 1.4rem;
    right: 1.4rem;
    background: none;
    backdrop-filter: none;
  }
  .gdv-player-inner {
    width: 280px;
    margin: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 1.1rem 1.1rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--surface-line);
    box-shadow: var(--shadow-lg);
    max-height: none;
  }
  .gdv-player-close { top: 0.6rem; right: 0.6rem; width: 1.6rem; height: 1.6rem; font-size: 0.76rem; }
  .gdv-player-minimize { top: 0.6rem; right: 2.4rem; width: 1.6rem; height: 1.6rem; }
  .gdv-player-minimize svg { width: 0.75rem; height: 0.75rem; }
  .gdv-player-info { text-align: center; padding: 0 0.6rem; margin-top: 2.4rem; }
  .gdv-player-track { font-size: 1.6rem; }
  .gdv-player-meta { font-size: 0.72rem; margin-top: 0.25rem; }
  .gdv-player-vinyl-wrap { width: 11rem; height: 11rem; }
  .gdv-player-tonearm-head { width: 14px; height: 9px; left: -6px; }
  .gdv-player-tonearm-arm { height: 4px; }
  .gdv-player-controls { gap: 1.5rem; }
  .gdv-player-playbtn { width: 3.1rem; height: 3.1rem; }
  .gdv-player-playbtn svg { width: 1.35rem; height: 1.35rem; }
  .gdv-player-navbtn { width: 2.6rem; height: 2.6rem; }
  .gdv-player-navbtn svg { width: 1.2rem; height: 1.2rem; }
}

/* Mobile: titolo del brano e pulsanti del player un po' più grandi, per
   essere più leggibili e più facili da toccare sullo schermo piccolo. */
@media (max-width: 759px) {
  .gdv-player-track { font-size: 1.9rem; }
  .gdv-player-meta { font-size: 0.82rem; }
  .gdv-player-controls { gap: 1.8rem; }
  .gdv-player-playbtn { width: 3.8rem; height: 3.8rem; }
  .gdv-player-playbtn svg { width: 1.65rem; height: 1.65rem; }
  .gdv-player-navbtn { width: 3.2rem; height: 3.2rem; }
  .gdv-player-navbtn svg { width: 1.4rem; height: 1.4rem; }
}

/* ============================================================
   PLAYER MINIMIZZATO — mini barra "in riproduzione" persistente
   Un secondo pulsante (oltre alla chiusura) riduce il player a una
   sottile barra sempre visibile con copertina in miniatura, titolo e
   play/pausa, senza fermare l'ascolto: resta accessibile mentre si
   continua a guardare la tracklist o i crediti della pagina, invece di
   dover riaprire un popup a ogni traccia. Si espande di nuovo toccando
   il titolo o il pulsante stesso.
   ============================================================ */
.gdv-player-minimize {
  position: absolute;
  top: 0.8rem;
  right: 3.6rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--surface-line);
  background: var(--surface);
  color: var(--paper-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.gdv-player-minimize:hover { background: var(--surface-hover); border-color: var(--ra, var(--gold)); color: var(--ra, var(--gold)); }
.gdv-player-minimize svg { width: 1rem; height: 1rem; transition: transform 0.3s var(--ease-out); }
.gdv-player.is-minimized .gdv-player-minimize svg { transform: rotate(180deg); }

.gdv-player.is-minimized .gdv-player-tonearm-mount,
.gdv-player.is-minimized .gdv-player-tonearm-arm { display: none; }
.gdv-player.is-minimized .gdv-player-info { cursor: pointer; }

/* Ordine orizzontale della barra minimizzata: vinile a sinistra, poi il
   titolo, poi i controlli (precedente/play/successivo) a destra — fissato
   con `order`, indipendente dall'ordine nel markup. */
.gdv-player.is-minimized .gdv-player-vinyl-wrap { order: 1; }
.gdv-player.is-minimized .gdv-player-info { order: 2; }
.gdv-player.is-minimized .gdv-player-controls { order: 3; }

@media (max-width: 759px) {
  /* Su mobile il player normale è un overlay a tutto schermo con
     backdrop scuro (vedi .gdv-player sopra): minimizzato, deve invece
     restare ancorato in basso come una sottile barra, senza oscurare né
     bloccare il resto della pagina. pointer-events:none sul contenitore
     (che resta largo quanto lo schermo) più pointer-events:auto sulla
     sola barra visibile lasciano passare i tocchi ovunque tranne che
     sulla barra stessa. */
  .gdv-player.is-minimized {
    inset: auto;
    left: 0;
    right: 0;
    bottom: 0;
    background: none;
    backdrop-filter: none;
    pointer-events: none;
  }
  .gdv-player.is-minimized .gdv-player-inner { pointer-events: auto; }

  .gdv-player.is-minimized .gdv-player-inner {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
    padding: 0.7rem 6rem 0.7rem 0.8rem;
    border-radius: 16px 16px 0 0;
  }
  .gdv-player.is-minimized .gdv-player-vinyl-wrap { width: 3rem; height: 3rem; flex-shrink: 0; }
  .gdv-player.is-minimized .gdv-player-info { text-align: left; padding: 0; flex: 1; min-width: 0; }
  .gdv-player.is-minimized .gdv-player-track { font-size: 1.15rem; }
  .gdv-player.is-minimized .gdv-player-meta { display: none; }
  .gdv-player.is-minimized .gdv-player-controls { gap: 0.4rem; flex-shrink: 0; }
  .gdv-player.is-minimized .gdv-player-playbtn { width: 2.3rem; height: 2.3rem; }
  .gdv-player.is-minimized .gdv-player-navbtn { width: 2rem; height: 2rem; }
  .gdv-player.is-minimized .gdv-player-navbtn svg { width: 0.85rem; height: 0.85rem; }
  .gdv-player.is-minimized .gdv-player-close { top: 50%; right: 0.65rem; width: 2.2rem; height: 2.2rem; transform: translateY(-50%); }
  .gdv-player.is-minimized .gdv-player-minimize { top: 50%; right: 3.15rem; width: 2.2rem; height: 2.2rem; transform: translateY(-50%); }
}

@media (min-width: 760px) {
  .gdv-player.is-minimized .gdv-player-inner {
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 5.8rem 0.55rem 0.7rem;
    border-radius: 999px;
  }
  .gdv-player.is-minimized .gdv-player-vinyl-wrap { width: 2.6rem; height: 2.6rem; flex-shrink: 0; }
  .gdv-player.is-minimized .gdv-player-info { text-align: left; padding: 0; max-width: 11rem; }
  .gdv-player.is-minimized .gdv-player-track { font-size: 1.1rem; }
  .gdv-player.is-minimized .gdv-player-meta { display: none; }
  .gdv-player.is-minimized .gdv-player-controls { gap: 0.4rem; flex-shrink: 0; margin-right: 0.6rem; }
  .gdv-player.is-minimized .gdv-player-playbtn { width: 2.3rem; height: 2.3rem; }
  .gdv-player.is-minimized .gdv-player-navbtn { width: 2rem; height: 2rem; }
  .gdv-player.is-minimized .gdv-player-navbtn svg { width: 0.85rem; height: 0.85rem; }
  .gdv-player.is-minimized .gdv-player-close { top: 50%; right: 0.55rem; width: 2rem; height: 2rem; transform: translateY(-50%); }
  .gdv-player.is-minimized .gdv-player-minimize { top: 50%; right: 2.7rem; width: 2rem; height: 2rem; transform: translateY(-50%); }
}