/* The Library — layered on top of the site's styles.css (shares fonts, colors, nav, hero). */

/* A page-long gradient that SHIFTS as you scroll (like the home page): oxblood under the hero,
   easing through plum to deep ink down the list. The vh-pinned stop at 100vh sets the EXACT color
   at the hero seam, so the hero seal stays correct regardless of how tall the list makes the page. */
body {
  background:
    /* a warm "say hello." floor ANCHORED to the bottom of the page (background-position: bottom): as you
       reach the contact section the cosmic cool shifts into a warm amber close, exactly like the home
       page's ending. Bottom-anchored + 118vh tall so it always lands on the footer no matter how long
       the song list makes the page. */
    linear-gradient(180deg,
      rgba(42,27,18,0)    0%,
      rgba(42,27,18,0.5)  52%,
      rgba(42,27,18,0.82) 84%,
      #1d100b             100%) bottom / 100% 118vh no-repeat,
    /* the scrolling cosmic gradient: oxblood → plum → deep ink */
    linear-gradient(180deg,
      #15040a 0,
      #2a0a12 20vh,
      #20102a 68vh,
      #1a0c22 100vh,   /* the hero seam — matches --hero-seam-rgb below */
      #0a0510 100%);
}
/* The page is one tall column; the black hole + stars are absolute backdrops behind it. */
.library-main { position: relative; }

/* The black hole: a fixed 100vh backdrop pinned to the top, matching the home hero's crop + position
   exactly (the field fills it edge to edge). Its seam color = the body's value at 100vh. */
.library-hero-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 100vh;
  z-index: 1; pointer-events: none; overflow: hidden;
}
.library-hero-bg .field--hero { --hero-seam-rgb: 26, 12, 34; }

/* The content column floats OVER the black hole. padding-top mirrors the home hero's centering math
   (creditTop = 50vh - 212px on desktop), so MUSIC BY lands in the SAME spot on both pages — it never
   jumps when you move between Home and Library. From there the intro + list flow down, above the fold. */
.library-col {
  position: relative; z-index: 2;
  max-width: 640px; margin: 0 auto; text-align: center;
  padding: calc(50vh - 212px) 1.2rem 6rem;
}
/* a soft dark veil behind the band where the first rows cross the bright nebula core, so titles stay
   readable without a hard box — fades in above the list and back out below the hero. */
.library-col::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; transform: translateX(-50%); top: 37vh; width: 100vw; height: 69vh;
  background: linear-gradient(180deg,
    transparent 0%, rgba(8,4,14,0.40) 16%, rgba(8,4,14,0.52) 46%, rgba(8,4,14,0.5) 70%, transparent 100%);
}
/* "the library." — the home page's down-page section-header style, sitting under MUSIC BY the way the
   hero title sits under MUSIC BY on the home page. Tightened so the list still floats high over the hole. */
.library-col .hero__credit { margin-bottom: 1.1rem; }
.library-title { margin: 0 0 0.5rem; }
.library-intro {
  margin: 1.3rem auto 0; max-width: 34rem;
  font-family: "Newsreader", Georgia, serif; font-style: italic;
  font-size: 1.1rem; color: var(--ink); line-height: 1.5;
  /* this line floats over the brightest part of the nebula — a tight dark halo (an outline plus a soft
     glow) keeps the cream text legible on any background underneath. */
  text-shadow:
    0 0 1px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.95),
    0 0 5px rgba(0,0,0,0.85), 0 0 18px rgba(0,0,0,0.6);
}
/* teaser to The Song Wars, sat right under the hero credit (Lucas wanted it up top) */
.library-teaser { margin-top: 1.8rem; }
.library-teaser__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--ink-line); border-radius: 999px; padding: 0.65em 1.4em;
  transition: border-color 0.2s, background 0.2s;
}
.library-teaser__btn:hover { border-color: rgba(244,234,216,0.4); background: rgba(244,234,216,0.05); }

/* far-away twinkling stars (reused from the home page) fill the whole page behind the content;
   the black hole backdrop sits on top of them up top, so they only show down the list. */
.library-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0.7; }
.library-stars .starfield { background-size: 100% 72vh; background-repeat: repeat; }

/* the home page's "say hello." + footer, sat at the very bottom of the page over the deep-ink gradient
   (the .connect-block / .say-hello / .connect__* / .footer styling all comes from the shared styles.css). */
.library-connect {
  position: relative; z-index: 2;
  max-width: 68rem; margin: 0 auto; padding: 0 1.4rem 4rem;
  text-align: center;
}

/* The track player itself is the shared site player (styles.css). The library only layers on its own
   spacing + extra title legibility, since here the first rows float over the bright nebula core. */
.library-col .listen-list { margin: 1.6rem 0 0; text-align: left; }
.library-col .listen-row__title { text-shadow: 0 1px 7px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.5); }