/*
 * The Vinyl Corner — public editorial polish
 * Scoped to the Home/About spread. This is a precision override layer:
 * approved artwork, titles, copy, colors and player surfaces remain intact.
 */

/* Header height follows the approved roomy mobile chrome, not the compact
   legacy 42px utility header. Shared values also drive each page's top inset. */
body.tvc-editorial-spread {
  --tvc-editorial-idle-banner: #ae211e;
  --tvc-editorial-idle-banner-ink: #f7f1e7;
  --tvc-editorial-header-height: 43px;
  --tvc-editorial-wordmark-size: 14px;
  --tvc-nav-height: var(--tvc-editorial-header-height) !important;
  --home-frame-nav: var(--tvc-editorial-header-height) !important;
  --nav: var(--tvc-editorial-header-height) !important;
}
@media (min-width: 701px) {
  body.tvc-editorial-spread {
    --tvc-editorial-header-height: clamp(64px, 7.4dvh, 80px);
  }
}
@media (max-width: 700px) {
  body.tvc-editorial-spread {
    --tvc-editorial-header-height: clamp(70px, 10.2dvh, 90px);
    --tvc-editorial-wordmark-size: 13px;
  }
}

body.tvc-editorial-spread {
  --tvc-editorial-rule: rgba(52, 37, 30, .2);
  --tvc-editorial-bottom-space: calc(
    var(--tvc-dock-obstruction, 0px) +
    var(--tvc-viewport-bottom, 0px) +
    env(safe-area-inset-bottom, 0px) + 28px
  );
}

/* The canonical header keeps precisely the same footprint on both routes.
   DM Sans regular is the supplied wordmark voice; never compress it to fit. */
body.tvc-editorial-spread :is(#main-nav, .tvc-shared-header) {
  box-sizing: border-box !important;
  height: var(--tvc-editorial-header-height) !important;
  min-height: var(--tvc-editorial-header-height) !important;
  padding-inline: clamp(17px, 3.3vw, 42px) !important;
}

body.tvc-editorial-spread :is(#main-nav, .tvc-shared-header) .nav-logo {
  flex: 0 0 auto !important;
  font-family: "DM Sans", var(--tvc-font-sans, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .2em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-stretch: normal !important;
}

body.tvc-editorial-spread :is(#main-nav, .tvc-shared-header) .nav-menu-btn {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
}

/* The separator is a shared, fixed page-position marker. It no longer
   consumes space inside either editorial composition. */
body.tvc-editorial-spread :is(#home-panel-position, #tvc-editorial-position) {
  box-sizing: border-box !important;
  position: fixed !important;
  z-index: 180 !important;
  inset: auto auto calc(
    var(--tvc-dock-obstruction, 0px) +
    var(--tvc-viewport-bottom, 0px) +
    env(safe-area-inset-bottom, 0px) + 12px
  ) 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 3px !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: auto;
}

body.tvc-editorial-spread :is(#home-panel-position, #tvc-editorial-position) :is(button, a) {
  box-sizing: border-box !important;
  position: relative;
  display: block !important;
  flex: 0 0 58px !important;
  width: 58px !important;
  height: 3px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--tvc-ink, #34251e) 20%, transparent) !important;
  color: transparent !important;
  font-size: 0 !important;
  text-decoration: none !important;
}

body.tvc-editorial-spread :is(#home-panel-position, #tvc-editorial-position) [aria-current="page"] {
  background: #bb352b !important;
}

body.tvc-editorial-spread :is(#home-panel-position, #tvc-editorial-position) :is(button, a)::after {
  content: "";
  position: absolute;
  inset: -12px 0;
}

body.tvc-editorial-spread :is(#home-panel-position, #tvc-editorial-position) :focus-visible {
  outline: 2px solid #bb352b !important;
  outline-offset: 4px !important;
}

/* Reassert the fixed marker against the older route-specific important rules. */
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-panel-position,
body.tvc-public-shell.tvc-editorial-spread.tvc-about-page #tvc-editorial-position {
  position: fixed !important;
  z-index: 180 !important;
  inset: auto auto calc(
    var(--tvc-dock-obstruction, 0px) +
    var(--tvc-viewport-bottom, 0px) +
    env(safe-area-inset-bottom, 0px) + 12px
  ) 50% !important;
  display: flex !important;
  width: auto !important;
  height: 3px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

/* Keep room for the fixed position rule and, while listening, the persistent
   dock. Main/editorial sections remain normal-height and naturally scroll. */
body.tvc-editorial-spread #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) {
  padding-bottom: var(--tvc-editorial-bottom-space) !important;
}

