/* the jukebox: every album, streamed right here */
.jukebox-area { background: #120c0a; color: #f4e6d4; }
.jukebox-area .section-heading h2 { color: #fff; }
.jukebox-area .section-heading p { color: #ff8a3a; }
.jb-albums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.jb-album { cursor: pointer; border: 0; padding: 0; background: none; color: inherit; text-align: left; font-family: Montserrat, sans-serif; }
.jb-album img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 4px; opacity: 0.6; transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s; }
.jb-album:hover img { opacity: 0.9; }
.jb-album.jb-on img { opacity: 1; transform: translateY(-3px); box-shadow: 0 6px 22px rgba(255, 120, 40, 0.35); }
.jb-album b { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: #fff; }
.jb-album span { font-size: 12px; opacity: 0.7; }
.jb-list { list-style: none; margin: 0 0 24px; padding: 0; columns: 2; column-gap: 34px; }
.jb-list li { break-inside: avoid; display: flex; gap: 12px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); cursor: pointer; font-size: 14px; }
.jb-list li:hover { color: #ffb066; }
.jb-list li.jb-playing { color: #ff8a3a; font-weight: 600; }
.jb-list li i { font-style: normal; opacity: 0.5; width: 22px; text-align: right; }
.jb-list li em { font-style: normal; margin-left: auto; opacity: 0.5; font-size: 12px; }
.jb-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 30px; background: rgba(255, 255, 255, 0.06); }
.jb-bar button { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid #ff8a3a; background: transparent; color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.jb-bar button.jb-play { background: linear-gradient(90deg, #d4501a, #ff8a3a); border: 0; width: 44px; height: 44px; font-size: 16px; }
.jb-now { flex: 1; min-width: 0; font-size: 13px; }
.jb-now b { display: block; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-seek { position: relative; height: 4px; margin-top: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); cursor: pointer; }
.jb-seek i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #ff8a3a; }
.jb-time { font-size: 12px; opacity: 0.7; flex: none; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .jb-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jb-list { columns: 1; }
  .jb-time { display: none; }
}