/*
 * Foglio di stile condiviso — estratto e unificato dai mockup HTML in
 * mockups/vX (round 1-14 già approvati). Un solo file reale al posto
 * dello <style> inline ripetuto in ogni pagina dei mockup, come in un
 * sito vero (equivalente di apocanow.it/public/assets/css/style.css).
 *
 * Le regole che differivano leggermente da una pagina mockup all'altra
 * (hero più bassa sulle pagine interne, breadcrumbs con margini diversi)
 * sono ora scoped con una classe sul <body> invece di essere duplicate.
 */

:root {
   /* Sfondo pagina, definitivo (deciso 2026-09-08) — il gradiente è
     cablato direttamente in body{} qui sotto; --bg resta un colore pieno
     (il tono più scuro dei due stop) perché serve tale e quale dentro
     .hero__scrim più sotto, che non può annidare un altro gradient. */
   --bg: #000000;
   --bg-raised: #1F1226;
   --bg-sunk: #0D0712;
   --bg-rgb: 0, 0, 0;
   --ink: #F7F0FA;
   --ink-muted: #B3A0C2;
   --ink-faint: #6B5A78;
   --accent: #F3167A;
   --accent-deep: #B80F5C;
   --accent-2: #FFC857;
   --accent-rgb: 243, 22, 122;
   --accent-2-rgb: 255, 200, 87;
   --line: rgba(247, 240, 250, 0.12);
   --font-display: 'Franklin Gothic Heavy', 'Arial Black', sans-serif;
   --font-hero: 'Barlow Condensed', 'Arial Narrow', sans-serif;
   --font-hero-eyebrow: 'JetBrains Mono', Consolas, monospace;
   /* Literata (2026-09-09): serif di Google progettato apposta per la
      lettura prolungata su schermo (ottimizzato per e-book/testi lunghi),
      sostituisce Source Serif 4 su richiesta esplicita ("più leggibile, più
      carino") — stesso ruolo/uso in tutto il sito (lede, blockquote,
      significato/analisi, bio, curiosità, FAQ: 8 punti, tutti tramite
      questa variabile, un solo posto da cambiare). */
   --font-hero-lede: 'Literata', Georgia, 'Times New Roman', serif;
   --font-article: Bahnschrift, 'Segoe UI Semibold', sans-serif;
   --font-v1: Impact, 'Arial Black', 'Franklin Gothic Heavy', sans-serif;
   --font-mono: Consolas, 'Courier New', monospace;
   --font-body: 'Work Sans', 'Segoe UI', Arial, sans-serif;
}

* {
   box-sizing: border-box;
}

/* min-height:100vh + flex column + footer{margin-top:auto} = footer sempre
   in fondo alla viewport sulle pagine con poco contenuto (es. un giorno di
   /concerti senza date), invece di restare appiccicato subito sotto il
   contenuto lasciando un vuoto sopra. Sulle pagine con molto contenuto non
   cambia nulla, il footer scorre normalmente sotto come prima. */
body {
   margin: 0;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   background: linear-gradient(160deg, #000000, #32111e);
   color: var(--ink);
   font-family: var(--font-body);
   line-height: 1.6;
}

a {
   color: inherit;
   text-decoration: none;
}

.wrap {
   /* width:100% esplicito (non solo max-width) — necessario perché body è
      display:flex;flex-direction:column: un .wrap figlio diretto di body
      (non annidato dentro .hero) è un flex item, e con width:auto i margini
      auto disattivano lo stretch (l'item si restringe al contenuto invece
      di riempire fino a max-width prima di centrarsi) — bug reale trovato
      2026-09-09 sulla pagina canzone, dove il contenuto più corto rendeva
      visibile la contrazione (su altre pagine il contenuto era abbastanza
      largo da toccare comunque i 1180px "per caso"). */
   width: 100%;
   max-width: 1180px;
   margin: 0 auto;
   padding: 0 28px;
}

/* Header — stile Notte di Concerto (v4) */
header.site {
   position: sticky;
   top: 0;
   z-index: 20;
   background: rgba(21, 11, 26, 0.92);
   backdrop-filter: blur(6px);
   border-bottom: 1px solid var(--line);
}

.site-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 28px;
   max-width: 1180px;
   margin: 0 auto;
}

.logo {
   font-family: var(--font-display);
   font-size: 22px;
   text-transform: uppercase;
}

.logo span {
   color: var(--accent);
}

nav.main-nav {
   display: flex;
   gap: 30px;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

nav.main-nav a {
   padding: 6px 0;
   border-bottom: 2px solid transparent;
}

nav.main-nav a.active,
nav.main-nav a:hover {
   border-color: var(--accent);
}

/* Menu mobile — hamburger + overlay a schermo intero, stesso pattern di
   apocanow.it (vedi assets/js/letter-search.js per il toggle). Il bottone
   resta fuori vista/non cliccabile su desktop via display:none, non solo
   nascosto visivamente. */
.menu-toggle {
   display: none;
   background: transparent;
   border: 1px solid var(--line);
   border-radius: 8px;
   color: var(--ink);
   font-size: 20px;
   width: 42px;
   height: 42px;
   line-height: 1;
   cursor: pointer;
}

/* Bottone "torna indietro" (richiesta 2026-09-10, stesso meccanismo di
   ballicaraibici.it: `templates/layout.php`/`public/assets/js/app.js`) —
   sempre nel markup, nascosto via [hidden] finché il JS non decide che
   siamo oltre la prima pagina vista in questa sessione del browser (vedi
   assets/js/letter-search.js). Visibile su qualunque larghezza, non solo
   mobile — a differenza di .menu-toggle qui sopra, ballicaraibici non lo
   scopa a un breakpoint. Raggruppato con .menu-toggle dentro
   .site-bar__actions (sotto) così i due restano vicini invece di finire
   ai due estremi dello spazio libero di .site-bar (era lo stesso
   `justify-content:space-between` a farli distanziare, con .main-nav
   nascosto su mobile: bug segnalato 2026-09-10, "la freccia deve andare
   vicino all'hamburger"). */
.back-button {
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: 1px solid var(--line);
   border-radius: 8px;
   color: var(--ink);
   width: 42px;
   height: 42px;
   cursor: pointer;
}

/* .back-button ha un display esplicito (flex): senza questa regola gemella
   l'attributo [hidden] verrebbe ignorato (stesso bug noto già documentato
   in ballicaraibici.it per .icon-button — vedi il suo CLAUDE.md). */
.back-button[hidden] {
   display: none;
}

.back-button:hover {
   border-color: var(--accent);
   color: var(--accent);
}

/* Freccia disegnata in CSS (chevron da due bordi ruotati) invece del
   carattere Unicode "←" — richiesta 2026-09-10 ("è brutta"): il glyph di
   sistema rendeva sottile/non centrato otticamente a seconda del font,
   questo tratto è spesso, netto e sempre perfettamente centrato/scalabile. */
.back-button::before {
   content: "";
   width: 9px;
   height: 9px;
   border-left: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
   margin-right: 2px; /* ottica: senza, il vertice della freccia risulta leggermente decentrato a destra */
}

.site-bar__actions {
   display: flex;
   align-items: center;
   gap: 8px;
}

/* Widget "Ascolta la Musica" (2026-09-10) — stesso meccanismo di
   ballicaraibici.it/templates/layout.php (.icon-button--radio): pillola con
   icona+etichetta su desktop, ridotto a solo icona su mobile (vedi override
   dentro @media max-width:900px più sotto). Colore a gradiente invece del
   flat fill delle altre icon-button dell'header perché è un invito
   all'azione (play immediato), non solo navigazione. */
.radio-toggle {
   display: flex;
   align-items: center;
   gap: 6px;
   height: 42px;
   padding: 0 16px;
   background: linear-gradient(120deg, var(--accent), var(--accent-deep));
   border: 1px solid var(--accent-deep);
   border-radius: 999px;
   color: #fff;
   font-family: var(--font-body);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
}

.radio-toggle:hover {
   filter: brightness(1.08);
}

.radio-toggle.is-active {
   box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.55);
}

.radio-toggle__icon {
   font-size: 16px;
   line-height: 1;
}

.radio-toggle__label {
   white-space: nowrap;
}

