/* Liquid glass (2026-10-12) for the channel pages and the company-page heroes.
   The artwork is the page; clear glass carries the controls. Geist (OFL, self-hosted).
   One accent per page via body class: t-gv / t-rv / t-sv / t-vibes / t-fvbio / t-evoke.
   Glass blur is a specific effect here (controls floating over the channel artwork), never wallpaper. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

body.t-glass {
  /* Apple's own face where the visitor has it (SF Pro via the system stack), Geist everywhere else */
  --g-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Geist", "Helvetica Neue", Arial, sans-serif;
  --g-bg: #06060a; --g-ink: #f5f5f7; --g-ink2: rgba(245, 245, 247, .74); --g-ink3: rgba(245, 245, 247, .56);
  --g-ac: #8e7bff; --g-e: cubic-bezier(.16, 1, .3, 1);
  --g-fill: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  --g-tint: rgba(12, 12, 18, .32);   /* the dimming layer under the glass keeps text legible over bright artwork */
  --g-rim: rgba(255, 255, 255, .55); --g-rim2: rgba(255, 255, 255, .14);
  --g-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 18px 44px -16px rgba(0, 0, 0, .6);
  --g-hi: rgba(255, 255, 255, .26);
  background: var(--g-bg); color: var(--g-ink); font-family: var(--g-font);
}
body.t-glass.t-gv { --g-ac: #5aa0ff; }
body.t-glass.t-rv { --g-ac: #ff4d6d; }
body.t-glass.t-sv { --g-ac: #8e7bff; }
body.t-glass.t-pi { --g-ac: #e4e4e7; }
body.t-glass.t-vibes { --g-ac: #8e7bff; }
body.t-glass.t-fvbio { --g-ac: #a78bfa; }
/* EVOKE: light glass on the sky */
body.t-glass.t-evoke {
  --g-bg: #eef1f6; --g-ink: #1d1d22; --g-ink2: rgba(29, 29, 34, .74); --g-ink3: rgba(29, 29, 34, .58); --g-ac: #b47722;
  --g-fill: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .42));
  --g-tint: rgba(255, 255, 255, .18);
  --g-rim: rgba(255, 255, 255, .95); --g-rim2: rgba(255, 255, 255, .5);
  --g-shadow: 0 1px 1px rgba(40, 52, 90, .06), 0 20px 44px -18px rgba(40, 52, 90, .32);
  --g-hi: rgba(255, 255, 255, .7);
}
body.t-glass ::selection { background: color-mix(in srgb, var(--g-ac) 38%, transparent); color: var(--g-ink); }
body.t-glass :focus-visible { outline: 2px solid var(--g-ac); outline-offset: 3px; }
body.t-glass .g-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
body.t-glass .nav.solid { background: color-mix(in srgb, var(--g-bg) 62%, transparent); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-color: transparent; box-shadow: 0 1px 0 color-mix(in srgb, var(--g-ink) 8%, transparent); }

/* ---------- the material ---------- */
.glass { position: relative; isolation: isolate; background: var(--g-fill), linear-gradient(var(--g-tint), var(--g-tint));
  -webkit-backdrop-filter: blur(30px) saturate(185%); backdrop-filter: blur(30px) saturate(185%);
  box-shadow: inset 0 1px 0 var(--g-rim2), inset 0 -1px 0 rgba(255, 255, 255, .05), var(--g-shadow); }
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(145deg, var(--g-rim) 0%, rgba(255, 255, 255, .08) 32%, rgba(255, 255, 255, 0) 55%, var(--g-rim2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: .9;
  background: radial-gradient(180px circle at var(--mx, 22%) var(--my, -10%), var(--g-hi), transparent 62%); transition: opacity .4s; }
/* refracting edge where the engine supports SVG filters in backdrop-filter (Chromium); others keep the blur above */
html.g-refract .gnow.glass, html.g-refract .gart-p.glass, html.g-refract .gseg.glass { backdrop-filter: url(#g-refract) blur(30px) saturate(185%); }

/* ---------- buttons ---------- */
.gbtn { display: inline-flex; width: auto; align-items: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 999px; font: 600 15px/1 var(--g-font); letter-spacing: -.01em;
  color: var(--g-ink); text-decoration: none; white-space: nowrap; transition: transform .35s var(--g-e), background .3s, box-shadow .3s; }
.gbtn .gi { width: 18px; height: 18px; }
.gbtn:active { transform: scale(.97); }
.gbtn-solid { background: var(--g-ink); color: var(--g-bg); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); }
.gbtn-solid:hover { transform: translateY(-1px); background: #fff; }
body.t-evoke .gbtn-solid { background: #1d1d22; color: #fff; }
body.t-evoke .gbtn-solid:hover { background: #000; }
body.t-evoke .gbtn-glass { color: #1d1d22; }
.gbtn-glass:hover { transform: translateY(-1px); }
.gi { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- segmented control ---------- */
.gseg { display: inline-flex; width: auto; max-width: max-content; gap: 2px; padding: 4px; border-radius: 999px; }
.gseg a { position: relative; z-index: 3; padding: 9px 16px; border-radius: 999px; font: 500 13.5px/1 var(--g-font); letter-spacing: -.005em; color: var(--g-ink2); text-decoration: none; transition: color .25s, background .25s; white-space: nowrap; }
.gseg a:hover { color: var(--g-ink); }
.gseg a.on { color: var(--g-ink); background: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px -6px rgba(0, 0, 0, .5); }
body.t-evoke .gseg a.on { background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px -6px rgba(40, 52, 90, .35); }

/* ---------- hero ---------- */
.gh { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: var(--g-ink);
  padding: calc(76px + env(safe-area-inset-top)) 0 clamp(28px, 6vh, 64px); }
.gh-art { position: absolute; inset: 0; z-index: 0; }
.gh-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.02); }
.gh-photo .gh-art { bottom: auto; aspect-ratio: 16 / 9; max-height: 100%; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
/* colour field taken from the artwork when there is no usable photo (fades out inside the hero, no edges) */
.gh-amb { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(52% 62% at 74% 34%, color-mix(in srgb, var(--amb) 62%, transparent) 0%, transparent 72%),
              radial-gradient(46% 52% at 12% 92%, color-mix(in srgb, var(--amb) 30%, transparent) 0%, transparent 74%),
              radial-gradient(30% 34% at 92% 88%, color-mix(in srgb, var(--amb) 22%, transparent) 0%, transparent 74%);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.gh-scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-bg) 55%, transparent) 0%, transparent 22%),
              linear-gradient(0deg, var(--g-bg) 0%, color-mix(in srgb, var(--g-bg) 78%, transparent) 26%, color-mix(in srgb, var(--g-bg) 18%, transparent) 62%, transparent 82%),
              linear-gradient(90deg, color-mix(in srgb, var(--g-bg) 70%, transparent) 0%, transparent 58%); }
body.t-evoke .gh-scrim { background: linear-gradient(0deg, var(--g-bg) 0%, color-mix(in srgb, var(--g-bg) 55%, transparent) 30%, transparent 70%); }
.gh-top { position: absolute; z-index: 4; top: calc(80px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; }
.gh-in { position: relative; z-index: 3; width: 100%; display: grid; gap: 34px; align-items: end; }
@media (min-width: 1000px) { .gh-in { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 56px; } }
.gh .crumbs { margin-bottom: 18px; color: var(--g-ink3); }
.gh-mark { margin-bottom: 18px; display: flex; }
.gh-mark .gav { width: 76px; height: 76px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 12px 30px -10px rgba(0, 0, 0, .6); }
.gh-mark .gav + .gav { margin-left: -16px; }
.gh-mark .glogo { height: clamp(84px, 11vw, 150px); width: auto; display: block; }
.gh-h1 .glogo { display: block; width: auto; height: clamp(70px, 9vw, 128px); }
.gh-h1 .glogo.wide { height: clamp(40px, 5.2vw, 72px); }
body.t-evoke .gh-h1 .glogo { height: clamp(110px, 13vw, 190px); }
.gh-h1 { font: 650 clamp(44px, 5.6vw, 84px)/.98 var(--g-font); overflow-wrap: anywhere; letter-spacing: -.04em; margin: 0; padding-bottom: .04em; text-wrap: balance; }
.gh-h1 .sr { position: absolute; }
.gh-line { margin-top: 18px; max-width: 40ch; font: 450 clamp(18px, 1.6vw, 21px)/1.45 var(--g-font); letter-spacing: -.012em; color: var(--g-ink2); }
.gh-meta { margin-top: 12px; font: 500 14px/1.4 var(--g-font); color: var(--g-ink3); font-variant-numeric: tabular-nums; }
.gh-meta b { color: var(--g-ink2); font-weight: 600; }
.gh-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

/* now playing / feature panel */
.gnow, .t-glass .gnow.latest-card { display: flex; flex-direction: column; gap: 14px; padding: 12px; border: 0; border-radius: 30px; color: var(--g-ink); text-decoration: none; box-shadow: inset 0 1px 0 var(--g-rim2), var(--g-shadow); transition: transform .5s var(--g-e); }
.t-glass .gnow.latest-card:hover, .gnow:hover { transform: translateY(-3px); border: 0; }
.gnow-media, .t-glass .gnow .lc-media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: rgba(0, 0, 0, .3); }
.gnow.sq .gnow-media { aspect-ratio: 1; }
.gh-side:has(.gnow.sq) { max-width: 400px; justify-self: end; width: 100%; }
.gnow-media img, .gnow .lc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--g-e); }
.gnow:hover .gnow-media img { transform: scale(1.035); }
.gnow-b { display: flex; flex-direction: column; gap: 5px; padding: 2px 8px 8px; position: relative; z-index: 3; }
.gnow .lc-when { order: 2; font: 600 12.5px/1.2 var(--g-font); letter-spacing: .01em; color: var(--g-ac); }
.gnow .lc-t { order: 1; }
.gnow .gsub { order: 3; }
body.t-evoke .gnow .lc-when { color: #8c5a12; }
.gnow .lc-t { font: 600 17px/1.3 var(--g-font); letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gnow .gsub { font: 450 14px/1.45 var(--g-font); color: var(--g-ink2); }
.gplay { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; translate: -50% -50%; border-radius: 999px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .1)); transition: transform .45s var(--g-e); z-index: 3; }
.gplay .gi { width: 26px; height: 26px; margin-left: 3px; }
.gplay-s { width: 54px; height: 54px; }
.gplay-s .gi { width: 20px; height: 20px; }
a:hover .gplay { transform: scale(1.08); }
.is-playing .gplay { display: none; }
.gnow .mini-player, .gvid .mini-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- sections ---------- */
.gsec { position: relative; padding: clamp(64px, 9vw, 120px) 0 0; color: var(--g-ink); }
.gsec-h { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.gh2 { font: 650 clamp(30px, 4vw, 54px)/1.02 var(--g-font); letter-spacing: -.035em; margin: 0; text-wrap: balance; padding-bottom: .05em; }
.gp { margin-top: 14px; max-width: 46ch; font: 450 18px/1.5 var(--g-font); letter-spacing: -.01em; color: var(--g-ink2); }

/* rail */
.grail-nav { display: none; gap: 10px; }
@media (min-width: 900px) and (hover: hover) { .grail-nav { display: flex; } }
.gico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; border: 0; color: var(--g-ink); cursor: pointer; transition: transform .35s var(--g-e), opacity .3s; }
.gico:hover { transform: scale(1.06); }
.gico[disabled] { opacity: .35; cursor: default; transform: none; }
.gico .gi { width: 20px; height: 20px; position: relative; z-index: 3; }
.grail { display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 420px); gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gl), calc((100vw - 1180px) / 2 + var(--gl))); padding: 4px max(var(--gl), calc((100vw - 1180px) / 2 + var(--gl))) 18px; scrollbar-width: none; }
.grail::-webkit-scrollbar { display: none; }
.gvid { scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; color: var(--g-ink); text-decoration: none; min-width: 0; }
.gvid-m { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .05); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7); }
.gvid-m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--g-e); }
.gvid:hover .gvid-m img { transform: scale(1.04); }
.gvid-m .gplay { opacity: 0; transition: opacity .35s, transform .45s var(--g-e); }
.gvid:hover .gplay, .gvid:focus-visible .gplay { opacity: 1; }
@media (hover: none) { .gvid-m .gplay { opacity: 1; } }
.gvid-t { font: 600 16px/1.32 var(--g-font); letter-spacing: -.012em; padding: 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gvid-s { font: 450 13.5px/1.3 var(--g-font); color: var(--g-ink3); padding: 0 4px; margin-top: -6px; font-variant-numeric: tabular-nums; }

/* playlist: Apple Music style ambient colour from the cover */
.gpl { padding-bottom: clamp(20px, 4vw, 40px); }
.gpl-amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; overflow: hidden; }
.gpl-amb img { width: 100%; height: 100%; object-fit: cover; filter: blur(90px) saturate(1.5); }
.gpl-amb { -webkit-mask-image: radial-gradient(closest-side at 32% 58%, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side at 32% 58%, #000 20%, transparent 100%); }
.gpl-in { position: relative; z-index: 1; display: grid; gap: 34px; align-items: center; }
@media (min-width: 820px) { .gpl-in { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; } }
.gpl-cover { display: block; border-radius: 30px; overflow: hidden; aspect-ratio: 1; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .7s var(--g-e); }
.gpl-cover:hover { transform: translateY(-4px) rotate(-.6deg); }
.gpl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* playlist grid (PUSH IT: four playlists) */
.gpls .gp { margin: -6px 0 26px; }
.gpls-g { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .gpls-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .gpls-g { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gpls-i { border-radius: 28px; padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gpls-c { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 1; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .8); transition: transform .6s var(--g-e); }
.gpls-c:hover { transform: translateY(-3px); }
.gpls-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gpls-t { font: 650 19px/1.2 var(--g-font); letter-spacing: -.015em; margin: 6px 4px 0; }
.gpls-s { font: 450 14px/1.4 var(--g-font); color: var(--g-ink2); margin: 0 4px; flex: 1; }
.gpls-a { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 4px 0; }
.gpls-a .gbtn { height: 42px; padding: 0 18px; font-size: 14px; }
.gpls-more { color: var(--g-ink2); font: 550 14px/1 var(--g-font); text-decoration: none; }
.gpls-more:hover { color: var(--g-ink); }
.gnote { border-radius: 32px; padding: clamp(28px, 5vw, 56px); }

/* artists panel */
.gart-p { border-radius: 36px; padding: clamp(32px, 6vw, 72px); overflow: hidden; }
.gart-bg { position: absolute; inset: 0; z-index: -1; opacity: .55; }
.gart-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(34px) saturate(1.5) brightness(.75); transform: scale(1.3); }
.gart-p > *:not(.gart-bg) { position: relative; z-index: 3; }

/* dock */
.gsec-dock { padding-bottom: clamp(56px, 8vw, 96px); }
.gdock { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 3vw, 34px); }
.gdock-i { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--g-ink2); text-decoration: none; font: 500 13px/1 var(--g-font); }
.gico-l { width: 62px; height: 62px; color: var(--g-ink); }
.gico-l .gi { width: 24px; height: 24px; }
.gdock-i:hover { color: var(--g-ink); }
.gdock-i:hover .gico-l { transform: translateY(-4px) scale(1.05); }

/* company pages keep their content sections: restyle them into the same world */
body.t-glass .page { font-family: var(--g-font); }
body.t-glass .sec .eyebrow, body.t-glass .sec-tag { display: none; }
body.t-glass .h2 { font-family: var(--g-font); font-weight: 650; letter-spacing: -.035em; }
body.t-glass .h2 .grad, body.t-glass .grad { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--g-ac); -webkit-text-fill-color: currentColor; }
body.t-glass .h2 .grad::after { display: none; }
body.t-glass .btn { border-radius: 999px; font-family: var(--g-font); font-weight: 600; }

