/* ==========================================================
   PAGINE INTERNE — Songs, Artists, Sources, Authors
   Solo layout e tipografia di pagina. I componenti (btn-flag, ticket,
   voice-card, author-card, src-row, meta-block, text-parallel, sheet…)
   vivono in pishkey-ds.css e qui NON si ridefiniscono (§9).
   ========================================================== */
.page-wrap { padding: 7.5rem var(--edge) 5rem; }
.page-header { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.75rem; }

/* ── Songs: griglia unica su fondo pannello, come la home (niente perforazione) ── */
.page-main--panel { background: var(--bg-panel); min-height: 100vh; }
.song-grid { margin-top: .5rem; }
.corridor { margin-bottom: 3.5rem; }
.corridor-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: 1.4rem; padding-bottom: .9rem; border-bottom: 1px solid var(--ui-line); }
.corridor-count { font-family: var(--font-head); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(239,239,242,.55); }
.corridor-link { margin-left: auto; font-family: var(--font-head); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ui); }
.corridor-link:hover { color: var(--chalk); }
.ticket-grid--wrap { display: grid; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
.corridor .ticket-grid { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }

/* ── Pagina artista: stesso impianto delle altre pagine interne ── */
.band--panel { background: var(--bg-panel); padding: 4.5rem 0 5rem; }
.band--panel > .page-wrap { padding-top: 0; padding-bottom: 0; }
.band--panel .lede, .artist-sec .lede { margin: 1rem 0 2.25rem; }
.band--panel .section-title, .artist-sec .section-title { margin-bottom: 0; }
.artist-page { padding-bottom: 4.5rem; }
.artist-page--mid { padding-top: 0; }
.artist-page--end { padding-top: 4.5rem; padding-bottom: 5rem; }
.artist-page--end > .artist-sec + .artist-sec { margin-top: 5rem; }
.artist-genre { margin: 0; font-family: var(--font-head); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(239,239,242,.72); }
.artist-intro { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: start; }
.artist-intro--solo { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
/* Avatar pulito: nessun filtro, angolo, ombra o gradiente. */
.artist-avatar img { display: block; width: 100%; height: auto; }
/* Accento della pagina = colore dell'artista (--accent, impostato da js/artist-template.js):
   eyebrow, bollino, numeri e nomi nelle righe fonte ereditano --ui. */
#pishkey-app { --ui: var(--accent); }
/* Sfondo opzionale dell'header (campo "heroImage" nella scheda artista), come l'hero della home. */
.artist-top { position: relative; }
.artist-top-bg { position: absolute; inset: 0; z-index: 0; background: center / cover no-repeat; }
.artist-top--bg::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(13,10,18,.82) 0%, rgba(13,10,18,.55) 45%, rgba(13,10,18,.3) 100%), linear-gradient(to top, var(--bg) 0%, transparent 35%), rgba(13,10,18,.15); }
.artist-top > .page-wrap { position: relative; z-index: 2; }
.artist-lore { display: flex; flex-direction: column; gap: 1.1rem; max-width: 640px; }
.artist-lore p { font-weight: 300; line-height: 1.85; color: rgba(239,239,242,.86); }
.artist-lore strong { font-weight: 500; color: #fff; }
.artist-lore em { display: block; margin: .6rem 0; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.5rem; line-height: 1.35; color: var(--ui); }
.artist-lore a { text-decoration: underline; text-decoration-color: rgba(239,239,242,.3); text-underline-offset: 3px; }
.band--panel .eyebrow-ui + .section-title, .artist-sec .eyebrow-ui + .section-title { margin-top: .9rem; }
.artist-more { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.artist-world-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.quotes-list { display: flex; flex-direction: column; gap: 2.25rem; max-width: 760px; }
.quote-item { margin: 0; padding-left: 1.5rem; border-left: 2px solid var(--ui); }
.quote-item p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.3rem; line-height: 1.6; color: #fff; margin-bottom: .9rem; }
.quote-item footer { font-family: var(--font-head); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(239,239,242,.55); background: none; padding: 0; border: 0; opacity: 1; text-align: left; }
.quote-item footer a { color: var(--ui); }

/* ── Pagina canzone: blocco Source ── */
.song-source { padding-bottom: 2.5rem; }
.song-source-inner { padding: 1.5rem var(--edge) 0; display: flex; flex-direction: column; gap: 1rem; }
.song-source-inner > * { max-width: 760px; }
.song-source-inner > .src-table { max-width: none; }
.source-line { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.5rem; line-height: 1.25; }
.source-line a { text-decoration: underline; text-decoration-color: rgba(239,239,242,.3); text-underline-offset: 3px; }
.source-line a:hover { color: var(--ui); }
.source-adapt { font-weight: 300; line-height: 1.75; color: rgba(239,239,242,.78); }
.source-excerpt { margin: 0; padding: .25rem 0 .25rem 1.25rem; border-left: 2px solid var(--ui); font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; line-height: 1.6; color: #fff; }
.record-based { font-family: var(--font-head); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(239,239,242,.7); }
.coming-note { margin-top: 2rem; text-align: left; font-family: var(--font-head); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(239,239,242,.45); }

/* ── Artists ── */
.voice-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2.5rem 2rem; margin-bottom: 4rem; }
.voice-item { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.voice-sources { font-family: var(--font-head); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ui); }
.voice-sources:hover { color: var(--chalk); }
.where-from { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; text-align: left; }
.where-from img { width: 100%; max-width: 900px; height: auto; border-radius: var(--ticket-radius); opacity: .9; }

/* ── Sources: indice ── */
.filter-more { flex-basis: 100%; }
.filter-more summary { cursor: pointer; display: inline-block; font-family: var(--font-head); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ui); margin-bottom: .9rem; }
.filter-more[open] { display: flex; flex-direction: column; gap: 1rem; }
.filter-more[open] summary { margin-bottom: 0; }
.src-table { display: flex; flex-direction: column; }

/* ── Sources: scheda a 8 sezioni ── */
.source-hero { padding: 7.5rem var(--edge) 3.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.source-byline { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: rgba(239,239,242,.85); }
.source-byline a { color: var(--ui); }
.source-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: .5rem; }
.source-sec { padding-top: 40px; }
.sheet .sheet-inner { padding: 2rem var(--edge) 4rem; }
.sec-title, .section-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; margin-bottom: 1.75rem; }
.section-title { margin-bottom: 1.5rem; }
.poem p, .lyrics p { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-style: italic; font-weight: 400; line-height: 1.8; }
.poem-meta { margin-top: 2rem; font-family: var(--font-head); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(239,239,242,.55); }
.prose { max-width: 720px; display: flex; flex-direction: column; gap: 1.2rem; font-weight: 300; font-size: 1.02rem; line-height: 1.85; color: rgba(239,239,242,.86); }
.prose strong { font-weight: 500; color: #fff; }
.prose a { text-decoration: underline; text-decoration-color: rgba(239,239,242,.3); text-underline-offset: 3px; }
.prose-note { font-weight: 300; font-style: italic; color: rgba(239,239,242,.6); }
.lyrics { max-width: 720px; }
.lyrics .stage, .lyrics .part-label { display: block; margin-bottom: .35rem; font-family: var(--font-head); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ui); }
.lyrics .adlib { color: rgba(239,239,242,.6); font-style: italic; }
mark.cut { background: rgba(154,147,196,.22); color: inherit; padding: 0 .2em; border-radius: 3px; box-shadow: inset 0 -1px 0 var(--ui); }
.lyrics-meta { margin-top: 1.5rem; font-size: .85rem; color: rgba(239,239,242,.6); }
.record-stores { display: flex; flex-wrap: wrap; gap: .75rem; }
.related-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.25rem; }