body.tvc-editorial-spread main.about-page-layout {
  box-sizing: border-box;
  padding-bottom: var(--tvc-editorial-bottom-space);
}

body.tvc-editorial-spread.tvc-player-open main.about-page-layout {
  padding-bottom: max(
    var(--tvc-editorial-bottom-space),
    calc(var(--tvc-dock-obstruction, 0px) + var(--tvc-viewport-bottom, 0px) +
      env(safe-area-inset-bottom, 0px) + 30px)
  );
}

/* Idle canonical Home header only. Playback artwork owns its inline surface
   and contrast colors; About and every other page retain their existing paint. */
body.tvc-public-shell:is(.home-approved-direction, .home-featured-direction)[data-tvc-canonical-page="/"]:not(.home-playback-theme):not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #main-nav {
  background: var(--tvc-reference-accent, #b71c1c) !important;
  color: var(--tvc-cream) !important;
}

body.tvc-public-shell:is(.home-approved-direction, .home-featured-direction)[data-tvc-canonical-page="/"]:not(.home-playback-theme):not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #main-nav :is(.nav-logo, .nav-menu-btn) {
  color: var(--tvc-cream) !important;
}

body.tvc-public-shell:is(.home-approved-direction, .home-featured-direction)[data-tvc-canonical-page="/"]:not(.home-playback-theme):not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #main-nav .nav-menu-btn span {
  background: currentColor !important;
}

body.tvc-editorial-spread.tvc-retained-frame :is(
  #main-nav, .tvc-shared-header, #home-panel-position, #tvc-editorial-position
) {
  display: none !important;
}

/* Dense but generous square sleeve wall: runtime owns artwork and metrics;
   these tracks/gaps express the approved 8×4 desktop / 4×4 mobile rhythm. */
body.tvc-editorial-spread.home-approved-direction[data-tvc-canonical-page="/"]
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) #home-mosaic {
  grid-template-columns: repeat(var(--home-cols, 8), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--home-rows, 4), var(--home-tile-size, auto)) !important;
  gap: 16px !important;
}

body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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 {
  grid-template-columns: repeat(var(--home-cols, 8), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--home-rows, 4), var(--home-tile-size, auto)) !important;
  gap: 16px !important;
}

@media (max-width: 900px) {
  body.tvc-editorial-spread.home-approved-direction[data-tvc-canonical-page="/"]
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) #home-mosaic {
    grid-template-columns: repeat(var(--home-cols, 4), minmax(0, 1fr)) !important;
    grid-template-rows: repeat(var(--home-rows, 4), var(--home-tile-size, auto)) !important;
    gap: 12px !important;
  }

  body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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 {
    grid-template-columns: repeat(var(--home-cols, 4), minmax(0, 1fr)) !important;
    grid-template-rows: repeat(var(--home-rows, 4), var(--home-tile-size, auto)) !important;
    gap: 12px !important;
  }
}

/* A single quiet sleeve shadow across the mosaic; geometry and transforms
   remain owned by the existing grid and playback styles. */
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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 .home-tile {
  box-shadow: 0 2px 8px rgba(43, 37, 27, .13), 0 1px 2px rgba(43, 37, 27, .08) !important;
}

/* Suggest stays centered on the mosaic midpoint; its larger hitbox overlaps
   the four sleeves by a few pixels without changing the mosaic geometry. */
body.tvc-editorial-spread.home-approved-direction[data-tvc-canonical-page="/"]
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) #home-mosaic-panel {
  position: relative !important;
}

body.tvc-editorial-spread.home-approved-direction[data-tvc-canonical-page="/"]
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) #home-suggest-trigger {
  position: absolute !important;
  z-index: 125 !important;
  inset: 50% auto auto 50% !important;
  display: inline-flex !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
}

body.tvc-editorial-spread.home-approved-direction[data-tvc-canonical-page="/"]
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) #home-suggest-trigger::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(62, 106, 54, .58) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  opacity: 0;
  transform: scale(.88);
  animation: tvc-suggest-halo 10s ease-out 10s infinite !important;
}

