/* ==========================================================
   HEADS OR TAILS — MUSIC V12
   Photography-first listening application
   Scoped entirely to music.html
   ========================================================== */

body.music-page {
  --music-bg:#050505;
  --music-ink:#f2efe8;
  --music-muted:rgba(242,239,232,.52);
  --music-faint:rgba(242,239,232,.28);
  --music-line:rgba(255,255,255,.10);
  --music-line-soft:rgba(255,255,255,.055);
  --music-player-h:86px;

  margin:0;
  height:100dvh;
  overflow:hidden;
  background:var(--music-bg);
  color:var(--music-ink);
}

/* APP */

body.music-page .music-app {
  position:relative;
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  width:100%;
  height:calc(100dvh - var(--music-player-h));
  min-height:0;
  overflow:hidden;
  background:#050505;
}

/* LEFT BRAND RAIL */

body.music-page .music-sidebar {
  position:relative;
  inset:auto;
  width:auto;
  height:100%;
  min-height:0;

  display:flex;
  flex-direction:column;

  padding:22px 11px 18px;

  background:#050505;
  border-right:1px solid var(--music-line);
  overflow:hidden;
}

body.music-page .music-side-mark {
  margin:0 0 34px;
  color:var(--music-ink);
}

body.music-page .recently-played {
  flex:1;
  min-height:0;
  overflow:hidden;
}

body.music-page .recently-played-label,
body.music-page .music-side-foot {
  color:var(--music-faint);
  font-size:7px;
  line-height:1.3;
  letter-spacing:.15em;
  text-transform:uppercase;
}

body.music-page .music-side-foot {
  display:grid;
  gap:4px;
}

/* WORKSPACE */

body.music-page .music-workspace {
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr);
  grid-template-rows:56px minmax(0,1fr);

  width:100%;
  height:100%;
  min-height:0;
  max-width:none;

  margin:0;
  padding:0;
  overflow:hidden;
}

/* TOOLBAR ACROSS BOTH PANES */

body.music-page .music-toolbar {
  grid-column:1 / -1;

  height:56px;
  min-height:56px;

  display:flex;
  align-items:center;
  gap:18px;

  padding:0 20px;

  background:rgba(5,5,5,.98);
  border-bottom:1px solid var(--music-line);
}

body.music-page .music-route-label {
  display:flex;
  align-items:center;
  gap:10px;

  white-space:nowrap;

  font-size:8px;
  letter-spacing:.13em;
  text-transform:uppercase;
}

body.music-page .music-route-label span,
body.music-page .music-route-label em {
  color:var(--music-faint);
}

body.music-page .music-route-label em {
  font-style:normal;
}

body.music-page .music-search {
  width:clamp(180px,19vw,300px);
  margin-left:auto;

  border:0;
  border-bottom:1px solid var(--music-line);
  border-radius:0;
  background:transparent;
}

body.music-page .music-search:focus-within {
  border-color:var(--signal,#dfff00);
}

body.music-page .music-queue-toggle,
body.music-page .flip-button {
  min-height:32px;
  padding:0 10px;

  border:1px solid var(--music-line);
  border-radius:0;

  background:transparent;
  color:var(--music-muted);

  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ==========================================================
   LEFT / NOW PLAYING WORLD
   ========================================================== */

body.music-page .music-stage-wrap {
  grid-column:1;
  grid-row:2;

  min-width:0;
  min-height:0;

  padding:14px;

  background:#050505;
  overflow:hidden;
}

body.music-page .music-feature {
  position:relative;

  width:100%;
  height:100%;
  min-height:0;

  margin:0;
  overflow:hidden;

  background:#090909;
  border:1px solid var(--music-line);
}

/* REAL PHOTOGRAPHIC WORLD
   We generate the visual photograph from the existing
   popular-card image assets without touching JS playback. */

body.music-page .music-feature::before {
  content:"";

  position:absolute;
  inset:0;

  z-index:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.04) 36%,
      rgba(0,0,0,.42) 72%,
      rgba(0,0,0,.88) 100%
    ),
    url("photos/live-stage-new.jpg")
    center 43% / cover no-repeat;

  filter:
    saturate(.88)
    contrast(1.04);

  transform:scale(1.015);

  transition:
    filter .6s ease,
    transform 1.1s cubic-bezier(.2,.7,.2,1);
}

body.music-page .music-feature:hover::before {
  transform:scale(1.025);
}

/* controlled side falloff keeps UI legible */

body.music-page .music-feature::after {
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.36) 0%,
      transparent 24%,
      transparent 70%,
      rgba(0,0,0,.24) 100%
    );

  pointer-events:none;
}

/* signal canvas remains available */

body.music-page #music-stage-canvas {
  position:absolute;
  inset:0;

  z-index:2;

  width:100%;
  height:100%;

  opacity:.56;
  mix-blend-mode:screen;
  pointer-events:none;
}

/* editorial rules */

