@font-face { font-family: "Thalin"; src: url("../assets/fonts/Thal-Regular.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; }
.music-page .site-header { position: relative; }
.music-main { overflow: hidden; }
.music-album { align-items: center; display: grid; gap: clamp(3rem, 10vw, 11rem); grid-template-columns: minmax(15rem, 29rem) minmax(15rem, 1fr); min-height: min(83vh, 52rem); padding: clamp(4rem, 9vw, 8rem) var(--page-padding); }
.music-album > img { box-shadow: 0 1rem 4rem rgba(0,0,0,.22); width: 100%; }
.album-heading .eyebrow { margin-bottom: 1rem; }
.album-heading h1 { font-family: var(--display); font-size: clamp(3.5rem, 9vw, 9rem); font-weight: 500; letter-spacing: .08em; line-height: .8; margin: 0; text-transform: uppercase; }
.physical-object { align-items: center; display: grid; gap: clamp(3rem, 7vw, 9rem); grid-template-columns: minmax(0, 1.65fr) minmax(17rem, .9fr); padding: clamp(8rem, 15vw, 15rem) var(--page-padding); }
.physical-object figure { margin: 0; }
.physical-object img { mix-blend-mode: screen; width: 100%; }
.physical-text { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 3.2rem); line-height: 1.12; }
.physical-text p { margin: 0; }
.physical-text p + p { color: var(--muted); font-size: .65em; margin-top: 3rem; }
.tracklist { margin: clamp(8rem, 15vw, 15rem) auto 0; max-width: 82rem; padding: 0 var(--page-padding); }
.track { border-bottom: 1px solid var(--line); }
.track-trigger { align-items: center; background: none; border: 0; color: var(--ivory); cursor: pointer; display: grid; font: inherit; gap: 1.5rem; grid-template-columns: 3rem minmax(9rem, .8fr) minmax(13rem, 2.3fr); padding: 1.5rem 0; text-align: left; width: 100%; }
.track-trigger:hover .track-title, .track-trigger:focus-visible .track-title { color: #fffaf0; }
.track-trigger:hover, .track-trigger:focus-visible { border-color: var(--muted); }
.track-number { color: var(--muted); font-size: .65rem; letter-spacing: .14em; }
.thalin { font-family: "Thalin", sans-serif; line-height: 1.9; overflow: visible; text-transform: none; }
.track-trigger .thalin { color: var(--muted); font-size: 1.5rem; }
.track-title { font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.8rem); letter-spacing: .09em; line-height: 1; text-transform: uppercase; transition: color .2s ease; }
.track:last-child .track-title { white-space: nowrap; }
.track-panel { padding: .5rem 0 3.5rem; }
.lyrics { font-family: var(--display); font-size: clamp(1.15rem, 1.35vw, 1.38rem); line-height: 1.6; margin-left: clamp(12rem, 31vw, 26rem); max-width: 37rem; white-space: pre-line; }
.track-panel .thalin { font-size: 1.35rem; line-height: 1.9; }
.track-actions { display: flex; gap: 1.25rem; margin: 2rem 0 1.2rem; padding-left: clamp(12rem, 31vw, 26rem); }
.text-control { background: none; border: 0; color: var(--muted); cursor: pointer; font-family: var(--display); font-size: .75rem; letter-spacing: .14em; padding: 0; text-transform: uppercase; }
.text-control:hover, .text-control:focus-visible, .text-control.is-active { color: var(--ivory); }
.lyric-translation { color: var(--muted); font-family: var(--display); font-size: 1.1rem; line-height: 1.5; margin: 0 0 0 clamp(12rem, 31vw, 26rem); max-width: 37rem; }
.sin-gloria-translation { color: var(--muted); display: block; font-family: var(--display); font-size: .88em; line-height: 1.5; margin: .45rem 0 1.1rem; }
.sin-gloria-translation[hidden] { display: none; }
.music-closing { padding: clamp(13rem, 23vw, 23rem) var(--page-padding) clamp(9rem, 17vw, 17rem); text-align: center; }
.music-closing .thalin { color: var(--muted); font-size: 1.3rem; }
.colophon { border-top: 1px solid var(--line); margin: 0 auto; max-width: 48rem; padding: clamp(4rem, 8vw, 8rem) 0 clamp(8rem, 12vw, 12rem); text-align: center; }
.colophon h2, .colophon p { font-family: var(--display); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.colophon h2 { font-size: 1.05rem; margin: 0 0 2rem; }
.colophon p { color: var(--muted); font-size: .78rem; line-height: 1.8; margin: 0 0 1.8rem; }
.colophon p:last-child { color: var(--ivory); }
@media (max-width: 760px) {
  .music-page .site-header { position: absolute; }
  .music-album { display: block; min-height: 0; padding: 7rem var(--page-padding) 5rem; }
  .music-album > img { margin: 0 auto; max-width: 27rem; }
  .album-heading { margin-top: 2.25rem; }
  .album-heading h1 { font-size: clamp(3rem, 13vw, 4.35rem); letter-spacing: .065em; white-space: nowrap; }
  .physical-object { display: block; padding-bottom: 7rem; padding-top: 7rem; }
  .physical-object figure { margin: 0 calc(var(--page-padding) * -.25) 4rem; }
  .physical-text { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .tracklist { margin-top: 3.5rem; }
  .track-trigger { align-items: start; display: grid; gap: .45rem; grid-template-columns: 1fr; padding: 1.35rem 0; }
  .track-number { grid-row: 1; }
  .track-trigger .thalin { font-size: 1.2rem; grid-row: 2; }
  .track-title { font-size: clamp(1.9rem, 9vw, 2.7rem); grid-row: 3; }
  .track-panel { padding-bottom: 2.7rem; }
  .lyrics, .lyric-translation { font-size: 1.2rem; margin-left: 0; max-width: none; }
  .track-actions { padding-left: 0; }
  .music-closing { padding-bottom: 9rem; padding-top: 10rem; }
  .colophon { margin-left: var(--page-padding); margin-right: var(--page-padding); }
}