/* ---------- the one authored moment: the glass condenses over the artwork ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .gh:not(.g-in) .gh-art img { transform: scale(1.1); filter: saturate(.6) blur(8px); }
  html.js .gh:not(.g-in) .gh-copy > * { opacity: 0; transform: translateY(18px); filter: blur(10px); }
  html.js .gh:not(.g-in) .gh-side, html.js .gh:not(.g-in) .gh-top { opacity: 0; transform: translateY(14px) scale(.97); }
  .gh .gh-art img { transition: transform 1.8s var(--g-e), filter 1.4s var(--g-e); }
  .gh .gh-copy > * { transition: opacity .9s var(--g-e), transform 1s var(--g-e), filter 1s var(--g-e); }
  .gh .gh-copy > :nth-child(2) { transition-delay: .08s; } .gh .gh-copy > :nth-child(3) { transition-delay: .16s; }
  .gh .gh-copy > :nth-child(4) { transition-delay: .24s; } .gh .gh-copy > :nth-child(5) { transition-delay: .3s; } .gh .gh-copy > :nth-child(6) { transition-delay: .36s; }
  .gh .gh-side { transition: opacity 1s var(--g-e) .35s, transform 1.1s var(--g-e) .35s; }
  .gh .gh-top { transition: opacity .9s var(--g-e) .2s, transform 1s var(--g-e) .2s; }
}

@media (max-width: 999px) {
  .gh { min-height: auto; padding-top: calc(47vh + env(safe-area-inset-top)); }
  .gh-art, .gh-photo .gh-art { height: 62vh; bottom: auto; aspect-ratio: auto; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%); }
  .gh-scrim { height: 62vh; bottom: auto; background: linear-gradient(0deg, var(--g-bg) 0%, color-mix(in srgb, var(--g-bg) 40%, transparent) 45%, color-mix(in srgb, var(--g-bg) 12%, transparent) 100%); }
  .gh-top { top: calc(74px + env(safe-area-inset-top)); padding: 0 var(--gl); }
  .gseg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .gseg::-webkit-scrollbar { display: none; }
  .gseg a { padding: 9px 13px; font-size: 13px; }
  .gh-mark .gav { width: 64px; height: 64px; }
}

/* legibility floor for the shared nav and footer on glass pages (no text under 11px) */
body.t-glass .nav a, body.t-glass .nav button { font-size: max(11px, 1em); }
body.t-glass footer, body.t-glass footer a, body.t-glass footer small { font-size: max(11.5px, 1em); }

