.song-page .page { height: 100svh; min-height: 0; }
.song-page .header { flex: none; }
.song-main { flex: 1; min-height: 0; display: flex; padding: clamp(42px, 6svh, 64px) 0 16px; }
.song-single .song-main { padding-top: clamp(64px, 9svh, 96px); }
.song-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 32px; container-type: size; }
.song-heading { margin: 0; width: 100%; flex: none; }
.song-heading h1 { max-width: 780px; margin-inline: auto; font-size: clamp(24px, 3vw, 38px); font-weight: 300; line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; }
.song-title-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; }
.song-actions { margin: 10px auto 0; }
.song-back { display: flex; align-items: center; justify-content: flex-start; width: 32px; height: 36px; color: var(--muted); font-size: 22px; font-weight: 200; line-height: 1; }
.song-back:hover { color: var(--text); }
.song-streams { justify-content: center; margin: 0; gap: 10px; }
.song-streams a { width: 36px; min-height: 36px; margin: 0; }
.song-composition { --columns: 4; --rows: 2; --gap: 20px; --unit: min(280px, calc((100cqw - (var(--columns) - 1) * var(--gap)) / var(--columns)), calc((100cqh - 126px - (var(--rows) - 1) * var(--gap)) / var(--rows))); }
.song-composition { display: grid; grid-template-columns: repeat(var(--columns), var(--unit)); grid-template-rows: repeat(var(--rows), var(--unit)); gap: var(--gap); flex: none; }
.song-hero { width: 100%; height: 100%; min-width: 0; }
.song-single .song-composition { --columns: 1; --rows: 1; --unit: min(560px, 94cqw, calc(100cqh - 160px)); }
.song-gallery { display: contents; }
.song-variation { position: relative; margin: 0; min-width: 0; min-height: 0; }
.song-variation.artwork, .sequence-frame.artwork { aspect-ratio: auto; min-width: 0; min-height: 0; }
.song-variation:hover, .sequence-frame:hover { z-index: 2; }
.song-variation .cover-iridescence, .song-variation .sheen { mask: var(--art-mask, none) center / cover no-repeat; -webkit-mask: var(--art-mask, none) center / cover no-repeat; }
.song-motion .motion-toggle { z-index: 3; }
.variation-image { position: relative; width: 100%; height: 100%; }
.variation-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.song-composition .registration { font-size: 10px; }
.song-composition .registration-start { top: -11px; left: -11px; }
.song-composition .registration-end { bottom: -11px; right: -11px; }
.song-motion { grid-row: span 2; }
.motion-toggle { position: absolute; bottom: 7px; right: 7px; border: 0; padding: 6px 8px; background: #080909bb; color: #fff; font: inherit; font-size: 10px; cursor: pointer; white-space: nowrap; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { background: #080909; }

/* Main covers occupy a 2 × 2 module; studies stay aligned to the same grid. */
[data-song="the-rush"] .song-composition { --rows: 3; }
[data-song="the-rush"] .song-motion { grid-column: 1; grid-row: 1 / 3; }
[data-song="the-rush"] .song-hero { grid-column: 2 / 4; grid-row: 1 / 3; }
[data-song="the-rush"] .variation-1 { grid-column: 4; grid-row: 1; }
[data-song="the-rush"] .variation-2 { grid-column: 4; grid-row: 2; }
[data-song="the-rush"] .variation-3 { grid-column: 2; grid-row: 3; }
[data-song="the-rush"] .variation-4 { grid-column: 3; grid-row: 3; }
[data-song="the-rush"] .variation-5 { grid-column: 4; grid-row: 3; }

[data-song="tomorrow"] .song-composition { --columns: 5; }
[data-song="tomorrow"] .song-hero { grid-column: 2 / 4; grid-row: 1 / 3; }
[data-song="tomorrow"] .song-motion { grid-column: 5; grid-row: 1 / 3; }
[data-song="tomorrow"] .variation-1 { grid-column: 1; grid-row: 2; }
[data-song="tomorrow"] .variation-2 { grid-column: 1; grid-row: 1; }
[data-song="tomorrow"] .variation-3 { grid-column: 4; grid-row: 1; }
[data-song="tomorrow"] .variation-4 { grid-column: 4; grid-row: 2; }

[data-song="ill-be-dreaming"] .song-hero { grid-column: 2 / 4; grid-row: 1 / 3; }
[data-song="ill-be-dreaming"] .variation-1 { grid-column: 1; grid-row: 1; }
[data-song="ill-be-dreaming"] .song-composition { --columns: 5; }
[data-song="ill-be-dreaming"] .song-motion { grid-column: 5; grid-row: 1; }
[data-song="ill-be-dreaming"] .variation-6 { grid-column: 5; grid-row: 2; }
[data-song="ill-be-dreaming"] .variation-4 { grid-column: 1; grid-row: 2; }
[data-song="ill-be-dreaming"] .variation-5 { grid-column: 4; grid-row: 2; }
[data-song="ill-be-dreaming"] .variation-3 { grid-column: 4; grid-row: 1; }

[data-song="running-back-2-u"] .song-composition { --columns: 5; --rows: 3; }
[data-song="running-back-2-u"] .song-hero { grid-column: 1 / 3; grid-row: 1 / 3; }
[data-song="running-back-2-u"] .song-motion { grid-column: 5; grid-row: 1 / 3; }
[data-song="running-back-2-u"] .variation-1 { grid-column: 3 / 5; grid-row: 2; }
[data-song="running-back-2-u"] .variation-2 { grid-column: 3; grid-row: 1; }
[data-song="running-back-2-u"] .variation-3 { grid-column: 4; grid-row: 1; }
.song-sequence { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.song-sequence img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }

[data-song="onetwothree"] .song-composition { --columns: 4; --rows: 4; }
[data-song="onetwothree"] .song-hero { grid-column: 2 / 4; grid-row: 1 / 3; }
[data-song="onetwothree"] .song-motion { grid-column: 1; grid-row: 1 / 3; }
[data-song="onetwothree"] .variation-1 { grid-column: 4; grid-row: 1; }
[data-song="onetwothree"] .variation-2 { grid-column: 4; grid-row: 2; }
[data-song="onetwothree"] .song-sequence { grid-row: 3 / 5; grid-template-rows: repeat(2, minmax(0, 1fr)); }

/* Transparent artwork has no rectangular frame or box shadow in either theme. */
.song-page .artwork-transparent .sleeve,
:root[data-theme="dark"] .song-page .artwork-transparent .sleeve { box-shadow: none; }
.artwork-transparent .sleeve::after { display: none; }

@media (max-width: 760px) {
  .song-heading h1 { font-size: clamp(21px, 5vw, 30px); }
  .song-multiple .page { height: auto; min-height: 100svh; }
  .song-multiple .song-stage { container-type: inline-size; }
  .song-multiple .song-composition { --columns: 2; --unit: min(240px, calc((100cqw - var(--gap)) / 2)); }
  .song-multiple .song-hero { grid-column: 1 / 3; grid-row: 1 / 3; }
  [data-song="the-rush"] .song-composition { --rows: 6; }
  [data-song="the-rush"] .song-motion { grid-column: 2; grid-row: 3 / 5; }
  [data-song="the-rush"] .variation-1 { grid-column: 1; grid-row: 3; }
  [data-song="the-rush"] .variation-2 { grid-column: 1; grid-row: 4; }
  [data-song="the-rush"] .variation-3 { grid-column: 1; grid-row: 5; }
  [data-song="the-rush"] .variation-4 { grid-column: 2; grid-row: 5; }
  [data-song="the-rush"] .variation-5 { grid-column: 1; grid-row: 6; }
  [data-song="tomorrow"] .song-composition { --rows: 5; }
  [data-song="tomorrow"] .song-motion { grid-column: 2; grid-row: 3 / 5; }
  [data-song="tomorrow"] .variation-1 { grid-column: 1; grid-row: 4; }
  [data-song="tomorrow"] .variation-2 { grid-column: 1; grid-row: 3; }
  [data-song="tomorrow"] .variation-3 { grid-column: 1; grid-row: 5; }
  [data-song="tomorrow"] .variation-4 { grid-column: 2; grid-row: 5; }
  [data-song="ill-be-dreaming"] .song-composition { --rows: 5; }
  [data-song="ill-be-dreaming"] .variation-1 { grid-column: 1; grid-row: 3; }
  [data-song="ill-be-dreaming"] .song-motion { grid-column: 2; grid-row: 3; }
  [data-song="ill-be-dreaming"] .variation-6 { grid-column: 2; grid-row: 4; }
  [data-song="ill-be-dreaming"] .variation-4 { grid-column: 2; grid-row: 5; }
  [data-song="ill-be-dreaming"] .variation-5 { grid-column: 1; grid-row: 5; }
  [data-song="ill-be-dreaming"] .variation-3 { grid-column: 1; grid-row: 4; }
  [data-song="running-back-2-u"] .song-composition { --rows: 7; }
  [data-song="running-back-2-u"] .song-motion { grid-column: 2; grid-row: 3 / 5; }
  [data-song="running-back-2-u"] .variation-1 { grid-column: 1 / 3; grid-row: 5; }
  [data-song="running-back-2-u"] .variation-2 { grid-column: 1; grid-row: 3; }
  [data-song="running-back-2-u"] .variation-3 { grid-column: 1; grid-row: 4; }
  .song-sequence { grid-row: 6 / 8; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
  [data-song="onetwothree"] .song-composition { --rows: 8; }
  [data-song="onetwothree"] .song-motion { grid-column: 2; grid-row: 3 / 5; }
  [data-song="onetwothree"] .variation-1 { grid-column: 1; grid-row: 3; }
  [data-song="onetwothree"] .variation-2 { grid-column: 1; grid-row: 4; }
  [data-song="onetwothree"] .song-sequence { grid-row: 5 / 9; grid-template-rows: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-height: 650px) {
  .song-page .header { padding-top: 20px; }
  .song-main { padding: 38px 0 10px; }
  .song-stage { gap: 30px; }
  .song-heading h1 { font-size: 26px; }
  .song-actions { margin-top: 4px; }
  .song-composition { --gap: 20px; }
}