/* responsive */
@media (min-width:840px){ .genregrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} }
@media (min-width:840px){
    #np .npart img{width:min(38vw,360px)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}
/* ================= adaptive: navigation RAIL on wide viewports =================
   M3's own answer for a medium/expanded window is a NavigationRail in place of the bottom bar.
   The component specs above are unchanged — only the chrome moves. */
@media (min-width:840px){
                /* the drawer's extra destinations are always reachable, but the rail already shows the primary three */
  .story{width:120px}
  .story .ring{width:96px;height:96px}
  /* Rows use the FULL width and earn it with a duration column, the way desktop players do — the
     phone's "Artist \u2022 3:44" subtitle splits so the time right-aligns beside the overflow button
     instead of leaving dead space. Only genuine controls stay bounded (a 1400px-wide Play button is
     not a better Play button). */
  li.row .dsep{display:none}
  li.row .dur{display:block}
}
@media (min-width:1100px){
  .card{width:calc(var(--grid-thumb) + 40px)}
  .card .art{width:calc(var(--grid-thumb) + 16px);height:calc(var(--grid-thumb) + 16px)}
  .card.wide{width:calc((var(--grid-thumb) + 16px) * 16 / 9 + 24px)}
  .card.wide .art{width:calc((var(--grid-thumb) + 16px) * 16 / 9)}
  .page{flex-basis:50%}
  .hero img{width:192px;height:192px}
}
@media (min-width:1500px){ .page{flex-basis:33.333%} }