/*
 * Featured direction — the existing Home canvas, re-composed as an editorial
 * sleeve wall. The runtime still owns artwork, tile counts and grid metrics.
 */
body.home-featured-direction {
  --featured-paper: var(--tvc-site-background, var(--tvc-cream, #f4efe5));
  --featured-ink: var(--tvc-ink, #34251e);
  --featured-muted: var(--tvc-muted, #75665b);
  --featured-rule: var(--tvc-public-border, rgba(52, 37, 30, .2));
  --featured-red: #bb352b;
  background: var(--featured-paper) !important;
  color: var(--featured-ink);
}

body.home-featured-direction #home-canvas-home {
  transition: transform .18s ease-out, opacity .18s ease-out;
}
body.home-featured-direction.home-navigating-right #home-canvas-home {
  transform: translateX(-24px) !important;
  opacity: .55;
}
body.home-featured-direction #home-panel-position :is(button, a)::after {
  content: "";
  position: absolute;
  inset: -12px 0;
}
body.home-featured-direction #home-panel-position :is(button, a) {
  position: relative;
}
body.home-featured-direction.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-canvas-home #home-mosaic-panel {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  width: var(--home-gallery-width);
  max-width: 100%;
}
body.home-featured-direction.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-canvas-home #home-mosaic-panel #home-suggest-trigger {
  position: absolute !important;
  top: -36px !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 42px;
  height: 42px;
}
@media (min-width: 701px) {
  body.home-featured-direction.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) #home-canvas-home #home-start-controls #home-playlist-kicker {
    font-size: min(clamp(32px, 5.4vw, 76px), calc((var(--home-gallery-width) - 94px) / 9)) !important;
  }
}
body.home-featured-direction.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-canvas-home > :is(#home-start-controls, #home-mosaic-panel, #home-mosaic, .home-playlist-caption, .home-canvas-bottom-nav, #home-panel-position, #home-status) {
  grid-column: 1 !important;
}

body.home-featured-direction #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) {
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 100dvh !important;
  height: auto !important;
  padding: var(--home-frame-nav, var(--tvc-nav-height, 43px)) 0 0 !important;
  overflow: visible !important;
  background: var(--featured-paper) !important;
  color: var(--featured-ink) !important;
  perspective: none !important;
  filter: none !important;
}

body.home-featured-direction #main-nav {
  background: var(--featured-paper) !important;
  color: var(--featured-ink) !important;
  box-shadow: none !important;
}

body.home-featured-direction #main-nav .nav-logo {
  color: var(--featured-ink) !important;
  font-weight: 800 !important;
}

body.home-featured-direction #home-canvas-viewport,
body.home-featured-direction #home-canvas-track {
  box-sizing: border-box !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

body.home-featured-direction #home-canvas-home {
  box-sizing: border-box !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto auto auto !important;
  justify-items: center !important;
  align-content: start !important;
  align-items: start !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 26px 17px 0 !important;
  margin: 0 !important;
  row-gap: 0 !important;
  overflow: visible !important;
  background: var(--featured-paper) !important;
}

body.home-featured-direction #home-inner,
body.home-featured-direction .home-gallery-header,
body.home-featured-direction #home-overlay,
body.home-featured-direction .home-gallery-controls,
body.home-featured-direction .home-discovery-copy,
body.home-featured-direction #home-signature,
body.home-featured-direction .home-layout-controls,
body.home-featured-direction #home-caption-wrap {
  display: none !important;
}

/* Play and title share a single compact editorial line. */
body.home-featured-direction #home-start-controls {
  position: relative !important;
  inset: auto !important;
  z-index: 3 !important;
  display: flex !important;
  grid-row: 1 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: min(100%, 1180px) !important;
  height: auto !important;
  min-height: 76px !important;
  margin: 0 auto 19px !important;
  padding: 0 !important;
  transform: none !important;
  animation: none !important;
}

body.home-featured-direction #home-start-controls #home-play {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  flex: 0 0 76px !important;
  width: 76px !important;
  height: 76px !important;
  min-width: 0 !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1.5px solid var(--featured-red) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--featured-red) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  cursor: pointer;
}