@keyframes tvc-suggest-halo {
  0% {
    opacity: .42;
    transform: scale(.88);
  }
  9% {
    opacity: 0;
    transform: scale(1.28);
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home.active #home-canvas-home #home-mosaic-panel #home-suggest-trigger .home-suggest-plus {
  border-color: #315b36 !important;
  width: 40px !important;
  height: 40px !important;
  background: #3e6a36 !important;
  color: #fff !important;
  font-size: 26px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

@media (min-width: 701px) {
  body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home.active #home-canvas-home #home-mosaic-panel #home-suggest-trigger .home-suggest-plus {
    width: 44px !important;
    height: 44px !important;
  }
}

body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home.active #home-canvas-home #home-mosaic-panel #home-suggest-trigger {
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home.active #home-canvas-home #home-mosaic-panel #home-suggest-trigger:hover .home-suggest-plus {
    box-shadow: 0 0 10px 3px rgba(103, 200, 74, .22) !important;
  }
}

body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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: absolute !important;
  inset: 50% auto auto 50% !important;
  z-index: 125 !important;
  transform: translate(-50%, -50%) !important;
}

/* All existing text faces use the same centered, legible treatment. The
   metadata face is enabled only in its own flip state; artwork remains exact. */
body.tvc-editorial-spread #page-home .home-sequence-copy,
body.tvc-editorial-spread #page-home .home-tile-text,
body.tvc-editorial-spread #page-home .tile-info,
body.tvc-editorial-spread #page-home .tile-name,
body.tvc-editorial-spread #page-home .tile-artist,
body.tvc-editorial-spread #page-home .home-tile-meta {
  box-sizing: border-box;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: clamp(6px, 1vw, 12px);
  overflow: hidden;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip;
}

body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"] #page-home.active #home-canvas-home :is(.home-sequence-copy, .home-tile-text) {
  display: flex;
  flex-direction: column;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
  padding: clamp(8px, 1.3vw, 16px);
  overflow-wrap: normal;
  word-break: keep-all;
}

body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"] #page-home.active #home-canvas-home .tvc-tile-copy-line {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  letter-spacing: -.025em;
}

body.tvc-editorial-spread #page-home :is(.home-tile-title, .home-tile-artist, .tile-name, .tile-artist) {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}

body.tvc-editorial-spread #page-home .home-tile-title {
  font-weight: 800 !important;
  line-height: 1.08 !important;
}

body.tvc-editorial-spread #page-home .home-tile-artist {
  font-weight: 600 !important;
  line-height: 1.12 !important;
}

/* Persistent dock: retain its existing sampled-color design while making the
   measured bottom edge and every control safe on short/narrow viewports. */
body.home-approved-direction.tvc-public-shell.home-listening.tvc-editorial-spread:not(.tvc-player-minimized):has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-player {
  box-sizing: border-box !important;
  position: fixed !important;
  inset: auto 0 var(--tvc-viewport-bottom, 0px) 0 !important;
  z-index: 220 !important;
  display: grid !important;
  min-height: calc(var(--tvc-player-height, 88px) + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: visible !important;
}

body.tvc-public-shell.tvc-editorial-spread.tvc-player-minimized #home-player {
  display: none !important;
}

body.tvc-editorial-spread #player-dismiss {
  position: absolute !important;
  z-index: 3 !important;
  top: 5px !important;
  right: 10px !important;
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer;
}

body.tvc-editorial-spread #home-player .player-right {
  padding-right: 34px;
}

body.tvc-editorial-spread #player-reopen {
  position: fixed !important;
  z-index: 220 !important;
  right: 14px !important;
  bottom: calc(var(--tvc-viewport-bottom, 0px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  display: none;
}

body.tvc-editorial-spread.tvc-player-minimized.home-listening #player-reopen {
  display: inline-flex !important;
}

body.tvc-editorial-spread #home-queue {
  z-index: 230 !important;
  bottom: calc(var(--tvc-dock-obstruction, var(--tvc-player-height, 88px)) + var(--tvc-viewport-bottom, 0px)) !important;
  pointer-events: auto !important;
}

body.tvc-editorial-spread :is(#home-suggest-modal, dialog, [role="dialog"]) {
  z-index: 400 !important;
}

