/* TVC approved homepage — a quiet, compact sleeve gallery. */
:root {
  --tvc-ink: #34251e;
  --tvc-muted: #75665b;
  --tvc-rule: rgba(52, 37, 30, .2);
  --tvc-nav-height: 43px;
  --tvc-footer-height: 66px;
  --tvc-player-height: 88px;
}

body.home-gallery-theme,
body.home-approved-direction {
  background: var(--tvc-cream) !important;
  color: var(--tvc-ink);
}

/* On first listen, both surfaces share the exact sampled artwork color. */
body.home-approved-direction.home-listening #home-player {
  background: var(--home-active-color, var(--tvc-cream)) !important;
  color: var(--home-active-ink, var(--tvc-ink)) !important;
}
body.home-approved-direction.home-listening #home-player,
body.home-approved-direction.home-listening #home-player .player-title,
body.home-approved-direction.home-listening #home-player .player-artist,
body.home-approved-direction.home-listening #home-player .player-time,
body.home-approved-direction.home-listening #home-player .player-btn {
  color: var(--home-active-ink, var(--tvc-ink)) !important;
}

#page-home {
  --home-field: var(--tvc-cream) !important;
  --home-field-gradient: none !important;
  --home-ink: var(--tvc-ink) !important;
  position: relative !important;
  min-height: 100dvh !important;
  height: auto !important;
  padding: var(--tvc-nav-height) 0 0 !important;
  background: var(--tvc-cream) !important;
  color: var(--tvc-ink) !important;
  overflow: clip !important;
  perspective: none !important;
  filter: none !important;
}

/* Idle Home should size to its artwork and footer, not the viewport. */
body.home-approved-direction:not(.home-listening) #page-home:not(.is-about-canvas):not(.is-curator-canvas) {
  height: auto !important;
  min-height: 0 !important;
}
body.home-approved-direction:not(.home-listening) #page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-viewport,
body.home-approved-direction:not(.home-listening) #page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-track,
body.home-approved-direction:not(.home-listening) #page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-home {
  height: auto !important;
  min-height: 0 !important;
}
body.home-approved-direction #home-caption-wrap { display: none !important; }

/* Keep the connected About / Curator canvases and their transitions intact. */
#page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-about,
#page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-curator {
  display: none !important;
}
#page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-viewport {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}
#page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-track {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  transform: none !important;
}
#page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-home {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: max(8px, calc((100dvh - var(--tvc-nav-height) - var(--home-gallery-measure) - 180px) / 2)) clamp(16px, 4vw, 56px) 0 !important;
  background: var(--tvc-cream) !important;
}
body.home-approved-direction:not(.home-listening) #page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-home {
  padding-top: 8px !important;
}

/* One shared measure keeps the play mark, first cover, and caption in register. */
#page-home:not(.is-about-canvas):not(.is-curator-canvas) {
  --home-gallery-measure: min(100%, var(--home-gallery-width, 600px), max(280px, calc(100dvh - 245px)));
}

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

/* Four calm rows of covers; the grid slots remain fixed while the active sleeve lifts. */
#page-home #home-mosaic {
  --sequence-gap: clamp(6px, .85vw, 9px);
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, auto) !important;
  width: var(--home-gallery-measure, min(100%, var(--home-gallery-width, 600px), max(280px, calc(100dvh - 355px)))) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  column-gap: var(--sequence-gap) !important;
  row-gap: var(--sequence-gap) !important;
  padding: 0 !important;
  margin: 0 auto !important;
  overflow: visible !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
#page-home .home-tile {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background-color: #8a8175 !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}
#page-home {
  --home-playing-scale: 1.7;
}
#page-home .home-tile {
  /* The sleeve itself stays square and unrotated; only the active tile gains depth. */
  z-index: 1 !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    transform .42s cubic-bezier(.2, .72, .2, 1),
    box-shadow .42s cubic-bezier(.2, .72, .2, 1) !important;
}
#page-home .home-tile::before,
#page-home .home-tile::after {
  display: none !important;
}
#page-home .home-tile img,
#page-home .home-tile video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  transition: none !important;
}
#page-home .home-tile.is-active,
#page-home[data-home-layout="scatter"] .home-tile,
#page-home[data-home-layout="scatter"] .home-tile.scatter-floating:not(.is-active) {
  transform: none !important;
  animation: none !important;
  box-shadow: none !important;
  z-index: auto !important;
}