body.music-page .music-stage-rule {
  position:absolute;
  z-index:4;

  left:18px;
  right:18px;

  height:1px;
  background:rgba(255,255,255,.16);
}

body.music-page .music-stage-rule.top {
  top:18px;
}

body.music-page .music-stage-rule.bottom {
  bottom:18px;
}

/* HEADS / TAILS returns as art direction */

body.music-page .music-feature-words {
  position:absolute;
  inset:0;

  z-index:3;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:0 clamp(14px,2.2vw,32px);

  overflow:hidden;
  pointer-events:none;

  font-family:var(--display);
  font-size:clamp(74px,9.7vw,178px);
  font-weight:800;
  line-height:.7;
  letter-spacing:-.085em;
  text-transform:uppercase;

  color:rgba(255,255,255,.88);
  mix-blend-mode:screen;
}

body.music-page .music-feature-words span:first-child {
  transform:translateX(-7%);
}

body.music-page .music-feature-words span:last-child {
  transform:translateX(7%);
}

/* H / T registration mark */

body.music-page .music-stage-index {
  position:absolute;

  top:26px;
  left:50%;

  z-index:5;

  display:flex;
  align-items:center;
  gap:7px;

  transform:translateX(-50%);

  color:rgba(255,255,255,.65);

  font-size:8px;
  letter-spacing:.1em;
}

body.music-page .music-stage-index i {
  width:22px;
  height:1px;
  background:currentColor;
}

/* current track information */

body.music-page .music-feature-copy {
  position:absolute;

  left:clamp(22px,3vw,46px);
  right:clamp(22px,3vw,46px);
  bottom:clamp(26px,4vh,48px);

  z-index:6;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:20px;
}

body.music-page .music-stage-kicker {
  grid-column:1 / -1;

  display:flex;
  align-items:center;
  gap:8px;

  margin:0 0 2px;

  color:rgba(255,255,255,.62);

  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

body.music-page .music-stage-kicker i {
  width:24px;
  height:1px;
  background:currentColor;
}

body.music-page .feature-progress {
  grid-column:1;

  width:min(440px,70%);
  height:1px;

  margin-top:12px;

  background:rgba(255,255,255,.24);
}

body.music-page .feature-progress-fill {
  height:100%;
  background:white;
}

body.music-page .feature-controls {
  grid-column:2;
  grid-row:2 / span 3;

  align-self:end;

  display:flex;
  align-items:center;
  gap:8px;
}

body.music-page .feature-play {
  width:58px !important;
  height:58px !important;
  min-width:58px;

  border-radius:50% !important;

  background:var(--music-ink) !important;
  color:#050505 !important;
}

body.music-page .feature-next {
  min-height:40px;
  padding:0 13px;

  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.26);
  color:white;
}

body.music-page .music-expand {
  position:absolute;

  top:26px;
  right:24px;

  z-index:6;

  padding:7px 9px;

  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.28);
  color:rgba(255,255,255,.72);

  font-size:7px;
  letter-spacing:.14em;
}

body.music-page .music-stage-caption {
  position:absolute;

  left:24px;
  bottom:20px;

  z-index:5;

  color:rgba(255,255,255,.34);

  font-size:7px;
  letter-spacing:.15em;
}

/* ==========================================================
   RIGHT / MUSIC LIBRARY
   ========================================================== */

body.music-page .music-browser {
  grid-column:2;
  grid-row:2;

  display:flex;
  flex-direction:column;

  min-width:0;
  min-height:0;

  margin:0;
  padding:0;

  overflow:hidden;

  background:#070707;
  border-left:1px solid var(--music-line);
}

body.music-page .music-browser-head {
  flex:0 0 auto;

  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:14px;

  min-height:96px;

  margin:0;
  padding:17px 18px 15px;

  border-bottom:1px solid var(--music-line);
}

body.music-page .music-browser-head .eyebrow {
  display:block;

  margin-bottom:7px;

  color:var(--music-faint);

  font-size:7px;
  letter-spacing:.15em;
}

body.music-page .music-browser-head h2 {
  margin:0;

  font-size:clamp(25px,2.15vw,38px);
  font-weight:550;
  line-height:.9;
  letter-spacing:-.045em;
}

body.music-page .music-browser-meta {
  display:grid;
  gap:4px;

  flex:0 0 auto;

  text-align:right;

  color:var(--music-faint);

  font-size:7px;
  letter-spacing:.12em;
}

/* FILTERS */

body.music-page .music-chips {
  flex:0 0 42px;

  display:flex;
  align-items:center;
  gap:4px;

  padding:0 14px;

  overflow-x:auto;

  border-bottom:1px solid var(--music-line-soft);

  scrollbar-width:none;
}

body.music-page .music-chips::-webkit-scrollbar {
  display:none;
}