.nav-overlay {
   position: fixed;
   inset: 0;
   z-index: 100;
   background: var(--bg);
   display: none;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 28px;
}

.nav-overlay.is-open {
   display: flex;
}

.nav-overlay a {
   font-family: var(--font-display);
   font-size: 24px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--ink-muted);
}

.nav-overlay a.active,
.nav-overlay a:hover {
   color: var(--accent);
}

.nav-overlay__close {
   position: absolute;
   top: 20px;
   right: 24px;
   background: transparent;
   border: 0;
   color: var(--ink);
   font-size: 26px;
   cursor: pointer;
}

html.nav-open {
   overflow: hidden;
}

/* Hero — impostazione Muro di Copertine (v1), font h1 copiato da apocanow.it
   (Barlow Condensed, vedi feedback_copy_exact_style_from_live_site), copertine
   spostate a sfondo molto trasparente come in Blockbuster (v12) */
.hero {
   position: relative;
   padding: 72px 0 56px;
   overflow: hidden;
}

.page-traduzione-testo .hero {
   padding: 44px 0 40px;
}

/* Sfondo Hero (2026-09-09): non più un mosaico di cover — semplice
   gradiente che scurisce il colore base della pagina verso il basso. */
.hero__scrim {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), 0.85) 100%);
}

.hero__content {
   position: relative;
   z-index: 1;
   max-width: 640px;
}

.hero__eyebrow {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: var(--font-hero-eyebrow);
   font-size: 12.5px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--accent);
   margin: 0 0 14px;
}

.hero__eyebrow::before {
   content: "";
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--accent);
   display: inline-block;
}

/* Duplicato mobile dell'eyebrow (2026-09-10, richiesta esplicita: "su mobile
   l'eyebrow lo metterei sotto la scritta") — su desktop resta invariato
   sopra il titolo (.hero__eyebrow--top), il duplicato dentro .song-hero
   (.hero__eyebrow--sotto-titolo, subito dopo l'h1) è nascosto di default e
   si scambia con l'originale solo sotto i 700px, vedi media query. Duplicare
   il markup invece di provare a riordinare via flex/order: i due elementi
   non sono fratelli diretti (l'eyebrow vive fuori da .song-hero, l'h1 dentro),
   un vero riordino CSS non potrebbe attraversare quel confine. */
.hero__eyebrow--sotto-titolo {
   display: none;
}

.hero h1 {
   font-family: var(--font-hero);
   font-weight: 700;
   font-size: 4.4rem;
   line-height: 0.95;
   letter-spacing: 0.01em;
   text-transform: uppercase;
   margin: 0 0 17.6px;
}

.page-traduzione-testo .hero h1 {
   font-size: 3.6rem;
   margin-bottom: 16px;
}

.hero h1 em {
   font-style: normal;
   color: var(--accent);
}

.hero p.lede {
   font-family: var(--font-hero-lede);
   color: var(--ink-muted);
   font-size: 1.08rem;
   font-weight: 400;
   max-width: 46ch;
   margin: 0 0 30px;
}

.page-traduzione-testo .hero p.lede {
   font-size: 1.05rem;
   max-width: 52ch;
   margin-bottom: 26px;
}

.search-box {
   display: flex;
   background: var(--bg-raised);
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 6px;
   max-width: 480px;
}

.search-box input {
   flex: 1;
   background: transparent;
   border: 0;
   color: var(--ink);
   font-size: 16px;
   padding: 12px 14px;
   font-family: var(--font-body);
}

.search-box input:focus {
   outline: 2px solid var(--accent);
   border-radius: 8px;
}

.search-box button,
.sr-search-btn {
   background: linear-gradient(160deg, var(--accent), var(--accent-deep));
   border: 1px solid var(--accent);
   color: #fff;
   border-radius: 8px;
   padding: 0 22px;
   align-self: stretch;
   font-family: var(--font-body);
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
}

.search-box button:hover,
.sr-search-btn:hover {
   background: linear-gradient(160deg, var(--accent-deep), var(--accent));
   border-color: var(--accent-deep);
}

/* Modale dei risultati di ricerca — creata a runtime da
   search-autocomplete.js, nessun markup nelle pagine PHP: qui solo
   l'aspetto. "Copiato di sana pianta" da apocanow.it_new (stesse classi
   sr-*), ricolorato sulla palette di beatgogo. */
.sr-ov {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.72);
   z-index: 200;
}

.sr-ov:not([hidden]) {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   padding: 12vh 1rem 2rem;
}

.sr-box {
   width: 100%;
   max-width: 560px;
   max-height: 70vh;
   overflow-y: auto;
   background: var(--bg-raised);
   border: 1px solid var(--line);
   border-radius: 10px;
   box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.sr-item {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 12px 16px;
   text-decoration: none;
   color: var(--ink);
   font-size: 14.5px;
}

.sr-item__cov {
   width: 40px;
   height: 56px;
   border-radius: 6px;
   flex-shrink: 0;
   background-size: cover;
   background-position: center;
}

.sr-item__body {
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-width: 0;
}

.sr-item__title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 600;
}

.sr-item__meta {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
   font-size: 12.5px;
   color: var(--ink-faint);
}

.sr-item__section {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--accent-2);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.sr-item:hover {
   background: var(--bg-sunk);
}

.sr-item+.sr-item {
   border-top: 1px solid var(--line);
}

.sr-status {
   margin: 0;
   padding: 22px;
   text-align: center;
   color: var(--ink-faint);
}

.sr-more {
   display: block;
   width: 100%;
   padding: 14px 16px;
   background: none;
   border: 0;
   border-top: 1px solid var(--line);
   color: var(--accent-2);
   font-family: var(--font-body);
   font-size: 13.5px;
   text-align: center;
   cursor: pointer;
}

.sr-more:hover {
   background: var(--bg-sunk);
}

/* Breadcrumbs — stile Notte di Concerto (v4). Sotto la Hero su ogni pagina
   che ne ha una (canzone, traduzione-testo); sopra il titolo sulle pagine
   senza Hero (lettera, artista) — vedi .page-head più sotto. */
.crumbs {
   font-size: 13px;
   color: var(--ink-faint);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   padding: 24px 0 4px;
}

.crumbs a {
   color: var(--ink-muted);
}

/* Meno spazio tra la hero e i breadcrumbs sulla pagina canzone (2026-09-09,
   richiesta esplicita) — la regola base (24px) resta invariata per le altre
   pagine che usano .crumbs. */
.page-canzone .crumbs {
   padding-top: 8px;
}

/* 2026-09-09, richiesta esplicita: solo i breadcrumbs devono occupare una
   riga sotto la hero, poi i contenuti (sidebar + "Elenco Significati e
   Testi") devono cominciare subito — era 26px sopra + 22px sotto qui, più
   40px di padding-top su .content-grid qui sotto: quasi 90px di vuoto
   reale prima di qualunque contenuto. */
.page-traduzione-testo .crumbs {
   padding: 0;
   margin: 16px 0 4px;
}

.page-traduzione-testo .content-grid {
   padding-top: 8px;
}

section {
   padding: 50px 0;
}

/* Meno aria tra i "capitoli" della home (2026-09-09, richiesta esplicita) —
   50px sopra + 50px sotto di due sezioni consecutive sommavano a 100px di
   vuoto reale tra un capitolo e l'altro (stessa causa già trovata e risolta
   sulla pagina canzone con article section — lì il contesto è diverso,
   .page-home usa <section> nude, non dentro <article>). Scoped solo alla
   home per non toccare le altre pagine che condividono la stessa regola
   generica "section" qui sopra. */
.page-home section {
   padding: 24px 0;
}

.section-head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: 24px;
   border-bottom: 1px solid var(--line);
   padding-bottom: 14px;
}

/* Bordo oro come i titoli h2 dentro l'articolo della pagina canzone
   (2026-09-09, richiesta esplicita: "Elenco Significati e Testi di Kesha"
   sulla pagina artista) — vedi "article h2" più sotto, stesso colore
   --accent-2. Modificatore scelto (non la regola base .section-head, che è
   condivisa da home/lettera/albums/concerti/news) per non cambiare bordo a
   sezioni non richieste. */
.section-head--gold {
   border-bottom-color: var(--accent-2);
}