/* A single playing sleeve lifts above its unchanged grid slot, never its neighbors. */
#page-home .home-tile.is-playing-tile {
  z-index: 100 !important;
  overflow: visible !important;
  transform: translate(var(--active-x, 0px), var(--active-y, 0px)) scale(var(--home-playing-scale, 1.7)) !important;
  transform-origin: center center !important;
  box-shadow:
    0 2px 5px rgba(49, 37, 27, .14),
    0 12px 26px rgba(49, 37, 27, .18),
    0 28px 48px rgba(49, 37, 27, .12),
    inset 0 0 0 1px rgba(255, 250, 238, .42) !important;
  transition:
    transform .42s cubic-bezier(.2, .72, .2, 1),
    box-shadow .42s cubic-bezier(.2, .72, .2, 1) !important;
}
#page-home[data-home-layout="scatter"] .home-tile.is-playing-tile {
  z-index: 100 !important;
}
#page-home .home-tile.is-settling-tile {
  z-index: 2 !important;
  transform: none !important;
  box-shadow: none !important;
  transition:
    transform .42s cubic-bezier(.2, .72, .2, 1),
    box-shadow .42s cubic-bezier(.2, .72, .2, 1) !important;
}
#page-home[data-home-layout="scatter"] .home-tile.is-settling-tile {
  z-index: 2 !important;
}
#page-home .home-tile.is-playing-tile img,
#page-home .home-tile.is-playing-tile video {
  opacity: 1 !important;
}
#page-home .home-tile.is-playing-tile .home-sequence-copy {
  opacity: 0 !important;
}
#page-home .home-tile-meta { display: none !important; }
.home-sequence-edge { display: none !important; }

/* The artwork and sampled-tone copy are opposing sleeve faces. Keep the tile
   itself in its existing grid slot; only its two direct-child faces rotate. */
#page-home .home-tile {
  perspective: 900px;
}
#page-home .home-tile > img,
#page-home .home-tile > video,
#page-home .home-tile > .home-sequence-copy {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}
#page-home .home-tile > img,
#page-home .home-tile > video {
  transform: rotateY(0deg) !important;
  transition: transform 700ms cubic-bezier(.22, .62, .24, 1) !important;
}
.home-sequence-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 12px;
  background: var(--sequence-tone, #77736f);
  color: var(--sequence-ink, #f6f0e6);
  font: 800 clamp(11px, 1.3vw, 18px)/1.04 var(--sans);
  letter-spacing: -.035em;
  text-align: center;
  text-transform: uppercase;
  opacity: 1;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 700ms cubic-bezier(.22, .62, .24, 1) !important;
  pointer-events: none;
}
#page-home .home-tile.is-sequence-copy > img,
#page-home .home-tile.is-sequence-copy > video {
  transform: rotateY(-180deg) !important;
}
#page-home .home-tile.is-sequence-copy > .home-sequence-copy {
  transform: rotateY(0deg);
}
#page-home .home-tile.is-playing-tile > img,
#page-home .home-tile.is-playing-tile > video {
  transform: rotateY(0deg) !important;
  transition: none !important;
}
#page-home .home-tile.is-playing-tile > .home-sequence-copy {
  opacity: 0 !important;
  transform: rotateY(180deg) !important;
}

.home-canvas-bottom-nav {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 20px;
  width: var(--home-gallery-measure, min(100%, var(--home-gallery-width, 600px), max(280px, calc(100dvh - 355px)))) !important;
  margin: 15px auto 0 !important;
  padding: 0 !important;
  color: var(--tvc-ink) !important;
}
.home-approved-descriptor {
  min-width: 0;
  white-space: nowrap;
  font: 400 clamp(10px, 1.05vw, 11px)/1.25 var(--sans);
  letter-spacing: .1em;
}
#page-home #home-about-open {
  justify-self: end;
  visibility: visible !important;
}
.home-canvas-nav-control {
  display: inline-flex !important;
  align-items: center;
  padding: 9px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--tvc-ink) !important;
  font: 400 10px/1 var(--sans) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  white-space: nowrap;
}
.home-canvas-nav-control:hover { opacity: .62; }
.home-canvas-nav-control:focus-visible,
#home-play:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