body.music-page .music-chips button {
  flex:0 0 auto;

  min-height:24px;
  padding:0 8px;

  border:1px solid var(--music-line);
  border-radius:999px;

  background:transparent;
  color:var(--music-muted);

  font-size:7px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.music-page .music-chips button.active {
  background:var(--music-ink);
  border-color:var(--music-ink);
  color:#050505;
}

/* ==========================================================
   PHOTOGRAPHIC QUICK PLAY

   These existing images are NOT removed.
   They become an editorial contact sheet.
   ========================================================== */

body.music-page .music-popular-label {
  flex:0 0 27px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 14px;

  color:var(--music-faint);

  font-size:7px;
  letter-spacing:.12em;

  border-bottom:1px solid var(--music-line-soft);
}

body.music-page .music-popular-strip {
  flex:0 0 100px;

  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;

  margin:0;
  padding:0;

  overflow:hidden;

  background:var(--music-line-soft);

  border-bottom:1px solid var(--music-line);
}

body.music-page .popular-card {
  position:relative;

  min-width:0;
  height:100px;

  margin:0;
  padding:0;

  overflow:hidden;

  border:0;
  border-radius:0;

  background:#0b0b0b;

  text-align:left;
}

body.music-page .popular-image {
  position:absolute;
  inset:0;

  display:block;

  width:100%;
  height:100%;
}

body.music-page .popular-image::after {
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 24%,
      rgba(0,0,0,.18) 55%,
      rgba(0,0,0,.9) 100%
    );

  transition:background .2s ease;
}

body.music-page .popular-image img {
  width:100%;
  height:100%;

  object-fit:cover;

  filter:
    saturate(.82)
    contrast(1.04);

  transform:scale(1.01);

  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    filter .25s ease;
}

body.music-page .popular-card:hover .popular-image img {
  transform:scale(1.06);
  filter:saturate(1) contrast(1.04);
}

body.music-page .popular-image i {
  position:absolute;

  top:7px;
  left:7px;

  z-index:3;

  color:rgba(255,255,255,.62);

  font-size:7px;
  font-style:normal;
}

body.music-page .popular-play-overlay {
  position:absolute;

  top:7px;
  right:7px;

  z-index:3;

  display:grid;
  place-items:center;

  width:23px;
  height:23px;

  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;

  color:white;

  opacity:0;
  transform:scale(.88);

  transition:
    opacity .16s ease,
    transform .16s ease;
}

body.music-page .popular-card:hover .popular-play-overlay {
  opacity:1;
  transform:scale(1);
}

body.music-page .popular-card > span:not(.popular-image) {
  position:absolute;

  left:8px;
  right:6px;
  bottom:19px;

  z-index:4;

  overflow:hidden;

  color:white;

  font-size:8px;
  font-weight:600;

  white-space:nowrap;
  text-overflow:ellipsis;
}

body.music-page .popular-card > small {
  position:absolute;

  left:8px;
  right:6px;
  bottom:7px;

  z-index:4;

  overflow:hidden;

  color:rgba(255,255,255,.48);

  font-size:6px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

/* FULL ARCHIVE LABEL */

body.music-page .music-table-label {
  flex:0 0 31px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 14px;

  color:var(--music-faint);

  font-size:7px;
  letter-spacing:.12em;

  border-bottom:1px solid var(--music-line-soft);
}

/* ONLY THE TRACK LIBRARY SCROLLS */

body.music-page #track-table {
  flex:1 1 auto;

  min-height:0;

  overflow-x:hidden;
  overflow-y:auto;

  overscroll-behavior:contain;

  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}

body.music-page #track-table::-webkit-scrollbar {
  width:4px;
}

body.music-page #track-table::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,.18);
}

/* tighten generated rows without turning them into spreadsheet sludge */

body.music-page #track-table > * {
  min-height:52px;
}

body.music-page .track-row,
body.music-page .music-row {
  min-height:52px;

  border-bottom:1px solid var(--music-line-soft);

  transition:background .14s ease;
}

body.music-page .track-row:hover,
body.music-page .music-row:hover {
  background:rgba(255,255,255,.04);
}

body.music-page .track-row.is-active,
body.music-page .music-row.is-active {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--signal,#dfff00) 9%,transparent),
      transparent 50%
    );
}

/* ==========================================================
   QUEUE DRAWER
   ========================================================== */

body.music-page .music-upnext {
  position:fixed;

  top:0;
  right:0;
  bottom:var(--music-player-h);

  z-index:90;

  width:min(390px,92vw);

  padding:20px;

  overflow:auto;

  background:#090909;
  border-left:1px solid var(--music-line);

  transform:translateX(102%);

  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}

body.music-page .music-upnext[aria-hidden="false"],
body.music-page .music-upnext.is-open,
body.music-page .music-upnext.open {
  transform:translateX(0);
}

/* Music is an application, not a marketing page */

