/* V20 lyric directory and compositor-friendly raised sheet. */
/* V18: Listen and Lyrics are peer headings; Coming soon is the italic note. */
#music .music-listen-heading { margin: 1.15em 0 .25em; }
#music .music-coming-soon { margin: .05em 0 1.2em; }
#music .music-lyrics-heading { margin: 0 0 .5em; }
#music .lyric-directory { list-style: none; padding: 0 0 1.2rem; margin: 0; }
#music .lyric-directory li { margin: 0; padding: 0; }
/* Full song titles stay together on the Music list. Only opened sheets split
   parenthetical subtitles onto a separate line. */
#music .lyric-directory a.lyric-link { white-space: nowrap; }
/* In an unusually narrow desktop window (or very small phone), there is
   physically no room for an entire 27-character title at a readable size.
   Let it wrap naturally instead of clipping; never force an extra subtitle row. */
@media (max-width: 560px) {
  #music .lyric-directory a.lyric-link { white-space: normal; }
}
@media (max-width: 350px) {
  #music .lyric-directory a.lyric-link { white-space: normal; }
}
#music .lyric-directory a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 1.9em;
  padding: .16em 0;
  font-size: clamp(1.1rem,1.62cqw,1.85rem);
  line-height: 1.24;
  text-underline-offset: .16em;
}
/* A section hash stays available while its song sheet is raised. */
html { scrollbar-gutter: stable; }
html.lyrics-open { overflow: hidden; scroll-snap-type: none !important; }
html.lyrics-open body { overflow: hidden; }
.lyric-dialog {
  --ink: #100d0d;
  position: fixed;
  inset: 0;
  display: none;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--ink);
  width: min(82vw, 700px, 72svh);
  max-width: none;
  max-height: 93svh;
  aspect-ratio: 1383 / 1621;
  overflow: visible;
  transform: translate(1.35vw, -.7svh) rotate(-.55deg);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
/* Sheet and veil move independently and subtly; original page stays fixed. */
.lyric-dialog[open] { display: block; }
.lyric-dialog[open]:not(.is-closing) .lyric-sheet {
  animation: pth-sheet-enter 330ms cubic-bezier(.18,1,.32,1) both;
}
.lyric-dialog.is-closing { pointer-events: none; }
.lyric-dialog.is-closing .lyric-sheet {
  animation: pth-sheet-exit 250ms cubic-bezier(.4,0,.8,1) both;
}
/* Only translate/opacity are animated: scaling and rotating a filtered raster
   alongside live text forces re-rasterization and can look jittery in Chrome.
   The dialog retains its established resting tilt; the sheet simply glides. */
@keyframes pth-sheet-enter {
  from { opacity: 0; transform: translate3d(0, 15px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes pth-sheet-exit {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(0, 12px, 0); }
}
@keyframes pth-veil-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes pth-veil-exit { from { opacity: 1; } to { opacity: 0; } }
.lyric-dialog::backdrop {
  background: rgba(0,0,0,.38);
  -webkit-backdrop-filter: blur(1.6px);
  backdrop-filter: blur(1.6px);
}
.lyric-dialog[open]:not(.is-closing)::backdrop { animation: pth-veil-enter 330ms ease-out both; }
.lyric-dialog.is-closing::backdrop { animation: pth-veil-exit 250ms ease-in both; }
.lyric-sheet {
  position: relative;
  width: 100%; height: 100%;
  isolation: isolate;
  /* Promote the whole page once; avoid re-laying out its live lyric text. */
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.lyric-sheet-art {
  position: absolute;
  /* The paper and its feathered edge shadows are flattened into one static
     user-authored-art-derived bitmap. No live CSS drop-shadow is recalculated
     as the sheet glides. Transparent padding retains the original shape. */
  top: -6.79%; left: -7.95%;
  width: 115.90%; height: 113.58%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.lyric-sheet-inner {
  position: absolute;
  inset: 10% 11.6% 16% 12.4%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.lyric-sheet-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.1rem;
  flex: none;
  border-bottom: 1px solid rgba(20,17,17,.8);
  padding: 0 0 .43rem;
  margin: 0 0 .8rem;
}
.lyric-sheet-heading h2 {
  font-size: clamp(1.55rem,2.25vw,2.85rem);
  line-height: 1.05;
  font-weight: 700;
  margin: 0;
  min-width: 0;
}
/* Intentional line break. The subtitle is never split mid-parentheses. */
.lyric-sheet-heading h2 .lyric-title-main,
.lyric-sheet-heading h2 .lyric-title-subtitle {
  display: block;
  white-space: nowrap;
}
@media (max-width: 430px) {
  .lyric-sheet-heading h2 .lyric-title-subtitle { font-size: .86em; }
}
.lyric-close {
  font: 700 clamp(.95rem,1.4vw,1.32rem)/1.1 'Cormorant Garamond', Georgia, serif;
  color: #171210;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: .12em .03em .1em;
  margin: 0;
  background: transparent;
  cursor: pointer;
  flex: none;
  min-width: 2.65rem;
  min-height: 2rem;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: .24em;
}
.lyric-close span { font: 400 1.3em/.82 Georgia,serif; }
.lyric-close:hover { border-bottom-width: 2px; }
.lyric-close:focus-visible,
.lyric-transcript:focus-visible { outline: 2px solid #211b18; outline-offset: 2px; }
.lyric-transcript {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  scrollbar-width: thin;
  scrollbar-color: rgba(30,24,21,.62) transparent;
  padding: .1rem .35rem 1.5rem 0;
  font-size: clamp(1.22rem,1.42vw,1.67rem);
  line-height: 1.32;
  font-weight: 600;
  text-align: left;
  color: #0d0b0a;
}
.lyric-transcript::-webkit-scrollbar { width: 7px; }
.lyric-transcript::-webkit-scrollbar-thumb { background:rgba(30,24,21,.62); border-radius:6px; }
@media (min-width: 601px) and (max-width: 760px) and (hover: hover) and (pointer: fine) {
  #music .lyric-directory a { font-size: clamp(.775rem,1.7cqw,1.08rem); }
  .lyric-sheet-inner { inset: 10% 11.5% 16% 12.2%; }
}
@media (max-width: 600px) {
  #music .lyric-directory a { min-height: 44px; font-size:clamp(1.125rem,4.9vw,1.3rem); }
  .lyric-dialog { width: min(94vw, 510px); height: min(93svh, 850px); max-height: none; aspect-ratio: auto; transform: rotate(-.3deg); }
  .lyric-sheet-inner { inset: 9% 11% 13% 12%; }
  .lyric-sheet-heading { gap: .5rem; margin-bottom: .55rem; }
  .lyric-sheet-heading h2 { font-size: clamp(1.48rem,6.3vw,2.0rem); }
  .lyric-close { font-size: 1.04rem; min-height: 44px; min-width: 54px; align-items: center; }
  .lyric-transcript { font-size:clamp(1.16rem,5.15vw,1.43rem); line-height:1.25; }
}
@media (prefers-reduced-motion: reduce) {
  .lyric-dialog { transform: none; }
  .lyric-dialog[open] .lyric-sheet,
  .lyric-dialog[open]::backdrop { animation: none !important; }
  .lyric-dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}