#page-home #home-status:not(:empty) {
  display: block !important;
  position: static !important;
  width: min(100%, var(--home-gallery-width, 600px));
  margin: 9px auto 0;
  color: var(--tvc-muted);
  font: 500 11px/1.45 var(--sans);
  text-align: left;
}
#page-home #home-status a { color: inherit; text-decoration: underline; }

/* The play affordance sits in normal flow immediately above the first sleeve. */
#page-home #home-start-controls {
  position: relative !important;
  inset: auto !important;
  z-index: 12 !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: var(--home-gallery-measure, min(100%, var(--home-gallery-width, 600px), max(280px, calc(100dvh - 355px)))) !important;
  height: 44px;
  margin: 0 auto 10px !important;
  transform: none !important;
}
body.home-approved-direction:not(.home-listening) #page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-start-controls {
  justify-content: center !important;
}
#page-home #home-start-controls #home-play {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  place-items: center;
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  border: 1px solid var(--tvc-ink) !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--tvc-ink) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  cursor: pointer;
}
#page-home #home-start-controls #home-play svg {
  width: 58%;
  height: 58%;
  display: block;
  overflow: visible;
}
#page-home #home-start-controls #home-play .home-play-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#page-home #home-start-controls #home-play:hover { background: rgba(52,37,30,.06) !important; }
#page-home #home-start-controls #home-play .home-control-label { display: none !important; }
#home-play { display: none !important; }
#page-home #home-start-controls #home-play { display: grid !important; }

/* Compact two-line PLAY / NOW PLAYING copy sits beside the upper-left control. */
#home-start-copy {
  display: grid;
  gap: 4px;
  margin-left: 14px;
  color: var(--tvc-ink);
  text-align: left;
  text-transform: uppercase;
  min-width: 0;
}
body.home-approved-direction:not(.home-listening) #page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-start-copy {
  display: none !important;
}
#home-start-copy > :first-child {
  font: 600 11px/1 var(--sans);
  letter-spacing: .17em;
}
#home-start-copy > :last-child {
  font: 400 8px/1 var(--sans);
  letter-spacing: .22em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Never show the listening bar until audio playback has actually begun.
   Keeping this state class through pauses preserves the player's placement. */
#home-player {
  display: none !important;
  position: fixed !important;
  inset: auto 0 0 0 !important;
  z-index: 200 !important;
  width: 100% !important;
  min-height: var(--tvc-player-height) !important;
  padding: 12px clamp(16px, 4vw, 54px) !important;
  margin: 0 !important;
  border: 0 !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-approved-direction.home-listening #home-player { display: grid !important; }
#home-player .player-track { min-width: 0; }
#home-player .player-title,
#home-player .player-artist,
#home-player .player-time,
#home-player .player-btn { color: var(--home-active-ink, var(--tvc-ink)) !important; }
#home-player .player-btn svg { fill: currentColor !important; }
#home-player input[type="range"] { accent-color: var(--home-active-ink, var(--tvc-ink)) !important; }
#home-player .player-btn.primary { border-color: currentColor; }
#home-queue {
  background: color-mix(in srgb, var(--home-active-color, var(--tvc-ink)) 88%, #000) !important;
  color: var(--home-active-ink, var(--tvc-paper)) !important;
}

/* The footer follows the hero in normal flow; listening gives its strip to the player. */
#home-footer-copy {
  color: var(--tvc-ink) !important;
}
#home-footer-copy {
  min-width: 0;
  font-size: 9px !important;
  letter-spacing: .09em !important;
  opacity: .72;
}
#home-footer-copyright {
  display: none !important;
  min-width: 0;
  font: 400 8px/1.25 var(--sans);
  letter-spacing: .08em;
  opacity: .52;
  white-space: nowrap;
}
body.home-approved-direction:not(.home-listening) #page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-footer-copy {
  grid-column: 1;
  grid-row: 1;
}
body.home-approved-direction:not(.home-listening) #page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-footer-copyright {
  display: block !important;
  grid-column: 1;
  grid-row: 2;
  color: var(--tvc-ink);
}