body.music-page .site-footer {
  display:none;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1050px) {
  body.music-page .music-app {
    grid-template-columns:64px minmax(0,1fr);
  }

  body.music-page .music-sidebar {
    padding-inline:8px;
  }

  body.music-page .music-workspace {
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  }

  body.music-page .music-feature-words {
    font-size:clamp(62px,10.5vw,118px);
  }

  body.music-page .music-feature .now-title {
    font-size:clamp(34px,4.5vw,54px);
  }

  body.music-page .music-popular-strip {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  body.music-page .popular-card:nth-child(5) {
    display:none;
  }
}

/* ==========================================================
   MOBILE
   Dedicated composition.
   ========================================================== */

@media (max-width:760px) {
  body.music-page {
    --music-player-h:70px;
  }

  body.music-page .music-app {
    display:block;

    height:calc(100dvh - var(--music-player-h));
  }

  body.music-page .music-sidebar {
    display:none;
  }

  body.music-page .music-workspace {
    display:flex;
    flex-direction:column;

    height:100%;
  }

  body.music-page .music-toolbar {
    flex:0 0 52px;

    height:52px;
    min-height:52px;

    padding:0 12px;
  }

  body.music-page .music-route-label {
    display:none;
  }

  body.music-page .music-search {
    width:100%;
    margin:0;
  }

  body.music-page .music-queue-toggle,
  body.music-page .flip-button {
    flex:0 0 auto;
  }

  body.music-page .music-stage-wrap {
    flex:0 0 245px;

    min-height:245px;

    padding:0;
  }

  body.music-page .music-feature {
    border-left:0;
    border-right:0;
    border-top:0;
  }

  body.music-page .music-feature::before {
    background-position:center 42%;
  }

  body.music-page .music-feature-words {
    padding-inline:10px;

    font-size:clamp(58px,20vw,92px);
  }

  body.music-page .music-stage-rule {
    left:12px;
    right:12px;
  }

  body.music-page .music-stage-index {
    top:16px;
  }

  body.music-page .music-expand {
    top:14px;
    right:12px;
  }

  body.music-page .music-feature-copy {
    left:14px;
    right:14px;
    bottom:18px;
  }

  body.music-page .music-feature .now-title {
    max-width:calc(100% - 58px);

    font-size:clamp(30px,9vw,43px);
  }

  body.music-page .feature-next,
  body.music-page .feature-progress,
  body.music-page .music-stage-caption {
    display:none;
  }

  body.music-page .feature-play {
    width:48px !important;
    height:48px !important;
    min-width:48px;
  }

  body.music-page .music-browser {
    flex:1 1 auto;

    min-height:0;

    border-left:0;
  }

  body.music-page .music-browser-head {
    min-height:64px;

    padding:10px 13px;
  }

  body.music-page .music-browser-head h2 {
    font-size:24px;
  }

  body.music-page .music-browser-meta {
    display:none;
  }

  body.music-page .music-chips {
    flex-basis:38px;
    padding-inline:10px;
  }

  body.music-page .music-popular-label {
    display:none;
  }

  body.music-page .music-popular-strip {
    flex:0 0 76px;

    grid-template-columns:repeat(3,minmax(0,1fr));

    height:76px;
  }

  body.music-page .popular-card {
    height:76px;
  }

  body.music-page .popular-card:nth-child(n+4) {
    display:none;
  }

  body.music-page .music-table-label {
    flex-basis:27px;
    min-height:27px;

    padding-inline:12px;
  }

  body.music-page .music-table-label span:last-child {
    display:none;
  }

  body.music-page #track-table > *,
  body.music-page .track-row,
  body.music-page .music-row {
    min-height:55px;
  }

  body.music-page .music-mobile-nav {
    display:none;
  }
}

/* compact phones */

@media (max-width:430px) {
  body.music-page .music-stage-wrap {
    flex-basis:220px;
    min-height:220px;
  }

  body.music-page .music-feature-words {
    font-size:clamp(52px,19vw,78px);
  }

  body.music-page .music-popular-strip {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body.music-page .popular-card:nth-child(3) {
    display:none;
  }
}

/* reduced motion */

@media (prefers-reduced-motion:reduce) {
  body.music-page *,
  body.music-page *::before,
  body.music-page *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================
   V12.1 — PREMIUM LEFT-STAGE REFINEMENT
   ========================================================== */

@media (min-width: 1060px) {

  /* --------------------------------------------------------
     01 — GIVE H/T RAIL REAL PRESENCE
     -------------------------------------------------------- */

  body.music-page .music-app {
    grid-template-columns:
      clamp(112px, 8.5vw, 142px)
      minmax(0,1fr);
  }

  body.music-page .music-sidebar {
    width:auto;

    padding:
      25px
      clamp(14px,1.25vw,21px)
      20px;

    border-right:1px solid rgba(255,255,255,.12);
  }

  body.music-page .music-side-mark {
    margin-bottom:42px;

    font-size:clamp(15px,1.25vw,20px);
    letter-spacing:.16em;
  }

  body.music-page .recently-played-label {
    margin-bottom:16px;
  }

  body.music-page .recently-played {
    font-size:8px;
  }

  body.music-page .music-side-foot {
    margin-top:auto;

    padding-top:17px;

    border-top:1px solid rgba(255,255,255,.08);

    font-size:7px;
    line-height:1.55;
  }


  /* --------------------------------------------------------
     02 — SLIGHTLY FAVOR THE VISUAL STAGE
     -------------------------------------------------------- */

  body.music-page .music-workspace {
    grid-template-columns:
      minmax(0,1.24fr)
      minmax(410px,.76fr);
  }

  body.music-page .music-stage-wrap {
    padding:
      14px
      13px
      14px
      14px;
  }


  /* --------------------------------------------------------
     03 — CINEMATIC PHOTO
     -------------------------------------------------------- */

  body.music-page .music-feature::before {
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,.01) 32%,
        rgba(0,0,0,.18) 61%,
        rgba(0,0,0,.82) 100%
      ),
      url("photos/live-stage-new.jpg")
      center 42% / cover no-repeat;

    filter:
      saturate(.94)
      contrast(1.055)
      brightness(.92);
  }


  /* --------------------------------------------------------
     04 — HEADS / OR / TAILS

     Existing HTML only has HEADS + TAILS.
     ::after supplies the hinge without changing JS/DOM.
     -------------------------------------------------------- */

  body.music-page .music-feature-words {
    top:50%;
    bottom:auto;

    height:auto;

    display:grid;
    grid-template-columns:
      minmax(0,1fr)
      auto
      minmax(0,1fr);

    align-items:center;

    padding:
      0
      clamp(24px,3vw,52px);

    transform:translateY(-53%);

    font-size:
      clamp(82px,8.6vw,164px);

    line-height:.72;
    letter-spacing:-.082em;

    mix-blend-mode:normal;
  }

  body.music-page .music-feature-words span {
    position:relative;

    color:rgba(255,255,255,.96);

    text-shadow:
      0 4px 30px rgba(0,0,0,.36);

    transform:none !important;
  }

  body.music-page .music-feature-words span:first-child {
    grid-column:1;

    justify-self:start;
  }

  body.music-page .music-feature-words span:last-child {
    grid-column:3;

    justify-self:end;
  }

  body.music-page .music-feature-words::after {
    content:"OR";

    grid-column:2;
    grid-row:1;

    align-self:center;
    justify-self:center;

    margin:
      0
      clamp(15px,2vw,30px);

    color:rgba(255,255,255,.72);

    font-family:var(--display);
    font-size:
      clamp(17px,1.55vw,27px);

    font-weight:500;
    line-height:1;
    letter-spacing:.18em;

    text-shadow:
      0 3px 20px rgba(0,0,0,.7);
  }


  /* --------------------------------------------------------
     05 — MAKE THE CENTRE FEEL DESIGNED

     The H/T registration becomes the axis of the composition.
     -------------------------------------------------------- */

  body.music-page .music-stage-index {
    top:31px;

    gap:9px;

    padding:
      6px
      9px;

    background:rgba(0,0,0,.22);

    border:
      1px solid
      rgba(255,255,255,.11);

    backdrop-filter:blur(5px);

    font-size:7px;
  }

  body.music-page .music-stage-index i {
    width:31px;

    background:
      rgba(255,255,255,.58);
  }


  /* --------------------------------------------------------
     06 — BETTER NOW PLAYING PANEL

     Still editorial; not a rounded SaaS card.
     -------------------------------------------------------- */

  body.music-page .music-feature-copy {
    left:
      clamp(27px,3vw,50px);

    right:
      clamp(27px,3vw,50px);

    bottom:
      clamp(31px,4.4vh,53px);

    grid-template-columns:
      minmax(0,1fr)
      auto;

    column-gap:28px;
  }

  body.music-page .music-stage-kicker {
    width:min(430px,60%);

    padding-top:11px;

    border-top:
      1px solid
      rgba(255,255,255,.36);
  }

  body.music-page .music-feature .now-title {
    margin-top:6px;

    max-width:
      min(620px,72%);

    font-size:
      clamp(39px,3.65vw,67px);

    line-height:.87;

    letter-spacing:-.057em;
  }

  body.music-page .music-feature .now-sub {
    margin-top:8px;

    color:
      rgba(255,255,255,.66);

    font-size:10px;

    letter-spacing:.07em;

    text-transform:uppercase;
  }

  body.music-page .feature-progress {
    width:
      min(500px,72%);

    height:2px;

    margin-top:18px;

    background:
      rgba(255,255,255,.22);
  }

  body.music-page .feature-progress-fill {
    box-shadow:
      0 0 14px
      color-mix(
        in srgb,
        var(--signal,#dfff00) 55%,
        transparent
      );
  }


  /* --------------------------------------------------------
     07 — TRANSPORT BECOMES A PURPOSEFUL OBJECT
     -------------------------------------------------------- */

  body.music-page .feature-controls {
    gap:9px;

    padding:
      8px;

    background:
      rgba(0,0,0,.34);

    border:
      1px solid
      rgba(255,255,255,.13);

    backdrop-filter:
      blur(10px);
  }

  body.music-page .feature-play {
    width:62px !important;
    height:62px !important;
    min-width:62px;

    border:
      1px solid
      rgba(255,255,255,.85) !important;

    box-shadow:
      0 8px 30px
      rgba(0,0,0,.24);
  }

  body.music-page .feature-next {
    height:62px;

    padding:
      0
      15px;

    border:
      0;

    background:
      transparent;

    font-size:7px;

    letter-spacing:.14em;
  }


  /* --------------------------------------------------------
     08 — IMAGE FRAME / TECHNICAL REGISTRATION
     -------------------------------------------------------- */

  body.music-page .music-stage-rule.top {
    top:19px;
  }

  body.music-page .music-stage-rule.bottom {
    bottom:19px;
  }

  body.music-page .music-stage-caption {
    left:auto;
    right:27px;

    bottom:25px;

    writing-mode:vertical-rl;

    transform:
      rotate(180deg);

    opacity:.8;
  }

  body.music-page .music-expand {
    top:28px;
    right:26px;

    background:
      rgba(0,0,0,.25);

    backdrop-filter:
      blur(6px);
  }


  /* --------------------------------------------------------
     09 — KEEP SQUARES ATMOSPHERIC
     -------------------------------------------------------- */

  body.music-page #music-stage-canvas {
    opacity:.48;

    -webkit-mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,.78),
        rgba(0,0,0,.95) 60%,
        rgba(0,0,0,.42)
      );

    mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,.78),
        rgba(0,0,0,.95) 60%,
        rgba(0,0,0,.42)
      );
  }

}