/* Distanzia una sezione dalla precedente quando la seguono direttamente
   senza un elemento di margine in mezzo (es. "Altre canzoni di X" subito
   sotto la tracklist su albums_id.php) — .section-head da solo ha solo
   margin-bottom, pensato per stare subito sotto un hero/breadcrumb. */
.section-head--spaced {
   margin-top: 40px;
}

.section-head h2 {
   font-family: var(--font-display);
   font-size: 21px;
   margin: 0;
   text-transform: uppercase;
}

.section-head .count {
   font-size: 13px;
   color: var(--ink-faint);
}

.section-head a {
   color: var(--accent-deep);
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
}

/* News — impostazione Apocanow (vetrina lead + colonna laterale) */
.news-showcase {
   display: grid;
   grid-template-columns: 1.6fr 1fr;
   gap: 18px;
}

.news-lead {
   position: relative;
   border-radius: 10px;
   overflow: hidden;
   min-height: 400px;
   display: flex;
   align-items: flex-end;
   background-size: cover;
   background-position: center;
}

.news-lead::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.94) 100%);
}

.news-lead .body {
   position: relative;
   z-index: 1;
   padding: 28px;
}

.news-lead__cat {
   display: inline-block;
   font-family: var(--font-mono);
   font-size: 11.5px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #fff;
   background: var(--accent);
   padding: 4px 12px;
   border-radius: 999px;
   margin-bottom: 12px;
}

.news-lead h3 {
   font-family: var(--font-display);
   font-size: 30px;
   text-transform: none;
   line-height: 1.15;
   margin: 0 0 10px;
   max-width: 92%;
}

.news-lead__excerpt {
   color: var(--ink-muted);
   font-size: 14.5px;
   max-width: 85%;
}

.news-side {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.news-side__item {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 16px 18px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--bg-raised);
}

.news-side__item:hover {
   border-color: var(--accent-2);
}

.news-side__meta {
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--accent-deep);
}

.news-side__title {
   font-family: var(--font-display);
   font-size: 16.5px;
   text-transform: none;
   line-height: 1.25;
}

/* Ultimi testi e significati inseriti — 5 riquadri fissi con badge "Nuovo"
   + elenco esteso sotto (stile feed, due per riga) */
.teaser-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 16px;
   margin-bottom: 36px;
}

.teaser-card {
   border-radius: 10px;
   overflow: hidden;
   position: relative;
   height: 220px;
   display: flex;
   align-items: flex-end;
   background-size: cover;
   background-position: center;
}

/* "Altre canzoni di [artista]" nella pagina album: due markup paralleli
   (teaser-card per desktop, invariato; .album-chip--md per mobile, identico
   a Tracklist/"Ultimi artisti inseriti") — solo uno visibile per volta.
   .altre-canzoni-mobile nascosto di default, mostrato dentro il media query
   mobile qui sotto; .altre-canzoni-desktop fa il percorso inverso. */
.altre-canzoni-mobile {
   display: none;
}

.teaser-card::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.9) 100%);
}

.teaser-card .badge {
   position: absolute;
   top: 12px;
   left: 12px;
   background: var(--accent);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   padding: 4px 10px;
   border-radius: 999px;
   z-index: 2;
}

.teaser-card .body {
   position: relative;
   z-index: 1;
   padding: 12px;
}

.teaser-card .t {
   font-weight: 700;
   font-size: 14px;
   color: #fff;
}

.teaser-card .a {
   font-size: 11.5px;
   color: rgba(255, 255, 255, 0.75);
   margin-bottom: 5px;
}

.teaser-card .excerpt {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.88);
   line-height: 1.3;
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* Niente più cover grande in sfondo (2026-09-09, riduzione esposizione
   copertine reali su scala — vedi docs/legale-contenuti-editoriali.md §B):
   sfondo a gradiente del brand + una thumbnail piccola invece della foto
   a piena card. Colore impostato inline per card (vedi chip_tone_palette()
   in helpers.php, 2026-09-10: palette unica per tutto il sito, non più
   una classe fissa per tonalità). */

/* Senza l'estratto del significato (usata in /traduzione-testo, 2026-09-10)
   i 220px standard lasciano troppo gradiente vuoto sopra il testo. */
.teaser-card--short {
   height: 130px;
}

/* Prova (2026-09-10): bordo esterno colorato, tonalità della card — vedi
   /traduzione-testo, colore impostato inline in border-color per card. */
.teaser-card--bordo {
   border: 2px solid;
}

.teaser-card__thumb {
   position: absolute;
   top: 12px;
   right: 12px;
   width: 56px;
   height: 56px;
   border-radius: 8px;
   object-fit: cover;
   z-index: 2;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.testi-feed {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 32px;
}

.testi-feed .row {
   display: flex;
   gap: 16px;
   align-items: center;
   padding: 16px 0;
   border-bottom: 1px solid var(--line);
}

.testi-feed .row:nth-last-child(-n+2) {
   border-bottom: 0;
}

.testi-feed .thumb {
   width: 56px;
   height: 56px;
   border-radius: 8px;
   flex-shrink: 0;
   background-size: cover;
   background-position: center;
}

.testi-feed .t {
   font-weight: 700;
   font-size: 15px;
}

.testi-feed .a {
   font-size: 12.5px;
   color: var(--accent-deep);
   margin-bottom: 4px;
}

.testi-feed .excerpt {
   font-size: 13.5px;
   color: var(--ink-muted);
   max-width: 60ch;
}

.testi-feed .when {
   margin-left: auto;
   font-size: 12px;
   color: var(--ink-faint);
   white-space: nowrap;
   padding-left: 16px;
   text-align: right;
   font-family: var(--font-mono);
}

/* Prossimi concerti / Ultimi album in home (2026-09-09) — sezioni separate
   a piena larghezza, non più affiancate in .split: due colonne di larghezza
   diversa lasciavano spesso spazio vuoto sotto la colonna più corta.
   .stub-grid sostituisce lo stack verticale di 3 card con una vera griglia
   su 2 righe (richiesta esplicita), mostrando 6 concerti invece di 3 ora che
   c'è tutta la larghezza della pagina a disposizione. */
.stub-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
}

.stub-grid .stub {
   margin-bottom: 0;
}

.stub {
   display: flex;
   background: var(--bg-raised);
   border: 1px solid var(--line);
   border-radius: 8px;
   margin-bottom: 14px;
   overflow: hidden;
}

.stub .d {
   background: linear-gradient(160deg, var(--accent), var(--accent-deep));
   border: 1px solid var(--accent);
   color: #fff;
   padding: 16px;
   text-align: center;
   width: 74px;
   flex-shrink: 0;
}

.stub .d .n {
   font-family: var(--font-display);
   font-size: 24px;
   display: block;
   line-height: 1;
}

.stub .d .m {
   font-size: 11px;
   text-transform: uppercase;
}

.stub .i {
   padding: 14px 18px;
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.stub .i .t {
   font-weight: 700;
   font-size: 15px;
}

.stub .i .v {
   font-size: 13px;
   color: var(--ink-muted);
}

.stub .i .go {
   color: var(--accent-deep);
   font-weight: 700;
   font-size: 13px;
   text-transform: uppercase;
}

.album-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px;
}

/* display:flex + .info{flex:1} — senza, una card con testo più corto della
   vicina (es. senza anno) veniva "stirata" dallo stretch di default della
   grid CSS lasciando uno spazio vuoto sotto il riquadro info, col nero dello
   sfondo pagina a vista invece dello sfondo del riquadro. Bug trovato
   2026-09-08 su /albums/r. */
.album {
   display: flex;
   flex-direction: column;
   border-radius: 6px;
   overflow: hidden;
   border: 1px solid var(--line);
}

/**
 * Overlay "iniziali" per placeholder senza copertina reale (2026-09-09) —
 * un solo meccanismo per TUTTI i ~30 punti del sito che usano
 * placeholder_cover_style() (dalla hero 200px alle miniature 36px), invece
 * di una regola font-size dedicata per ognuno. .ph dà al contenitore
 * position:relative (serve a .ph-txt per riempirlo) + container-type, così
 * "cqw" sotto è relativo alla LARGHEZZA REALE di quel contenitore
 * specifico, non a quella della finestra — la stessa identica regola
 * .ph-txt scala automaticamente giusta ovunque, verificato sui contenitori
 * più piccoli (36px) e più grandi (200px) del sito.
 */