/* ── Authors ── */
.author-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.author-hero { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: start; }
.author-frame--hero { box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.author-frame--hero::after { display: none; }
.author-bio { display: flex; flex-direction: column; gap: 1.1rem; max-width: 640px; }
.author-bio p { font-weight: 300; line-height: 1.85; color: rgba(239,239,242,.86); }
.author-dates-line { font-family: var(--font-head); font-size: .8rem !important; letter-spacing: .2em; text-transform: uppercase; color: var(--ui) !important; }
.author-works { display: flex; flex-direction: column; margin-bottom: 3.5rem; }
.author-works > .eyebrow-ui { margin-bottom: .5rem; }

/* footer: titolo news in tondo, non in maiuscolo */
.footer-news .fn-title { text-transform: none; }

/* ── Responsive ── */
@media (max-width: 899px) {
  .page-wrap { padding: 6.5rem var(--edge) 4rem; }
  .corridor .ticket-grid, .ticket-grid--wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .author-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .author-hero, .artist-intro { grid-template-columns: minmax(0, 1fr); }
  .artist-intro .artist-avatar { max-width: 320px; }
  .band--panel { padding: 3.5rem 0 4rem; }
  .author-frame--hero { max-width: 320px; }
  .source-hero { padding: 6.5rem var(--edge) 2.5rem; }
  .sheet .sheet-inner { padding: 1.5rem var(--edge) 3rem; }
}
@media (max-width: 599px) {
  .author-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .corridor-link { margin-left: 0; flex-basis: 100%; }
  .source-byline { font-size: 1.25rem; }
}

/* breadcrumb del menu: sempre lavanda leggibile, anche per artisti con accento scuro (Fay Dodo) */
.nav-breadcrumb, .nav-breadcrumb a, .nav-breadcrumb .crumb-current { color: var(--ui); }


/* Single con più tracce: etichetta sulla card e blocco sulla pagina del brano */
.ticket-single { font-family: var(--font-ui, inherit); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.record-single { margin: .35rem 0 0; font-size: .95rem; opacity: .8; }
.song-subtitle { font-family: var(--font-head); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ui); margin: 2rem 0 0; }
.record-single-list ol { margin: .5rem 0 0; padding-left: 1.3rem; }
.record-single-list li { margin: .25rem 0; }

/* ── Scheda canzone: stesso impianto di Artist/Author (copertina = ritratto) ── */
.song-page { --ui: var(--song-clr, var(--accent)); }
.song-hero { grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); }
.song-ticket .ticket-grid { display: block; overflow: visible; }
.song-ticket .ticket { width: 100%; }
.song-author { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 2rem 3.5rem; align-items: start; }
.song-nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.song-hero { align-items: stretch; }
.song-info { max-width: none; justify-content: space-between; }
.song-info-top { display: flex; flex-direction: column; gap: 1.1rem; }
.song-info .display-title { margin: 0; }
@media (max-width: 899px) { .song-hero { grid-template-columns: minmax(0, 1fr); } .song-ticket { max-width: 320px; } .song-author { grid-template-columns: minmax(0, 1fr); } .song-author .author-card { max-width: 260px; } }
.song-page .sheet-inner > .eyebrow-ui + .section-title { margin-top: .9rem; }
/* Il biglietto e' disegnato per il fondo pannello: l'intestazione della scheda canzone sta su pannello. */
.song-top { background: var(--bg-panel); }