/* ==========================================================
   TABLET — keep OR but reduce typography
   ========================================================== */

@media (min-width:761px) and (max-width:1059px) {

  body.music-page .music-feature-words {
    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      auto
      minmax(0,1fr);

    align-items:center;

    font-size:
      clamp(59px,9vw,102px);
  }

  body.music-page .music-feature-words span:first-child {
    grid-column:1;

    justify-self:start;
  }

  body.music-page .music-feature-words span:last-child {
    grid-column:3;

    justify-self:end;
  }

  body.music-page .music-feature-words::after {
    content:"OR";

    grid-column:2;
    grid-row:1;

    margin:0 12px;

    color:
      rgba(255,255,255,.72);

    font-size:
      clamp(14px,1.7vw,20px);

    letter-spacing:.16em;
  }

}


/* ==========================================================
   MOBILE — HEADS / OR / TAILS remains readable
   ========================================================== */

@media (max-width:760px) {

  body.music-page .music-feature-words {
    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      auto
      minmax(0,1fr);

    align-items:center;

    gap:6px;
  }

  body.music-page .music-feature-words span:first-child {
    grid-column:1;

    justify-self:start;

    transform:none;
  }

  body.music-page .music-feature-words span:last-child {
    grid-column:3;

    justify-self:end;

    transform:none;
  }

  body.music-page .music-feature-words::after {
    content:"OR";

    grid-column:2;
    grid-row:1;

    color:
      rgba(255,255,255,.72);

    font-family:var(--display);

    font-size:
      clamp(11px,3vw,15px);

    letter-spacing:.12em;
  }

}