.ph {
   position: relative;
   overflow: hidden;
   container-type: inline-size;
}

.ph-txt {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   color: var(--ink);
   opacity: 0.55;
   font-size: 38cqw;
   letter-spacing: 0.02em;
   pointer-events: none;
}

/* Bottoncini con iniziali nelle sidebar (.rel-song/.album-row, 2026-09-10):
   stesso bordo/ombra delle iconcine "chip" del contenuto centrale (vedi
   .album-chip__thumb-ph) — qui applicato a QUALSIASI .mini.ph, indipendente
   dal contesto (sidebar, "altri album", ecc.), colore impostato inline
   dalla stessa chip_tone_palette() del resto del sito. */
.mini.ph {
   border: 2px solid;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.album .cov {
   aspect-ratio: 1;
   flex-shrink: 0;
   background-size: cover;
   background-position: center;
   position: relative;
}

/* Tre varianti di prova (2026-09-09) per ridurre l'esposizione delle
   copertine reali sugli album curati — vedi docs/legale-contenuti-editoriali.md
   §B. Ogni card della sezione "Ultimi album" con copertina reale ne mostra
   una diversa, da confrontare fianco a fianco: v1/v2 tengono comunque una
   miniatura reale (max 150x150, qui più piccola) sopra un gradiente; v3 non
   mostra affatto la copertina nel riquadro grande (iniziali, come i
   placeholder già esistenti) e la relega a una miniatura minuscola accanto
   al titolo. */
.album--v1 .cov {
   background: linear-gradient(160deg, #2E9BD6 0%, var(--bg-raised) 55%, var(--bg-sunk) 100%);
}

.album--v1 .cov .album__thumb {
   position: absolute;
   top: 10px;
   left: 10px;
   width: 110px;
   height: 110px;
   max-width: 60%;
   max-height: 60%;
   border-radius: 8px;
   object-fit: cover;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.album--v2 .cov {
   background: linear-gradient(160deg, #7B2FF7 0%, var(--bg-raised) 55%, var(--bg-sunk) 100%);
}

.album--v2 .cov .album__thumb {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -46%);
   width: 84px;
   height: 84px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid rgba(255, 255, 255, 0.85);
   box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.album--v3 .cov {
   background: linear-gradient(160deg, #6BC0A0 0%, var(--bg-raised) 55%, var(--bg-sunk) 100%);
}

.album--v3 .info {
   display: flex;
   align-items: center;
   gap: 10px;
}

.album__thumb-inline {
   width: 40px;
   height: 40px;
   border-radius: 6px;
   object-fit: cover;
   flex-shrink: 0;
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Pilota "a chip" (2026-09-10) — solo la barra bassa, niente più riquadro
   grande sopra. Il gradiente/colore/bordo di ogni chip arriva inline da
   public/index.php (varia per album), qui restano solo le regole
   strutturali condivise. F1/F2 = due varianti di direzione del gradiente
   allo stesso colore, per il confronto in home. */
.album-chip-row {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 14px;
}

.album-chip {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 7px 16px 7px 12px;
   border-radius: 10px;
   border-left: 4px solid;
   min-width: 220px;
   flex: 1 1 220px;
   text-decoration: none;
   color: inherit;
}

.album-chip__thumb,
.album-chip__thumb-ph {
   width: 42px;
   height: 42px;
   border-radius: 8px;
   flex-shrink: 0;
   border: 2px solid;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.album-chip__thumb {
   object-fit: cover;
}

.album-chip__thumb-ph {
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   color: var(--ink);
   font-size: 14px;
   letter-spacing: 0.02em;
}

.album-chip__info {
   min-width: 0;
   flex: 1;
}

.album-chip .t {
   font-weight: 700;
   font-size: 13px;
   color: var(--ink);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.album-chip .y {
   font-size: 11px;
   color: var(--ink-muted);
}

/* Dimensione vincitrice del confronto 2026-09-10 (contro la base più
   piccola, contro 3/riga più grande) — card un po' più alta, bottoncino
   52px, testo leggermente più grande, ancora centrata verticalmente
   perché .album-chip è già display:flex + align-items:center (stesso
   meccanismo di .stub .i in "Prossimi concerti"). */
.album-chip--md {
   padding: 12px 16px;
   min-height: 76px;
}

.album-chip--md .album-chip__thumb,
.album-chip--md .album-chip__thumb-ph {
   width: 52px;
   height: 52px;
   border-radius: 9px;
}

.album-chip--md .t {
   font-size: 14px;
}

.album-chip--md .y {
   font-size: 12px;
}

/* Pagina /radio (2026-09-10) — riusa .album-chip/.album-chip--md (vedi
   pubblic/radio.php), ma qui l'elemento è un <button> (avvia/ferma lo
   streaming, non naviga altrove): reset dei default browser del tag
   <button> che altrimenti romperebbero il layout della chip (bordo pieno,
   sfondo buttonface, font non ereditato). */
.radio-chip {
   background: transparent;
   border: 0;
   border-left: 4px solid;
   font: inherit;
   text-align: left;
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
}

.radio-chip__icon {
   color: #fff;
   font-size: 15px;
}

.radio-chip.is-active {
   box-shadow: 0 0 0 2px var(--accent);
}

.radio-ticker {
   margin-top: 20px;
}

.album .info {
   flex: 1;
   padding: 10px 14px;
   background: var(--bg-raised);
}

.album .info .t {
   font-weight: 700;
   font-size: 14px;
}

.album .info .y {
   font-size: 12px;
   color: var(--ink-muted);
}

/* Griglia news — /news e "Altre news" a fondo pagina dettaglio, ispirata a
   apocanow.it_new/public/assets/css/style.css (.news-grid/.news-card),
   ricolorata sulla palette scura di questo sito */
.news-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   margin-bottom: 36px;
}

.news-card {
   position: relative;
   border-radius: 10px;
   overflow: hidden;
   min-height: 210px;
   display: flex;
   align-items: flex-end;
   background-size: cover;
   background-position: center;
   border: 1px solid var(--line);
}

.news-card::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.92) 100%);
}

.news-card .body {
   position: relative;
   z-index: 1;
   padding: 16px;
}

.news-card__meta {
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--accent-2);
}

.news-card h3 {
   font-family: var(--font-display);
   font-size: 18px;
   text-transform: none;
   line-height: 1.2;
   margin: 6px 0 6px;
   color: #fff;
}

.news-card .excerpt {
   font-size: 12.5px;
   color: rgba(255, 255, 255, 0.82);
   line-height: 1.35;
}

footer {
   margin-top: auto;
   border-top: 1px solid var(--line);
   padding: 40px 0;
   color: var(--ink-muted);
   font-size: 13px;
}

footer .flinks {
   display: flex;
   gap: 22px;
   flex-wrap: wrap;
   margin-top: 14px;
   text-transform: uppercase;
   font-size: 12px;
}

footer .flinks a:hover {
   color: var(--accent);
}

/* Blocco titolo canzone — stile Muro di Copertine (v1) */
.song-hero {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 56px 1fr;
   gap: 16px;
   /* Niente più padding-top qui: lo spazio dall'alto della hero lo dà ora
      l'eyebrow stesso (spostato fuori da .song-hero, vedi sotto), non più
      questo contenitore. */
   padding: 0 0 30px;
   /* Allineati in alto (2026-09-09, richiesta esplicita): la copertina deve
      iniziare esattamente dove inizia l'h1 — per questo l'eyebrow ("SINGOLO"/
      "Dall'album...") è stato spostato FUORI da .song-hero (vedi
      traduzione_testo_id.php), altrimenti con align-items:start la copertina
      si sarebbe allineata all'eyebrow, non all'h1.
   */
   align-items: start;
}

/* Niente copertina reale trovata (2026-09-09): niente placeholder al suo
   posto, il testo scivola a occupare tutta la larghezza — colonna singola
   invece di riservare 200px vuoti. Specificità .page-canzone+.song-hero--no-cover
   (0,2,0) deliberatamente più alta della sola .song-hero (0,1,0) usata nelle
   media query qui sotto, così vince a ogni larghezza indipendentemente
   dall'ordine nel foglio di stile. */
.page-canzone .song-hero--no-cover {
   grid-template-columns: 1fr;
}

/* Rientro orizzontale dell'eyebrow (2026-09-09) — deve iniziare allineato
   all'h1, non al bordo sinistro, quando c'è una copertina (la stessa
   larghezza copertina+gap usata da .song-hero a ogni larghezza, qui sotto e
   nelle media query corrispondenti). Nessun rientro quando manca la
   copertina (.hero__eyebrow--con-cover non viene nemmeno aggiunta in quel
   caso, vedi traduzione_testo_id.php) — .song-hero--no-cover è già colonna
   singola, l'eyebrow deve restare a sinistra come il resto del testo. */
.page-canzone .hero__eyebrow--con-cover {
   margin-left: 72px; /* 56px copertina + 16px gap, combacia con .song-hero */
}

/* Frase sotto l'h1 (2026-09-09, richiesta esplicita): niente più limite a
   46 caratteri (regola generica .hero p.lede, pensata per la home) — su
   questa pagina occupa tutta la larghezza reale disponibile nella colonna
   di testo. */
.page-canzone .hero p.lede {
   max-width: none;
}

/* Pagina canzone: .song-hero ora vive dentro .hero (backdrop+scrim), niente
   padding doppio — lo spazio verticale lo dà solo .song-hero stesso. */
.page-canzone .hero {
   padding: 0;
}

/* L'eyebrow ora è fuori da .song-hero (vedi commento sopra) — scoped alla
   pagina canzone, non a .song-hero, altrimenti perderebbe il selettore.
   padding-top qui sostituisce il padding-top che .song-hero aveva prima
   (ora rimosso), così la distanza dal bordo della hero resta invariata. */
.page-canzone .hero__eyebrow {
   padding-top: 22px;
   margin-bottom: 10px;
}

.cover-big {
   width: 56px;
   height: 56px;
   border-radius: 8px;
   background-size: cover;
   background-position: center;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* Stesso font/grandezza esatti dell'H1 di .hero (a sua volta copiato dal vero
   .hero--single di apocanow.it, letto dal vivo — richiesta 2026-09-08:
   "stesso font, stessa grandezza"). */
.song-hero h1 {
   font-family: var(--font-hero);
   font-weight: 700;
   font-size: 4.4rem;
   line-height: 0.95;
   letter-spacing: 0.01em;
   text-transform: uppercase;
   margin: 0 0 17.6px;
}

.song-hero h1 em {
   font-style: normal;
   color: var(--accent);
}


.label-row {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}

.label {
   background: var(--bg-raised);
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 6px 14px;
   font-size: 13px;
   color: var(--ink-muted);
}

.label--accent {
   background: color-mix(in srgb, var(--accent) 18%, var(--bg-raised));
   border-color: var(--accent);
   color: var(--accent);
}

.content-grid {
   display: grid;
   grid-template-columns: 1fr 380px;
   gap: 40px;
   padding: 40px 0 60px;
}

/* Colonna di lettura più ampia sulla pagina canzone (2026-09-09, richiesta
   esplicita: "bastava allargare l'area di espansione del testo", non
   giustificare il testo dentro la larghezza esistente). La sidebar qui
   contiene solo contenuti che si adattano bene a una larghezza minore
   (rail orizzontale a scorrimento, liste rel-song a 1-2 colonne) — restringerla
   libera spazio reale per il testo di analisi. Scoped a .page-canzone per non
   toccare concerti/albums, che condividono .content-grid ma hanno una
   sidebar diversa (calendario/tracklist) mai testata a questa larghezza. */
.page-canzone .content-grid {
   grid-template-columns: 1fr 320px;
   /* Meno spazio tra i breadcrumbs/hero e il contenuto (articolo + sidebar,
      entrambi figli di questo stesso contenitore) — richiesta esplicita
      2026-09-09, era 40px come tutte le altre pagine con .content-grid. */
   padding-top: 16px;
}

/* Senza questo, un figlio con contenuto largo (es. .rail-grid che scorre in
   orizzontale) impedisce alla colonna della grid di restringersi sotto la
   sua larghezza intrinseca, e l'intera pagina trabocca in orizzontale
   invece di scorrere solo dentro .rail-grid — bug scoperto testando il
   layout mobile, non visibile su schermi larghi. */
.content-grid>* {
   min-width: 0;
}

/* Parte centrale canzone: font Frequenza (v2) sui titoli, riga sotto Archivio
   (v9), elenchi puntati Muro di Copertine (v1), il resto Notte di Concerto (v4) */
/* Azzera il padding:50px 0 della regola generica "section" più sopra —
   dentro l'articolo la separazione tra un capitolo e l'altro la dà solo
   questo margin-bottom, i 50px di padding (pensati per le sezioni della
   home) si sommavano creando molto più spazio di quanto sembrasse dal solo
   margine (2026-09-09, causa reale di "troppo spazio tra i breadcrumbs e
   il primo capitolo" — il padding-top della PRIMA sezione era proprio
   questo). */
article section {
   padding: 0;
   margin-bottom: 20px;
}

article h2 {
   font-family: var(--font-article);
   font-size: 21px;
   margin: 0 0 14px;
   text-transform: uppercase;
   letter-spacing: 0.3px;
   border-bottom: 1px solid var(--accent-2);
   padding-bottom: 8px;
}

article p {
   font-family: var(--font-hero-lede);
   opacity: 0.95;
   font-size: 17px;
   line-height: 1.65;
}

blockquote {
   font-family: var(--font-hero-lede);
   border-left: 3px solid var(--accent);
   margin: 18px 0 6px;
   padding: 4px 0 4px 18px;
   font-style: italic;
   font-size: 17px;
   line-height: 1.5;
   color: var(--accent-2);
}

/* Didascalia fonte della citazione (art. 70 LDA: titolo+autore adiacenti alla citazione) — subito sotto il blockquote, deliberatamente più piccola/discreta di un <p> normale. */
.citazione-fonte {
   margin: 0 0 18px 18px;
   font-size: 0.85rem;
   color: var(--ink-muted);
}

ul.trivia {
   list-style: none;
   padding: 0;
   margin: 0;
}

ul.trivia li {
   font-family: var(--font-hero-lede);
   padding: 12px 0;
   border-bottom: 1px solid var(--line);
   font-size: 15px;
   padding-left: 26px;
   position: relative;
}

ul.trivia li::before {
   content: "♪";
   position: absolute;
   left: 0;
   color: var(--accent);
}

.video-box {
   aspect-ratio: 16/9;
   background: var(--bg-raised);
   border: 1px solid var(--line);
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--ink-muted);
   font-size: 15px;
   margin-bottom: 16px;
   position: relative;
}

.video-embed {
   aspect-ratio: 16/9;
   border-radius: 6px;
   overflow: hidden;
   margin-bottom: 16px;
   background: var(--bg-sunk);
}

.video-embed iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
}

.video-box::before {
   content: "▶";
   position: absolute;
   font-size: 34px;
   color: var(--accent);
}

.video-box span {
   position: absolute;
   bottom: 14px;
   font-size: 12px;
}

.outbound {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin: 20px 0 38px;
}

.btn {
   padding: 12px 22px;
   border-radius: 3px;
   font-weight: 700;
   font-size: 13px;
   border: 1px solid var(--line);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.btn.primary {
   background: linear-gradient(160deg, var(--accent), var(--accent-deep));
   color: #fff;
   border-color: var(--accent);
}

.btn.primary:hover {
   background: linear-gradient(160deg, var(--accent-deep), var(--accent));
   border-color: var(--accent-deep);
}

.btn.ghost:hover {
   border-color: var(--accent-2);
   color: var(--accent-2);
}

.btn {
   cursor: pointer;
}

/* Modulo di contatto (/contattaci) */
.contact-form {
   max-width: 520px;
}

.form-field {
   margin-bottom: 20px;
}

.form-field label {
   display: block;
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.3px;
   color: var(--ink-muted);
   margin-bottom: 8px;
}

.form-field label small {
   color: var(--accent);
}

.form-field input,
.form-field textarea {
   width: 100%;
   background: var(--bg-raised);
   border: 1px solid var(--line);
   border-radius: 8px;
   color: var(--ink);
   font-size: 15px;
   font-family: var(--font-body);
   padding: 12px 14px;
   resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
   outline: 2px solid var(--accent);
}

.form-field-check {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   color: var(--ink-muted);
}

.form-notice {
   display: none;
   padding: 12px 16px;
   border-radius: 8px;
   margin-top: 16px;
   font-size: 14px;
   font-weight: 600;
}

.form-notice.is-visible {
   display: block;
}

.form-notice--success {
   background: rgba(61, 220, 151, 0.12);
   color: #3ddc97;
   border: 1px solid rgba(61, 220, 151, 0.3);
}

.form-notice--error {
   background: rgba(255, 45, 88, 0.12);
   color: #ff6b6b;
   border: 1px solid rgba(255, 45, 88, 0.3);
}

/* Pagina cookie policy (/cookies) — riusa .trivia/article già definiti altrove */
.cookie-table {
   width: 100%;
   border-collapse: collapse;
   margin: 16px 0 30px;
   display: block;
   overflow-x: auto;
}

.cookie-table td {
   border: 1px solid var(--line);
   padding: 12px 14px;
   font-size: 14px;
   color: var(--ink-muted);
   vertical-align: top;
}

.cookie-table td:first-child {
   font-family: var(--font-mono);
   color: var(--ink);
   white-space: nowrap;
   width: 1%;
}

.faq-item {
   border-bottom: 1px solid var(--line);
}

.faq-item summary {
   cursor: pointer;
   padding: 16px 0;
   font-weight: 700;
   font-size: 15.5px;
   list-style: none;
   display: flex;
   justify-content: space-between;
   text-transform: uppercase;
   letter-spacing: 0.3px;
}

.faq-item summary::-webkit-details-marker {
   display: none;
}

.faq-item summary::after {
   content: "+";
   color: var(--accent);
   font-size: 20px;
   text-transform: none;
}

.faq-item[open] summary::after {
   content: "–";
}

.faq-item p {
   font-family: var(--font-hero-lede);
   padding-bottom: 16px;
   margin: 0;
   text-transform: none;
}

aside .box,
aside .box-rail {
   background: var(--bg-raised);
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 20px;
   margin-bottom: 22px;
}

/* Link "guarda tutti" in fondo a un .box (es. "Altri album di [artista]")
   — a sé stante sotto l'elenco invece che accanto al titolo h3: in una
   sidebar stretta (320px) un h3+link affiancati (come .section-head, pensato
   per la colonna larga dell'articolo/home) si schiacciano senza spazio. */
.box-link-more {
   display: block;
   margin-top: 14px;
   text-align: right;
   color: var(--accent-deep);
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   text-decoration: none;
}

.box-link-more:hover {
   text-decoration: underline;
}

aside .box h3,
aside h3 {
   font-family: var(--font-display);
   font-size: 15px;
   margin: 0 0 14px;
   text-transform: uppercase;
   letter-spacing: 0.3px;
}

/* Altre canzoni dell'artista (pagina canzone) — stile Blockbuster (v12),
   griglia 3x2 che scorre orizzontalmente */
.rail-wrap-sb {
   position: relative;
}

.rail-grid {
   display: grid;
   grid-auto-flow: column;
   grid-template-rows: repeat(2, 1fr);
   grid-auto-columns: 100px;
   column-gap: 10px;
   row-gap: 10px;
   overflow-x: auto;
   scroll-behavior: smooth;
   padding-bottom: 4px;
}

.rail-grid::-webkit-scrollbar {
   height: 6px;
}

.rail-grid::-webkit-scrollbar-thumb {
   background: var(--line);
   border-radius: 3px;
}

/* Stesso stile delle card di "Ultimi testi e significati inseriti"
   (2026-09-10): gradiente del brand + bordo colorato invece del vecchio
   riquadro a tinta piena, thumbnail reale in un angolo — vedi .teaser-card
   in style.css. */
.mini-poster {
   width: 100px;
   height: 118px;
   border-radius: 6px;
   border: 2px solid;
   background-size: cover;
   background-position: center;
   position: relative;
   display: flex;
   align-items: flex-end;
   overflow: hidden;
}

.mini-poster::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.88) 100%);
}

