/* All content below the listening room, and the footer after main, share one fluid page gutter. */
.below, .home-footer { --home-gutter: var(--gutter-mobile); }
.below {
  --home-section-gap: var(--space-16);
  display: grid;
  gap: var(--home-section-gap);
  padding: var(--home-section-gap) 0;
}
.below .manual-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: var(--home-gutter);
  gap: var(--space-page);
}
.below .ad-below { margin-block: 0; }
.home-playlists { min-width: 0; padding-inline: var(--home-gutter); display: grid; gap: var(--space-page); scroll-margin-top: var(--space-page); }
.home-playlists [hidden] { display: none !important; }
.home-playlists button { font: inherit; cursor: pointer; }
.home-playlists button:disabled { cursor: default; opacity: .4; }
.home-playlists :is(button, input, summary):focus-visible { outline: 2px solid var(--tungsten); outline-offset: 5px; }
.home-playlists-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-group) var(--space-page); }
.home-playlists-heading > div:not(.home-playlists-actions) { display: grid; gap: var(--space-text); }
.home-playlists-kicker { margin: 0; color: var(--tungsten); font: 500 11px/1.5 var(--ui); letter-spacing: .16em; }
.home-playlists-heading h2 { margin: 0; color: var(--paper); font: 700 clamp(26px, 2.6vw, 38px)/1.4 var(--display); letter-spacing: -.04em; }
.home-playlist-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--space-section); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: rgb(169 180 194 / .35) transparent; padding-block: var(--space-1) var(--space-group); }
.home-playlists-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-section); }
.home-playlists-all { display: inline-flex; align-items: center; gap: var(--space-text); min-height: 44px; color: var(--paper); font: 500 var(--t2)/1.5 var(--ui); text-decoration: none; white-space: nowrap; }
.home-playlists-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-playlists-arrows { display: flex; gap: var(--space-text); }
.home-playlists-arrows button { display: grid; place-items: center; width: 44px; height: 44px; padding: var(--space-text); border: 1px solid rgb(169 180 194 / .3); border-radius: 50%; color: var(--paper); background: transparent; }
.home-playlists-arrows button:not(:disabled):hover { background: rgb(237 224 194 / .08); }
.home-playlists-arrows svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.home-playlist-grid .home-playlist-card:focus-visible { outline-offset: -2px; }
@media (max-width: 639px) { .home-playlists-actions { width: 100%; } }
.home-playlist-card { scroll-snap-align: start; display: grid; align-content: start; min-width: 0; padding: 0; gap: var(--space-group); border: 0; border-radius: 12px; background: none; color: var(--paper); text-align: left; }
.home-playlist-art { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; border-radius: 12px; background: #16263a; box-shadow: 0 8px 32px rgb(0 0 0 / .14); }
.home-playlist-art-backdrop { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(22px) brightness(.62); opacity: .85; z-index: -1; }
.home-playlist-cover { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-playlist-listen { position: absolute; display: grid; place-items: center; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; padding-left: 3px; border: 1px solid rgb(255 255 255 / .45); border-radius: 50%; background: rgb(11 21 36 / .85); box-shadow: 0 4px 16px rgb(0 0 0 / .25); color: #fff; font-size: 19px; opacity: 0; transition: opacity .18s ease; }
.home-playlist-card:is(:hover, :focus-visible, [aria-pressed=true]) .home-playlist-listen { opacity: 1; }
.home-playlist-card[aria-pressed=true] .home-playlist-art { outline: 2px solid var(--tungsten); outline-offset: -2px; }
.home-playlist-card[aria-busy=true] .home-playlist-art { opacity: .65; }
.home-playlist-runtime { position: absolute; right: var(--space-control); bottom: var(--space-control); padding: var(--space-1) var(--space-2); border-radius: 4px; background: rgb(5 11 20 / .86); color: #fff; font: 500 var(--t1)/1.2 var(--ui); font-variant-numeric: tabular-nums; }
.home-playlist-copy { display: grid; gap: var(--space-text); padding-inline: var(--space-1); }
.home-playlist-copy strong { font: 600 var(--t3)/1.5 var(--ui); letter-spacing: -.025em; overflow-wrap: anywhere; }
.home-playlist-description { color: var(--mist); font: 400 var(--t1)/1.75 var(--ui); }
.home-playlist-meta { color: var(--mist); font: 400 12px/1.6 var(--ui); }
.home-playlist-notice { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-group); padding: var(--space-section); border: 1px solid rgb(169 180 194 / .2); border-radius: 12px; }
.home-playlist-notice p { margin: 0; color: var(--mist); font-size: var(--t2); line-height: 1.7; }
.home-playlist-notice :is(a, button) { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-text) var(--space-group); border: 1px solid rgb(237 224 194 / .35); border-radius: 6px; background: transparent; color: var(--paper); text-decoration: none; }
@media (hover: none) { .home-playlist-listen { opacity: 1; width: 44px; height: 44px; } }
@media (min-width: 640px) { .home-playlist-grid { grid-auto-columns: 60%; } }
@media (min-width: 768px) {
  .below, .home-footer { --home-gutter: var(--gutter-desktop); }
}
@media (min-width: 1100px) { .home-playlist-grid { grid-auto-columns: 40%; gap: var(--space-page); } }
@media (min-width: 1200px) {
  .below, .home-footer { --home-gutter: var(--space-12); }
  .below { --home-section-gap: calc(var(--space-16) + var(--space-page)); }
}