/* ── Nota in prima persona (fumetto + ritratto): artista, Pishkey o dialogo ──
   Su fondo pannello (.note-tone--panel): fumetto scuro (= --bg). Su fondo pagina (.note-tone--page): fumetto chiaro (= --bg-panel).
   Il lato del ritratto (--right / --left) lo decide lo script. */
.note-thread { display: flex; flex-direction: column; gap: 1rem; margin-top: 3rem; width: 100%; }
.artist-note { --note-bg: var(--bg); display: flex; align-items: center; gap: 1.5rem; }
.note-tone--page { --note-bg: var(--bg-panel); }
.artist-note--right { flex-direction: row-reverse; }
.artist-note--left { flex-direction: row; }
.note-avatar { flex: none; display: block; width: 96px; height: 96px; }
.note-avatar .voice-ring { position: relative; inset: auto; display: block; width: 100%; height: 100%; padding: 5px; box-shadow: 0 8px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.note-avatar .voice-face { display: block; border-width: 2px; }
.note-avatar .voice-face img { display: block; }
.note-bubble { position: relative; flex: 0 1 auto; min-width: 0; background: var(--note-bg); border-radius: 16px; padding: 1.35rem 1.75rem; }
.note-bubble::after { content: ''; position: absolute; top: 50%; width: 14px; height: 14px; background: var(--note-bg); transform: translateY(-50%) rotate(45deg); }
.artist-note--right .note-bubble::after { right: -6px; }
.artist-note--left .note-bubble::after { left: -6px; }
.artist-note--guest .note-who { color: var(--who, #9a93c4); }
.artist-note--pishkey .note-who { color: #9a93c4; }
.note-who { display: block; margin-bottom: .55rem; font-family: var(--font-head); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ui); }
.note-bubble p { margin: 0; font-weight: 300; line-height: 1.7; color: rgba(239,239,242,.92); }
.source-hero .note-thread { margin-top: 1.5rem; }
@media (max-width: 599px) { .artist-note { gap: 1rem; } .note-avatar { width: 64px; height: 64px; } .note-avatar .voice-ring { padding: 3px; } .note-bubble { padding: 1rem 1.2rem; } }
.song-info .note-thread { margin-top: .75rem; max-width: 100%; }

/* Testo a fronte allineato strofa per strofa */
.text-parallel--rows { display: block; }
.text-parallel--rows .parallel-head, .text-parallel--rows .parallel-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.text-parallel--rows .parallel-row { margin-bottom: 1.5rem; }
.text-parallel--rows .parallel-row p { margin: 0; }
.text-parallel--rows .translation-text { font-size: 1rem; font-style: italic; font-weight: 300; line-height: 1.85; color: rgba(239,239,242,0.78); }
@media (max-width: 760px) {
  .text-parallel--rows .parallel-head { display: none; }
  .text-parallel--rows .parallel-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}

/* Ordinamento delle fonti */
.sort-by { display: inline-flex; align-items: center; gap: .6rem; }
.sort-by select { font: inherit; font-size: .85rem; color: var(--chalk, #EFEFF2); background: transparent; border: 1px solid rgba(239,239,242,.28); border-radius: 999px; padding: .4rem 2rem .4rem 1rem; cursor: pointer; }
.sort-by select option { color: #1a1420; background: #fff; }
.sort-by select:focus-visible { outline: 2px solid var(--ui, #9A93C4); outline-offset: 2px; }

/* ── Scheda fonte: testo leggibile ── */
.source-sec .text-parallel .poem p, .source-sec .text-parallel--rows .poem p { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.55rem); line-height: 1.65; font-weight: 500; color: #fff; }
.source-sec .text-parallel .translation-text, .source-sec .text-parallel--rows .translation-text { font-size: clamp(1.15rem, 1rem + .4vw, 1.3rem); line-height: 1.7; font-weight: 400; color: rgba(239,239,242,.88); }
.source-sec .text-parallel .col-label { font-size: .74rem; margin-bottom: 1.1rem; }
.source-sec .poem-meta { font-size: .8rem; color: rgba(239,239,242,.7); }
.source-hero + .sheet .prose, .sheet .prose.analysis { font-size: 1.12rem; line-height: 1.85; font-weight: 400; color: rgba(239,239,242,.92); }
.sheet-sub { margin-top: 4.5rem; }
.sheet-sub > .eyebrow-ui + .section-title { margin-top: .9rem; }

/* ── Commento: la voce che firma (avatar + nome + ruolo) ── */
.commentary-by { display: flex; align-items: center; gap: 1.1rem; margin: -.5rem 0 1.75rem; }
.commentary-by .note-avatar { width: 72px; height: 72px; }
.commentary-who { display: flex; flex-direction: column; gap: .2rem; }
.commentary-who .note-who { margin-bottom: 0; color: var(--ui); }
.commentary-role { font-family: var(--font-head); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(239,239,242,.65); }
@media (max-width: 599px) { .commentary-by .note-avatar { width: 56px; height: 56px; } }