.mini-poster__thumb {
   position: absolute;
   top: 6px;
   right: 6px;
   width: 44px;
   height: 44px;
   border-radius: 7px;
   object-fit: cover;
   z-index: 2;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Chip con iniziali (2026-09-10) — stesso angolo/dimensione di
   .mini-poster__thumb sopra, mostrata al suo posto quando la canzone non ha
   ancora una copertina locale scaricata (la maggior parte del catalogo,
   finché il backfill non ci passa — vedi canzone_cover_url() in
   src/data.php). Stesso linguaggio visivo di .album-chip__thumb-ph
   (bordo+ombra+iniziali centrate, gradiente a due toni dalla palette unica
   del sito), z-index:2 per restare sopra lo scrim ::after di .mini-poster
   come già fa .mini-poster__thumb. */
.mini-poster__thumb-ph {
   position: absolute;
   top: 6px;
   right: 6px;
   width: 44px;
   height: 44px;
   border-radius: 7px;
   border: 2px solid;
   z-index: 2;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   color: var(--ink);
   font-size: 15px;
   letter-spacing: 0.02em;
}

.mini-poster .cap {
   position: relative;
   z-index: 1;
   padding: 6px;
   color: #fff;
   font-size: 10.5px;
   font-weight: 700;
   line-height: 1.15;
}

.rail-arrow-sb {
   position: absolute;
   top: 40%;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.65);
   border: 1px solid var(--line);
   color: #fff;
   font-size: 13px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 2;
}