@media (max-width: 700px) {
  body.tvc-editorial-spread :is(#main-nav, .tvc-shared-header) {
    height: var(--tvc-editorial-header-height) !important;
    min-height: var(--tvc-editorial-header-height) !important;
    padding-inline: 17px !important;
  }

  body.tvc-editorial-spread :is(#main-nav, .tvc-shared-header) .nav-logo {
    font-size: 12px !important;
    letter-spacing: .2em !important;
  }

  body.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #main-nav {
    box-sizing: border-box !important;
    height: var(--tvc-editorial-header-height) !important;
    min-height: var(--tvc-editorial-header-height) !important;
    max-height: var(--tvc-editorial-header-height) !important;
  }

  body.tvc-public-shell.tvc-editorial-spread.tvc-about-page #main-nav {
    box-sizing: border-box !important;
    height: var(--tvc-editorial-header-height) !important;
    min-height: var(--tvc-editorial-header-height) !important;
    max-height: var(--tvc-editorial-header-height) !important;
  }

  body.tvc-editorial-spread #home-player {
    min-height: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 8px 38px 8px 10px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 7px 6px !important;
  }

  body.tvc-editorial-spread #home-player .player-track {
    padding-right: 18px;
  }

  body.tvc-editorial-spread #home-player .player-right {
    padding-right: 0;
  }

  body.tvc-editorial-spread #player-dismiss {
    top: 3px !important;
    right: 6px !important;
  }

  body.tvc-editorial-spread #home-queue {
    max-width: calc(100vw - 20px);
  }
}

@media (max-width: 360px) {
  body.tvc-editorial-spread #home-player :is(#player-prev, #player-toggle, #player-next) {
    transform: translateX(-6px);
  }
  body.tvc-editorial-spread #home-player {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding-right: 35px !important;
    padding-left: 8px !important;
  }

  body.tvc-editorial-spread #home-player .player-center {
    min-width: 0;
    gap: 5px !important;
  }

  body.tvc-editorial-spread #home-player .player-controls {
    gap: 0 !important;
  }

  body.tvc-editorial-spread #home-player .player-btn {
    flex: 0 0 30px;
    width: 30px !important;
    height: 30px !important;
  }

  body.tvc-editorial-spread :is(#home-panel-position, #tvc-editorial-position) :is(button, a) {
    flex-basis: 46px !important;
    width: 46px !important;
  }
}

/* Restore the full supplied footer content with a comfortable, scrollable
   safe-area inset. The original social links and advisory artwork are reused. */
body.tvc-editorial-spread :is(#home-footer, #tvc-overlay-footer)[data-tvc-shared-footer] {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 62px !important;
  padding: 15px clamp(16px, 3.3vw, 42px) !important;
  padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
}

body.tvc-editorial-spread #home-footer #home-footer-copyright,
body.tvc-editorial-spread #home-footer .tvc-footer-legal {
  display: block !important;
}

body.tvc-public-shell.tvc-editorial-spread #home-footer[data-tvc-site-footer].tvc-shared-footer #home-footer-copyright,
body.tvc-public-shell.tvc-editorial-spread #home-footer[data-tvc-site-footer].tvc-shared-footer .tvc-footer-legal {
  display: block !important;
}

body.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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 #home-footer-copyright {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

body.home-approved-direction.home-listening.tvc-public-shell.tvc-editorial-spread[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 {
  display: grid !important;
}

body.tvc-editorial-spread #home-footer .tvc-footer-copy {
  white-space: normal !important;
}

@media (max-width: 700px) {
  body.tvc-editorial-spread :is(#home-footer, #tvc-overlay-footer)[data-tvc-shared-footer] {
    min-height: 88px !important;
    padding: 13px 14px !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.tvc-public-shell.tvc-editorial-spread #home-footer[data-tvc-site-footer].tvc-shared-footer {
    height: auto !important;
    min-height: 88px !important;
    padding: 13px 14px !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tvc-editorial-spread :is(#home-panel-position, #tvc-editorial-position),
  body.tvc-editorial-spread #home-player,
  body.tvc-editorial-spread #player-reopen {
    transition: none !important;
  }
}

/* The versioned Home layer uses additional page IDs. Match that scope only
   where needed instead of weakening its artwork/interaction rules globally. */
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(#page-home.active) #main-nav,
body.tvc-public-shell.tvc-editorial-spread.tvc-about-page #main-nav {
  height: var(--tvc-editorial-header-height) !important;
  min-height: var(--tvc-editorial-header-height) !important;
  max-height: var(--tvc-editorial-header-height) !important;
}
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(#page-home.active) #main-nav .nav-logo,
body.tvc-public-shell.tvc-editorial-spread.tvc-about-page #main-nav .nav-logo {
  font: 400 var(--tvc-editorial-wordmark-size)/1 "DM Sans", sans-serif !important;
  letter-spacing: .2em !important;
}
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"] {
  --home-frame-nav: var(--tvc-editorial-header-height) !important;
}
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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) {
  padding-bottom: var(--tvc-editorial-bottom-space) !important;
  z-index: auto !important;
}
body.tvc-editorial-spread.tvc-about-page {
  padding-bottom: var(--tvc-editorial-bottom-space);
}
body.tvc-public-shell.tvc-editorial-spread.tvc-about-page.tvc-retained-frame :is(#main-nav, #tvc-editorial-position) {
  display: none !important;
}
/* Standalone About uses the same idle brand banner as Home. The retained
   document hides its duplicate; the host keeps its current artwork colour. */