/* ==========================================================
   V12.1 HOTFIX — HEADS / OR / TAILS VISIBILITY
   Do not alter photography, canvas, library or playback.
   ========================================================== */

@media (min-width:1060px) {

  body.music-page .music-feature-words {
    /* cancel the broken V12.1 positioning */
    top:0;
    right:0;
    bottom:0;
    left:0;

    width:100%;
    height:100%;

    transform:none;

    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;

    padding:
      0
      clamp(26px,3.2vw,58px);

    overflow:visible;

    font-size:clamp(76px,7.8vw,148px);
    line-height:.72;
  }

  body.music-page .music-feature-words span:first-child {
    grid-column:1;
    grid-row:1;
    justify-self:start;

    transform:none !important;
  }

  body.music-page .music-feature-words span:last-child {
    grid-column:3;
    grid-row:1;
    justify-self:end;

    transform:none !important;
  }

  body.music-page .music-feature-words::after {
    content:"OR";

    grid-column:2;
    grid-row:1;

    align-self:center;
    justify-self:center;

    margin:0 clamp(14px,1.8vw,28px);

    color:rgba(255,255,255,.82);

    font-family:var(--display);
    font-size:clamp(15px,1.35vw,23px);
    font-weight:500;
    line-height:1;
    letter-spacing:.18em;

    text-shadow:0 3px 18px rgba(0,0,0,.7);
  }
}

/* ==========================================================
   V12.2 — REAL HEADS / OR / TAILS
   OR is now actual DOM, not a pseudo-element.
   ========================================================== */

/* Kill every previous generated OR */
body.music-page .music-feature-words::before,
body.music-page .music-feature-words::after {
  content: none !important;
  display: none !important;
}

body.music-page .music-feature-words {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 100% !important;

  transform: none !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr) !important;

  align-items: center !important;

  padding:
    0
    clamp(24px, 3vw, 54px) !important;
}