.rail-arrow-sb.prev {
   left: -10px;
}

.rail-arrow-sb.next {
   right: -10px;
}

/* Canzoni simili — stile Muro di Copertine (v1) */
.rel-song {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 9px 0;
   border-bottom: 1px solid var(--line);
}

.rel-song:last-child {
   border: 0;
}

.rel-song .mini {
   width: 44px;
   height: 44px;
   border-radius: 6px;
   flex-shrink: 0;
   background-size: cover;
   background-position: center;
}

.rel-song .t {
   font-size: 13.5px;
   font-weight: 700;
}

.rel-song .a {
   font-size: 12px;
   color: var(--ink-muted);
}

/* Variante a 2 colonne di .rel-song — richiesta 2026-09-08 per il box
   "Album X di Y" nella pagina canzone (stesso stile riga di "Canzoni
   simili", solo più compatto per stare in due colonne nella sidebar). */
.rel-song-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0 14px;
}

.rel-song-grid .rel-song {
   padding: 8px 0;
}

.rel-song-grid .rel-song .mini {
   width: 36px;
   height: 36px;
}

.rel-song-grid .rel-song .t {
   font-size: 12.5px;
}

/* Nav A-Z (indice /traduzione-testo) */
.az-nav {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 36px 0 40px;
}

/* Stesso linguaggio delle iconcine con iniziali (.album-chip__thumb-ph):
   gradiente/bordo/ombra/font — ma qui SEMPRE scuro con lettera bianca,
   mai colorato per lettera (richiesta 2026-09-10). */
.az-nav a {
   width: 38px;
   height: 38px;
   border-radius: 8px;
   background: linear-gradient(160deg, var(--bg-raised), var(--bg-sunk));
   border: 1px solid var(--line);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   font-size: 14px;
   font-weight: 700;
   color: var(--ink);
}

.az-nav a:hover,
.az-nav a.active {
   background: linear-gradient(160deg, var(--accent), var(--accent-deep));
   border-color: var(--accent);
}

.song-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-bottom: 20px;
}

.song-card {
   background: var(--bg-raised);
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden;
}

.song-card .cov {
   aspect-ratio: 1;
   background-size: cover;
   background-position: center;
}

.song-card .info {
   padding: 10px 12px;
}

.song-card .t {
   font-weight: 700;
   font-size: 13.5px;
}

.song-card .a {
   font-size: 12px;
   color: var(--ink-muted);
}

.album-row {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 9px 0;
   border-bottom: 1px solid var(--line);
}

.album-row:last-child {
   border: 0;
}