/* ===================== Liquid glass, part 2 (2026-10-12): the company pages' content in glass =====================
   The ambient field is the page's wallpaper: fixed brand-coloured light the glass scrolls over and refracts.
   Every content container (live cards, spotlights, leaderboard, packages, playlists, video hub, chart, beat store,
   credits, links, flow, company cards, player dock) becomes the same material as the hero controls. */
body.t-glass { --amb1: #8e7bff; --amb2: #5aa0ff; --amb3: #ff4d6d; --amb-a: 26%; }
body.t-glass.t-vibes { --amb1: #5aa0ff; --amb2: #ff4d6d; --amb3: #8e7bff; }
body.t-glass.t-gv { --amb1: #5aa0ff; --amb2: #7dd3fc; --amb3: #3b6fd8; }
body.t-glass.t-rv { --amb1: #ff4d6d; --amb2: #ff8a3d; --amb3: #a1286f; }
body.t-glass.t-sv { --amb1: #8e7bff; --amb2: #2dd4bf; --amb3: #4f46e5; }
body.t-glass.t-pi { --amb1: #e4e4e7; --amb2: #71717a; --amb3: #3f3f46; --amb-a: 18%; }
body.t-glass.t-fvbio { --amb1: #a78bfa; --amb2: #f0abfc; --amb3: #6d28d9; }
body.t-glass.t-evoke { --amb1: #9ec1ff; --amb2: #f4c98a; --amb3: #c9b8ff; --amb-a: 42%; }
body.t-glass .page { position: relative; z-index: 0; }
body.t-glass .page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 46% at 12% 22%, color-mix(in srgb, var(--amb1) var(--amb-a), transparent), transparent 72%),
    radial-gradient(40% 44% at 88% 48%, color-mix(in srgb, var(--amb2) var(--amb-a), transparent), transparent 72%),
    radial-gradient(46% 40% at 40% 96%, color-mix(in srgb, var(--amb3) var(--amb-a), transparent), transparent 74%); }
body.t-glass .gh-scrim { background:
    linear-gradient(180deg, color-mix(in srgb, var(--g-bg) 55%, transparent) 0%, transparent 22%),
    linear-gradient(0deg, color-mix(in srgb, var(--g-bg) 70%, transparent) 0%, color-mix(in srgb, var(--g-bg) 55%, transparent) 26%, color-mix(in srgb, var(--g-bg) 14%, transparent) 62%, transparent 82%),
    linear-gradient(90deg, color-mix(in srgb, var(--g-bg) 64%, transparent) 0%, transparent 58%); }
body.t-glass.t-evoke .gh-scrim { background: linear-gradient(0deg, color-mix(in srgb, var(--g-bg) 40%, transparent) 0%, transparent 60%); }
/* section dividers and their glows go: the field and the glass carry the rhythm now */
body.t-glass .sec + .sec::before, body.t-glass .sec + .sec::after { display: none; }
body.t-glass .sec { color: var(--g-ink); }
body.t-glass .sec .lead, body.t-glass .spot-body p, body.t-glass .note, body.t-glass .subh { color: var(--g-ink2); font-family: var(--g-font); }
body.t-glass .subh { font: 650 clamp(22px, 2.4vw, 30px)/1.1 var(--g-font); letter-spacing: -.025em; color: var(--g-ink); text-transform: none; }
body.t-glass .subh::before { display: none; }

/* ---- the shared surface ---- */
body.t-glass :is(.lcard, .btb, .ctb, .board, .pk, .shc, .rows, .cards .card, .hub, .chart, .beats, .kpis, .flow li, .credits .credit, .promo-band, .plist, .conc, .studio) {
  background: var(--g-fill), linear-gradient(var(--g-tint), var(--g-tint));
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border: 0; box-shadow: inset 0 1px 0 var(--g-rim2), inset 0 0 0 1px color-mix(in srgb, var(--g-ink) 9%, transparent), var(--g-shadow); }
body.t-glass.t-evoke :is(.lcard, .btb, .board, .pk, .shc, .rows, .cards .card, .plist, .conc) { color: var(--g-ink); }

/* live cards (the Radar card, now glass): banner stays sharp on top, the panel below is glass */
body.t-glass .lcard { border-radius: 30px; overflow: hidden; }
body.t-glass .lcard:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--g-rim2), inset 0 0 0 1px color-mix(in srgb, var(--ac, var(--g-ac)) 40%, transparent), var(--g-shadow); }
body.t-glass .lc-glow, body.t-glass .lc-leak, body.t-glass .lc-wash { display: none; }
body.t-glass .lc-bg::before { background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--g-bg) 45%, transparent) 100%); }
body.t-glass .lc-av { border-color: color-mix(in srgb, var(--g-bg) 70%, transparent); }
body.t-glass .lc-name a, body.t-glass .lc-num { color: var(--g-ink); font-family: var(--g-font); }
body.t-glass .lc-lab, body.t-glass .lc-foot { color: var(--g-ink3); font-family: var(--g-font); }
body.t-glass .lc-foot { border-top-color: color-mix(in srgb, var(--g-ink) 10%, transparent); }
body.t-glass .lc-stack { gap: 18px; }

/* spotlights */
body.t-glass .spot-body h3 { font-family: var(--g-font); font-weight: 650; letter-spacing: -.035em; color: var(--g-ink); background: none; -webkit-text-fill-color: currentColor; }
body.t-glass .handle { color: var(--g-ink3); }
body.t-glass .kpis { border-radius: 22px; overflow: hidden; margin-bottom: 26px; }
body.t-glass .kpis > div { border-color: color-mix(in srgb, var(--g-ink) 9%, transparent) !important; padding: 16px 18px; }
body.t-glass .kpis dt { color: var(--g-ink3); font-family: var(--g-font); letter-spacing: .02em; text-transform: none; font-size: 12.5px; }
body.t-glass .kpis dd { color: var(--g-ink); font-family: var(--g-font); font-weight: 650; background: none; -webkit-text-fill-color: currentColor; }
body.t-glass .bars i, body.t-glass .bars .fill { background: var(--g-ac); }

/* buttons everywhere on glass pages: pills */
body.t-glass .btn { height: 46px; min-height: 46px; padding: 0 20px; border-radius: 999px; font: 600 14.5px/1 var(--g-font); letter-spacing: -.01em; text-transform: none; color: var(--g-ink);
  border: 0; background: var(--g-fill), linear-gradient(var(--g-tint), var(--g-tint)); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--g-rim2), inset 0 0 0 1px color-mix(in srgb, var(--g-ink) 10%, transparent), 0 10px 26px -14px rgba(0, 0, 0, .5); transition: transform .35s var(--g-e); }
