/* Home-only editorial refinement. The album grid and playback remain owned by
   the existing Home runtime; this file only adjusts its presentation. */
body.home-approved-direction[data-tvc-canonical-page="/"] #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) {
  --home-editorial-gap: clamp(12px, 2vw, 22px);
  --home-copy-ink: var(--tvc-ink);
}

body.home-approved-direction[data-tvc-canonical-page="/"] #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-home {
  row-gap: 0 !important;
}

/* Idle begins with a small, purposeful invitation rather than an empty control
   row. The API-sourced playlist title is the only variable copy here. */
body.home-approved-direction[data-tvc-canonical-page="/"]:not(.home-listening) #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) #home-start-controls {
  justify-content: flex-start !important;
  gap: 0;
}

body.home-approved-direction[data-tvc-canonical-page="/"]:not(.home-listening) #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) #home-start-copy {
  display: grid !important;
  margin-left: 13px;
}

#home-start-title,
#home-start-subtitle {
  display: none !important;
}

#home-playlist-kicker {
  color: var(--tvc-muted);
  font: 500 8px/1.2 var(--tvc-font-sans, var(--sans));
  letter-spacing: .16em;
}

#home-playlist-name {
  max-width: min(48vw, 390px);
  overflow: hidden;
  color: var(--home-copy-ink, var(--tvc-ink));
  font: 700 clamp(12px, 1.18vw, 15px)/1.15 var(--tvc-font-sans, var(--sans));
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#home-playlist-meta {
  color: var(--tvc-muted);
  font: 400 8px/1.25 var(--tvc-font-sans, var(--sans));
  letter-spacing: .11em;
}

#page-home #home-start-controls #home-play {
  transition: background-color .2s ease, transform .24s cubic-bezier(.2,.7,.2,1) !important;
}

#page-home #home-start-controls #home-play:hover {
  transform: scale(1.045) !important;
}

#home-suggest-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  margin-left: auto;
  padding: 0 2px 0 10px;
  border: 0;
  background: transparent;
  color: var(--tvc-ink);
  font: 500 9px/1 var(--tvc-font-sans, var(--sans));
  letter-spacing: .075em;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .18s ease, transform .2s ease;
}

.home-suggest-plus {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 300 15px/1 var(--tvc-font-sans, var(--sans));
  transition: transform .2s ease;
  color: #3e6a36;
}

#home-suggest-trigger:hover { opacity: .7; }
#home-suggest-trigger:hover .home-suggest-plus { transform: rotate(90deg); }
#home-suggest-trigger:focus-visible {
  outline: 2px solid var(--tvc-public-accent, #984d3c);
  outline-offset: 4px;
}

/* The line of copy reads like a quiet imprint beneath the grid. */
.home-approved-descriptor {
  color: var(--tvc-muted);
}

.home-approved-descriptor .home-descriptor-emphasis {
  color: #bb352b;
  font-weight: 600;
}

.home-canvas-nav-control {
  transition: opacity .18s ease;
}
#page-home #home-about-open { color: #bb352b !important; }
#page-home #home-start-controls #home-play { color: #bb352b !important; border-color: currentColor !important; }
#page-home #home-start-controls #home-play .home-play-outline { stroke: currentColor !important; }
#home-playlist-name { letter-spacing: .12em; text-transform: uppercase; }

#page-home.active:not(.is-about-canvas):not(.is-curator-canvas) .home-tile:not(.is-playing-tile) {
  transition:
    transform .32s cubic-bezier(.2,.72,.2,1),
    box-shadow .32s cubic-bezier(.2,.72,.2,1) !important;
}

#page-home.active:not(.is-about-canvas):not(.is-curator-canvas) .home-tile:not(.is-playing-tile):hover {
  z-index: 4 !important;
  transform: translateY(-2px) scale(1.012) !important;
  box-shadow: 0 7px 15px rgba(49, 37, 27, .14) !important;
}

