/* F8 Sounds — module page (album) and home page. */
main[data-page] > * { max-width: none; }
.page-title { margin-top: calc(var(--top-h) + 16px); }
.album { --tint-a: color-mix(in srgb, var(--band) var(--tint-1), var(--tint-base)); --tint-b: color-mix(in srgb, var(--band) var(--tint-2), var(--tint-base));
  display: flex; align-items: flex-end; gap: 24px; margin: 0 -40px; padding: calc(var(--top-h) + 24px) 40px 24px; background: linear-gradient(180deg, var(--tint-a) 0%, var(--tint-b) 70%, var(--bg) 100%); }
.album .cover { width: clamp(140px, 22vw, 220px); height: auto; border-radius: 8px; box-shadow: var(--shadow); }
.album h1 { margin: 6px 0 10px; font: 800 clamp(44px, 6vw, 76px)/.95 var(--display); letter-spacing: -.025em; }
.album .by { margin: 0; font-size: 14px; }
.album .desc { max-width: 56ch; margin: 8px 0 0; color: var(--text); font-size: 15px; }
.album-acts { display: flex; align-items: center; gap: 14px; margin: 18px 0 8px; }
.play-xl { display: grid; flex: none; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 35%, transparent); color: var(--on-accent) !important; transition: transform var(--dur-base) var(--ease-spring); }
.play-xl:active { transform: scale(.94); }
.tracklist { margin: 10px 0 0; padding: 0; list-style: none; }
.tracklist li { max-width: none; }
.tr, .tr-h { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 70px; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; }
.tr-h { margin-bottom: 6px; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--muted); font: 700 11px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.tr { color: var(--muted) !important; font-size: 14px; text-decoration: none; }
.tr:hover { background: var(--panel); }
.tr-t { color: var(--text); font-size: 15px; font-weight: 600; }
.tr.next { background: var(--raise); box-shadow: var(--raise-ring); }
.tr.next .tr-t { color: var(--accent-text); }
.tr.d .tr-n .ic { color: var(--accent-text); }
.tr-d { text-align: right; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 12px 0; }
.tile { display: block; padding: 10px; border-radius: var(--radius); background: var(--panel); color: var(--text) !important; font-size: 14px; text-decoration: none; transition: transform var(--dur-base) var(--ease-spring); }
.tile:hover { background: var(--raise); box-shadow: var(--raise-ring); }
.tile:active { transform: scale(.97); }
.tile .cover { width: 100%; height: auto; margin-bottom: 10px; box-shadow: var(--shadow); }
.tile b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile small { color: var(--muted); font-size: 12.5px; }
.pbar { display: block; height: 3px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: var(--line); }
.pbar i { display: block; height: 100%; background: var(--band); }
@media (max-width: 860px) {
  .album { flex-direction: column; align-items: flex-start; margin: 0 -16px; padding: calc(var(--top-h) + 8px) 16px 18px; }
  .tr, .tr-h { grid-template-columns: 32px minmax(0, 1fr) 44px; }
  .tr-l, .tr-h span:nth-child(3) { display: none; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Home */
.greet { margin: calc(var(--top-h) + 12px) 0 16px; font: 800 clamp(28px, 3.4vw, 36px)/1.05 var(--display); letter-spacing: -.02em; }
.home-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.cont { --tint-a: color-mix(in srgb, var(--band) var(--tint-1), var(--tint-base)); position: relative; display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--tint-a), var(--panel) 72%); color: var(--text) !important; text-decoration: none; transition: transform var(--dur-base) var(--ease-spring); }
.cont:active { transform: scale(.98); }
.cont .cover { border-radius: 8px; box-shadow: var(--shadow); }
.cont .eb { color: var(--text); }
.cont h3 { margin: 4px 0; font: 800 28px/1.05 var(--display); letter-spacing: -.02em; }
.cont > div { min-width: 0; }
.cont .sub { margin: 0 0 8px; color: var(--text); font-size: 13.5px; }
.cont .play-xl { position: absolute; right: 18px; bottom: 18px; }
.bigspec { padding: 16px 16px 4px; border-radius: var(--radius-lg); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.bigspec .num { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.bigspec .num b { margin-right: 4px; color: var(--text); font: 800 32px var(--display); letter-spacing: -.02em; }
.bigspec.empty { max-width: 760px; padding: 20px 20px 22px; text-align: center; }
.bigspec.empty p { margin: 10px auto 16px; color: var(--muted); }
.home-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.sec { display: flex; align-items: baseline; justify-content: space-between; margin: 32px 0 4px; }
.sec h2 { margin: 0; }
.path { margin: 12px 0; padding: 0; list-style: none; }
.path li { max-width: none; }
.path a { display: grid; grid-template-columns: 30px 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; color: var(--text) !important; text-decoration: none; }
.path a:hover { background: var(--panel); }
.path .n { color: var(--muted); font: 500 13px var(--mono); text-align: right; }
.path b { display: block; font-size: 15.5px; }
.path small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.sk { border-radius: var(--radius); background: var(--panel); }
@media (max-width: 860px) {
  .home-row { grid-template-columns: 1fr; }
  .path a { grid-template-columns: 48px minmax(0, 1fr); }
  .path .n, .path .lvl { display: none; }
}
/* Phones: long single-word titles (Arrangement, Psychoacoustics) must not push the page
   sideways in the 800-weight display face. Stack and shrink like the lesson h1; it stays at 22px or more,
   and overflow-wrap is a last-resort wrap, never an ellipsis. */
@media (max-width: 480px) {
  .album h1 { font-size: clamp(30px, 9vw, 44px); overflow-wrap: anywhere; }
  .cont { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .cont .cover { width: 64px; height: 64px; }
  .cont h3 { font-size: clamp(24px, 7vw, 28px); line-height: 1.1; overflow-wrap: anywhere; }
  .cont .play-xl { top: 20px; right: 16px; bottom: auto; }
}
.card-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--on-accent); margin-bottom: 6px; }

.tracklist.rise-rows li { animation: f8-rise 380ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms + 200ms); }