.album-row .mini {
   width: 44px;
   height: 44px;
   border-radius: 6px;
   flex-shrink: 0;
   background-size: cover;
   background-position: center;
}

.album-row .t {
   font-size: 13.5px;
   font-weight: 700;
}

.album-row .a {
   font-size: 12px;
   color: var(--ink-muted);
}

/* Titolo semplice senza Hero (lettera, artista) — crumbs sopra, non sotto */
.page-head {
   padding: 14px 0 28px;
}

.page-head h1 {
   font-family: var(--font-hero);
   font-weight: 700;
   font-size: 3rem;
   line-height: 0.98;
   letter-spacing: 0.01em;
   text-transform: uppercase;
   margin: 0 0 6px;
}

.page-head h1 em {
   font-style: normal;
   color: var(--accent);
}

.page-head p.lede {
   font-family: var(--font-hero-lede);
   color: var(--ink-muted);
   font-size: 1rem;
   margin: 0;
}

.count {
   font-family: var(--font-hero-lede);
   color: var(--accent-deep);
   font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-bottom: 34px;
   display: block;
}

/* Testo editoriale bio-artista / descrizione-album (pagina artista + pagina
   singolo album) — stessa famiglia/colore del lede, usabile fuori da .hero
   e .page-head dove quelle regole scoped non arrivano. */
.bio-text {
   font-family: var(--font-hero-lede);
   color: var(--ink-muted);
   font-size: 1rem;
   line-height: 1.65;
   max-width: 75ch;
   margin: 14px 0 32px;
}

/* Ricerca sulla pagina lettera — filtro istantaneo (decisione presa) */
.letter-search {
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--bg-raised);
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 6px;
   max-width: 420px;
   margin-bottom: 22px;
}

.letter-search input {
   flex: 1;
   background: transparent;
   border: 0;
   color: var(--ink);
   font-size: 15px;
   padding: 10px 14px;
   font-family: var(--font-body);
}

.letter-search input:focus {
   outline: 2px solid var(--accent);
   border-radius: 8px;
}

.letter-search .badge {
   background: linear-gradient(160deg, var(--accent), var(--accent-deep));
   border: 1px solid var(--accent);
   color: #fff;
   font-family: var(--font-display);
   font-size: 13px;
   font-weight: 700;
   border-radius: 6px;
   padding: 8px 12px;
   flex-shrink: 0;
}

.letter-search button {
   background: linear-gradient(160deg, var(--accent), var(--accent-deep));
   border: 1px solid var(--accent);
   color: #fff;
   border-radius: 8px;
   padding: 0 20px;
   height: 38px;
   font-family: var(--font-body);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   flex-shrink: 0;
}

.letter-search button:hover {
   background: linear-gradient(160deg, var(--accent-deep), var(--accent));
   border-color: var(--accent-deep);
}

.letter-search-note {
   font-size: 12.5px;
   color: var(--ink-faint);
   margin: -14px 0 26px;
}

.no-results {
   display: none;
   color: var(--ink-muted);
   font-size: 14px;
   padding: 20px 0;
}

.no-results.is-visible {
   display: block;
}

/* Griglia a 3 colonne (richiesta 2026-09-08: 30 artisti/pagina in 3 colonne
   = 10 righe, "anche a costo di rimpicciolire gli elementi" — avatar/font
   leggermente più piccoli del design a 2 colonne originale, non serve una
   card compatta verticale con 3 colonne c'è spazio a sufficienza). */
.artist-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin-bottom: 24px;
}

.artist-card {
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--bg-raised);
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 10px 14px;
   overflow: hidden;
}

.artist-card:hover {
   border-color: var(--accent-2);
}

.is-hidden {
   display: none;
}

.artist-card .av {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background-size: cover;
   background-position: center;
   flex-shrink: 0;
}

.artist-card .t {
   font-weight: 700;
   font-size: 13.5px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* Paginatore sotto la griglia artisti (/traduzione-testo/{lettera}/{pagina}) */
.pager {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   align-items: center;
   margin-bottom: 30px;
}

.pager a,
.pager span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 34px;
   height: 34px;
   padding: 0 8px;
   border-radius: 6px;
   font-size: 13px;
   font-weight: 600;
}

.pager a {
   background: var(--bg-raised);
   border: 1px solid var(--line);
   color: var(--ink);
}

.pager a:hover {
   border-color: var(--accent-2);
}

.pager .current {
   background: var(--accent);
   color: #fff;
}

.pager .ellipsis {
   color: var(--ink-faint);
}

.album-grid.cols-4 {
   grid-template-columns: repeat(4, 1fr);
}

/* Calendario concerti (/concerti) — vive dentro aside .box, che fornisce già
   sfondo/bordo/padding: qui solo il contenuto interno del calendario. */
.cal-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 14px;
}

.cal-label {
   font-family: var(--font-display);
   font-size: 15px;
   text-transform: uppercase;
}

.cal-nav {
   width: 30px;
   height: 30px;
   border-radius: 6px;
   background: var(--bg-sunk);
   border: 1px solid var(--line);
   color: var(--ink);
   font-size: 16px;
   cursor: pointer;
}

.cal-nav:hover {
   border-color: var(--accent-2);
}

.cal-weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
   font-size: 11px;
   color: var(--ink-faint);
   text-transform: uppercase;
   margin-bottom: 6px;
}

.cal-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 4px;
}

.cal-day {
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 6px;
   font-size: 13px;
   color: var(--ink-muted);
}

.cal-day--empty {
   visibility: hidden;
}

.cal-day--today {
   border: 1px solid var(--accent-2);
   color: var(--ink);
}

.cal-day--event {
   background: var(--accent);
   color: #fff;
   font-weight: 700;
   cursor: pointer;
}

.cal-day--event:hover {
   background: var(--accent-deep);
}

/* Canzoni raggruppate per album (pagina artista) */
.album-group {
   margin-bottom: 34px;
}

.album-divider {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 16px;
   padding: 10px 14px;
   background: var(--bg-raised);
   border: 1px solid var(--line);
   border-left: 3px solid var(--accent);
   border-radius: 6px;
}

.album-divider .mini {
   width: 36px;
   height: 36px;
   border-radius: 4px;
   background-size: cover;
   background-position: center;
   flex-shrink: 0;
}

.album-divider .t {
   font-family: var(--font-display);
   font-size: 14px;
   text-transform: uppercase;
}

.album-divider .y {
   font-size: 12px;
   color: var(--ink-muted);
   margin-left: 6px;
}

/* ======================================================================
   RESPONSIVE — audit mobile completo (stesso livello di apocanow.it: nav
   a hamburger sopra + breakpoint su ogni sezione, non un solo aggiustamento
   generico). Due soglie principali (900px tablet, 700px telefono) più
   qualche rifinitura più stretta dove serve, stesso schema di apocanow.
   ====================================================================== */

@media (max-width:900px) {
   nav.main-nav {
      display: none;
   }

   .menu-toggle {
      display: block;
   }

   /* Widget radio ridotto a solo pulsantino con la nota musicale su mobile
      (richiesta esplicita) — stesso box 42x42 di .back-button/.menu-toggle,
      etichetta di testo nascosta. */
   .radio-toggle {
      width: 42px;
      height: 42px;
      padding: 0;
      justify-content: center;
      border-radius: 8px;
   }

   .radio-toggle__label {
      display: none;
   }

   /* Selettore generico "section" (richiesta 2026-09-10, solo mobile) — era
      50px 0. Non tocca .page-home section (già 24px 0, non scoped a mobile)
      né article section sulla pagina canzone (già a 0, più specifico:
      vince comunque). */
   section {
      padding: 24px 0;
   }

   .content-grid {
      grid-template-columns: 1fr;
      /* Dimezzato (richiesta 2026-09-10, solo mobile) — era 40px, ereditato
         dalla regola base pensata per lo spazio orizzontale fra due colonne
         desktop, qui è solo spazio verticale fra articolo e sidebar impilati. */
      gap: 20px;
      /* Azzerato (richiesta 2026-09-10, solo mobile) — era 40px 0 60px. */
      padding: 0;
   }

   /* .page-canzone .content-grid / .page-traduzione-testo .content-grid (fuori
      da media query) hanno specificità più alta della regola generica sopra —
      vincono sempre, anche qui sotto, se non le si ripete con la stessa
      specificità. Bug reale trovato 2026-09-10: sidebar sovrapposta al
      contenuto su mobile (canzone + album, che condividono questa classe). */
   .page-canzone .content-grid {
      grid-template-columns: 1fr;
      padding: 0;
   }

   .page-traduzione-testo .content-grid {
      padding: 0;
   }

   /* /concerti (richiesta 2026-09-10, solo mobile): calendario prima,
      elenco dopo — impilati (1 colonna), l'ordine nel DOM resta invariato
      (main = elenco, per SEO/accessibilità viene comunque prima nel markup),
      qui si cambia solo l'ordine visivo. Classe dedicata (non
      .page-traduzione-testo, condivisa con /traduzione-testo che ha un
      content-grid articolo+aside diverso) per non toccare altre pagine. */
   .content-grid--concerti aside {
      order: 1;
   }

   .content-grid--concerti main {
      order: 2;
   }

   .song-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .artist-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .album-grid {
      grid-template-columns: 1fr 1fr;
      max-width: none;
   }

   .album-grid.cols-4 {
      grid-template-columns: repeat(2, 1fr);
   }

   .stub-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .song-hero {
      padding: 0 0 24px;
   }

   .song-hero h1 {
      font-size: 30px;
   }
}