/* Leave About canvas styling and navigation behavior connected and untouched. */
#page-home.is-about-canvas,
#page-home.is-curator-canvas { padding-top: var(--tvc-nav-height) !important; }
#page-home.is-about-canvas #home-canvas-viewport,
#page-home.is-curator-canvas #home-canvas-viewport {
  min-height: calc(100dvh - var(--tvc-nav-height) - var(--tvc-footer-height));
  padding-bottom: var(--tvc-footer-height);
}

@media (max-width: 700px) {
  :root {
    --tvc-nav-height: 42px;
    --tvc-footer-height: 66px;
    --tvc-player-height: 82px;
  }
  #page-home:not(.is-about-canvas):not(.is-curator-canvas) {
    --home-gallery-measure: min(100%, max(280px, calc(100dvh - 245px)));
  }
  #page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-home {
    padding: max(8px, calc((100dvh - var(--tvc-nav-height) - var(--home-gallery-measure) - 180px) / 2)) 16px 0 !important;
  }
  body.home-approved-direction:not(.home-listening) #page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-canvas-home {
    padding-top: 8px !important;
  }
  #page-home #home-mosaic {
    --sequence-gap: clamp(5px, 1.6vw, 8px);
    width: var(--home-gallery-measure) !important;
  }
  .home-canvas-bottom-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    gap: 8px;
    margin-top: 13px !important;
    width: var(--home-gallery-measure, min(100%, max(280px, calc(100dvh - 355px)))) !important;
  }
  .home-approved-descriptor {
    font-size: clamp(8.5px, 2.4vw, 10px);
    letter-spacing: .045em;
  }
  #page-home #home-about-open { justify-self: end; }
  #page-home #home-about-open { font-size: 9px !important; }
  #page-home #home-start-controls {
    width: var(--home-gallery-measure, min(100%, max(280px, calc(100dvh - 355px)))) !important;
  }
  #home-player {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "track right" "center center";
    gap: 7px 8px !important;
    padding: 8px 13px !important;
  }
  #home-player .player-track { grid-area: track; }
  #home-player .player-center {
    grid-area: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
  }
  #home-player .player-right { display: none !important; }
  #home-player .player-record { width: 38px; height: 38px; }
  #home-player #player-art { width: 19px; height: 19px; }
  #home-player .player-title { font-size: 10px; }
  #home-player .player-artist { font-size: 9px; }
  #home-player .player-btn { width: 32px; height: 32px; }
  #home-player .player-controls { gap: 2px; }
  #home-footer-copy { font-size: 8px !important; letter-spacing: .065em !important; }
  body.home-approved-direction:not(.home-listening) #page-home:not(.is-about-canvas):not(.is-curator-canvas) #home-footer-copyright {
    grid-column: 1;
    grid-row: 2;
    margin-left: 0;
    font-size: 7px;
    letter-spacing: .055em;
  }
}

@media (max-width: 360px) {
  .home-approved-descriptor { font-size: 8.5px; letter-spacing: .025em; }
  .home-canvas-bottom-nav { gap: 2px; }
  #home-player { padding-right: 9px !important; padding-left: 9px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .home-sequence-copy,
  #page-home .home-tile,
  #page-home .home-tile.is-playing-tile,
  #page-home .home-tile.is-settling-tile,
  #home-player,
  #page-home #home-start-controls #home-play { transition: none !important; }
}

/* Mobile idle Home is a single measured viewport: nav / sleeve field / footer.
   Keep these overrides isolated from playback and the connected About canvases. */