body.tvc-public-shell.tvc-editorial-spread.tvc-about-page #main-nav {
  background: var(--tvc-editorial-idle-banner) !important;
  color: var(--tvc-editorial-idle-banner-ink) !important;
}
body.tvc-public-shell.tvc-editorial-spread.tvc-about-page #main-nav :is(.nav-logo,.nav-menu-btn) {
  color: var(--tvc-editorial-idle-banner-ink) !important;
}
body.tvc-public-shell.tvc-editorial-spread.tvc-about-page #main-nav .nav-menu-btn span {
  background: currentColor !important;
}
/* Retained About is a full-screen document plane at z-index 150. Keep the one
   canonical host header above it, while leaving the player and menus on top. */
html[data-tvc-editorial-active-page="/about"] body.tvc-public-shell.tvc-editorial-spread #main-nav {
  z-index: 190 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home.active #home-canvas-home #home-mosaic-panel #home-suggest-trigger {
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
}
/* Keep the visible circle concentric with its centered 48px hitbox. */
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home.active #home-canvas-home #home-mosaic-panel #home-suggest-trigger .home-suggest-plus {
  translate: 0 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.tvc-editorial-spread.home-approved-direction[data-tvc-canonical-page="/"]
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas) #home-suggest-trigger::after {
    animation: none !important;
  }
}
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home.active #home-canvas-home .home-playlist-label {
  display: block;
  text-align: right;
}
body.home-featured-direction.home-approved-direction.tvc-public-shell.home-listening.tvc-editorial-spread:not(.tvc-player-minimized):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: fixed !important;
  inset: auto 0 var(--tvc-viewport-bottom, 0px) 0 !important;
  z-index: 220 !important;
  margin: 0 !important;
  min-height: calc(var(--tvc-player-height, 88px) + env(safe-area-inset-bottom, 0px)) !important;
  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}
body.home-featured-direction.home-approved-direction.tvc-public-shell.home-listening.tvc-editorial-spread.tvc-player-minimized: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: none !important;
}
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(#page-home.active:not(.is-about-canvas):not(.is-curator-canvas)) #page-home.active #home-footer[data-tvc-site-footer].tvc-shared-footer {
  height: auto !important;
  min-height: 82px !important;
  padding: 15px 17px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
}
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(#page-home.active) #page-home.active #home-footer .tvc-footer-copy {
  font-size: 8px !important;
}
body.tvc-editorial-spread #player-reopen {
  gap: 6px;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--tvc-public-border, #c8c2ba);
  border-radius: 0;
  background: var(--tvc-public-bg, #f8f7f3);
  color: var(--tvc-public-text, #26231f);
  font: 500 11px/1.2 var(--tvc-font-sans, sans-serif);
  cursor: pointer;
}

/* Scale the mobile lockup as one unit inside its original layout footprint.
   Fonts, script proportions and the positions of all later rows stay intact. */
@media (max-width: 600px) {
  body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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 {
    transform: scale(.64) !important;
    transform-origin: left center !important;
  }
}

/*
 * Home hero entrance. Readiness is owned by the page runtime; this layer only
 * stages the two existing controls and never reserves/removes layout space.
 */
html[data-tvc-hero-entrance="pending"] body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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 :is(#home-play, #home-start-copy) {
  visibility: hidden !important;
}

html[data-tvc-hero-entrance="entering"] body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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-play {
  visibility: visible !important;
  animation: tvc-home-play-arrive 260ms ease-out both !important;
}

html[data-tvc-hero-entrance="entering"] body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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-start-copy {
  visibility: visible !important;
  animation: tvc-home-copy-arrive 720ms cubic-bezier(.4, 0, .6, 1) 60ms both !important;
}

html:is([data-tvc-hero-entrance="ready"], [data-tvc-hero-entrance="failed"]) body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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 :is(#home-play, #home-start-copy) {
  visibility: visible !important;
  animation: none !important;
}

/* An unavailable asset must not pop into an already revealed title later.
   Retain its box and accessible label rather than changing fonts or layout. */
html[data-tvc-hero-entrance="failed"] body.tvc-editorial-spread[data-tvc-canonical-page="/"] #home-featured-label {
  visibility: hidden !important;
}