body.t-glass .btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--g-rim2), inset 0 0 0 1px color-mix(in srgb, var(--g-ink) 18%, transparent), 0 14px 30px -14px rgba(0, 0, 0, .55); }
body.t-glass .btn:active { transform: scale(.97); }
body.t-glass .btn.solid { background: var(--g-ink); color: var(--g-bg); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); }
body.t-glass.t-evoke .btn.solid { background: #1d1d22; color: #fff; }

/* toolbars, search, chips, selects */
body.t-glass :is(.btb, .ctb) { border-radius: 24px; padding: 10px 12px; }
body.t-glass .bsearch { border-radius: 999px; border: 0; background: color-mix(in srgb, var(--g-ink) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-ink) 10%, transparent); }
body.t-glass .bsearch input { color: var(--g-ink); font-family: var(--g-font); }
body.t-glass .bsearch:focus-within { box-shadow: inset 0 0 0 1.5px var(--g-ac); }
body.t-glass :is(.fchip, .chip, .bsel, .breset, .bcsv, .bplayall, .breset2, .cmore) { border-radius: 999px; border: 0; font-family: var(--g-font); color: var(--g-ink2);
  background: color-mix(in srgb, var(--g-ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-ink) 9%, transparent); }
body.t-glass :is(.fchip, .chip)[aria-pressed="true"] { background: var(--g-ink); color: var(--g-bg); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
body.t-glass.t-evoke :is(.fchip, .chip)[aria-pressed="true"] { background: #1d1d22; color: #fff; }
body.t-glass .bcount, body.t-glass .ccount, body.t-glass .board-h, body.t-glass .beats-h { color: var(--g-ink3); font-family: var(--g-font); letter-spacing: .02em; }

/* leaderboard */
body.t-glass .board { border-radius: 30px; padding: 8px 12px; margin-top: 14px; }
body.t-glass .board li { border-color: color-mix(in srgb, var(--g-ink) 8%, transparent); border-radius: 18px; }
body.t-glass .board li:hover { background: color-mix(in srgb, var(--g-ink) 6%, transparent); }
body.t-glass .board .meter { background: color-mix(in srgb, var(--g-ink) 8%, transparent); border-radius: 99px; }
body.t-glass .board .meter i { background: var(--g-ac); border-radius: 99px; }
body.t-glass .board .rk { color: var(--g-ink3); }
body.t-glass .board .who b, body.t-glass .board .num b { color: var(--g-ink); font-family: var(--g-font); }
body.t-glass .board-h { padding-left: 24px; padding-right: 24px; }
body.t-glass .conc { border-radius: 24px; padding: 18px; }

/* promotion packages + content tiles (EVOKE shop) */
body.t-glass .pk { border-radius: 26px; }
body.t-glass .pk:hover { transform: translateY(-3px); }
body.t-glass .pk.pk-top { box-shadow: inset 0 1px 0 var(--g-rim2), inset 0 0 0 1.5px color-mix(in srgb, var(--g-ac) 70%, transparent), var(--g-shadow); }
body.t-glass .pk-n, body.t-glass .pk-p { color: var(--g-ink); font-family: var(--g-font); }
body.t-glass .pk-tag, body.t-glass .pk-go { color: var(--g-ac); }
body.t-glass .shc { border-radius: 24px; color: var(--g-ink); }
body.t-glass .shc-img { background: none; }
body.t-glass .shc-t em { color: var(--g-ac); }
body.t-glass .shc-k { color: var(--g-ink2); }
body.t-glass .promo-band { border-radius: 999px; padding: 8px; display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.t-glass .promo-band .btn { box-shadow: none; }
body.t-glass .promo-g { color: var(--g-ink3); padding: 0 12px; }

/* lists: playlists, links */
body.t-glass .plist { border-radius: 24px; padding: 4px 20px; }
body.t-glass .plist li { border-color: color-mix(in srgb, var(--g-ink) 9%, transparent); }
body.t-glass .plist li:last-child { border-bottom: 0; }
body.t-glass .plist a { color: var(--g-ac); }
body.t-glass .rows { border-radius: 30px; padding: 6px 24px; border-top: 0; }
body.t-glass .rows li { border-color: color-mix(in srgb, var(--g-ink) 9%, transparent) !important; }
body.t-glass .rows li:last-child { border-bottom: 0 !important; }
body.t-glass .rows .t, body.t-glass .rows b { color: var(--g-ink); font-family: var(--g-font); }
body.t-glass .rows .m, body.t-glass .rows small { color: var(--g-ink3); }
body.t-glass .rows a.go { color: var(--g-ink2); border-radius: 999px; }

/* company cards ("Also in the group") */
body.t-glass .cards .card { border-radius: 30px; }
body.t-glass .cards .card h3 { color: var(--g-ink); font-family: var(--g-font); }
body.t-glass .cards .card .idx, body.t-glass .cards .card .role { color: var(--g-ink3); }

/* The Vibes: video hub, chart */
body.t-glass .hub { border-radius: 32px; padding: 16px; }
body.t-glass .tabs { border-bottom: 0; gap: 4px; padding: 4px; border-radius: 999px; width: max-content; max-width: 100%; background: color-mix(in srgb, var(--g-ink) 7%, transparent); margin-bottom: 18px; }
body.t-glass .tabs button { border-radius: 999px; font-family: var(--g-font); color: var(--g-ink2); padding: 9px 16px; }
body.t-glass .tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .2); color: var(--g-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px -6px rgba(0, 0, 0, .5); }
body.t-glass .tab-ink { display: none; }
body.t-glass .vcard .thumb { border: 0; border-radius: 20px; box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .8); }
body.t-glass .vcard .vt { color: var(--g-ink); font-family: var(--g-font); }
body.t-glass .vcard .vm { color: var(--g-ink3); font-family: var(--g-font); }
body.t-glass .chart { border-radius: 30px; }

/* prodbyfvbio: beat store, credits, flow, studio */
body.t-glass .beats { border-radius: 30px; padding: 8px 12px; border-top: 0; margin-top: 14px; }
body.t-glass .beat { border-color: color-mix(in srgb, var(--g-ink) 8%, transparent); border-radius: 18px; }
body.t-glass .beat:hover, body.t-glass .beat.playing { background: color-mix(in srgb, var(--g-ac) 12%, transparent); }
body.t-glass .bt, body.t-glass .beat b { color: var(--g-ink); font-family: var(--g-font); }
body.t-glass .bbuy { border-radius: 999px; background: var(--g-ink); color: var(--g-bg); border: 0; font-family: var(--g-font); font-weight: 600; }
body.t-glass .bplay { border-radius: 999px; }
body.t-glass .credits .credit { border-radius: 20px; padding: 10px; }
body.t-glass .credit .ct { color: var(--g-ink); font-family: var(--g-font); }
body.t-glass .credit .ca { color: var(--g-ink3); }
body.t-glass .studio { border-radius: 30px; overflow: hidden; }
body.t-glass .flow { gap: 16px; }
body.t-glass .flow li { border-radius: 26px; padding: 22px; }
body.t-glass .flow li::before { display: none; }
body.t-glass .flow li h3 { font-family: var(--g-font); color: var(--g-ink); }

/* player dock: a floating glass bar instead of a full-width strip */
body.t-glass .dock { left: 50%; right: auto; bottom: 14px; width: min(1180px, calc(100vw - 28px)); translate: -50% 0; border-radius: 28px; border: 0;
  background: var(--g-fill), linear-gradient(var(--g-tint), var(--g-tint)); -webkit-backdrop-filter: blur(34px) saturate(190%); backdrop-filter: blur(34px) saturate(190%);
  box-shadow: inset 0 1px 0 var(--g-rim2), inset 0 0 0 1px color-mix(in srgb, var(--g-ink) 10%, transparent), 0 24px 60px -20px rgba(0, 0, 0, .7); padding: 0 16px; }
body.t-glass .dock::before { display: none; }
body.t-glass .d-art { border-radius: 14px; }
body.t-glass .d-name { text-transform: none; font-family: var(--g-font); }
html.dock-open body.t-glass .page { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }

/* mobile */
@media (max-width: 760px) {
  body.t-glass :is(.btb, .ctb) { border-radius: 22px; }
  body.t-glass .board, body.t-glass .beats { padding: 4px 6px; border-radius: 24px; }
  body.t-glass .rows { padding: 4px 16px; border-radius: 24px; }
  body.t-glass .promo-band { border-radius: 26px; }
  body.t-glass .dock { bottom: 10px; border-radius: 22px; padding: 0 10px; }
}
@media (prefers-reduced-transparency: reduce) {
  body.t-glass :is(.lcard, .btb, .ctb, .board, .pk, .shc, .rows, .cards .card, .hub, .chart, .beats, .kpis, .flow li, .credits .credit, .promo-band, .plist, .conc, .studio, .dock, .btn, .glass) {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--g-bg) 88%, var(--g-ink)); }
}

/* no labels on images: the thumbnail already is the newest upload */
body.t-glass .lc-tag { display: none; }

/* Mobile: the scrim fades out with the artwork. Without the mask it ended at
   62vh at 70% ground and left a hard step over the ambient field. */
@media (max-width: 999px) {
  body.t-glass .gh-scrim { -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%); }
}