@media (max-width: 700px) {
  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    overflow-y: visible;
  }

  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home {
    --tvc-idle-viewport: 100svh;
    --tvc-idle-viewport: 100dvh;
    --tvc-idle-nav: calc(var(--tvc-idle-viewport) * .102);
    --tvc-idle-footer: calc(var(--tvc-idle-viewport) * .098);
    --tvc-idle-hero: max(0px, calc(var(--tvc-idle-viewport) - var(--tvc-idle-nav) - var(--tvc-idle-footer)));
    --tvc-idle-side: 17px;
    --tvc-idle-grid-gap: clamp(3px, calc(var(--tvc-idle-viewport) * .009), 7px);
    --tvc-idle-outer-gap: clamp(10px, calc(var(--tvc-idle-viewport) * .038), 28px);
    --tvc-idle-play-gap: clamp(8px, calc(var(--tvc-idle-viewport) * .031), 24px);
    --tvc-idle-caption-gap: clamp(6px, calc(var(--tvc-idle-viewport) * .024), 18px);
    --home-gallery-measure: min(
      calc(100vw - var(--tvc-idle-side) - var(--tvc-idle-side)),
      max(1px, calc(
        var(--tvc-idle-hero) - 44px - 28px - var(--tvc-idle-outer-gap) * 2 -
        var(--tvc-idle-play-gap) - var(--tvc-idle-caption-gap)
      ))
    ) !important;
    /* Width-limited screens distribute spare hero height around its content,
       weighted toward the play area; nothing is left underneath the footer. */
    --tvc-idle-spare: max(0px, calc(
      var(--tvc-idle-hero) - var(--home-gallery-measure) - 44px - 28px -
      var(--tvc-idle-outer-gap) * 2 - var(--tvc-idle-play-gap) - var(--tvc-idle-caption-gap)
    ));
    --tvc-idle-top: calc(var(--tvc-idle-outer-gap) + var(--tvc-idle-spare) * .35);
    --tvc-idle-middle: calc(var(--tvc-idle-play-gap) + var(--tvc-idle-spare) * .35);
    --tvc-idle-caption: calc(var(--tvc-idle-caption-gap) + var(--tvc-idle-spare) * .1);
    --tvc-idle-bottom: calc(var(--tvc-idle-outer-gap) + var(--tvc-idle-spare) * .2);
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: var(--tvc-idle-hero) var(--tvc-idle-footer) !important;
    width: 100% !important;
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: var(--tvc-idle-nav) 0 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-canvas-viewport {
    flex: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-canvas-track {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-canvas-home {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: 44px var(--tvc-idle-middle) var(--home-gallery-measure) var(--tvc-idle-caption) 28px !important;
    flex: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: var(--tvc-idle-top) var(--tvc-idle-side) var(--tvc-idle-bottom) !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-start-controls {
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 44px !important;
    grid-row: 1;
    flex: 0 0 44px !important;
    margin: 0 !important;
  }

  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-start-controls #home-play {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-mosaic {
    --sequence-gap: var(--tvc-idle-grid-gap) !important;
    grid-row: 3;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: var(--home-gallery-measure) !important;
    height: var(--home-gallery-measure) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    margin: 0 !important;
  }
  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) .home-sequence-copy {
    /* Text overlays follow the smaller sleeves without changing flip behavior. */
    --tvc-idle-tile: calc((var(--home-gallery-measure) - var(--tvc-idle-grid-gap) * 3) / 4);
    padding: clamp(2px, calc(var(--tvc-idle-tile) * .08), 10px);
    font-size: clamp(7px, calc(var(--tvc-idle-tile) * .12), 18px);
    font-weight: 800 !important;
  }

  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) .home-canvas-bottom-nav {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    grid-row: 5;
    width: 100% !important;
    height: 28px !important;
    margin: 0 !important;
  }
  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-status:not(:empty) {
    position: absolute !important;
    left: var(--tvc-idle-side);
    right: var(--tvc-idle-side);
    bottom: 4px;
    width: auto !important;
    margin: 0;
    font-size: 10px;
    line-height: 12px;
  }
}