/* A small optical correction to the outlined circle, without touching its
   flex allocation. The inner width also gives the title a fraction more air. */
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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-play {
  transform: scale(.94) !important;
}

body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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 {
  letter-spacing: -.052em !important;
}

@media (max-width: 600px) {
  body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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 {
    letter-spacing: -.056em !important;
  }
}

@keyframes tvc-home-play-arrive {
  from { filter: opacity(0); }
  to { filter: opacity(1); }
}

@keyframes tvc-home-copy-arrive {
  from { filter: opacity(0); translate: -7px 0; }
  to { filter: opacity(1); translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-tvc-hero-entrance="entering"] body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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 :is(#home-play, #home-start-copy) {
    visibility: visible !important;
    animation: none !important;
  }
}

/* Shift only the Home indicator; the retained About marker stays native. */
html:not([data-tvc-editorial-active-page='/about']) body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-panel-position {
  right: calc(var(--tvc-position-hero-right, clamp(17px,3.3vw,42px)) + 20px) !important;
}

/* Only the copy moves inside its existing track. Dock measurement bounds this
   small offset against both divider rules and the fixed page marker. */
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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-bottom-nav > :is(
  .home-approved-descriptor,
  #home-about-open
) {
  translate: 0 var(--tvc-lower-copy-offset, 0px) !important;
}

/*
 * The retained Home row now contains only the About action. Use the existing
 * row as a single flex track so the action sits on the right without reserving
 * the removed editorial-copy slot; its border, padding and height stay owned
 * by the original composition.
 */
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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-bottom-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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-bottom-nav > #home-about-open {
  flex: 0 0 auto !important;
  margin-inline-start: auto !important;
}

/* Keep the real dock in its original fixed position in both states. Minimizing
   slides the intact grid off-canvas; it never removes or reflows the player. */
body.home-featured-direction.home-approved-direction.tvc-public-shell.home-listening.tvc-editorial-spread.tvc-player-minimized: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 {
  box-sizing: border-box !important;
  position: fixed !important;
  inset: auto 0 var(--tvc-viewport-bottom, 0px) 0 !important;
  z-index: 220 !important;
  display: grid !important;
  margin: 0 !important;
  min-height: calc(var(--tvc-player-height, 88px) + env(safe-area-inset-bottom, 0px)) !important;
  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: visible !important;
  transform: translateX(-110%) !important;
  transition: transform var(--tvc-dock-motion, 300ms) cubic-bezier(.22, .68, 0, 1) !important;
  pointer-events: none !important;
}

body.home-featured-direction.home-approved-direction.tvc-public-shell.home-listening.tvc-editorial-spread:not(.tvc-player-minimized):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 {
  transform: translateX(0) !important;
  transition: transform var(--tvc-dock-motion, 300ms) cubic-bezier(.22, .68, 0, 1) !important;
  pointer-events: auto !important;
}

/* A narrow, unobtrusive edge tab reveals only a slice of its concentric disc.
   The button itself remains a compact, accessible hit target in the left
   margin, clear of the centered page-position indicator. */
body.tvc-public-shell.tvc-editorial-spread.tvc-player-minimized.home-listening #player-reopen {
  box-sizing: border-box !important;
  position: fixed !important;
  z-index: 220 !important;
  inset: auto auto calc(
    var(--tvc-viewport-bottom, 0px) + env(safe-area-inset-bottom, 0px) + 24px
  ) 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--tvc-public-text, #34251e) !important;
  cursor: pointer;
}

