/* Home banner slider (slider.js). Slides share one grid cell and cross-fade, so the banner never jumps in height. */
.hs { padding-top: 0; }
.hs::after { display: none; }
.hs-track { display: grid; }
.hs-slide { grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(56px + env(safe-area-inset-top, 0px)); opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.hs-slide.on { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.hs-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,11,.15) 0%, rgba(10,10,11,.55) 60%, var(--bg) 100%); }
.hs-slide .hero-in { align-items: center; padding-bottom: 18px; }
.hs-slide .hero-art { transform: scale(.96); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.hs-slide.on .hero-art { transform: none; }
.hero-art.wide { aspect-ratio: 16 / 9; width: clamp(240px, 34vw, 430px); }
.hs-title { font-stretch: 118%; font-weight: 900; font-size: clamp(2.4rem, 6.4vw, 5.2rem); letter-spacing: -.035em; line-height: .9; margin: 10px 0 12px; text-wrap: balance; }
.hs .sub { max-width: 52ch; }
.hs-nav { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; }
.hs-nav .icon { color: rgba(255,255,255,.8); }
.hs-dots { display: flex; gap: 6px; align-items: center; }
.hs-dots button { width: 22px; height: 22px; display: grid; place-items: center; }
.hs-dots i { display: block; width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.3); overflow: hidden; position: relative; transition: width .3s ease; }
.hs-dots [aria-current] i { width: 34px; background: rgba(255,255,255,.25); }
.hs-dots [aria-current] i::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(1); }
.hs.running .hs-dots [aria-current] i::after { animation: hsfill 6.5s linear both; }
@keyframes hsfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 860px) {
  .hs-slide .hero-in { align-items: start; }
  .hero-art.wide { width: 100%; max-width: 420px; }
  .hs-nav { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hs-slide, .hs-slide .hero-art { transition: none; } }

/* ---------- phones: calmer, app-like Home ---------- */
/* The banner already shows the latest single, so the separate "Latest release" card is dropped. */
.hs + .pad > .block:first-child { display: none; }
@media (max-width: 860px) {
  /* banner: artwork fills the card edge to edge, text sits on it, swipe to change */
  .hs-slide { display: flex; flex-direction: column; justify-content: flex-end; min-height: min(124vw, 72vh); padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
  .hs-slide .hero-bg { inset: 0; filter: none; transform: none; background-size: cover; background-position: center 30%; }
  .hs-slide::after { background: linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,0) 22%, rgba(10,10,11,.25) 48%, rgba(10,10,11,.92) 82%, var(--bg) 100%); }
  .hs-slide .hero-art { display: none; }
  .hs-slide .hero-in { display: block; padding-top: 0; padding-bottom: 46px; }
  .hs .sub { display: none; }
  .hs .verified { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
  .hs .verified svg { width: 14px; height: 14px; }
  .hs h1 { font-size: clamp(3.2rem, 17vw, 4.6rem); margin: 6px 0 4px; }
  .hs-title { font-size: clamp(2.1rem, 10vw, 2.8rem); margin: 6px 0 4px; }
  .hs .hero-actions { margin-top: 16px; gap: 8px; }
  .hs .hero-actions .pill { height: 40px; padding: 0 16px; }
  .hs .hero-actions .icon.play { width: 48px; height: 48px; }
  .hs .hero-actions .icon.play svg { width: 22px; height: 22px; }
  .hs-nav { position: absolute; left: 0; right: 0; bottom: 8px; padding-bottom: 0; }
  .hs { position: relative; }
  .hs-nav .icon { display: none; }
  .hs-dots button { width: 16px; }
  .hs-dots [aria-current] i { width: 22px; }

  /* lighter chrome */
  .top-logo { font-size: 1.1rem; }
  .player { background: #17171a; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
  .p-line i { background: var(--tint); }

  /* tighter rhythm */
  .block { margin-top: 30px; }
  .row-head { margin-bottom: 10px; }
  .row-head h2 { font-size: 1.12rem; }
  .page-title { font-size: 1.9rem; }
  .trk { gap: 12px; }
  .trk img { width: 44px; height: 44px; }
  .trk b { font-size: .95rem; }
  .trk .more { width: 32px; height: 32px; }
  .shelf { gap: 12px; }
  .card b { font-size: .92rem; }
  .show-empty { padding: 18px; }
  .show-empty h3 { font-size: 1.08rem; }
  .post { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .post img { width: 76px; border-radius: 8px; }
  .post h3 { font-size: .98rem; }
  .post p { display: none; }
  .hs ~ .pad .posts .post:nth-child(3) { display: none; }
  .about { padding: 18px; }
  .hs ~ .pad .about p + p { display: none; }
}