body.home-featured-direction #home-start-controls #home-play svg {
  display: block;
  width: 53%;
  height: 53%;
}

body.home-featured-direction #home-start-controls #home-play .home-play-outline {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

body.home-featured-direction #home-start-controls #home-play:hover {
  background: rgba(199, 51, 46, .06) !important;
}

body.home-featured-direction #home-start-copy {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  max-width: calc(100% - 88px);
  margin: 0 0 0 12px !important;
  color: var(--featured-ink);
  text-align: left;
  text-transform: none;
}

body.home-featured-direction #home-featured-label {
  display: block;
  margin: 0 0 1px;
  color: var(--featured-ink);
  font: 400 clamp(31px, 4.2vw, 52px)/.86 "Pinyon Script", "Brush Script MT", cursive;
  letter-spacing: -.015em;
  white-space: nowrap;
}

body.home-featured-direction #home-playlist-kicker {
  display: block;
  overflow: visible;
  color: var(--featured-ink);
  font: 600 clamp(32px, 5.4vw, 76px)/.91 var(--tvc-font-sans, var(--sans, sans-serif));
  letter-spacing: -.065em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: none !important;
  animation: none !important;
}

body.home-featured-direction #home-playlist-kicker .home-kicker-period {
  color: var(--featured-red) !important;
  -webkit-text-stroke-color: currentColor;
}

body.home-featured-direction #home-start-title,
body.home-featured-direction #home-start-subtitle {
  display: none !important;
}

/* Let the existing JS provide the density and dimensions. */
body.home-featured-direction #home-mosaic {
  position: relative !important;
  inset: auto !important;
  z-index: 1;
  display: grid !important;
  grid-row: 2 !important;
  grid-template-columns: repeat(var(--home-cols, 6), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--home-rows, 6), var(--home-tile-size, auto)) !important;
  grid-auto-rows: var(--home-tile-size, auto);
  gap: var(--home-gallery-gap, clamp(4px, .8vw, 9px)) !important;
  width: min(100%, var(--home-gallery-width, 1180px)) !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Suggest remains the existing working action, tucked against the wall's
   upper-right edge without covering any album image. */
body.home-featured-direction #home-suggest-trigger {
  position: relative !important;
  z-index: 4 !important;
  display: inline-flex !important;
  grid-row: 2 !important;
  grid-column: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  margin: 0 !important;
  transform: translateY(-100%);
}

body.home-featured-direction #home-suggest-trigger:focus-visible,
body.home-featured-direction #home-start-controls #home-play:focus-visible,
body.home-featured-direction #home-panel-position :focus-visible {
  outline: 2px solid var(--featured-red);
  outline-offset: 3px;
}

/* The metadata is one calm two-sided imprint; at phone widths it can breathe
   onto two lines rather than collide or be clipped. */
body.home-featured-direction .home-playlist-caption {
  position: relative !important;
  grid-row: 3 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px;
  width: min(100%, var(--home-gallery-width, 1180px)) !important;
  min-width: 0;
  margin: 17px auto 0 !important;
  padding: 0 !important;
  color: var(--featured-ink);
  text-align: left !important;
  transform: none !important;
}

body.home-featured-direction #home-curation-period,
body.home-featured-direction .home-playlist-label {
  color: var(--featured-muted);
  font: 400 clamp(8px, .95vw, 11px)/1.35 var(--tvc-font-sans, var(--sans, sans-serif));
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.home-featured-direction #home-curation-period {
  flex: 0 0 auto;
  white-space: nowrap;
}

body.home-featured-direction .home-playlist-label {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  text-align: right;
}

body.home-featured-direction #home-playlist-name {
  display: inline;
  max-width: none;
  overflow: visible;
  color: var(--featured-ink) !important;
  font: inherit;
  letter-spacing: inherit !important;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.home-featured-direction #home-panel-position {
  grid-row: 5 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min(100%, var(--home-gallery-width, 1180px));
  margin: 14px auto 0;
}