body.music-page .music-feature-words > span:first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;

  justify-self: start !important;

  transform: none !important;
}

body.music-page .music-feature-words > .music-or {
  grid-column: 2 !important;
  grid-row: 1 !important;

  justify-self: center !important;
  align-self: center !important;

  display: block !important;

  margin:
    0
    clamp(14px, 1.7vw, 28px) !important;

  color: rgba(255,255,255,.78) !important;

  font-family: var(--display) !important;
  font-size: clamp(15px, 1.25vw, 23px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;

  white-space: nowrap !important;

  transform: none !important;
}

body.music-page .music-feature-words > span:last-child {
  grid-column: 3 !important;
  grid-row: 1 !important;

  justify-self: end !important;

  transform: none !important;
}

/* Tablet */
@media (max-width: 1059px) {
  body.music-page .music-feature-words {
    padding-inline: 18px !important;
  }

  body.music-page .music-feature-words > .music-or {
    margin-inline: 10px !important;
    font-size: clamp(12px, 1.6vw, 18px) !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  body.music-page .music-feature-words {
    padding-inline: 10px !important;
  }

  body.music-page .music-feature-words > .music-or {
    margin-inline: 6px !important;
    font-size: clamp(10px, 3vw, 14px) !important;
  }
}

/* ==========================================================
   STRICT TITLE LOCK
   HEADS | OR | TAILS
   No inherited experimental positioning.
   ========================================================== */

body.music-page .music-feature-words {
  position: absolute !important;
  inset: 0 !important;

  z-index: 5 !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: clamp(18px, 2.1vw, 40px) !important;

  padding: 0 clamp(24px, 3vw, 52px) !important;
  margin: 0 !important;

  transform: none !important;

  overflow: hidden !important;
  pointer-events: none !important;

  white-space: nowrap !important;
}

/* permanently kill generated ORs */

body.music-page .music-feature-words::before,
body.music-page .music-feature-words::after {
  content: none !important;
  display: none !important;
}

/* HEADS */

body.music-page .music-feature-words > span:first-child {
  position: static !important;

  display: block !important;

  flex: 0 1 auto !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  color: rgba(255,255,255,.96) !important;

  font-family: var(--display) !important;
  font-size: clamp(76px, 7.25vw, 142px) !important;
  font-weight: 700 !important;
  line-height: .78 !important;
  letter-spacing: -.075em !important;

  text-shadow:
    0 4px 30px rgba(0,0,0,.45),
    0 0 20px color-mix(
      in srgb,
      var(--signal,#dfff00) 20%,
      transparent
    ) !important;
}

/* REAL OR */

body.music-page .music-feature-words > .music-or {
  position: static !important;

  display: block !important;

  flex: 0 0 auto !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  color: rgba(255,255,255,.68) !important;

  font-family: var(--display) !important;
  font-size: clamp(14px, 1.15vw, 21px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;

  text-shadow: 0 3px 18px rgba(0,0,0,.8) !important;
}

/* TAILS */

body.music-page .music-feature-words > span:last-child {
  position: static !important;

  display: block !important;

  flex: 0 1 auto !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  color: rgba(255,255,255,.96) !important;

  font-family: var(--display) !important;
  font-size: clamp(76px, 7.25vw, 142px) !important;
  font-weight: 700 !important;
  line-height: .78 !important;
  letter-spacing: -.075em !important;

  text-shadow:
    0 4px 30px rgba(0,0,0,.45),
    0 0 20px color-mix(
      in srgb,
      var(--signal,#dfff00) 20%,
      transparent
    ) !important;
}

/* Tablet */

@media (max-width: 1059px) {
  body.music-page .music-feature-words {
    gap: 14px !important;
    padding-inline: 18px !important;
  }

  body.music-page .music-feature-words > span:first-child,
  body.music-page .music-feature-words > span:last-child {
    font-size: clamp(54px, 8.2vw, 92px) !important;
  }

  body.music-page .music-feature-words > .music-or {
    font-size: 13px !important;
  }
}

/* Mobile */

@media (max-width: 760px) {
  body.music-page .music-feature-words {
    gap: 8px !important;
    padding-inline: 10px !important;
  }

  body.music-page .music-feature-words > span:first-child,
  body.music-page .music-feature-words > span:last-child {
    font-size: clamp(43px, 16vw, 70px) !important;
  }

  body.music-page .music-feature-words > .music-or {
    font-size: 10px !important;
    letter-spacing: .10em !important;
  }
}

/* ==========================================================
   V13 — LAYERED MEDIA ENGINE
   The old ::before photograph is disabled.
   Actual photo layers now crossfade independently.
   ========================================================== */

body.music-page .music-feature::before {
  content:none !important;
  display:none !important;
}

body.music-page .music-media {
  position:absolute;
  inset:0;
  z-index:0;

  overflow:hidden;
  pointer-events:none;

  background:#070707;
}

body.music-page .music-media-layer {
  position:absolute;
  inset:-2%;

  opacity:0;

  background-position:center 42%;
  background-repeat:no-repeat;
  background-size:cover;

  transform:
    translate3d(
      calc(var(--media-x, 0) * 1px),
      calc(var(--media-y, 0) * 1px),
      0
    )
    scale(1.035);

  filter:
    saturate(var(--media-saturation,.92))
    contrast(var(--media-contrast,1.05))
    brightness(var(--media-brightness,.9));

  will-change:
    opacity,
    transform,
    filter;

  transition:
    opacity 420ms cubic-bezier(.22,.61,.36,1),
    transform 720ms cubic-bezier(.22,.61,.36,1),
    filter 420ms ease;
}

body.music-page .music-media-layer.is-active {
  opacity:1;

  transform:
    translate3d(
      calc(var(--media-x, 0) * 1px),
      calc(var(--media-y, 0) * 1px),
      0
    )
    scale(1.015);
}

body.music-page .music-media-shade {
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.02) 35%,
      rgba(0,0,0,.16) 58%,
      rgba(0,0,0,.84) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.22),
      transparent 23%,
      transparent 76%,
      rgba(0,0,0,.18)
    );
}

/* Keep the square signal above photography. */

body.music-page #music-stage-canvas {
  z-index:2;
}

/* Typography lives above photo + signal. */

body.music-page .music-feature-words {
  z-index:4 !important;
}

/* UI remains the stable foreground plane. */

body.music-page .music-feature-copy,
body.music-page .music-stage-index,
body.music-page .music-expand,
body.music-page .music-stage-caption {
  z-index:6;
}

/* Stage becomes its own compositing boundary. */

body.music-page .music-feature {
  isolation:isolate;
  contain:layout paint;
}

/* Playback subtly increases media presence. */

body.music-page.music-playing .music-media-layer.is-active {
  filter:
    saturate(calc(var(--media-saturation,.92) + .06))
    contrast(var(--media-contrast,1.05))
    brightness(calc(var(--media-brightness,.9) + .025));
}

/* Track transition: typography does not fly around.
   It only settles subtly. */

body.music-page.visual-changing .music-feature-words {
  opacity:.74;

  transform:scale(.992) !important;

  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(.22,.61,.36,1);
}

body.music-page .music-feature-words {
  transition:
    opacity 240ms ease,
    transform 320ms cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------
   Pointer depth
   ---------------------------------------------------------- */

@media (hover:hover) and (pointer:fine) {
  body.music-page .music-feature {
    --media-x:0;
    --media-y:0;
  }
}

/* ----------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce) {
  body.music-page .music-media-layer {
    transition:opacity 120ms linear !important;
    transform:scale(1.015) !important;
  }

  body.music-page.visual-changing .music-feature-words {
    transform:none !important;
  }
}

@media (hover:hover) and (pointer:fine) {
  body.player-fused .controls .ctrl.main:hover {
    transform:scale(1.055);
  }
}

@media (hover:hover) and (pointer:fine) {
  body.player-fused .progress:hover .progress-knob {
    opacity:1;
  }
}

/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1059px) {

  body.player-fused {
    --music-player-h:70px;
    --player-h:70px;
  }

  body.player-fused .player {
    grid-template-columns:
      minmax(145px,.65fr)
      minmax(300px,1.5fr)
      auto;

    gap:12px;

    padding-inline:14px;
  }

  body.player-fused .transport {
    grid-template-columns:
      auto
      minmax(120px,1fr);
  }

  body.player-fused .wave {
    display:none;
  }

  body.player-fused .player-side .btn {
    display:none;
  }
}

/* ----------------------------------------------------------
   MOBILE
   Keep a true mini-player. The Music page itself provides
   the larger visual controls above it.
   ---------------------------------------------------------- */

@media (max-width: 760px) {

  body.player-fused {
    --music-player-h:64px;
    --player-h:64px;
  }

  body.player-fused .player {
    grid-template-columns:
      minmax(0,1fr)
      auto;

    gap:10px;

    padding:
      0 12px;
  }

  body.player-fused .player .now {
    grid-template-columns:
      30px
      minmax(0,1fr);
  }

  body.player-fused .player .now-art {
    width:30px;
    height:30px;
  }

  body.player-fused .transport {
    display:flex;

    justify-content:flex-end;
  }

  body.player-fused .transport .timeline,
  body.player-fused .transport .wave,
  body.player-fused .controls .prev {
    display:none;
  }

  body.player-fused .controls {
    gap:2px;
  }

  body.player-fused .controls .ctrl {
    width:38px;
    height:38px;
  }

  body.player-fused .controls .ctrl.main {
    width:42px;
    height:42px;
  }

  body.player-fused .player-side {
    display:none;
  }
}

/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce) {

  body.player-fused .player,
  body.player-global .player,
  body.player-fused .controls .ctrl.main {
    transition:none !important;
  }
}