@media (max-width:700px) {

   .wrap,
   .site-bar {
      padding-left: 18px;
      padding-right: 18px;
   }

   /* Hero — molto meno padding e font più piccolo, altrimenti il titolo
     Barlow Condensed (pensato per desktop) va a capo su 3-4 righe enormi. */
   .hero {
      padding: 32px 0 28px;
   }

   .page-traduzione-testo .hero {
      padding: 24px 0 22px;
   }

   .hero h1 {
      font-size: 2.5rem;
   }

   .page-traduzione-testo .hero h1 {
      font-size: 2.1rem;
   }

   .hero p.lede,
   .page-traduzione-testo .hero p.lede {
      max-width: none;
   }

   .search-box {
      max-width: none;
   }

   .page-head h1 {
      font-size: 2rem;
   }

   /* News — impila lead sopra e lista sotto, invece di due colonne strette. */
   .news-showcase {
      grid-template-columns: 1fr;
   }

   .news-lead {
      min-height: 260px;
   }

   /* Ultimi testi e significati — 5 card fisse diventano una griglia a 2,
     poi 1 sotto i 480px (vedi blocco successivo). */
   .teaser-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .testi-feed {
      grid-template-columns: 1fr;
      column-gap: 0;
   }

   /* Chip a riga (solo mobile, richiesta 2026-09-10): gradiente leggero,
      scuro a sinistra (tono della chip_tone_palette del sito, passato da
      index.php via --row-tone) verso più chiaro a destra (--bg-raised) —
      la riga in stile "flat list" resta invariata su desktop, qui diventa
      una chip arrotondata come il resto del sito. */
   .testi-feed .row {
      background: linear-gradient(90deg, var(--row-tone, var(--accent-deep)) 0%, var(--bg-raised) 80%);
      border-radius: 10px;
      border-bottom: 0;
      padding: 12px 14px;
      margin-bottom: 10px;
   }

   .testi-feed .row:last-child {
      margin-bottom: 0;
   }

   /* Titolo/artista più leggibili su mobile: le colonne si restringono
      (2 poi 1 per riga) ma il font ereditava le dimensioni desktop. */
   .teaser-card .t {
      font-size: 19px;
   }

   .teaser-card .a {
      font-size: 15px;
   }

   /* Font/colore allineati a "Ultimi Album" (.album-chip--md .t/.y),
      richiesta 2026-09-10 — solo mobile, solo queste due proprietà. */
   .testi-feed .t {
      font-size: 14px;
      color: var(--ink);
   }

   .testi-feed .a {
      font-size: 12px;
      color: var(--ink-muted);
   }

   .song-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .album-grid {
      grid-template-columns: 1fr 1fr;
   }

   .album-grid.cols-4 {
      grid-template-columns: repeat(2, 1fr);
   }

   .news-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .song-hero {
      grid-template-columns: 1fr;
      justify-items: start;
      text-align: left;
   }

   .page-canzone .hero__eyebrow--con-cover {
      margin-left: 0; /* .song-hero è colonna singola qui: copertina e testo impilati, niente rientro */
   }

   /* Eyebrow sotto il titolo invece che sopra (richiesta esplicita, solo
      mobile) — scambia i due duplicati creati in traduzione_testo_id.php. */
   .hero__eyebrow--top {
      display: none;
   }

   .hero__eyebrow--sotto-titolo {
      display: flex;
      margin: 10px 0 14px;
   }

   /* Meno distanza tra la hero e i breadcrumbs (richiesta esplicita, solo
      mobile) — riduce lo spazio sotto .song-hero e sopra .crumbs, che sulla
      pagina canzone insieme valevano ~54px reali (30px padding-bottom di
      .song-hero + 8px padding-top di .crumbs + margini interni). */
   .page-canzone .song-hero {
      padding-bottom: 10px;
   }

   .page-canzone .crumbs {
      padding-top: 2px;
   }

   /* Pagina album (2026-09-10, richiesta esplicita: "solo nella pagina
      dell'album... i breadcrumbs prendessero spazio dalle chip") — questa
      pagina condivide .page-canzone con la pagina canzone (stesso layout
      hero/song-hero), ma qui i breadcrumbs devono restare più respirati:
      la regola sopra (.page-canzone .crumbs, 2px) vince per specificità
      pari ma ordine successivo — .page-album la sovrascrive di nuovo.
      Spazio tolto a .section-head (24px margin-bottom -> 12px, solo qui)
      e dato ai breadcrumbs (2px -> 14px), stesso totale di prima. */
   .page-album .crumbs {
      padding-top: 14px;
   }

   .page-album .section-head {
      margin-bottom: 12px;
   }

   /* Bordo colorato caratteristico anche sulle mini thumbnail con copertina
      reale (richiesta esplicita 2026-09-10, solo mobile) — .album-chip__thumb
      e .mini.ph ce l'hanno già ad ogni larghezza; .teaser-card__thumb e
      .mini-poster__thumb (variante con foto vera, non iniziali) ne erano
      privi. Colore impostato inline in border-color per card/thumb, stessa
      chip_tone_palette() già usata ovunque sul sito. */
   .teaser-card__thumb,
   .mini-poster__thumb {
      border: 2px solid;
   }

   .rail-grid {
      grid-template-rows: repeat(2, 1fr);
      /* Card più lunghe (richiesta 2026-09-10, solo mobile) — altezza
         invariata (118px, vedi .mini-poster), solo più larghe: 100px -> 136px. */
      grid-auto-columns: 136px;
   }

   .mini-poster {
      width: 136px;
   }

   .mini-poster .cap {
      font-size: 13px;
   }

   /* Thumb più grande (richiesta 2026-09-10, solo mobile) — era 44x44. */
   .mini-poster__thumb,
   .mini-poster__thumb-ph {
      width: 56px;
      height: 56px;
   }
}

@media (max-width:480px) {
   .teaser-grid {
      grid-template-columns: 1fr;
   }

   /* .song-grid resta a 2 colonne fino a 480px per le card piccole normali
      (es. pagina artista) — ma qui contiene teaser-card riusate (font più
      grande, vedi sopra), che a 2 colonne si sovrappongono al badge. */
   .song-grid--teasers {
      grid-template-columns: 1fr;
   }

   /* "Altre canzoni di [artista]" nella pagina album (richiesta 2026-09-10,
      solo mobile): mostra la vera chip .album-chip--md (identica a
      Tracklist/"Ultimi artisti inseriti"), nasconde la griglia di
      teaser-card pensata per desktop — vedi albums_id.php. */
   .altre-canzoni-desktop {
      display: none;
   }

   .altre-canzoni-mobile {
      display: flex;
   }

   .album-grid,
   .album-grid.cols-4 {
      grid-template-columns: 1fr;
   }

   .stub-grid {
      grid-template-columns: 1fr;
   }

   .news-grid {
      grid-template-columns: 1fr;
   }

   .artist-grid {
      grid-template-columns: 1fr;
   }

   .site-bar .logo {
      font-size: 19px;
   }
}