body.home-featured-direction #home-panel-position :is(button, a) {
  display: block;
  width: 58px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(32, 31, 29, .2);
  color: transparent;
  font-size: 0;
  text-decoration: none;
  cursor: pointer;
}

body.home-featured-direction #home-panel-position .home-position-home {
  background: var(--featured-red);
}

body.home-featured-direction #home-panel-position .home-position-about {
  background: rgba(32, 31, 29, .2);
}

body.home-featured-direction #home-status:not(:empty) {
  position: relative !important;
  grid-row: 6 !important;
  width: min(100%, var(--home-gallery-width, 1180px));
  margin: 10px auto 0;
  color: var(--featured-muted);
  font: 500 11px/1.45 var(--tvc-font-sans, var(--sans, sans-serif));
}

/* Playing is deliberately just another in-flow section beneath the complete
   gallery. The shared footer follows it naturally; nothing is pinned over it. */
body.home-featured-direction #home-player {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 20 !important;
  display: none !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: var(--tvc-player-height, 88px) !important;
  margin: 24px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--featured-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: background-color .28s ease, color .28s ease;
}

body.home-featured-direction.home-listening #home-player { display: grid !important; }

body.home-featured-direction #page-home #home-footer {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  margin: 24px 0 0 !important;
}

body.home-featured-direction.home-listening #page-home #home-footer {
  display: grid !important;
}

@media (min-width: 701px) {
  body.home-featured-direction #home-start-controls {
    min-height: 92px !important;
    margin-bottom: 20px !important;
  }

  body.home-featured-direction #home-start-controls #home-play {
    flex-basis: 80px !important;
    width: 80px !important;
    height: 80px !important;
  }

  body.home-featured-direction #home-start-copy {
    max-width: calc(100% - 94px);
    margin-left: 14px !important;
  }

  body.home-featured-direction #home-playlist-kicker {
    font-size: clamp(42px, 5.4vw, 76px);
  }

  body.home-featured-direction #home-featured-label {
    font-size: clamp(37px, 4vw, 54px);
  }
}

@media (max-width: 600px) {
  body.home-featured-direction #home-start-controls {
    min-height: 62px !important;
    margin-bottom: 19px !important;
  }

  body.home-featured-direction #home-start-controls #home-play {
    flex-basis: 54px !important;
    width: 54px !important;
    height: 54px !important;
  }

  body.home-featured-direction #home-start-copy {
    max-width: calc(100% - 64px);
    margin-left: 10px !important;
  }

  body.home-featured-direction #home-featured-label {
    font-size: clamp(27px, 9vw, 35px);
  }

  body.home-featured-direction #home-playlist-kicker {
    font-size: min(clamp(24px, 8.8vw, 34px), calc((100vw - 34px - 64px) / 9));
    letter-spacing: -.07em;
  }

  body.home-featured-direction .home-playlist-caption {
    gap: 7px;
    margin-top: 14px !important;
  }

  body.home-featured-direction #home-curation-period,
  body.home-featured-direction .home-playlist-label {
    font-size: clamp(7px, 2.3vw, 9px);
    letter-spacing: .045em;
  }

  body.home-featured-direction #home-playlist-name {
    max-width: 34vw;
  }

  body.home-featured-direction #home-panel-position {
    margin-top: 12px;
  }

  body.home-featured-direction #home-panel-position :is(button, a) {
    width: 46px;
  }

}

@media (max-width: 360px) {
  body.home-featured-direction .home-playlist-caption {
    align-items: baseline !important;
    flex-direction: row;
    gap: 7px;
  }

  body.home-featured-direction .home-playlist-label {
    justify-content: flex-end;
    max-width: 100%;
    text-align: right;
  }

  body.home-featured-direction #home-playlist-name { max-width: 62vw; }

  body.home-featured-direction #home-panel-position { margin-top: 10px; }

}

@media (prefers-reduced-motion: reduce) {
  body.home-featured-direction #home-start-controls #home-play,
  body.home-featured-direction #home-suggest-trigger {
    transition: none !important;
  }
}

