/* ============================================================
   song.css — song study pages
   Extends main.css. Load after it.
   ============================================================ */

.song-alt{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--dim);margin-top:var(--s-1)}
.song-head{padding:var(--s-12) 0 var(--s-8)}
@media(min-width:900px){.song-head{padding:var(--s-16) 0 var(--s-8)}}
.song-head h1{font-family:var(--serif);font-weight:300;font-size:var(--t-display);line-height:1.04;letter-spacing:-.015em;margin:var(--s-3) 0 var(--s-3)}
.song-sub{font-family:var(--serif);font-weight:300;font-size:var(--t-h3);line-height:1.35;color:var(--dim);max-width:24em;margin-bottom:var(--s-8)}

/* Credits strip */
.song-credits{display:flex;flex-wrap:wrap;gap:var(--s-6);border-top:1px solid var(--platinum);border-bottom:1px solid var(--platinum);padding:var(--s-3) 0;max-width:900px}
.song-credits div{min-width:9em}
.song-credits dt{font-size:var(--t-caption);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
.song-credits dd{font-size:0.94rem;line-height:1.5}

/* Lyric excerpt — the one place the site sets verse */
/* A withheld excerpt is a stated decision, not an empty box: no blockquote
   rule, no quotation styling, just the note set quietly. */
.lyric--pending{border-left:1px solid var(--platinum);padding-left:var(--s-4);
  background:transparent}
.lyric--pending .licence{margin:0;max-width:42em}
.lyric{max-width:var(--measure);margin:var(--s-12) auto}
.lyric blockquote{
  font-family:var(--serif);font-weight:300;
  font-size:var(--t-h3);line-height:1.7;letter-spacing:-.005em;
  font-style:italic;color:var(--eerie);
  border-left:1px solid var(--platinum);padding-left:var(--s-4);
}
.lyric .attrib{margin-top:var(--s-3);padding-left:calc(var(--s-4) + 1px)}
.lyric .licence{margin-top:var(--s-2);padding-left:calc(var(--s-4) + 1px);font-size:var(--t-caption);color:var(--dim);line-height:1.6;max-width:26em}

/* Musicology notes */
.notes{max-width:var(--measure);margin:var(--s-12) auto;list-style:none}
.notes li{padding:var(--s-3) 0;border-top:1px solid var(--platinum)}
.notes li:last-child{border-bottom:1px solid var(--platinum)}
.notes h3{font-family:var(--sans);font-weight:500;font-size:1rem;margin-bottom:var(--s-1)}
.notes p{color:var(--dim);font-size:0.96rem;line-height:1.65}

.song-body{padding:0 0 var(--s-16)}
.song-body .prose{margin-left:auto;margin-right:auto}
.song-body .sources{margin-left:auto;margin-right:auto}

/* Related strip */
.related{max-width:var(--measure);margin:var(--s-12) auto 0}
.related p.label{margin-bottom:var(--s-2)}
.related a{display:block;text-decoration:none;color:inherit;padding:var(--s-2) 0;border-top:1px solid var(--platinum);font-family:var(--serif);font-size:var(--t-lead);transition:padding-left var(--dur-base) var(--ease)}
.related a:hover{padding-left:6px}
.related a span.rm{display:block;font-family:var(--sans);font-size:var(--t-caption);color:var(--dim);margin-top:2px}

/* ---------- SONG STUDY RAIL ----------
   The Chronicle's chapter rail, adapted to move between pages rather
   than sections. Placed on the RIGHT: on the left it collided with the
   article header, which runs full measure at the top of the page.
   Hidden below 1300px, where the footer pagenav already does this job. */
.song-rail{display:none}
@media(min-width:1300px){
  .song-rail{
    display:block;position:fixed;right:var(--s-6);top:50%;transform:translateY(-50%);
    z-index:40;max-height:74vh;overflow-y:auto;width:12rem;
    padding-left:var(--s-3);
    border-left:1px solid var(--platinum);
  }
  .song-rail::-webkit-scrollbar{width:2px}
  .song-rail::-webkit-scrollbar-thumb{background:var(--platinum)}
  .sr-head{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;
    text-transform:uppercase;color:var(--dim);margin-bottom:var(--s-3)}
  .sr-list{display:flex;flex-direction:column}
  .sr-item{
    display:grid;grid-template-columns:2.5em 1fr;gap:var(--s-1);align-items:baseline;
    padding:.4em 0;text-decoration:none;color:var(--dim);
    transition:color var(--dur-fast) var(--ease);
  }
  .sr-item:hover{color:var(--eerie)}
  .sr-item.is-current{color:var(--eerie)}
  .sr-y{font-size:10px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--dim)}
  .sr-item.is-current .sr-y{color:var(--eerie)}
  .sr-t{font-family:var(--serif);font-size:.85rem;line-height:1.25}
  .sr-item.is-current .sr-t{font-style:italic}
  .sr-item:focus-visible{outline:2px solid var(--eerie);outline-offset:2px}
}
/* Wide screens: sit just clear of the centred measure rather than the viewport edge. */
@media(min-width:1600px){.song-rail{right:calc(50% - 40rem)}}