#page-home.active:not(.is-about-canvas):not(.is-curator-canvas) .home-tile:focus-visible {
  z-index: 5 !important;
  outline: 2px solid var(--tvc-public-accent, #984d3c) !important;
  outline-offset: 3px !important;
}

/* Listening has a finite vertical budget: reserve the player and footer before
   sizing the existing measured mosaic, rather than letting either overlap. */
body.home-approved-direction.home-listening[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) {
  --tvc-listen-footer: 68px;
}

body.home-approved-direction.home-listening[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  height: calc(100dvh - var(--tvc-listen-player)) !important;
  min-height: 0 !important;
}

body.home-approved-direction.home-listening[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-canvas-viewport {
  height: calc(100dvh - var(--tvc-listen-nav) - var(--tvc-listen-player) - var(--tvc-listen-footer)) !important;
  min-height: 0 !important;
}

body.home-approved-direction.home-listening[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home #home-canvas-home {
  --tvc-listen-hero: calc(100dvh - var(--tvc-listen-nav) - var(--tvc-listen-player) - var(--tvc-listen-footer));
  height: 100% !important;
}

body.home-approved-direction.home-listening[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-footer {
  display: grid !important;
  grid-row: 2;
  align-self: end;
  margin: 0 !important;
}

body.home-approved-direction.home-listening[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-player {
  height: var(--tvc-listen-player) !important;
  min-height: var(--tvc-listen-player) !important;
}

@media (max-width: 700px) {
  body.home-approved-direction.home-listening[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) {
    --tvc-listen-footer: 72px;
    --tvc-listen-player: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  body.home-approved-direction[data-tvc-canonical-page="/"]:not(.home-listening) #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) #home-start-controls {
    gap: 0;
  }

  #home-playlist-name { max-width: min(48vw, 230px); }
  #home-playlist-kicker { font-size: 7px; }
  #home-playlist-meta { font-size: 7px; letter-spacing: .08em; }
  #home-suggest-trigger { gap: 5px; font-size: 8px; }
  .home-suggest-plus { width: 26px; height: 26px; }

  body.home-approved-direction[data-tvc-canonical-page="/"]:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-start-controls #home-suggest-trigger {
    position: absolute;
    top: calc(var(--tvc-idle-top) + 44px + var(--tvc-idle-middle) + var(--home-gallery-measure) + 3px);
    right: var(--tvc-idle-side);
    margin: 0;
  }

  body.home-approved-direction[data-tvc-canonical-page="/"]:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-start-controls {
    position: static !important;
  }

  body.home-approved-direction.home-listening[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-start-controls #home-suggest-trigger {
    position: static;
    margin-left: auto;
  }

  body.home-approved-direction.home-listening[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-canvas-viewport {
    height: calc(100dvh - var(--tvc-listen-nav) - var(--tvc-listen-player) - var(--tvc-listen-footer)) !important;
  }
}

@media (max-height: 620px) and (min-width: 701px) {
  body.home-approved-direction.home-listening[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) {
    --tvc-listen-footer: 62px;
  }
}

/* Emphasis is conveyed by colour, without widening an already compact line
   on narrow screens or squeezing the adjacent About action. */
@media (max-width: 360px) {
  .home-approved-descriptor .home-descriptor-emphasis { font-weight: 400; }
}

/* In short landscape screens, put the existing controls beside the mosaic.
   Stacking a header, four rows, lift clearance, footer and player would force
   unusably tiny records. This keeps the same content and actions readable. */
@media (max-height: 500px) and (min-width: 701px) {
  body.home-approved-direction[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-home {
    --home-gallery-measure: min(36vw, calc(100dvh - 156px)) !important;
    display: grid !important;
    grid-template-columns: var(--home-gallery-measure) minmax(240px, 360px) !important;
    grid-template-rows: 1fr 1fr !important;
    column-gap: 28px;
    align-items: center !important;
    justify-content: center !important;
    height: calc(var(--home-gallery-measure) + 32px) !important;
    padding: 16px 20px !important;
  }
  body.home-approved-direction.home-listening[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-home {
    --home-gallery-measure: min(36vw, max(1px, calc(var(--tvc-listen-hero) - 32px))) !important;
    height: 100% !important;
  }
  body.home-approved-direction[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-home #home-mosaic {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  body.home-approved-direction[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-home #home-start-controls {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
  }
  body.home-approved-direction[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-home .home-canvas-bottom-nav {
    grid-column: 2;
    grid-row: 2;
    width: 100% !important;
    height: auto !important;
  }
  body.home-approved-direction[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-home .home-approved-descriptor {
    font-size: clamp(10.5px, 2.9vw, 11px) !important;
    letter-spacing: .025em;
    line-height: 1.2;
  }
}

/* Keep idle editorial copy near the divider, with the same breathing room as
   the social SVGs below it. Absolute placement retains every gallery track. */
@media (max-width: 700px), (min-width: 701px) and (max-width: 900px) and (min-height: 501px) {
  body.home-approved-direction.tvc-public-shell:not(.home-listening)[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home #home-canvas-home .home-canvas-bottom-nav {
    position: absolute !important;
    inset: auto auto 16px auto !important;
    height: 28px !important;
  }

  body.home-approved-direction.tvc-public-shell:not(.home-listening)[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home .home-canvas-bottom-nav :is(.home-approved-descriptor, #home-about-open) {
    top: 0;
  }
}

@media (max-width: 700px) {
  body.home-approved-direction.tvc-public-shell:not(.home-listening)[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home #home-canvas-home .home-canvas-bottom-nav {
    bottom: 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-home #home-start-controls #home-play,
  #home-suggest-trigger,
  .home-suggest-plus,
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) .home-tile:not(.is-playing-tile),
  .home-canvas-nav-control {
    transition: none !important;
  }
}

/* One viewport budget for both states. The zero-height middle row is idle;
   only an actual visible player receives space, immediately above the footer. */
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) {
  --home-frame-nav: var(--tvc-nav-height);
  --home-frame-footer: 62px;
  --home-frame-player: 0px;
  --home-frame-player-gap: 0px;
  --home-frame-header: 52px;
  --home-frame-actions: 28px;
  --home-frame-idle-actions: 68px;
  --home-frame-action-reserve: 0px;
  --home-frame-top-clearance: 5px;
  --home-frame-header-clearance: 5px;
  --home-frame-outer-clearance: 5px;
  --home-frame-action-clearance: 5px;
  --home-frame-idle-clearance: 5px;
  --home-frame-grid-gap: clamp(12px, 1.25vw, 18px);
  --home-frame-side-trim: 34px;
  height: 100dvh;
}
body.home-approved-direction.tvc-public-shell.home-listening[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) {
  --home-frame-player: 88px;
  --home-frame-player-gap: 16px;
  --home-frame-action-reserve: 0px;
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #main-nav {
  height: var(--home-frame-nav) !important;
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #main-nav .nav-logo {
  font-size: calc(clamp(11px, .95vw, 13px) + 2px) !important;
  font-weight: 800 !important;
}
@media (max-width: 700px) {
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #main-nav .nav-logo {
    font-size: 13px !important;
  }
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home {
  --home-frame-hero: calc(100dvh - var(--home-frame-nav) - var(--home-frame-footer) - var(--home-frame-player) - var(--home-frame-player-gap));
  --home-frame-idle-hero: calc(100dvh - var(--home-frame-nav) - var(--home-frame-footer));
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) var(--home-frame-player-gap) var(--home-frame-player) var(--home-frame-footer) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: var(--home-frame-nav) 0 0 !important;
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-viewport {
  grid-row: 1;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-viewport::-webkit-scrollbar {
  display: none;
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-track {
  display: block !important;
  height: 100% !important;
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-footer {
  grid-row: 4 !important;
  position: static !important;
  border-top: 1px solid var(--tvc-public-border) !important;
}
body.home-approved-direction.tvc-public-shell.home-listening[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #home-player {
  bottom: var(--home-frame-footer) !important;
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-start-copy {
  display: grid !important;
  gap: 3px;
  margin-left: 13px;
  min-width: 0;
  max-width: calc(100% - 57px);
}
#home-playlist-name {
  max-width: 100%;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  letter-spacing: .05em;
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home .home-canvas-bottom-nav {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 28px !important;
  gap: 0 6px !important;
  height: var(--home-frame-actions) !important;
  align-items: center;
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home .home-approved-descriptor {
  grid-column: 1;
  grid-row: 1;
  color: var(--tvc-ink);
  font-weight: 600 !important;
  font-size: clamp(10.5px, 2.9vw, 11px) !important;
  letter-spacing: .025em !important;
  white-space: normal !important;
  line-height: 1.2;
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home .home-approved-descriptor .home-descriptor-emphasis {
  font-weight: inherit !important;
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-about-open {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600 !important;
  font-size: clamp(10.5px, 2.9vw, 11px) !important;
}
@media (max-width: 700px) {
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) {
    --home-frame-nav: 10.2dvh;
    --home-frame-footer: calc(76px + env(safe-area-inset-bottom, 0px));
    --home-frame-header-clearance: 12px;
    --home-frame-outer-clearance: 12px;
    --home-frame-top-clearance: 12px;
    --home-frame-action-clearance: 12px;
    --home-frame-idle-clearance: 12px;
    --home-frame-grid-gap: clamp(10px, 1.25dvh, 12px);
  }
  body.home-approved-direction.tvc-public-shell.home-listening[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) {
    --home-frame-player: var(--tvc-listen-player);
  }
}
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-mosaic {
  --sequence-gap: var(--home-frame-grid-gap) !important;
  gap: var(--home-frame-grid-gap) !important;
  width: var(--home-gallery-measure) !important;
  height: var(--home-gallery-measure) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
}
/* Gallery dimensions always use the approved idle budget. Playback uses spare
   spacing first; on shorter viewports, content scrolls above the pinned player
   and footer rather than changing the artwork or hiding either control area. */
@media (max-width: 700px), (min-height: 501px) {
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-home {
    --home-gallery-measure: min(
      calc(100vw - var(--home-frame-side-trim)), 770px, calc(100dvh - 245px),
      max(1px, calc(var(--home-frame-idle-hero) - var(--home-frame-header) - var(--home-frame-idle-actions) - 4 * var(--home-frame-idle-clearance)))
    ) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: var(--home-gallery-measure) !important;
    grid-template-rows: minmax(var(--home-frame-top-clearance), 1fr) var(--home-frame-header)
      minmax(var(--home-frame-header-clearance), 1fr) var(--home-gallery-measure)
      minmax(var(--home-frame-action-clearance), 1fr) var(--home-frame-actions)
      minmax(var(--home-frame-outer-clearance), 1fr) var(--home-frame-action-reserve) !important;
    justify-content: center !important;
    height: max(100%, calc(var(--home-gallery-measure) + var(--home-frame-header) + var(--home-frame-actions) + var(--home-frame-action-reserve) + var(--home-frame-header-clearance) + var(--home-frame-action-clearance) + var(--home-frame-top-clearance) + var(--home-frame-outer-clearance))) !important;
    padding: 0 17px !important;
    margin: 0 !important;
  }
  body.home-approved-direction.tvc-public-shell.home-listening[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-home {
    /* Equal gaps frame the playlist heading. Leave just enough room for the
       approved raised sleeve; surplus space belongs below the editorial row. */
    --home-frame-breathing: max(
      28px,
      calc((var(--home-gallery-measure) - 3 * var(--home-frame-grid-gap)) / 20 + 14px),
      calc((var(--home-frame-hero) - var(--home-frame-header) - var(--home-gallery-measure) - var(--home-frame-idle-actions)) / 4)
    );
    --home-frame-top-clearance: var(--home-frame-breathing);
    --home-frame-header-clearance: var(--home-frame-breathing);
    --home-frame-action-clearance: max(12px, calc((var(--home-gallery-measure) - 3 * var(--home-frame-grid-gap)) / 20 - 6px));
    grid-template-rows: var(--home-frame-top-clearance) var(--home-frame-header)
      var(--home-frame-header-clearance) var(--home-gallery-measure)
      var(--home-frame-action-clearance) var(--home-frame-actions)
      minmax(var(--home-frame-outer-clearance), 1fr) 0px !important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-start-controls {
    grid-row: 2 !important;
    grid-column: 1 !important;
    height: var(--home-frame-header) !important;
    width: var(--home-gallery-measure) !important;
    position: static !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-mosaic {
    grid-row: 4 !important;
    grid-column: 1 !important;
    width: var(--home-gallery-measure) !important;
    height: var(--home-gallery-measure) !important;
    margin: 0 !important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home .home-canvas-bottom-nav {
    grid-row: 6 !important;
    grid-column: 1 !important;
    width: var(--home-gallery-measure) !important;
    margin: 0 !important;
  }
}
/* Landscape retains its existing side-by-side header and gallery. */
@media (min-width: 701px) and (max-height: 500px) {
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-home {
    --home-gallery-measure: min(36vw, max(1px, calc(var(--home-frame-idle-hero) - var(--home-frame-idle-actions) - 24px))) !important;
    grid-template-columns: var(--home-gallery-measure) minmax(240px, 360px) !important;
    grid-template-rows: var(--home-gallery-measure) var(--home-frame-actions) var(--home-frame-action-reserve) !important;
    min-height: calc(var(--home-gallery-measure) + var(--home-frame-actions) + var(--home-frame-action-reserve) + 24px) !important;
    padding: 12px 20px !important;
  }
  body.home-approved-direction.tvc-public-shell.home-listening[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-home {
    min-height: calc(var(--home-gallery-measure) + var(--home-frame-actions) + var(--home-frame-action-reserve) + 40px) !important;
    padding-top: 28px !important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-mosaic {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-start-controls {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: var(--home-frame-header) !important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home .home-canvas-bottom-nav {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }
}

/* Keep clipped controls wholly hidden, never half-visible at a player edge.
   Visibility (not display) preserves every grid/track dimension. */
body.home-listening #page-home #home-canvas-home .is-home-player-occluded {
  visibility: hidden !important;
  pointer-events: none !important;
}

@keyframes home-play-emerge {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes home-kicker-emerge {
  from {
    opacity: 0;
    transform: translateX(-24px);
    clip-path: inset(-.5em 100% -.5em 0);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(-.5em -.1em -.5em -.1em);
  }
}

body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home #home-start-controls {
  animation: none;
}

body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home #home-play {
  animation: home-play-emerge 1400ms ease-out backwards;
}

body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home #home-playlist-kicker {
  color: var(--home-copy-ink, var(--tvc-ink));
  font: 600 clamp(33px, 5.4vw, 82px)/.82 var(--tvc-font-sans, var(--sans));
  letter-spacing: -.04em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: inset(-.5em -.1em -.5em -.1em);
  animation: home-kicker-emerge 2000ms .18s ease-out backwards;
}

body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home #home-playlist-kicker .home-kicker-period {
  color: #bb352b;
  -webkit-text-stroke-color: currentColor;
}

@media (max-width: 600px) {
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home #home-playlist-kicker {
    /* Uppercase fallback fonts need more width than the former italic serif.
       Fit the existing gallery/header budget, including compact-height phones. */
    font-size: min(clamp(26px, 8vw, 36px), calc((var(--home-gallery-measure) - 57px) / 9));
  }
}

body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home .home-playlist-caption {
  position: absolute;
  width: 100%;
  z-index: 2;
  grid-column: 1 / 2;
  grid-row: 5 / 6;
  justify-self: stretch;
  align-self: start;
  min-width: 0;
  margin: 10px 0 0;
  text-align: left;
  transform: none;
}

body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home .home-playlist-caption #home-playlist-name {
  display: block;
  width: 100%;
  max-width: none;
  overflow: visible;
  color: var(--home-copy-ink, var(--tvc-ink));
  color: color-mix(in srgb, var(--home-copy-ink, var(--tvc-ink)) 85%, var(--tvc-site-background) 15%);
  font: 500 clamp(8.5px, 2.5vw, 9.5px)/1.05 var(--tvc-font-sans, var(--sans));
  letter-spacing: 0;
  text-transform: uppercase;
  text-overflow: clip;
  white-space: normal;
  -webkit-line-clamp: unset;
}

/* Landscape keeps the same mosaic column; the title shares only the existing
   action row, above its vertically centered descriptor and About control. */
body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home #home-canvas-home .home-approved-descriptor {
  font-size: clamp(10.5px, 2.9vw, 11px) !important;
  line-height: 1.2;
}

/* Preserve the action-row box; allow its larger type to clear the lower title,
   including the two-line fallback-font treatment on narrow phones. */
@media (max-width: 700px) {
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home .home-canvas-bottom-nav .home-approved-descriptor,
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home .home-canvas-bottom-nav #home-about-open {
    position: relative;
    top: 9px;
  }
}

@media (min-width: 701px) and (max-height: 500px) {
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home #home-playlist-kicker {
    font-size: clamp(22px, 3.7vw, 32px);
  }

  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home .home-playlist-caption {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }

  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home .home-canvas-bottom-nav .home-approved-descriptor,
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home .home-canvas-bottom-nav #home-about-open {
    position: relative;
    top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home #home-start-controls {
    animation: none !important;
  }

  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home #home-play,
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home #home-playlist-kicker {
    animation: none !important;
  }
}

/* Desktop shares the mobile reading order, with a wider real-artwork field.
   The Suggest control shares the artwork's grid cell, not a fixed top offset. */
@media (min-width:901px) and (min-height:501px) {
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) {
    display:block!important;height:auto!important;min-height:100dvh!important;
    padding:var(--home-frame-nav,var(--tvc-nav-height)) 0 0!important;overflow:visible!important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-viewport,
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-track {
    height:auto!important;min-height:0!important;overflow:visible!important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-home {
    display:grid!important;width:100%!important;height:auto!important;min-height:0!important;
    grid-template-columns:var(--home-gallery-width)!important;
    grid-template-rows:auto auto auto auto!important;
    justify-content:center!important;align-content:start!important;gap:0!important;
    padding:25px 0 0!important;overflow:visible!important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-start-controls {
    grid-column:1!important;grid-row:1!important;
    width:var(--home-gallery-width)!important;height:auto!important;min-height:44px!important;
    margin:0 auto 24px!important;justify-content:flex-start!important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-start-copy {display:grid!important}
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-mosaic {
    --home-gallery-measure:var(--home-gallery-width)!important;
    grid-column:1!important;grid-row:2!important;
    display:grid!important;grid-template-columns:repeat(var(--home-cols),minmax(0,1fr))!important;
    grid-template-rows:repeat(var(--home-rows),minmax(0,1fr))!important;
    width:var(--home-gallery-width)!important;height:var(--home-gallery-height)!important;
    column-gap:calc(var(--home-gallery-gap) * 1.25)!important;row-gap:calc(var(--home-row-gap) * 1.25)!important;margin:0 auto!important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home .home-playlist-caption {
    position:relative!important;inset:auto!important;z-index:auto!important;
    grid-column:1!important;grid-row:3!important;
    width:var(--home-gallery-width)!important;margin:10px auto 0!important;text-align:left!important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-canvas-home > #home-suggest-trigger {
    position:relative!important;inset:auto!important;margin-right:12px!important;
    grid-column:1!important;grid-row:2!important;align-self:start!important;justify-self:end!important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home .home-canvas-bottom-nav {
    position:relative!important;inset:auto!important;width:var(--home-gallery-width)!important;height:28px!important;
    grid-column:1!important;grid-row:4!important;
    margin:clamp(34px,4.5vw,66px) auto 0!important;
  }
  body.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home #home-footer {
    position:relative!important;margin-top:32px!important;
  }
}