/* Exact user-supplied transparent lettering, with only empty margins cropped.
   Retain accessible text rather than substituting a different script font. */
body.home-featured-direction.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-start-controls #home-start-copy #home-featured-label {
  width: clamp(135px, 14vw, 210px);
  height: auto;
  aspect-ratio: 725 / 168;
  margin: 0 0 4px !important;
  background: url("/assets/home-featured-script.png") left center / contain no-repeat;
  color: transparent !important;
  font: 0/0 sans-serif !important;
}

/* Keep the canonical footer at the document's end without reserving any
   player space in idle, or inserting a block between the indicator/player. */
body.home-featured-direction.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) #home-footer {
  margin-top: auto !important;
}
body.home-featured-direction.home-approved-direction.tvc-public-shell[data-tvc-canonical-page="/"]:not(.home-listening):has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-viewport {
  margin-bottom: 24px !important;
}
body.home-featured-direction.home-approved-direction.home-listening.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) #home-player {
  margin-bottom: 24px !important;
}

/*
 * These scoped selectors intentionally outrank the previous measured-canvas
 * layout on the canonical public Home route. Tile transforms/animations and
 * the shared footer's native grid presentation are deliberately untouched.
 */
body.home-featured-direction.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: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 100dvh !important;
  padding: var(--home-frame-nav, var(--tvc-nav-height, 43px)) 0 0 !important;
  overflow: visible !important;
  background: var(--tvc-site-background, var(--tvc-cream, #f4efe5)) !important;
  color: var(--tvc-ink, #34251e) !important;
}

body.home-featured-direction.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) :is(
  #home-canvas-viewport,
  #home-canvas-track
) {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

body.home-featured-direction.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) #home-canvas-home {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto auto auto !important;
  justify-items: center !important;
  align-content: start !important;
  align-items: start !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 26px 17px 0 !important;
  margin: 0 !important;
  row-gap: 0 !important;
  overflow: visible !important;
}

body.home-featured-direction.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) #home-start-controls {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  grid-row: 1 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: min(100%, var(--home-gallery-width, 1180px)) !important;
  height: auto !important;
  min-height: 76px !important;
  margin: 0 auto 19px !important;
  padding: 0 !important;
  transform: none !important;
}

body.home-featured-direction.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) #home-start-controls #home-play {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  flex: 0 0 76px !important;
  width: 76px !important;
  height: 76px !important;
  border: 1.5px solid #bb352b !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #bb352b !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.home-featured-direction.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) #home-start-copy {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: calc(100% - 88px) !important;
  margin: 0 0 0 12px !important;
  text-align: left !important;
  text-transform: none !important;
}

body.home-featured-direction.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) #home-featured-label {
  display: block !important;
  margin: 0 0 1px !important;
  color: var(--tvc-ink, #34251e) !important;
  font: 400 clamp(31px, 4.2vw, 52px)/.86 "Pinyon Script", "Brush Script MT", cursive !important;
  letter-spacing: -.015em !important;
  white-space: nowrap !important;
  text-transform: none !important;
}

body.home-featured-direction.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) #home-start-controls #home-playlist-kicker {
  font: 600 clamp(32px, 5.4vw, 76px)/.91 var(--tvc-font-sans, var(--sans, sans-serif)) !important;
  letter-spacing: -.065em !important;
  white-space: nowrap !important;
  clip-path: none !important;
  animation: none !important;
}

body.home-featured-direction.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) #home-playlist-kicker .home-kicker-period {
  color: #bb352b !important;
}

body.home-featured-direction.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) #home-mosaic {
  display: grid !important;
  grid-row: 2 !important;
  grid-template-columns: repeat(var(--home-cols, 6), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--home-rows, 6), var(--home-tile-size, auto)) !important;
  grid-auto-rows: var(--home-tile-size, auto) !important;
  gap: var(--home-gallery-gap, clamp(4px, .8vw, 9px)) !important;
  width: min(100%, var(--home-gallery-width, 1180px)) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  overflow: visible !important;
  transform: none !important;
}