body.tvc-public-shell.tvc-editorial-spread.tvc-player-minimized.home-listening #player-reopen .player-reopen-disc {
  position: absolute;
  right: 2px;
  left: auto;
  top: 50%;
  display: block;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
  border-radius: 50%;
  background-color: var(--tvc-public-bg, #f8f7f3);
  background-image: radial-gradient(
    circle,
    transparent 0 2px,
    color-mix(in srgb, currentColor 68%, transparent) 2.5px 3px,
    transparent 3.5px 6px,
    color-mix(in srgb, currentColor 55%, transparent) 6.5px 7px,
    transparent 7.5px 10px,
    color-mix(in srgb, currentColor 44%, transparent) 10.5px 11px,
    transparent 11.5px
  );
  transform-origin: right center;
  transform: translateY(-50%) scale(1.62);
  transition: transform 180ms ease, opacity 180ms ease;
}

body.tvc-public-shell.tvc-editorial-spread.tvc-player-minimized.home-listening #player-reopen:hover .player-reopen-disc {
  transform: translate(2px, -50%) scale(1.62);
}

body.tvc-public-shell.tvc-editorial-spread.tvc-player-minimized.home-listening #player-reopen:focus-visible {
  outline: 2px solid #bb352b !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  body.tvc-editorial-spread {
    --tvc-dock-motion: 0ms;
  }
  body.tvc-editorial-spread #home-player,
  body.tvc-editorial-spread #player-reopen .player-reopen-disc {
    transition: none !important;
  }
}

/* Final editorial refinements: keep the metadata row's original rule footprint
   while removing only the rule immediately beneath it. */
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[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 {
  border-top-color: transparent !important;
}

/* Center the unchanged marker opposite the Featured hero lockup, outside the
   header and artwork. Its pseudo-element keeps an invisible click target. */
body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-panel-position,
body.tvc-public-shell.tvc-editorial-spread.tvc-about-page #tvc-editorial-position {
  position: absolute !important;
  inset: var(--tvc-position-hero-top, calc(var(--tvc-editorial-header-height) + 56px))
    var(--tvc-position-hero-right, clamp(17px, 3.3vw, 42px)) auto auto !important;
  width: 52px !important;
  height: 2px !important;
  justify-content: flex-end !important;
  transform: translateY(-50%) !important;
}

body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-panel-position :is(button, a),
body.tvc-public-shell.tvc-editorial-spread.tvc-about-page #tvc-editorial-position :is(button, a) {
  flex-basis: 26px !important;
  width: 26px !important;
  height: 2px !important;
}

@media (max-width: 435px) {
  body.home-featured-direction.home-approved-direction.tvc-public-shell.tvc-editorial-spread[data-tvc-canonical-page="/"]:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-panel-position :is(button, a),
  body.tvc-public-shell.tvc-editorial-spread.tvc-about-page #tvc-editorial-position :is(button, a) {
    flex-basis: 26px !important;
    width: 26px !important;
  }
}

/* The existing edge decoration reads as a small black record; geometry and
   all button behavior remain owned by the existing player controls. */
body.tvc-public-shell.tvc-editorial-spread.tvc-player-minimized.home-listening #player-reopen .player-reopen-disc {
  border-color: #292725;
  background-color: #171716;
  background-image:
    radial-gradient(circle, #171716 0 1.4px, #090909 1.5px 2.1px, transparent 2.2px),
    radial-gradient(circle, #bd8060 0 4px, #a9694c 4.2px 5.3px, transparent 5.5px),
    radial-gradient(circle,
      transparent 0 6px,
      rgba(222, 215, 199, .17) 6.2px 6.45px,
      transparent 6.7px 8px,
      rgba(222, 215, 199, .12) 8.2px 8.45px,
      transparent 8.7px 10px,
      rgba(222, 215, 199, .1) 10.2px 10.45px,
      transparent 10.7px 11.8px,
      rgba(222, 215, 199, .08) 12px 12.25px,
      transparent 12.5px);
}

/* Keep the original 16×44 edge-tab hit target and its visible right edge at
   x=14px. Scale the true circular record outward from that edge, not into an
   ellipse; hover retains its original 2px reveal. */
@media (min-width: 701px) {
  body.tvc-public-shell.tvc-editorial-spread.tvc-player-minimized.home-listening #player-reopen .player-reopen-disc {
    transform: translateY(-50%) scale(2.77);
  }

  body.tvc-public-shell.tvc-editorial-spread.tvc-player-minimized.home-listening #player-reopen:hover .player-reopen-disc {
    transform: translate(2px, -50%) scale(2.77);
  }
}