/* Listening Home gets its own measured viewport: active-color header, sleeve
   field, then the player in the final zone. The idle composition above remains
   deliberately untouched. */
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) {
  --tvc-listen-viewport: 100vh;
  --tvc-listen-nav: var(--tvc-nav-height);
  --tvc-listen-player: var(--tvc-player-height);
  --tvc-listen-hero: calc(var(--tvc-listen-viewport) - var(--tvc-listen-nav) - var(--tvc-listen-player));
  height: var(--tvc-listen-viewport);
  min-height: 0;
}
@supports (height: 100svh) {
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) {
    --tvc-listen-viewport: 100svh;
  }
}
@supports (height: 100dvh) {
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) {
    --tvc-listen-viewport: 100dvh;
  }
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home {
  --home-playing-scale: 1.4 !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: var(--tvc-listen-viewport) !important;
  min-height: 0 !important;
  padding: var(--tvc-listen-nav) 0 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-canvas-viewport {
  box-sizing: border-box !important;
  flex: none !important;
  width: 100% !important;
  height: var(--tvc-listen-hero) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-canvas-track {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home #home-canvas-home {
  --tvc-listen-inner-y: 8px;
  --tvc-listen-lift-gap: 46px;
  --home-gallery-measure: min(
    93vw,
    770.8px,
    max(1px, calc((var(--tvc-listen-viewport) - 245px) * .94)),
    max(1px, calc(
      var(--tvc-listen-hero) - var(--tvc-listen-inner-y) - var(--tvc-listen-inner-y) -
      38px - var(--tvc-listen-lift-gap) - var(--tvc-listen-lift-gap) - 20px
    ))
  ) !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows:
    minmax(0, 1fr) 38px var(--tvc-listen-lift-gap)
    var(--home-gallery-measure) var(--tvc-listen-lift-gap) 20px
    minmax(0, 1fr) !important;
  flex: none !important;
  align-items: stretch !important;
  /* Center the shared grid track; raised sleeves only transform their own slot. */
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: var(--tvc-listen-inner-y) clamp(20px, 4vw, 56px) !important;
  margin: 0 !important;
  overflow: visible !important;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-start-controls {
  box-sizing: border-box !important;
  grid-row: 2;
  justify-content: flex-start !important;
  width: var(--home-gallery-measure) !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  margin: 0 auto !important;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-start-controls #home-play {
  box-sizing: border-box !important;
  flex-basis: 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-start-copy {
  display: grid !important;
  gap: 4px;
  margin-left: 11px;
  max-width: calc(var(--home-gallery-measure) - 55px);
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-start-copy > :first-child {
  font-size: 9px;
  letter-spacing: .16em;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-start-copy > :last-child {
  max-width: 100%;
  font-size: 8px;
  letter-spacing: .09em;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-mosaic {
  --sequence-gap: clamp(5px, .85vw, 9px);
  grid-row: 4;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: var(--home-gallery-measure) !important;
  height: var(--home-gallery-measure) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 auto !important;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) .home-canvas-bottom-nav {
  box-sizing: border-box !important;
  grid-row: 6;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  width: var(--home-gallery-measure) !important;
  height: 20px !important;
  margin: 0 auto !important;
  white-space: nowrap;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) .home-approved-descriptor {
  overflow: visible;
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: .075em;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-about-open {
  white-space: nowrap;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #page-home .home-tile.is-playing-tile {
  transform: translate(var(--active-x, 0px), var(--active-y, 0px)) scale(var(--home-playing-scale, 1.4)) !important;
  box-shadow:
    0 3px 8px rgba(49, 37, 27, .13),
    0 14px 28px rgba(49, 37, 27, .15),
    inset 0 0 0 1px rgba(255, 250, 238, .36) !important;
}
body.home-approved-direction.home-listening:has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-player {
  box-sizing: border-box !important;
  bottom: 0 !important;
  height: var(--tvc-listen-player) !important;
  min-height: var(--tvc-listen-player) !important;
  border-top: 1px solid color-mix(in srgb, var(--home-active-ink, var(--tvc-ink)) 22%, transparent) !important;
}

@media (max-width: 700px) {
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) {
    --tvc-listen-nav: calc(var(--tvc-listen-viewport) * .102);
    --tvc-listen-player: calc(82px + env(safe-area-inset-bottom, 0px));
  }
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home #home-canvas-home {
    --tvc-listen-side: 17px;
    --tvc-listen-inner-y: 14px;
    --tvc-listen-grid-gap: clamp(3px, calc(var(--tvc-listen-viewport) * .009), 7px);
    --tvc-listen-lift-gap: clamp(30px, 7.5vw, 52px);
    /* 56px gutters trim a typical width-limited idle grid by about six percent;
       the independent height cap follows the smaller listening hero. */
    --home-gallery-measure: min(
      calc(100vw - 56px),
      max(1px, calc(
        var(--tvc-listen-hero) - var(--tvc-listen-inner-y) - var(--tvc-listen-inner-y) -
        38px - var(--tvc-listen-lift-gap) - var(--tvc-listen-lift-gap) - 20px
      ))
    ) !important;
    grid-template-rows:
      minmax(0, 1fr) 38px var(--tvc-listen-lift-gap)
      var(--home-gallery-measure) var(--tvc-listen-lift-gap) 20px
      minmax(0, 1fr) !important;
    padding: var(--tvc-listen-inner-y) var(--tvc-listen-side) !important;
  }
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-mosaic {
    --sequence-gap: var(--tvc-listen-grid-gap) !important;
  }
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) .home-approved-descriptor {
    font-size: clamp(8px, 2.2vw, 9px);
    letter-spacing: .025em;
  }
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) .home-canvas-bottom-nav {
    width: 100% !important;
  }
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) .home-sequence-copy {
    --tvc-listen-tile: calc((var(--home-gallery-measure) - var(--tvc-listen-grid-gap) * 3) / 4);
    padding: clamp(2px, calc(var(--tvc-listen-tile) * .08), 10px);
    font-size: clamp(7px, calc(var(--tvc-listen-tile) * .12), 18px);
    font-weight: 800 !important;
  }
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-player {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "track" "center" !important;
    grid-template-rows: 32px 28px !important;
    align-content: center !important;
    gap: 4px !important;
    padding: 6px 13px !important;
  }
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-player .player-track {
    grid-area: track;
    min-height: 0;
  }
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-player .player-center {
    grid-area: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 0;
  }
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-player .player-right {
    display: none !important;
  }
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-player .player-record {
    width: 30px;
    height: 30px;
  }
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-player #player-art {
    width: 16px;
    height: 16px;
  }
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-player .player-btn {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-approved-direction.home-listening:has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #page-home .home-tile.is-playing-tile {
    transition: none !important;
  }
}

/* Idle home controls: the original circular SVG button, aligned with the grid. */
body.home-approved-direction:not(.home-listening):has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-start-controls {
  justify-content: flex-start !important;
}
body.home-approved-direction:not(.home-listening):has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-start-controls #home-play {
  box-sizing: border-box !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  background: transparent !important;
}

/* Keep the idle footer's original outer footprint; only reflow its contents. */
body.home-approved-direction:not(.home-listening):has(
  #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
) #home-footer-copyright {
  display: block !important;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 !important;
  color: var(--tvc-ink) !important;
  font-size: 10px !important;
  line-height: 1.25;
  letter-spacing: .035em;
  white-space: nowrap;
}
@media (max-width: 700px) {
  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-footer-copyright {
    font-size: 9px !important;
    letter-spacing: .015em;
  }
}
@media (max-width: 360px) {
  body.home-approved-direction:not(.home-listening):has(
    #page-home.active:not(.is-about-canvas):not(.is-curator-canvas)
  ) #home-footer-copyright {
    font-size: 8px !important;
    letter-spacing: 0;
  }
}


/* Reduced motion keeps the same alternating faces, replacing the hinge with
   a brief opacity change and removing every 3D transform. */
@media (prefers-reduced-motion: reduce) {
  #page-home .home-tile > img,
  #page-home .home-tile > video,
  #page-home .home-tile > .home-sequence-copy {
    transform: none !important;
    transition: opacity 160ms ease !important;
  }
  #page-home .home-tile > .home-sequence-copy {
    opacity: 0;
  }
  #page-home .home-tile.is-sequence-copy > img,
  #page-home .home-tile.is-sequence-copy > video {
    opacity: 0 !important;
  }
  #page-home .home-tile.is-sequence-copy > .home-sequence-copy {
    opacity: 1 !important;
  }
  #page-home .home-tile.is-playing-tile > img,
  #page-home .home-tile.is-playing-tile > video {
    opacity: 1 !important;
    transform: none !important;
  }
  #page-home .home-tile.is-playing-tile > .home-sequence-copy {
    opacity: 0 !important;
    transform: none !important;
  }
}