/* Exact cover/page registration on desktop.
   JS measures the real page-stage position for the current viewport and writes
   --cover-match-y, so both book covers share the same vertical axis. */
.cover-screen {
  --cover-match-y: 0px;
}

.cover-wrap,
.cover-copy {
  translate: 0 var(--cover-match-y);
}

/* Inline lyrics — same document, immediately below the current song page. */
.lyrics-inline[hidden] { display: none !important; }

.lyrics-inline {
  position: relative;
  z-index: 3;
  min-height: 100dvh;
  width: 100%;
  overflow: clip;
  scroll-margin-top: 0;
  border-top: 1px solid rgba(205, 153, 75, .12);
  background:
    radial-gradient(circle at 50% 18%, rgba(181, 112, 35, .13), transparent 35%),
    linear-gradient(180deg, rgba(8, 9, 7, .97), rgba(5, 6, 5, .995));
  padding:
    max(56px, env(safe-area-inset-top))
    20px
    max(30vh, 180px);
}

.lyrics-inline::before,
.lyrics-inline::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 20vh;
  width: min(74vmin, 720px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid rgba(191, 132, 57, .07);
  border-radius: 50%;
  pointer-events: none;
}

.lyrics-inline::after {
  width: min(52vmin, 520px);
  border-style: dashed;
  opacity: .65;
}

.lyrics-shell {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  margin: 0 auto;
}

.lyrics-top {
  min-height: 31vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: clamp(32px, 6vh, 58px);
}

.lyrics-back {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(216, 169, 99, .58);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .17em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 26px;
}

.lyrics-kicker,
.lyrics-track,
.lyrics-follow {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .17em;
}

.lyrics-kicker {
  color: rgba(206, 148, 68, .55);
  font-size: 9px;
}

.lyrics-track {
  margin-top: 8px;
  color: rgba(234, 214, 177, .94);
  font-family: Georgia, 'Times New Roman', serif;
  text-transform: none;
  letter-spacing: .015em;
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 400;
}

.lyrics-follow {
  margin-top: 12px;
  color: rgba(211, 170, 105, .42);
  font-size: 8px;
}

.lyrics-body {
  padding: 8vh 0 26vh;
}

.lyric-line {
  display: block;
  max-width: 700px;
  margin: 0 0 .42em;
  color: rgba(231, 214, 182, .22);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(25px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.015em;
  transform-origin: left center;
  transition:
    color 420ms ease,
    opacity 420ms ease,
    transform 420ms cubic-bezier(.2,.72,.18,1);
}

.lyric-line.is-past {
  color: rgba(222, 199, 158, .36);
}

.lyric-line.is-active {
  color: #ead3a3;
  opacity: 1;
  transform: translateX(8px) scale(1.025);
  text-shadow: 0 0 28px rgba(190, 118, 38, .13);
}

.lyric-spacer {
  display: block;
  height: .9em;
}

.lyrics-trigger {
  margin-top: 10px;
  padding: 7px 12px 6px;
  border: 1px solid rgba(205, 153, 75, .28);
  border-radius: 999px;
  background: rgba(12, 12, 9, .55);
  color: rgba(232, 211, 172, .78);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.lyrics-trigger:hover,
.lyrics-trigger:focus-visible {
  color: #efd49d;
  border-color: rgba(210, 155, 73, .58);
  background: rgba(28, 22, 13, .72);
}

.lyrics-trigger:active { transform: translateY(1px); }

html.lyrics-inline-open {
  scroll-behavior: smooth;
  background: var(--ink);
}

body.lyrics-inline-open {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}

@media (max-width: 599px) {
  .lyrics-inline {
    padding-left: 22px;
    padding-right: 22px;
  }

  .lyrics-top {
    min-height: 27vh;
  }

  .lyrics-body {
    padding-top: 5vh;
  }

  .lyric-line {
    font-size: clamp(25px, 7.3vw, 35px);
    line-height: 1.32;
  }

  .lyric-line.is-active {
    transform: translateX(4px) scale(1.015);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.lyrics-inline-open { scroll-behavior: auto; }
  .lyric-line { transition: none; }
}


/* Clean originals; overlay removed */


/* Phase 2: accessibility without changing the visual design for touch users. */
:where(button, a, input, [role="button"]):focus-visible {
  outline: 3px solid #e6b767;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}