body.home-featured-direction.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) #home-suggest-trigger {
  position: relative !important;
  display: inline-flex !important;
  grid-row: 2 !important;
  grid-column: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  margin: 0 !important;
  transform: translateY(-100%) !important;
}

body.home-featured-direction.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) .home-playlist-caption {
  position: relative !important;
  grid-row: 3 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  width: min(100%, var(--home-gallery-width, 1180px)) !important;
  min-width: 0 !important;
  margin: 17px auto 0 !important;
  overflow: visible !important;
  text-align: left !important;
  transform: none !important;
}

body.home-featured-direction.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) .home-playlist-caption #home-playlist-name {
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  font: inherit !important;
  font-weight: 600 !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  overflow-wrap: anywhere;
}

body.home-featured-direction.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) #home-panel-position {
  grid-row: 5 !important;
  display: flex !important;
  width: min(100%, var(--home-gallery-width, 1180px)) !important;
  margin: 14px auto 0 !important;
}

body.home-featured-direction.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) #home-canvas-home .home-canvas-bottom-nav {
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 4 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 8px 16px !important;
  width: min(100%, var(--home-gallery-width, 1180px)) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 14px auto 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--tvc-public-border, rgba(52, 37, 30, .2)) !important;
}

body.home-featured-direction.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) #home-canvas-home :is(
  .home-canvas-curated-copy,
  .home-approved-descriptor
) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0;
  color: var(--tvc-ink) !important;
  font: 500 10px/1.3 var(--tvc-font-sans, var(--sans, sans-serif)) !important;
  letter-spacing: .04em !important;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
}

body.home-featured-direction.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) #home-canvas-home .home-descriptor-emphasis {
  color: inherit !important;
  font-weight: inherit !important;
}

body.home-featured-direction.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) #home-canvas-home #home-about-open {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  color: #bb352b !important;
  font: 500 10px/1.2 var(--tvc-font-sans, var(--sans, sans-serif)) !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

body.home-featured-direction.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) #home-player {
  position: relative !important;
  inset: auto !important;
  z-index: 50 !important;
  flex: 0 0 auto !important;
  display: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: var(--tvc-player-height, 88px) !important;
  margin: 24px 0 0 !important;
  transform: none !important;
}

body.home-featured-direction.home-approved-direction.home-listening.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) #home-player {
  display: grid !important;
}

body.home-featured-direction.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) #home-footer {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  flex: 0 0 auto !important;
  margin: auto 0 0 !important;
}

@media (min-width: 701px) {
  body.home-featured-direction.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) #home-canvas-home {
    padding: 34px clamp(28px, 4vw, 64px) 0 !important;
  }
}

@media (max-width: 600px) {
  body.home-featured-direction.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) #home-canvas-home {
    padding: 22px 17px 0 !important;
  }

  body.home-featured-direction.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) #home-start-controls {
    min-height: 62px !important;
    margin-bottom: 19px !important;
  }

  body.home-featured-direction.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) #home-start-controls #home-play {
    flex-basis: 54px !important;
    width: 54px !important;
    height: 54px !important;
  }

  body.home-featured-direction.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) #home-start-copy {
    max-width: calc(100% - 64px) !important;
    margin-left: 10px !important;
  }

  body.home-featured-direction.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) #home-featured-label {
    font-size: clamp(27px, 9vw, 35px) !important;
  }

  body.home-featured-direction.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) #home-start-controls #home-playlist-kicker {
    font-size: min(clamp(24px, 8.8vw, 34px), calc((var(--home-gallery-width, calc(100vw - 34px)) - 64px) / 9)) !important;
    letter-spacing: -.07em !important;
  }

  body.home-featured-direction.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) .home-playlist-caption {
    gap: 7px;
    margin-top: 14px !important;
  }

  body.home-featured-direction.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) #home-panel-position {
    margin-top: 12px !important;
  }
}

@media (max-width: 360px) {
  body.home-featured-direction.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) .home-playlist-caption {
    align-items: baseline !important;
    flex-direction: row;
    gap: 7px;
  }

  body.home-featured-direction.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) .home-playlist-label {
    justify-content: flex-end;
    text-align: right;
  }
}